Aprende HTML
Aprende a utilizar el Lenguaje HTML
Introducción HTML
¿Qué es HTML?
- HTML significa lenguaje de marcado de hipertexto
- HTML es el lenguaje de marcado estándar para crear páginas web.
- HTML describe la estructura de una página Web
- HTML consta de una serie de elementos
- Los elementos HTML le dicen al navegador cómo mostrar el contenido
- Los elementos HTML etiquetan piezas de contenido como "este es un encabezado", "este es un párrafo", "este es un enlace", etc.
Un documento HTML simple
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Ejemplo explicado
- La
<!DOCTYPE html>declaración define que este documento es un documento HTML5 - El
<html>elemento es el elemento raíz de una página HTML. - El
<head>elemento contiene meta información sobre la página HTML. - El
<title>elemento especifica un título para la página HTML (que se muestra en la barra de título del navegador o en la pestaña de la página) - El
<body>elemento define el cuerpo del documento y es un contenedor de todos los contenidos visibles, como encabezados, párrafos, imágenes, hipervínculos, tablas, listas, etc. - El
<h1>elemento define un encabezado grande - El
<p>elemento define un párrafo.
¿Qué es un elemento HTML?
Un elemento HTML se define mediante una etiqueta de inicio, algo de contenido y una etiqueta de finalización siempre con una /:
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta final:
Navegadores web
El propósito de un navegador web (Chrome, Edge, Firefox, Safari) es leer documentos HTML y mostrarlos correctamente.
Un navegador no muestra las etiquetas HTML, pero las usa para determinar cómo mostrar el documento:
Estructura de la página HTML
A continuación se muestra una visualización de la estructura de una página HTML:
Elementos HTML anidados
Los elementos HTML se pueden anidar (esto significa que los elementos pueden contener otros elementos).
Todos los documentos HTML constan de elementos HTML anidados.
El <html>elemento es el elemento raíz y define todo el documento HTML.
El <body>elemento define el cuerpo del documento.
El <h1>elemento define un encabezado.
El <p>elemento define un párrafo.
Nunca te saltes la etiqueta final
Algunos elementos HTML se mostrarán correctamente, incluso si olvida la etiqueta final:
<p> </p>
Elementos HTML vacíos
Los elementos HTML sin contenido se denominan elementos vacíos.
La <br>etiqueta define un salto de línea y es un elemento vacío sin una etiqueta de cierre.
HTML no distingue entre mayúsculas y minúsculas
Las etiquetas HTML no distinguen entre mayúsculas y minúsculas: <P>significa lo mismo que <p>.
El estándar HTML no requiere etiquetas en minúsculas, pero W3C recomienda minúsculas en HTML y exige minúsculas para tipos de documentos más estrictos como XHTML.
Atributos HTML
Los atributos HTML proporcionan información adicional sobre los elementos HTML.
- Todos los elementos HTML pueden tener atributos
- Los atributos proporcionan información adicional sobre los elementos.
- Los atributos siempre se especifican en la etiqueta de inicio
- Los atributos generalmente vienen en pares de nombre/valor como: nombre="valor"
El atributo href
<a>etiqueta define un hipervínculo. El hrefatributo especifica la URL de la página a la que va el enlace:Ejemplo
<a href="https://www.w3schools.com">Visit W3Schools</a>El atributo src
La <img>etiqueta se utiliza para incrustar una imagen en una página HTML. El srcatributo especifica la ruta a la imagen que se va a mostrar:
Ejemplo
<img src="img_girl.jpg">Los atributos de ancho y alto
La <img>etiqueta también debe contener los atributos widthy height, que especifican el ancho y el alto de la imagen (en píxeles):
Ejemplo
<img src="img_girl.jpg" width="500" height="600">El atributo alt
El altatributo requerido para la <img> etiqueta especifica un texto alternativo para una imagen, si la imagen por algún motivo no se puede mostrar. Esto puede deberse a una conexión lenta, a un error en el srcatributo, o si el usuario usa un lector de pantalla.
Ejemplo
<img src="img_girl.jpg" alt="Girl with a jacket">El atributo de estilo
El styleatributo se usa para agregar estilos a un elemento, como color, fuente, tamaño y más.
Ejemplo
<p style="color:red;">This is a red paragraph.</p>El atributo lang
Siempre debe incluir el langatributo dentro de la <html>etiqueta, para declarar el idioma de la página web. Esto está destinado a ayudar a los motores de búsqueda y navegadores.
El siguiente ejemplo especifica el inglés como idioma:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Los códigos de países también se pueden agregar al código de idioma en el lang atributo. Entonces, los dos primeros caracteres definen el idioma de la página HTML y los dos últimos caracteres definen el país.
El siguiente ejemplo especifica inglés como idioma y Estados Unidos como país:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
El atributo del título
El titleatributo define alguna información adicional sobre un elemento.
El valor del atributo de título se mostrará como información sobre herramientas cuando pase el mouse sobre el elemento:
Ejemplo
<p title="I'm a tooltip">This is a paragraph.</p>Sugerimos: Utilice siempre atributos en minúsculas
El estándar HTML no requiere nombres de atributos en minúsculas.
El atributo de título (y todos los demás atributos) se pueden escribir en mayúsculas o minúsculas como título o TÍTULO .
Sin embargo, W3C recomienda atributos en minúsculas en HTML y exige atributos en minúsculas para tipos de documentos más estrictos como XHTML.
¿Comillas simples o dobles?
Las comillas dobles alrededor de los valores de atributo son las más comunes en HTML, pero también se pueden usar comillas simples.
Ejemplo
<p title="I'm a tooltip">This is a paragraph.</p>
Resumen del capítulo
- Todos los elementos HTML pueden tener atributos
- El
hrefatributo de<a>especifica la URL de la página a la que va el enlace - El
srcatributo de<img>especifica la ruta a la imagen que se mostrará - Los atributos
widthy de proporcionan información sobre el tamaño de las imágenes.height<img> - El
altatributo de<img>proporciona un texto alternativo para una imagen. - El
styleatributo se usa para agregar estilos a un elemento, como color, fuente, tamaño y más - El
langatributo de la<html>etiqueta declara el idioma de la página web. - El
titleatributo define alguna información adicional sobre un elemento.
Comentarios
Publicar un comentario