Scribd Logo
Importer

Bienvenue sur Scribd !

  • Cur So HTML

    Transféré par

    saramiguelyaitana
    30 vues40 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PPT, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    30 vues40 pages

    Cur So HTML

    Transféré par

    saramiguelyaitana

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 40

    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 extensin .htm -Constituido por directivas de dos tipos: Abiertas (x ejemplo: <HR>) Cerradas (x ejemplo: <BR></BR>)

    Estructura Bsica de un Documento HTML


    <HTML> Indica el inicio del documento <HEAD>Inicio de la cabecera <TITLE>Inicio ttulo de la pagina </TITLE>Final del ttulo </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>
    -Ttulo de la pgina <TITLE>Ttulo de la pgina </TITLE> -Indica al visor el nombre de la pgina y sus contenidos <META name=Mi pgina personal content=Mi pgina personal, Msica y pelculas> -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 grfico (fondo) bgcolor=cdigo de color text=color del texto link=color de los enlaces vlink=color enlace ya visitado
    </BODY>

    El cdigo de color
    Caractersticas: -Sistema Hexadecimal

    00 00 00 Red Green Blue

    00 Mnimo FF Mximo 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 Lnea


    HTML solo reconoce un espacio entre palabra y palabra, el resto son ignorados. <PRE> </PRE> <BR> Salto de lnea <P>Para definir un prrafo Align=left, right, center (derecha, izquierda,centrado) </P> <HR> Linea Horizontal align= posicin centro (center),derecha (right) o left (izquierda) size= numero el grosor de la lnea en pixels. width= num % en funcin del ancho de la ventana del visor

    Tamaos 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 tamao y el color de un texto determinado size=valor-------------------Tamao en puntos color=cdigo color------Cdigo de color </FONT>

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

    Listas Numeradas
    <OL>-------------------------Inicio lista <LI>--------------------Elementos </OL>-------------------------Fin lista
    Type= tipo Indica el tipo de numeracin utilizada. Si no se indica nada se entiende que ser una lista ordenada. Los tipos posibles son: 1= Numricamente(1,2,3...) a= Letras minsculas(a,b,c...) A= Letras maysculas(A,B,C...) i= N Romanos en minsculas(i,ii,iii...) I= N Romanos en maysculas(I,II,III...)

    Ejemplos Lista Numerada


    <OL Type= A> <LI>Espaa A.Espaa <LI>Francia------------------------------B.Francia <LI>Italia C.Italia </OL> <OL> <LI>Espaa 1.Espaa <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>Espaa --------------------------------------------------------Espaa <LI>Francia Francia </UL>
    <UL type= square> <LI>Espaa -------------------------------------------------------spaa E <LI>Francia Francia </UL>

    Listas de Definicin
    Muestran los elementos tipo Diccionario, trmino y definicin.
    <DL>Apertura de la lista <DT>Elemento <DD>Definicin del elemento <DT>Elemento <DD>Definicin del elemento

    </DL>Cerramos la lista

    Ejemplo Lista de Definicin

    <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 imgenes pequeas como iconos.Ocupa poco espacio pero la calidad de la imagen es baja. Caractersticas: Se pueden hacer trasparentes. Sin bordes Gif animados. Son varias imgenes, como si fuera una sola y da sensacin de movimiento.
    JPG Usa 16.7 millones de colores, se emplea con imgenes de alta resolucin. Cuanto mayor sea la compresin, ms prdida de calidad.

    Imgenes
    <IMG parametros>
    Parmetros: src=imagen Indica el nombre del fichero grfico 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=tamao. Tamao del borde de la imagen Height= tamao. Alto de la imagen en puntos o porcentaje. Width=tamao. Ancho de la imagen en puntos o porcentaje. usemap=mapa. Indica si la imagen es un mapa.

    Enlaces
    La caracterstica principal de una pgina 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=direccin> Texto </A> <A Href =http://www.terra.es >Ir a </A> -Con una imagen <A Href=direccin>Imagen </A> <A Href=http://www.terra.es><img src=imagen.gif></A>

    Enlaces II
    A una direccin de internet: <A href= Direccin de la pgina>Texto</a> Ej: <A href= http://www.terra.es>Ir a terra.</a> A una pgina <A href= Direccin de la pgina>Texto</a> Ej: <A href= index.htm>Ir a pgina 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 direccin de correo electrnico: <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 pgina(texto,imgenes,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 que acaba una fila de celdas

    Tablas II
    Parmetros: border= num--------------------Ancho del borde de la tabla en puntos Cellspacing= num--------------Espacio que separa las celdas que estn 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 nmero de filas que ocupar la celda Colspan=num---------------------Indica el nmero 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 vera como:

    Buscadores Yahoo Infoseek Microsoft Apple

    Otros Links IBM Digital

    Mapas de Imgenes
    Un mapa es una imagen que permite realizar diferentes Hyperenlaces en funcin 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 parmetro name, para indicar el nombre del mapa. <AREA>----------------------------------Define las reas sensibles de la imagen.

    Parmetros de los Mapas


    <AREA>---------------------------------Define reas sensibles de la imagen. Parmetros: -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=Polgono. Coordenadas de todos los vrtices del poligono. circle=Crculo. Coordenadas del centro y el radio en puntos.
    -Coords= coordenadas Indica las coordenadas de la figura indicada con shape. -Href=Url Indica la direccin 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.htm> <AREA shape=rect coords=23,2,32,23 href=puerta.htm> <AREA shape=circle coords=80,76,23 href=pomo.htm> <AREA shape=poly coords=23,2,32,23 href=ventana.htm> </MAP>

    Formularios
    Nos permiten dentro de una pgina web, solicitar informacin 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 direccin (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 direccin de correo electrnico.

    Declaracin de un formulario y parmetros.


    <FORM> </FORM>---------------------Declaracin del formulario
    Parmetros: action=programa En nuestro caso programa ser mailto:direccin de correo method=POST/GET PostProduce la modificacin del documento de destino (como nuestro caso) Get__ No produce cambios, x ej una consulta a una Base de datos, una bsqueda en internet

    Elementos y variables de un formulario.


    Para la introduccin de las variables o elementos se utiliza la directiva <INPUT>. Esta directiva tiene el parmetro 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. Parmetros. maxlenght=nmero----N mximo de caracteres a introducir. size=nmero------------Tamao 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. Parmetros. maxlenght=nmero----N mximo de caracteres a introducir. size=nmero------------Tamao 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. Parmetros. 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 sern indicados por: Parmetros. value=valor Type= image name=campo El campo contendr el valor de las coordenadas del punto de la imagen pinchado. Parmetros. 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 parmetro. Parmetros. value=valor

    Elementos y variables de un formulario IV


    Type= submit Representa un botn. Al pulsar este botn la informacin de todos los campo se enva al programa indicado en <FORM>. Parmetros. value=texto-----------Indica el texto que aparece en el botn. Type= reset Representa un botn. Al pulsar este botn se borra la informacin de todos los campos. Parmetros. value=texto-----------Indica el texto que aparece en el botn.

    Elementos y variables de un formulario V


    Campos de seleccin. 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>. Parmetros. name=campo-----------Nombre del campo size= num---------------Nmero de opciones visibles.Si se indica 1 se presenta como un men desplegable, si se indica ms de uno se presenta como una lista con barra de desplazamiento.
    <OPTION> Para las diferentes opciones de la lista. Parmetos. selected para indicar cul es la opcin por defecto.

    Elementos y variables de un formulario VI


    Caja de texto para comentarios.
    <TEXTAREA></TEXTAREA> Parmetros. name=campo----Nombre del campo cols=num.-------Nmero de columnas de texto visibles. rows=num-------Nmero de filas de texto visibles. wrap=VIRTUAL-----Enva todo el texto seguido PHYSICAL--- Enva las lneas de texto separadas en lneas fsicas.

    Directiva Marquee
    <MARQUEE> </MARQUEE>
    Crea una marquesina con un texto en su interior que se desplaza. Solo funciona con el navegador Internet Explorer. Parmetros. align=top/middle/bottom.Para alinear el texto. bgcolor=cdigo . 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 nmero de veces que se desplazar el texto.

    Sonido de fondo
    Nuestra pgina puede tener un sonido que se active al entrar en una pgina.
    <BGSOUND> con el navegador Internet Explorer Parmetros. src=fichero de audio. El nombre del fichero de audio (.waw .mid .avi) loop=num/infinite. Indica el nmero de veces que se repite el sonido. <EMBED> con el navegador Netscape. Parmetros. src=fichero de audio. El nombre del fichero de audio (.waw .mid .avi) autostar=true. Si deseamos que la reproduccin se inicie automticamente. loop=num/infinite. Indica el nmero de veces que se repite el sonido. volume=numero. Volumen del sonido.

    Frames
    Es una tcnica para subdividir la pantalla del visor en diferentes ventanas. Cada una de estas ventanas se podr manipular por separado, permitindonos mostrar en cada una de ellas una pgina web diferente. Esta directiva se define antes del cuerpo del documento, es decir antes de la directriz de <BODY>, pero despus de cerrar la directriz de </HEAD>
    <FRAMESET> </FRAMESET> Indica como se va dividir la ventana principal, en filas o en columnas.

    Parmetros. cols=% Columnas rows=%, Filas.


    .

    Frames II
    <FRAME> Indica las propiedades de cada subventana. Es necesario indicar una directiva para cada subventana creada. Parmetros. name=nombre. Indica el nombre por el q nos referimos a esa subventana src=URL. Pgina 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. Slo cuando sea necesario.

    Ejemplo de Frames
    <HTML> <HEAD><TITLE>Pgina 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.htm scrolling=auto> <FRAME name=menu src=menu.htm scrolling=auto> </FRAMESET> <FRAME name=home src=index.htm> <BODY> </FRAMESET> </BODY> </HTML>

    Frames III
    Cuando queramos mostrar una pgina 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 parmetros siguientes: target=nombre_ventana target=_blank. En una nueva pgina. 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.

    Vous aimerez peut-être aussi