s01

S1 :: Introduccion a HTML

Alejandro Henrıquez Lazo

Taller de Aplicaciones para InternetAIEP

Tabla de Contenidos

Un poco sobre HtmlHistoriaCaracterısticasEtiquetas

Escribiendo codigoEjemplo minimalista

Etiquetas basicasbodyheader

Atributos id y class

2 de 12

Un poco sobre HtmlHistoria

� HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

� HTML es el lenguaje por excelencia en el que se escriben laspaginas web

� Fue publicado por primera vez en Internet en 1991 por TimBerners-Lee

� Actualmente esta en la version 4.01

� Ya existen avances sobre HTML5 que incorpora elementos desemantica en el lenguaje

3 de 12

Un poco sobre HtmlCaracterısticas

� Los archivos que se crean tienen la extension .html o .htm

� Los archivos se abren por defecto con el navegador

� Describe la estructura y el contenido en forma de texto

� Se escribe en forma de ”etiquetas”, rodeadas por corchetesangulares (<,>)

� Puede describir, hasta un cierto punto, la apariencia de undocumento

� Puede incluir un script (por ejemplo Javascript), el cual puedeafectar el comportamiento de navegadores web

4 de 12

Un poco sobre HtmlEtiquetas

<e t i q u e t a a t r i b u t o =’ v a l o r ’>E s t e e s e l c o n t e n i d o de l a e t i q u e t a

</ e t i q u e t a>

� Senalan el inicio y fin de un elemento

� A su vez poseen atributos que pueden ser modificados

� Las etiquetas existentes, atributos y valores estan definidos por laW3C1

1http://www.w3.org/5 de 12

</ e t i q u e t a>

Ejemplo minimalista

<!DOCTYPE HTML PUBLIC ”−//W3C//DTD HTML 4.01//EN”” h t t p : / /www. w3 . org /TR/ html4 / s t r i c t . dtd ”>

< t i t l e>Ejemplo</ t i t l e></head><body>

</html>

6 de 12

Etiquetas basicasEn el body

< h1 > Tıtulo nivel 1

< p > Parrafo

< em > Enfasis italico o cursiva

< strong > Enfasis fuerte negrita

< cite > Para la insercion de citas

< br/ > Salto de lınea

VisualizacionLas etiquetas no define como se vera el elemento, pero la existe unaestandarizacion entre los distintos navegadores.

7 de 12

< p > Parrafo

7 de 12

< p > Parrafo

7 de 12

< p > Parrafo

7 de 12

< p > Parrafo

7 de 12

< p > Parrafo

7 de 12

< p > Parrafo

7 de 12

< p > Parrafo

7 de 12

Imagenes

width Ancho de la imagen

height Alto de la imagen

src Ubicacion de la imagen

alt Texto alternativo de no encontrar la imagen

title Titulo de la imagen

8 de 12

Imagenes

8 de 12

Imagenes

8 de 12

Imagenes

8 de 12

Imagenes

8 de 12

Imagenes

8 de 12

Es importante saber

� Los tamanos de ancho y largo pueden ser especificados en em, px y%

� Las path deben ser relativas desde la raız del sitio

� Las etiquetas de tıtulo aparecen como tooltip cuando ponemos elcursor sobre el objeto

9 de 12

Es importante saber

9 de 12

Es importante saber

9 de 12

Es importante saber

9 de 12

Etiquetas basicasEn el header

< title > Especifica el tıtulo de la pagina

< link > Para vincular hojas de estilo o iconos

< style > Especifica estilos dentro de la pagina

< script > Especifica script dentro de la pagina

< meta > Especifica informacion sobre el documento

10 de 12

Atributos id y classEtiqueta

<e t i q u e t a i d =’nombre−id ’ c l a s s =’nombre−c l a s e ’>E s t e e s e l c o n t e n i d o de l a e t i q u e t a

</ e t i q u e t a>

id Especifica el identificador del elemento (que debe serunico)

class Especifica el grupo al que pertenece el elemento (puederepetirse)

11 de 12

</ e t i q u e t a>

11 de 12

</ e t i q u e t a>

11 de 12

Atributos id y classEstilo

<s t y l e type=” t e x t / c s s ”>e t i q u e t a−html {

a t r i b u t o−1 : v a l o r−a t r i b u t o −1;a t r i b u t o−2 : v a l o r−a t r i b u t o −2;

#nombre−i d {a t r i b u t o−1 : v a l o r−a t r i b u t o −1;a t r i b u t o−2 : v a l o r−a t r i b u t o −2;

. nombre−c l a s s {a t r i b u t o−1 : v a l o r−a t r i b u t o −1;a t r i b u t o−2 : v a l o r−a t r i b u t o −2;

}</ s t y l e>

etiqueta nombre

id #nombre

class .nombre

12 de 12

s01

Education