Etiquetas HTML

 Una página HTML se construye usando etiquetas, así que primero necesito explicar qué es una etiqueta . Una etiqueta es un comando en una página web que le dice al navegador que haga algo. Las etiquetas se incluyen en signos de menor que ( < ) y mayor que ( > ). Un ejemplo de etiqueta es  <html>,  que aprenderá a continuación.

Abra el Bloc de notas, el Bloc de notas ++ o cualquier otro editor de texto sin formato y escriba o cópielo en él.

<! DOCTYPE HTML > 
< html  lang = "en" > 
  < head > 
    < meta  charset = "UTF-8" > 
    < title > Mi primera página web </ title > 
  </ head > 
  < body >
    Hola Mundo!
  </ cuerpo > 
</ html >

Código explicado línea por línea

¡Acabamos de escribir un Hello World minimalista ! Programa HTML (marcado). Analicemos este código línea por línea.

<! DOCTYPE HTML >Lo primero es la declaración de tipo de documento del documento. En este caso HTML5. Siempre debes usar esto.
< html lang = "en" >Todo lo que está haciendo es decir que este es el comienzo de un documento HTML. Además especifica el idioma del documento, que es el inglés.
< cabeza >Marca el comienzo de la parte de un documento HTML denominada encabezado. Esta sección no está visible en la página web, pero contiene información importante sobre el documento.
< meta charset = "UTF-8" >Declaración de la codificación de caracteres: UTF 8
< título > Mi primera página web </ título >El título de la página se puede ver en la pestaña de la ventana del navegador y cuando marca el sitio en sus favoritos. Puede poner lo que quiera entre las etiquetas de título. También vemos algo nuevo aquí también. La última etiqueta  </title> , significa que el título de la etiqueta ahora termina. Puede finalizar cualquier etiqueta colocando una barra invertida ( / ) después del signo menor que ( < ).
</ cabeza >Cierre de la sección de la cabeza
< cuerpo >Comenzamos la sección del cuerpo. Aquí está todo lo que será visible en la página.
Hola Mundo!La parte visible en el navegador web
</ cuerpo >Etiqueta de cierre del cuerpo.
</ html > Terminando el documento

Presione Ctrl + U (en Google Chrome) y podrá ver el código HTML detrás de cualquier página web. Abra algunos sitios web y verifique su código HTML .

Abra su documento HTML en un navegador web

etiquetas html programa hola mundoLo siguiente que debe hacer es guardar su primera página web en su disco duro. Haga clic en Archivo y luego en Guardar. Cambie la extensión .txt de su nuevo archivo a .html , por ejemplo index.html . Es posible que desee crear una carpeta especial para mantener todas las cosas de su página web organizadas.

Asegúrese de guardar todos los archivos de su página web como algo.html; de lo contrario, serán documentos de texto, no páginas web. Haga clic en Guardar. Ve a la carpeta y ábrela. Haga doble clic en el archivo que acaba de crear y debería verse así .

¡Felicidades! ¡Ha creado su primera página web local que muestra un mensaje estático en el navegador web!

Usar etiquetas HTML

Ahora te enseñaré a subrayar el texto  . Utilice el editor HTML en línea para probar estos códigos.

<u> ¡ Mira esto! </u>

Como puede ver cuando ponemos la etiqueta <u> , comienza el subrayado. Donde está la etiqueta colosing </u> , termina el subrayado. Nuevamente, si coloca una barra invertida ( / ) en una etiqueta, la cierra.

También vamos a poner algunos textos en  negrita .

<strong> ¡ Mira esto! </strong>

Incluso podemos hacer texto en  cursiva .

<em> ¡ Mira esto! </em>

Etiquetas HTML anidadas

¡Incluso puedes poner las 3 etiquetas a la vez!

<b><u> <em> ¡ Mira esto! </em></u> </b>

Como no usamos más de una etiqueta a la vez, nos encontramos con algo llamado Etiquetas anidadas. Si no es así, pueden causar que algunos navegadores no muestren su página correctamente y eso se llama Etiquetas superpuestas.

Este es un ejemplo de etiquetas anidadas.

<strong> <em> <u> ¡Hola! </u> </em> </strong>

Ahora un ejemplo de etiquetas superpuestas.

<strong> <em> <u> ¡Hola! </strong> </em> </u>

¿Puedes ver la diferencia? Una buena regla a seguir es la etiqueta que comience primero, la última que termine y la etiqueta que comience en último lugar, termine primero. ¿Sigo confundido? No te preocupes, te acostumbrarás a medida que sigas practicando.

Etiquetas HTML singleton

Aprendimos que cada etiqueta HTML debe cerrarse una vez abierta: <tagname> ... </tagname>

Hay algunos elementos especiales que no necesitan una etiqueta de cierre porque nunca incluyen nada más. Por ejemplo, la línea horizontal <hr /> nunca contiene un párrafo, imágenes o cualquier otra cosa. Llamamos a estas etiquetas Singleton y la barra de cierre se escribe así: <tagname attribute = "parameter" />

Una lista de etiquetas HTML singleton: area, base, br, col, embed, hr, img, input, link, meta, param, source .

Lista de todas las etiquetas HTML

Encuentre una lista de todas las etiquetas HTML con ejemplos. Esto le ayudará a encontrar qué etiquetas usar y cuáles evitar porque están desactualizadas.

lista de etiquetas html
Un ejemplo de búsqueda de las etiquetas de tabla.

Comentarios

Publicar un comentario