HTML, XML y CSS

2 HTML, XML Y CSS.
Conoce y aplica las

herramientas para
construir pginas
web, considerando la
interfaz grfica de
usuario, un lenguaje
de marcado y de
presentacin.
2 HTML, XML Y CSS.

2.1 Introduccin.
2.2 Estructura global de un documento Web.
2.3 Elementos bsicos: texto, vnculos, listas, tablas,
objetos, imgenes y aplicaciones.
2.4 Formularios.
2.5 Lenguajes de presentacin en documentos Web.
2.6 Selectores.
2.7 Modelo de caja.
2 LENGUAJE DE MARCADO. ACTIVIDADES

Actividad
Examen terico
Proyecto Integrador
Prcticas HTML: de los elementos bsicos del
lenguaje de marcas, tales como: texto,
vnculos, listas, tablas, objetos y formulario.
Practicas XML
Proyecto individual
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.
El HTML es un lenguaje que basa su sintaxis en un elemento de base al

que llamamos etiqueta. La etiqueta presenta frecuentemente dos
partes: Una apertura de forma general Un cierre de tipo
...texto normal <marca> texto afectado por la marca </marca> resto del
texto... Un ejemplo podra ser resaltar un texto en negrita, para ello se emplea
la marca <B> y quedara de la siguiente forma: ...texto normal <B> texto en
negrita </B> resto del texto...
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:
<table width="50" height="70" border="20"> </table>

<a href="/home/default.html">
<img src="imagenes/foto_01.jpg" width="600" height="337" />
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:
<table width="50" height="70" border="20"> </table>

<a href="/home/default.html">
<img src="imagenes/foto_01.jpg" width="600" height="337" />
2.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO

WEB.

WEB.
<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>
<!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>

WEB.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Mi primer documento HTML</TITLE>
</HEAD>
<BODY>
<P>Hola mundo! </p>
</BODY>
</HTML>

WEB.
Cabecera
La cabecera se emplea para facilitar informacin acerca del documento y est delimitada por
<HEAD> prlogo </HEAD>.
Dentro de la cabecera podemos destacar el ttulo que indica el nombre del documento <TITLE>
</TITLE>.
<HTML>
<HEAD>
<TITLE> Bienvenido a nuestra gua rpida </TITLE>
</HEAD>
Cuerpo del documento
</HTML>

WEB
<!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.0//EN">
<html>
<head>
<title> MI PRIMERA PAGINA </title>
<META
<META
<META
<META
<META
name="keywords" content="HTML,realizacin pginas web">

name="descripcion" content="Mi primera portada ">
name="GENERATOR" content="BOC DE NOTAS Win95">
name="author" content="Nombre Apellidos">
HTTP-EQUIV="Refresh" content="5";url=pippo.htm>
<link rel="stylesheet" href="css/style.css">

<script src="js/jquery.js"></script>
</head>
<body>
</body>
</html>

WEB.
http://www.racotecnic.com/tutorials/2011/HTML5/
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.

WEB.
Encabezado
Los encabezados se emplean para dividir los documentos en secciones o mas concretamente para marcar los ttulos de
esas secciones. Las marcas son del tipo <H#> ttulo </H#>, donde # puede ser un nmero cualquiera entre 1 y 6.
<H1>Tamao mayor</H1> Tamao menor
<H6>Tamao menor</H6> Tamao mayor
2.3 TIPOS DE DATOS BSICOS.

DOCTYPE: Proporciona informacin al servidor de web anfitrin de la pgina
entregando los datos necesarios para la
Comunicacin entre el navegador y el servidor. (no es Obligatorio) Su forma
estndar es la siguiente:
HTML PUBLIC: El documento es pblico.
IETF: El tipo de HTML pblico est gestionado por la Internet Engineering Task
Force.
DTD HTML 4.0: La versin de HTML soportada es la 4.0.
EN: El idioma del documento es el ingls.

META: Son cadenas de cdigos que son las primeras que leen Los buscadores.
KEYWORDS: Las palabras clave son los trminos que, de manera resumida
describen el contenido de una pgina web.
AUTHOR: Autor de la pgina.
DESCRIPCION: Ttulo que aparecer tras la bsqueda.
GENERATOR: Nombre del editor que se ha generado el Documento.
NOINDEX: Es cuando se desea que una pgina NO sea Indicizada en los motores
de bsqueda.
REFRESH: Refrescar la pgina cada cierto tiempo.
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">

<html>
<head> <title> MI PRIMERA PAGINA </title>
<META name="keywords" content="HTML, realizacin pginas web">
<META name="descripcion" content="Mi primera portada ">
<META name="GENERATOR" content="BOC DE NOTAS Win95">
<META name="author" content="Nombre Apellidos">
<META HTTP-EQUIV="Refresh" content="5";url=pippo.htm>
</head>
<body bgcolor="#AEAEFF">
Tipo de letra <B>negrita</B>, letra <I>cursiva</I> y letra <TT>courier</TT>.
<CENTER>Este texto est centrado</CENTER>
<P Align="left">Este texto est alineado a la izquierda</P>
<P Align="center">Este texto est centrado</P>
<P Align="right">Este texto est alineado a la derecha</P>
<font face="Arial size=3 color=#008000> texto... <font>

<h1>Cabecera
<h2>Cabecera
<h3>Cabecera
<h4>Cabecera
<h5>Cabecera
<h6>Cabecera
tipo
tipo
tipo
tipo
tipo
tipo
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
Internet<img src="imagenes/internet1.jpg" width="98" height="122">

<p> separador</p>
<ol>
<li>Fichero de imagen</li>
<li>Fichero de sonido</li>
<li>Fichero de video</li>
<ol>
</body>
</html>
2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

TABLAS, OBJETOS, IMGENES Y APLICACIONES.
1. Formato Texto
El formateo del texto, o sea, el formato del texto, son una serie de etiquetas que
escribimos en html rodeando la palabra o el texto y que transforman ese texto en el
formato que nosotros le hemos querido dar.
Negrita
Existen dos etiquetas que harn que nuestro texto se convierta en negrita. La utilizacin de
cualquiera de ellas es indiferente. Puedes usar la que prefieras.
La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aqu va un ejemplo:
Este palabra la vamos a poner en <b>negrita</b> y esta otra
<strong>tambin</strong>
Este palabra la vamos a poner ennegritay esta otratambin

Texto
Cursiva: Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por
supuesto cerrarla con la etiqueta </i>).
Tambin podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es
indiferente el uso de una u otra. Aqu os dejo un ejemplo:
Este palabra la vamos a poner en <i>cursiva</i> y esta otra
<em>tambin</em>
Este palabra la vamos a poner encursivay esta otratambin
2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS,

LISTAS, TABLAS, OBJETOS, IMGENES Y
APLICACIONES.
Texto
Subrayado: Si queremos que la palabra o el texto quede subrayado, deberemos
rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea,
</u>. As subrayaramos una frase importante:
<u>As subrayaramos una frase importante</u>
As subrayaramos una frase importante

Texto Cabeceras
<h1>Cabecera
<h2>Cabecera
<h3>Cabecera
<h4>Cabecera
<h5>Cabecera
<h6>Cabecera
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.
2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS, TABLA

OBJETOS, IMGENES Y APLICACIONES.
Color, tipo de letra y tamao
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.
<font face="Comic Sans MS,arial,verdana">Este texto tiene otra
tipografa</font>
face="Comic Sans MS,arial,verdana"

Atributo size
Define el tamao de la letra. Este tamao puede ser absoluto o relativo.Si hablamos en
trminos absolutos, existen 7 niveles de tamao distintos numerados de 1 a 7 por orden
creciente. Elegiremos por tanto un valor size="1" para la letra ms pequea o size="7"
para la ms grande.
<font size=4>Este texto es tamao 4</font>
<font size=12>Este texto es tamao 12</font>

Atributo color
El color del texto puede ser definido mediante el atributo color. Cada color es a su vez
definido por un nmero hexadecimal que esta compuesto a su vez de tres partes. Cada
una de estas partes representa la contribucin del rojo, verde y azul al color en cuestion.
<font color="red">Este texto est en rojo</font>
<font color="#FF0000"> Este texto est en rojo </font>

2. Formato Parrafos
Para indicarle al navegador que queremos poner ese texto en un prrafo, debemos
escribirlo entre las etiquetas <p> y su cierre </p>.
As el texto quedar dentro de un prrafo, separado por un espacio en blanco por encima
y uno por abajo.
El texto del prrafo lo puedes alinear utilizando la etiqueta align utilizando los
parmetros center (para alinearlo al centro), right (para alinearlo a la derecha), left
(para alinearlo a la izquierda) y justify (para justificar el texto).
Un ejemplo de esta etiqueta con sus respectivos parmetros es el siguiente:
<p align="center">Este texto se alinear al centro</p>

<p align="right">Este texto se alinear a la derecha</p>
<p align="left">Este texto se alinear a la izquierda</p>

Prrafos saltos de lnea
Existen dos etiquetas para indicar que queremos hacer un salto de lnea normal. Son las
etiquetas <br> y <br/> ambas son interpretadas igual por el navegador. Esta etiqueta no
hace falta abrirla y cerrarla, slo con escribirla el navegador ya la interpreta.
<p > Este texto estar en la primera fila<br/>

Este texto estar en el centro <br/>
Este texto estara a lo ultimo</p>
ACTIVIDAD 1: FORMATO
Elementos bsicos del lenguaje de marcas, tales como: texto,
vnculos, listas, tablas.
Practica: Formato
(practica_1_1_formato_texto.html)
Indicaciones: Elaborar un documento HTML en que se incluya:

Encabezados (h1 h7)
Texto tamao (1-4)
Estilos de texto (normal, negrita, subrayado, cursiva, subndice, superndice)
Prrafos alineados ( Justificado, Centro, derecha e izquierda)
Extra: Agregar al menos tres prrafos de texto con tipos distintos de estilo,
colores, tipos de letra, alineacin etc.
ACTIVIDAD 1: FORMATO- EJEMPLO
ACTIVIDAD 1: FORMATO- EJEMPLO

2. Tablas
Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas
dos etiquetas definiremos la tabla, las celdas que queremos, las columnas y las
caractersticas de cada uno de estos parmetros. Pero vamos a empezar
explicndote la etiqueta <table>.
Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero
podemos predefinir caractersticas de esa tabla? Por supuesto que s. Una tabla
admite muchos parmetros. Nosotros vamos a explicarte los principales.

La tabla: <table>
Como ya ocurre con la etiqueta body, a una tabla tambin lo podemos definir el
fondo de la misma. Esto lo podemos conseguir con el parmetro "bgcolor", que nos
pondr un color de fondo, o "background" para poner una imagen de fondo.
Recuerda que si la imagen es ms pequea que la tabla, sta se repetir tanto a lo
ancho como a lo largo.
<table width="100%" border="1" bordercolor="#0000FF" cellspacing="0"
cellpadding="0">
<tr>
<td>holaa</td>
<td>holaa2</td>
</tr>
</table>
2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS

Tablas
Las filas: <tr>
Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con su
correspondiente cierre </tr>. El contenido de las columnas que estn dentro de la fila lo
podemos alnear tanto horizontal como verticalmente.
Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba de la
celda ("top"), en el centro ("middle") o debajo ("bottom").
Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributo podremos
alinear el contenido de las celdas en el centro ("center"), a la izquierda ("left"), a la derecha
("right") o justificado ("justify").
Por supuesto a las filas tambin les podemos definir el color de fondo ("bgcolor") y el color del
borde ("bordercolor").

Tablas
Las celdas <td>
Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td>
y su correspondiente cierre </td>.
Al igual que en las filas, en las celdas podemos definir el la alineacin del contenido que
est dentro con los atributos "valign" y "align".
Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas
columnas como indiquemos en l. Para agrupar celdas utilizaramos el atributo "colspan"
y para agrupar celdas el atributo "rowspan".
Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td
colspan="2"></td>. Y para agrupar dos filas, la indicacin sera la siguiente: <td
rowspan= "2"></td>.

Tablas
ACTIVIDAD 2: TABLAS Y LISTAS

EJEMPLO
<table border="1px">
<tr>
<td>Nombre</td>
<td>Apellido</td>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
<table border="3px"
bordercolor="#0099FF">
<tr>
<td>Borde</td>
<td>3 pixels</td>
</tr>
</table>

EJEMPLO
<table border="1px"
bordercolor="#333333"
cellpadding="20px">
<tr>
<th bgcolor="#CCCCCC">Nombre</th>
<th bgcolor="#CCCCCC">Apellido</th>
</tr>
<tr>
<td>Pedro</td>
<td>Garcia</td>
</tr>
</table>
<table border="1px" cellspacing="15px"

bgcolor="#3399FF">
<tr>
<th bordercolor="#0033FF"
bgcolor="#ffffff">Nombre</th>
<th bordercolor="#0033FF"
bgcolor="#ffffff">Apellido</th>
</tr>
<tr>
<td bgcolor="#CCCCCC">Pedro</td>
<td bgcolor="#CCCCCC">Garcia</td>
</tr>
</table>

EJEMPLO

EJEMPLO

Elementos bsicos del lenguaje de marcas, tales como: texto,
vnculos, listas, tablas.
Practica: Tablas y listas
(practica_1_2_tablas_y_listas.html)
Indicaciones: Elaborar un documento HTML en que se incluya:

Distintos formatos de tablas
Distintos formatos de listas
Extra: Agregar 2 tablas con formato de relleno, colores de fuentes y tipos de

letra distintos.
Ejemplos

3. Listas
Listas no ordenadas: <ul>Las listas no ordenadas van dentro de la etiqueta

<ul> y de su cierre </ul>. Cada punto que queramos aadir a la lista, lo haremos
dentro de la etiqueta <li> y su cierre.
<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>

Listas ordenadas: <ol>
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada
punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>.
Pero al ser listas ordenadas los smbolos sern nmeros y stos se irn generando
automticamente por orden, conforme escribamos nuevos puntos.
En las listas ordenadas podemos hacer que el primer punto comience con el
nmero que nosotros queramos. Lo conseguiremos gracias al atributo value. Los
siguientes puntos que escribamos se generarn automticamente por orden,
partiendo de ese nmero.
<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>

EJEMPLO

EJEMPLO

4. Objetos
Insertar objetos:<object>y<param>
La etiqueta<object>permite insertar cualquier tipo de documentos (no solamente de
texto) dentro de un documento html. Para poder mostrar esos archivos, el navegador
suele necesitar plug-ins. Algunos tipos de documentos necesitan informacin adicional
que se proporciona mediante la etiqueta<param>.
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.

4. Objetos
<iframe src="ejemplo_iframe.html">
</iframe>

4. 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

Insertar un mapa de google
<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;" >
</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;" >
</object>
2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS,

LISTAS, TABLAS, OBJETOS, IMGENES Y
APLICACIONES.
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)
Indicaciones: Elaborar un documento HTML en que se incluya los siguientes objetos:

1. Embeber una pagina con Iframe.
2. Mapa de google con Iframe y objet
3. Embeber un archivo pdf
4. Embeber un video de YouTube
Extra: Agregar 2 objetos ms.
Ejemplos
Reproductor de audio
Reproductor de video ( diferente a YouTube)
ACTIVIDAD 3: OBJETOS

6. Imgenes
Atributos de IMG
Los atributos de la imagen pueden ser los siguientes:
ALT="Texto que aparece al situar el cursor sobre la imagen
Tambin muestra este mismo texto en caso de que el navegador no cargue la imagen.
ALIGN= Nos indica la posicin de la imagen respecto del texto. Despus del signo igual, pueden ir los valores: TOP ,
MIDDLE, BOTTOM, LEFT y RIGHT .
WIDTH=80, HEIGTH=100: Indican la anchura y altura de la imagen en pxels, en este caso 80x100 pxels.
BORDER=2 Aade un borde, a modo de marco, a la imagen. En este caso de 2 pxels.

5. Imgenes
Anchura del borde [border-width]
Color del borde [border-color]

La propiedad border-color define el color del borde. Los valores de esta propiedad son los valores de color
normales, por ejemplo, "#123456" (en notacin hexadecimal), "rgb(123,123,123)" (en notacin RGB) o
"yellow" (por nombre del color).

5. Imgenes
Estilo de borde [border-style]
Se puede elegir entre diferentes estilos de borde. Ms abajo se
muestran 8 estilos de borde segn los interpreta Internet Explorer 5.5.
Todos los ejemplos se muestran con el valor del color a "oro" y el
valor de la anchura a "thick", pero se pueden mostrar, por supuesto,
en otros colores y grosores
<img src="imagenes/paisaje4.jpg" width="259"
height="194" border="8" style="border-color:#900;
border-style:dashed" />

5. Imgenes
<img src="paisaje4.jpg" width="259" height="194" border="8" aling="bottom"
vspace="10" hspace="10" alt="la playa" />
<br />
<img src="paisaje2.jpg" width="259" height="194" border="8" vspace="10"
hspace="10" alt="Cascada" style="border-color:#9C0; border-style:dashed;
aling:middle" />
<br />
<img src="paisaje1.jpg" width="489" height="322" border="8" aling="bottom"
vspace="10" hspace="10" alt="el puente" style="border-color:#09F; borderstyle:groove" />
<div align="center"><img src="paisaje4.jpg"></div>
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
La etiquetaFORMacta como una especie de contenedor para almacenar

elementos que permiten al usuario seleccionar o introducir datos. Todos los datos
se enviarn a la direccin URL indicada en el atributoACTIONde la etiquetaFORM,
por el mtodo indicado en el atributoMETHOD.
Se puede insertar cualquier elemento HTML en una etiquetaFORM(como texto,
botones, tablas y enlaces), pero los elementos interactivos son los ms
interesantes. Estos elementos interactivos son:
La etiquetaINPUT: Todos los botones y casillas de texto
La etiquetaTEXTAREA: una casilla de texto
La etiquetaSELECT: una lista de opciones mltiples
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
El atributotypese usa para especificar qu tipo de elemento se representa con la etiquetaINPUT.

Estos son los valores posibles:
checkbox: Las casillas de eleccin pueden adoptar uno de dos estados: checked (seleccionado) o
unchecked (no seleccionado). Cuando la casilla es seleccionada, el par nombre/valor se enva al
CGI.
hidden: Este campo, que el navegador no muestra, es para definir una configuracin nica que se
enviar al CGI como par nombre/valor.
file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se
enviar con el formulario. Los tipos de archivo que pueden ser enviados deben especificarse
utilizando el atributoACCEPTde la etiquetaFORM.
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
La etiquetaTEXTAREAse usa para definir un cuadro de texto ms grande que la

lnea simple propuesta por la etiquetaINPUT. Esta etiqueta tiene los siguientes
atributos:
cols: representa el nmero de caracteres que puede contener un lnea
rows: representa el nmero de lneas
name: representa el nombre asociado con el cuadro de texto, que permite su
identificacin en el par nombre/valor.
readonly: impide que el usuario modifique el texto predeterminado en el campo
value: representa el valor predeterminado que se enviar al script si el usuario
no ha escrito nada en el cuadro de texto
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
<FORM method=post action="formulario.html">

Registro de un usuario
<TABLE width="346" BORDER=0>
<TR>
<TD width="140">Apellido</TD>
<TD width="196">
<INPUT type=text name="apellido">
</TD>
</TR>
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

HTML, XML y CSS

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML, XML y CSS

Hochgeladen von

Copyright:

Verfügbare Formate

2 HTML, XML Y CSS.

Conoce y aplica las

2 HTML, XML Y CSS.

2 LENGUAJE DE MARCADO. ACTIVIDADES

El HTML es un lenguaje que basa su sintaxis en un elemento de base al

<table width="50" height="70" border="20"> </table>

<table width="50" height="70" border="20"> </table>

2.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO

2.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO

<link rel="stylesheet" href="estilos.css" />

2.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO

2.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO

2.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO

name="keywords" content="HTML,realizacin pginas web">

<link rel="stylesheet" href="css/style.css">

2.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO

2.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO

2.3 TIPOS DE DATOS BSICOS.

2.3 TIPOS DE DATOS BSICOS.

2.3 TIPOS DE DATOS BSICOS.

2.3 TIPOS DE DATOS BSICOS.

Internet<img src="imagenes/internet1.jpg" width="98" height="122">

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS,

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS, TABLA

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS, TABLA

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS, TABLA

<p align="center">Este texto se alinear al centro</p>

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS, TABLA

<p > Este texto estar en la primera fila<br/>

Indicaciones: Elaborar un documento HTML en que se incluya:

ACTIVIDAD 1: FORMATO- EJEMPLO

ACTIVIDAD 1: FORMATO- EJEMPLO

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

ACTIVIDAD 2: TABLAS Y LISTAS

ACTIVIDAD 2: TABLAS Y LISTAS

<table border="1px" cellspacing="15px"

ACTIVIDAD 2: TABLAS Y LISTAS

ACTIVIDAD 2: TABLAS Y LISTAS

ACTIVIDAD 2: TABLAS Y LISTAS

Indicaciones: Elaborar un documento HTML en que se incluya:

Extra: Agregar 2 tablas con formato de relleno, colores de fuentes y tipos de

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

Listas no ordenadas: <ul>Las listas no ordenadas van dentro de la etiqueta

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

ACTIVIDAD 2: TABLAS Y LISTAS

ACTIVIDAD 2: TABLAS Y LISTAS

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

Ejemplos de insercin de objetos

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS,

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS,

Indicaciones: Elaborar un documento HTML en que se incluya los siguientes objetos:

2.5 ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS