02 HTML501 - Resumen

CERTIFICACION HTML5
Mdulo 3: Leccin 1: Sintaxis bsica CSS (3.1.5)
3 elementos bsicos
Body
(SELECTOR) (PROPIEDAD)
Background-color: Red
(VALOR DE PROPIEDAD)
Mdulo 3: Leccin 1: Aplicando CSS a un documentos HTML-Metodo in Line (3.1.7) Se agrega (Dentro del rengln especifico)
<body style="background-color:red;color:Yellow">
A la lnea en cuestin y de esta manera se le pone dentro de la lnea; Desventaja; Los estilos solo aplican 1 elemento especifico (rengln). (se tendra que repetir en las dems. Los cambios tambin se haran as.) Ventaja: son los ms especficos de todos los selectores. Su uso prctico en para el correo en html ya que no se pueden incluir en archivos separados.
Mdulo 3: Leccin 1: Aplicando CSS a un documentos HTML-Metodo Interno (Embedded) (3.1.8) Se agrega (Dentro de la pgina principal) en la seccin head
<head> <style type="text/css"> body { Background-color:Red; color:Yellow; } h1,h2,h3 { color:White; }
Desventaja; Los estilos solo aplican a 1 pgina. (Se tendra que repetir en las dems. Los cambios tambin se haran as.) Ventaja: se modifican grupos completos.
Mdulo 3: Leccin 1: Aplicando CSS a un documentos HTML-Mtodo Externo (3.1.9) Se agrega (Dentro de una pgina secundaria a travs de un vnculo u hoja de estilo externa) Las reglas se ponen ah. DOS FORMAS: Nombre
@import
Tipo
@import url("styles/estilos.css");
Ventaja Se uso en archivos css para conectar hojas adicionales. Se pueden vincular varios docs html con este estilo.
Desventaja Se tiene que dejar el :

<style type="text/css">
Link
<link href="styles/estilos.css" type="text/css" rel="stylesheet"/)>
Desventaja; NA Ventaja: Ya no se tienen que modificar cada pgina, si no en todas las pginas con el vnculo a la vez. Ventaja: se modifican varias pginas a la vez.
Mdulo 3: Leccin 1: Trabajando con selectores (3.1.10) 4 tipos bsicos Tipos TAGS Selector: NA Descripcion __ style=" Ejemplo:
<body style="backgroundcolor:red;color:Yellow">
Change Muy comunes.( body) Propsito de una sola repeticin. 1 sola vez se utiliza en la pg. Puede ser utilizado mltiples veces en 1 pagina Limitar reglas especficas para una seccin especficas.
ID
#header }
<_ id="
">
<p id="header">Es es un parrafo de cabecera con CSS ID</p> "> <p class="aviso">
CLASS
{
.aviso }
<_ class="
Compuesto #titulos h1
{ }
<div id="
">
<div id="titulos">
Los nombres de las clases deben de : -Comenzar con letras -no caracteres especiales -Reconocen maysculas y minsculas
Mdulo 3: Leccin 1: Conceptos clave CSS (3.1.11) Principios Cascada Herencia Descripcin Dadas 2 reglas CSS idnticas, la ms cercana gana;(la que este ms abajo Los principios de un Tag padre tambin afectan los elementos hijo Orden Change
Especificidad Dos reglas con diferentes selectores afectan el mismo elemento
Se ponderan de la siguiente manera (de abajo hacia arriba)
SELECTORES: a)Tags b) Class c)ID d)In Line
Mdulo 3: Leccin 2: Validando CSS (3.2.1) Antes de empezar a probar las pags en el explorar se tiene que probar que estn bien creadas, (validarlas) se basa en un recomendacin desarrollada por W3C, y se verifican con validadores.
Validador ms usado es el:
http://jigsaw.w3.org/css-validator/
Mdulo 3: Leccin 2: Probando CSS en el explorador Web (3.2.2) Instalar la mayor variedad de exploradores y probarlo con cada uno de ellos. Descargar IE tester (para probar como funciona con versiones antiguas de explorador: http://www.my-debugbar.com/wiki/IETester/HomePage INSTALAR y con este programa realizar pruebas con las hojas de estilo.
Mdulo 4: Leccin 1: Trabajando con Prrafos(4.1.1) Para escribir prrafos de texto se usan Tipos de TAGS: Elemento De bloque Descripcin Sin estilo adicional, sigue su lnea y respeta el margen del contenedor. Rompe la lnea Ejemplos: <p> </p> Uso Escribir prrafos
Romper
<br/>
Romper prrafos
Mdulo 4: Leccin 1: Agregando encabezados (4.1.2) Bsicamente existen 6 niveles de encabezados (H1,H2,H3,H4,H5,H6) Aunque rara vez se usan el 4,5,6.
Mdulo 4: Leccin 1: Aplicando caracteres especiales (4.1.3) Son conocidos como entidades de caracteres; Caractersticas: Inician con un & (amperson) y finalizan con ; ejemplo : & o con su nmero &__;
Pgina con ms informacin acerca de: http://www.w3.org/MarkUp/html3/latin1.html http://www.w3.org/TR/html4/SGML/entities.html
Mdulo 4: Leccin 2: Seleccionando tipos de letra (4.2.1) Los tipos de letra son pocos (cerca de 30) Ya que no todos son soportados: Se recomienda utilizar la propiedad. Font-family Descripcin font-family:__,____,___ Ejemplos:
fontfamily:serif,arial,helvetica," lucida sans-serif Unidcode",sans-serif;
Uso Se le dan varias opciones para que en caso no encuentre una siga con la otra. Las sigue en el orden que esta dispuesta. *Ultimo tipo; se recomienda que se le de genrico. *Si incluye espacios se le debe poner entre comillas.
Mdulo 4: Leccin 2: La regla @font-face (4.2.2) Se puede romper el limitante de los tipos de letras a travs de esta regla (creados para la web) algunos gratis otros de paga; se importan de manera similar que una hoja externa:
Tipo
@fontface
Se especifica regla
@font-face { font-family:MyFont; src: url("/fonts/Bleeding Cowboys.eot"); }.
Se rutea regla
{ fontfamily:MyFont,serif,arial,helvetica ,"lucida sans-serif Unidcode",sansserif; color: White; }
Se recomienda dejar varias opciones en caso que no sea soportado, por el browser. EJEMPLO:
font-family:MyFont; src: url("/fonts/Dekar.otf"), url("/fonts/Bleeding Cowboys.ttf");
Pueden ser tipo: .eot .tff .otf
Explicaciones de familias de fuentes y letras http://sidar.org/recur/desdi/traduc/es/css/fonts.html
Pginas con fonts gratis http://www.fonts500.com/ http://www.1001freefonts.com/
Mdulo 4: Leccin 2: Estableciendo Tamao de texto (4.2.3) Propiedad: Font-size
Metodos Ejemplo Sub-variable Descripcion Predeterminados font-size:small NA Nos otorga variables de tamaos predeterminados Por pixeles font-size:15px NA Nos otorga variables por tamaos en pixeles. Por ptos Por m font-size: font-size:2em NA % de la m Nos otorga variables por pts de impresin
Se puede ajustar el ancho del margen entre las lneas del prrafo de la siguiente manera: Line-height:__px; As como color y otras variantes.
Mdulo 4: Leccin 2: Seleccionando color de texto (4.2.4) Propiedad: color:
Formas de seleccionarlos: -Nombre: -valores hexadecimales (RGB): CALMA -Valores decimales Colores bsicos soportados: (16) http://www.w3.org/TR/css3-color/ color:0,0,0 color:black color:#000000 VERIFICAR VIDEO Y HACERLO CON
Mdulo 4: Leccin 2: Alineando y enfatizando texto (4.2.5) Propiedad: Alinear Centro Izquierda Derecha Justificar text-align Ejemplo Text-align:center Text-align:left Text-align:right Text-align:justify Sub-variable Descripcion center Left Right Justify
Propiedad: (2 tags) itlicas: negritas: Subrayar:
resaltado
<em> </em> <strong> </strong> <_ style=text-decoration:underline>
Mdulo 4: Leccin 3: Agregando enlaces a otras pginas (4.3.1) Propiedad: ancore <a> </a>
Establece un enlace: Ejemplo: <a href =URL> Nombre de enlace / imagen </a>
Tipos de URL: URI: URL: No especifica una seccin para llevar el enlace, sino la default. Enlace absoluto con especificacin.
Mdulo 4: Leccin 3: rutas relativas al documento (4.3.2) Cuando se tienen los enlaces dentro del mismo sitio.: Se usa URL relativo a la posicin del documento actual.
Propiedad:
ancore
<a> </a>
(est dentro del mismo nivel)

<a href="3.1.10 Trabajando con selectores.html">Ir a la pagina de trabajando con selectores</a>
(est dentro de una carpeta en el mismo nivel)

<a href="CarpetaNueva/3.1.10 Trabajando con selectores.html">Ir a la pagina de trabajando con selectores</a>
(est dentro de una carpeta en el nivel superior o raiz)

<a href="../Archivo en nivel superior">Ir a la pagina de nivel raiz</a>
Mdulo 4: Leccin 3: rutas relativas a la raz (4.3.3)
Toma en cuenta la estructura del sitio y se denota por / Propiedad: /
<a href="/CarpetaNueva/3.1.10 Trabajando con selectores.html">
Mdulo 4: Leccin 3: especificando donde mostrar un enlace (4.3.4) Propiedades: target:_
Target Valor Ejemplo: Blank <a

href="http://www.guitargear.com.mx/"target=" _blank">Guitar Gear</a>
Descripcion Nos abre el vnculo en nueva ventana
Self
<a href="3.1.10 Trabajando con selectores.html"target="_self">Ir a la pagina de trabajando con selectores</a>
Se abre en la misma pagina.
Mdulo 4: Leccin 3: agregando enlaces a las secciones de las paginas (4.3.5) Para contenidos muy grandes se hacen shorcuts Propiedades: <a href=#____> Nombre </a>
Se requiere: a) Enlace b) destino

<a href="#inicio"> Ir a Inicio </a> <p id="inicio">INICIO</p>
Mdulo 4: Leccin 3: Aplicando estilos a los estados de los enlaces (4.3.6) Los enlaces tienen 5 diferentes estados (dependiendo de la interaccin del usuario) Estado Link o default Visitado Hover Ejemplo Enlace Enlace Enlace Descripcion Sin usar; se queda azul por default Se abri o visito Se muestra una manita en lugar del cursor al momento de situarlo encima del enlace
focus
Enlace
Se usa teclado para seleccionar el enlace, queda como en una casilla Se deja presionado el mouse y se pasa a un estado activo; regularmente se pone rojo
Activo
Enlace
Aunque se les puede dar formato de texto, este solo se aplica al estado link o default. Se recomienda: -Crear reglas de estilos para los diferentes estados o SEUDOELEMENTOS:
a:link, a:visited { color: red; } a:hover { color: yellow; text-decoration:blink; }
Mdulo 4: Leccin 3: trabajando con enlaces a documentos y correo electrnico (4.3.7)
a) Se crea enlace que abra un men para envi correo es: Propiedades: EJEMPLO:
<a href="mailto:lsanchez@mexware.com"> Escribe mail al autor</a>
<a href=mailto:____at___>
Nombre
</a>
b) Se le pueden agregar parmetros de la siguiente manera: aunque no todos los correos los reconocen.
<a href=mailto:lsanchez@mexware.com?subject=informacin> Escribe mail al autor</a>
c) Descarga de documentos:
Se escribe solo la ruta:
<a href="/downloads/010101A001.zip">Descarga de actividad 1 curso HTML501</a>
Mdulo 4: Leccin 4: trabajando con la declaracin HTML5 DOCTYPE (4.4.1) Se validan segn el tipo de documento ya que las versiones HTML varan: El consorcio W3C tiene una lista de declaraciones en:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Solo poner :
<!DOCTYPE html>
Al inicio de pgina.
Mdulo 4: Leccin 4: utilizando el validador de W3C (4.4.2) Para ayudar a los diseadores a adherirse a los estndares se otorga: Se puede validar el CODIGO HTML
http://validator.w3.org/
Mdulo 5: Leccin 1: entendiendo el uso de las imgenes web (5.1.1.) Son archivos separados enlazados al cdigo HMTL; cada imagen esta en un archivo separado: -No olvidar publicar la imagen junto con el documento HTML (En es servidor web) -Optimizarlas para que tengan la mejor imagen al menor tamao. Pasos: a) seleccionar formato adecuado: TIPO D GIFT Graphic Interchange format DESCRIPCION 256 colores, grficos de reas colores limados, (logotipos e ilustraciones), soporta animacin mediante el intercambio de pginas. Se utilizan para mostrar banners. Tienen reas transparentes. Reducir tamao: = eliminar colores.
JPEG Joint Photographic Experts Group Se utilizan para fotografas, miles de colores, no pueden mostrar reas transparentes. Reducir tamao: = reducir calidad, se vuelve menos legible PNG Portable Network Graphics Ofrece amplio rango de colores; y ofrece traspareca superior al gift. Reducir tamao: = 8 bits, 16 bits, 24 bits
Mdulo 5: Leccin 1: insertando imgenes (5.1.2.) Son archivos separados enlazados al cdigo HMTL; cada imagen esta en un archivo separado: TAG:
img src
Tag simple o vaco (no se necesita otro tag para cerrar) TAG + atributo primario Img Atributo Descripcion secundario src alt Buscar imagen En caso de que la imagen no se muestre, aparece el escrito describiendo la imagen. Ancho alto Ejemplo
<img src="imagenes/luces_chameleden.gift"/> alt="Imagen chameledeon"/>
width height
width="50px" height="80px"
Mdulo 5: Leccin 1: utilizando enlaces con las imagenes (5.1.3) Similar a establecer enlaces con texto, la diferencia es que hay que clocar el tag imgenes para el enlace. Propiedad: ancore <a> </a> Nombre de enlace / imagen </a>
<a href =URL> Tipos de URL: URI: URL: TAG + atributo primario a
No especifica una seccin para llevar el enlace, sino la default. Enlace absoluto con especificacin. Ejemplo
Atributo Descripcion secundario
href
Enlazar imagen
<a href="http://www.guitargear.com.mx/"> <img src="imagenes/logo_gg.gif" alt="Logo de guitar gear"/> </a>
La imagen se rodea de un marco para el estado de la imagen (es posible que no nos agrade) se puede hacer una regla para eliminar o dar formato al borde:
a img { border:none; } Img { border-color:Green; border-style:outset; } (las que estn fuera del tag) coin margen (las que tienen vinculo o dentro del tag) sin margen
Mdulo 5: Leccin 1: alineando imgenes (5.1.4) Similar a establecer enlaces con texto, la diferencia es que hay que clocar el tag imgenes para el enlace Reglas para lneas de texto o prrafo. Sin embargo asi la considera parte del prrafo. Para hacer que la imagen aparezca pero con los prrafos al lado se usa float; se : (se podra usar el un tag de clasificacin ID para especificarlos. TAG + atributo primario img Atributo secundario Descripcion Ejemplo
float: center
centrar imagen
.imagenAlineada { float:right;
Padding Margen de la Right;left;top imagen contra letras
padding-bottom:10px; padding-right:10px; padding-left:10px; padding-top:10px; }
Mdulo 5: Leccin 1: agregando imgenes de fondo (5.1.5) TAG + Atributo atributo secundario primario background image Descripcion Ejemplo
Muestra imagen de fondo, en mosaico
{ background-image:url("imagenes/logo_gg.gif"); }
Por default lo muesytra en mosaico, mas se le puede asignar: TAG + Atributo atributo secundario primario background repeat Descoripcion Ejemplo
Como muestra la imagen
background-repeat:repeat-x; horizontal background-repeat:no-repeat; background-repeat:repeat-y; vertical
Cambiar la posicin de la imagen TAG + Atributo atributo secundario primario background position Descripcion Ejemplo
COORDENADAS Posicin de imagen
background-position:center center;
Que se desplaze con la ventana o que qude fija o se desplaze con la ventana TAG + Atributo atributo secundario primario background position Descripcion Ejemplo
Posicin de imagen fija
background-attachment:fixed;
Mdulo 5: Leccin 2: creando un mapa de imagen (image map) (5.2.1) Atributo: usemap
Es posible incorporara mltiples enlaces dentro de : Se necesita 3 piezas de cdigo: -1 tag de imagen que represente a la imagen misma -atributo Usemap -Tag Area
TAG + atributo primario Img src
Atributo secundario
Descripcion
Ejemplo
Usemap
Debe de iniciar con gato
<img src="imagenes/mapa-de-mexico-1_1.jpg" alt="mapa de mexico"usemap="#Mexico"/>
Y se utiliza junto a la 2da pieza de cdigo ( adicional para relacionarlo)
TAG + atributo primario map
Atributo secundario
Descripcion
Ejemplo
name
Debe de iniciar con gato
<map name="Mexico">
TAG + Atributo atributo secundario primario area shape
Descripcion
Ejemplo
Requerimiento cordenadas
ejemplo
coord
Especifica el tipo de figura que se utilizara para el enlace Especifica las coordenadas varia para cada shape:
<area shape="___";
CIRCULO
X: Y: Radio:
coords="349,193,15"
RECTANGULO
Esquina Superior izquierda X Y Esquina inferior derecha X Y
coords="180,57,267,156"
POLIGONO
XY de cada punto hasta hacer la forma requerida
coords="388,263,378,266, 409,341,476,369,421,311"
Title
En algunos exploradores al dejar el mouse aparece un titulo Nombre en casos que no aparezca el link o imagen Que se abra el enlace a otra ventana
title="Nuevo Leon"
Alt
alt="estado nuevo leon"
Target
target="_blank"
Mdulo 5: Leccin 3: separando secciones de las paginas (5.3.1) TAG: Hr
(elemento vacio) para dividir textos. (una lnea que se expande por todo lo ancho.
Mdulo 5: Leccin 3: Configurando el tamao y estilo de las reglas (5.3.2) Los atributos para el tag hr: Se realiza a travs de css TAG + atributo primario hr Atributo secundario Descripcion Ejemplo
widht
Ancho: se puede expresar en nmeros o % alto
Height
Margin
Margen a los laterales Color de lnea (no funciona con todos los Exploradores)
Margen Top 0
-Margen Derecha Margen izquierda- Margen abajo 0 0 auto
Color
Background
Color Repeat Imgenes
NOTA: Especificar la altura ya que nos pone el default
hr {
background: url("imagenes/tijeras.jpg"); height: 300px; background-repeat:no-repeat; width:300px; border:none; }
Mdulo 6: Leccin 1: trabajando con vietas (6.1.1) INTRODUCCION: Elementos de texto utilizadas parar resaltar elementos clave en las paginas.
Lista no ordenada (o con vietas)
TAG + atributo primario ul
Tag sec
Descripcion
Ejemplo
li
<ul> <li>algo 1</li> <li>algo2</li> <li>algo3</li> </ul>
Mdulo 6: Leccin 1: anidando listas no ordenadas (6.1.2) Se usan los mismos tags; pero se anidan: Ejemplo:
<ul> <li>algo 1</li> <li>algo2</li> <li>lacteos <ul> <li>leche <ul> <li>bronca</li> </ul> </li> </ul>
Mdulo 6: Leccin 1: modificando la apariencia de la lista (6.1.3) Se crean reglas para los tags: ul o li Se le pueden asignar a las listas principales reglas para: TAG + atributo primario ul Atributo secundario Descripcion Ejemplo Descripcion
list-styletype:
Circle square disc
list-style-type:circle; list-style-type:square; list-style-type:disc;
list-styleposition:__;
Outside
list-styleposition:outside;
La vieta se queda afuera del texto
list-styleposition:__;
inside
list-styleposition:inside;
list-styleimage
url
list-styleimage:url("imagenes/star. jpg");
La imagen tiene que ser de un tamao adecuado (24px x 24px) o menor. NO height NO wide
Se le pueden asignar a las listas principales reglas para las sublistas Se crea una regla para: Ul li ul
Ejemplo:
ul li ul { list-style-position:outside; list-style-image:url("imagenes/Stencil_Omen.png"); }
ul li ul li ul { list-style-position:outside; list-style-image:url("imagenes/logo_gg.gif"); }
Mdulo 6: Leccin 2: Creando listas enumeradas (6.2.1) Se crean reglas para los tags: ol o li Se le pueden asignar a las listas principales reglas para: TAG + atributo primario ol Atributo secundario Descripcion Ejemplo Descripcion
start
Inicio de numeracin Numeracion decendenten
<ol start="100">
Numeracion ascendente
reversed
<ol start="100" reversed="reversed">
Numeracion descendente NOTA: ningun browser al momento la soporta.
NOTA: se puede solo poner el inicion ol y los finales se pueden dejar ul esto no afecta la numeracion.
Mdulo 6: Leccin 2: Expandiendo un esquema (6.2.2) Se puede expandir el esquema aadiendo < ol > Cada nivel se puede personalizar con distintos formatos (dando estilos):
Se le pueden asignar a las listas principales reglas para las sublistas Se crea una regla para: TAG + atributo primario ol Atributo secundario Descripcion Ejemplo Descripcion
list-styletype
Tipo de numeracion
list-style-type:lowerlatin;
Ejemplo:
} ol { list-style-type:lower-latin; } ol ol { list-style-type:lower-roman; } ol ol ol { list-style-type:georgian; }
Mdulo 6: Leccin 2: combinacin listas ordenadas y no ordenadas (6.2.3) Solo hay que cambiar el tag ul por ol o viceversa. Seguir las reglas establecidas para este.
Mdulo 6: Leccin 3 Entendiendo las barras de navegacin en un sitio web (6.3.1) Muchos diseadores usan las listas no ordenadas para crear una barra de navegacin: y darles formatos a travs de css, la ventaja es que si el navegador no puede importar los estilos el usuario vera los nombres de enlaces. De ejemplo se le pone reglas a las listas y se logra encasillarlas.
ul li { widht: 120px; float: left; text-align:center; padding: 15px; margin: 5px; list-style-type: none; border-radius: 30px; border-bottom-style: outset; background-color: red; }
Mdulo 6: Leccin 3 Trabajando con listas de navegacion (6.3.2)

Se le pueden atribuir reglas por cada estilo: ul { list-style-type: none; } ul li { width: 120px; float: left; background-color:Blue; margin:2px; border-radius:15px; border-bottom-style:outset; } ul li a { font-family:sans-serif,Arial; color:White; text-decoration:none; font-size:22px; outline:none; } ul li:hover { background-color:Red; }
Mdulo 6: Leccin 3 Utilizando listas y definiciones de etiqueta (6.3.3) Html soporta otra tipo de lista para definicones estilo glosario o diccionarios la componen 3 tags: - dl -dt -dd
TAG + atributo primario dl
Tag secundario
tag
Ejemplo
Descripcion
Define la lista dt Dd Termino a definir Descripcion o datos
<dl> <dt> CSS </dt> <dd> Hojas de estilos en cascada </dd> <dt> HTML </dt> <dd> Hypertext Marjup Language </dd> <dt> W3C </dt> <dd> Consorcio Wordl Wide Web </dd> </dl>
Claro se les puede dar estilo con css:

dt { float:left; font-weight:bold; padding-right:5px; }
Tambien existe una variante de la lista de Definiciones y sirve para presentar dilogos: TAG + atributo primario Dialog Tag secundario tag Ejemplo Descripcion
Dt Dd
Pregunta Respuesta
Mdulo 7: Leccin 1
Entendiendo las tablas (7.1.1)
Se necesitan 3 diferentes tags: TAG + atributo primario table Tag secundario tag Ejemplo Descripcion
Contenedor principal tr ( Rengln) de la tabla. Se conoce como la celad de la tabla. Y Su contenido debe de ubicarse ah. Su nmero determina las columnas de la tabla. td (Columnas)Almacena los datos de la tabla (Celdas de encabezado ) para reslatar contenido (De encabezado tabla)
th
NOTAS: Cada rengln <tr> debe de tener el mismo numero de <td> para que sea consistente el estado de las con las dems: ejemplo:
<table> <tr> <td>ID</td> <td>Nombre</td> <td>Precio</td> <td>Existencia</td> <td>Total</td> <td>Imagen</td> </tr> <tr> <td>1</td> <td>Azucar</td> <td>15</td> <td>10</td> <td>150</td> <td> <img src="imagenes/star.jpg"> </td> </tr>
Mdulo 7: Leccin 1
Definiendo Encabezado, Cuerpo y pie de tabla (7.1.1)
Html tiene tags que nos permiten dividir la estructura de una tabla para definir: -Encabezado - Pie de tabla -Cuerpo Y tiene tags, su orden es importante, adems siempre van juntos: TAG + atributo primario thead tfoot Tag secundario tag Ejemplo Descripcion
Table head Pie de tabla, tambin debe de tener el mismo numero de td. Se puede usar tambin para totales de tabla. (El contenido de cuerpo
Tbody
<table> <thead> <tr> <th>ID</th> <th>Nombre</th> <th>Precio</th> <th>Existencia</th> <th>Total</th> <th>Imagen</th> </tr> </thead> <tfoot> <th></th> <th>Total:</th> <th></th> <th></th> <th>750</th> <th></th> </tfoot> <tbody> <tr> <td>1</td> <td>Azucar</td>
<td>15</td> <td>10</td> <td>150</td> <td> <img src="imagenes/star.jpg"> </td> </tr> <tr> <td>2</td> <td>Cafe</td> <td>30</td> <td>20</td> <td>600</td> <td><img src="imagenes/strato.ico"></td> </tr> </tbody> </table>
Mdulo 7: Leccin 1
Trabajando con renglones y columnas (7.1.3)
Existen 2 atributos importantes que pueden ser aplicados a las celdas th y td, permite especificar cuantos renglones y columnas abarcan:
TAG + atributo primario
Tag secundario Colspan
tag
Ejemplo
Descripcion
<th colspan="2"> Azure </th>
Abarcar dos columnas o mas, para dobles encabezados o funciones que ocupen extender estas.
rowspan
<th rowspan="2">HTML5</th>
Abarcar dos renglones o mas, para dobles encabezados o funciones que ocupen extender estas.
Mdulo 7: Leccin 2
Creando espacios en blanco en tablas (7.2.1)
Sin formato el contenido de una tabla puede ser poco legible, mas se les puede aplicar estilos: Para espacios se pueden aadir: -Reglas horizontales
Tag secundario
tag
Ejemplo
Descripcion
<hr>
<hr/>
Regla horizontal
margin Padding
margin-top:20px
Espacio alrededor
padding:10px;
Border-collapse
bordercollapse:collapse;
Los bordes se pueden compartir o no (separados, el predeterminado es separado) Espacio entre borde de tablas y bordes de celdas
**SOLO CUANDO Llos bordes estn separados OMITIR
border-spacing:10px 25px;
/* hasta */
Comentario que hace que eplorador omita o no lea lo que se encuentre entre ese espacio.
Se le asignan reglas a la tabla::

table { margin-top:20px; margin-bottom:50px; /* border-width:1px; border-color:Black; border-style:solid; */ border-collapse:separate; border-spacing:10px 25px; }
Se le asignan reglas a las celdas de la tabla:
th, td { padding:10px; border-width:1px; border-color:Black; border-style:solid; }
Mdulo 7: Leccin 2 Izquierda Centro Derecha
Alienando tablas (7.2.2)
Se puede utilizar la propiedad margin, al igual que se hace con el prrafo. Top dere abajo izq
margin: margin: margin:
0 0 0
0 auto auto
auto 0 0 auto 0
( Se alinea todo a la derecha) ( Se alinea centro) ( Se alinea izquierda default)
Mdulo 7: Leccin 2
Trabajando con bordes (7.2.3)
Queda en base a la imaginacin; efectos que se utilizan aplicando bordes:
-Borde en parte baja de celdas.

table { border-collapse:collapse; } th, td { border-bottom:1px solid black; } th { border-right:1px solid black; } .ConBordeDerecho { border-right:1px black; }
Mdulo 7: Leccin 2
Modificando colores de tabla (7.2.4)
Queda en base a la imaginacin; efectos que se utilizan aplicando backgrounds:
table { margin:0 0 0 auto; margin-top:20px; margin-bottom:50px; border-collapse:collapse; background-color:azure;
} th, td { padding:10px; border-width:1px; border-color:Black; border-style:solid; } th { background-color:Silver; color:White; } .RenglonPar { background-color:blue; color:white; }
Mdulo 7: Leccin 3
Insertando Ttulos (7.3.1)
HTML incluye tags adicionales para personalizar tablas y proporcionar mejor acceso a usuarios.,
Tag secundario
tag
Ejemplo
Descripcion
caption
<caption>Esta es una tabla de contenido de almacen</caption>
Proporciona info sobre contenido de tabla, tambin til para programas conocidos como Lectores de pantalla. Debe de ser colocado inmediatamente despus del tag table.; algo as como un titulo.
Mdulo 7: Leccin 3
Incorporando detalle y resumen (7.3.2)
Se puede agregar ms informacin: sumando los siguientes tags al de caption. TAG + atributo primario table Tag secundario 1 caption Details Summary Detalle Resumen Tag secundario 2 Ejemplo Descripcion
<table> <caption> <strong> Esta es una tabla de contenido de almacen</strong> <details> <p>Este es el detalle de l contenido de la tabla</p> <summary><p>Atencion</p></summary> Este es el catalogo de products para ejemplificar el tema de las tablas HTML </details> </caption>
NO APORTA Enfocado para los programas lectores de pantalla, ya que no paorta mayor contenido que detalles
Mediante una regla SCC; Se puede ocultar y dejar lo disponible para los lectores de pantalla.
summary { position:absolute; left:1000px; }
Se encontrara ah, mas no a la vista (muy alejado) solo un lector de pantalla lo puede ver ah.
Mdulo 8: Leccin 1
Entendiendo los formularios (8.1.1)
Se forma por 4 elementos -TAG form -CONTROL label -CONTROL input type name Etiqueta (puede contener al control)
- BOTON COMADOS (ENVIA LOS DATOS input type submit value enviar
TAG + atributo primario form
Controles
ID 1
ID 2
Tag sec
Descripcion
Formulario Action Elemento de accin (envi e valores) Una clase de servidor o pagina de proceso, que nos puede regresar una respuesta Determina como son transmitido los datos al destino: -GET los datos se pasan por URL (Se pueden ver en el URL.) -POST Type
name
Method
Label
Etiqueta para asociar, y puede contener al control (imput)

Maxlength
Input
Type
Name
Entrada de datos: Tipo: de entrada Nombre: que lo defina. TAG VACIO!! autocompleta Detalle Comentarios (casilla)
autocomplete
Details Textarea
Para generar solo 1 boton de formulario
<form action="procesa.aspx" method="get"> <label> Nombre: <input type="text" name="Nombre"/> </label> <label for="apellidos">Apellidos</label> <input type="text" name="apellidos" id="apellidos"/> <input type="submit" value="Enviar"/> </form>
EN CASO QUE TENGA GET el aspx, debe de estar asi (Ya que es un QueryString): <% Response.Write("hola "); Response.Write(Request.QueryString["Nombre"]); Response.Write(" "); Response.Write(Request.QueryString["apellidos"]); %>
Otra forma de vincular el label es:

<label for="apellidos">Apellidos</label> <input type="text" name"apellidos" id="apellidos"/>
Cuando trabajamos con formularios los elementos tienen que ser enviados a lugar, el elemento action nos ayuda a esto.
algn
Mdulo 8: Leccin 1
Utilizando los campos tex y textarea (8.1.2)
Para leer texto se puede usar el elemnto imput. Otro elemento son el name (Identifica grupos de elementos) el id: (Utilizado para asociarlo con el label o etiqueta) con fines de accesibilidad. Maxlength: utilizado para definir el amximo de caraceteres para esa entrada
Se les puede aplicar estilos:

Maxlength
Atributos que no aplican en todos los explorer: autocomplete
<body> <form action="procesa.aspx" method="post"> <label> Nombre: <input class="Nombre" type="text" name="Nombre" maxlength="15" autocomplete="on" /> </label> <label for="apellidos">Apellidos</label> <input class="Apellidos" type="text" name="apellidos" id="apellidos" autocomplete="off" /> <br/> <textarea name="comentarios" id="comentarios" cols="50" rows="5">?</textarea> <input type="submit" value="Enviar"/> </form> </body>
Mdulo 8: Leccin 1
trabajando con radio buttons (8.1.3)
Permiten al usuario seleccionar 1 de varias opciones; se deben de crear radio buttons de la siguiente forma. TAG + atributo primario Input type=radio Controles ID 1 ID 2 Tag sec Descripcion (Comando para radio buttons) Name Nombre que se le dar al tema (para que las diferentes opciones o botones trabajen en grupo.) Id
Valor checked="checked"
Posible opcin (1 de muchas) Resumido de opcin dada Se predetermina que cierta casilla este marcada.
Se les asocial el LABEL con for, asociando el id previamente definido. TAG + atributo primario label ID 1 ID 2 Tag sec etiqueta for
<label for="soltero">Soltero </label>
Descripcion
Nombre que se le dar al tema
<p>Estado civil</p> <input type="radio" name="estado civil" id="soltero" value="S"/> <label for="soltero">Soltero</label> <input type="radio" name="estado civil" id="casado" value="C"/> <label for="soltero">Casado</label> <input type="radio" name="estado civil" id="otro" value="O"/> <label for="otro">Otro</label>
Tambin es posible dejar una pre-seleccin realizada o predeterminada: Basta con poner :
checked="checked"
Mdulo 8: Leccin 1
trabajando con controles checkbox (8.1.4)
A diferencia de le radio buttons , estos nos dejan escoger mas de una opcin, aunque normalmente cada opcin se muestra junta, no se requiere compartir el mismo nombre del grupo. TAG + atributo primario Input type=checkbox Controles ID 1 ID 2 Tag sec Descripcion (Comando para radio buttons) Name Nombre que se le dar al tema (para que las diferentes opciones o botones trabajen en grupo.) Id
Valor checked="checked"
Posible opcin (1 de muchas) Resumido de opcin dada Se predetermina que cierta casilla este marcada.
<p>Pasatiempos favoritos</p> <input type="checkbox" name="lectura" id=" lectura" value="L"/> <label for=" lectura"> lectura </label> <input type="checkbox" name="natacion" id=" natacion" value="N" checked="checked"/> <label for=" natacion">Natacion </label>
TAG + atributo primario label
ID 1
ID 2
Tag sec etiqueta
Descripcion
for
<label for="soltero">Soltero </label>
Nombre que se le dar al tema
Mdulo 8: Leccin 1 Se necesitan 2 tags: -select -option
Implementeando listas de seleccin (dropdownlist) (8.1.5)
TAG + atributo primario select
Controles
ID 1
ID 2
Tag sec
Descripcion (Comando para radio buttons)
Name
Nombre que se le dar al tema (para que las diferentes opciones o botones trabajen en grupo.) Id
Multiple
Posible opcin (1 de muchas) Se seleccionan multiples elementos,(multiseleccion) Cantidad deElementos de la lista que se muestran. Opciones a escoger
Size
Option value
selected="selecte d"
Numero de opcin y descripcin de esta. Se predetermina que cierta casilla este marcada.
<p>Pais de origen</p> <select name="pais" id=" pais" multiple="multiple" size=" 5"> <option value="1" >Mexico</option> <option value="2" selected="selected">Colombia</option> <option value="3">Argentina</option> <option value="4">Peru</option> <option value="5">Chile</option> <option value="6">Ecuador</option> </select>
Mdulo 8: Leccin 1
Utilizando controles Hiden (8.1.6)
Permanecen ocultos para el usuario, sirven para almacenar valores que identifiquen cierta informacin y que el servidor pueda pueda obtener fcilmente; Ejemplo: Que tengamos una 2da pagina para obtener los resultados de los clientes con una presentacin distinta pero que nos devuelva los valores a la misma pagina.(la de procesamiento) NOTA: en esta caso se esta suponiendo que tenemos 2 paginas gemelas (1 para el cliente y otra general) NOTA: se puede poner en cualquier parte del formulario aunque la costumbre es que este al inicio. Dado que no se ven no neceitan de label o id TAG + atributo primario input Controles ID 1 ID 2 Tag sec Descripcion (Comando para radio buttons) type hidden
name value
tipo oculto Nombre definido El valor que muestra..
<input type="hidden" name="TipoDeUsuario" value="General"/> <input type="hidden" name="TipoDeUsuario" value="Cliente"/>
(pagina general) (pagina cliente)
Al mandar la informacin al servidor, se les especifica que nos muestre que valor (de que tipo estamos recibiendo)
Mdulo 8: Leccin 1
Insertando controles button (8.1.7)
Como se ha visto un elemento importante de los formularios es el botn de comandos, este control nos permite enviar la informacin hacia el destino especificado por el formulario, no es la nica manera de enviar los datos, ms si la ms utilizada.
2 formas de agregar botones al formulario: a) input -Input (especificando el tipo submit) enva los datos
<input type="submit" value="Enviar"/>
-Input (especificando el tipo reset) limpia los datos

<input type="reset" value="Limpiar"/>
-Input (especificando el tipo alerta) alarma de algo

<input type="button" value="Informacion" onclick="alert('Debes proporcionar la informacion solicitada')"/>
b) (tipo button) - <button type="submit">Enviar datos</button>
LA DIFERENCIA PRINCIPAL ES QUE CON EL TAG BUTTON SE PUEDE AGREGAR OTRAS COSAS COMO IMGENES.
Mdulo 8: Leccin 2
Aplicando etiquetas fieldset y legend (8.2.1)
TAGS tiles para agrupar los elementos del formulario son:
Fieldset:
Agrega un borde alrededor de los elementos contenidos.

<fieldset> </fieldset>
Legend:
(Va dentro de fieldset, agrega un titulo al grupo de controles.)
<fieldset> <legend>Estado civil</legend> <input type="radio" name="estado civil" id="soltero" value="S"/> <label for="soltero">Soltero</label> <input type="radio" name="estado civil" id="casado" value="C"/> <label for="soltero">Casado</label> <input type="radio" name="estado civil" id="otro" value="O"/> <label for="otro">Otro</label> <br/> </fieldset>
Se les da mas formato con las hojas de estilo.
Mdulo 8: Leccin 2
Utilizando tablas para estructurar un formulario (8.2.2)
Se ofrece la opcion de tablas para ordenar los botones de un formulario.
<body> <form action="procesa.aspx" method="post"> <input type="hidden" name="TipoDeUsuario" value="General"/> <fieldset> <table> <tr> <td class=" Etiquetas"> <label> Nombre:</label> </td> <td> <input class="Nombre" type="text" name="Nombre" maxlength="15" autocomplete="on" /> </td> </tr> <tr> <td class=" Etiquetas"> <label for="apellidos">Apellidos</label> </td> <td> <input class="Apellidos" type="text" name="apellidos" id="apellidos" autocomplete="off" /> </td> </tr> </table> </fieldset>
Mdulo 8: Leccin 2
Estilizando con formularios con CSS (8.2.3)
Aun existiendo el mtodo por tablas muchos prefieren usar el mtodo CSS Solo se asignan reglas y br para separa los datos.
label { width:100px; float:left; text-align:right; margin-right:10px; }
Mdulo 9: Leccin 1
Entendiendo JavaScript (9.1.1)
Es un lenguaje de programacin que es interpretado del lado del cliente (no es compilado) permite mejorar la interfaz de usuario. Se pueden detectar tipo de explorador web -Crear nuevas ventanas -redimensionar ventanas -cerrar ventanas Por ejemplo para redimensionar la pantalla se puede usar.
Document Objebt Model (DOM) Java: lo utiliza para localizar los distintos elementos de la pagina. Es una especie de mpa de pagina web, para localizar algo preciso, una vez que lo localiza puede: -Examinar -Modificar Para identificar un elemneto JavaScript se utiliza la notacin por puntos: ejemplo: CONTENIDO PAGINA WEB: PARA OBETNER LOS DATOS POR JAVA SCRIPT SE UTILIZA:
Distingue de maysculas y minsculas.
DOM se componer por:
Mdulo 9: Leccin 1
Integrando codigo JavaScript (9.1.2)
Se puede incorporar JavaScript en una pagina web de 4 maneras -Se activa mientras la pagina carga -Despus de cargar la pagina -Sobre demanda -Mediante un archivo externo O combinadas, aunque se recomienda por mtodo externo (CSS)
Mdulo 9: Leccin 1
Integrando cdigo JavaScript durante la carga de la pagina (9.1.3)
Para ejecutarlo mientras se carga, basta con ponerlo dentro del tag body: de la siguiente manera: TAG + atributo primario <script> Controles ID 1 ID 2 Tag sec Descripcion
Insercion de script type Especifica que lenguaje ser ejecutado. Text/javascript

 </script> </h1> </body> </html>
Mdulo 9: Leccin 1
Integrando cdigo JavaScript despus de cargar la pagina (9.1.4)
Para ejecutarlo despus de la carga, Basta con ponerlo dentro del tag head e invocarlo al cargar la pagina: de la siguiente manera: TAG + atributo primario <script> Controles ID 1 ID 2 Tag sec Descripcion
Insercion de script type Especifica que lenguaje ser ejecutado. Text/javascript

<!--->
Texto JavaScript Comentarios recomendados
Se escribe javascript
EJEMPLO: Fecha y hora de sistema.

<body onload="ObtenerFechaActual();"> <form name="Formulario"> <input type="text" name="txtFecha" value="texto"/> </form> </body>
Mdulo 9: Leccin 1
Integrando cdigo JavaScript sobre demanda (9.1.5)
Para ejecutarlo despus de la carga, Basta con ponerlo dentro del tag un formulario o similar y ejecutarlos al cargar la pagina: de la siguiente manera:
<body onload="ObtenerFechaActual();"> <form name="Formulario"> <input type="text" name="txtFecha" value="texto"/> <input type="button" name="btnEstablecerFecha" value="Establecer Fecha" onclick="ObtenerFechaActual();"/>
</form> </body>
Mdulo 9: Leccin 1
Detectando el soporte a JavaScript (9.1.6)
Es probable que algunos exploradores tengan deshabilitado el javascript, por lo cual nos corta la aplicacin, sin embargo se le puede notificar al usuario: de la siguiente manera:
TAG (Tpicamente incluido en el body) TAG + atributo primario <noscript> Controles ID 1 ID 2 Tag sec Descripcion
<p>
Comentario de que no esta incluida la funcionalidad Java Se le puede dar forma y personalidad la advertencia.
Mdulo 9: Leccin 1
Realizando pruebas del cdigo Javascript (9.1.7)
Una de las formas tradicionales para probar el cdigo es mendaite la funcin alert Ejemplo: si tenenos duda de un paso; se le poner despus de la funcin un alert. TAG + atributo primario <alert> Controles ID 1 ID 2 Tag sec alerta Se define la funcin Descripcion
(funcin que se defini) Ejemplo:
Tambin se puede activar el modo herramientas de desarrollo para depurar el cdigo (En el Internet Explorer): -F12 (herramientas de desarrollador) -Click en pestaa de script -Seleccionamos un breaking point y le damos depurar: paso a paso. PAGINA UTIL PARA JAVASCRIPT: http://msdn.microsoft.com/es-mx/library/gg699336(v=VS.85).aspx
Mdulo 9: Leccin 2
Estableciendo enlaces a archivos externos (9.2.1)
Colocar el cdigo en archivos externos: Simplemente tenemos que colocar el cdigo en archivos de texto plano y despus enlazarlo a la pagina, lo tradicional es crear una carpeta script para colocarlos ah.
<script type="text/javascript" src="scripts/funciones.js"> </script>
Mdulo 9: Leccin 2
Incorporando frameworks Javascript (9.2.2)
A travs del tiempo distintas comunidades de desarrolladores han creado cdigos propios; y ellos han creado frameworks (se recomienda adoptar 1 de ellos y una vez dominado estudiar la sintaxis.) para poder usarlo es necesario descargar la librera o bien el URL.
Ejemplo jquery.
Jquery.com
Tiene dos versiones: -Produccin: (Omite facilidad para visualizarlo, a fin de que sea mas compacto -Desarrollo: ms grande pero ms fcil de leer. Se puede relacionar de manera externa: As como utilizar sus funciones: NOTA: Para asegurarse de que el codgo se haya cargado correctamente antes de que cualquier cdigo sea invocado, se usa de una fnicon espcial.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <script type="text/javasccript" src=""scripts/jquery-1.7.1.js"> </script> <style type=" text/scc"> #imagen { display:none; }
</style> <script type=" text/javascript"> $(document).ready(function() { $("imagen").fadein(10000); }):
</script> </head> <body> <img id="imagen" src="imagenes/logo_gg.gift" alt="imagen de guitar gear mexico"/>
</body> </html>
Mdulo 10: Leccin 1 Entendiendo los plug-ins (10.1.1) se describe el concepto de Plug-In y la forma de incorporar contenido para Plug-Ins mediante los TAGs <Object> y <Embed> Proporcionan funcionalidad adicional . No se insertan en las paginas sino contenido o que las necesita para su funcionamiento. Se utilizan 2 posibles tags.
TAG + atributo primario <object>
Controles
ID 1
ID 2
Tag sec alerta
Descripcion
classid=
"05589FA1-C35611CE-BF0100AA0055595A" data="audio/___ type="audio/m p3" width="200" height="100"
Se define la funcin de plugin requerida???
NOTA: Se recomienda usar ambos pluggins para que se reprodusca en caso que no pueda uno.
Mdulo 10: Leccin 1 Insertando archivos SWE (10.1.2) Uno de los plugg ins mas utilizados es el Flash Player. Nos permite mostrar archivos swf. En la siguiente pgina nos ofrecen el cdigo para utilizarlo. http://kb2.adobe.com/cps/415/tn_4150.html
SOLO hay que cambiarle el nombre de los cdigos para
Mdulo 10: Leccin 1 Insertando objetos Silver Light (10.1.3) Se describe la forma de incorporar contenido de archivos XAP en una pgina Web para ser reproducidos por el Plug-In Silverlight. En la siguiente pgina nos ofrecen el cdigo para utilizarlo. http://msdn.microsoft.com/en-us/library/cc189089\(v=vs.95).aspx
Mdulo 10: Leccin 2 Utilizando audio compatible para la Web (10.2.1) Para reproducir un archivo de audio en la web el sonido debe ser grabado en un formato digital. Se usaban 2 formatos: Audio No Comprimido: -AIFF -WAV Formato comprimido: Mp3 Plug ins de audio: -Quicktimeplayer -realplayer -windows media player Streaming audio permite reproducir el audio mientras se va descargando : Real audio desarrollado por RealNetworks. Los archivos .ra o .ram requieren del plug-in realplayer disponible en : http://www.real.com
Ogg Vorbis desarrollado por Xipht.org Los archivos vorbis utilizar la extensin .ogg
Mdulo 10: Leccin 2 Enlaces a archivos MP3 (10.2.2) se describe una forma fcil de establecer enlaces a archivos MP3.
Mdulo 10: Leccin 2 Incrustando audio con Plug-Ins (10.2.3) Se describe la
Mdulo 10: Leccin 2 Incorporando Audio con HTML5 (10.2.4) se describe la forma de incorporar audio en pginas Web sin utilizar Plug-Ins
Mdulo 10: Leccin 3 Trabajando con tipos de video (10.3.1)
Mdulo 10: Leccin 3 Agregando un reproductor de video (10.3.2)
Mdulo 10: Leccin 3 Integrando video sin un Plug-In (10.3.3)

02 HTML501 - Resumen

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

02 HTML501 - Resumen

Enviado por

Direitos autorais:

Formatos disponíveis

CERTIFICACION HTML5

Mdulo 3: Leccin 1: Sintaxis bsica CSS (3.1.5)

Desventaja Se tiene que dejar el :

<link href="styles/estilos.css" type="text/css" rel="stylesheet"/)>

Especificidad Dos reglas con diferentes selectores afectan el mismo elemento

Se ponderan de la siguiente manera (de abajo hacia arriba)

SELECTORES: a)Tags b) Class c)ID d)In Line

Validador ms usado es el:

Pgina con ms informacin acerca de: http://www.w3.org/MarkUp/html3/latin1.html http://www.w3.org/TR/html4/SGML/entities.html

Pueden ser tipo: .eot .tff .otf

Explicaciones de familias de fuentes y letras http://sidar.org/recur/desdi/traduc/es/css/fonts.html

Pginas con fonts gratis http://www.fonts500.com/ http://www.1001freefonts.com/

Mdulo 4: Leccin 2: Estableciendo Tamao de texto (4.2.3) Propiedad: Font-size

Mdulo 4: Leccin 2: Seleccionando color de texto (4.2.4) Propiedad: color:

Propiedad: (2 tags) itlicas: negritas: Subrayar:

<em> </em> <strong> </strong> <_ style=text-decoration:underline>

(est dentro del mismo nivel)

(est dentro de una carpeta en el mismo nivel)

(est dentro de una carpeta en el nivel superior o raiz)

Mdulo 4: Leccin 3: rutas relativas a la raz (4.3.3)

Toma en cuenta la estructura del sitio y se denota por / Propiedad: /

<a href="/CarpetaNueva/3.1.10 Trabajando con selectores.html">

Mdulo 4: Leccin 3: especificando donde mostrar un enlace (4.3.4) Propiedades: target:_

Target Valor Ejemplo: Blank <a

Descripcion Nos abre el vnculo en nueva ventana

<a href="3.1.10 Trabajando con selectores.html"target="_self">Ir a la pagina de trabajando con selectores</a>

Se abre en la misma pagina.

Se requiere: a) Enlace b) destino

Mdulo 4: Leccin 3: trabajando con enlaces a documentos y correo electrnico (4.3.7)

Se escribe solo la ruta:

<a href="/downloads/010101A001.zip">Descarga de actividad 1 curso HTML501</a>

<img src="imagenes/luces_chameleden.gift"/> alt="Imagen chameledeon"/>

Atributo Descripcion secundario

<a href="http://www.guitargear.com.mx/"> <img src="imagenes/logo_gg.gif" alt="Logo de guitar gear"/> </a>

Padding Margen de la Right;left;top imagen contra letras

padding-bottom:10px; padding-right:10px; padding-left:10px; padding-top:10px; }

Muestra imagen de fondo, en mosaico

Como muestra la imagen

background-repeat:repeat-x; horizontal background-repeat:no-repeat; background-repeat:repeat-y; vertical

COORDENADAS Posicin de imagen

Posicin de imagen fija

TAG + atributo primario Img src

Debe de iniciar con gato

<img src="imagenes/mapa-de-mexico-1_1.jpg" alt="mapa de mexico"usemap="#Mexico"/>

Y se utiliza junto a la 2da pieza de cdigo ( adicional para relacionarlo)

TAG + atributo primario map

Debe de iniciar con gato

TAG + Atributo atributo secundario primario area shape

Esquina Superior izquierda X Y Esquina inferior derecha X Y

XY de cada punto hasta hacer la forma requerida

alt="estado nuevo leon"

Mdulo 5: Leccin 3: separando secciones de las paginas (5.3.1) TAG: Hr

Ancho: se puede expresar en nmeros o % alto

-Margen Derecha Margen izquierda- Margen abajo 0 0 auto

Color Repeat Imgenes

NOTA: Especificar la altura ya que nos pone el default

Lista no ordenada (o con vietas)

TAG + atributo primario ul

<ul> <li>algo 1</li> <li>algo2</li> <li>algo3</li> </ul>

Circle square disc

list-style-type:circle; list-style-type:square; list-style-type:disc;

La vieta se queda afuera del texto

Inicio de numeracin Numeracion decendenten