HTML/CSS Tutorial
1

Estructura general
2

Página sin marcos



...


...



Página con marcos









<br /> ...<br />



Frames
3

Los marcos permiten presentar undocumento

en múltiples vistas, las cuales pueden ser o no
dependientes.

Atributos










FRAMEBORDER – yes o 1 para tener borde
FRAMESPACING – ancho del borde
BORDERCOLOR – color
SRC – url del documento a visualizar dentro del marco
NAME – destino usado por el atributo TARGET, generalmente de los enlaces
MARGINWIDTH – ancho de los márgenes izquierdo y derecho
MARGINHEIGHT –ancho de los márgenes inferior y superior
SCROLLING – yes o 1 para mostrar la barra de desplazamiento
NORESIZE – yes o 1 para deshabilitar el redimensionamiento

Diseño de página con marcos
4

Permiten diseñar una vista en el navegador

web donde pueden interactuar varias páginas
html.

Atributos



ROWS – Número de marcos horizontales separados por comas
COLS – Número de marcosverticales separados por comas

Estas divisiones de la página son creadas de izquierda a derecha para las
columnas y de arriba hacia abajo para las filas. El contenido de cada
división esta dado por el contenido de los FRAME o FRAMESET en orden de
aparición que contenga el FRAMESET original. Hay que tener en cuenta
que un FRAMESET puede contener otros FRAMESET, pero estos deben
terminar con alguno quecontenga únicamente elementos FRAME

BODY
5

Contienen todo el cuerpo del documento

HTML
Atributos: Están en desuso a favor de las
hojas de estilo.







BACKGROUND=“Sunset.jpg”
BGCOLOR=color
TEXT=color
LINK=color (enlaces no visitados)
VLINK=color (enlaces visitados)
ALINK=color (enlace cuando se selecciona)

Encabezados
6

Usados como descriptor de los tópicos que

inician.

Másimportante

text

text

text

text

text

text

Menos importante

Atributo: ALIGN="position"
left (default), center o right

Nivel-1 (H1)

Nivel-2
(H2)

Nivel-3 (H3)


es para crear saltos de línea

Ejemplo de párrafo

Párrafo centrado



 Textos preformateados

8



Es usado para mostrar un texto con los



espacios en blanco intactos, de tamaño fijo

para todoel texto y sin ajustar. Usado

usualmente

para mostrar código.



if (a < b) {

a++;

b = c * d;

} else {

a--;

b = (b-1)/2;

}





Entidades

9



Son nombres simbólicos de caracteres “especiales’,



de manera que sea fáciles de recordar.



Carácter Entidad



Caráct

er



Entidad



ñ



ñ



<



<



>



>



€



€



&



&



÷



÷



á-ú



á ú



à-ù



à ù



""



Espacio



 



Listas

10



 Usadas para mostrar datos relacionados. Pueden ser



(des)ordenadas (UL y OL) con un listado de elementos

(LI) o de definición (DL) y sus términos (DT) con sus

descripciones (DD). Pueden estar anidadas.



texto


...





texto


...





Término


...

Descripción


...

...







Salir


Pasar
Viajar


Ola


Onda






 Cresta 


Golpe












L1


L2




SL 1


SL 2








Otros elementos

11



Elementos de frases

EM:

STRONG:

CITE:

DFN:

CODE:

SAMP:

KBD:

VAR:

ABBR:

ACRONYM:

ADDRESS:

BLOCKQUOTE:



Énfasis

Mayor énfasis

Cita o referencia

Definición

Fragmento de código

Salida de programas

Texto a...                    

                    

                        
                            Leer documento completo                        
                        

                                                            Regístrate para leer el documento completo.