HTML es un lenguaje de marcado para páginas web. De hecho, HTML significa Lenguaje de marcado de hipertexto.
Una cosa que hay que dejar clara desde el principio y tener presente es que elHTML no es un lenguaje de programaciónHTML es sólo para dar formato al texto y para maquetar elementos como formularios, citas, vídeos.
En esta breve guía no nos detendremos demasiado en discusiones técnicas o filosóficas sobre qué es un hipertextopero tomaremos como definición la de página web, una página navegable en Internet.
Herramientas
Para desarrollar su primera página html, un simple editor de textoPara los usuarios de Windows, la sencilla Bloc de notas.
Nuestra primera página HTML
Abre el bloc de notas e introduce el siguiente código:
<html></html>
Haz clic en Guardar y elige un nombre "página.html" y en el menú desplegable "guardar como"recuerde seleccionar "todos los archivos“.
Ya hemos creado nuestra primera página html, que una vez abierta mostrará una página en blanco.
Cada página html consta básicamente de dos elementos, un head <head> y un cuerpo <body>.
Así modificamos nuestra página:
<html>
<head></head>
<body></body>
</html>
El DOCTYPE
En este punto es importante introducir el concepto de DOCTYPE. El doctype es una declaración que se inserta al principio del documento y que permite a los navegadores renderizar la página correctamente. En el caso de HTML5 la declaración doctype es la siguiente
<!doctype html>
<html>
<head></head>
<body></body>
</html>
En el pasado, se utilizaban declaraciones de doctype más largas y articuladas, pero ahora elHTML5 es una norma, por lo que nos limitaremos a ésta.
Añadir un título a la página HTML: la etiqueta title
Si intentamos abrir la página html creada anteriormente, veremos que en la barra de la ventana aparece la ruta del archivo. Si queremos añadir un título más explicativo, podemos añadir la etiqueta
<!doctype html>
<html>
<head>
<title>Mi primera página web</title>
</head>
<body></body>
</html>
Además de hacer la página más fácil de usar, la presencia del título también es importante en el lateral SEO.
Etiquetas
Una de las primeras cosas que podemos observar es que HTML es un lenguaje compuesto de etiquetas. Cada etiqueta HTML va siempre encerrada entre un signo menor ( ). Una etiqueta genérica se caracteriza por la siguiente sintaxis:
<nomedeltag>
Las etiquetas pueden incluir una apertura <nometag> y un cierre .,
<h1>Título del artículo</h1>
o ser etiquetas que no contienen ningún elemento y, por tanto, se cierran solas. Un ejemplo de este último tipo de etiquetas es <img />.
<img src="mondo.jpg" />
En esta breve guía no analizaremos todas las etiquetas html, sino sólo las que se utilizan con más frecuencia. Para obtener una lista exhaustiva de todas las etiquetas puede consultar aquí.
Veamos cuáles son las principales etiquetas y cómo utilizarlas.
La etiqueta <h1> y las demás rúbricas
La etiqueta <h1> se utiliza para definir un encabezado, es decir, un texto que tiene mayor importancia dentro del contenido de nuestra página html, por lo que se formateará con una fuente más grande.
Existen varias etiquetas de cabecera en función de su importancia: así, se puede tener <h1>, <h2> , <h3> , <h4> , <h5> , <h6>.
<h1>Título de la página</h1>
La etiqueta <p>
El <p> se utiliza para definir un párrafo. Si se inserta texto dentro de esta etiqueta, se formateará como texto libre.
<p>En esta página hablaremos de HTML.</p>
La etiqueta <b>
La etiqueta <b> se utiliza para resaltar texto:
<b>texto muy importante</b>
Su funcionamiento es idéntico al del <strong>ponga una parte del texto en negrita.
La etiqueta <a>
La etiqueta <a> se utiliza para definir un enlace (enlaces entre páginas web) nos permite crear un enlace desde nuestra página a otra página. La sintaxis de un enlace es la siguiente:
<a href="https://www.google.it">Enlaces Google</a>
Podemos ver que el <a> necesita el atributo href que indica la página de destino.
La etiqueta <img>
La etiqueta <img> se utiliza para insertar una imagen en la página HTML. A diferencia de las etiquetas anteriores, la etiqueta <img> es una etiqueta de cierre automático, es decir, no necesita una etiqueta de cierre.
<img src="immagini/terra.jpg" />
Como vemos en el ejemplo, el <img> necesita el atributo src, que indica la ruta a la imagen que se va a mostrar. El atributo <img> también puede tener otros atributos:
<img src="immagini/terra.jpg" alt="imagen de la Tierra" />
En este ejemplo, el atributo alt se utiliza para mostrar un texto alternativo en caso de que la imagen no se cargue. También es útil para indicar a los motores de búsqueda lo que se muestra en la página, lo que es muy importante en términos de SEO.
Las etiquetas de lista , ,
- ,
Si queremos mostrar una lista en nuestra página html, podemos utilizar la etiqueta
- . Esta etiqueta muestra una lista desordenada, por lo que aparecerá un punto junto a cada elemento de la lista. Si queremos mostrar una lista numerada, podemos utilizar la etiqueta
- .
<ul> <li>Primo punto</li> <li>Secondo punto</li> <li>Terzo punto</li> </ul>
Mini tutorial: cómo crear tu primera página web
Tras un rápido vistazo a las principales etiquetas html, podemos intentar crear nuestra primera página web.
Abre el Bloc de notas o cualquier otro editor de texto y empieza a escribir este código:
<!doctype html> <html> <head> <title>Mi primera página web</title> </head> <body></body> </html>
Guardar como y recuerde seleccionar "Todos los archivos" en el cuadro desplegable y, a continuación, guardar como index.html o mipagina.html o lo que más nos gusta.
Si hacemos doble clic en el archivo que acabamos de guardar, se abrirá una nueva ventana del navegador con nuestra primera página html. Será una página vacía, pero tendrá el título que hemos introducido en el campo
. Pasemos a la construcción de la página web. Añadimos una cabecera y algunos párrafos. Aplicamos el <b> algunas palabras para destacar, como el nombre de la ciudad de nacimiento, añadir una foto con la etiqueta <img> y un enlace a la página en Wikipedia.
<!doctype html> <html> <head> <title>Mi primera página web</title> </head> <body> <h1>Lionel Messi</h1> <p>Lionel Andrés Messi, al que muchos llaman simplemente Leo, nació el 24 de junio de 1987 en <b>Rosario</b>en el estado argentino de Santa Fe. </p> <img src="Messi.jpg" /> <p>Sólo tiene cinco años cuando empieza a dar patadas al balón. Su primer equipo es el <b>Grandoli</b>En su ciudad hay una pequeña escuela de fútbol para niños. El entrenador de los chicos es Jorge Messi, obrero metalúrgico y padre del futuro campeón. </p> <p>A los siete años <a href="https://it.wikipedia.org/wiki/Lionel_Messi">Lionel Messi</a> Viste la camiseta de "Newell's Old Boys" y juega en las categorías inferiores. A los ojos de los aficionados al fútbol que seguían al chaval por los campos de Rosario, el talento del joven ya era evidente. </p> <h2>La llegada a barcelona</h2> <p>Debido a un retraso en el desarrollo óseo del niño causado por los bajos niveles de hormonas del crecimiento en su organismo, la transición se desvanece. </p> <p>Se aconseja a la familia que busque tratamiento médico, pero es muy caro: se habla de 900 dólares al mes; Jorge Messi pide ayuda a Newell's Old Boys y a River Plate sin obtener soluciones adecuadas. Creyendo firmemente en el posible futuro de Lionel como campeón, pide ayuda a algunas fundaciones. </p> </body> </html>
Si queremos insertar una imagen, podemos guardarla en la misma carpeta que el archivo html y recuperarla introduciendo el nombre del archivo en el campo src de la etiqueta <img>.
Si hemos hecho todo correctamente, deberíamos obtener algo como esto:
En esta breve guía sobre HTML, hemos visto cómo hacer una página web, añadir texto e imágenes, dar formato a una cabecera y texto en negrita, y añadir enlaces.
Para mejorar nuestra página tendremos que cambiar su apariencia, utilizando la función CSS. Este será el tema de una futura guía.
- .
Cada elemento de la lista debe ir dentro de la etiqueta
Deja una respuesta