jjaramillo238@misena.edu.co
SENA - 2016
Hyper Text Markup Language
Lenguaje de marcado para describir documentos web (páginas web)
Un lenguaje de marcado es un conjunto de etiquetas de marcado
Representa la estructura de los contenidos dispuestos en una página web
Son palabras clave rodeadas por los signos < >
El propósito de un navegador web es intepretar documentos HTML y mostrarlos
Se usan para representar elementos web
Los elementos vienen definidas por una etiqueta de inicio y una etiqueta de cierre
<etiqueta>Contenido</etiqueta>
<p>Párrafo</p>
El navegador no muestra las etiquetas HTML, pero usa estas para determinar como se muestra el documento
Navegadores comerciales
Editores de texto
Bloc de notas
Notepad++
Sublime Text
Brackets
Atom
<!DOCTYPE html>
<html>
<head>
<title>
<meta>
<body>
<p>
<span>
<br>
<hr>
<a>
<img>
<!-- comment-->
<pre>
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
<meta charset="utf-8">
</head>
<body>
<h1>Encabezado1</h1>
<h2>Encabezado2</h2>
<h3>Encabezado3</h3>
<h4>Encabezado4</h4>
<h5>Encabezado5</h5>
<h6>Encabezado6</h6>
</body>
</html>
Código
Visualización
Etiquetas: presentación
<h1><h2><h3><h4><h5><h6>
<h1> Encabezado mayor tamaño
<h6> Encabezado menor tamaño
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
<meta charset="utf-8">
</head>
<body>
Negrilla<br>
<b>Texto en negrita</b><br><br>
Cursiva<br>
<i>Texto en cursiva</i><br><br>
Subrayado<br>
<u>Texto subrayado</u><br><br>
Tachado<br>
<s>Texto tachado</s><br><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
<meta charset="utf-8">
</head>
<body>
Negrilla<br>
<strong>Texto en negrita</strong><br><br>
Cursiva<br>
<em>Texto en cursiva</em><br><br>
Tachado<br>
<strike>Texto tachado</strike>
</body>
</html>
Presentación
Presentación + Semántica
Código
Visualización
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
<meta charset="utf-8">
</head>
<body>
<p>
Texto: Resaltado/marcado <br>
<mark>Texto resaltado</mark>
</p>
<p>
Texto: Tamaño grande<br>
<big>Texto grande</big>
</p>
<p>
Texto: Tamaño pequeño <br>
<small>Texto pequeño</small>
</p>
</body>
</html>
Código
Visualización
Etiquetas
<mark> Resaltado
<big> Texto grande
<small> Texto pequeño
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
<meta charset="utf-8">
</head>
<body>
<p>
Texto: Eliminado <br>
<del>Texto eliminado</del>
</p>
<p>
Texto: Insertado <br>
<ins>Texto insertado</ins>
</p>
</body>
</html>
Código
Visualización
Etiquetas: semánticas
<del> Texto eliminado
<ins> Texto insertado
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
<meta charset="utf-8">
</head>
<body>
<p>
Texto: Superíndice<br>
Texto <sup>Ejemplo superíndice</sup>
</p>
<p>
Texto: Subíndice<br>
Texto <sub>Ejemplo subíndice</sub>
</p>
</body>
</html>
Código
Visualización
Etiquetas: semánticas
<sup> Texto superíndice
<sub> Texto subíndice