Diseñoweb

Cuadernillo de Pginas Web
Ing. Jos de Jess Ramrez Rubio

Preparatoria y Secundaria Cedip
Jose_dj_tampico@hotmail.com

Objetivos
Desarrollo de una pgina personal
Participacin 10%
Tarea 20%
Practicas 20%
Conducta 10%
Asistencia 10%
Examen 30%

Temario:

Introduccin a las pginas web
Estructura bsica de HTML
Ttulo de Pagina
Colores de Fondo
Colores de Texto
Tabla de Colores
Imgenes de Fondo
Imgenes de Fondo Estticas
Encabezados
Prrafos
Alineacin de Prrafo
Lneas entre prrafos
Formato de Prrafo
Movimiento con Div
Insertar Imagen
Marquesina
Listas
Tablas
Hipervnculos
Insertar YouTube
Msica de la pagina

ESTRUCTURA BASICA DE HTML

Para el desarrollo de las paginas es necesario tener el material como lo es un editor de texto
bsico, el contenido de lo que se va a presentar en la pgina como lo es la informacin, las
imgenes, las fuentes originales, la unidad de respaldo y sobre todo bien acomodada para
su modificacin.

La estructura bsica es el elemento principal ya que nos ayuda a definir donde irn los
elementos de la pgina los elementos son los siguientes:

<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>

Para almacenar el cdigo fuente debemos de seleccionar la opcin Archivo Guardar como
y escribimos el nombre de la pgina, si ya le dimos un nombre cada vez que modifiquemos
el cdigo hacemos la misma operacin para que siempre almacenes los cambios,
reemplazando la misma pgina.

Para que tu cdigo fuente se pueda abrir con algn explorador de internet, hacemos la
misma operacin de guardar como pero al nombre le a agregamos las siglas (.HTML).

HTML.- Sirve para indicarle al Explorador de internet que es cdigo HTML el que viene
descrito a continuacin, se limita todo el cdigo por estos dos parmetros. Dentro de ellos se
escribe el cdigo de la pgina.

HEAD.- La cabecera (tambin llamada HEAD) contiene todo el cdigo entre las
etiquetas <HEAD> y </HEAD>, solo el ttulo es visibl e el resto de cdigo est
oculto al usuario.

BODY.- Define el contenido principal o cuerpo del documento. Esta es la parte del
documento HTML que se muestra en el navegador; dentro de esta etiqueta pueden definirse
propiedades comunes a toda la pgina, como color de fondo y mrgenes.

TITULO DE PAGINA

<TITLE> </TITLE>

Entre estos dos comandos va escrito el ttulo de la pgina, este va en la parte superior de la
ventana que despliega el Explorador de Internet.

COLORES DE FONDO
Bgcolor=#
Es el color de fondo de la pgina, se debe de escribir dentro del Body.
Ejemplo:
<BODY bgcolor=#0000FF>

COLORES DE TEXTO
text=#
Es el color del texto de la pgina, se debe de escribir dentro del Body.
Ejemplo:
<BODY text=#0000FF>

TABLA DE COLORES

TABLA DE COLORES

TABLA DE COLORES

IMAGEN DE FONDO

background=" "
Es la imagen de fondo de la pgina, se debe de escribir dentro del Body.
Ejemplo:
<BODY background="nombre.extension">

IMAGEN DE FONDO ESTATICA

bgproperties=" fixed"
Hace que la imagen de fondo de la pgina se quede esttica y solo se mueva el texto al
mover el scroll, se debe de escribir dentro del Body.
Ejemplo:
<BODY background="nombre.extension" bgproperties=fixed>

ENCABEZADOS

Sirve para utilizar diferentes tipos de ttulos en el cual varia su tamao, no se debe de
confundir con el ttulo de cabecera.

Ejemplo:

<h1>Encabezado con h1</h1>

PARRAFOS

Se utilizan para redactar bloques de texto, en el cual el navegador hace lo posible por
adaptar el texto en la ventana. Dentro de un prrafo todos los espacios, tabuladores y saltos
de lnea cuentan como un espacio simple

Ejemplo:

<P>TEXTO DEL PARRAFO</P>
<BR> BRINCO DE LINEAS

ALINEACION DE PARRAFOS

Permite establecer un alineamiento del prrafo de izquierda, derecha, centrado y justificado.

<P align=center>TEXTO DEL PARRAFO CENTRADO</P>
<P align=left>TEXTO DEL PARRAFO A LA INZQUIERDA</P>
<P align=right>TEXTO DEL PARRAFO A LA DERECHA</P>
<P align=justify>TEXTO DEL PARRAFO JUSTIFICADO</P>

LINEA DE PARRAFOS

Permite crear lneas entre prrafos de cualquier color y ancho de pantalla.

<hr color= width=>

Colores disponibles: red, orange, blue, Green, yellow, black, purple.
Width.- es el ancho de lnea que puede ser de 1 a 1024.

FORMATO DE TEXTO

Permite establecer los valores de texto como negrita, cursiva, subrayado, tipo y tamao de
fuente. Se puede iniciar el comando en cualquier parte del prrafo ya sea desde el inicio a
fin de prrafo, o palabra o grupo de palabras.

Tipo de fuente <Font Face=Arial>Estilo diferente de fuente</Font Face=Arial>

Tamao de fuente <Font Size=2.5>Fuente ms grande</Font Size=2.5>
Color de Fuente <Font Color=color>Color de Texto</Font Color=color>
Negrita <b>texto en negrita</b>
Cursiva <i>texto en cursiva</i>
Subrayado <u>texto subrayado</u>

Colores: Teal, White, Yellow, Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy,
Olivee, Purple, Red, Orange, Sylver, Gold.

MOVIMIENTOS CON DIV

Permite mover y alinear los objetos ya sea texto, imgenes, vnculos, flash, tablas, etc. Los
elementos principales son la alineacin, el ancho del objeto, el margen de altura y el margen
izquierdo para lograr buenos resultados.

Alineacion con div
<div align=center>
(cdigos html)
</div>

Movimiento con Div
<div style="position:absolute; left: ___px; top: ___px; width: ___px; height: ___px ">
(cdigos html)
</div>

INSERTAR IMAGENES

Permite insertar imgenes de cualquier formato ya sea jpg, gif, bmp, png, etc. Manipulando
los puntos ancho y alto, la imagen debe de estar dentro de la misma carpeta en el cdigo
html o en una carpeta dentro de la carpeta de cdigo.

<img border=0 scr=carpeta/imagen.jpg alt=descripcin de imagen width=__px height=__ >
imagen.jpg

MARQUESINAS

Permite mover bloques de texto, palabras, objetos e imgenes en una direccin. Las
direcciones a mover pueden ser hacia la izquierda, la derecha, de lado a lado, de arriba
abajo y viceversa; el comando es Marquee y puede varia dependiendo la direccion.

<Marquee> </Marquee>

WIDTH

Anchura de la marquesina. Si no marcamos altura, se colocar en la siguiente lnea, como
en un prrafo distinto. Si marcamos una anchura, la marquesina intentar mostrarse en la
misma lnea donde la hayamos colocado. Si no hay espacio para ella se realizar el
consiguiente salto de lnea para mostrarla un poco ms abajo.

<Marquee width=50%> hola </Marquee>

DIRECTION

Hacia donde queremos que se displace el contenido del marquee. Los posibles valores son
"LEFT" y "RIGHT".

<Marquee direction=right> hola </Marquee> ejemplo left up down

BEHAVIOR

Es el comportamiento de la marquesina, de entre los posibles: SCROLL (el comportamiento
por defecto) indica que tiene que hacer el desplazamiento siempre en una misma direccin y
ALTERNATE, que indica que el desplazamiento se hace a un lado y al otro de manera
alternada.

<Marquee BEHAVIOR=alternate> hola </Marquee>

SCROLLDELAY

Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la posicin de lo
que hay desplazndose. Es decir, cuanto mayor sea el valor, ms milisegundos tardar la
marquesina en moverse. El valor por defecto es 85, pero si por ejemplo ponemos un valor
500 la marquesina cambiar de estado (desplazar el contenido) cada medio segundo.

<Marquee SCROLLDELAY=300> hola </Marquee>

SCROLLAMOUNT

Es la cantidad de pixel que tiene que desplazarse el contenido de la marquesina cada vez
que se mueve. A mayor scrollamount, ms se desplazar la marquesina en cada
movimiento y por tanto la animacin ser ms rpida. El valor por defecto es 6. Podemos
probar a colocar un valor mayor y veremos que el movimiento ser ms "a golpes".

<Marquee SCROLLAMOUNT=1> hola </Marquee>

BGCOLOR

El color de fondo de la marquesina. Acepta el nombre de un color HTML o bien un valor
RGB de dicho color.

<Marquee SCROLLAMOUNT=1 bgcolor=#ffff00> hola </Marquee>

HSPACE y VSPACE

Estos dos atributos sirven para definir el nmero de pxel que debe aparecer entre la
marquesina y otros contenidos de la pgina, en horizontal y vertical.

<Marquee HSPACE=500 > hola </Marquee>

MARQUESINA DE IMGENES

Consiste en crear una lnea de imgenes en movimiento, indicando un cambio de velocidad
al momento de poner el mouse dentro o fuera de la marquesina.

onMouseOver.- permite indicar si el mouse est dentro del elemento.

onMouseOut.- Permite indicar si el mouse est fuera del elemento
Ejemplo:

<marquee behavior=alternate onMouseOver="this.scrollAmount=1" onMouseOut="this.scrollAmount=4" scrollamount=4>
<img src="imglinea/1.jpg" width="260" height="174">
</marquee>

LISTAS

Se utilizan para representar una serie de conceptos o ideas, las listas pueden ser
numricas o vietas.

Vieta.- smbolo o dibujo que sirve para destacar una lista, los cuales pueden ser circle,
square y diisc.

Lista Numerada:

<ol> </ol>.- Inicio y fin de una lista numerada

<li> </li>.- elemento de una lista

Ejemplo de estructura:

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
Podemos iniciar una lista numerada desde cualquier numero solo indicamos el valor con el
comando value al primer elemento de la lista.

Ejemplo:

<ol>
<li value="20">Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>

Lista de Vietas:

<ul> </ul>.- Inicio y fin de una lista de vietas

<li> </li>.- elemento de una lista

Ejemplo de estructura:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

Podemos cambiar el smbolo de la vieta indicando el tipo de vieta a cada uno de los
elementos.

Ejemplo:

<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>

Listas de Definiciones

<dl>
<dt>Elemento 1</dt>
<dd>Definicin elemento 1</dd>
<dt>Elemento 2</dt>
<dt>Elemento 3</dt>
</dl>

TABLAS:

Una tabla puede ser considerada como un grupo de filas y columnas en donde cada una de
ellas contiene un grupo de celdas. Se pueden utilizar para resaltar elementos y hasta
encapsular toda una pgina web.

La encapsulacin de la pgina por medio de tablas permite que se pueda usar el los
diferentes tipos de pantallas en el mercado actual, ya que hoy en da las resoluciones de
pantalla van cambiando constantemente.

Hipervinculos

Un hipervnculo es un enlace, normalmente entre dos pginas web de un mismo sitio, pero un enlace tambin
puede llevar a una pgina de otro sitio web, a un archivo o una imagen. Para navegar al destino del enlace,
debemos dar hacer clic sobre l. Tambin se conocen como hiperenlaces, enlaces o links.

Dependiendo de cual sea el destino , hacer clic en un hipervnculo puede hacer que ocurran
varias cosas. Si el destino es otra pgina web, el navegador la cargar y la mostrar, pero si el
destino es un documento de Word, el navegador nos dar la posibilidad de abrir una sesin de
Word para visualizarlo o de guardar el archivo.
Por lo tanto, podemos usar los hipervnculos para conducir a los visitantes de nuestro sitio
web por donde queramos. Adems, si queremos que se pongan en contacto con nosotros, nada
mejor que ofrecerles un hipervnculo a nuestro correo electrnico.

Comando para pagina externa

<a href="http://www.comocreartuweb.com">Link das click </a>

Comando para pagina interna

<a href="pagina.html">Contacto</a>

Commando para

Diseñoweb

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

Diseñoweb

Transféré par

Droits d'auteur :

Formats disponibles

Cuadernillo de Pginas Web

Ing. Jos de Jess Ramrez Rubio

Vous aimerez peut-être aussi