2. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
HTML:
(HyperText Markup Language). Es un lenguaje
comúnmente utilizado para la publicación de
hipertexto en la Web y desarrollado con la idea de
que cualquier persona o tipo de dispositivo pueda
acceder a la información en la Web. HTML utiliza
etiquetas que marcan elementos y estructuran el
texto de un documento.
http://www.w3c.es/divulgacion/a-z/
<2>
3. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Programas
Dreamweaver
Archivo > Guardar > tipo > html
GoLive
FrontPage
Block de Notas
Archivo > Guardar Como > tipo > Todos los archivos
<3>
4. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Estructura básica
<html>
<head>
<title>primera pagina</title>
<meta name=”keywords” content=”html, etiquetas,
código fuente, taller”>
<meta name=”description” content=”introducción al
uso de etiquetas html”>
<meta name=”author” content=”Rafael Castillo G.“>
<meta name=”robots” content=”all”>
</head>
continua en la hoja siguiente
http://www.maestrosdelweb.com/editorial/usarmetas/
<4>
5. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Estructura básica
<body>
<h1>primera pagina</h1>
<p>aqui va todo un parrafo, aqui va todo un parrafo,
aqui va todo un parrafo, aqui va todo un parrafo, aqui
va todo un parrafo, aqui va todo un parrafo</p>
</body>
<html>
<5>
6. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Conceptos fundamentales:
Las etiquetas que se encuentran entre el tag
<head> </head>, se utilizan para decribir contenido,
y aportan con esa descripción para que el sitio
web sea posible de encontrar por parte de los
buscadores
<title>primera pagina</title>
<meta name=”keywords” content=”html, etiquetas, código fuente, taller”>
<meta name=”description” content=”introducción al uso de etiquetas html”>
<meta name=”author” content=”Rafael Castillo G.“>
<meta name=”robots” content=”all”>
<6>
7. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Conceptos fundamentales:
Las etiquetas que se encuentran bajo el tag
<body>, constituyen la parte visible de la página,
el contenido, y también aportan para que el sitio
Web sea posible de encontrar por parte de los
buscadores
<h1>primera pagina</h1>
<p>aquí va un párrafo</p>
<7>
8. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Estructura básica
<body>
<h1>primera pagina</h1>
<p>aqui va todo un parrafo, aqui va todo un parrafo,
aqui va todo un parrafo, aqui va todo un parrafo, aqui
va todo un parrafo, aqui va todo un parrafo</p>
<img src=”hola.jpg” title=”descripción de la imagen”>
</body>
</html>
<8>
9. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Caracteres especiales
á => á
é => é
í => í
ó => ó
ú => ú
<9>
10. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Caracteres especiales
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8” />
El UTF-8 es un tipo de codificación de caracteres
para Unicode que nos permite escribir nuestras
páginas Web y no preocuparnos por si se va a ver
correctamente o van a aparecer caracteres extraños.
http://sentidoweb.com/2006/03/30/especial-utf8-i.php
<10>
11. e Lenguaje de Etiquetado de Hipertexto (HTML)
g e
nt
rta
po
Im
Mitos y Leyendas del HTML
<11>
12. e Lenguaje de Etiquetado de Hipertexto (HTML)
nt
rta
po
Im
1. HTML, No es un lenguaje de programación
2. HTML, No está estandarizado
3. HTML, No está completo
4. HTML tradicional, No desaparecerá dentro
de poco
5. El HTML, No dará paso fácil a XHTML
6. Saber HTML, No es lo único que necesitas
para crear excelentes sitios Web
<12>
13. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Etiquetas, Enlaces
• Enlace a una página dentro del sitio:
<a href=”dos.htm”>Otra pagina</a>
• Enlace a una página fuera del sitio:
<a href=”http://www.infoxicacion.cl”>Infoxicación</a>
• Enlace a correo electronico:
<a href=”mailto:rcastillo@auradesign.cl”>Contactenos</a>
• Enlace en la misma página:
<a href=”hola.htm#top”>volver al inicio</a>
<a name=”top”></a>
<13>
14. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Etiquetas, Listados
• Con números:
<ol>
<li>chao</li>
<li>hola</li>
</ol>
• resultado:
1. chao
2. hola
<14>
15. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Etiquetas, Listados
• Con Viñetas:
<ul>
<li>cabro</li>
<li>hola</li>
</ul>
• Resultado:
• cabro
• hola
<15>
16. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Etiquetas, Tablas
<table>
<tr>
<td>hola muchachos</td>
</tr>
</table>
<16>
17. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Etiquetas, Tablas
<table>
<tr>
<td>hola muchachos</td>
<td>Chao muchachos</td>
</tr>
</table>
<17>
18. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Etiquetas, Tablas
<table border=”2”>
<tr>
<td>hola muchachos</td>
<td>Chao muchachos</td>
</tr>
<tr>
<td>Chicos</td>
<td>Grandes</td>
</tr>
</table>
* border= grosor del borde de la tabla
<18>
19. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Etiquetas, Tablas
<table border=”2” cellspacing=”10”>
<tr>
<td>hola muchachos</td>
<td>Chao muchachos</td>
</tr>
<tr>
<td>Chicos</td>
<td>Grandes</td>
</tr>
</table>
* cellspacing= espacio entre celdas
<19>
20. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Etiquetas, Tablas
<table border=”2” cellspacing=”10” cellpadding=”15”>
<tr>
<td>hola muchachos</td>
<td>Chao muchachos</td>
</tr>
<tr>
<td>Chicos</td>
<td>Grandes</td>
</tr>
</table>
* cellpading= margen dentro de la celdas
<20>
21. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Etiquetas, Tablas
<table border=”2” cellspacing=”5” cellpadding=”5”>
<tr>
<td colspan=”3”>hola muchachos</td>
</tr>
<tr>
<td>Chicos</td>
<td>Grandes</td>
<td>medianos</td>
</tr>
</table>
* colspan= fusión de columnas
<21>
22. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Etiquetas, Tablas
<table width=”80%”>
<tr>
<td rowspan=”2”>Chicos</td>
<td>Grandes</td>
<td>medianos</td>
</tr>
<tr>
<td>Chicos</td>
<td>Grandes</td>
</tr>
</table>
* rowspan= fusión de filas
<22>
23. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Bibliografía
http://www.estandaresweb.es/
http://www.w3c.es
http://cssbeauty.com
http://useme.cl/labs/layouts/
http://www.w3schools.com/css/css_list.asp
http://www.unmatchedstyle.com/
http://cssvault.com/
http://www.alzado.org/articulo.php?id_art=193
<23>
24. Lenguaje de Etiquetado de Hipertexto (HTML)
g e
Bibliografía
http://www.manual-html.com/
http://www.tejedoresdelweb.com/w/Portada
http://www.anieto2k.com/
http://www.nosolousabilidad.com/
http://www.revistafaz.org/index.html
http://iainstitute.org/es/
http://ergonomic.wordpress.com/
<24>