Diseoweb 100528092640 Phpapp02

Curso TIC
Diseo de Pginas Web: HTML
Autor: Javier V. Gallego
Curso TIC
Contenidos I:
Definicin de trminos. Sintaxis de etiquetas. Estructura bsica del documento. Formato de texto.
Curso TIC
Contenidos II:
Cuerpo del documento. Cabecera del documento. Listas de elementos. Imgenes. Hipertexto. Tablas. Hojas de estilo (CSS).
Curso TIC
Definicin de trminos:
1. Sistemas de codificacin:
1. Block de notas. 2. Editores de cdigo: Homesite, Hotdog,
etc. 3. Utilidades de conversin: WordXP. 4. Aplicaciones WYSIWYG: FrontPage, Dreamweaver.
Curso TIC
2. Recomendaciones:
1. Visualizar los documentos en distintos
navegadores y distintas resoluciones. 2. Aprender de las pginas Web visitadas visualizando el cdigo fuente.
Curso TIC
3. Qu es HTML?
HiperText Markud Language. Lenguaje para definir el formato de presentacin de un documento, compuesto por texto e imgenes, para ser visualizado con un navegador. Los formatos se definen mediante las etiquetas, tags o directivas.
ndice I
Curso TIC
Sintaxis de etiquetas:
Se pueden escribir en maysculas o minsculas. Entre los smbolos <>. Van por parejas: apertura y cierre. Ej:<html></html>.
Atributo Valor
Llevan atributos y valores segn el formato Etiqueta siguiente: <body bgcolor=#00CCFF></body>
Curso TIC
Estructura bsica del documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Documento
Cabecera
Todos los <html> documentos <head> <title>Untitled</title> HTML presenta esta estructura </head>
<body>
Cuerpo
</body> </html>
Curso TIC
Estructura bsica del documento:
Etiquetas comentario:  Espacios, tabulaciones y lneas: No

existen, son todo uno.
Simetra horizontal. Simetra vertical.
ndice I
Curso TIC
Formato de texto: elementos.

1. Cabeceras:
<h1></h1> <h6></h6>
2. Prrafo:
Se utilizan para los ttulos del documento
<p></p>
Se utilizan para el cuerpo del documento
Curso TIC
Formato de texto: elementos.

3. Romper lneas:
<br> (</br>) <nbr> (</nbr>)

4. Formato previo:
<pre></pre>
5. Etiqueta <div></div>.
Permite modificar varios prrafos a la vez.
Curso TIC
Formato de texto: estilo.

1. Negrita:
<b></b>
2. Cursiva:
o o
<strong></strong> <em></em>
<i></i>
3. Subrayado:
<u></u>
4. Tachado:
<strike></strike>
Curso TIC
Formato de texto: estilo.

5. Texto mas pequeo:
<small></small>
6. Texto mayor:
<big></big>
7. Superndice y subndice:
<sup></sup> <sub></sub>
Curso TIC
Formato de texto: alineacin.

Atributo align.
Se usa con etiquetas: <p>,<h> y <div>. Valores: left, right, center y justify.
Ejemplos: <p align=center></p> <h2 align=right>..</h2> <div align=justify>.</div>
Curso TIC
Formato de texto: mrgenes.

Mrgenes sencillos:
<blockquote></blockquote>
Permite mrgenes para toda la pgina.
Hojas de estilo.
Curso TIC
Formato de texto: fuente.

Etiqueta <font></font>
Atributos:
Tamao: size=1-7 Color: color=xxx Fuente: face=tipo de fuente
Apilar fuentes
Curso TIC
Formato: caracteres especiales.

Conjunto de caracteres utilizados por el HTML para representar elementos de ASCII. Ejemplos: &xxx;
á < > & © espacio en blanco. < Caracteres > especiales &
Curso TIC
Formato: barra horizontal.

Etiqueta <hr> (</hr>)
Crea una barra horizontal
Atributos:
align=left, right, center size=x pixeles width=xxx noshade -> no muestra sombra color=#xxxxxx
ndice I
Curso TIC
Cuerpo del documento: body.

1. Atributos de fondo:
1. Color de fondo: bgcolor=x 2. Grfico de fondo: background=url
Colores seguros (216): #RRGGBB

Ej: 000000; FFFFFF; 00FF00
Colores predefinidos: 136.
Curso TIC
Cuerpo del documento: body.

2. Atributos de texto:
1. Color de texto: text 2. Color de vnculo: link
3. Color de vnculo visitado: vlink

4. Color de vnculo activo: alink
Ejemplo: <body background=imagen/pato.jpg bgcolor=#00FFCC text=#006666 link=#9966CC vlink=#FF6633 alink=#66CC33>

ndice II
Curso TIC
Cabecera del documento: head.

Se utiliza para procesos mentales. Etiquetas que se incluyen: <meta> Indica al navegador palabras clave y el contenido de la pgina. Parmetros:
name, content, http-equiv.
<script> permite aadir javascript.
Curso TIC
Cabeza del documento: head.

Ejemplos: <meta name=Pgina de inicio content=Problemas de Qumica> Indica al navegador el nombre de la pgina y su contenido principal. <meta name=keywords content=redox, moleculas, estequiometra, cidos> Indica al navegador palabras clave para los buscadores de Internet.
Curso TIC
Cabeza del documento: head.

<meta http-equiv=refresh content=10 URL=http://www.alcala.es/inicio.html> Carga la pgina del servidor cada 10 s. <meta http-equiv= content=no-cache> Indica al navegador que no guarde la pgina en el cach.
ndice II
Curso TIC
Listas de elementos.
1. Listas no numeradas: (vietas)
<ul> <li>Texto <li>Texto </ul>

Atributo de <li> o <ul>: type=circle, square, disc
Curso TIC
Listas de elementos.
2. Listas numeradas:
<ol> <li>Texto. <li>Texto. </ol>

Atributos de <li> o <ol>:
type=A, a, i, I value=x permite retomar un valor numrico.
ndice II
Curso TIC
Imgenes
Etiqueta <img>
No tiene cierre. Atributo fuente: src=fichero_imagen
Es conveniente que la imagen est en la misma carpeta que la pgina o en un subdirectorio.
Texto alternativo: alt=texto alternativo

Comenta la imagen que debe aparecer para aquellos que no pueden cargarla.
Curso TIC
Imgenes: atributos.
Anchura y altura: width=x height=x x en pxeles. Borde: border=x x es un nmero; 0 para no crear borde.
Curso TIC
Imgenes: atributos.
Alineacin horizontal y vertical: align=xxx valores: left, right, top, middle, botom
Espacio alrededor de la imagen: hspace=x X en pxeles vspace=x
Imgenes flotantes.
ndice II
Curso TIC
Hipervnculos
Etiqueta Ancla: <a></a>
Atributos: href name Valor: url, mail,
Los hipervnculos pueden ser:

Absolutos. Relativos. Internos.
Curso TIC
Hipervnculos II: Tipos
Vnculo absoluto: Direccin a un servidor exterior.

Ejemplo: <a href=http://www.uah.es>Universidad de Alcal</a>
Curso TIC
Vnculo relativo: Vincula pginas dentro del mismo sitio web.

Ejemplo: <a href=index.html>ndice</a>
Vinculacin recproca.
Curso TIC
Vinculacin interna (marcador): en

pginas extensas se vincula una parte de la pgina con otra. Se requiere asignar un blanco dentro de la pgina.(lugar a donde va a ir el vnculo). Principio de la pgina: <a href=#nombre>Ejemplos</a>
Blanco asignado: <a name=nombre>Ejemplos</a>
Curso TIC
Vnculo de correo: mailto

Ejemplo: <a href=mailto:jgallego22@hotmail.com> mi direccin de correo</a>
Vincular imgenes: thumbnail Vincular archivos

ndice II
Curso TIC
Tablas
Etiqueta: <table></table>
Etiqueta de fila: <tr></tr> Etiqueta de celda (columna): <td></td>
Curso TIC
Tablas II
Atributos de la etiqueta table:
align=right, center, left

border=x width=x

x=0, 1, 2,
X = %: tablas dinmicas X = px: tablas fijas
cellspacing y cellspadding
Curso TIC
Tablas II
Atributos de celda: td.

Anchura de celda: width Alineacin horizontal: align=left, middle, right Alineacin vertical: valign=top, middle, bottom Color: bgcolor Imagen de fondo: background
Curso TIC
Tablas II
Expandir columnas y filas:
Expandir columnas: colspan=x x columnas que se expanden Expandir filas: rowspan=x x filas que se expanden
ndice II
Curso TIC
Hojas de Estilo (CSS)
Tipos de hojas de estilo:

Hojas vinculadas. Hojas empotradas. Estilo interno.
Curso TIC
Hojas de Estilo (CSS) II
Estilo vinculado.
Se crea una hoja de estilo y se guarda como doc.css Se aade a la cabecera del documento <head> como:
<link rel=stylesheet href=doc.css type=text/css>
Curso TIC
Estilo interno.
Se utiliza el atributo style sobre la etiqueta que se quiere modificar: h1, p, div, Este atributo utiliza diferentes propiedades: font, color, Ejemplo: <div style=font: 13pt verdana> <div style=font-size: 13; font-family: verdana; color: #00CCCC>
Curso TIC
Estilo empotrado.

Utiliza la etiqueta <style></style> Se inserta en <head> entre  Se compone de selectores (p, body, a, h1, b, div, ) a los que se aaden propiedades con sus valores entre llaves.
Ejemplo 1: p { font-family: arial; font-size: 13; }
Curso TIC

Ejemplo 2:
body { background-color: #00cccc; background-image: url(ac01.gif); margin: 50, 25, 25, 100; }
Curso TIC

Ejemplo 3: p { font-family: helvetica; font-size: 14; color: #0099cc; text-align: left; text-indent: 25; }
Curso TIC

Ejemplo 4: a:Visited { color: #00ccff;} a:Active { color: #33ccff;} a:Hover { color: #99ccff;}
Trabajo con clases: Ejemplo.
.text1 { font-family: sans-serif; font-size: 13 pt;} <p class=text1>
Agrupamiento.
Curso TIC
Colocacin con CSSP: Capas

Estilo interno o empotrado Propiedad position: [absolute, relative] top, left, width, height.
Ejemplo:
<div style=position: absolute; top: 100px; left: 50px; width: 200px; height: 300px;>
ndice II
Curso TIC
Fin

Diseoweb 100528092640 Phpapp02

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Diseoweb 100528092640 Phpapp02

Transféré par

Droits d'auteur :

Formats disponibles

Curso TIC

Diseo de Pginas Web: HTML

Autor: Javier V. Gallego

etc. 3. Utilidades de conversin: WordXP. 4. Aplicaciones WYSIWYG: FrontPage, Dreamweaver.

Llevan atributos y valores segn el formato Etiqueta siguiente: <body bgcolor=#00CCFF></body>

Estructura bsica del documento:

Estructura bsica del documento:

Etiquetas comentario:  Espacios, tabulaciones y lneas: No

Simetra horizontal. Simetra vertical.

Formato de texto: elementos.

Se utilizan para los ttulos del documento

Se utilizan para el cuerpo del documento

Formato de texto: elementos.

<br> (</br>) <nbr> (</nbr>)

Permite modificar varios prrafos a la vez.

Formato de texto: estilo.

Formato de texto: estilo.

Formato de texto: alineacin.

Formato de texto: mrgenes.

Formato de texto: fuente.

Formato: caracteres especiales.

Formato: barra horizontal.

Cuerpo del documento: body.

Colores seguros (216): #RRGGBB

Colores predefinidos: 136.

Cuerpo del documento: body.

3. Color de vnculo visitado: vlink

Ejemplo: <body background=imagen/pato.jpg bgcolor=#00FFCC text=#006666 link=#9966CC vlink=#FF6633 alink=#66CC33>

Cabecera del documento: head.

<script> permite aadir javascript.

Cabeza del documento: head.

Cabeza del documento: head.

<ul> <li>Texto <li>Texto </ul>

<ol> <li>Texto. <li>Texto. </ol>

Texto alternativo: alt=texto alternativo

Etiqueta Ancla: <a></a>

Atributos: href name Valor: url, mail,

Los hipervnculos pueden ser:

Absolutos. Relativos. Internos.

Hipervnculos II: Tipos

Vnculo absoluto: Direccin a un servidor exterior.

Hipervnculos II: Tipos

Vnculo relativo: Vincula pginas dentro del mismo sitio web.

Hipervnculos II: Tipos

Vinculacin interna (marcador): en

Blanco asignado: <a name=nombre>Ejemplos</a>

Hipervnculos II: Tipos

Vnculo de correo: mailto

Vincular imgenes: thumbnail Vincular archivos

Etiqueta de fila: <tr></tr> Etiqueta de celda (columna): <td></td>

Atributos de la etiqueta table:

align=right, center, left

X = %: tablas dinmicas X = px: tablas fijas

Atributos de celda: td.

Expandir columnas y filas:

Hojas de Estilo (CSS)

Tipos de hojas de estilo:

Hojas vinculadas. Hojas empotradas. Estilo interno.

Hojas de Estilo (CSS) II

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

Hojas de Estilo (CSS) II

Hojas de Estilo (CSS) II

Ejemplo 1: p { font-family: arial; font-size: 13; }