Documento 869176

DESARROLLO DE ACTIVIDADES PEDAGÓGICAS
Código: FOR-GA-83/Versión 2
IDENTIFICACIÓN DE LA ACTIVIDAD PEDAGÓGICA
PROGRAMA DE FORMACIÓN
UNIDAD DE APRENDIZAJE
ACTIVIDAD
OBJETIVOS
OFIMATICA, WEB Y DESARROLLO DE SISTEMAS I-A
HERRAMIENTAS DE DISEÑO WEB
INTRODUCCIÓN A XHTML(ELEMENTOS BÁSICOS).
RECONOCER LAS PRINCIPALES CARACTERÍSTICAS Y ETIQUETAS DE XHTML
DESARROLLO DE LA ACTIVIDAD
GENERALIDADES SOBRE HTML
El html es un lenguaje de marcas hipertextuales, un lenguaje diseñado para estructurar textos para generar páginas web. Gracias a Internet y a los
navegadores web, el html se ha convertido en el formato más fácil para la creación de páginas web debido a su sencillez.
La mayoría de las etiquetas del lenguaje html son semánticas. La interpretación de las etiquetas es realizada por el navegador web. El lenguaje HTML es
extensible, se le pueden añadir características, etiquetas y funciones adicionales para el diseño de páginas web, generando un producto vistoso, rápido y
sencillo.
¿Cómo funcionan las etiquetas?
Un lenguaje de etiquetas es un conjunto de palabras o caracteres que se colocan junto al texto de un documento para especificar una propiedad del mismo.
Ejemplo:
<h1>Diseño de páginas web</h1>
<strong>Diseño de páginas web</strong>
Página
1
Tipos de etiquetas: físicas y semánticas. Las etiquetas físicas son las que tienen una función de estilo determinado mientras que las semánticas son
etiquetas equivalentes a las físicas pero que se definen mediante un lenguaje coloquial, como la etiqueta strong del ejemplo. Con ambas se logran los
mismos resultados.
DESARROLLO DE ACTIVIDADES PEDAGÓGICAS
Código: FOR-GA-83/Versión 2
CARACTERISTICAS DE HTML
Formato de las Etiquetas HTML
Cada elemento de un documento HTML consta de una etiqueta de comienzo, un bloque de texto y una etiqueta de fin con el siguiente formato:
<etiqueta>bloque de texto</etiqueta>
En el caso de un titular de tipo 2 sería
<h2>Titular de tipo 2</h2>
Estos elementos se denominan contenedores, porque contienen un bloque de texto entre las etiquetas de comienzo y fin.
También existen elementos vacíos, que no tienen contenido y únicamente tienen una etiqueta de inicio <etiqueta>. Podemos verlo con la etiqueta de salto
de línea:
línea 1 <br> línea 2
Resultado
línea 1
línea 2
¿Pueden tener atributos las etiquetas?
Muchos elementos tienen atributos que definen propiedades del elemento:
<etiqueta atributo="valor"> bloque de texto </etiqueta>
Así en el ejemplo del título anterior podríamos añadir
<h2 align=center> Titular de nivel 1 centrado</h2>
Página
HTML no distingue entre mayúsculas y minúsculas. Cuando es importante hacerlo, como al poner un título o un atributo, hay que ponerlo entre comillas
dobles como en
2
¿Hay distinción entre mayúsculas y minúsculas?
DESARROLLO DE ACTIVIDADES PEDAGÓGICAS
Código: FOR-GA-83/Versión 2
<a href=”index.aspx” title=”Hooping”>
¿Cómo se escriben comentarios?
Los comentarios se escriben en HTML empezando con <!-- y terminando con -- > como se ve a continuación
<!-- Ejemplo de comentario -- >
¿Cómo se interpretan los espacios, tabulaciones y retornos de carro?
Los espacios, tabulaciones, líneas en blanco y retornos de carro del documento HTML se ignoran, tomándose como un único espacio en blanco. Esto
permite añadir espacios para aumentar la claridad del documento.
Entonces, ¿Cómo género en el código los espacios en blanco, tabulaciones y retornos de carro?
Para generar estos caracteres especiales debemos usar el siguiente código:
Espacio:
 
Tabulación:
<blockquote></blockquote>
Retorno de carro:
<br/>
¿Y los caracteres con acentos o la ñ?
Estos caracteres se escriben poniendo el carácter ampersand (&) seguido del nombre asociado al carácter y un punto y coma (;). Ejemplos:
3
á
é
í
&ocaute;
ú
ñ
Página
á
é
í
ó
ú
ñ
DESARROLLO DE ACTIVIDADES PEDAGÓGICAS
Código: FOR-GA-83/Versión 2
¿Qué estructuración tiene el HTML?
HTML tiene unas reglas estructurales que indican dónde pueden y no pueden ir los elementos.
Tenemos el ejemplo de los titulares, que son independientes entre ellos, no pudiendo contenerse unos a otros. El siguiente código sería incorrecto
< h1><h2>contenido</h2></h1>
Las etiquetas tienen que seguir un orden piramidal, las primeras que se abren son las últimas que se cierran.
< 1><2><3><4><5>Contenido<5><4><3><2><1>
RECURSOS Y EQUIPOS REQUERIDOS
Página
4
Equipos de Computo
Video Beam