Scribd
Cargar
6 vistas80 páginas

Páginas Web con HTML: Estructura y Elementos

El documento describe los elementos básicos de HTML y su estructura, incluyendo etiquetas como <html>, <head>, <title>, <body>, así como elementos comunes dentro de la cabecera y el cuerpo.

Cargado por

Juan Sanchez
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
6 vistas80 páginas

Páginas Web con HTML: Estructura y Elementos

El documento describe los elementos básicos de HTML y su estructura, incluyendo etiquetas como <html>, <head>, <title>, <body>, así como elementos comunes dentro de la cabecera y el cuerpo.

Cargado por

Juan Sanchez
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

UD6 Elaboración de páginas

web con lenguajes de


marcas
UD6 Elaboración de páginas web con
lenguajes de marcas

CONTENIDO

1. Evolución histórica
2. Estructura del documento.
3. Elementos de HTML
4. Contenido de la cabecera
5. Contenido del cuerpo
1. Evolución histórica

1990 - HTML se crea en el CERN para 1998 –XML– W3C


el intercambio de documentos entre
físicos e investigadores de energía
nuclear. 2000 – XHTML - W3C
reformulación de HTML 4
basada en XML
1995 – HTML 2.0 – primer estándar
IETF (Internet Enginnering Task Force)
2003 – XHTML 2.0 - W3C
no compatible con HTML
1997 –HTML 3.2– tablas, applets de Java ni con XHTML 1
W3C (World Wide Web Consortium)

2003 – XFORMS - W3C


1998 –HTML 4– soporte para lenguajes formularios de XHTML
scripts, hojas de estilo CSS,
accesibilidad, …
2004 – HTML
Grupo WHATWG

2008 – HTML 5 borrador

2014 – HTML 5
2. Estructura del documento
La estructura básica de un documento HTML es la siguiente

<!DOCTYPE html> Declaración del


documento (DTD)
<html>
<head>
Raíz del Cabecera
documento. </head>
Engloba el resto <body>
de
etiquetas HTML Cuerpo
</body>

</html>
• Todo documento HTML tiene una extensión .html o .htm

• La primera página de un sitio se debería llamar [Link]

• La sintaxis de una etiqueta es la siguiente <etiqueta atributo= “valor_atributo”>


Para escribir el lenguaje necesitaremos un editor de texto.
Aunque se puede usar cualquiera del mercado (desde bloc de notas hasta word)
se recomienda el uso de editores como Notepad++ o Gdit (para Linux) ya que
facilitan la edición.

En Notepad++ cambiar en la pestaña “lenguaje” a HTML


A partir de ese momento el software nos ayudará mediante letras de distintos
colores a identificar los distintos componentes y a ver si estamos codificando
correctamente.
○ Etiquetas → color azul
○ Atributos de las etiquetas → color rojo
○ Valor del atributo → color morado (naranja si no hemos puesto comillas””)
○ Contenido de la web → color negro
○ Comentarios → color verde
○ etiqueta bien cerrada → subrayado morado
Ejemplo: Confeccionar una página que muestre los nombres de 5 lenguajes de
programación separados por un guión.

<html>
<head>
</head>
<body>PHP - Java - JavaScript - C - C++ </body>
</html
2. Estructura del documento
DTD
u DTD –Document Type Definition- es un documento externo de extensión .dtd
u La declaración de tipo de documento se coloca al principio, fuera de todo bloque.
u Permite al navegador saber cómo interpretar adecuadamente el código.
u Recomendado desde HTML 4.0 y obligatoria en XHTML
u Tipos de DTD: Estricta, de Transición y con Marcos
Estricta <!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Strict//EN"
"[Link]
de Transición <!DOCTYPE html "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
con Marcos <!DOCTYPE html "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]

u Para especificar la última versión de HTML usamos:


<!DOCTYPE html>
2. Estructura del documento
Etiquetas
Una etiqueta o marca está formada por una o varias palabras reservadas, que tienen un
significado especial en HTML.
u Las etiquetas delimitan los elementos que componen un documento HTML
u Existen dos tipos de etiquetas:
u Etiqueta de apertura o comienzo: <etiqueta>
u Etiqueta de cierre: </etiqueta>
<etiqueta>….</etiqueta>
Las etiquetas de cierre y apertura tienen el mismo nombre.
u Las etiquetas deben estar anidadas correctamente:
u Correcto:
<a><b>Ejemplo</b></a>
u Incorrecto:
<a><b>Ejemplo</a></b>
2. Estructura del documento
Etiquetas <html>

<head>
u Texto plano delimitado por una etiqueta de apertura y de <title>Titulo</title>
cierre <html> y </html>.
Elementos opcionales de la
u Las etiquetas <head>, </head> delimitan la cabecera cabecera
u Las etiquetas <body>, </body> delimitan el cuerpo </head>

u Las etiquetas <html>, <head>, <title>, <body> son opcionales


<body>
pero deben incluirse por legibilidad del código.
Los bloques delimitados por etiquetas de apertura y cierre no Contenido del cuerpo
deben solaparse
</body>

</html>
3. Elementos de html

u Los elementos pueden tener atributos y contenido.

Elemento <etiqueta> CONTENIDO </etiqueta>


Elemento vacío <etiqueta>
Elemento con atributos <etiqueta atributos>

u Sintaxis

<nombre_elemento atributo1=“valor1” atributo2=“valor2”…>


Contenido del elemento
</nombre_elemento>
3. Elementos de html

u <html>

Definición Delimita el contenido del documento


Aparición Apertura y cierre opcionales
Atributos dir, lang, versión

dir : ltr (izquierda a derecha) rtl (dcha. a izda.)


indica el sentido de lectura cuando no corresponde al
habitual –árabe-
lang : de (alemán), en (inglés), es(español)
indica el idioma por defecto del documento
version : versión del lengua HTML (desaprobado)
Contenido de html <head> <body>
3. Elementos de html
u <head>

Definición Delimita la cabecera de un documento


Aparición Apertura y cierre opcionales
Atributos lang, dir, profile

profile : URI (dirección web completa del recurso


indica dónde están los perfiles para interpretar los elementos
meta

Contenido de la <title>, <base>, <meta>, <link>, <object>, <script>,


cabecera <style>

u Únicamente el elemento <title> es obligatorio


3. Elementos de html
u <body>
Definición Delimita el cuerpo de un documento
Aparición Apertura y cierre opcionales
Atributos lang, dir, id, class, title, style, onload, onunload

id : permite asignar un nombre único a un elemento


class : permite asignar un nombre de clase a un elemento
title : agrega un comentario a un elemento (se muestra al situar el ratón
sobre el elemento)
style : aplica información de estilo a un elemento
onload : especifica el evento que ocurrirá al finalizar la carga
onunload : especifica el evento que ocurre al eliminar un elemento de una
ventana o marco
Atributos background, text, link, alink, vlink, bgcolor.
desaprobados
3. Elementos de html
u Comentarios <!-- -->

Definición Sirve para insertar una o varias líneas de comentarios que no


serian interpretadas por el navegador
Aparición No se pueden anidar

u Conjuntos de atributos

u %i18n = lang, dir

u %coreattrs = id, class, style, title


u %events = onload, onunload, onblur, onchange, onfocus, onreset, onselect,
onsubmit, …

u %attrs = %i18n + %coreattrs + %events

Lista completa
de atributos
4. contenido de la cabecera

u Contiene los elementos:

<title>, <base>, <meta>, <link>, <object>, <script>, <style>

u <title>

Definición Indica el nombre del sitio web en la pestaña del navegador


Aparición Apertura y cierre obligatorias
Atributos lang, dir
Ejemplo <head>
<title> pagina inicial </title>
</head>
4. contenido de la cabecera

u <base>

Definición Indica la dirección raíz del sitio web, la cual permite resolver las direcciones
relativas
Aparición Sin etiqueta de cierre
Atributos href

href: se usa siempre para indicar la dirección raíz del documento


Ejemplo <base href="[Link]

en caso de tener una dirección relativa como “/[Link]” se completaría como la


dirección absoluta "[Link]
4. contenido de la cabecera Principales meta
etiquetas

u <meta>

Definición Indica un conjunto de propiedades generales del documento como el autor,


descripción, palabras clave, herramienta utilizada, tipo de contenido, etc.
Aparición Sin etiqueta de cierre
Atributos lang, dir, name, content, http-equiv, scheme

name: indica el nombre de una propiedad. ( valores abstract, autor, copyright, date,
description, …)
content: contiene el valor de la propiedad indicada en name.
http-equiv: indica al navegador una propiedad en forma de http como si la
hubiera generado el servidor web.
scheme: Indica al navegador que debe interpretar los metadatos atendiendo al
perfil especificado, para evitar ambigüedad.
Ejemplo <meta name="description" content="Lenguajes de Marcas" >
<meta scheme="Europe" name="date" content="24-10-2015" >
4. contenido de la cabecera
u <link>

Definición Define un vínculo a otro documento indicado por href


Aparición Sin etiqueta de cierre
Atributos lang, dir, class, id, style, title, eventos intrínsecos, charset,
href, hreflang, type, rel, rev y media.

charset: establece el conjunto de caracteres usado para el documento


href: indica la URI del documento vinculado.
hreflang:lndica el lenguaje del documento vinculado.
type: indica el tipo de contenido del documento vinculado. (text/html, text/css,
image/png, image/gif, image/x-icon, video/mpeg y audio/basic)
rel: establece la relación entre los documentos origen y destino
Lista de atributos
rev: indica un vinculo inverso, es decir, desde el origen a destino.
y sus valores media: indica el medio al que se refiere los datos del estilo en el documento destino
(screen –por defecto-, tty, tv, handheld, print, braille, aural, all)
4. contenido de la cabecera
u <script>

Definición Inserta un script dentro del documento.


Aparición Las etiquetas de apertura y cierre son obligatorias
Atributos charset, type, src, defer

charset: codificación de caracteres del script indicado por src


type: indica el lenguaje de programación en el cual está escrito el script
src: indica la URI donde está alojado el script externo
defer: booleano que indica al navegador que el script no genera ningún contenido
en el documento
Ejemplo Interno: <script type="text/javascript" > . . . . . . </script>
Externo:
<script type="text/javascript" src="/js/[Link]"> </script>
<script type="text/javascript"
src="/[Link] </script>
4. contenido de la cabecera
u <style>

Definición Permite insertar una hoja de estilo interna en la cabecera del documento
Aparición Etiqueta de inicio y fin obligatorios
Atributos lang, dir, type, media, title

type: indica el tipo de lenguajes (normalmente “text/css”)


media: indica el tipo de medio al que se dirige la información de estilo (screen
–por defecto-, tty, tv, handheld, print, braille, aural, all )
title: es un texto descriptivo de la información de estilo.
Ejemplo <style type="text/css">
body {
margin-left: 40px; margin-right: 40px;
margin-top: 40px;
}
</style>
5. contenido del cuerpo

Los elementos del cuerpo se clasifican en:

u Elementos de bloque
u Pueden contener otros elementos de línea o de bloque
u Siempre comienzan en una línea nueva

u Elementos de línea
u Solo contienen datos y a otros elementos de línea
u No comienzan una nueva línea
5. contenido del cuerpo

Manejo de texto: <h1|h2|h3|h4|h5|h6>


Definición Establecen encabezados, diferentes tamaños de títulos
Elemento de bloque
Aparición Etiqueta de inicio y fin obligatorios
Atributos %attrs, align

align: indica la alineación del texto. Valores: left, center, right, justify
No es compatible con HTML5

u Ejemplo.- Escribe el código de un documento en el que aparezcan los diferentes encabezamientos y puedas
fácilmente compararlos
5. contenido del cuerpo

Manejo de texto: Ejemplo con <h1|h2|h3|h4|h5|h6>


<html>
<head> <title>Encabezamientos</title>
</head>
<body>
<h1>Encabezado h1</h1> <h2>Encabezado h2</h2>
<h3>Encabezado h3</h3> <h4>Encabezado h4</h4>
<h5>Encabezado h5</h5> <h6>Encabezado h6</h6>
</body>
</html>
5. contenido del cuerpo

Manejo de texto: <p>


Definición Establece una agrupación de líneas de texto en un párrafo.
Elemento de bloque
Aparición Etiqueta de fin opcional. No contiene elementos de bloque
Atributos %attrs, align

u Cada párrafo HTML se compone de una única línea de texto


u Los saltos de línea deben ser explícitos mediante el uso del elemento <br>
u &nbsp (no-break space) añade un espacio en blanco adicional que no será utilizado para salto de línea
Por ejemplo, la expresión 35º&nbsp;1'&nbsp;N&nbsp;y&nbsp;135º&nbsp;45'&nbsp;E mostraría siempre las coordenadas de Kioto 35º
1‘ N y 135º 45‘ E agrupadas como una unidad a pesar de tener espacios en blanco intermedios.
5. contenido del cuerpo
Manejo de texto:
u <br>

Definición Permite introducir un salto de línea explícito dentro de un mismo párrafo


Aparición Sin etiqueta de fin

u <hr>
Definición Permite separar el texto dentro del mismo párrafo mediante una línea horizontal
visible
Aparición Sin etiqueta de fin
Atributos %attrs, aling, noshade, size y width (desaprobados)

noshade: booleano (si aparece la línea es 2D y 3D si no aparece)


size: grosor de la línea en pixeles
width: longitud de la línea en porcentaje
5. contenido del cuerpo
Manejo de texto: <b> <i> <big><small> <s> <strike> <tt> <u>

Definición Permiten establecer los diferentes estilos de fuente. Elementos de línea.


b ànegrita i à itálica o cursiva big à tamaño grande small à tamaño pequeño
s y strike àtachado tt-à apariencia de teletipo u à subrayado
Aparición Etiqueta de inicio y fin obligatorios
Atributos %attrs

u <font>

Definición Permite establecer el tamaño color y la fuente para el texto .


Desaprobado
Aparición Etiqueta de inicio y fin obligatorios
Atributos %i18, %coreattrs, size, color, face
5. contenido del cuerpo

Manejo de texto: <pre>

Definición Texto con formato previo.


Permite que el navegador visualice el texto tal y como aparece en el documento,
respetando tabulaciones, saltos de línea y blancos
Aparición Etiqueta de inicio y fin obligatorios
Atributos %attrs, width

width: indica el ancho del bloque con formato previo


Ejemplo: Confeccionar una página HTML que muestre distintos lenguajes
de programación, mostrarlos uno por línea.
<html>
<head>
</head>
<body>
PHP<br>
JavaScript<br>
Java<br>
C<br>
C++
</body>
</html>
Ejemplo: Confeccione una página que muestre dos párrafos. En el primero agregar varios
saltos de línea.
<html>
<head>
</head>
<body>
<p>SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de
programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br>MySQL permite crear
base de datos y tablas, insertar datos, modificarlos, eliminarlos,ordenarlos, hacer consultas y
realizar muchas operaciones, etc., resumiendo: administrar basesde datos.</p>
<p>Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el
mundo delas bases de datos.</p>
</body>
</html>
Ejemplo: Crear una página que contenga cuatro párrafos. En el primero enfatizar con el
máximo nivel y en los otros párrafos emplear el elemento de enfatizar de menor fuerza.

<html>
<head>
</head>
<body>
<p><strong>Típos de datos</strong> en MySQL</p>
<p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres. Las cadenas se
colocan entre comillas simples. Podemos almacenar dígitos con los que no se realizan
operaciones matemáticas, por ejemplo, códigos de identificación, números de documentos,
números telefónicos. Tenemos los siguientes tipos: varchar, char y text.</p>
<p><em>NUMEROS</em>: Existe variedad de tipos numéricos para representar enteros,
negativos, decimales. Para almacenar valores enteros, por ejemplo, en campos que hacen
referencia a cantidades, precios, etc., usamos el tipo integer. Para almacenar valores con
decimales utilizamos: float o decimal.</p>
<p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date
(fecha), datetime (fecha y hora), time (hora), year (año) y timestamp.</p>
</body>
</html>
5. contenido del cuerpo

Manejo de listas:

<ul> <li>

<ol> <li>

<dl> <dt><dd>
5. contenido del cuerpo

Listas de elementos no ordenados: <ul>


Definición Se construyen con <ul> y su contenido está formado exclusivamente por el
elemento <li>.
Los elementos <li> son los que contienen el texto.

Aparición Etiqueta de inicio y fin obligatorios


Atributos %attrs, type, compact

type: tipo de símbolo utilizado (“disc”, “square” y “circle”) . Desaprobado.


compact: si aparece indica que la lista debe compactarse
Ejemplo: Confeccionar una página HTML que contenga una lista no ordenada con cuatro
lenguajes de programación muy populares. Agregar un título de segundo nivel indicando el
concepto de esta lista.

<html>
<head>
</head>
<body><h2>Lenguajes de programación.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
</html>
5. contenido del cuerpo

Listas de elementos ordenados: <ol>

Definición Se construyen con <ol> y su contenido está formado exclusivamente por el elemento <li>.
Los elementos <li> son los que contienen el texto.
Aparición Etiqueta de cierre opcional
Atributos %attrs, type, start

type: tipo de secuencia utilizada (“1”, “a”, “A”, “i” y “I”) . Desaprobado.
start: indica el primer elemento de la lista. Desaprobado.

Elementos de la lista: <li>

Definición Objeto de lista que puede contener otros elementos de bloque o el propio texto.
Aparición Etiqueta de cierre opcional
Atributos %attrs, value
value: establece el número del objeto de lista actual . Desaprobado.
5. contenido del cuerpo

u Ejercicio.
Crea un documento en el que se exprese
la receta de bizcocho que se muestra en
la imagen.

u Ejercicio.
Cambia el código para que te muestre la
lista no ordenada con cuadrados en lugar
de círculos.
5. contenido del cuerpo

Listas anidadas:
u Permiten relacionar jerárquicamente un conjunto de
conceptos.
u Se suelen tomar tipos distintos para los diferentes niveles de
anidación para visualizar mejor la relación

u Ejercicio.
Crea un documento que refleje la lista de la imagen de la derecha
u Ejercicio.
Crea una lista numerada documento que refleje la lista de la imagen de la derecha.
5. contenido del cuerpo

Listas de definición:
u <dl>
Definición Son listas de dos elementos, el termino y la definición, como en un diccionario. Se
construyen con <dl> y su contenido está formado exclusivamente por elementos
<dt> y <dd>.
Aparición Etiquetas de apertura y cierre obligatorias
Atributos %attrs

u <dt>
Definición Delimita el término a definir. Elemento de línea
Aparición Etiqueta de cierre opcional
Atributos %attrs
5. contenido del cuerpo

Listas de definición: (cont.)


u <dd>
Definición Es la definición del termino anterior. Elemento de bloque.
Aparición Etiqueta de cierre opcional
Atributos %attrs

u Ejemplo.- Un glosario del módulo lenguaje de marcas con los términos que han aparecido ya
durante el curso. Por ejemplo: HTML, XML, XHTML, TeX, CSS…

u Ejercicio.
Crea un diccionario en el que aparezcan 5 términos o palabras a definir, estas palabras serán polisémicas por lo
que deberán aparecer varios de sus significados. Llámalo [Link]
5. contenido del cuerpo

Enlaces: <a>

Definición Se utiliza para establecer el origen o el destino de un hipervínculo.


Aparición Etiqueta de apertura y cierre obligatorias
Atributos %attrs, charset, type, name, href, hreflang, rel, rev,
acceskey, shape, coords, tabindex, onfocus, onblur

name: permite nombrar un ancla o marcador que será destino del enlace.
href: indica la URI destino del hipervínculo.
acceskey: asigna una tecla única de acceso al hipervínculo
shape:establece la forma de la imagen que contiene el hipervínculo
coods: establece la posición dentro de la pantalla de una imagen
target: establece el marco de destino (valores: _blank, _self, _parent, _top)
tabindex: establece un número de orden
5. contenido del cuerpo
Enlaces: (<a> cont.)
Es un elemento de línea por lo que el enlace puede aparecer en una lista, en un párrafo,…
1. El elemento origen apunta a un destino de la misma página
A. El destino se indica con un marcador propio
B. El destino es un elemento identificado con id.

enlaces
<a href="#X">Ir a X </a> <a href="#X">Ir a X
</a>

A B

<a name="X"> marcadores


<h2 id="X">
5. contenido del cuerpo

Enlaces: (<a> cont.)


2. El elemento destino está en otra página del mismo servidor
u El marcador de destino se indica con un marcador propio o con un identificador

u Se añade el nombre de la página de destino al enlace

[Link] [Link]

<a href="[Link]#X">Ir a X</a> <a name="X">

<h2 id="Y">
<a href="[Link]#Y">Ir a Y </a>
5. contenido del cuerpo

Enlaces: (<a> cont.)


3. El elemento origen apunta a un destino en otro servidor
u En el enlace se especifica la URI completa de la página de destino
<a href="[Link] Enlace X </a>

[Link]

<a href="[Link]

<a href="[Link]
5. contenido del cuerpo

Enlaces (cont.)
u Ejemplo.
Código correspondiente al fichero [Link] del ejemplo anterior. Se
incluyen los enlaces externos:
<a href="[Link]
<a href="[Link]

u Ejercicio.
Crea un documento html cuyo contenido sea un título, un primer apartado con un Índice
que liste las 3 secciones del tema y el desarrollo de las tres secciones. Cada sección
corresponde a un apartado con título que irá con un encabezamiento adecuado –menor
que el del título-. Cada elemento del índice será un enlace al correspondiente subtítulo
del apartado.
5. contenido del cuerpo

Agrupación de contenido:
u <div>
Definición Agrupa varios elementos dentro de un bloque, así podemos identificarlo,
con un nombre o clase, podemos darle estilo,…
Aparición Etiqueta de apertura y cierre obligatorias
Atributos %attrs, align
u <span>
Definición Permite identificar un elemento en línea para poder identificarlo, con un
nombre o clase, podemos darle estilo,…
Aparición Etiqueta de apertura y cierre obligatorias
Atributos %attrs, align
5. contenido del cuerpo
Agrupación de contenido (cont.)
u Cada bloque o capa creado con div define un área dentro del documento, cuyas
medidas dependen principalmente del contenido insertado en el bloque.
u Las propiedades de las capas –se verán en las hojas de estilo- son:
posición en pantalla: left, top y position

ancho, alto y color: width , height y background-color

ordenar las capas y su visibiidad: z-index y visibility

Ejemplo.- Documento que presente dos bloques uno identificado como “cabecera” y otro como “contenido”. La cabecera
tendrá el nombre de la empresa y una frase con una explicación de su actividad, aparecerá con el estilo de alineación
centrado y color de fondo #D5EDB3. El contenido será un párrafo con una lista cualquiera y su estilo será de alineación a
izquierda y color de fondo #EE3

u Ejercicio.
Da contenido a la estructura del ejemplo. Al fichero resultante llámalo [Link]
5. contenido del cuerpo
Imágenes:

JPG GIF PNG

Adecuado para fotos Adecuado para dibujos Adecuado en general


Compresión con pérdida Compresión sin perdida Compresión sin perdida
Conserva color original Utiliza el algoritmo LZW Millones de colores
16 millones de colores 256 colores Permite transparencia
Permite modo progresivo de Permite transparencia Permite metadatos
aparición Permite animación Editable

No permite transparencia No degrada el color Las fotos pesan más.


No permite animación Tiene derechos de autor No permite animación
5. contenido del cuerpo

Imágenes: <img>
Definición Sirve para insertar la imagen determinada por el atributo src.
Es un elemento en línea.
Aparición Sin etiqueta de cierre
Atributos %attrs, src, alt, longdesc, name, height, width, usemap, ismap.

src: indica la URI de acceso a la imagen.


alt: texto con breve descripción de la imagen, aparece en caso de no visualizar la imagen.
longdesc: indica la URI de una descripción más extensa de la imagen.
name: identifica la imagen para su manejo en la hoja de estilo o en un script.
height, width: altura y anchura con que la visualizará el navegador
usemap: asocia a la imagen un mapa de imágenes (como un marcador) .
ismap: permite definir un mapa de imágenes.
(hspace, vspace, align y border desaprobados).
5. contenido del cuerpo
Tablas: <table>
Definición Inserta una tabla de tamaño variable que puede contener filas, columnas, filas de encabezado, filas
de pie, filas de cuerpo y resumen.
A su vez, cada fila puede tener 0 o más celdas
Aparición Etiqueta de apertura y cierre obligatorias
Atributos %attrs, summary, width, border, frame, rules, cellspacing, cellspadding

summary: resumen del contenido y estructura (para los buscadores).


width: anchura total de la tabla en pixeles (px) o porcentaje (%).
border: especifica la anchura del borde exterior de la tabla en px.
frame: especifica qué lados de la tabla serán visibles.
-void (ninguno), above (arriba), below(abajo), lhs(izquierda),rhs(derecha), box (todas)
rules: especifica qué líneas de división de celdas serán visibles
-none(ninguna), groups (solo entre grupos de filas o grupos de columnas), rows (solo entre
filas), cols (solo entre columnas), all(todas)-
cellspacing: especifica el espacio entre celdas
cellpadding: espacio entre el borde de una celda y su contenido
5. contenido del cuerpo

Tablas: <tr>
Definición Crea una fila dentro de una tabla
Aparición Etiqueta final opcional
Atributos %attrs, align, valign, char, charoff

<td> <th>
Definición Sirven para crear una celda bien dentro de una fila o bien dentro de la cabecera
Aparición Etiqueta final opcional
Atributos %attrs, abbr, axis, headers, scope, rowspan, colspan, align, valign, char, charoff

rowspan: indica el número de filas que ocupa la celda


colspan: indica el número de columnas que ocupa la celda
5. contenido del cuerpo

Tablas: <caption>

Definición Permite poner título en una tabla. Aparece justo encima.


Aparición Etiqueta inicial y final obligatorias
Atributos %attrs

<thead>, <tfoot>, <tbody>


Definición Permiten agrupar filas en la cabecera, el pie o el cuerpo de la tabla respectivamente .
En tablas grandes, facilitan que el navegador repita las cabeceras.

<colgroup>, <col>
Definición <colgroup>Permite crear un grupo de columnas
<col> permite agrupar atributos
Ejemplo: Confeccionar una tabla que muestre los nombre de países en una columna y su cantidad
de habitantes en otra. Disponer un título de los datos que representa la tabla.

<html>
<head>
</head>
<body>
<table border="1">
<caption>Población de los países con mayor cantidad de habitantes.</caption>
<tr><th>Paises</th><th>Cantidad de habitantes</th></tr><tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr><td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
5. contenido del cuerpo

Ejercicio de tablas: caption

thead

tbody

tfoot
5. contenido del cuerpo

Formularios: Documento con elementos o áreas de entrada de información. Permiten introducir datos,
marcar opciones, elegir una opción de un grupo,…

<form>
Definición Permite insertar un formulario en un documento. Elemento de bloque.
Aparición Etiqueta inicial y final obligatorias
Atributos %attrs, action, method, enctype, accept, accept-charset, name, target, onsubmit, onreset

action: URI del programa encargado de gestionar los datos del formulario.
method: (get o post) indica el método usado para pasar los datos al programa.
enctype: (solo si el método es post) tipo de contenido usado para enviar los datos
accept: lista de tipos de contenidos aceptados por el servidor
accept-charset: codificación de caracteres usada para los datos.
onsubmit: sirve para ejecutar alguna acción cuando el formulario es enviado
onreset: sirve para realizar alguna acción cuando el formulario es reseteado.
Atributos
action
• Indica al navegador qué debe hacer con la información una vez pulsado
el botón de envío. Puede tomar el valor URL si se van a enviar los datos a
un servidor o el valor "mailto: direccion_de_correo", en cuyo caso
deberemos añadir el parámetro ENCTYPE="text/plain" para que lo que
recibamos resulte legible.

Method
• method = " POST / GET " → Informa al navegador sobre la forma de
enviar los datos para su procesamiento. Tomará el valor post si el envío
de información se realiza de forma transparente y el valor get si los
datos se envían a través de la URL. Es má seguro utilizar post ya que
evita que la información sea captada por un intruso mirando la URL.
Atributos

enctype
• Determina la forma en la que se va a codificar la información, ya
sea como texto plano o como fichero.
• Solo se usa si el method es post

name
• Define un nombre unívoco para el formulario
Atributos

accept
• lista de tipos de contenidos aceptados por el servidor

accept-charset
• Define codificación de caracteres usada para los datos.
Atributos

onsubmit
• sirve para ejecutar alguna acción cuando el formulario es enviado

onreset
• sirve para realizar alguna acción cuando el formulario es reseteado.
5. contenido del cuerpo

Formularios: EJEMPLO
Este atributo es obligatorio y nos method nos define el método
indica el documento que por el cual se enviarán los datos
procesará los datos del del usuario al servidor. Puede
formulario enviado ser get o post

Elemento de bloque que puede contener a su vez a los elementos:


<input>
<button>
<select> <option> <optgroup>
<textarea>
5. contenido del cuerpo

Formularios: Permiten que el usuario pueda mandar datos al servidor web. Los elementos de entrada de
información se denominan controles del formulario.

<input>
Definición Sirve para insertar un elemento definido por type dentro del formulario.
Aparición Sin etiqueta de cierre
Atributos %attrs, type, name, value, size, maxlength, checked, src, alt, disabled, readonly, usemap,
ismap, tabindex, acceskey, onfocus, onblur, onselect, onchange, accept

type: Tipo de control del formulario para recoger datos.


(text, password, checkbox, radio, submit, reset, file, hidden, image, button)
name: nombre del control.
checked: marca la casilla para un control de tipo checkbox o radio.
accept: lista de tipod mime válidos para subir ficheros.
value: valor por defecto, texto que aparece inicialmente.
5. contenido del cuerpo

Formularios. Ejemplo de <input type="text"….

Este control tiene el valor por defecto de Nombre y está identificado por el nombre
usuario para su tratamiento posterior (la variable que almacena el texto introducido se
llama usuario.
5. contenido del cuerpo

Formularios. Ejemplo de <input type="password"….

Este control no mostrará el texto introducido por el usuario, mostrará un punto por cada
carácter introducido. Está identificado por el nombre pass para su posterior tratamiento
5. contenido del cuerpo

Formularios. Ejemplo de <input type="checkbox"….

Este control muestra una casilla para poder seleccionarla con un clic. En este caso
aparece ya seleccionada por el atributo checked. Está identificado por esSocio ya que el
valor será cierto si se ha seleccionado o falso si se deselecciona.
5. contenido del cuerpo

Formularios. Ejemplo de <input type="radio"…. excluyente.

La información de sexo del usuario se selecciona mediante dos casillas, como ambos están
identificados por la misma variable, genero, por lo que serán excluyentes… Aquí también,
el atributo checked en una de ellas la preselecciona.
5. contenido del cuerpo

Formularios. Ejemplo de <input type="radio"…. mutievaluado

Los temas preferidos por el usuario pueden ser varios por lo que se permitirá seleccionar varias
de las casillas, así, cada una de ellas debe tener un identificador diferente, Aquí no tiene
mucho sentido el atributo checked.
5. contenido del cuerpo

Formularios. Ejemplo de <input ... readonly> Solo lectura.

Valor que se enviará al servidor pero que el usuario no puede modificar. En este caso el
campo de texto se ha hecho más pequeño por cuestión estética
5. contenido del cuerpo

Formularios. Ejemplo de <input type="file" ... > Envía archivos

Este control inserta un botón para realizar una búsqueda en el disco del fichero que se enviará con el
formulario al servidor. Hay que definir el atributo enctype.
5. contenido del cuerpo

Formularios. Ejemplo <input type="hidden"/"submit"/"reset"/"button" …>

El control de tipo hidden no se


ve en el formulario

El control de tipo submit envía los datos al servidor, a la URI especificada en action.
El control de tipo reset recupera los valores por defecto de todos los controles.
El control de tipo button define un botón genérico, para asociar una determinada acción con un script.
5. contenido del cuerpo
5. contenido del cuerpo

Formularios:
<button> Definición Sirve para insertar un botón como los creados por input pero con más formato.
Aparición Etiqueta inicial y final obligatorias
Atributos %attrs, type, name, value, disabled, tabindex, acceskey, onfocus, onblur

type: Indica el tipo de función del botón. (submit, reset, button)

<select>
Definición Sirve para insertar un menú de formulario con varias opciones.
Aparición Etiqueta inicial y final obligatorias
Atributos %attrs, name, size, multiple, disabled, tabindex, onfocus, onblur, onchange

size: Número de filas del menú que se ven al mismo tiempo


multiple: permite una selección múltiple de opciones
5. contenido del cuerpo
Formularios:
<option>
Definición Sirve para indicar cada opción del menú de formulario.
Aparición Etiqueta inicial y final obligatorias
Atributos %attrs, selected, disabled, label, value

selected: Indica que la opción del menú está preseleccionada


label: Rotulo para la opción del menú

<optgroup>
Definición Sirve para definir un grupo de opciones.
Aparición Etiqueta inicial y final obligatorias
Atributos %attrs, disabled, label
5. contenido del cuerpo

Formularios. Ejemplo <button type="submit"/"reset"/"button" …>

Las funciones de los botones son las mismas, simplemente cambia la estética y el hecho de que
sean botones más personales.
5. contenido del cuerpo

Formularios. Ejemplo <select …>


5. contenido del cuerpo

Formularios. Ejemplo <select …>


5. contenido del cuerpo

Formularios:
<textarea> Definición Sirve para insertar un cuadro de entrada de texto con muchas líneas.
Aparición Etiqueta inicial y final obligatorias
Atributos %attrs, name, rows, cols, disabled, readonly, tabindex, acceskey, onfocus,
onblur, onselect, onchange

rows: Indica el número de líneas visibles


cols: Indica el ancho del cuadro de caracteres

<label> Definición Sirve para asignar un título a un control.


Aparición Etiqueta inicial y final obligatorias
Atributos %attrs, for, acceskey, onfocus, onblur

for: Especifica el nombre de otro control para el que servirá de rótulo (coincide
con el id del control relacionado)
5. contenido del cuerpo

Formularios. Ejemplo <textarea …>


5. contenido del cuerpo
5. contenido del cuerpo

Formularios:
<fieldset> Definición Sirve para agrupar los controles y sus títulos por temas.
Aparición Etiqueta inicial y final obligatorias
Atributos %attrs

<legend> Definición Sirve para asignar un rótulo a un fieldset.


Aparición Etiqueta inicial y final obligatorias
Atributos %attrs, acceskey
5. contenido del cuerpo
Formularios.
Enlaces de interés

Tablas
u [Link]
u [Link]
A1sicos_de_las_tablas_HTML
Formularios:
u [Link]
form
u [Link]

También podría gustarte