En esta ocasión vamos a aprender a crear un documento HTML básico, cuando abrir y cerrar etiquetas, esto es como escribir, de hecho es un lenguaje, y se debe practicar, como todo.
Para empezar creamos la etiqueta principal
<html>
Dentro de ella, irá todo el contenido de la página. Lo segundo que haremos es crear la cabecera haciendo uso de la etiqueta <head>, donde suelen ir los metadatos, scripts, estilos, y el título del documento. En este caso solamente incluiremos un título, para ello lo escribimos entre las etiquetas <title> y </title>, y no olvides cerrar también con </head>.
<html>
<head>
<title>Mi página</title>
</head>
Ahora debemos crear el cuerpo de la página, que es donde se muestra toda la información. Abrimos con la etiqueta <body>, y escribimos algunas lineas de prueba. Para el título utilizamos la etiqueta <h1> y para el párrafo <p>, y cerramos con </body>.
<html>
<head>
<title>Mi página</title>
</head>
<body>
<h1>Hola a todos</h1>
<p>Esto es una página de prueba</p>
</body>
Por último, cerramos el documento con la etiqueta </html>. Con este trozo de código, es suficiente para que se visualice en cualquier navegador, como dije desde el comienzo, es lo básico. Este sería el código final.
<html>
<head>
<title>Mi página</title>
</head>
<body>
<h1>Hola a todos</h1>
<p>Esto es una página de prueba</p>
</body>
</html>
Estilos CSS
Pero añadamos un poquito de CSS. Como había dicho anteriormente, los estilos de una página deben ir en la cabecera, es decir, entre las etiquetas <head> y </head>. Para vincular una hoja de estilos externa a un documento HTML, se hace de la siguiente forma:<link href="estilos.css" rel="stylesheet" type="text/css">
"estilos.css" es un documento previamente creado, donde se incorpora todos los estilos y lo que hace el elemento "link", es llamarlo a nuestro documento sin necesidad de tener que volver a escribir todo el código, esto se hace porque múltiples páginas pueden necesitar de una sola hoja de estilos.
Pero también existe una forma de escribir los estilos en el mismo documento, entre las etiquetas <head> y </head>. Y es la que vamos a utilizar en esta ocasión.
<style type="text/css">
h1 {color:white; text-align: center}
p {color:white; text-align: center}
body {background:black}
</style>
Los cambios que hice fueron dar un color de fondo negro para la página, el titulo y el párrafo de color blanco y centrados. El código con estilos incluidos quedaría de la siguiente forma:
<html>
<head>
<style type="text/css">
h1 {color:white; text-align: center}
p {color:white; text-align: center}
body {background:black}
</style>
<title>Mi página</title>
</head>
<body>
<h1>Hola a todos</h1>
<p>Esto es una página de prueba</p>
</body>
</html>
Si te animaste a seguir los pasos y creaste tu propio documento HTML, te invito a que lo pruebes haciendo clic aquí.
Espero no haberme enredado mucho explicando esto, aún soy nuevo en esto de los blogs, pero trataré de aprender cada día y mejorar. Si quieres dar alguna sugerencia, una corrección o quieres aprender algo nuevo, no dudes en comentar. Un saludo, y hasta la próxima.
0 comentarios: