Professional Documents
Culture Documents
Valor
20 %
20%
15%
15%
5%
2.1 INTRODUCCIN.
HTML : (Hiper Text Mark Up
Language)
HTML es el lenguaje de marcado estndar
utilizado para crear pginas web y sus
elementos forman los bloques de
construccin
de todos
los sitios
web.
HTML4 : Es el lenguaje
de publicacin
de la World
Wide Web. Adems del texto, multimedia y
funciones de hipervnculo de las versiones anteriores de HTML (HTML 3.2 [HTML32] y HTML 2.0
[RFC1866]), HTML 4 es compatible con ms de opciones multimedia, lenguajes de script, hojas de
estilo, mejores instalaciones de impresin y documentos que sean ms accesibles a los usuarios con
discapacidad. HTML 4 tambin tiene grandes pasos hacia la internacionalizacin de los documentos,
con el objetivo de hacer la Web realmente todo el mundo.
HTML5 : Especifica dos variantes de sintaxis para HTML: una clsica, HTML (text/html), conocida
comoHTML5, y una varianteXHTMLconocida como sintaxisXHTML5que deber servirse con sintaxis
XML. La versin definitiva de la quinta revisin del estndar se public en octubre de 2014
2.1 INTRODUCCIN.
Marcas
Las marcas delimitan elementos de un documento como cabeceras, prrafos,
etc y son utilizadas para dar un tratamiento diferente al texto que se
encuentre entre las marcas.
2.1 INTRODUCCIN.
Atributos de las marcas
Algunas marcas pueden admitir atributos, pudiendo tener cada uno de estos
atributos un valor. Este valor ira entre comillas (") si dicho valor es
alfanumrico.
<marca atributo1=numerico atributo2="alfanumetrico">
Ejemplo:
2.1 INTRODUCCIN.
Atributos de las marcas
Algunas marcas pueden admitir atributos, pudiendo tener cada uno de estos
atributos un valor. Este valor ira entre comillas (") si dicho valor es
alfanumrico.
<marca atributo1=numerico atributo2="alfanumetrico">
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="estilos.css" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="alternate" title="Pozolera RSS"
type="application/rss+xml" href="/feed.rss" />
</head>
<body>
<header>
<h1>Mi sitio web</h1>
<p>Mi sitio web creado en html5</p>
</header>
<section>
<article>
<h2>Titilo de contenido<h2>
<p> Contenido (ademas de imagenes, citas,
videos etc.) </p>
</article>
</section>
<aside>
<h3>Titulo de contenido</h3>
<p>contenido</p>
</aside>
<footer>
Creado por mi el 2011
</footer>
</body>
</html>
Cuerpo
El resto del documento residir
entre las marcas <BODY> y
</BODY>. Esta es la estructura
mnima que debe poseer todo
documento HTML:
<BODY>
Documento...
</BODY></HTLM>
A continuacin describiremos
algunos elementos que pueden
aparecer dentro del cuerpo.
LENGUAJE HTML
SEPARADORES DE BLOQUES
<P> (Separador de prrafos, sus atributos son left, right, center).
<BR> (Salto de lnea).
<BLOCKQUOTE> (Prrafos Tabulados).
<HR> (Lnea Horizontal, atributos: noshade, width, size, align).
<PRE> (Texto preformateado).
<CENTER> (Centrado de bloques)
LENGUAJE HTML
Fondos y colores de texto
Un cierto nmero de atributos de la marca BODY permiten controlar el
color del fondo de la ventana del browser, el color de los caracteres del
texto, y finalmente el color de los enlaces:
< BODY atributo1 atributo2 atributo3 ... atributoN >
El atributo BGCOLOR
Este atributo permite escoger un color para el fondo de la pgina
<BODY BGCOLORS="#rrggbb"> donde "rr" "gg" y "bb" son valores hexadecimales
comprendidos entre 00 y FF que especifican el grado de saturacin de los colores rojo,
verde y azul.
El atributo BACKGROUND
Este atributo especifica una imagen residente en el servidor la cual se utilizar como
fondo de pgina.
<BODY BACKGROUND="fichero_grfico.gif>
LENGUAJE HTML
Fondos y colores de texto
El atributo TEXT
Permite controlar el color del texto estndar, es decir, todo texto que no especifique un enlace.
<BODY TEXT="#rrggbb">
Los atributos LINK, VLINK y ALINK
Controlan el color de los enlaces:
LINK color del enlace que an no ha sido visitado.<BODY LINK="#rrggbb">
ALINK color muy fugaz que aparece cuando se hace clic sobre el enlace <BODY
ALINK="#rrggbb">
VLINK es el color de un enlace que ya ha sido visitado <BODY VLINK="#rrggbb">
tipo
tipo
tipo
tipo
tipo
tipo
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
tipo
tipo
tipo
tipo
tipo
tipo
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6> :
Atributo face
Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y
de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con la
fuente que utilizan.
ACTIVIDAD 1: FORMATO
Elementos bsicos del lenguaje de marcas, tales como: texto,
vnculos, listas, tablas.
Practica: Formato
(practica_1_1_formato_texto.html)
Extra: Agregar al menos tres prrafos de texto con tipos distintos de estilo,
colores, tipos de letra, alineacin etc.
<table border="3px"
bordercolor="#0099FF">
<tr>
<td>Borde</td>
<td>3 pixels</td>
</tr>
</table>
(practica_1_2_tablas_y_listas.html)
<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
<ol>
<li value="20">Este ser el nmero 20. </li>
<li>Este ser el 21. </li>
<li> Este ser el 22. Y as sucesivamente. </li>
</ol>
4. Objetos
Ejemplos de insercin de objetos
Insertar una pgina web
Se puede insertar una pgina web en una pgina web mediante la etiqueta<object>, como
muestra el siguiente ejemplo.
<object type="text/html"
data=objeto_pagina.html"
style="width: 400px; height:200px;" >
ERROR (no puede mostrarse el objeto)
</object>
Deber crear un archivo de html llamado objeto_pagina.html para mandarlo llamar
4. Objetos
<object type="text/html"
data="http://maps.google.es/maps?
f=q&source=s_q&
hl=es&geocode=&q=ies+abastos&
ie=UTF8&cid=11271517402525668942&
s=AARTsJqO2-JJ63RN_BaPYqsXhy19-WrrDw&
ll=39.477148,-0.382204&spn=0.023188,0.036478&
z=14&iwloc=A&output=embed"
style="width: 425px; height:350px;" >
ERROR (no puede mostrarse el objeto)
</object>
<iframe width="425" height="350"
src="http://maps.google.es/maps?f=q&source=s_q&
hl=es&geocode=&q=ies+abastos&
ie=UTF8&cid=11271517402525668942&
s=AARTsJqO2-JJ63RN_BaPYqsXhy19-WrrDw&
ll=39.477148,-0.382204&spn=0.023188,0.036478&
z=14&iwloc=A&output=embed">
</iframe>
4. Objetos
Insertar un archivo PDF
Se puede insertar un archivo PDF en cualquier pgina web, como muestra el siguiente
ejemplo. Para insertar otro archivo PDF habra que indicar la URI del archivo mediante el
atributodata(en el ejemplo, es simplementeejemplo.pdf).
<object
type="application/pdf"
data="pdf/programacion_web.pdf"
style="width: 400px; height: 550px;" >
ERROR (no puede mostrarse el objeto)
</object>
4. Objetos
Insertar un vdeo de YouTube
Los vdeos de YouTube estn en formato Flash, por lo que se pueden insertar en una pgina
web mediante la etiqueta<object>, como muestra el siguiente ejemplo. Para insertar otro
vdeo habra que sustituir el cdigo del vdeo en el atributodata(en el ejemplo, el cdigo del
vdeo esvZV-t3KzTpw).
<iframe class="youtube-player" type="text/html" width="340"
height="200" src="http://www.youtube.com/embed/ikp9TNCGNDU"
frameborder="0"></iframe>
ACTIVIDAD 3: OBJETOS
Elementos bsicos del lenguaje de marcas, tales como: texto, vnculos, listas, tablas.
Practica: Tablas y listas
(practica_1_3_objetos.html)
ACTIVIDAD 3: OBJETOS
2.7 FORMULARIOS.
Los formularios interactivos permiten a los
autores de pginas Web poner elementos
interactivos en sus pginas, por ejemplo, para
recibir mensajes de sus lectores, de forma
similar a las cartas de respuestas que se
encuentra en algunas revistas.
El lector escribe la informacin rellenando
campos o haciendo clic sobre botones, y luego
presiona un botn de envo para enviarla a una
direccinURLque se suele dirigir a una
direccin de correo electrnico o a un script
dinmico Web como PHP, ASP o CGI.
2.7 FORMULARIOS.
La etiqueta FORM
Los formularios estn delimitados con la etiqueta<FORM> ... </FORM>, que permite reunir
varios elementos de formulario, como botones y casillas de texto y que debe poseer los
siguientes atributos:
METHODindica cmo se enviarn las respuestas
"POST" es el valor que enva los datos al agente de procesamiento almacenndolos en el cuerpo
del formulario, en tanto que "GET" enva los datos agregndolos a la direccin URL y
separndolos de la direccin con un signo de interrogacin (para aprender ms sobre los mtodos
POST y GET.
ACTIONindica la direccin a la que se enviar la informacin (un script CGI o direccin de correo
electrnico (mailto:direccin_de_correo_e@equipo))
Un atributo opcional de la etiqueta FORM esENCTYPE, que especifica cmo se codifican los datos
del formulario. De cualquier forma, esto no necesita especificarse, ya que el valor predeterminado
(application/x-www-form-urlencoded) es el nico valor vlido. El atributo opcionalACCEPTse usa
para establecertipos MIMEpara los datos que el formulario puede enviar.
2.7 FORMULARIOS.
La etiqueta FORM
Esta es la sintaxis para la etiqueta FORM:
<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ...
</FORM>
Aqu hay algunos ejemplos de las etiquetas FORM:
<FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net">
<FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi">
2.7 FORMULARIOS.
Dentro de la etiqueta FORM
2.7 FORMULARIOS.
Envo de datos
Cuando se enva un formulario (haciendo clic en el botn de envo), los datos del
formulario se envan a un script CGI bajo la forma depares nombre/valor, es decir
conjuntos de datos representados por el nombre del elemento formulario, un signo
igual ("=") y luego el valor asociado. Estos pares nombre/valor se separan unos de
otros mediante el smbolo de unin ("&"). Por lo tanto, los datos que se envan al
script se vern as:
campo1=valor1&field2;=valor2&field3;=valor3
Con el mtodo GET (enviar los datos mediante una direccinURL), la URL ser una
cadena como la siguiente:
http://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2
2.7 FORMULARIOS.
La etiqueta INPUT
La etiquetaINPUTes una etiqueta esencial para los formularios, ya que se usa para
crear muchos elementos interactivos. La sintaxis de esta etiqueta es la siguiente:
<INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre
de elemento">El atributonamees esencial, ya que permite al script CGI reconocer
qu campo est asociado con un par nombre/valor, lo que significa que el nombre
del campo estar seguido de un signo igual ("=") seguido de un valor que el
usuario introdujo, o si el usuario no introdujo ningn valor, por el valor
predeterminado de la etiquetavalue.
2.7 FORMULARIOS.
La etiqueta INPUT
2.7 FORMULARIOS.
La etiqueta INPUT
image: Unbotn de envo personalizadoque aparece cuando se ubica una
imagen en la ubicacin definida por el atributoSRC.
password: Unacasilla de textodonde los caracteres escritos aparecen como
asteriscos para camuflar el texto de entrada.
radio: Unbotnque permite al usuario elegir entre varias opciones. Cada uno
de estos botones debe tener el mismo atributoname. El par nombre/valor del
botn radio seleccionado se enviar al CGI. Al aplicar el atributocheckedpara
uno de estos botones se definir como seleccionado de forma predeterminada.
2.7 FORMULARIOS.
La etiqueta INPUT
reset: Unbotn de restauracinpara quitar todos los elementos en el
formulario y restablecer sus valores predeterminados.
submit: Unbotn de envopara enviar el formulario. El texto en el botn puede
definirse usando el atributovalue.
text: Unacasilla de textopara escribir una lnea de texto. El tamao de la casilla
puede definirse usando el atributosizey la extensin mxima del texto con el
atributomaxlength.
2.7 FORMULARIOS.
La etiqueta TEXTAREA
2.7 FORMULARIOS.
La
etiqueta SELECT
La etiquetaSELECTsirve para crear una lista desplegable de elementos
(especificados por las etiquetasOPTIONdentro de ella). Los atributos de esta
etiqueta son:
name: name: representa el nombre asociado con la casilla de texto, que permite
su identificacin en el par nombre/valor.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el nmero de lneas de la lista (este valor puede ser ms grande
que el nmero de elementos reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista
2.7 FORMULARIOS.
La etiqueta SELECT
La etiquetaSELECTsirve para crear una lista desplegable de elementos
(especificados por las etiquetasOPTIONdentro de ella). Los atributos de esta
etiqueta son:
name: name: representa el nombre asociado con la casilla de texto, que permite
su identificacin en el par nombre/valor.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el nmero de lneas de la lista (este valor puede ser ms grande
que el nmero de elementos reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista
ACTIVIDAD 4 FORMULARIOS
<TR>
4. Formularios
<TD>Nombre</TD>
<TD>
<INPUT type=text name="nombre">
</TD>
</TR>
<TR>
<TD>Gnero</TD>
<TD>
Masculino: <INPUT type=radio name="gnero" value="M">
<br>Femenino: <INPUT type=radio name="gnero" value="F">
</TD>
</TR>
<TR>
<TD>Ocupacin</TD>
<TD>
<SELECT name="ocupacin">
<OPTION VALUE="profesor">Profesor</OPTION>
<OPTION VALUE="estudiante">Estudiante</OPTION>
<OPTION VALUE="ingeniero">Ingeniero</OPTION>
<OPTION VALUE="jubilado">Jubilado</OPTION>
<OPTION VALUE="otro">Otro</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Comentarios</TD>
<TD>
<TEXTAREA rows="3" name="comentarios">
Escriba aqu sus comentarios</TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
Enviar <INPUT type="submit" value="Enviar">
</TD>
</TR>
</TABLE>
</FORM>
ACTIVIDAD 4 FORMULARIOS
2.7 FORMULARIOS.
Atributos de formulario y entradas
Enviar
2.7 FORMULARIOS.
Enviar
2.7 FORMULARIOS.
Enviar