Taller de Html

Taller

(HTML)

Rafael Castillo Guerrero

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>

g e

Programas
Dreamweaver
Archivo > Guardar > tipo > html

GoLive

FrontPage

Block de Notas
Archivo > Guardar Como > tipo > Todos los archivos

<3>

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>

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>

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>

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

<p>aquí va un párrafo</p>

<7>

g e

Estructura básica
<body>

<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>

g e

Caracteres especiales

á => á
é => é
í => í
ó => ó
ú => ú

<9>

g e

Caracteres especiales

<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8” />

El UTF-8 es un tipo de codiﬁcació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>

e Lenguaje de Etiquetado de Hipertexto (HTML)
g e
nt
rta
po
Im

Mitos y Leyendas del HTML

<11>

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>

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>

g e

Etiquetas, Listados
• Con números:
<ol>
<li>chao</li>
<li>hola</li>
</ol>

• resultado:
1. chao
2. hola

<14>

g e

Etiquetas, Listados
• Con Viñetas:
<ul>
<li>cabro</li>
<li>hola</li>
</ul>
• Resultado:
• cabro
• hola

<15>

g e

Etiquetas, Tablas

<table>
<tr>
<td>hola muchachos</td>
</tr>
</table>

<16>

g e

Etiquetas, Tablas

<table>
<tr>
<td>Chao muchachos</td>
</tr>
</table>

<17>

g e

Etiquetas, Tablas
<table border=”2”>
<tr>
</tr>
<tr>
<td>Chicos</td>
<td>Grandes</td>
</tr>
</table>

* border= grosor del borde de la tabla
<18>

g e

Etiquetas, Tablas
<table border=”2” cellspacing=”10”>
<tr>
</tr>
<tr>
<td>Chicos</td>
<td>Grandes</td>
</tr>
</table>

* cellspacing= espacio entre celdas
<19>

g e

Etiquetas, Tablas
<table border=”2” cellspacing=”10” cellpadding=”15”>
<tr>
</tr>
<tr>
<td>Chicos</td>
<td>Grandes</td>
</tr>
</table>

* cellpading= margen dentro de la celdas
<20>

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>

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>

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>

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>

Taller de Html

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Taller de Html

Similaire à Taller de Html (20)

Dernier

Dernier (20)

Taller de Html