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:[email protected]”>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

Elementos y variables de un 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.

Elementos y variables de un 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”

Elementos y variables de un 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.

Elementos y variables de un 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.

Elementos y variables de un 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

Technology

Transcript of Curso html