DISEÑO DE PAGINAS CON
HTML
CONCEPTOS
• HTML (Hyper Text Markup Language)
– Lenguaje con el que se escriben paginas
web.
– Es un lenguaje de hipertexto.
– Permite escribir texto de forma estructurada.
– Compuesto por etiquetas (marcan el inicio y
fin de cada elemento del documento)
– Documento hipertexto contiene texto,
imágenes sonido y video (documento
multimedia).
NAVEGADORES
• Interpreta el código HTML de la página.
• Internet Explorer y Netscape Navigator
EDITORES
• Programa que permite redactar documentos.
Editores visuales. Evitan la escritura de código
código HTML.
HTML (la pagina se construye).
Editores de texto. La pagina se crea a través del
• Editores Visuales: (generan basura)
– Macromedia Dreamweaver, Microsoft Frontpage,
Adobe Pagemill, NetObjects Fusion, CutePage,
HotDog Proffesional, Netscape Composer y
Arachnophilia, MsWord otros.
• Editores de texto.(solo lo necesario)
– Wordpad
– Block de notas
– Notepad++
– Otros…
Estructura de una página
• <html>
<head>
...
<title>
Curso de HTML
</title>
</head>
<body>
...
</body>
</html>
El cuerpo del documento contiene la
información propia del documento (el texto
de la página, las imágenes, los formularios,
etc.
•color o la imagen de fondo de la
página .
Entre las etiquetas <html> y </html> esta
comprendido el resto del código HTML de la
página
<head> y </head>. Cabecera de la pagina
puede contener
<link>, <style>, <script> <meta>
<title>
Algunos atributos de “body”
<body bgcolor="#0000FF">
<body bgcolor="blue">
<body background="fondo.gif">
<body background="imagenes/fondo.gif">
<body text="#FF0000">
<body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
Colores en hexadecimal
Color
Hexadecimal
Nombre
#FFFFFF
#000000
#000080
#0000FF
#008000
#008080
#00FF00
#00FFFF
#800000
#800080
#808000
#808080
#C0C0C0
#FF0000
#FF00FF
#FFFF00
white
black
navy
blue
green
teal
lime
aqua
maroon
purple
olive
gray
silver
red
fuchsia
yellow
Creación de la primera pagina
• Crear un directorio de trabajo para la pagina.(ejm. mipagina) en “mis
documentos”
• Con el bloc de notas escribir el siguiente codigo:
<html>
<head>
<title>pagina de inicio</title>
</head>
<body bgcolor="99CC99" >
</body>
</html>
• Guardar el archivo “guardar como” con el nombre inicio.html en la carpeta
“mipagina”
La pagina resultante es como sigue:
TEXTO
• Se requiere dar formato al texto
•
< y >
indican inicio y fin de etiqueta
Carácter
Representación
Algunos caracteres
especiales
Se puede escribir directamente
sin la representación en HTML
  espacio en blanco
<
>
á
Á
é
É
í
Í
ó
Ó
ú
Ú
ñ
Ñ
™
<
>
á
Á
é
É
í
Í
ó
Ó
ú
Ú
ñ
Ñ
™
<!-- y //-->.
comentarios
<br>
Saltos de línea,no requiere fin de etiqueta
<pre> y </pre>
texto preformateado. Aparece tal como se
lo escribe, no requiere saltos de linea ni
espacios en blanco en HTML
No permite incluir en el texto etiquetas:
<img> (para incluir imágenes), <object>
(para incluir objetos como animaciones),
<big>, <small>, <sub> ni <sup>
<hr>
Regla horizontal
separar secciones dentro de una misma
página.
no precisa ninguna etiqueta de cierre
algunos atributos de la regla horizontal:
Atributo
Significado
align
alineación de la
regla dentro de la
página
Posibles valores
left (izquierda)
right (derecha)
center (centro)
width
ancho de la regla
un número, acompañado de % cuando se desee
que sea en porcentaje
size
alto de la regla
un número
noshade
sombreado de la
eliminar el
regla
no puede tomar valores
Inicio<hr align="left" width=“50%" size=“10" noshade>Bienvenidos a mi página.
Una ilustración simple
<html>
<head>
<title>pagina de inicio</title>
</head>
<body bgcolor="99CC99" background="imagenes/fondopatas.gif"
leftmargin="40" topmargin="40" marginwidth="40" marginheight="40">
hola mundo este es un texto común
como están, canciónó<br>
cuando se esta pensando
<pre>Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado</pre>
Inicio de un separador horizontal<hr align="left" width="50%" size="10"
noshade>Bienvenidos a mi página.
</body>
</html>
<font> y </font>
propiedades del texto
Atributo
Significado
face
color
fuente
color del texto
size
tamaño del texto
Posibles valores
nombre de la fuente, o fuentes
número hexadecimal o texto predefinido
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor
<font color="#993366" size="4" face="Arial">
Bienvenidos a mi página, texto con propiedades
</font>
fuente para todo el documento
<body>
<basefont color="#006699" size="4" face="Arial">
etiquetas asociadas al tipo de letra:
Etiqueta
Significado
Ejemplo
<b>
<i>
<u>
<s>
<tt>
<big>
<small>
negrita
cursiva
subrayado
tachado
teletipo (máquina
de escribir)
aumenta el tamaño
de la fuente
disminuye el
tamaño de la
fuente
curso HTML aulaclic
curso HTML aulaclic
curso HTML aulaclic
curso HTML aulaclic
curso HTML aulaclic
curso HTML aulaclic
curso HTML aulaclic
<p> y </p>
Parráfos
atributo align: cuyos valores pueden ser left
(izquierda), right (derecha), center (centrado) o
justify (justificado).
<p align="center">este es un parrafo
muy simple (centrado)</p>
<p>Aquí encontra otro párrafo (la
separacion es amplia).</p>
<div> y </div>
agrupar bloques de texto, pero con la
diferencia de que la separación entre
ellos es menor. Tiene los mismos
atributos de alineación.
<div align="center">otro parrafo con
agrupacion de bloques </div>
<div>note que el espacio es menor</div>
<center> y </center>
Texto centrado
<center>texto centrado</center>
Encabezados - Títulos
Etiqueta
Ejemplo
<H1> Título 1: HTML
<H2>
<H3>
<H4>
<H5>
<H6>
Título 2: HTML
Título 3: HTML
Título 4: HTML
Título 5: HTML
Título 6: HTML
<H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>
Marquesinas
<marquee> y </marquee>.
<marquee bgcolor="#006699" behavior="alternate" direction="right">
<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>
behavior
alternate scroll slide
direction
down up
left
right
Listas
•Perro
•Gato
•Periquito
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
<ul> y </ul>.
Lista desordenada
<ul type="circle">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>
<ol> y </ol>.
viñeta
circle (círculo), disc (disco) o square (cuadrado).
Lista ordenada
type
1 (números), a (letras minúsculas), A (letras
mayúsculas), i (numeros romanos en minúsculas)
o I (números romanos en mayúsculas).
Listas anidadas: combinación de las anteriores.
Taller Uno
1. Crear una pagina de inicio en blanco
2. Colocar un titulo centrado y subrayado (mi pagina personal)
3. Insertar una marquesina (con fondo rojo, tamaño de letra 5, y
4. Insertar un párrafo de texto con sangría a la izquierda y
comportamiento continuo.
alineación a la izquierda.
5. Crear una división horizontal .
6. Escribir un texto ( párrafo) centrado que indica una frase
arbitraria.
7. Insertar una división horizontal.
8. Insertar un texto preformateado que introduce a nuestras
ocupaciones principales (centrado).
9. Crear una lista que muestra las áreas de interés de
información.
10.Insertar listas anidadas a cada item.
ENLACES
hiperenlace, hipervínculo, o vínculo
<a> y </a>.
href
especifica la página a la que está asociado el enlace
Referencia absoluta: Conduce a una ubicación externa al sitio
<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>
Referencia relativa al sitio: Conduce a un documento situado
dentro del mismo sitio
<a href="inicio1.html">cambiar a otro documento "ref. relativa"</a>
<a href="../mipagina/imagenes/inicio1.html">otra carpeta </a>
<a href="//D:/diplomado/tutoriales/html/index.htm">navegar por el tutorial</a>
Destino del enlace
determina en qué ventana va a ser abierta la página vinculada
atributo target
_blank Abre el documento vinculado en una
ventana nueva del navegador.
_self
mismo marco o ventana que el vínculo
Abre el documento vinculado en el
<a href="inicio1.html" target="_blank">
cambiar a otro documento "ref. relativa"</a> <br>
Anclas o puntos de fijación
permite ir directamente al apartado deseado en un documento extenso
<a name="miancla"></a>Texto con ancla
<a href="#miancla">Enlace al ancla</a>
define el ancla
lleva al ancla
Correo electrónico:
<a href="mailto:
[email protected]">mi e-mail </a>
<a href="mailto:
[email protected]?subject=el asunto del mensaje">
mi e-mail </a>
Vínculo a ficheros para descarga:
<a href="sib1.doc" target=_blank >
haz clic aquí para descargar el archivo
</a>
IMAGENES
<img>
src : especifica el nombre de la imagen
Las imágenes pueden ser de formatos diferentes: bmp, gif, jpg, etc
<img src="imagenes/gatito.gif" alt="imagen ejemplo">
<img src="imagenes/foto.gif" alt="mi fiesta">
El atributo border puede tomar valores numéricos
<img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4">
imagen con borde y con un enlace:
<a href="inicio1.html" target="_blank" >
<img src="imagenes/gatito.gif" border="4" >
</a>
tamaño de la imagen
width (anchura) y height (altura)
<img src="imagenes/foto.gif" alt="mi fiesta" width="500" height="400">
Alineacion de la imagen
align
Este atributo indica la alineación de las imágenes con
respecto a la línea de texto en la que se encuentran.
Los valores del atributo align pueden ser los siguientes:
bottom
inferior
left
izquierda
middle
medio
right
texttop
top
derecha
texto
superior
superior
Este
<img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4" align="middle">
es un grafico
TABLAS
<table> y </table>
INICO Y FIN DE TABLA
<tr> y </tr>
<td> y </td>
Inicio y fin de fila
columna o celda
<td>…</td>
<td>…</td>
Crear cuenta
Comentarios de: DISEÑO DE PAGINAS CON HTML (0)
No hay comentarios