HyperText

Markup Language Lenguaje de etiquetas Crear pginas web

Contenido y estructura de la misma

La

versin actual es 4.x

HTML 5: en proceso de estandarizacin

cargo de W3C (World Wide Web Consortium)

 Son

construcciones especiales que tienen un significado asociado Estructura

Delimitada por parntesis angulares: tiene inicio, cuerpo y fin. La etiqueta de inicio puede contener atributos (atributo=) El cuerpo o contenido de la etiqueta puede ser texto u otras etiquetas

Ejemplo: <p>Etiqueta de prrafo</p>

Algunas etiquetas no tiene cuerpo y pueden cerrarse con la etiqueta de apertura

Ejemplo: <img src=foto.jpg />

HTML HEAD TITLE BODY TABLE, TR, TD UL, OL, LI H1, H2, H3, H4, H5, H6 P, DIV SPAN A IMG

Responsable del formato de la pgina web Fue introducido para separar el contenido de su formato: reutilizacin y optimizacin Se puede trabajar:

Estilos en lnea Estilos internos Estilos externos Nombre: red, blue, green, red, yellow, black, . . . Hexadecimal: #FFFFFF. Los valores se especifican en hexadecimal de 00 a FF para rojo, verde y azul respectivamente. RGB

Los colores se pueden especificar

color: color de texto text-align: alineacin de texto text-transform: cambia el texto a maysculas, minsculas o capital text-decoration: aplica efectos al texto font-weight: texto en negrita font-size: tamao de texto background-color: color de fondo background-image: imagen de fondo width, height: ancho y altura de elemento border: borde de un elemento
border-style: estilo de borde border-width: ancho de borde border-color: color de borde Se puede controlar cada uno de los bordes de un elemento: left, right, top, bottom

 margin,

padding

Se puede controlar cada uno de los bordes de un elemento: left, right, top, bottom Margin especifica la distancia de su borde con los elementos externos Padding especifica la distancia de su borde con el contenido del mismo

list-style-type:

tipo de estilo de la nmeracin o vieta de una lista

 Estilos

de enlaces

a:link : enlace normal a:visited: enlace visitado a:hover: mouse encima del enlace a:active: enlace con foco

Se

puede aplicar hover a otros elementos

 Para

aplicar estilos se indica el atributo y el valor a utilizar y punto y coma (;) para terminar Se utiliza dos puntos(:) para asignar un valor a un atributo Ejemplo:

text-align: right; border-left-color: red; color: yellow;

 Estilos

en lnea

Se utiliza el atributo style presente en todas las etiquetas

<p style=color:blue; text-align:center;>parrafo</p>

Estilos

internos

Se utiliza la etiqueta style

<style type=text/css> </style>

 Estilos

externos

Se importan los estilos de un archivo de estilos, con extensin css.

<link rel=stylesheet type=text/css href=misestilos.css />

CSS permite redefinir etiquetas, crear clases, aplicar estilos por ID y encadenar estilos

Redefinir etiquetas: Modifica el formato por defecto de una etiqueta HTML Crear clases: Se crear un conjunto de estilos a los cuales se les asigna un nombre. Este nombre se utiliza varias veces con el atributo class de una etiqueta HTML Formato en base a ID: se utiliza el ID de una etiqueta para aplicar estilos Encadenamiento: se puede utilizar varias opciones

p, h1: aplica estilos tanto a las etiquetas p como a las etiquetas h1 div p : aplica estilos a las etiquetas p que estn dentro de una etiqueta div