Curso IT Fundamentos HTML 009_Hello HTML - Notas técnicas de zhaoJian

¿Qué es HTML?

La red, o más específicamente la World Wide Web, está compuesta por muchos documentos y recursos vinculados entre sí. Estos documentos y recursos están escritos en HTML y se denominan páginas web. HTML es la base de las páginas web y define su estructura y contenido.

Cuando introduces una URL en tu navegador (por ejemplo, www.zhaojian.net), el navegador envía una solicitud al servidor que proporciona esa página web. El servidor responde a esta solicitud y envía la página web solicitada (es decir, algo de HTML) de vuelta al navegador. Luego, el navegador analiza este HTML y lo muestra como la página web que normalmente ves.

HTML (HyperText Markup Language, Lenguaje de Marcado de Hipertexto) es un lenguaje de marcado utilizado para crear y diseñar la estructura de páginas web. HTML está compuesto por una serie de elementos que se pueden usar para encerrar diferentes partes del contenido, haciendo que se presente o funcione de cierta manera. Un par de etiquetas puede agregar un hipervínculo a un texto o imagen, establecer texto en cursiva o negrita, crear párrafos, listas, etc.

[!Resumen]

HTML no es un lenguaje de programación, sino un lenguaje de marcado

Los documentos HTML contienen etiquetas HTML y contenido de texto (¿por qué no imágenes?)

Los documentos HTML también se llaman páginas web

Un elemento HTML completo

Ejemplo:

1
<p>hello HTML!</p>

Efecto:

Efecto de página HTML

Análisis de estructura:

Estructura de elemento HTML

[!Resumen]

Un elemento HTML completo se compone de tres partes: etiqueta de apertura, contenido y etiqueta de cierre;

Etiqueta de apertura (Opening tag): Contiene el nombre del elemento (en este ejemplo p), rodeado por corchetes angulares izquierdo y derecho. La etiqueta de apertura marca donde comienza o entra en efecto el elemento;

Contenido (Content): El contenido del elemento;

Etiqueta de cierre (Closing tag): Similar a la etiqueta de apertura, pero incluye una barra diagonal antes del nombre del elemento. Esto marca el final del elemento. No incluir una etiqueta de cierre es un error común de principiantes y puede producir resultados extraños.

Una página HTML completa

Ejemplo:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>hello HTML</title>
6
</head>
7
<body>
8
    <p>hello HTML!</p>
9
</body>
10
</html>

Efecto:

Efecto de página HTML

Análisis de estructura:

Estructura de página HTML

[!Resumen]

<!DOCTYPE html> — Declara el tipo de documento HTML. El tipo de documento es un remanente histórico que le dice al navegador la versión y el tipo del documento. Declaración DOCTYPE de HTML4 en modo estricto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html></html> — Elemento html, todo el contenido de una página HTML, a veces llamado elemento raíz.

<head></head> — Elemento head, su contenido no es visible para el usuario e incluye cosas como palabras clave de búsqueda para motores de búsqueda, descripciones de páginas, estilos CSS, archivos JavaScript y declaraciones de codificación de caracteres.

<meta charset="utf-8"> — Elemento meta, se usa para proporcionar metadatos sobre el documento HTML. El atributo charset establece el conjunto de caracteres de su documento en UTF-8.

<title></title> — Elemento title. Este elemento establece el título de la página, que se muestra en la pestaña del navegador y también sirve como texto descriptivo para los marcadores.

<body></body> — Elemento body. Este elemento contiene el contenido que se espera que los usuarios vean al visitar la página, incluido texto, imágenes, videos, juegos, pistas de audio reproducibles u otro contenido.

<p></p>— Elemento de párrafo, representa un párrafo de texto.

Nombre del elemento	Función	Ejemplo
`<!DOCTYPE html>`	Define el tipo y versión del documento HTML	`<!DOCTYPE html>`
`<html>`	Define el elemento raíz del documento HTML	`<html lang="en">`
`<head>`	Contiene metainformación del documento, como título, declaración de conjunto de caracteres, enlaces de estilos y scripts, etc.	`<head>...</head>`
`<title>`	Define el título del documento, se muestra en la barra de título o pestaña del navegador	`<title>My Web Page</title>`
`<meta>`	Proporciona metainformación sobre el documento, como conjunto de caracteres, configuración de viewport, palabras clave, etc.	`<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">`
`<link>`	Referencia recursos externos, como hojas de estilo e iconos	`<link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon">`
`<style>`	Define estilos internamente en el documento	`<style>body { font-family: Arial, sans-serif; }</style>`
`<script>`	Define o referencia scripts, puede estar contenido en el documento o hacer referencia a scripts externos	`<script src="script.js"></script>`
`<noscript>`	Define contenido que se muestra cuando el navegador no admite scripts	`<noscript>Sorry, your browser does not support JavaScript.</noscript>`
`<base>`	Especifica la URL base para todos los enlaces relativos de la página	`<base href="https://www.zhaojian.net/">`

Enlaces:

Visual Studio Code

Extensiones de VS Code: Remote - SSH Remote Development

Navegador web Google Chrome Navegador web Google Chrome (China)

Microsoft Edge

¿Qué es HTML?

Un elemento HTML completo

Análisis de estructura:

Una página HTML completa

Análisis de estructura:

Comentarios