<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>

Transcripción

1

2 <DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>

3 <DOCTYPE HTML PUBLIC> <HTML> <HEAD> <TITLE>Marcos en HTML</TITLE> </HEAD> <FRAMESET COLS="25%,75%"> <FRAME SRC="imagen.gif"> <FRAME SRC="imagen.gif"> </FRAMESET> </HTML>

4 Atributo Explicación SRC= Nombre del documento que se quiere colocar dentro del marco. NAME= Asigna un nombre a un marco de forma que pueda ser el destino de enlaces situados en otros marcos. MARGINWIDTH= Especifica el margen lateral (en pixels). MARGINHEIGHT Especifica el margen superior e inferior (en pixels). SCROLLING=(yes, no, auto) Si un documento es más largo que el marco aparecen unas barras de desplazamiento. Este atributo permite activar, desactivar o automatizar su aparición. NORESIZE Evita que el tamaño de los marcos sea alterado.

5 Marco1.html <HTML> <HEAD> <TITLE>Pagina A</TITLE> </HEAD> <BODY> <H3> Frame A </H3> <P> Columna del 50% </P> </BODY> </HTML> Marco2.html <HTML> <HEAD> <TITLE>Pagina B</TITLE> </HEAD> <BODY> <H3> Frame B</H3> <P> Columna del 50% </P> </BODY> </HTML>

6 Marcos.html <HTML> <HEAD><TITLE>Marcos </TITLE></HEAD> <FRAMESET COLS=50%,50%> <FRAME SRC= Marco1.html" > <FRAME SRC= Marco2.html" > </FRAMESET> <NOFRAMES> <BODY> Lo siento,su navegador no soporta frames. Pulse <a href= Marco1.html>aquí </A> para acceder a los contenidos de estas páginas. </BODY> </NOFRAMES> </HTML>

7 Valor _self _parent _top _blank Marco destino Significado Hace que el navegador actualice el marco en el que se encuentre la pagina. Hace que el navegador actualice el marco padre del marco actual. Hace que el navegador actualice toda el área de trabajo del navegador. Hace que el navegador abra una ventana nueva en la que se despliega la pagina. Este atributo especifica el nombre de un marco en el que debe abrirse un documento (name)

8 Propuesta de W3C para separar formato de contenido Aumentan la flexibilidad de los documentos CSS tiene su propia sintaxis para la definición de estilos Ámbito de la definición del estilo: Elemento Parte de un documento Documento Portal Ventajas Ahorro en la transferencia (Se envían una sola vez) Facilidad de mantenimiento de la imagen de un portal

9 Selector {especificación del estilo} El selector puede ser un elemento HTML o uno definido por nosotros (clases) H1 { font-family: Arial, sans-serif; font-size: 28pt}

10 Importar la hoja de estilos desde un archivo externo. Incluir la definición de estilos en la cabecera del documento. Definir el estilo en el elemento en que se desee aplicar. Ventajas e inconvenientes: Archivos externos: Reutilización del estilo en varios documentos Cabecera: Permite personalizar estilos predefinidos Repetición de definiciones para otros documentos Elemento: Asignación de estilo a nivel de carácter Repetición de definiciones para otros documentos Vinculación del formato al documento HTML

11 Creación del archivo.css Archivo de texto con las definiciones de los estilos: <HEAD>... <LINK rel= stylesheet type= text/css href= estilo.css >... </HEAD> Atributo REL: El enlace es una hoja de estilos Atributo TYPE: El archivo es de texto y en sintaxis CSS Atributo HREF: Archivo.css

12 Estilos incluidos en el elemeto <STYLE> dentro de <HEAD> <head> <STYLE type="text/css">  </STYLE> </head> Uso del estilo en línea Creación

13 El estilo sólo es válido en el elemento en el que está definido. Estilos definidos como valores del atributo STYLE: <H1 STYLE = font-family: Arial, sans-serif; font-size: 45pt > Texto del encabezado H1 </H1>... <DIV STYLE = "background: yellow; font-weight: bold"> <p>formato de párrafo definido con el estilo</p> </DIV> Estilos para palabras o caracteres: <body> <h1>encabezado con estilo definido para H1</h1> Formato predeterminado para <SPAN STYLE = "background= yellow; font-weight= bold">body</span> </body>

14

15 Las clases permiten la definición de estilos para ser aplicados a elementos diferentes. Sintaxis de definición:.nombreclase {Definición del estilo} Sintaxis de uso: <etiqueta CLASS = nombreclase > </etiqueta>

16 Es posible asociar un estilo para un identificador. Similar a las clases, pero menos utilizado. <head> <link rel="stylesheet" style="text/css" href="estilo1.css"> <STYLE type = "text/css">  </STYLE> </head> <body> <p ID = "PalabrasClave">Palabras clave: Bases de datos, Programación web, Generación dinámica de contenidos, PHP</p> </body> </html>

17 Basta con poner el prefijo del contexto: TD B {color: blue; font-size: x-large} UL B {color: red} Permite aplicar las mismas reglas a varios selectores: H1, H2, H3 {font-family: Arial, sans-serif; color: blue} H1 {font-size: 200%} H2 {font-size: 150%} H3 {font-size: 125%}

18

19

20 Nombre del atributo Posibles valores Ejemplos color font-size font-family font-weight font-style valor RGB o nombre de color xx-small x-small small medium large x-large xx-large Unidades de CSS serif sans-serif cursive fantasy monospace Todas las fuentes habituales normal bold bolder lighter normal italic oblique color: #009900; color: red; font-size:12pt; font-size: x-large; font-family:arial,helvetica; font-size: fantasy; font-weight:bold; font-weight: 200; font-style:normal; font-style: italic;

21 Nombre del atributo Posibles valores Ejemplos line-height text-decoration text-align text-indent text-transform normal y unidades CSS none [ underline overline line-through ] left right center justify Unidades CSS capitalize uppercase lowercase none line-height: 12px; line-height: normal; text-decoration: none; text-decoration: underline; text-align: right; text-align: center; text-indent: 10px; text-indent: 2in; text-transform: none; text-transform: capitalize;

22 Nombre del atributo Posibles valores Ejemplos Background-color Background-image Margin-left Margin-right Margin-top Margin-bottom Un color, con su nombre o su valor RGB El nombre de la imagen con su camino relativo o absoluto Unidades CSS Unidades CSS Unidades CSS Unidades CSS background-color: green; background-color: #000055; background-image: url(mármol.gif) ; background-image: url( margin-left: 1cm; margin-left: 0,5in; margin-right: 5%; margin-right: 1in; margin-top: 0px; margin-top: 10px; margin-bottom: 0pt; margin-top: 1px;

23 Nombre del atributo Posibles valores Ejemplos Padding-left Padding-right Padding-top Unidades CSS Unidades CSS Unidades CSS Padding-bottom Unidades CSS Border-color Border-style border-width color RGB y nombre de color none dotted solid double groove ridge inset outset Unidades CSS padding-left: 0.5in; padding-left: 1px; padding-right: 0.5cm; padding-right: 1pt; padding-top: 10pt; padding-top: 5px; padding-right: 0.5cm; padding-right: 1pt; border-color: red; border-color: #ffccff; border-style: solid; border-style: double; border-width: 10px; border-width: 0.5in;

24 El elemento <A> tiene 4 pseudoclases asociadas: link, visited, active, hover Usadas con hipervínculos: A:link. Selector para enlace no visitado A:visited. Selector para enlace visitado A:active. Selector para enlace que está siendo pulsado A:hover. Selector para enlace por el que está pasando el ratón Suelen incorporar la propiedad text-decoration:none

25 a:link { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; color: #234465; } a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; color: #00405B; } a:hover { } a:active { }

26