Ud 2htmlyxhtml

UD 2.
HTML
Contenidos
Lenguaje HTML. Etiquetas y atributos Lenguaje XHTML
Lenguaje de marcas
No son lenguajes de programacin
Son lenguajes de descripcin de informacin Permite codificar un documento donde, adems del texto se incorporan etiquetas, marcas o anotaciones con informacin adicional relativa a la estructura del texto, su presentacin, o informacin del propio documento.
Lenguaje HTML (Hiper Text Markup Language

Lenguaje de Marcado de Hipertexto)
Permite crear pginas web interpretadas (y visualizadas) navegadores web.
que por
son los
Un documento HTML es un archivo de texto compatible con cualquier plataforma o sistema operativo que disponga de un navegador. Es fcil obtener el cdigo fuente de cualquier documento HTML.
Versiones de HTML
HTML 2.0, HTML 3.2, HTML 4.0, HTML 4.01 y actualmente HTML 5.0. El HTML ya est anticuado a favor del XHTML. Las ltimas versiones de HTML 4.01 son:
HTML 4.01 Strict: Slo etiquetas HTML 4.01. Modo recomendado por la W3C ya que es compatible con CSS y puede ser interpretado correctamente por todos los navegadores. HTML 4.01 Transitional: Incluye todos los elementos de HTML 4 Strict adems de otros elementos obsoletos. HTML 4.01 Frameset: Incluye lo del transitional y soporte para frames.
Hasta la versin 4.01 se basan en SGML (Standard Generalized Markup Language), que utiliza DTD (Document Type Definition) para definir la estructura y el contenido de un tipo de documento. HTML 5. Permite modernizar la web y el desarrollo de aplicaciones web parecidas a las de escritorio.
HTML 5
Etiquetas con codecs para mostrar los contenidos multimedia. Etiquetas para manejar grandes conjuntos de datos. Mejoras en los formularios, con inclusin de nuevos tipos de datos y facilidades para validar el contenido sin Javascript. Visores de frmulas matemticas y grficos vectoriales. Funcionalidad para arrastrar objetos como imgenes (Drag & Drop)
HTML 5 = HTML 4 + XHTML + DOM (Document Object Model)
Normas de HTML
Los documentos HTML estructurados y organizados.
son
documentos
Los nombres de los elementos o etiquetas no son sensibles a maysculas o minsculas.

<HTML> es lo mismo que <hTmL> lo mismo que <html>
Los nombres de los atributos no son sensibles a maysculas o minsculas.

<Font SIZe=2> es lo mismo que <Font size=2> o
<Font Size=2>
Normas de HTML
Los valores de los atributos pueden ser sensibles a maysculas y minsculas dependiendo del servidor donde se ha guardado (linux s es sensible,
windows no)
<IMG SRC=nombredearchivo.gif> puede que no sea lo mismo que
<IMG SRC=NOMBREDEARCHIVO.GIF>
Los nombres de las etiquetas no deben contener espacios en blanco.

<IMG> no es lo mismo que <I M G>
Normas de HTML
Los valores de los atributos pueden contener espacios y caracteres no alfanumricos si van encerrados entre comillas.
<img src=casa.gif alt=mi casa particular>
<IMG SRC=foto2-casa.gif>
HTML asume cualquier nmero de espacios en blanco como un nico carcter de espacio en blanco. Los exploradores los ignoran a no ser que estn en una etiqueta <PRE> de preformateado especial.
Normas de HTML
Las etiquetas que encierran contenido se deben cerrar:

<h1> Contenido de la cabecera </h1>
Las etiquetas pueden anidarse.

<b><i> esto va en Negrita y cursiva </i></b>
Los exploradores omiten elementos desconocidos, tanto etiquetas como atributos.
Normas de HTML
Conviene poner las etiquetas en minsculas, pues XML y XHTML slo aceptan minsculas y as el cambio a XHTML ser muy fcil.
Las hojas de estilo en cascada o CSS(Cascading Style Sheets) se hacen en minsculas tambin.
Pondremos los atributos de las etiquetas entrecomillados aunque no sea obligatorio en HTML.
Los archivos HTML tienen la extensin .htm o .html Cuando se crea un sitio web, la primera pgina se suele llamar index.html
Estructura bsica de un documento HTML
Los documentos HTML estn delimitados por las etiquetas (tags) <html> </html>
Dentro del documento se distinguen dos partes: cabecera
(head) y cuerpo (body), delimitadas por <head></head> y

<body></body>
La cabecera contiene la identificacin e informacin sobre el documento, como el ttulo (<title></title>) que aparecer en la barra de ttulo del navegador.
El cuerpo contiene el contenido del documento que se

visualiza en pantalla.
Estructura bsica de un documento HTML

Tipo de documento DOCTYPE <html> <head> <title>Aqu va el ttulo de la pgina</title> </head> <body> Aqu va el resto de cdigo html </body> </html>
Grbalo en un fichero llamado Actividad1.html y visualzalo desde el navegador
Doctype o declaracin de tipo de documento

Asocia un documento SGML o XML con una definicin de tipo de documento (DTD) (descripcin de estructura y sintaxis de un documento XML o SGML)
Le dice al navegador qu especificacin de HTML o XHTML estamos usando.
Es la primera declaracin que va en una pgina web.
El doctype empieza con <!DOCTYPE (debe ser escrito en maysculas)

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 5
<!DOCTYPE html>

XHTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 4.01 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 4.01 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Prctica. Elaboracin de la primera pgina web

Crea una carpeta en tu disco para almacenar los archivos. Abre el bloc de notas y escribe el siguiente cdigo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Este es el ttulo </title> </head> <body> Este es el texto de la primera pgina web </body> </html>
Una vez hecho sto, se graba con el nombre primero.html y se visualiza con el navegador web haciendo doble clic sobre el archivo.
Y luego
Prueba si en verdad tu cdigo se ajusta al DTD que definiste en el DOCTYPE usando el validador de (X)HTML (http://validator.w3.org/) Este validador comprueba que tu pgina no tiene errores de gramtica y ortografa. o sea que cumple los estndares definidos por la W3C (World Wide Web Consortium)
Y adems
Cuando un navegador encuentra una pgina no valida (y sin DOCTYPE no lo es), se pone en un estado llamado quirks mode, este estado sirve para tratar de interpretar lo que tu HTML no valido quiso decir, pudindose volver ms lento, y verse de distinto modo en distintos navegadores.
Etiquetas de formato de texto

<font color=color> </font> <font size=tamao> </font> <font face=fuente> </font> <body text=color> <body bgcolor=color> <body link=color> <body vlink=color> <body alink=color>
Ejercicio
Modifica la pgina web anterior y ponle color de fondo y texto con diferentes colores y efectos, tamao, tipo de letra, etc.
Listas no numeradas <ul> <li> </li> <li> </li> </ul> 1. Listas numeradas <ol> <li> </li> <li> </li> </ol>
Listas
Comprobar si llevar etiquetas de cierre en w3schools.com
Listas de definiciones <dl> <dt> trmino 1 </dt> <dd> definicin de trmino 1 </dd> <dt>trmino 2 </dt> <dd> definicin de trmino 2 </dd> </dl>
Crea un archivo con el Bloc de notas llamado Actividad3.html y escribe el cdigo siguiente.Visualiza la pgina con el navegador.
Enlaces, links o hipervnculos

<a href=URL> texto del enlace </a> <a href=mailto:email> mi correo </a> <a href=#zonaDelDocumento> texto </a>
ANCHOR o ANCLAS: <a name=zonaDelDocumento> texto</a>
Ejercicio
Crea una pgina Actividad5.html con el nombre
Aade enlaces para abrir el archivo zip y descargarlo, para abrir un archivo de sonido y escucharlo, ver una imagen o foto y enviar un correo. Coloca los enlaces dentro de una lista no numerada.
Imgenes (gif, png, jpeg o jpg)

<img src=[ruta/]ficheroImagen>
<a href=url><img src=[ruta/]ficheroImagen></a>

Atributos: width = anchuraEnPixels height = altura
align = alineacin
alt=comentario title=comentario border = tamao
http://www.w3schools.com/tags/tag_img.asp
Tablas
<table>
background=imagenFondo
<tr>
<td> <th>
Atributos utilizados en tablas:
bgcolor=color border=n bordercolor=color valign=top|bottom|middle cellpadding=nmero cellspacing=nmero height=nmero width=nmero
align=left|center|right
http://www.htmlcodetutorial.com/tables/index_famsupp_29.html
Actividad propuesta 7 horario.html

Haz una pgina web con el horario de clase en una tabla, aplica colores segn mdulo, alinea el texto, haz que la tabla tenga de anchura el documento.
Tablas (cont)
Para crear una celda que ocupe varias filas o columnas, se
deben colocar en las marcas <th> o <td> los atributos:

rowspan colspan
Actividad propuesta 7 horario.html

Haz que el recreo se vea como varias celdas unidas.
Frames o marcos
Permiten dividir un documento en varias zonas, de forma que cada una de estas sea a su vez otro documento HTML.
<frameset> en lugar de la etiqueta <body>

Veamos un ejemplo
Actualmente los frames estn en desuso debido a que los

motores de bsqueda de los buscadores tienen dificultades a la hora de buscar pginas de sitios con frames.
iframes
Pero s se usan los iframes, que son marcos internos o flotantes dentro de las pginas HTML que permiten mostrar documentos dentro de otros documentos (publicidad o
incluir partes de otras pginas en las nuestras)

frameborder bordercolor background-color scrolling Ejemplo
width
height
Formularios
Formularios
Permiten al usuario introducir datos, que son enviados al email del administrador del formulario o bien a un programa que se encarga de procesarlos.
<form action=mailto:xxx@xxx.xx" method=post enctype=text/plain >
controles del formulario </form>
Botn de envo
Para enviar la informacin, el formulario necesita de un botn que le indique que el formulario ha concluido y que pueden enviar la informacin.
<input type="submit" value="Enviar informacin">
Botn de resetear la informacin

Es posible que el usuario una vez avanzado el formulario, quiera reiniciarlo desde el principio y volver a escribir la informacin <input type="reset" value="Borrar informacin">
Formularios. Controles
Cuadro de texto <input type="text" name=nombreControl" >
Atributos:
size maxlength value title
Realiza el siguiente ejemplo
Este es su aspecto
Cuadro de contrasea
<input type="password" name="clave" >
Botones de eleccin (radio button)

Enunciado pregunta<br> <input type="radio" name=nombreControl" value=valor1"> Valor1visible<br> <input type="radio" name=nombreControl" value=valor2> Valor2visible<br> <input type="radio" name=nombreControl" value=valor3> Valor3visible<br>
Cajas de seleccin (checkbox)

<hr> Enunciado pregunta<br> <input type="checkbox" name=" nombreControl " value=valor1"> valor1 <br> <input type="checkbox" name=" nombreControl " value=" valor2 > valor2 <br> <input type="checkbox" name=" nombreControl value=" valor3"> valor3<br> <input type="checkbox" name=" nombreControl " value=" valor4>valor4<br> <input type="checkbox" name=" nombreControl " value=" valor5>valor5<br>
Lista desplegable (select)
<select name=nombreLista> <option value=valor1> valor1 <option value=valor2 selected> valor2 <option value=valor3> valor3 <option value=valor4> valor4 </select>
Prueba el atributo multiple
rea de texto (textarea)

<textarea name=nombre" cols=ncolumnas" rows=nfilas">Texto que se
mostrar por defecto en el textarea</textarea>
Botones de borrado
<input type=reset" value=TextoDelBoton name=nombre" >
Botones de envo
<input type=submit" value=TextoDelBoton name=nombre">
Botones (buttons)
<input type=button" value=TextoDelBoton name=nombre"
onclick=accionScript();>
window.close();
window.location.replace(documento.html); window.open(documento.html); .
Lenguaje XHTML
Reformulacin del lenguaje HTML (diseado para mostrar datos) que permite el uso de herramientas basadas en XML (diseado para describir los datos). Exige requisitos ms estrictos en la escritura del cdigo
XHTML 1.0 ofrece 3 posibles declaraciones DTD:
Strict: El ms ajustado al estndar. No puede contener frames ni elementos en desuso (font, align,), se utiliza con estilos (CSS).
Transitional: Incluye todos los elementos de Strict adems de otros elementos obsoletos. Se usa cuando no hay estilos (CSS) para indicar la presentacin de los documentos, sino que se hace con etiquetas.
Frameset: Incluye lo del transitional y soporte para frames.
XHTML 1.1 es una versin puesta al da de XHTML 1.0 estricto

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Diferencias entre XHTML y HTML

Poner el atributo de espacio de nombres de XML (xmlns) en <html>
<html xmlns="http://www.w3.org/1999/xhtml"> Un espacio de nombres es una recomendacin W3C para proporcionar elementos y atributos con nombre nico en un documento XML.
Nombres de etiquetas y atributos en minsculas
Valores de los atributos entre comillas, incluso los numricos

Todos los atributos (que se pongan) deben tener un valor asignado (atributo=valor)
Etiquetas (con pareja) siempre cerradas
Cerrar etiquetas vacas (sin pareja de cierre)
<br />, <img src="imagen.jpg" />, <hr />

Las etiquetas anidadas deben tener un correcto orden de apertura/cierre (la que se abre ltima, debe cerrarse primero). No est permitida la minimizacin de atributos (se usa el nombre del atributo como valor).
<input checked="checked"> <input readonly="readonly"> <input disabled="disabled"> <option selected="selected">
En comentarios no se deben incluir guiones dobles
Ejercicio propuesto de pasar codigo html a xhtml

En este ejercicio se convertir un documento html a xhtml manualmente, para ello copia el fichero de la profesora, revsalo manualmente y psalo por el validator de w3c (http://validator.w3.org) Muestra a la profesora el resultado libre de errores.
Caracteres especiales
Algunos caracteres que se utilizan habitualmente en los textos no se pueden incluir directamente en las pginas web. Los caracteres que HTML para definir sus etiquetas (<, > y ") no se pueden utilizar libremente. La solucin consiste en sustituir los caracteres reservados de HTML por unas expresiones llamadas entidades HTML y que representan a cada carcter:
Entidades html Carcter Descripcin Traduccin
< >
& " '
< >
& " (espacio en blanco) '
less than more than

ampersand quotation mark non-breaking space apostrophe
signo de menor que signo de mayor que

ampersand comillas espacio en blanco apstrofo
Caracteres no ingleses
Los caracteres propios de los idiomas diferentes al ingls tambin pueden ser problemticos. El motivo es que desde que se crea una pgina web hasta que llega al navegador del usuario, intervienen numerosos procesos: 1. El diseador crea la pgina web con su editor HTML (por ejemplo Dreamweaver). 2. Si se trata de una aplicacin web dinmica, el programador recorta la pgina HTML del diseador y la mezcla con el resto del cdigo de la aplicacin (por ejemplo PHP). 3. El servidor web almacena las pginas HTML estticas o el cdigo de la aplicacin web y sirve las pginas solicitadas por los usuarios. 4. El usuario solicita y visualiza las pginas web a travs de su navegador. Si el editor HTML del diseador utiliza la codificacin UTF-8, el entorno de desarrollo del programador tambin utiliza UTF-8, el servidor web sirve las pginas con esa codificacin y el navegador del usuario es capaz de visualizar las pginas con formato UTF-8, el texto anterior se ver correctamente en el navegador del usuario,
y si no ocurre as
Caracteres no ingleses
La solucin ms sencilla para asegurar que todos estos caracteres potencialmente problemticos se van a visualizar correctamente en el navegador del usuario consiste en sustituir cada carcter problemtico por su entidad HTML:
Entidades html ñ Ñ Carcter Descripcin oficial latin letter n with tilde latin capital n letter with tilde
á
é í
a acute
e acute i acute
ó
ú Á É Í Ó Ú €
o acute
u acute A acute E acute I acute O acute U acute euro
Solucin, poner dentro del head

Indica al servidor que el contenido de la pgina es cdigo HTML y su codificacin de caracteres es UTF-8
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
o bien
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Ud 2htmlyxhtml

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Ud 2htmlyxhtml

Загружено:

Авторское право:

Доступные форматы

UD 2.

Lenguaje HTML (Hiper Text Markup Language

Permite crear pginas web interpretadas (y visualizadas) navegadores web.

HTML 5 = HTML 4 + XHTML + DOM (Document Object Model)

Los documentos HTML estructurados y organizados.

Los nombres de los elementos o etiquetas no son sensibles a maysculas o minsculas.

Los nombres de los atributos no son sensibles a maysculas o minsculas.

Los nombres de las etiquetas no deben contener espacios en blanco.

Las etiquetas que encierran contenido se deben cerrar:

Las etiquetas pueden anidarse.

Los exploradores omiten elementos desconocidos, tanto etiquetas como atributos.

Estructura bsica de un documento HTML

Dentro del documento se distinguen dos partes: cabecera

(head) y cuerpo (body), delimitadas por <head></head> y

El cuerpo contiene el contenido del documento que se

Estructura bsica de un documento HTML

Doctype o declaracin de tipo de documento

Le dice al navegador qu especificacin de HTML o XHTML estamos usando.

Es la primera declaracin que va en una pgina web.

El doctype empieza con <!DOCTYPE (debe ser escrito en maysculas)

Doctype o declaracin de tipo de documento

HTML 4.01 Transitional

HTML 4.01 Frameset

Doctype o declaracin de tipo de documento

XHTML 4.01 Transitional

XHTML 4.01 Frameset

Prctica. Elaboracin de la primera pgina web

Etiquetas de formato de texto

Etiquetas de formato de texto

Etiquetas de formato de texto

Comprobar si llevar etiquetas de cierre en w3schools.com

Enlaces, links o hipervnculos

ANCHOR o ANCLAS: <a name=zonaDelDocumento> texto</a>

Imgenes (gif, png, jpeg o jpg)

<a href=url><img src=[ruta/]ficheroImagen></a>

Actividad propuesta 7 horario.html

deben colocar en las marcas <th> o <td> los atributos:

Actividad propuesta 7 horario.html

<frameset> en lugar de la etiqueta <body>

Actualmente los frames estn en desuso debido a que los

incluir partes de otras pginas en las nuestras)

Botn de resetear la informacin

Realiza el siguiente ejemplo

Botones de eleccin (radio button)

Cajas de seleccin (checkbox)

Prueba el atributo multiple

rea de texto (textarea)

XHTML 1.1 es una versin puesta al da de XHTML 1.0 estricto

Doctype o declaracin de tipo de documento

XHTML 1.0 Transitional

XHTML 1.0 Frameset

Diferencias entre XHTML y HTML

Nombres de etiquetas y atributos en minsculas

Valores de los atributos entre comillas, incluso los numricos

Diferencias entre XHTML y HTML

Etiquetas (con pareja) siempre cerradas

Cerrar etiquetas vacas (sin pareja de cierre)

<br />, <img src="imagen.jpg" />, <hr />

Diferencias entre XHTML y HTML

En comentarios no se deben incluir guiones dobles

Ejercicio propuesto de pasar codigo html a xhtml

less than more than

signo de menor que signo de mayor que

Solucin, poner dentro del head