Diseño de pagina web HTML y Codigos de colores

Diseño de página Web HTML Elaborado por: Ing. Gabriel Hernández
1
Entre las etiquetas
<HTML> y</HTML>
está comprendido el resto
del código HTML de la
página
<HTML>
<HEAD>
<TITLE>
CURSODE 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, color o la imagen de fondo de
la página, etc.
<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" >
ETIQUETA BODY Y SUS
ATRIBUTOS
Nota:
1. bgcolor sirve para cambiar el color de fondo de la
página web. backcolor sirve para colocar una
imagen de fondo en la página web. Text sirve para
colocar color a todo el texto de la página.
leftmargin, topmargin, marginwidth,
marginheight para colocar márgenes a la página.
Las cabeceras o encabezados se utilizan para
resaltar los títulos de un párrafo y van desde H1
hasta H6. H1 es el texto más grande y H6 el texto
más pequeño
Listas Ordenadas
Son aquellas que ordenan la lista anteponiendo números, letras o
signos.
Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno
de los ítems de la misma, utilizamos la etiqueta <li>.
Ejemplo
Vamos a crear una lista ordenada
Estructura de una página Web
La cabecera de un documento HTML está delimitado por las etiquetas <HEAD> y </HEAD>, en
esta se incluirán las definiciones generales que afectarán a todo el documento. Todas sus etiquetas
son opcionales y se utilizarán solo en casos muy determinados, solo la etiqueta TITLE tiene un
uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos.
La etiqueta <TITLE>, debe ser usada dentro de las etiquetas que definen la cabecera de la
siguiente forma:
<HEAD>
<TITLE>Titulo del documento HTML</TITLE>
</HEAD>
ENCABEZADOS O CABECERAS
Nos definen el tamaño de un título o cabecera.
<H1> nos da el tipo de letra más grande.
<H6> nos da el tipo de letra más pequeño.
“LAS LISTAS”
Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. Tenemos
tres tipos de listas:
Ordenadas.
Desordenadas.
De definición.
Código
<ol>
<li>Naranjas</li>
<li>Manzanas</li>
<li>Bananas</li>
</ol>
Resultado
1. Naranjas
2. Manzanas
3. Bananas

2
Listas Desordenadas
Exponen la lista anteponiendo un punto, cuadrado
o triángulo negro.
Las listas desordenadas comienzan con la
etiqueta <ul> y para cada uno de los Items de la
misma utilizamos la etiqueta <li>.
Ejemplo
Dentro de cada Ítem se pueden agregar imágenes, párrafos, otras listas, etc.
Código
<ul>
<li>Tomates</li>
<li>Pepinos</li>
<li>Cebollas</li>
</ul>
Resultado
 Tomates
 Pepinos
 Cebollas
Listas de definición
Se utilizan para definir términos.
Las listas de definición se representan con la etiqueta <dl>.
Los términos de las mismas con <dt>.
La definición de esos términos comienza con <dd>.
Ejemplo
Código
<dl>
<dt>Chocolate</dt>
<dd>Elaborado a base de cacao</dd>
<dt>Caramelo</dt>
<dd>Elaborado a base de azúcar</dd>
</dl>
Resultado
Chocolate
Elaborado a base de cacao
Caramelo
Elaborado a base de azúcar
Dentro de las etiquetas <dd> se pueden agregar imágenes, párrafos, otras listas, etc.
LAS IMÁGENES
Para insertar imágenes en un sitio usaremos la etiqueta <img>.
Esta etiqueta debe ir acompañada del atributo src que es el que contiene el URL de la ubicación
del archivo de la imagen.
El atributo alt se utiliza para dar una breve descripción de la imagen, la cual podremos observar
en caso que el navegador del usuario, por alguna razón, no muestre la misma.
La etiqueta <img> no tiene cierre.
Sintaxis
<img src="/URL" alt="texto descriptivo">
Ejemplo
Código
<img src="/imagenes/foto1.jpg" alt="Dos niñas de la mano">
Resultado
Etiquetas y atributos de las imágenes
Etiquetas Atributos Valor Descripción
<IMG>
Alt (Requerido) text Breve descripción de la imagen.
Src (Requerido) URL Dirección URL de la imagen a mostrar.
align
top Alínea la imagen de acuerdo al texto
circundante.bottom

3
<IMG>
middle
left
right
border pixels
Define el borde alrededor de la imagen. Use las
propiedades de los bordes de CSS en su lugar.
height pixels
Define la altura de la imagen.
ETIQUETA FONT Y SUS ATRIBUTOS
Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello,
podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los
atributos de la etiqueta:
Atributo Significado Posibles valores
face fuente nombre de la fuente, o fuentes
color color del texto número hexadecimal o texto predefinido
size tamaño del texto
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor
Por ejemplo, para insertar el texto:
Bienvenidos a mi pagina web
Habría que escribir:
<FONT color="#993366" size="4" face="Arial black"> Bienvenidos a mi pagina
web</FONT>
LA ETIQUETA <P>, </P>
Aunque no la hemos definido formalmente, la etiqueta <p> la hemos usado desde nuestra
primera página web, esta etiqueta sirve para indicar el comienzo y fin de un párrafo,
generalmente se usa dentro de la etiqueta <body>
Atributos de la Etiqueta <p>
Atributo Función
align=
"alineación"
Señala la alineación del texto dentro de la página, esta puede
ser: LEFT (para izquierda), RIGHT (para derecha) y CENTER (para
centrarlo)

4
INSERTAR CARACTERES ESPECIALES
Si lo que queremos es insertar caracteres especiales tales como las tildes de las vocales debemos
seguir los siguientes pasos:
Carácter Representación
< <
> >
á á
Á Á
é é
É É
í í
Í Í
ó ó
Ó Ó
ú ú
Ú Ú
ñ ñ
Ñ Ñ
™ 

5
COLORES HEXADECIMALES

Diseño de pagina web HTML y Codigos de colores

Recomendados

Recomendados

Más contenido relacionado

Similar a Diseño de pagina web HTML y Codigos de colores

Similar a Diseño de pagina web HTML y Codigos de colores (20)

Último

Último (20)

Diseño de pagina web HTML y Codigos de colores