Está en la página 1de 46

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

Definicin de trminos:
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

Definicin de trminos:
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: <!-- Esto es un 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;
&nbsp; &aacute; &lt; &gt; &amp; &copy; 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

Hipervnculos II: Tipos

Vnculo relativo: Vincula pginas dentro del mismo sitio web.


Ejemplo: <a href=index.html>ndice</a>

Vinculacin recproca.

Curso TIC

Hipervnculos II: Tipos

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

Hipervnculos II: Tipos

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

Hojas de Estilo (CSS) II

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

Hojas de Estilo (CSS) II

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

Hojas de Estilo (CSS) II


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

Curso TIC

Hojas de Estilo (CSS) II


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

Curso TIC

Hojas de Estilo (CSS) II


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

Hojas de Estilo (CSS) II

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