HTML básico (3)

El contenido

<!DOCTYPE html>
<html lang=es>
<head> 
<!--link a la hoja de estilo que crearemos más tarde-->
<link rel="stylesheet" href="estilo.css"/>
<title> Proyecto uno </title>
</head>
<body> 
<header> 
<!--el encabezado puede llevar un texto, fotografía,...--> 
<h1>Mi primera web</h1>
</header>
<h3> Proyecto uno </h3>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit litora himenaeos, mus penatibus egestas odio iaculis parturient mauris class semper vitae, <br>
congue erat vel aenean dapibus nisi facilisi proin. Morbi rutrum consequat habitant sem placerat aliquam cubilia, vestibulum quam quisque ullamcorper eget gravida magnis cum, <br> 
porttitor sociis hendrerit taciti cras quis. Suscipit purus dictum in malesuada fermentum convallis est nascetur ligula mollis, leo integer magna diam orci curabitur ad tristique porta etiam, <br>
feugiat id lacus nisl ridiculus urna natoque velit curae. Sociosqu et vehicula molestie aptent pharetra ornare nullam felis augue at, platea fusce eleifend tincidunt dui a hac imperdiet conubia. <br>
</p>
<hr/>
<p> 
<!--listas no ordenadas--> 
<h4>Novelas asiáticas </h4> 
<ul> 
<li>La biblioteca de los nuevos comienzos. Michiko Aoyama. </li>
<li>Historias del taller de cerámica de Soyo. Somin Yeon. </li>
<li>Mis días en la liberería Morisaki. Satoshi Yagisawa.  </li> 
</ul>
</p>
</body>
<hr>
<footer> Jane Smith 2025 </footer>
</html>

<header>

En esta etiqueta irá la cabecera de nuestra página web. Puede ser un título, fotografía, dibujo,...

<h1>

Los encabezados están numerados del 1 al 6 siendo el 1 el mayor y el 6 de menor tamaño. Se usan para destacar párrafos o secciones.

<p>

Indica que hay un párrafo.

<br>

Indica el final de una línea. También se puede usar para crear espacios.

<hr/>

Crea una línea horizontal que puede servir para separar secciones.

<ul>

Crea listas no ordenadas. Si añadimos la etiqueta <li> en cada elemento aparecerá un bullet delante de cada elemento que los resalta.

<footer>

El footer indica el pie de página de nuestra web. Aquí podemos indicar nuestra autoría y fecha de creación de esta.

***

<link rel="stylesheet" href="estilo.css"/>

Solo con el lenguaje html no le podemos dar estilo a nuestra página web. Para ello necesitamos el lenguaje css. La forma más recomendado para hacerlo es vinculando una hoja de estilo a la de html.

Para ello deberemos crearla de la misma forma que hemos hecho con la del html, pero con la extensión css. Se guardará en la misma carpeta donde hemos creado el anterior.

Los atributos se colocan entre comillas se refieren a rel, relativo a y href, el enlace.

En html también podemos incluir comentarios que no serán visibles en nuestra web. Pueden servir para organización interna y para añadir recordatorios para futuras ediciones del código.

EFM

Gracias por leer