HTML - Etiquetas

1. Historia del
HTML e
Internet

2. Tim Berners-Lee creó la primera versión
del lenguaje HTML en 1989, junto con su
equipo también desarrollaron el protocolo
HTTP y el sistema de nombres de la web
URL, por todo ello a Tim Berners-Lee se le
conoce como el "padre de la web".
El "padre de Internet" es Vinton Gray
Cerf que creó el protocolo TCP/IP que
sirve para interconectar ordenadores en
red.
2

3. A menudo se confunden los conceptos
de Internet y Web, simplificando
podemos decir que Internet es un
concepto más amplio que incluye el
mecanismo de comunicación que
forma la red mundial de ordenadores
conectados, mientras que la web es el
sistema de páginas web que funciona
a través de Internet. La tecnología
básica de Internet es el protocolo de
comunicación TCP/IP y la web se basa
en HTML.
3

4. HTML

5. HTML (Hyper Text Markup Lenguage) es un leguaje
de marcado de texto, lo cual nos indica que no es un
lenguaje de programación como Java, PHP, C o
VisualBasic. HTML es el lenguaje para escribir páginas
web. Las marcas, conocidas como etiquetas, describen la
forma en la que se estructura el contenido de una página
web.
5

6. Las etiquetas describen diferentes elementos de la página, por ejemplo, la
etiqueta <p> se utiliza para delimitar párrafos de texto y la
etiqueta <img> para definir imágenes.
El encargado de interpretar estas etiquetas es un programa
llamado navegador (browser), por ejemplo, el navegador Chrome de
Google o el Firefox de Mozilla.
Los archivos que contienen el código HTML tienen la
extensión .htm o .html, y son archivos de texto plano (sin formato).
6

7. El lenguaje HTML es un estándar
definido y mantenido por el consorcio
internacional World Wide Web
Consortium (W3C) creado el 1 de
octubre de 1994, por Tim Berners-Lee
en el Instituto Tecnológico de
Massachusetts (MIT), actual sede
central del consorcio.
7

8. Una página web debe estar escrita en
HTML pero también suele incorporar otros
elementos como hojas de estilo CSS y
programación con el lenguaje Javascript.
Con CSS se define el aspecto estético de
la página y con Javascript se pueden
realizar tareas adicionales cómo abrir y
cerrar ventanas, validar los datos
introducidos por los usuarios, y otras
tareas que requieren ser programadas.
El conjunto de HTML, CSS y Javascript es
lo que se conoce como front-end o capa
de presentación. 8

9. Etiquetas

10. Las etiquetas (marcas) delimitan cada uno de los
elementos que componen un documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es
importante entender bien la sintaxis de las etiquetas. El
siguiente esquema muestra las partes de una etiqueta
HTML genérica.
10

11. 11

12. 12
Algunas etiquetas no tienen contenido, y se cierran sobre sí
mismas, no tienen etiqueta de cierre, se llaman etiquetas vacías,
como la etiqueta <br>. En estas etiquetas opcionalmente se puede
colocar una barra justo antes del signo >, por ejemplo: <br />.
La etiqueta <br> produce un salto de línea.
Las etiquetas vacías no tienen contenido pero si pueden tener
atributos. Algunas otras etiquetas vacías
son <hr>, <img>, <input>, <link>, <meta>, <param> y <source>.

13. Editores

14. 14
Los archivos que contienen el código HTML tienen la
extensión .htm o .html, y son archivos de texto plano, es decir,
lo que se ve es lo que hay, no hay código oculto como ocurre
con los archivos de los procesadores de texto (como Microsoft
Word y otros) esto quiere decir que un archivo HTML puede
ser escrito con cualquier editor que sea capaz de escribir
archivos de texto plano, como el Bloc de notas de Windows,
aunque lo recomendable es utilizar editores específicos para
páginas web como Brackets, Atom, NotePad++, Sublime,
Dreamweaver, etc.

16. Conceptualización
La incorporación del hipertexto en el lenguaje HTML
permitió crear documentos interactivos, estos
proporcionan información adicional cuando se
solicite. El elemento principal del hipertexto es el
hiperenlace, también llamado “enlace web”. Los
enlaces se utilizan para establecer relaciones entre
dos recursos.
Los enlaces en HTML se crean mediante la etiqueta
<a>

17. Atributos de
etiqueta <a>
• Asigna el nombre al enlace para que se
pueda acceder desde otros enlaces.
name= “texto”
• Permite ubicar la URL o dirección del
recurso que se quiere enlazar.
href = “url”

18. Partes de una URL
• Representa el formato en el que se intercambian los datos de
nuestro navegador y la maquina de destino. http, ftp, https, etc.
Protocolo
• Indica que servidor de internet nos va a brindar la información
solicitada. www.google.com
Dominio
• Indica la ubicación del archivo que se ha solicitado dentro del
servidor. /index.html
Ruta del Servidor
protocolo://dominio/ruta en el servidor

19. Las etiquetas (tags) están formadas por corchetes o
paréntesis angulares “<>” también se les conoce
como Signos mayor y menor que. Las etiquetas o
tags permiten interconectar toda la información
escrita en lenguaje HTML entre conceptos y
formatos.
El lenguaje HTML es un estándar, sus normas las
define un organismo sin fines de lucro llamado World
Wide Web Consortium, mas conocido como W3C.

20. El código HTML puede ser creado y editado con
cualquier editor de texto básico, como puede ser
Gedit en Linux, Bloc de notas de Windows o
cualquier otro editor que admita texto sin formato
cono Notepad++, entre otros.
Existen otros editores para la creación de sitios web
con características WYSIWYG (What You See Is
What You Get) en español: Lo que ves es lo que
obtienes. Estos programas permiten ver el resultado
de lo que se esta creando en tiempo real. Algunos
ejemplos de estos editores son KompoZer, Adobe
Dreamweaver, WYSIWYG Web Builder, etc.

22. Conceptualización
Un documento HTML necesita de imágenes para
cambiar su apariencia y hacerlas muy atractivas.
Para insertar imágenes en un documento HTML se
utiliza <img> que permite incluir en un documento
HTML cualquier tipo de imagen.

23. Atributos de la
etiqueta <img>
• Permite asignar la dirección de la imagen. <img src
“dirección de la imagen”>
src
• Permite asignar un texto descriptivo como alternativa
en el caso que una imagen introducida mediante la
directiva <img> no se muestre en la pagina web.
alt

25. Conceptualización
Las tablas se utilizan para agrupar información en
columnas y filas. En versiones anteriores de HTML,
las tablas se utilizaban para la maquetación de los
sitios, con la aparición de los CSS esta técnica ya no
se utiliza.
La tabla esta compuesta por filas y columnas, el
conjunto de la tabla se delimita con las directivas
<table>…</table>, las filas se crean con la directiva
<tr> y las columnas con la etiqueta <td>.

26. Aplicar Borde a la
Tabla
Para aplicar un borde a una tabla se utiliza el atributo
border de la directiva <table>, entre mas grande es
el numero del valor numérico del atributo mas grueso
es el borde.
HTML5 solamente permite el atributo border dentro
de la directiva <table>

27. Una tabla está
formada por:
1) Filas se crean con etiqueta <tr>
2) Grupo de columnas se manipulan con las etiquetas
(<colgroup> y <col>)
3) Encabezamiento de las celdas se crea con la etiqueta
<th>
4) Cuerpo de las celdas se crea con la etiqueta <th> o
<td>
5) Titulo de la tabla se crea con la etiqueta <caption>
6) Encabezamiento de la tabla se agrupa con la etiqueta
<thead>
7) Cuerpo de la tabla se agrupa con la etiqueta <tbody>
8) Pie de pagina se agrupa con la etiqueta <tfoot>

28. Modificar Tabla
Cuando se aplican colores en HTML se expresan con
código hexadecimal donde se inicia con el símbolo (#)
seguido de 6 letras o números, por ejemplo: #FA5858.
Donde:
1) Los dos primeros números representan la intensidad
del color rojo.
2) El tercer y cuarto numero representan la intensidad del
color verde.
3) El quinto y sexto numero representan la intensidad del
color azul.

29. Fusionar Tabla
Para fusionar celdas con código HTML se utilizan los
atributos:
1) Rowspan: indica el numero de filas que ocupará la
celda.
2) Colspan: Permite especificar el numero de columnas
que ocupará la celda.
Si escribimos <td colspan=2>, quiere decir la celda actual
se extiende en el ancho de dos celdas y si escribimos <td
rowspan=3>, la celda ocupará el alto de 3 celdas normales.