¿Cómo les va?; espero que muy bien (...).
Antes que nada, vale aclarar que esta es una pequeña guía ESTRICTAMENTE reservada para principiantes en esto que es HTML, ni más ni menos, solo es una pequeña guía en la que les enseño, con palabras que TODOS podamos entender, como hacer una página con extensión HTML (no enseño a montarla a un servidor, solo a crearla; si alguien necesita montar una página y tiene alguna duda que pregunte por MP.).
Sin más que decir, comencemos.
El lenguaje HTML es el lenguaje universal por el cual se crean las páginas WEB. Sus siglas viene de HyperText Markup Language que subtitulado al español sería algo así: Lenguaje de Marcado de Hipertexto. El HTML es solo para crear páginas estáticas, es decir, que no interactuan con el usuario. Las páginas HTML son interpretadas por el navegador con el fin de traducir este complejo lenguaje (por así decirlo) para que el lector visualice el contenido de la página cómodamente desde su computadora. Este lenguaje, HTML, trabaja con ETIQUETAS, que le dicen al navegador que tiene que hacer y como lo tiene que hacer (cabe destacar que cada navegador trabaja de una manera diferente; motivo por el cual, cuando se crea una página HTML habría que probarla en varios navegadores antes de subrla).
Elementos a utilizar:
Editor de texto SIN FORMATO (Bloc de notas de windows u otros).
Navegador (Google Chrome; Internet Explorer; Mozilla Firefox; Opera; etc.).
Todo documento de tipo HTML constará SIEMPRE de estas ETIQUETAS:
<html> esta etiqueta muestra el principio de un documento tipo HTML
</html> esta etiqueta muestra el final de un documento tipo HTML
<head> esta etiqueta es la cabecera de la página, o más bien, el principio; sería como el prólogo de la página.
</head> esta etiqueta muestra el cierre de la cabecera.
<title>esta etique ta muestra el título de la página; que iría en la pestaña del navegador.
</title> esta etiqueta muestra el cierre del título.
<body> esta etiqueta muestra el cuerpo del documento; texto, imagenes, videos y otras cosas a mostrar en la página.
</body> esta etiqueta es el cierre de body.
NOTA: cada etiqueta empieza con <...> y se cierra con </...>
Vale aclarar que estas etiquetas van ordenadas de otra forma; mirar nuestro primer documento.
Abrimos el bloc de notas u otro editor de texto SIN FORMATO y escribimos:
<html>
<head>
<title> escribí el título de tu página </title>
</head>
<body> escribí algo que quieras mostrar en tu página
</body>
</html>
Cómo podran ver, acá si estan puestas las etiquetas de forma correcta, lo cual paso a explicar:
TODAS las etiquetas son de lenguaje HTML; por eso todo lo que se escriba va dentro de <html> y </html>.
El titulo se escribe siempre dentro de las etiquetas head; por eso se abre el titulo entre medio de <head> y </head>.
Luego y el cuerpo de la página, escribis lo que querés y luego se cierra el documento </html>
Nota; guardar el documento con la extensión .html (si vas a crear un sitio web, agrupa todas las páginas HTML que vayas a usar en ese sitio en la misma carpeta)
Ahora ejecutenlo con un navegador y fijense que tal (:
Encerrando una palabra en las etiquetas <b> y </b> queda en NEGRITA.
Encerrando una palabra en las etiquetas <i> y </i> queda en CURSIVA.
Encerrando una palabra en las etiquetas <u> y </u> queda SUBRAYADA.
Encerrando una palabra en las etiquetas <div align=left> y </div> el texto seleccionado se ALINEA a la izquierda.
Encerrando una palabra en las etiquetas <div align=right> y </div> el texto seleccionado se ALINEA a la derecha.
Encerrando una palabra en las etiquetas <div align=center> y </div> el texto seleccionado se ALINEA centrado.
Encerrando una palabra en las etiquetas <pre> y </pre> se le dice al navegador que el texto seleccionado por esas etiquetas NO tengan formato, es decir, que si ustedes ponen una palabra con 5 espacios entre cada una de sus letras, el navegador va a mostrar solo con un espacio por letra, ya que SOLO RECONOCE UN ESPACIO ENTRE CARACTERES; pero para que se pongan los espacios que quieran, solo encierren el texto que le quieran hacer varios espacios o saltos de linea y le ponen <pre> y </pre>
NOTA: los saltos de lineas tampoco los reconoce el navegador, ya que, como dije antes, SOLO RECONOCE UN ESPACIO ENTRE CARACTERES.
Aunque hay una forma para hacer un salto de linea sin necesidad de abrir etiquetas PRE. Al tener un texto al cual se quiere hacer salto de linea, solo hay que agregar <br> al final de ese texto. Esta etiqueta NO lleva cierre, solo se coloca esa etiqueta al final del texto al cual se le quiera hacer salto de linea, presionan enter y comienzan a escribir debajo.
Encerrando una palabra en las etiquetas <font size= (numero del 1 al 7)> y </font> se le da otro tamaño al caracter seleccionado.
Encerrando una palabra en las etiquetas <font color=#(codigo del color)> y </font> se le da color al caracter seleccionado.
NOTA: el tamaño normal de los caracteres es de 3 puntos, asi que se al FONT SIZE se le da valor de 3, los caracteres seguirían iguales, si se le da menor, se achican y mayor a 3 se agrandan.
Aclaro también que los códigos de color NO tienen porque acordarselos de memoria, simplemente busquenlos y copienlos.
Encerrando una palabra en las etiquetas <h=(solo numero del 1 al 6> y </h=(numero)> se coloca el texto seleccionado como titulo.
NOTA: el <h=1> tendra más valor que el <h=2> y así consecutivamente; cuando digo más valor me refiero a la importancia del título.
Encerrando un texto en las etiquetas <ul> y </ul> se crea una lista DESORDENADA; cada tip de la lista se marca con viñetas (puntos), cada tip de esa lista se marca con las etiquetas <li> y </li>.
Encerrando un texto en las etiquetas <ol> y </ol> se crea una lista ORDENADA; cada tip de la lista se enumera.
Abrimos un editor de texto SIN FORMATO y escribimos:
<html>
<head> <title> Primavera y verano </title> </head>
<body> <b> <u> Meses de primavera: </u> </b>
<ul> <li> septiembre </li>
<li> octubre </li>
<li> noviembre </li> </ul>
<font color=#000FF> <font size=5> Meses de verano </font> </font>
<ol> <li> diciembre </li>
<il>enero </li>
<li> febrero </li>
<pre> gracias por visitar nuestra pagina,
para ver datos de otoño e invierno haga click aca </pre>
</body>
</html>
NOTA: para practicar cambien los codigos de color y tamaño; agreguen más elementos a las listas, etc. Esto es un ejemplo, nada más.
Lo guardamos como index.html
He aquí unas de las propiedades más elementales del HTML; los links o enlaces.
Encerrando una palabra entre las etiquetas <a href=(nombre del documento a llevar)> y </a> se crea un link.
Ahora haremos que un simple click en una pagina nos lleve a otra pagina.
Un ejemplo:
Abran DOS editores de texto sin FORMATO.
En el primer editor, escribimos esto:
<html>
<head> <title> Primavera y verano </title> </head>
<body> <b> <u> Meses de primavera: </u> </b>
<ul> <li> septiembre </li>
<li> octubre </li>
<li> noviembre </li> </ul>
<font color=#000FF> <font size=5> Meses de verano </font> </font>
<ol> <li> diciembre </li>
<il>enero </li>
<li> febrero </li>
<pre> gracias por visitar nuestra pagina,
para ver datos de otoño e invierno haga click <a href=invierno.html> aca </a> </pre>
</body>
</html>
NOTA: como podran ver el documento al cual hice referencia en el link no existe aún; por eso lo creamos con el otro editor.
En este editor ponemos los datos de otoño e invierno en lugar de primlavera y verano y los guardamos con el nombre invierno.html
Escribimos:
<html>
<head> <title> Otoño e invierno </title> </head>
<body> <b> <u> Meses de otoño: </u> </b>
<ul> <li> marzo </li>
<li> abril </li>
<li> mayo </li> </ul>
<font color=#000FF> <font size=5> Meses de Invierno </font> </font>
<ol> <li> junio </li>
<il> julio </li>
<li> agosto </li>
<pre> gracias por visitar nuestra pagina,
para ver datos de primavera y verano haga click <a href=index.html>aca</a> </pre>
</body>
</html>
NOTA: este documento lo guardamos como invierno.html
También acá agregamos un link; que lleva al documento previo.
Vean como quedó.
Para agregar una imagen al documento solo se debe abrir la siguiente etiqueta: <img src=(nombre del documento)>
NOTA: esta etiqueta NO se cierra.
Para alinear la imagen; se le agrega lo siguiente:
<img src=(nombre del documento) align=top> alinea arriba
<img src=(nombre del documento) align=middle> alinea al medio
<img src=(nombre del documento) align=bottom> alinea abajo
<img src=(nombre del documento) align=left> alinea izquierda
<img src=(nombre del documento) align=right> alinea derecha
Para darle altura y ancho en pixeles <img src=(nombre del documento) width=(numero de altura) height=(numero de ancho)>
Lo mismo pasa con el borde: <img src=(nombre del documento) border=(numero)%>
Nota se le agrega el % ya que el borde se visualiza en pixeles.
Para hacer que una imagen funciona como enlace: <a href=(nombre de documento)> <img src=(nombre de la imagen)> </a>
MUCHAS GRACIAS POR SU ATENCIÓN; si les sirvió comenten y si falta algo o no entienden algo, entonces sus críticas constructivas serán cordialmente bienvenidas
PD: si alguien quiere hacer una página web y necesita ayuda; que se contacte conmigo y yo lo ayudo; mi mail es tom.-95@hotmail.com
Antes que nada, vale aclarar que esta es una pequeña guía ESTRICTAMENTE reservada para principiantes en esto que es HTML, ni más ni menos, solo es una pequeña guía en la que les enseño, con palabras que TODOS podamos entender, como hacer una página con extensión HTML (no enseño a montarla a un servidor, solo a crearla; si alguien necesita montar una página y tiene alguna duda que pregunte por MP.).
Sin más que decir, comencemos.
HTML
El lenguaje HTML es el lenguaje universal por el cual se crean las páginas WEB. Sus siglas viene de HyperText Markup Language que subtitulado al español sería algo así: Lenguaje de Marcado de Hipertexto. El HTML es solo para crear páginas estáticas, es decir, que no interactuan con el usuario. Las páginas HTML son interpretadas por el navegador con el fin de traducir este complejo lenguaje (por así decirlo) para que el lector visualice el contenido de la página cómodamente desde su computadora. Este lenguaje, HTML, trabaja con ETIQUETAS, que le dicen al navegador que tiene que hacer y como lo tiene que hacer (cabe destacar que cada navegador trabaja de una manera diferente; motivo por el cual, cuando se crea una página HTML habría que probarla en varios navegadores antes de subrla).
Elementos a utilizar:
Editor de texto SIN FORMATO (Bloc de notas de windows u otros).
Navegador (Google Chrome; Internet Explorer; Mozilla Firefox; Opera; etc.).
Documento mínimo
Todo documento de tipo HTML constará SIEMPRE de estas ETIQUETAS:
<html> esta etiqueta muestra el principio de un documento tipo HTML
</html> esta etiqueta muestra el final de un documento tipo HTML
<head> esta etiqueta es la cabecera de la página, o más bien, el principio; sería como el prólogo de la página.
</head> esta etiqueta muestra el cierre de la cabecera.
<title>esta etique ta muestra el título de la página; que iría en la pestaña del navegador.
</title> esta etiqueta muestra el cierre del título.
<body> esta etiqueta muestra el cuerpo del documento; texto, imagenes, videos y otras cosas a mostrar en la página.
</body> esta etiqueta es el cierre de body.
NOTA: cada etiqueta empieza con <...> y se cierra con </...>
Vale aclarar que estas etiquetas van ordenadas de otra forma; mirar nuestro primer documento.
Nuestro primer documento
Abrimos el bloc de notas u otro editor de texto SIN FORMATO y escribimos:
<html>
<head>
<title> escribí el título de tu página </title>
</head>
<body> escribí algo que quieras mostrar en tu página
</body>
</html>
Cómo podran ver, acá si estan puestas las etiquetas de forma correcta, lo cual paso a explicar:
TODAS las etiquetas son de lenguaje HTML; por eso todo lo que se escriba va dentro de <html> y </html>.
El titulo se escribe siempre dentro de las etiquetas head; por eso se abre el titulo entre medio de <head> y </head>.
Luego y el cuerpo de la página, escribis lo que querés y luego se cierra el documento </html>
Nota; guardar el documento con la extensión .html (si vas a crear un sitio web, agrupa todas las páginas HTML que vayas a usar en ese sitio en la misma carpeta)
Ahora ejecutenlo con un navegador y fijense que tal (:
Etiquetas para el texto
Encerrando una palabra en las etiquetas <b> y </b> queda en NEGRITA.
Encerrando una palabra en las etiquetas <i> y </i> queda en CURSIVA.
Encerrando una palabra en las etiquetas <u> y </u> queda SUBRAYADA.
Encerrando una palabra en las etiquetas <div align=left> y </div> el texto seleccionado se ALINEA a la izquierda.
Encerrando una palabra en las etiquetas <div align=right> y </div> el texto seleccionado se ALINEA a la derecha.
Encerrando una palabra en las etiquetas <div align=center> y </div> el texto seleccionado se ALINEA centrado.
Encerrando una palabra en las etiquetas <pre> y </pre> se le dice al navegador que el texto seleccionado por esas etiquetas NO tengan formato, es decir, que si ustedes ponen una palabra con 5 espacios entre cada una de sus letras, el navegador va a mostrar solo con un espacio por letra, ya que SOLO RECONOCE UN ESPACIO ENTRE CARACTERES; pero para que se pongan los espacios que quieran, solo encierren el texto que le quieran hacer varios espacios o saltos de linea y le ponen <pre> y </pre>
NOTA: los saltos de lineas tampoco los reconoce el navegador, ya que, como dije antes, SOLO RECONOCE UN ESPACIO ENTRE CARACTERES.
Aunque hay una forma para hacer un salto de linea sin necesidad de abrir etiquetas PRE. Al tener un texto al cual se quiere hacer salto de linea, solo hay que agregar <br> al final de ese texto. Esta etiqueta NO lleva cierre, solo se coloca esa etiqueta al final del texto al cual se le quiera hacer salto de linea, presionan enter y comienzan a escribir debajo.
Encerrando una palabra en las etiquetas <font size= (numero del 1 al 7)> y </font> se le da otro tamaño al caracter seleccionado.
Encerrando una palabra en las etiquetas <font color=#(codigo del color)> y </font> se le da color al caracter seleccionado.
NOTA: el tamaño normal de los caracteres es de 3 puntos, asi que se al FONT SIZE se le da valor de 3, los caracteres seguirían iguales, si se le da menor, se achican y mayor a 3 se agrandan.
Aclaro también que los códigos de color NO tienen porque acordarselos de memoria, simplemente busquenlos y copienlos.
Títulos y listas
Encerrando una palabra en las etiquetas <h=(solo numero del 1 al 6> y </h=(numero)> se coloca el texto seleccionado como titulo.
NOTA: el <h=1> tendra más valor que el <h=2> y así consecutivamente; cuando digo más valor me refiero a la importancia del título.
Encerrando un texto en las etiquetas <ul> y </ul> se crea una lista DESORDENADA; cada tip de la lista se marca con viñetas (puntos), cada tip de esa lista se marca con las etiquetas <li> y </li>.
Encerrando un texto en las etiquetas <ol> y </ol> se crea una lista ORDENADA; cada tip de la lista se enumera.
Nuestro segundo documento
Abrimos un editor de texto SIN FORMATO y escribimos:
<html>
<head> <title> Primavera y verano </title> </head>
<body> <b> <u> Meses de primavera: </u> </b>
<ul> <li> septiembre </li>
<li> octubre </li>
<li> noviembre </li> </ul>
<font color=#000FF> <font size=5> Meses de verano </font> </font>
<ol> <li> diciembre </li>
<il>enero </li>
<li> febrero </li>
<pre> gracias por visitar nuestra pagina,
para ver datos de otoño e invierno haga click aca </pre>
</body>
</html>
NOTA: para practicar cambien los codigos de color y tamaño; agreguen más elementos a las listas, etc. Esto es un ejemplo, nada más.
Lo guardamos como index.html
Enlaces
He aquí unas de las propiedades más elementales del HTML; los links o enlaces.
Encerrando una palabra entre las etiquetas <a href=(nombre del documento a llevar)> y </a> se crea un link.
Ahora haremos que un simple click en una pagina nos lleve a otra pagina.
Un ejemplo:
Abran DOS editores de texto sin FORMATO.
En el primer editor, escribimos esto:
<html>
<head> <title> Primavera y verano </title> </head>
<body> <b> <u> Meses de primavera: </u> </b>
<ul> <li> septiembre </li>
<li> octubre </li>
<li> noviembre </li> </ul>
<font color=#000FF> <font size=5> Meses de verano </font> </font>
<ol> <li> diciembre </li>
<il>enero </li>
<li> febrero </li>
<pre> gracias por visitar nuestra pagina,
para ver datos de otoño e invierno haga click <a href=invierno.html> aca </a> </pre>
</body>
</html>
NOTA: como podran ver el documento al cual hice referencia en el link no existe aún; por eso lo creamos con el otro editor.
En este editor ponemos los datos de otoño e invierno en lugar de primlavera y verano y los guardamos con el nombre invierno.html
Escribimos:
<html>
<head> <title> Otoño e invierno </title> </head>
<body> <b> <u> Meses de otoño: </u> </b>
<ul> <li> marzo </li>
<li> abril </li>
<li> mayo </li> </ul>
<font color=#000FF> <font size=5> Meses de Invierno </font> </font>
<ol> <li> junio </li>
<il> julio </li>
<li> agosto </li>
<pre> gracias por visitar nuestra pagina,
para ver datos de primavera y verano haga click <a href=index.html>aca</a> </pre>
</body>
</html>
NOTA: este documento lo guardamos como invierno.html
También acá agregamos un link; que lleva al documento previo.
Vean como quedó.
Imagenes
Para agregar una imagen al documento solo se debe abrir la siguiente etiqueta: <img src=(nombre del documento)>
NOTA: esta etiqueta NO se cierra.
Para alinear la imagen; se le agrega lo siguiente:
<img src=(nombre del documento) align=top> alinea arriba
<img src=(nombre del documento) align=middle> alinea al medio
<img src=(nombre del documento) align=bottom> alinea abajo
<img src=(nombre del documento) align=left> alinea izquierda
<img src=(nombre del documento) align=right> alinea derecha
Para darle altura y ancho en pixeles <img src=(nombre del documento) width=(numero de altura) height=(numero de ancho)>
Lo mismo pasa con el borde: <img src=(nombre del documento) border=(numero)%>
Nota se le agrega el % ya que el borde se visualiza en pixeles.
Para hacer que una imagen funciona como enlace: <a href=(nombre de documento)> <img src=(nombre de la imagen)> </a>
MUCHAS GRACIAS POR SU ATENCIÓN; si les sirvió comenten y si falta algo o no entienden algo, entonces sus críticas constructivas serán cordialmente bienvenidas
PD: si alguien quiere hacer una página web y necesita ayuda; que se contacte conmigo y yo lo ayudo; mi mail es tom.-95@hotmail.com