Unidad IV Taller2 PDF

Unidad 4:
Herramientas de
creacin de Pginas
Web
Taller de Computacin e
Internet
Macarena Ramrez S.
mramirez.docente@gmail.com
DEFINICION Y CABECERA
STANDAR (XHTML TRANSICIONAL)
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<title>Titulo del Sitio</title>
</head>
DEFINICION (XHTML ESTRICTO)
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
VERIFICACION DE ESTNDAR
XHTML
http://validator.w3.org/
Esta pgina sirve para verificar la correcta
estructuracin de todos los stndares de pgina web
vigentes.

http://jigsaw.w3.org/css-validator/
Esta pgina sirve para verificar la correcta
estructuracin de una hoja de estilos (CSS).

LISTAS
<ul> Lista no ordenada
Tipo de elemento Bloque

Descripcin
Se emplea para definir listas no
ordenadas
<ol> Lista ordenada

Descripcin
Se emplea para definir listas
ordenadas
<li> Elemento de una lista

Descripcin
Se emplea para definir los elementos
de las listas (ordenadas y no
ordenadas)
EJEMPLO DE LISTAS
<html>
<head> <title>Ejemplo de etiqueta UL</title> </head>
<body>
<h1>Men</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artculos</li>
<li>Contacto</li>
</ul>
</body>
</html>
EJERCICIOS DE LISTAS
Cree una lista ordenada de 5items, en la cual escribir
sus hobbies o intereses (siendo el ms importante
para usted el primero).
Cree otra lista ordenada con 5 items, en la cual
escribir las cosas que no le gustan o le desagradan
(siendo 1 lo que ms le desagrada)
Cree una lista no ordenada en la cual se contienen
ambas listas con su ttulo correspondiente (cada ttulo
y lista ordenada es un elemento de la lista
desordenada)

IMAGENES
<img> IMAGEN

Atributos
especficos

src = "url" - Indica la URL de la imagen que se
muestra
alt = "texto" - Descripcin corta de la imagen
longdesc = "url" - Indica una URL en la que puede
encontrarse una descripcin ms detallada de la
Imagen
name = "texto" - Nombre del elemento imagen
height = "unidad_de_medida" - Indica la altura con la
que se debe mostrar la imagen (no es obligatorio que
coincida con la altura original de la imagen)
width = "unidad_de_medida" - Indica la anchura con
la que se debe mostrar la imagen (no es obligatorio
que coincida con la anchura original de la imagen)
Descripcin Se emplea para incluir imgenes en los documentos
IMAGENES
<div>
<img src="/imagenes/foto1.jpg" alt="Fotografa de
un paisaje" longdesc="/portfolio/proyecto1.html"
width="30%" height="350" />
</div>
EJERCICIOS DE IMAGENES
Inserte la imagen gatos1.jpg gatos2.jpg
gatos3.jpg gatos4.jpg en una pgina html.
Modifique el tamao de las imgenes para que
ocupen un cuarto del ancho de la pantalla cada una.

Inserte las imgenes de nuevo y modifique su tamao
para que todas tengan sean de 100x100 pixeles.
Agregue una descripcin emergente a cada imagen.

TABLAS
TABLAS
Las tablas ms sencillas de HTML se definen con tres
etiquetas:<table>para crear la Tabla, <tr> para crear
cada fila y <td> para crear cada casilla.
De todos los atributos disponibles para las celdas, los
ms utilizados son rowspan y colspan, que se
emplean para construir tablas con celdas combinadas.
Entre los dems atributos, slo se utiliza de forma
habitual el atributo scope, sobre todo con las celdas
de cabecera que se vern a continuacin.

TABLAS
Normalmente, algunas de las celdas de la tabla se
utilizan como cabecera de las dems celdas de la fila
o de la columna. En este caso, HTML define la
etiqueta <th> (del ingls "table header cell") para
indicar que una celda es cabecera de otras celdas.
HTML define la etiqueta <caption> para establecer la
leyenda o ttulo de una tabla. La etiqueta debe
colocarse inmediatamente despus de la etiqueta
<table> y cada tabla slo puede incluir una etiqueta
<caption>.

Atributos Definicin
align Alinea horizontalmente la tabla con respecto a
su entorno.
background

Nos permite colocar un fondo para la tabla a partir
de un enlace a una imagen.
bgcolor
Da color de fondo a la tabla.
border Define el nmero de pixels del borde principal.
bordercolor Define el color del borde.
cellpadding Define, en pixels, el espacio entre los bordes de la
celda y el contenido de la misma.
cellspacing Define el espacio entre los bordes (en pixels).
height Define la altura de la tabla en pixels o porcentaje.
width Define la anchura de la tabla en pixels o porcentaje.
<table>
<td> y <th> Celda de tabla

Atributos
especficos
abbr = "texto" - Permite describir el contenido de
la celda (se emplea sobre todo con los
navegadores de voz utilizados por personas
discapacitadas)
headers = "lista_de_id" - Indica las celdas que
actan como cabeceras para esta celda (los ttulos
de las columnas y filas). Se indica como una lista
de valores del atributo "id" de celdas
scope = "col, row, colgroup, rowgroup" - Indica las
celdas para las que esta celda ser su cabecera. Ej:
scope="col" indica que esta celda es la cabecera de
todas las dems celdas que estn en la misma
columna
colspan = "numero" - Nmero de columnas que
ocupa esta celda
rowspan = "numero" - Nmero de filas que ocupa
esta celda

Descripcin
Se emplea para definir cada una de las celdas que
forman las filas de una tabla, es decir, las columnas de
la tabla
EJEMPLO DE TABLA
<tableborder="1">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Celda1 Celda2 Celda3
Celda 4 Celda5 Celda6
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>

<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
EJERCICIO DE TABLAS

AGRUPACION DE CELDAS
<thead>
Agrupa las celdas que se dejarn
como encabezado (celdas de ttulo)
<tbody>
como cuerpo (celdas de datos)
<tfoot>
como pie (totales, resultados, etc)

Unidad IV Taller2 PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Unidad IV Taller2 PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Unidad 4:

Das könnte Ihnen auch gefallen