10 septiembre 2016

¿Cómo crear un documento HTML?

Hoy en día existen muchos programas y herramientas que te facilitan mucho la tarea a la hora de empezar a crear un sitio web, por no decir, que te hacen prácticamente todo el trabajo, y no es malo, al contrario, es bueno, pero tarde o temprano te encontrarás con algún error, y deberás recurrir a tus propios conocimientos, es por eso que quiero compartirles un poco de lo que sé. No soy un experto, pero si soy muy aficionado al diseño web.

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:

Deja el primer comentario. Para nosotros, tu opinión es muy importante.

Categorías

Diseño web

Facebook

Google+

Suscribirse

Enter your email address:

Delivered by FeedBurner

Gana dinero

Con tecnología de Blogger.
 
Suscribirse al boletín
Regístrate con tu dirección de correo electrónico para recibir noticias y actualizaciones directamente en tu bandeja de entrada