Este documento presenta una introducción a HTML, incluyendo su estructura, etiquetas y sintaxis básicas. Explica que HTML define la estructura y contenido de las páginas web usando etiquetas como <html>, <head>, <body>, <h1>-<h6> y <p>. También cubre la declaración <!DOCTYPE html> y provee ejemplos de cómo usar las etiquetas. Por último, propone un ejercicio para crear una página web básica sobre conceptos introducidos.
Qué es HTML
HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.
Un documento de hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.
Qué es HTML
HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.
Un documento de hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.
FISICA IMPRIMIR MATERIAL ACADEMICO NIVEL SECUNDARIO
Html_Clase01_2_Estructura_V2.pptx (1).pdf
1.
2. HTML: Clase 1 - Estructura y
Etiquetas Básicas
Bianchi - Ciarallo - Juarez
Febrero 2023
3. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
Contenido:
• Características y estructura del código HTML
• Elementos HTML
• Sintaxis y uso de las etiquetas básicas
• Ejemplos
• Ejercicio propuesto
4. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
HTML
➔ Es un estándar a cargo del World Wide Web Consortium (W3C), organización
dedicada a la estandarización de casi todas las tecnologías ligadas a la web.
➔ HT: Hipertexto/ ML: Lenguaje de Marcado (HyperText Markup Language)
➔ Define una estructura básica y un código (denominado código HTML) para la
definición de contenido de una página web, como texto, imágenes, videos, juegos,
entre otros.
5. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
HTML: Estructura básica de una página
Código
HTML
</head>
</body>
<html>
</html>
Sección con información
técnica para el navegador y
los motores de búsqueda
<body >
Sección con el contenido que
aparecerá en la página
<head>
6. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
HTML: Composición de un Elemento
<p> Este es un ejemplo de texto </p>
Etiqueta
de
Apertura
Etiqueta
de
Cierre
Elemento
Contenido
7. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
HTML: Etiquetas Básicas
<p> Párrafo </p>
<html> <html> Encierra a todo el Código html </html>
<head> Encierra la sección de metadatos </head>
<body> Encierra al Cuerpo principal </body>
<h1> Título principal </h1>
<h2> Subtítulo </h2>
<title> Título Solapa - Va dentro de <head> </title>
<head>
<title>
<body>
<h1> a <h6>
<p>
8. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
HTML: Ejemplo de uso de las etiquetas
<html>
<head>
<title>Este es el TITULO de la solapa
de la pagina</title>
</head>
<body>
<h1>Este es un TITULO dentro del cuerpo
de la pagina</h1>
<p>Este es un parrafo de texto que esta
en el cuerpo de la pagina, y que se
visualiza en la ventana principal del
navegador.</p>
</body>
</html>
Ejemplo: Visualización:
—----------------------
-----------
.html www
9. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
<html>
<body>
<h1>Este es el TITULO PRINCIPAL</h1>
<p>Esto es un párrafo de texto inicial, por
ejemplo, una introducción al resto de la
página. </p>
<h2>Esto es un SUBTITULO</h2>
<p>Pueden usarse hasta 6 niveles de
subtítulos.</p>
<h2>Otro SUBTITULO de igual tamaño al
anterior</h2>
<p>Podemos combinar subtítulos y párrafos para
darle al documento, la estructura que
queramos.</p>
</body>
</html>
HTML: Ejemplo de uso de las etiquetas
Ejemplo: Visualización:
—----------------------
-----------
.html
www
10. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
Etiqueta: <h>
La etiqueta <h> permite construir títulos y subtítulos, hay seis tamaños diferentes.
Los tamaños absolutos pueden variar de un navegador a otro.
<h1> Texto muy grande usando h1.</h1>
<h2> Texto grande usando h2 .</h2>
<h3> Texto algo más grande de lo normal usando h3.</h3>
<h4> Texto normal usando h4.</h4>
<h5> Texto pequeño usando h5.</h5>
<h6> Texto muy pequeño usando h6.</h6>
—----------------------
-----------
.html www
11. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
Etiqueta: <p>
La etiqueta <p> permite definir un nuevo párrafo.
Cada párrafo comienza en una nueva línea.
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
<p>Y este es otro párrafo con mucho más
texto y que puede ocupar más de una línea,
pero se ajustará automáticamente al tamaño
de la ventana donde se abre la página.</p>
—----------------------
-----------
.html
www
12. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
Declaración: <!DOCTYPE>
<!DOCTYPE> no es una etiqueta, es una declaración y le indica al navegador el tipo de
documento que está por procesar y a que versión de html corresponde.
Va en la primera línea del archivo y en HTML 5 se la utiliza acompañada de la palabra html.
<!DOCTYPE html>
<html>
<head>
<title>Uso de DOCTYPE</title>
</head>
<body>
<h1>Declaración !DOCTYPE></h1>
<p>Informa al navegador el tipo de documento y la
versión de html</p>
</body>
</html>
—----------------------
-----------
.html
www
13. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
Resumen
✓ Las páginas HTML son documentos de texto enriquecido.
✓ HTML usa etiquetas (tags).
✓ Usualmente, hay etiquetas de apertura y de cierre.
✓ Las etiquetas no pueden estar solapadas.
✓ Para aprender HTML necesitás saber qué etiquetas existen, cuál es su uso y cómo aplicarlas.
✓ Etiquetas: • <html> Raíz del documento. Encierra al resto
• <head> Contenedor de metadatos
• <title> Dentro de <head>, título de la solapa
• <body> Contenedor principal y único
• <h1> a <h6> Encabezados
• <p> Definición de párrafo
✓ Declaración <!DOCTYPE html> para indicar el tipo de documento y versión de html
14. BIANCHI - CIARALLO - JUAREZ
HTML Clase 1: Estructura
Ejercicio 1
Generar una página web con un título: “Primera clase” y una explicación resumida de
al menos 3 de los conceptos vistos en la introducción, por ejemplo:
➢ Navegador
➢ Frontend
➢ HTML
Para cada uno usar subtítulos y párrafos.