Html tutorial: Etiquetas, la creación de una página Web básica.
Tutorial Html : Conceptos básicos. En este artículo se explica paso a paso, el principio esencial del lenguaje HTML (HyperText Markup Language) el uso de las etiquetas (tags), y la creación de una página Web básica.
HTML5 para iOS y Android
 |
| HTML 5. Para desarrolladores |
HTML5 para iOS y Android
Técnicas alternativas JavaScript,
MySQL y PHP (iPhone eiPad)
Desarrollo de aplicaciones Android
Realiza tus propias aplicaciones
MySQL y PHP (iPhone eiPad)
Desarrollo de aplicaciones Android
Realiza tus propias aplicaciones
y widgets, herramientas App
Anucios patrocinados...
Capítulo 1.
El uso de las etiquetas funciona de la siguiente manera.
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por
claridad, se usarán en este manual sólamente las mayúsculas
<HTML> [Todo el documento] </HTML>
El documento en sí está dividido en dos zonas principales:
El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro del encabezamiento hay información del documento, que no se ve en la pantalla
principal, principalmente el título del documento, comprendido entre las etiquetas <TITLE> y
</TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los
demás cuando añadan nuestra página a su bookmark (o agenda de direcciones).
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto,
imágenes, etc.)
Por tanto, la estructura queda de esta manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
Antes de crear nuestra primera página, unas consideraciones sobre el texto: Cuando escribimos
en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se
acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto
en distintos párrafos debemos usar la etiqueta <P>, (que no tiene su correspondiente etiqueta de
cierre </P>)
Te sirvió de ayuda? Comenta esta entrada...
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por
claridad, se usarán en este manual sólamente las mayúsculas
Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento
HTML debe estar entre las etiquetas <HTML> y </HTML>:
HTML debe estar entre las etiquetas <HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
El documento en sí está dividido en dos zonas principales:
El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro del encabezamiento hay información del documento, que no se ve en la pantalla
principal, principalmente el título del documento, comprendido entre las etiquetas <TITLE> y
</TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los
demás cuando añadan nuestra página a su bookmark (o agenda de direcciones).
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto,
imágenes, etc.)
Por tanto, la estructura queda de esta manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
Antes de crear nuestra primera página, unas consideraciones sobre el texto: Cuando escribimos
en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se
acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto
en distintos párrafos debemos usar la etiqueta <P>, (que no tiene su correspondiente etiqueta de
cierre </P>)
El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y
</H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el
correspondiente al número 1. Puedes experimentar en el ejemplo que sigue, cambiando el
número para comprobar el efecto que se logra.
Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER>. Nos centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.
También tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR>
(no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como
la pantalla, y con la apariencia de estar embutida sobre el fondo, como se puede observar a
continuación:
</H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el
correspondiente al número 1. Puedes experimentar en el ejemplo que sigue, cambiando el
número para comprobar el efecto que se logra.
Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER>. Nos centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.
También tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR>
(no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como
la pantalla, y con la apariencia de estar embutida sobre el fondo, como se puede observar a
continuación:
Ejemplo práctico:
En el procesador de texto copiamos lo siguiente.
<HTML>
<HEAD>
<TITLE> Mi pagina del Web - 1 </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera pagina </CENTER> </H1>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla. Como el
lenguaje HTML no es dificil, pronto estare en condiciones de hacer
En el procesador de texto copiamos lo siguiente.
<HTML>
<HEAD>
<TITLE> Mi pagina del Web - 1 </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera pagina </CENTER> </H1>
<HR>
Esta es mi primera pagina, aunque todavia es muy sencilla. Como el
lenguaje HTML no es dificil, pronto estare en condiciones de hacer
cosas mas interesantes.
<P> Aqui va un segundo parrafo.
</BODY>
</HTML>
Las líneas en blanco y las indentaciones del texto se han puesto para mayor claridad, pero no
son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es el orden
correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en
el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en
estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo
contrario se producirían errores.
Obsérvese además la falta de los acentos. Se hablará más adelante sobre el motivo de ello.
Guardamos el fichero en el procesador de textos ( Blog de notas) con el nombre de mipag1.html y lo cargamos en el navegador. Ejecutar esta acción para ver los resultados...
</HTML>
Las líneas en blanco y las indentaciones del texto se han puesto para mayor claridad, pero no
son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es el orden
correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en
el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en
estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo
contrario se producirían errores.
Obsérvese además la falta de los acentos. Se hablará más adelante sobre el motivo de ello.
Guardamos el fichero en el procesador de textos ( Blog de notas) con el nombre de mipag1.html y lo cargamos en el navegador. Ejecutar esta acción para ver los resultados...
Habrá un fichero distinto para cada capítulo; conviene crear un directorio específico e irlos
guardando en él, para poder repasar lo aprendido, aparte de que pueden ser necesarios para
ejecutar otros ejemplos prácticos.
En el próximo tutorial: Iremos aprendiendo a dar forma al texto. Mientras tanto vayan practicando lo tratado en esta entrada.
guardando en él, para poder repasar lo aprendido, aparte de que pueden ser necesarios para
ejecutar otros ejemplos prácticos.
En el próximo tutorial: Iremos aprendiendo a dar forma al texto. Mientras tanto vayan practicando lo tratado en esta entrada.
Te sirvió de ayuda? Comenta esta entrada...
Comentarios