Curso html

HTML
Hyper Text Markup Language
(Lenguaje de marcado hipertexto)
-Es un sistema para estructurar documentos
-Necesitamos un editor de texto, el bloc de notas,
que se abre por defecto desde el
navegador
- Generamos archivos con la extensión .html
-Constituido por directivas de dos tipos:
Abiertas (x ejemplo: <HR>)
Cerradas (x ejemplo: <BR></BR>)

Estructura Básica de un Documento
htmlL
<HTML> Indica el inicio del documento
<HEAD>Inicio de la cabecera
<TITLE>Inicio título de la pagina
</TITLE>Final del título
</HEAD> Final de la cabecera del documento
<BODY>Inicio del cuerpo del documento
</BODY>Final del cuerpo del documento
</HTML>Final del documento

Cabecera del Documento
<HEAD>
-Título de la página
<TITLE>Título de la página </TITLE>
-Indica al visor el nombre de la página y sus contenidos
<META name=“Mi página personal” content=“Mi página personal, Música
y películas”>
-Indica al visor las palabras clave para los buscadores.
<META name=“keywords” content=“sara, musica, videos”>
</HEAD>

Cuerpo del Documento
<BODY>
background= “nombre del fichero gráfico (fondo)”
bgcolor=“código de color”
text=“color del texto”
link=“color de los enlaces”
vlink=“color enlace ya visitado”
</BODY>

El código de color
Características:
-Sistema Hexadecimal 00 00 00
Red Green Blue
00 Mínimo
FF Máximo
Ejemplos: #00 00 00 Color Negro
#FF 00 00 Color Rojo
#00 FF 00 Color Verde
#00 00 FF Color Azul
#FF FF FF Color Blanco

Espaciados y Saltos de Línea
htmlL solo reconoce un espacio entre palabra y palabra, el resto son
ignorados.
<BR> Salto de línea
<P>Para definir un párrafo
Align=left, right, center,justify (derecha,
izquierda,centrado,justificado)
</P>
<HR> Linea Horizontal
align= posición centro (center),derecha (right) o left (izquierda)
size= numero el grosor de la línea en pixels.
width= num % en función del ancho de la ventana del visor
&nbsp Espacio equivalente al de la barra espaciadora

Tamaños de letra (Cabeceras)
<H1> </H1>
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> </H6>
Provocan un retorno de carro sin necesidad de incluir la directiva
<BR>

Atributos del Texto
Negrita <B> Hola</B> ------------ Hola
Cursiva <I>Hola</I>----------------- Hola
Teletype <TT>Hola</TT>------------ --Hola
Subrayado <U>Hola </U>-------------Hola
Tachado <S>Hola </S>
Superindice <SUP>Hola</SUP>-------Hola
Subindice <SUB>Hola</SUB>---------Hola

Atributos del Texto II
<FONT> Para variar el tamaño y el color de un texto
determinado
size=valor-------------------Tamaño en puntos
color=“código color”------Código de color
</FONT>

Listas de Elementos
Hay tres tipos:
-Numeradas-------------------Elementos numerados según el
lugar que ocupan
-Sin Numerar-----------------Elementos con una marca que
antecede a cada uno de ellos.
-Listas de Definición.--------Nos muestra los elementos tipo
Diccionario.

Listas Numeradas
<OL>-------------------------Inicio lista
<LI>--------------------Elementos
</OL>-------------------------Fin lista
Type= tipo
Indica el tipo de numeración utilizada. Si no se indica nada se entiende que será una
lista ordenada.
Los tipos posibles son: 1= Numéricamente(1,2,3...)
a= Letras minúsculas(a,b,c...)
A= Letras mayúsculas(A,B,C...)
i= Nº Romanos en minúsculas(i,ii,iii...)
I= Nº Romanos en mayúsculas(I,II,III...)

Ejemplos Lista Numerada
<OL Type= A>
<LI>España A.España
<LI>Francia------------------------------B.Francia
<LI>Italia C.Italia
</OL>
<OL>
<LI>España 1.España
<LI>Francia------------------------------2.Francia
<LI>Italia 3.Italia
</OL>

Lista sin numerar
Representan los elementos de la lista con un “topo” o marca que antecede a cada uno de
ellos.
<UL type= disk>
<LI>España --------------------------------------------------------•España
<LI>Francia •Francia
</UL>
<UL type= square>
<LI>España -------------------------------------------------------•España
<LI>Francia •Francia
</UL>

Listas de Definición
Muestran los elementos tipo Diccionario, término y definición.
<DL>Apertura de la lista
<DT>Elemento
<DD>Definición del elemento
<DT>Elemento
<DD>Definición del elemento
</DL>Cerramos la lista

Ejemplo Lista de Definición
<DL> ------------------www
<DT>WWW Abreviatura word wide web
<DD>Abreviatura de word wide web
<DT>FTP -----------------FTP
<DD>Abreviatura de File Transfer Protocol Abreviatura File Transfer Protocol
<DT>IRC
<DD>Abreviatura de Internet Relay Chat --------------IRC
</DL> Abreviatura de Internet Relay Chat

Formatos de Imagen
GIF
Usa 256 colores y se emplea sobretodo con imágenes pequeñas
como iconos.Ocupa poco espacio pero la calidad de la imagen es baja.
Características:
Se pueden hacer trasparentes. Sin bordes
Gif animados. Son varias imágenes, como si fuera una sola
y da sensación de movimiento.
JPG
Usa 16.7 millones de colores, se emplea con imágenes de alta
resolución. Cuanto mayor sea la compresión, más pérdida de calidad.

Imágenes
<IMG parametros>
Parámetros:
src=“imagen” Indica el nombre del fichero gráfico a mostrar
alt=“texto” Texto que aparece cuando nos situamos sobre la
imagen
align=“top/middle/bottom/left/right” Como se alineará el texto q
sigue a la imagen.
border=tamaño. Tamaño del borde de la imagen
Height= tamaño. Alto de la imagen en puntos o porcentaje.
Width=tamaño. Ancho de la imagen en puntos o porcentaje.
usemap=mapa. Indica si la imagen es un mapa.

Enlaces
La característica principal de una página Web, es que podemos incluir
Hyperenlaces.
Se utiliza la directiva: <A> </A>
Se puede hacer un enlace con texto y con una imagen.
-Con texto
<A Href=“dirección”> Texto </A>
<A Href =“http://www.terra.es” >Ir a </A>
-Con una imagen
<A Href=“dirección”>Imagen </A>
<A Href=“http://www.terra.es”><img src=“imagen.gif”></A>

Enlaces II
A una dirección de internet:
<A href= “Dirección de la página”>Texto</a>
Ej: <A href= “http://www.terra.es”>Ir a terra.</a>
A una página
<A href= “Dirección de la página”>Texto</a>
Ej: <A href= “index.html”>Ir a página principal.</a>
A cualquier tipo de archivo
<A href= “Ruta del archivo a mostrar”>Texto</a>
Ej: <A href= “manual.zip”>Descargar manual.</a>
A una dirección de correo electrónico:
<A href= “Ruta del archivo a mostrar”>Texto</a>
Ej: <A href=
“mailto:sgonzalo@yahoo.es”>Enviar sugerencias.</a>

Tablas
Las Tablas nos permiten representar cualquier elemento de nuestra
página(texto,imágenes,hyperenlace, ect..) en diferentes filas y columnas,
separadas entre sí.
Se utiliza la directiva: <TABLE></TABLE>
<TD> Indica una celda normal.
<TH>Indica una celda de cabecera, el contenido será resaltado en negrita.
<TR>Indica una fila normal

Tablas II
Parámetros:
border= num--------------------Ancho del borde de la tabla en puntos
Cellspacing= num--------------Espacio que separa las celdas que están dentro de la tabla.
Cellpadding= num--------------Espacio que separa el borde de la celda y el contenido.
Width=num ó %-----------------Anchura de la tabla en puntos o porcentaje.
Height=num ó %----------------Altura de la tabla en puntos o porcentaje.
Align= LEFT/CENTER/RIGHT/JUSTIFY---------Como alineamos el contenido.
Rowspan=num--------------------Indica número de filas que ocupará la celda
Colspan=num---------------------Indica el número de columnas que ocupará la celda.

Ejemplo Tablas
<TABLE border=4 cellspacing=4 cellpadding=4 width=80%>
<TH align=center>Buscadores
<TH align=center colspan=2>Otros links
<TR>
<TD align=LEFT>Yahoo
<TD align=LEFT>Microsoft
<TD align=LEFT>IBM
<TR>
<TD align=LEFT>Infoseek
<TD align=LEFT>Apple
<TD align=LEFT>Digital
</TABLE>

Ejemplo Tablas II
Se vería como:
Yahoo Microsoft IBM
Infoseek Apple Digital
Buscadores Otros Links

Mapas de Imágenes
Un mapa es una imagen que permite realizar diferentes Hyperenlaces en función de la
“zona” de la imagen que se pulse.
Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen
es tratada por un mapa para ello escribiremos la siguiente directiva:
<IMG src=“nombre.gif” usemap=“#casa”>
Las directivas para crear mapas son:
<MAP name=“” ></MAP>----------Identifica al mapa.
TIene el parámetro name, para indicar el nombre del mapa.
<AREA>----------------------------------Define las áreas sensibles de la imagen.

Parámetros de los Mapas
<AREA>---------------------------------Define áreas sensibles de la imagen.
Parámetros:
-shape=“tipo” Indica el tipo de área a definir.
rect=Área rectangular. Coordenas de la esquina superior izquierda y las
de la esquina inferior derecha.
poly=Polígono. Coordenadas de todos los vértices del poligono.
circle=Círculo. Coordenadas del centro y el radio en puntos.
-Coords= “coordenadas” Indica las coordenadas de la figura indicada con shape.
-Href=“Url” Indica la dirección a la que se accede si se pulsa esa zona.

Ejemplo de Mapa de imagen
<IMG src=“foto.gif” usemap=“#casa”>
<MAP name=“casa”>
<AREA shape=“poly” coords=“23,2,32,23” href=“tejado.html”>
<AREA shape=“rect” coords=“23,2,32,23” href=“puerta.html”>
<AREA shape=“circle” coords=“80,76,23” href=“pomo.html”>
<AREA shape=“poly” coords=“23,2,32,23” href=“ventana.html”>
</MAP>

Formularios
Nos permiten dentro de una página web, solicitar información al visitante y
procesarla.
En un formulario podremos solicitar diferentes datos (campos), cada uno de
ellos quedará asociado a una variable.
Una vez se hayan introducido los valores en los campos, el contenido de
estos será enviado a la dirección (URL) donde tengamos el programa que
procese las variables.
Para procesar las variables necesitamos un programa externo, que se llama
CGI (Common Gateway Interface). Creado con lenguajes como Perl, C++ o
Visual Basic.
En este caso lo que vamos a hacer es enviar los datos a una dirección de
correo electrónico.

Declaración de un formulario y
parámetros.
<FORM> </FORM>---------------------Declaración del formulario
Parámetros:
action=“programa”
En nuestro caso programa será mailto:dirección de correo
method=POST/GET
Post—Produce la modificación del documento de destino (como nuestro caso)
Get__ No produce cambios, x ej una consulta a una Base de datos, una búsqueda
en internet

Elementos y variables de un
formulario.
Para la introducción de las variables o elementos se utiliza la directiva <INPUT>.
Esta directiva tiene el parámetro type que indica el tipo de variable a
introducir y name indica el nombre que se le dará al campo.
Type= text name=campo
Indica que el campo a introducir será un texto.
Parámetros.
maxlength=número----Nº máximo de caracteres a introducir.
size=número------------Tamaño de caracteres que se muestran en pantalla.
value=“texto”-----------Valor inicial del campo.Normalmente será 0

formulario II
Type= password name=campo
Indica que el campo será una palabra de paso.Mostrará asteriscos en lugar de letras
escritas.
Parámetros.
maxlength=número----Nº máximo de caracteres a introducir.
size=número------------Tamaño de caracteres que se muestran en pantalla.
value=“texto”-----------Valor inicial del campo.Normalmente será 0
Type= checkbox name=campo
El campo se elegirá marcando una casilla. Se permite marcar varias casillas.
Parámetros.
value=“valor”----checked. La casilla aparecerá marcada por defecto.

formulario III
Type= radio name=campo
El campo se elegirá marcando una casilla.Solo se permite marcar una sola de las
casillas. Los valores de las casillas serán indicados por:
Parámetros.
value=“valor”
Type= image name=campo
El campo contendrá el valor de las coordenadas del punto de la imagen pinchado.
Parámetros.
src=“fichero de imagen
Type= hidden name=campo
El usuario no puede modificar su valor, el campo no es visible. Se manda siempre
con el valor indicado por el parámetro.
Parámetros.
value=“valor”

formulario IV
Type= submit
Representa un botón. Al pulsar este botón la información de todos los campo se
envía al programa indicado en <FORM>.
Parámetros.
value=“texto”-----------Indica el texto que aparece en el botón.
Type= reset
Representa un botón. Al pulsar este botón se borra la información de todos los
campos.
Parámetros.
value=“texto”-----------Indica el texto que aparece en el botón.

formulario V
Campos de selección.
Este tipo de campos despliegan una lista de opciones, entre las que debemos
escoger una o varias. Se utiliza para ellos la directiva:
<SELECT> </SELECT>.
Parámetros.
name=campo-----------Nombre del campo
size= num---------------Número de opciones visibles.Si se indica 1 se presenta
como un menú desplegable, si se indica más de uno se
presenta como una lista con barra de desplazamiento.
<OPTION> Para las diferentes opciones de la lista.
Parámetos.
selected para indicar cuál es la opción por defecto.

formulario VI
Caja de texto para comentarios.
<TEXTAREA></TEXTAREA>
Parámetros.
name=campo----Nombre del campo
cols=num.-------Número de columnas de texto visibles.
rows=num-------Número de filas de texto visibles.
wrap=VIRTUAL-----Envía todo el texto seguido
PHYSICAL--- Envía las líneas de texto separadas en líneas físicas.

Directiva Marquee
<MARQUEE> </MARQUEE>
Crea una marquesina con un texto en su interior que se desplaza.
Solo funciona con el navegador Internet Explorer.
Parámetros.
align=top/middle/bottom.Para alinear el texto.
bgcolor=“código” . Color de fondo de la marquesina.
direction=left/right. Hacia que lugar se desplaza el texto.
height=num ó %. Altura de la marquesina.
width=num ó %. Anchura de la marquesina.
Loop= num/infinite. Indica el número de veces que se desplazará el texto.

Sonido de fondo
Nuestra página puede tener un sonido que se active al entrar en una página.
<BGSOUND> con el navegador Internet Explorer
Parámetros.
src=“fichero de audio”. El nombre del fichero de audio (.waw .mid .avi .mp3)
loop=num/infinite. Indica el número de veces que se repite el sonido.
<EMBED> con el navegador Netscape.
Parámetros.
src=“fichero de audio”. El nombre del fichero de audio (.waw .mid .avi)
autostar=true. Si deseamos que la reproducción se inicie automáticamente.
loop=num/infinite. Indica el número de veces que se repite el sonido.
volume=numero. Volumen del sonido.

Frames
Es una técnica para subdividir la pantalla del visor en
diferentes ventanas.
Cada una de estas ventanas se podrá manipular por
separado, permitiéndonos mostrar en cada una de ellas una página
web diferente.
Esta directiva se define antes del cuerpo del documento, es decir antes
de la directriz de <BODY>, pero después de cerrar la directriz de
</HEAD>
<FRAMESET> </FRAMESET> Indica como se va dividir la
ventana principal, en filas o en columnas.
Parámetros.
cols=“%” Columnas
rows=“%”, Filas.

Frames II
<FRAME> Indica las propiedades de cada subventana. Es necesario indicar una directiva
para cada subventana creada.
Parámetros.
name=“nombre”. Indica el nombre por el q nos referimos a esa subventana
src=“URL”. Página a mostrar.
marginwidth=num. Indica el margen izquierdo y derecho en puntos.
marginheight=num. Indica el margen superior en inferior en puntos.
scrolling=“yes/no/auto”. Indica si se aplica la barra de desplazamiento
yes. Si que se muestren siempre
no. Nunca aparezcan
auto. Sólo cuando sea necesario.

Ejemplo de Frames
<htmlL>
<HEAD><TITLE>Página con frames</TITLE>
</HEAD>
<FRAMESET cols=“15%,*”>----Creo dos subventanas verticales iqz. 15% y la dcha el resto
<FRAMESET rows=“35%,* ”> Creo dos horizontales iqz.dentro de la anterior.
<FRAME name=“ven1” src=“pagina.html” scrolling=“auto”>
<FRAME name=“menu” src=“menu.html” scrolling=“auto”>
</FRAMESET>
<FRAME name=“home” src=“index.html”>
<BODY>
</FRAMESET>
</BODY>
</htmlL>

Frames III
Cuando queramos mostrar una página web, debemos indicarle al visor en que
subventana queremos que se muestre. Por defecto se muestra la ventana donde se
encuentra el enlace.
Para poder elegir la subventana de destino, agregamos la directiva:
<A href=></A> Con los parámetros siguientes:
target=“nombre_ventana”
target=“_blank”. En una nueva página.
target=“_self”. Se muestra el Hyperenlace en la subventana activa.
target=“_parent”. Se muestra en el frame definido anteriormente al actual.
Si no hay ninguno definido, se muestra a pantalla completa.
target=“_top”. Suprime todas las subventas de la pantalla y muestra a
pantallas completa.

Curso html

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Curso html

Curso html