<html>
<head></head>
<body>
</body>
</html>
donde <html> y </html> son el comienzo y final de la página web.
<head></head> es el encabezado, donde irá por ejemplo el título u otra cosa invisible al contenido de la página.
<body></body> es el cuerpo de la página, ahí va el código del contenido propiamente dicho.
dentro de esta etiqueta se pueden configurar varios parámetros:
Color de fondo
<body bgcolor=”#FF0000″></body>
Imagen de fondo:
<body background=”URL”> </body>
Color general del texto:
<body text= “#000000”></body>
Márgenes:
<body leftmargin=”10px” topmargin=”10px” rightmargin=”10px” bottommargin=”10px”></body>
Color del link:
<body link= “#FF0000” alink= “#FF0000” vlink= “# 0000FF”></body>
Siendo
* link como sale el enlace.
* alink cuando se la pasa el cursor por encima.
* vlink cuando ya se la ha echo clic anteriormente.
--------------------------------------------------------------------------
Por otro lado dentro de body se puede incluir alguna de las siguientes etiquetas:
<br> es un Salto de línea. (no hace falta cerrarla)
</br>es también un Salto de línea al igual que la anterior.
<p></p> es párrafo y el texto va en su interior. Ejemplo: <p>esto es un parrafo</p>
El texto queda separado con un espacio superior y uno inferior.
Se puede alinear el párrafo completo con las siguientes etiquetas:
<p align="center">Este texto se alineará al centro</p>
<p align="right">Este texto se alineará a la derecha</p>
<p align="left">Este texto se alineará a la izquierda</p>
</br>es también un Salto de línea al igual que la anterior.
<p></p> es párrafo y el texto va en su interior. Ejemplo: <p>esto es un parrafo</p>
El texto queda separado con un espacio superior y uno inferior.
Se puede alinear el párrafo completo con las siguientes etiquetas:
<p align="center">Este texto se alineará al centro</p>
<p align="right">Este texto se alineará a la derecha</p>
<p align="left">Este texto se alineará a la izquierda</p>
<b></b> es negrita. Ejemplo: <b>Hola</b>
<strong></strong> también es negrita. Ejemplo: <strong>otro texto en negrita</strong>
<strong></strong> también es negrita. Ejemplo: <strong>otro texto en negrita</strong>
<i></i> es cursiva. Ejemplo: <i>Hola</i>
<em></em> es también cursiva. Ejemplo: <em>Otras palabras en cursiva</em>
<em></em> es también cursiva. Ejemplo: <em>Otras palabras en cursiva</em>
Se pueden sumar 2 etiquetas, ejemplo negrita y cursiva: <b><i>texto</i></b>
<u></u> es subrayado. Ejemplo: <u>Texto</u>
<strike><strike> es para texto tachado.
<s><s> es para texto tachado.
<del><del> es para texto tachado.
<tt></tt> es el espaciado simple entre las letras de un texto.
<u></u> es subrayado. Ejemplo: <u>Texto</u>
<strike><strike> es para texto tachado.
<s><s> es para texto tachado.
<del><del> es para texto tachado.
<tt></tt> es el espaciado simple entre las letras de un texto.
&iaacute; es í (i con tilde) ejemplo: título = título
otros caracteres:
& &
" “
< <
> >
¿ ¿
<small></small> es para achicar un poco la letra. Ejemplo: <small>letra chica</small>
<big></big> es para agrandar y destacar la letra. Ejemplo: <big>letra grande</big>
otros caracteres:
& &
" “
< <
> >
¿ ¿
<small></small> es para achicar un poco la letra. Ejemplo: <small>letra chica</small>
<big></big> es para agrandar y destacar la letra. Ejemplo: <big>letra grande</big>
<sup></sup> es superindice
<sub></sub> es subindice
<pre></pre> es para que el navegador interprete el texto tal cual está escrito.
<sub></sub> es subindice
<pre></pre> es para que el navegador interprete el texto tal cual está escrito.
------------------------------------------------------
Comentarios:
<!--esto es un comentario-->
<hr width="50%"> con ancho del 50%.
<hr width="550"> con ancho de 550 píxeles.
<hr size="10"> con grosor 10.
<hr align="left" width="70%"> con alineación izquierda al 70%
<hr align="center" width="70%"> con alineación centro al 70%
<hr align="right" width="70%"> con alineación derecha al 70%
<hr width="70%" noshade> con ancho al 70% con noshade que es aspecto sin tridimensionalidad.
<hr width="70%" size="5" noshade> con ancho al 70% con noshade como el anterior y de tamaño 5.
En blogger no funciona el cierto parámetros, pero si en otras webs.
------------------------------------------------------------
Encabezados (títulos) dan distintos tamaños de texto.
<h1> hasta <h6>
Ejemplo:
<h1>Texto1</h1>
<h3>Texto3</h3>
<h6>Texto6</h6>
<hr width="550"> con ancho de 550 píxeles.
<hr size="10"> con grosor 10.
<hr align="left" width="70%"> con alineación izquierda al 70%
<hr align="center" width="70%"> con alineación centro al 70%
<hr align="right" width="70%"> con alineación derecha al 70%
<hr width="70%" noshade> con ancho al 70% con noshade que es aspecto sin tridimensionalidad.
<hr width="70%" size="5" noshade> con ancho al 70% con noshade como el anterior y de tamaño 5.
En blogger no funciona el cierto parámetros, pero si en otras webs.
------------------------------------------------------------
Encabezados (títulos) dan distintos tamaños de texto.
<h1> hasta <h6>
Ejemplo:
<h1>Texto1</h1>
Texto1
<h3>Texto3</h3>
Texto3
<h6>Texto6</h6>
Texto6
genera automáticamente un salto de línea.
--------------------------------------
<ul> abre lista.
acá dento, cada item de la lista irá con <li>texto</li>
</ul> cierra lista.
Ejemplo:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
<ol>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ol>
<ol>
<li value="20">empieza en 20</li>
<li>sigue en 21</li>
<li>luego 22</li>
</ol>
----------------------------------------------------------------------------
Imagen:
<imag> no necesit cierre
atributos:
src indica donde se encuentra la imagen
<img src=”dirección”>
align
left = izquierda
right = derecha
top = arriba
bottom = abajo
middle = al centro
alt= “texto descriptivo al dejar el mouse encima”
height = altura
width = ancho
Border = borde
Ejemplo:
<img src="direccion/imagen.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">
----------------------------------------------------------------------------------
Enlaces (links)
<a>texto enlazado</a>
href=“dir_del_enlace” indica la dirección del enlace
Ejmplo:
<a href=“https://www.google.com”>Ir a Google ahora</a>
Dirección absoluta
https://www.....
Dirección relativa
/imagen/index.html
la parte que falta, el navegador lo genera de la propia página en la que está el enlace
Forma en las que se accede a la url:
_self: está por defecto y se abrirá en el mismo marco en el que está alojado.
_blank: en una venta a parte.
_top: elimina los marcos y abre en la ventan original (sin marcos)
_parent: Muestra la nueva página en el <frameset> que contiene al marco donde se encuentra alojado el enlace.
<a href="https://www.google.com" target="_blank">clic para ir a google</a>
Anclas html:
En el lugar a donde quiero llegar se escribe el código:
<a name="ancla">
Crear el enlace que conduce así:
<a href= “#ancla”>Enlace para acceder al ancla</a>
-------------------------------------------
Formulario:
<form> todo aquí dentro es del formulario </form>
"action" indica el tipo de acción que va a realizar el formulario (enviar)
<form action=”dirección completa del archivo que recibe la información”> </form>
<form action=mailto:direcciondelcorreo@correo.com></form>
"method" indica de que modo será enviado.
"get" indica que los datos enviados serán adjuntados en la barra de dirección del cliente al final de la url, después de un signo de interrogación de cierre ?. Si se envía más de una dato, estos irán separados por &.
"post" indica que el envío forma parte del cuerpo de la petición.
"enctype" indica la forma en que viajará la información enviada.
el más común es modo texto: enctype=”text/plain”
Ejemplo:
<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form>
cada campo cuadro de texto, se define con <input>
<input type="text" name="nombredelacaja">
las características están en este post:
http://cursos15.blogspot.com.ar/2017/11/caja-de-texto-en-html.html
---------------------------------
Listas de selección:
<select name="nombredelista">
<option>casa</option>
<option>Auto</option>
<option>Dinero</option>
</select>
ejemplo:
Para cambiar su aspecto se podrá poner un tamaño:
<select name="nombredelista" size="2">
<option>casa</option>
<option>Auto</option>
<option>Dinero</option>
</select>
Se puedeindicar que esté disponible la selección de varios ítems mediante las teclas ctrl y shif, con el atributo multiple.
<select name="nombredelista" size="2" multiple>
<option>casa</option>
<option>Auto</option>
<option>Dinero</option>
</select>
Podemos hacer que se seleccione por defecto un ítem de la lista ejemplo dinero, con selected.
<select name="nombredelista">
<option>casa</option>
<option>Auto</option>
<option selected>Dinero</option>
</select>
--------------------------------------
<ul> abre lista.
acá dento, cada item de la lista irá con <li>texto</li>
</ul> cierra lista.
Ejemplo:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
- item 1
- item 2
- item 3
- item 4
- item 5
<ol>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ol>
- uno
- dos
- tres
<ol>
<li value="20">empieza en 20</li>
<li>sigue en 21</li>
<li>luego 22</li>
</ol>
- empieza en 20
- sigue en 21
- luego 22
----------------------------------------------------------------------------
Imagen:
<imag> no necesit cierre
atributos:
src indica donde se encuentra la imagen
<img src=”dirección”>
align
left = izquierda
right = derecha
top = arriba
bottom = abajo
middle = al centro
alt= “texto descriptivo al dejar el mouse encima”
height = altura
width = ancho
Border = borde
Ejemplo:
<img src="direccion/imagen.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">
----------------------------------------------------------------------------------
Enlaces (links)
<a>texto enlazado</a>
href=“dir_del_enlace” indica la dirección del enlace
Ejmplo:
<a href=“https://www.google.com”>Ir a Google ahora</a>
Dirección absoluta
https://www.....
Dirección relativa
/imagen/index.html
la parte que falta, el navegador lo genera de la propia página en la que está el enlace
Forma en las que se accede a la url:
_self: está por defecto y se abrirá en el mismo marco en el que está alojado.
_blank: en una venta a parte.
_top: elimina los marcos y abre en la ventan original (sin marcos)
_parent: Muestra la nueva página en el <frameset> que contiene al marco donde se encuentra alojado el enlace.
<a href="https://www.google.com" target="_blank">clic para ir a google</a>
Anclas html:
En el lugar a donde quiero llegar se escribe el código:
<a name="ancla">
Crear el enlace que conduce así:
<a href= “#ancla”>Enlace para acceder al ancla</a>
-------------------------------------------
Formulario:
<form> todo aquí dentro es del formulario </form>
"action" indica el tipo de acción que va a realizar el formulario (enviar)
<form action=”dirección completa del archivo que recibe la información”> </form>
<form action=mailto:direcciondelcorreo@correo.com></form>
"method" indica de que modo será enviado.
"get" indica que los datos enviados serán adjuntados en la barra de dirección del cliente al final de la url, después de un signo de interrogación de cierre ?. Si se envía más de una dato, estos irán separados por &.
"post" indica que el envío forma parte del cuerpo de la petición.
"enctype" indica la forma en que viajará la información enviada.
el más común es modo texto: enctype=”text/plain”
Ejemplo:
<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form>
cada campo cuadro de texto, se define con <input>
<input type="text" name="nombredelacaja">
las características están en este post:
http://cursos15.blogspot.com.ar/2017/11/caja-de-texto-en-html.html
---------------------------------
Listas de selección:
<select name="nombredelista">
<option>casa</option>
<option>Auto</option>
<option>Dinero</option>
</select>
ejemplo:
Para cambiar su aspecto se podrá poner un tamaño:
<select name="nombredelista" size="2">
<option>casa</option>
<option>Auto</option>
<option>Dinero</option>
</select>
Se puedeindicar que esté disponible la selección de varios ítems mediante las teclas ctrl y shif, con el atributo multiple.
<select name="nombredelista" size="2" multiple>
<option>casa</option>
<option>Auto</option>
<option>Dinero</option>
</select>
Podemos hacer que se seleccione por defecto un ítem de la lista ejemplo dinero, con selected.
<select name="nombredelista">
<option>casa</option>
<option>Auto</option>
<option selected>Dinero</option>
</select>
Se le puede asignar un numero o una letra a cada item para gestionar sus datos.
<select name="nombredelista">
<option value="1">casa</option>
<option value="2">Auto</option>
<option selected value="3">Dinero</option>
</select>
El dato seleccionado será nombredelista=3 por ejemplo
--------------------------------
Lista de botones Radio Button (solo permite elegir una sola opción siempre y cuando los nombres de cada opción sean los mismo)
<input type="radio" name="nombre" value="1">Uno
<br>
<input type="radio" name="nombre" value="2">Dos
<br>
<input type="radio" name="nombre" value="3">Tres
Uno
Dos
Tres
para dejar uno marcado por defecto agregar chequed
<input type="radio" name="nombre" value="2" checked>Dos
<select name="nombredelista">
<option value="1">casa</option>
<option value="2">Auto</option>
<option selected value="3">Dinero</option>
</select>
El dato seleccionado será nombredelista=3 por ejemplo
--------------------------------
Lista de botones Radio Button (solo permite elegir una sola opción siempre y cuando los nombres de cada opción sean los mismo)
<input type="radio" name="nombre" value="1">Uno
<br>
<input type="radio" name="nombre" value="2">Dos
<br>
<input type="radio" name="nombre" value="3">Tres
Uno
Dos
Tres
para dejar uno marcado por defecto agregar chequed
<input type="radio" name="nombre" value="2" checked>Dos
------------------------------
Listas de cajas: checkbox (permite elegir múltiples opciones)
<input type="checkbox" name="nombreu" value="1">UNO
<br>
<input type="checkbox" name="nombreu" value="2" checked>DOS
<br>
<input type="checkbox" name="nombreu" value="3">TRES
UNO
DOS
TRES
-------------------------------------------------
Botón para enviar en un formulario
<input type="submit" value="texto del boton">
Para resetear la información del formulario: (borrar la info)
<input type="reset" value="Restablecer">
----------------------------
Marquecina ejemplo:
<marquee bgcolor="#FFFFFF" direction="left" loop="infinite" scrollamount="5" scrolldelay="100" width="50%">Esto es un ejemplo</marquee>
----------------------------------------------------
Fin del post!
Listas de cajas: checkbox (permite elegir múltiples opciones)
<input type="checkbox" name="nombreu" value="1">UNO
<br>
<input type="checkbox" name="nombreu" value="2" checked>DOS
<br>
<input type="checkbox" name="nombreu" value="3">TRES
UNO
DOS
TRES
-------------------------------------------------
Botón para enviar en un formulario
<input type="submit" value="texto del boton">
Para resetear la información del formulario: (borrar la info)
<input type="reset" value="Restablecer">
----------------------------
Marquecina ejemplo:
<marquee bgcolor="#FFFFFF" direction="left" loop="infinite" scrollamount="5" scrolldelay="100" width="50%">Esto es un ejemplo</marquee>
----------------------------------------------------
Fin del post!