Sie sind auf Seite 1von 16

HTML

Introducción
¿Qué es HTML?
• HTML es un marcado lenguaje de descripción de documentos web
(páginas web).
• HTML significa H yper T ext M arkup L anguage
• Un lenguaje de marcas es un conjunto de etiquetas de marcado
• Los documentos HTML son descritos por las etiquetas HTML
• Cada etiqueta HTML describe diferentes contenidos de documentos

• ENTREMOS A CODEPEN
• Ejemplo HTML
• Un pequeño documento HTML:
• <!DOCTYPE html> El DOCTYPE declaración define el tipo de documento para ser HTML

<html>El texto entre <html> y </ html> describe un documento HTML


<head>El texto entre <head> y </ head> proporciona información sobre el documento
<title>Page Title</title>El texto entre <title> y </ title> proporciona un título para el documento
</head>
<body>El texto entre <body> y </ body> describe el contenido de la página visible

<h1>My First Heading</h1>El texto entre <h1> y </ h1> describe un encabezamiento
<p>My first paragraph.</p>El texto entre <p> y </ p> describe un párrafo

</body>
</html>
Etiquetas HTML
• Etiquetas HTML son palabras clave (nombres de código) rodeadas por
corchetes angulares :
• < Tagname > contenido < / nombre de etiqueta >
• Etiquetas HTML normalmente vienen en pares como <p> y </ p>
• La primera etiqueta en un par es la etiqueta de inicio, la segunda etiqueta
es la etiqueta de cierre
• La etiqueta final se escribe como la etiqueta de inicio, pero con una barra
antes del nombre de la etiqueta
• “La etiqueta de inicio es a menudo llamada la etiqueta de apertura . La
etiqueta final se llama a menudo la etiqueta de cierre .”
Navegadores web
• El propósito de un navegador web (Chrome, IE, Firefox, Safari) es leer
los documentos HTML y mostrarlos.
• El navegador no muestra las etiquetas HTML, pero los utiliza para
determinar cómo mostrar el documento:
Estructura de páginas HTML
La <! DOCTYPE>
• La <! DOCTYPE> ayuda a que el navegador muestre una página web
correctamente.
• Hay diferentes tipos de documentos en la web.
• Para mostrar un documento correctamente, el navegador debe
conocer tanto el tipo y la versión.
• La declaración DOCTYPE no distingue entre mayúsculas y minúsculas.
Todos los casos son aceptables:
Versiones de HTML
• Desde los primeros días de la web, ha habido muchas versiones de
HTML:
• Version Year
• HTML 1991
• HTML 2.0 1995
• HTML 3.2 1997
• HTML 4.01 1999
• XHTML 2000
• HTML5 2014
Escribe HTML usando el Bloc de
notas o TextEdit
• HTML puede ser editada por profesionales con editores de HTML como:
• microsoft WebMatrix
• Texto sublime
• Sin embargo, para el aprendizaje de HTML se recomienda un editor de
texto como el Bloc de notas (PC) o TextEdit (Mac).
• El uso de un simple editor de texto es una buena manera de aprender
HTML.
• Siga los 4 pasos para crear su primera página web con el Bloc de notas.
Paso 1: Abrir el Bloc de notas
• Abra la pantalla de inicio (el símbolo ventana en la parte inferior
izquierda de la pantalla). Escriba el Bloc de notas .

Este
ejercicio
realizarlo y
subirlo
Paso 2: Escribir un HTML
• Escribir algo de HTML en el Bloc de notas.
• <!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Paso 3: Guardar la página HTML
• Guarde el archivo en su ordenador.
• Seleccione Archivo> Guardar como en el menú Bloc de notas.
• Nombre del archivo "index.html" o cualquier otro nombre que
termina con html o htm.
• UTF-8 es la codificación preferida para los archivos HTML.
• Codificación ANSI cubre Estados Unidos y Europa occidental sólo
caracteres.
Paso 4: Vista HTML página en el
navegador
• Abra el archivo HTML guardado. El resultado se parecerá mucho a
esto:
Para abrir un
archivo en un
navegador, haga
doble clic en el
archivo, o haga
clic derecho y
seleccione Abrir
con.
Los documentos HTML
Este ejercicio
realizarlo y
subirlo

• Todos los documentos HTML deben comenzar con una


declaración del tipo: <! DOCTYPE html> .
• El documento HTML en sí comienza con <html> y termina
con </ html> .
• La parte visible del documento HTML está entre <body> y </
body> .
Encabezamientos HTML
• Títulos HTML se definen con los <h1> a <h6>
etiquetas:
• <h1>This is a heading H1</h1>
<h2>Este es un encabezamiento H2</h2>
<h3>This is a heading</h3>
• Realizarlo hasta h6 Este ejercicio
realizarlo y
subirlo
<html>
<body>

<h1>This is heading H1</h1>


<h2>Este es encabezado H2</h2>
<h3>This is heading H3</h3>
<h4>Este es encabezado H4</h4>
<h5>This is heading H5</h5>
<h6>Este es encabezado H6</h6>

</body>
</html>

Das könnte Ihnen auch gefallen