Continuamos creando nuestra página estática
Ya hemos aprendido que hmtl es un lenguaje de descripción de página que utiliza unas palabras especiales llamadas etiquetas. Escribiendo el contenido entre las etiquetas vamos indicando como debe mostrarse, si es un título, una sección, un encabezado, etc..
Sencillo verdad? Recuerda que utilizamos las etiquetas <body> , <header> , <p>, y otras. Así mismo aprendimos que deben cerrase, como por ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<article>
<section>
<header>
<h2>Título 1 dentro de encabezado de section </h2>
</header>
<p>Este artículo consta de de una cabecera y una sección. Dentro de la sección está este párrafo</p>
</section>
<section>
<header>
<h2>Título 2 dentro de encabezado de section</h2>
</header>
<p>Párrafo dentro de sección 2 del artículo. Hemos creado un artículo que tienes dos secciones. Con un título cada una</p>
</section>
</article>
<footer>
</footer>
</body>
<html>
¿Alguna duda?
Lo que hemos hecho es crear un documento html.
Hemos especidicado que es html, escribiendo <!DOCTYPE html>.
Depués hemos indicado que nuestra página tiene 3 partes principales:
Head, Body y Footer. En decir: Un encabezado, un cuerpo y un pie de página.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
<footer>
</footer>
</html>
Fácil!
Una vez hecho esto hemos creado un artículo en body, y dentro le hemos hecho dos secciones, que tienen un título cada una.
<article>
<section>
<header>
<h2>Título 1 dentro de encabezado de section </h2>
</header>
<p>Este artículo consta de de una cabecera y una sección. Dentro de la sección está este párrafo</p>
</section>
<section>
<header>
<h2>Título 2 dentro de encabezado de section</h2>
</header>
<p>Párrafo dentro de sección 2 del artículo. Hemos creado un artículo que tienes dos secciones. COn un título cada una</p>
</section>
</article>
Como puedes ver , solo hay que ir anidando etiquetas una dentro de otra. Parece difícil pero es sencillo. Solo estamos clasificando la información.
Con este esquema se comprende visualmente:
Si abrimos lá página con el navegador veremos algo así:
Es muy importante comprender cómo se anidan las etiquetas.
.
Ya hemos aprendido que hmtl es un lenguaje de descripción de página que utiliza unas palabras especiales llamadas etiquetas. Escribiendo el contenido entre las etiquetas vamos indicando como debe mostrarse, si es un título, una sección, un encabezado, etc..
Sencillo verdad? Recuerda que utilizamos las etiquetas <body> , <header> , <p>, y otras. Así mismo aprendimos que deben cerrase, como por ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<article>
<section>
<header>
<h2>Título 1 dentro de encabezado de section </h2>
</header>
<p>Este artículo consta de de una cabecera y una sección. Dentro de la sección está este párrafo</p>
</section>
<section>
<header>
<h2>Título 2 dentro de encabezado de section</h2>
</header>
<p>Párrafo dentro de sección 2 del artículo. Hemos creado un artículo que tienes dos secciones. Con un título cada una</p>
</section>
</article>
<footer>
</footer>
</body>
<html>
¿Alguna duda?
Lo que hemos hecho es crear un documento html.
Hemos especidicado que es html, escribiendo <!DOCTYPE html>.
Depués hemos indicado que nuestra página tiene 3 partes principales:
Head, Body y Footer. En decir: Un encabezado, un cuerpo y un pie de página.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
<footer>
</footer>
</html>
Fácil!
Una vez hecho esto hemos creado un artículo en body, y dentro le hemos hecho dos secciones, que tienen un título cada una.
<article>
<section>
<header>
<h2>Título 1 dentro de encabezado de section </h2>
</header>
<p>Este artículo consta de de una cabecera y una sección. Dentro de la sección está este párrafo</p>
</section>
<section>
<header>
<h2>Título 2 dentro de encabezado de section</h2>
</header>
<p>Párrafo dentro de sección 2 del artículo. Hemos creado un artículo que tienes dos secciones. COn un título cada una</p>
</section>
</article>
Como puedes ver , solo hay que ir anidando etiquetas una dentro de otra. Parece difícil pero es sencillo. Solo estamos clasificando la información.
Con este esquema se comprende visualmente:
Si abrimos lá página con el navegador veremos algo así:
Es muy importante comprender cómo se anidan las etiquetas.
.