Scribd Logo
Upload

Welcome to Scribd!

  • Documento 01 Conceptos Basicos de HTML

    Uploaded by

    Adriiana Rodríguez
    14 views14 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views14 pages

    Documento 01 Conceptos Basicos de HTML

    Uploaded by

    Adriiana Rodríguez

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 14

    Documento 01 Conceptos bsicos de html

    Contenid o
    Significado HyperText Markup Language............................................................................................ 2 Estructura de etiquetas (tags) ............................................................................................................. 2 Estructura general de un documento ................................................................................................. 2 ETIQUETAS ELEMENTALES .................................................................................................................. 2 Etiqueta <!DOCTYPE > ................................................................................................................. 2 Etiqueta <META>............................................................................................................................. 3 Etiqueta <TITLE> .............................................................................................................................. 3 Etiqueta <STYLE> ............................................................................................................................. 3 Etiqueta <DIV> ................................................................................................................................ 3 Otras etiquetas bsicas ....................................................................................................................... 4 Formatos de texto ............................................................................................................................... 6 Fondos ................................................................................................................................................. 8 Propiedades CSS para fondos.............................................................................................................. 8 Estructura de un enlace ...................................................................................................................... 9 Atributos de un enlace .................................................................................................................... 9 <A href =.. target=_blank name=enlace1></A> ........................................................................ 9 Enlaces con e-mail ............................................................................................................................... 9 Formatos ms usados.......................................................................................................................... 9 Ejemplo.......................................................................................................................................... 10 Tablas ............................................................................................................................................ 10 Formularios ....................................................................................................................................... 11 Definicin de formulario ............................................................................................................... 11 Etiquetas bsicas del formulario ................................................................................................... 11

    Significado HyperText Markup Language


    Lenguaje basado en el uso de etiquetas (tags). Es interpretado y multiplataforam Documento escrito en ASCII (Texto plano), no incluye ningn formato. Extensiones .htm o .html

    Estructura de etiquetas (tags)


    Uso de etiquetas <xxxx> INICIO DE UNA ETIQUETA </xxx> CIERRE DE UNA ETIQUETA Vlido usar etiquetas en mayscula o minscula, indistintamente Todo lo que hay dentro de ellas se ve afectado por su accin

    Estructura general de un documento


    Todo el documento HTML debe estar contenido entre las etiquetas: <HTML> </HTML> El documento se divide en dos zonas: o Encabezamiento: <HEAD> </HEAD> Parte de definicin <TITLE>. <META>, <STYLE> , ETC. o Cuerpo: <BODY> </BODY> Parte visible: <TABLE>, <FORM>, <A>, <IMG>

    ETIQUETAS ELEMENTALES
    Etiqueta <!DOCTYPE >
    Tipo de document HTML: Estricta, de transicin o blando, de marcos. Se define previamente a la etiqueta <html>, no es obligatoria

    Ejemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    Etiqueta <META>
    Identifica distintas propiedades del document: name, content

    Etiqueta <TITLE>
    Cabecera: ttulo de pgina <TITLE> </TITLE>

    Etiqueta <STYLE>
    Se define en la zona de encabezamiento <HEAD> para todo el documento Se basa en el formato para definicin de hojas de estilo CSS Ejemplo:
    <STYLE> INPUT {text-align:center; font: bold 12pt Arial} </STYLE>

    Etiqueta <DIV>
    Se define en el cuerpo del documento, creando secciones a las que se puede aplicar un formato en forma general Se combina con el atributo style para asignar el formato Utiliza la misma notacin CSS Puede englobar distintas etiquetas

    Ejemplo:
    <DIV style=background:gold; color:blue> </DIV>

    Otras etiquetas bsicas


    Etiqueta <HI> </H1>, <H2> </H2> , <H6> </H6> <center> </center> <BRI> </BR> <p> </p> <HR> Descripcin Estilo de cabecera

    <b> </b> <strong> </strong> <i> </i> <em> o </em> <u> </u> <s> </s> <SUP> </SUP> <SUB> </SUB> <!-- -.> <FONT> </FONT>

    Centra lo que se indica Salto de lnea Separacin entre prrafos Atributos: class, style, align, Separador horizontal Atributos: width, size, color, Anchura del separador: <HR width= ...> en porcentaje o pixeles Alienacin:left, right, center <HR width= nn% align=aaa> Altura del separador <HR size=ss> Color del separador <HR color=> Negrita Itlica o cursive Subrayado Tachado Superndices Subndices Comentarios Fuentes Size de FONT: Tamao de la fuente. <FONT size =5> Texto en tamao 5 absoluto</FONT> <FONT size =-1> Texto menor en 1 relativo</FONT> <FONT size =+1> Texto mayor en 1 relativo</FONT> <FONT size =+2> Texto mayor en 2 relativo</FONT> <BASEFONT size=4> Para todo documento, al principio Face: Se puede forzar a que el texto se muestre con el tipo de fuentes, siempre que est instalada en el equipo cliente <FONT face=fuente1, fuente2, fuente3, , fuenteN> </FONT> Color: Nombre del color, valor hexadecimal RGB <FONT COLOR=red> Texto en color rojo </FONT> <FONT COLOR=#FF0000> Texto color rojo </FONT> Definicin de estilo orientado al documento Orientada a prrafos En etiquetas se puede utilizar STYLE Listas desordenadas (no numeradas) Listas ordenadas (Numeradas) Atributos: start=n Listas de definicin Elementos de definicin: <DT> Elementos de contenido: <DD>

    <STYLE> </STYLE> <DIV> </DIV> Atributo < style=> <UL> </UL> <OL> </OL> <DL> </DL>

    Prctica 01 Abrir un Nuevo documento en un editor de texto Guardar el documento con el nombre de: prac01.html Escribir el cdigo en html Cdigo

    Ejecucin

    Formatos de texto
    <em> ... </em> <strong> ... </strong> <i> ... </i> <b> ... </b> <u> ... </u> <big> ... </big> <small> ... </small> Texto enfatizado Texto fuerte Texto en cursiva Texto en negrita Texto subrayado Texto ms grande Texto ms pequeo

    &lt; &quot; $$ &#225; &#237; &#250; &#209;

    < " $

    &gt; &amp; &nbsp; &#233; &#243; &#241; &#193;

    > & SPACE

    PRCTICA 2 HTML 1. Abrir un Nuevo documento de texto 2. Guardarlo con el nombre de prac02.html CDIGO Cabecera y estilo CSS

    Cuerpo del programa html

    Ejecucin del programa

    Fondos
    El fondo por defecto de una pgina html es el color blanco, o en su caso, el definido en el navegador por el usuario Se aade a la etiqueta <BODY> el atributo bgcolor BGCOLOR=color, donde color puede ser: red, White, black, blue, aliceblue, BGCOLOR=#rrggbb, donde o rr: Cantidad de color rojo en hexadecimal o gg: Cantidad de color verde en hexadecimal o bb: Cantidad de color azul en hexadecimal Colores primarios o Rojo (R):red o #FF0000 o Verde(G): green o #00FF00 o Azul(B):blue o #0000FF Usuales o Blanco: white o #FFFFFF o Negro: black o 000000 o Amarillo: yellow o FFFF00 El atributo background=archivo-imagen se aade a <BODY> El atributo bgproperties=fixed, establece el fondo fijo <BODY background=logo.gif>

    Propiedades CSS para fondos


    Se definen con STYLE> o <BODY style=> Background-color: o Color del fondo Background-image:url(): o Imagen del fondo Background-attachment: o Fijacin del fondo imagen (scroll, fixed) Background-repeat: o Repeticin de la imagen de fondo o Repeat, no-repeat, repeat-x, repeat-y Background-position: o Posicin de la imagen (top, center, bottom, left, right

    Estructura de un enlace
    <a href=direccin-enlace>xxx</a> Saltos grandes en la misma pgina Ejemplo:
    <A href=#indice> Ir al ndice </A> y en la zona del ndice se pondr: <A name=indice> . </A>

    Atributos de un enlace
    href; referencia a otro recurso o ancla target; ventana o marco en el que se mostrara el recurso vinculado: _blank, _self, _parent, _top, nombre title; tip aclaratorio del enlace id, name; Identificador de referencia del enlace onclick, onmouseover, ...; eventos parallamada a scripts

    Ejemplo: <A href =.. target=_blank name=enlace1></A>

    A la etiqueta <BODY> se le aaden los atributos LINK, VLINK y ALINK. o link; Color de los enlaces. o vlink; Color enlaces visitados. o alink; Color enlaces activos. Ejemplo: <BODY bgcolor=#E8EFFF TEXT=#FFFFFF link=#FFFF00 vlink=#FF0000 alink=#0000EC>

    Enlaces con e-mail


    mailto:direccin-destinatario Ejemplo: <A href =mailto:cuenta@dominio> texto_identificador_cuenta</A>

    Formatos ms usados
    Etiqueta <MARQUEE </MARQUEE> <BLINK </BLINK> <BGSOUND> <EMBED> <OBJECT> <A href= > </a> Descripcin Marquesinas Parpadeo Sonido Audio y video Audio y video Audio y vielo

    Ejemplo
    o o o Enlaces a documentos de audio, <A href=saludo.wav>Bienvenida</A> Las etiquetas <EMBED> ? u <OBJECT> <EMBED src=*.mp3 > La etiqueta <BGSOUND> (IE) <BGSOUND src=voz.au>

    Tablas
    Etiqueta general que define una tabla es: <TABLE> ... </TABLE> Las tablas pueden tener o no tener borde externo: <TABLE border=n>. Por defecto border=1 (sencillo). Filas de una tabla <TR> ... </TR> Columnas <TD> ... </TD> La tabla se centra con <TABLE align=center> , <DIV align=center> o <CENTER>, pero esto no afecta al contenido de la misma. El contenido centrado se consigue con <TD align=center> El formato de texto s queda afectado por las definiciones externas.

    Dimensiones Por defecto, una tabla se dimensiona al 100%, en anchura si no se especifica nada ms, aunque es aconsejable definir los atributos para obtener mayor control. El atributo que modifica la anchura de una tabla es: WIDTH=nn, donde nn puede ser un nmero en porcentaje o pxeles. Estos atributos son aplicables tanto a <TABLE> como a <TD>. Una celda <TD> puede expandirse horizontalmente sobre otras celdas con el atributo COLSPAN=nn. Verticalmente se expanden con el atributo ROWSPAN=nn. nn es un nmero natural entero que indica el nmero de celdas sobre las que se expande la celda TD. Separacin entre celdas Atributo CELLSPACING=nn de la etiqueta <TABLE>. o nn es un nmero entero positivo que indica la separacin entre celdas, expresado en pxeles. o La separacin por defecto es de dos pxeles Atributo CELLPADDING=nn de la etiqueta <TABLE>. o nn es un nmero entero positivo que indica la separacin entre el contenido de la celda y el borde exterior, expresado en pxeles. o La separacin por defecto es de un pxel

    Prctica 03 Manejo de tablas Nuevo documento Guardarlo con el nombre de: prac03.html Crear una tabla que tenga el mes de Septiembre de 2010, similar al presentado a la figura Escriba bien los das y los das importantes agregue una imagen

    Formularios
    Los formularios permiten que el cliente enve informacin al servidor web, donde un programa procesar esta informacin, la aplicacin CGI, y responder en consecuencia. Elementos tpicos de un formulario son: cajas de texto, botones, listas de seleccin, b botones de radio, etc.

    Definicin de formulario
    Un formulario se define con las etiquetas <FORM > </FORM> Estructura general de un formulario <FORM NAME=FrmInformacion ACTION=/otroformulario METHOD=post ENCTYPE=text/plain> </FORM> ACTION: Indica la accin que se debe efectuar METHOD = POST. Indica que los datos del formulario sern enviados al servidor a su entrada de datos estndar. METHOD=GET. Indica que se envan los datos aadindolos a la URL, como un apndice ENCTYPE = text/plain permite que el formulario se enve en formato texto plano. o Solo aplicable cuando METHOD=POST o Indica el formato MIME de los datos enviados o Otros tipos: multipart/form-data, text/html, image/gif, etc

    Etiquetas bsicas del formulario


    <INPUT>, Campo de entrada de datos <TEXTAREA>... <TEXTAREA>, Texto libre <SELECT>..</SELECT>, Lista de valores La estructura de la etiqueta <INPUT>, principal en la introduccin de datos, es:

    <INPUT TYPE=xxx NAME=yyy VALUE=zzz>


    donde: xxx: Tipo de control (button, text, image, ) yyy: Nombre del control. zzz: Valor del control. Atributos de type o text; caja de texto (valor por defecto de INPUT) o password; caja de texto enmascarada. o checkbox; caja de confirmacin true/false o radio; seleccin de opciones alternativas o file; seleccin de fichero o hidden; campo oculto que se enva, aunque no est visible. o button; botn asociable a un script para ejecutar un proceso. o reset; botn para limpiar los datos de todo el formulario. o submit; botn para envo de los datos o image; tambin permite el envo de datos del formulario Cajas de texto o El valor que debe tomar el tipo de la etiqueta <input> es text: <INPUT TYPE=TEXT NAME=nombre VALUE=valor> o Por defecto la longitud visible en el formulario es de 20 caracteres. La longitud visible puede limitarse con el atributo SIZE=nn. o La longitud de los datos a introducir se limita con el atributo MAXLENGTH=nn. o El atributo VALUE muestra el valor por defecto que aparece en la caja de texto, y que se enviara sino es cambiado o Otros atributos frecuentes se relacionan con los eventos (onfocus, onblur, onchange,...) que permiten el tratamiento de los datos mediante un script Ejemplos Ejemplo1:
    <FORM ACTION=/certificados METHOD=POST> Escribe tu nombre: <INPUT TYPE=text NAME=nombre VALUE=> <br>NIF: <INPUT TYPE=text NAME=nif VALUE=00000000A onblur=valida_nif(this);> </FORM>

    Ejemplo 2: <INPUT TYPE=text NAME=ape1 SIZE=20 MAXLEGNTH=18 > Ejemplo 3: <INPUT TYPE=text NAME=ape1 SIZE=20 MAXLEGNTH=40> Campos hidden o A veces es conveniente tener en un formulario algunos campos ocultos. o El tipo especificado para la etiqueta <INPUT> es hidden: <INPUT TYPE=hidden NAME=xxx VALUE=yyyy> o Estos campos no son visibles, pero se envan junto con el resto del formulario.

    PRCTICA 03, Manejo de formularios Realizar el siguiente formulario Abrir un nuevo documento Guardar el documento con el nombre: prac03.html Crear un programa que contenga los siguientes elementos

    Bibliografa http://www.w3schools.com http://www.javascript-coder.com/html-form/html-form-tutorial-p1.phtml

    You might also like