Ap HTML

HTML (HyperText Markup Language)
Cuando solicitamos, a travs de un navegador, una pgina Web a un servidor, ste nos enva (enva al cliente) el cdigo de la misma y es en el propio navegador del cliente donde se analiza el cdigo y se visualiza la pgina. Uno de los lenguajes en los que se puede escribir ese cdigo es HTML. Inicialmente este un lenguaje se dise nicamente para formatear texto. El texto que se quiere mostrar en pantalla se divide en distintos bloques, cada uno de los cuales est delimitado por dos etiquetas, que indicarn el formato en el que queremos que se muestre el bloque de texto. La primera de ellas indica el comienzo del bloque, y la segunda, con el mismo nombre pero precedida del signo /, el final. Ambas se escriben entre los signos <>. Por ejemplo, para indicar que queremos visualizar en negrita una determinada parte de un texto, utilizaremos la etiqueta <b> de la siguiente forma: <b>I.E.S. Francisco de Goya</b> Las etiquetas se deben escribir en minsculas. Las etiquetas pueden estar incluidas unas dentro de otras. Por ejemplo: <i><b> I.E.S. Francisco de Goya</b></i> pondra el texto que contenga en cursiva y negrita. La sintaxis de la siguiente expresin no sera correcta: <i><b> I.E.S. Francisco de Goya</i></b> Todas las etiquetas tienen asociados una serie de atributos, que se identifican por un nombre. Por ejemplo, la etiqueta <body>, que delimita todo el contenido de la pgina, tiene el atributo, text, que indica el color en el que se visualizar el texto de la pgina. Los atributos se especifican dentro de la etiqueta y siempre deben llevar asociado un valor entrecomillado. Por ejemplo, <body text=red> escribir el texto de la pgina en rojo.
HTML
Las etiquetas y el contenido de la pgina se pueden escribir en la misma lnea o en lneas separadas. Por ejemplo, estos dos cdigos seran similares: <i> <b> I.E.S. Francisco de Goya</b> </i> <i><b> I.E.S. Francisco de Goya </b> </i>
HTML
ESTRUCTURA DE UN DOCUMENTO HTML

<html> <head> <title> ...............</title> </head> <body> : : </body> </html> Todo documento debe empezar y terminar con la etiqueta <html>. La etiqueta <head>, que es opcional, delimita una parte del documento denominada cabecera. En esta cabecera la etiqueta ms usual es <title> con la que se especifica el ttulo de la ventana en la que se visualizar nuestro documento. Existen otras etiquetas para la cabecera en la que se especifica informacin relacionada con el documento, como quien lo diseo, temas que trata, fecha de creacin etc. Si se desean poner comentarios al cdigo, que no se visualicen en la pgina, deben ir entre: 
HTML
Etiqueta <body>
Delimita al documento en s y es obligatoria. Los atributos ms usuales de la etiqueta body son: Color de texto: Color de fondo: Color del enlace: Color del enlace activo: Color del enlace visitado: Grfico de fondo: text=#rrggbb NombreColor rgb(r,g,b) bgcolor=#rrggbb NombreColor rgb(r,g,b) link=#rrggbb NombreColor rgb(r,g,b) alink=#rrggbb NombreColor rgb(r,g,b) vlink=#rrggbb NombreColor rgb(r,g,b) background=NombreGrfico.xxx
En el caso del grfico del fondo, si este no estuviese en la misma carpeta que la pgina se debera especificar la ruta relativa del grfico respecto a la misma. Colores Para especificar el color se puede especificar un nombre o su descripcin RGB. Cuando se utilizan colores sencillos es ms fcil definirlos por su nombre, estando normalizados 16 colores: black ( negro), white (blanco), red (rojo), blue (azul), green (verde),... La descripcin de colores a travs del modelo RGB, que se basa en la combinacin de los tres colores primarios de la luz, es ms adecuada para cuando se desea precisar el color con total exactitud. Se puede utilizar la notacin decimal, tres valores entre 0 y 255 para cada color, mediante: rgb(rojo, verde, azul) o la notacin hexadecimal, tres valores entre 00 y FF para cada color mediante: #RojoVerdeAzul Por ejemplo: <body text=#00f189 bgcolor=red> Grfico de fondo Si se muestra un grfico de fondo ms pequeo que la pantalla, este se repite, tanto horizontal como verticalmente, tantas veces como quepa. Esto va a permitir, haciendo grficos adecuados, dividir la pantalla en colores diferentes, efectos de cuadernos de anillas, etc.
HTML 4
Etiqueta <p>
Si cuando estamos escribiendo el cdigo HTML de un documento pulsamos Enter, este salto de lnea no se va a registrar cuando se visualice la pgina. Para conseguir forzar un punto y aparte debemos escribir el prrafo entre las etiquetas: <p>................</p> En HTML se consideren caracteres especiales las vocales acentuadas, la , las comillas, etc. Para poderlos escribir hay que hacerlo mediante las expresiones: : : : : : : espacio: á é í ó ú ñ (por si se quiere poner ms de uno)
&nbsp tiene sentido ya que por muchos espacios seguidos que se indiquen, el navegador los transforma en nicamente en uno. Atributos Alineacin del prrafo: align={left, right, center, justify}
TTULOS
<h1></h1> <h2></h2> : : <h6></h6> Son etiquetas que se utilizan para ttulos. El tamao de la letra vara de mayor a menor. <h1> la ms grande y <h6> la ms pequea. Atributos Alineacin: align={left, right, center, justify}
HTML
FORMATO DE LETRAS
Negrita: Cursiva: Subrayado: Subndice: Superndice: <b>..</b> <i>..</i> <u>..</u> <sub>..</sub> <sup>..</sup>
SALTO DE LNEA
<br/> En HTML aquellas etiquetas que no tengan pareja de final deben terminar en el smbolo: /
LNEA HORIZONTAL
<hr/> Atributos Grosor: Anchura: Alineacin: Color: Lnea sin sombras: size=4 width=250 60% align={center, left, right} color=#rrggbb NombreColor rgb(r,g,b) noshade=noshade
Unidades de medida pixel: milmetros: centmetros: pulgadas: punto tipogrfico: px mm cm in pt (1/72 pulgadas)
HTML
Etiqueta <font>
Se utiliza para disear el formato de la letra de un texto. En la actualidad se tiende a sustituir por las hojas de estilo, que se vern ms adelante. <font> Texto </font> Atributos Color: Tamao: Tipo: color=#rrggbb NombreColor rgb(r,g,b) size=1 al 7 (4 el normal) -2 relativo al tamao anterior face=Times, Arial, Helvetica,...
Etiqueta <pre>
Se utiliza para visualizar un texto exactamente igual que se escribe en el cdigo HTML, con sus espacios, sus saltos de lnea, etc. <pre> Texto </pre>
Etiqueta <div>
Realmente esta etiqueta no hace nada por s misma. Se utiliza para agrupar dentro de ella a un conjunto de objetos y poderles dar a todos ellos en conjunto unas caractersticas comunes. Es muy utilizada en las hojas de estilo css, que se vern ms adelante, y en programacin con script. <div> Texto </div>
HTML
Etiqueta <marquee>
Produce el movimiento de un texto. <marquee> Texto </marquee> Atributos Direccin: direction={left, right, up, down} Altura del texto: height=100 20% Anchura del texto: width=100 20% Color de fondo: bgcolor=#rrggbb NombreColor rgb(r,g,b) Num. Pixel de salto en cada paso: scrollamount=25 Num. ms. de pausa entre dos pasos: scrolldelay=1000 Num. pasos (por defecto, infinito): loop=5 Tipo de movimiento: behavior={scroll, alternate (va en un sentido y al final lo invierte, slide (va en un sentido y al final se para)}
HTML
LISTAS
LISTAS SIN NUMERAR Por ejemplo: Perro Gato Ratn
<ul> <li>..............</li> <li>..............</li> <li>..............</li> </ul> Atributos de <ul> Tipo de smbolo: type={disc, square, circle}
LISTA NUMERADA Por ejemplo: 1. Perro 2. Gato 3. Ratn <ol> <li>..............</li> <li>..............</li> <li>..............</li> </ol> Atributos Tipo de numeracin: type={1, A, a, I, i} Comienzo: start=2 . Si se hubiese elegido type=A, empezara por B.
HTML
GRFICOS
<img src=NombreGrfico.xxx/> Atributos Alineacin: Anchura: Altura: Texto alternativo, en terminales de texto: Marco: Espacio vacio arriba y abajo: Espacio vaco derecha e izquierda: align={left, right} width=100 heiht=100 alt=Texto border=3 (Sin marco, border=0) vspace=4 hspace=4
Si se especifica la imagen alineada a la izquierda, el texto que se escribe a continuacin se visualizar a la derecha y viceversa. Si el grfico no est en la misma carpeta que la pgina, se debe especificar la ruta relativa de l sobre la misma.
HTML
10
ENLACES INTERNOS
<a href=NombreDocumento.htm> Frase del enlace</a> Si el documento no est en la misma carpeta que aquel desde el que se le reclama, se debe especificar la ruta relativa respecto a l ( con / y .. para pasar a carpetas de nivel superior).
ENLACES EXTERNOS
<a href=http://www......> Frase del enlace </a> ENLACES A POSICIONES DENTRO DEL DOCUMENTO Para poner la marca en un punto concreto del documento: <a name=NombreMarca>.......</a> Para poner el enlace para ir a la marca anterior: <a href=#NombreMarca>Frase de enlace </a> Atributos de cualquier tipo de enlace Texto informativo que aparece cuando se deja quieto el ratn: title=Texto
La Frase del enlace no tiene porqu ser texto. Por ejemplo, se puede poner en su lugar una imagen que indique el enlace: <a href=...........><img src=........./></a>
HTML
11
TABLAS
<table> <tr><th>...</th><th></th></tr> <tr><td>...</td><td></td></td> : : <tr><td>...</td><td></td></td> </table> <table> delimita la tabla completa. <tr> delimita cada una de las filas de la tabla. <th> delimita el contenido de cada una de las cabeceras de las columnas de la tabla. <td> delimita el contenido de cada una de las celdas de la tabla. Atributos de <table> Grosor del borde en pixel: border=3 (Por defecto, es 0) Color del fondo: bgcolor=#rrggbb NombreColor rgb(r,g,b) Alineacin de la tabla: align={left, right, center} Anchura: width=200 70% Distacia entre las celdas: cellspacing=3 Distancia del contenido de cada celda a la pared de la misma: cellpadding=4
Atributos de <tr> Color del fondo: Alineacin horizontal: Alineacin vertical: bgcolor=#rrggbb NombreColor rgb(r,g,b) align={left, right, center} valign={top, middle, bottom}
Atributos de <th> (celda de encabezamiento) y <td> (celda de datos) Color del fondo: bgcolor=#rrggbb NombreColor rgb(r,g,b) Alineacin horizontal: align={left, right, center} Alineacin vertical: valign={top, middle, bottom} Anchura: width=100 50% Para extender la celda a dos columnas: colspan=2 Para extender la celda a dos filas: rowspan=2
HTML
12
OBJETOS PARA LA RECOGIDA DE DATOS

En realidad los objetos que se describen a continuacin no tienen utilidad si no es acompaados por instrucciones en Java Script u otros lenguajes que indiquen que hacer con los datos que contienen. Acabarn usndose como algo parecido a las variables, por eso a todos se les debe especificar el atributo name.
CUADROS DE TEXTO <input type=text /> Atributos Nombre: name=Nombre Tamao en caracteres: size=10 Num. mximo de caracteres: maxlength=5 Valor inicial: value=Valor
PASSWORD <input type=password /> Atributos Los mismos que los de los cuadros de texto.
HIDDEN (Cuadros de texto no visibles) <input type=hidden /> Atributos Los mismos que los de los cuadros de texto.
HTML
13
CUADROS DE TEXTO EN VARIAS LNEAS <textarea></textatea> Atributos Nombre: Nmero de filas: Nmero de columnas: name=Nombre rows=3 cols=4
CASILLAS DE VERIFICACIN <input type=checkbox /> Atributos Nombre: name=Nombre Valor que guarda si se marca: value=Valor Si queremos que aparezca marcada: checked
BOTONES DE RADIO <input type=radio /> Se tendrn que especificar tantos input como botones de radio se deseen y todos con el mismo valor en el atributo name. Atributos Nombre: Valor: Si est marcado: name=Nombre value=Valor checked
El objeto (el conjunto de botones, ya que todos tienen el mismo nombre) guardar el valor del botn de radio marcado.
HTML
14
LISTAS DESPLEGABLES <select> <option> Texto </option> <option> Texto </option> : : <option> Texto </option> </select> Atributos de <select> Nombre: name=Nombre Nmero de valores que se visualizan: size=4 (si est a 1, es una lista desplegable)
Atributos de <option> Valor: value=Valor Si est seleccionada: selected
El valor del atributo value es el que se guarda en la lista cuando se selecciona un elemento, que no tiene porqu ser el del texto que se visualiza. Por ejemplo, se pueden visualizar los nombres de los meses, pero guardarse su nmero cuando se selecciona uno de ellos.
BOTONES <input type=button /> Atributos Nombre: Etiqueta del botn: Funcin asociada: name=Nombre value=Valor onClick=Funcin
HTML
15
FORMULARIOS
<form> : : </form> Esta etiqueta podr contener cualquier otra etiqueta HTML, pero fundamentalmente aquellas etiquetas relacionadas con las recogida de datos como las que se han visto anteriormente. Esto es debido a que la principal funcin de los formularios es el envo de datos al servidor para ser procesados en el mismo. Atributos de <form> Nombre: name=Nombre Programa que procesar los datos: action=Ruta del programa del servidor o de una funcin de Java Mtodo de envo de datos: method={post, get}
La diferencia entre los mtodos get y post es la siguiente: En el mtodo get los datos del formulario son enviados al servidor en la propia URL, a continuacin del nombre del servidor y de la pgina especificada en action, separados por el signo ?. Los datos se mandan en forma de parejas: NombreControl = Valor y si son varios se separan por &. Por ejemplo: http://www.servidor.com/procesarFormulario.asp?nombre=Silvia&apellido=Rumeu En el mtodo post los valores se envan dentro de la propia cabecera del protocolo http.
HTML
16
ntimamente relacionados con los formularios existen dos controles similares en aspecto a los botones: BOTN SUBMIT <input type=submit /> Cuando se pulsa enva los datos del formulario al programa indicado en el atributo action. Atributos Etiqueta del botn: value=Valor
BOTN RESET <input type=reset /> Cuando se pulsa limpia los datos del formulario. Atributos Etiqueta del botn: value=Valor
HTML
17
FRAMES
Una ventana se puede dividir en varios partes o marcos que se denominan frames. La ventaja de estos frames es que cada uno puede mostrar una pgina diferente. Para dividir una ventana en frames, lo primero que hay que hacer es crear una pgina (sin <body>) el la que se indique el nmero, tamao y contenido de los frames. Vamos a crear una ventana que contenga dos frames, uno a la izquierda y otro a la derecha. En el de la izquierda se cargar una pgina ndice con una serie de enlaces, de nombre frames.PagIndice.htm y en la de la izquierda una framesPag1.htm. <html> <head> <title>Frames</title> </head> <frameset cols="100,*"> <frame src="framesIndice.htm" name="indice" /> <frame src="framesPag1.htm" name="paginas" /> </frameset> </html> En este cdigo el atributo cols de la etiqueta <frameset> indicara que se han creado dos marcos verticales y que el primero tiene un tamao de 100 pixel y el otro del resto. Si hubisemos utilizado el atributo rows, los marcos seran horizontales. En las etiquetas <frame> se indica el nombre de cada marco y la pgina que se va a cargar en ellos. La pgina framesIndice que contendr, por ejemplo, una serie de enlaces podra tener un cdigo como este: <html> <head> <title>Untitled</title> </head> <body> <h1 align="center">INDICE</h1> <a href="framesPag1.htm" target="paginas">Pgina 1</a> <br/> <a href="framesPag2.htm" target="paginas">Pgina 2</a> </body></html> En el que la nica novedad es que en los enlaces se debe especificar, mediante el atributo target en cual de los frames se visualizar esa pgina.
HTML
18

Ap HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ap HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML (HyperText Markup Language)

ESTRUCTURA DE UN DOCUMENTO HTML

OBJETOS PARA LA RECOGIDA DE DATOS

Atributos de <option> Valor: value=Valor Si est seleccionada: selected

Você também pode gostar