02 Contenido HTML I V8 PDF

Programación HTML I
SEMANA 2
Fundamentos de HTML, parte II
Todos los derechos de autor son de la exclusiva propiedad de IACC o de los otorgantes de sus licencias. No está
permitido copiar, reproducir, reeditar, descargar, publicar, emitir, difundir, poner a disposición del público ni 1
ESTE
utilizarDOCUMENTO
los contenidos paraCONTIENE LAdeSEMANA
fines comerciales 2
ninguna clase.
2
ESTE DOCUMENTO CONTIENE LA SEMANA 2
ÍNDICE
FUNDAMENTOS DE HTML: PARTE I..................................................................................................... 4

OBJETIVOS ESPECÍFICOS ........................................................................................................................... 4
INTRODUCCIÓN ...................................................................................................................................... 4
1. ETIQUETAS (TAGS) HTML ............................................................................................................ 5
1.1. ESTRUCTURA DE ORDENAMIENTO Y ANIDAMIENTO DE ETIQUETA ................................... 6
2. REGLAS DE USO DE HTML ........................................................................................................... 6
3. ESPACIADO ................................................................................................................................ 11
4. ETIQUETAS CON SALTO DE LÍNEA AUTOMÁTICO...................................................................... 13
5. SÍMBOLOS ESPECIALES .............................................................................................................. 14
6. NOMBRES DE ARCHIVO ............................................................................................................. 18
COMENTARIO FINAL.......................................................................................................................... 20
REFERENCIAS........................................................................................................................................ 21
3
FUNDAMENTOS DE HTML, PARTE II
OBJETIVOS ESPECÍFICOS
 Comprender el uso y anidamiento de etiquetas en la estructura del HTML.
 Comprender y aplicar las reglas de espaciado, símbolos especiales y etiquetas de salto de
línea utilizando herramientas de prueba.
 Analizar la conformación y clasificación de los nombres de archivos.
INTRODUCCIÓN
En la semana anterior se definió la estructura básica de una página web, en esta semana se
complementará dicha información, revisando aspectos básicos en relación a elementos y etiquetas
que son contenidos en esta estructura, en cuanto a su disposición dentro de la estructura de la
página.
Se analizará la forma correcta del uso de nombres de archivo, y los distintos tipos que podemos
encontrar al desarrollar un sitio web.
4
1. ETIQUETAS (TAGS) HTML
Todo documento HTML está compuesto por elementos que son identificados por las etiquetas o
tags (<etiqueta>). Estos elementos contienen un significado semántico acerca de qué parte del
documento representan: por ejemplo <title> se refiere al título de la página.
Estos elementos se organizan en lo que se conoce como árbol de elementos de la página y pueden
contener a su vez otros elementos y texto. Por ejemplo:
Fuente: material preparado para esta asignatura.
A continuación veremos una tabla con las etiquetas básicas de HTML:
Tabla de etiquetas básicas
5
1.1. ESTRUCTURA DE ORDENAMIENTO Y ANIDAMIENTO DE ETIQUETA
En HTML, al escribir un elemento, se debe incorporar una etiqueta (tag) de inicio y una (tag) al
final.
Las etiquetas (o tags) están compuestas de un nombre de elemento y rodeadas de paréntesis

angulares: "<" y ">".
La etiqueta final tiene un slash (/) antes del nombre del elemento para distinguirlo de la etiqueta
inicial.
Por ejemplo:
Este es un elemento HTML, con su respectiva etiqueta de inicio y fin.
Este texto está en negrita
2. REGLAS DE USO DE HTML
La mayoría de los elementos poseen atributos, es decir, una característica o propiedad en

particular. Con ellos es posible lograr una mayor personalización en el diseño y formato de los
elementos.
Un atributo se conforma por el nombre que lo identifica y el valor que puede tomar. La sintaxis
general en HTML para escribir un atributo es del tipo: nombre="valor".
Por ejemplo, align=”center” es un atributo para alinear un objeto, con un valor que indica que la
alineación será “centrada”.
Los atributos deben definirse en la etiqueta de inicio y los valores siempre deben ir entre comillas.
Si bien es cierto cada elemento HTML define sus propios atributos, muchos son comunes. Así,
resultará adecuado explicar por separado los atributos comunes de los elementos. Los atributos se
pueden agrupar en cuatro tipos, de acuerdo a la función que desempeñan (Librosweb, 2015):
 Atributos básicos: aplicables para casi todos los elementos de HTML.

 Atributos para regionalización: aplicables para páginas que tendrán contenido en varios
idiomas.
 Atributos para gestión de eventos: aplicables para páginas que emplearán JavaScript para
diversos procedimientos.
 Atributos de foco: aplicables para el acceso a sitios web.
6
A continuación se detalla cada uno de los tipos de tributos comunes.
ATRIBUTOS BÁSICOS
Los atributos que se presentan a continuación son aplicables para la mayoría de las etiquetas de
HTML (óp. cit.):
Tabla de atributos básicos
Gran parte de las páginas web de hoy utilizan los atributos id y class de forma masiva. No obstante
ello, estos atributos solo son de utilidad cuando se trabaja en conjunto con JavaScript y CSS.
En relación con el valor de estos dos atributos solo pueden contener guiones medios (-), guiones
bajos (_), letras y/o números, sin embargo no pueden comenzar con números. Adicionalmente, los
navegadores pueden discernir entre mayúsculas de minúsculas, por lo que no se aconseja utilizar
letras como ñ ni acentos, porque puede que no funcionen adecuadamente en todas las versiones
de los navegadores.
ATRIBUTOS PARA REGIONALIZACIÓN
Los atributos que se describen a continuación son aplicables para páginas que tendrán contenido
en varios idiomas (óp. cit.):
7
Tabla de atributos para regionalización
En XHTML, el atributo xml:lang tiene mayor prioridad que lang y su uso es imperativo si se utiliza el
atributo lang. Los idiomas se identifican a través de un código estandarizado, por ejemplo “es”
para español, “en” para inglés, etc.
Ya que la palabra regionalización o internacionalización es extensa, se suele abreviar con i18n (así
se indica que entre la letra i y la n hay 18 letras en la palabra internacionalización).
ATRIBUTOS PARA GESTIÓN DE EVENTOS
Aplicables en páginas donde se utiliza JavaScript para operaciones dinámicas. Toda vez que se
genera un evento dentro del navegador como pulsar una tecla, desplazar el mouse o pulsar
cualquier botón del mouse, se produce un evento dentro del navegador y mediante JavaScript y
los siguientes atributos es posible responder retroactivamente a cada uno de estos eventos (óp.
cit.):
8
Tabla de eventos
ATRIBUTOS DE FOCO
Cuando se selecciona un elemento en una página, este adquiere el foco, es decir, se despliegan las
funcionalidades asociadas a ese elemento. Por ejemplo, cuando un usuario selecciona con su
mouse un cuadro de texto y el puntero del mouse es reemplazado por una barra que indica que se
puede escribir sobre él (generalmente se le denomina cursor). Si el usuario selecciona
posteriormente otro elemento, el elemento anterior pierde el foco y el nuevo elemento
seleccionado lo obtiene.
HTML define algunos atributos específicos para controlar cómo se seleccionan los elementos (óp.
cit.):
9
Tabla de atributos de foco
El atributo tabindex permite definir el orden en el que se seleccionan los elementos y es útil en la
creación de formularios complejos.
El atributo accesskey permite crear el acceso rápido a un elemento, la combinación de teclas que
activa este acceso dependerá del navegador que se utilice, es por ello que según el navegador
antes de la tecla definida se deben presionar otras, para Internet Explorer ALT +, en el caso de
Firefox Alt + Shift, en el navegador Opera se pulsa Shift + Esc, en Safari Ctrl +, etc.
Podemos anidar las etiquetas, es decir insertar unas etiquetas dentro de otras. A esto se le
denomina anidación de elementos.
A continuación se expone un ejemplo:
Con esto se obtendrá en el navegador lo siguiente:
10
La anidación puede hacerse escribiendo las etiquetas en cualquier orden, pero siempre debe
guardarse la simetría.
Esta es la forma no correcta:

Esta es la forma correcta:
 ... 
 ... 
3. ESPACIADO
Al diseñar una página web con HTML, se debe tener claro que no se puede utilizar más de un
espacio a la vez para separar cualquier elemento o texto, de utilizarlos, solo uno se tomará en
cuenta y el resto se omitirá al mostrar la página en el navegador. Existen unos elementos que
permitirán definir el espaciado dentro de la página o documento.
ELEMENTO PÁRRAFO 
Al emplear un párrafo es posible ingresar además un espaciado de separación. Este normalmente

establece dos líneas con el próximo texto. Es aplicable para separar elementos HTML en general,
es decir no aplica solo para separar texto.
Para utilizarlo, se debe colocar la etiqueta en el lugar de la página donde se desee establecer
un espaciado. La etiqueta que indica el fin del párrafo () es opcional.
Al emplear algunos elementos de HTML, por defecto se introducen separaciones de líneas antes y
después del texto, tal es el caso de: <Hn>, <HR>, <ADDRESS>, <BLOCKQUOTE>, <PRE>, <LI>, <DT>
ni <DD>, entre otros, por tanto en estos casos no es necesario introducir el elemento .
11
Ejemplo:
Y así se muestra:
&NBSP; ESPACIO EN BLANCO
Al insertar esta secuencia se conseguirá espacios en blanco que se desplegarán efectivamente. Se

deben insertar tantas secuencias como espacios en blanco se deseen obtener.
Ejemplo:
12
Se visualizará:
Fuente: material preparado para la asignatura
4. ETIQUETAS CON SALTO DE LÍNEA AUTOMÁTICO
 SALTO DE LÍNEA
Si se desea establecer un espaciado entre texto que sea menor al del elemento , se utiliza
 , este simplemente traslada a la siguiente línea sin dejar una de separación. La etiqueta 
no es necesaria, y de igual forma para los elementos que llevan implícitos un salto de línea esta no
se emplea.
Ejemplo
Luego en el navegador se verá así:
13
5. SÍMBOLOS ESPECIALES
Para incluir en una página símbolos que tienen un significado especial, por ejemplo menor que
“<”, debemos usar su nombre en código.
Los nombres de estos símbolos están precedidos por el signo “&”, luego va el nombre y al final
punto y coma “;”.
Los números de estos caracteres están compuestos por “&”, luego “#2”, a continuación el número
del símbolo y al final punto y coma “;”.
Por ejemplo, para mostrar el signo "<" debemos escribir “<” o “<” y para ingresar espacios
en blanco usamos " ". HTML los incrustará en su lugar.
Otro uso muy frecuente es el de insertar acentos en el código HTML por medio de los números de
las entidades.
14
Tabla de signos especiales, parte 1.
15
Tabla de signos especiales, parte 2
16
17
6. NOMBRES DE ARCHIVO
A la hora de diseñar páginas web, es importante resaltar que el manejo adecuado de los nombres
de los archivos implícitos permitirá una correcta navegación.
En muchas ocasiones, la persona encargada de diseñar la página web observa dentro de su

computadora que la página se ejecuta sin problema alguno, pero esto no necesariamente sucede
al publicar la página en internet. Es por eso que se tienen reglas generales para nombrar los
archivos, las que a continuación se listan:
 Se pueden nombrar las páginas indistintamente con .htm o .HTML, sin embargo al
momento de referirnos a ella, si se llamó a un archivo por ejemplo index.htm y se utiliza
index.html, el vínculo no funcionará.
 Para nombrar un archivo no se puede emplear la letra ñ ni tampoco algún otro carácter
extendido, de igual forma no se puede acentuar ni se pueden dejar espacios en blanco,
18
por lo que si es necesario separar palabras, se emplea el guión bajo (_), ejemplo
productos_en_venta.html.
 Se recomienda utilizar para los nombres letras en minúsculas, y definir nombres de corta
extensión.
 Estas reglas son aplicables para los nombres de las carpetas del sitio web a diseñar.
Por ejemplo:
19
COMENTARIO FINAL
Al finalizar la semana se pudo conocer la forma en la cual se estructura HTML, esto reviste gran
importancia al momento de decidir elaborar una página web utilizando este lenguaje de
programación, dado que existen reglas que se deben seguir para así poder elaborar de forma
adecuada cualquier sitio web. Para llevar a cabo el diseño se tienen igualmente reglas de
espaciado, símbolos especiales que pueden ser empleados y etiquetas de salto a emplear para
este fin.
Por último, el conocer la forma adecuada en la que se deben nombrar los archivos del sitio web
permitirá una correcta navegación dentro de la página elaborada.
20
REFERENCIAS
Librosweb (2015). Etiquetas y atributos. Recuperado de:
http://librosweb.es/libro/xhtml/capitulo_2/etiquetas_y_atributos.html
Uso pedagógico de las TIC (2012). Web-taller-02. Recuperado de:
http://indaleciococunubo.blogspot.com/2012_03_01_archive.html
PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:
IACC (2015). Fundamentos de HTML, parte II. Programación HTML I. Semana 2.
21
22

02 Contenido HTML I V8 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

02 Contenido HTML I V8 PDF

Cargado por

Copyright:

Formatos disponibles

Programación HTML I

FUNDAMENTOS DE HTML: PARTE I..................................................................................................... 4

Fuente: material preparado para esta asignatura.

A continuación veremos una tabla con las etiquetas básicas de HTML:

Tabla de etiquetas básicas

Fuente: material preparado para esta asignatura.

Las etiquetas (o tags) están compuestas de un nombre de elemento y rodeadas de paréntesis

Este es un elemento HTML, con su respectiva etiqueta de inicio y fin.

<b>Este texto está en negrita</b>

2. REGLAS DE USO DE HTML

La mayoría de los elementos poseen atributos, es decir, una característica o propiedad en

 Atributos básicos: aplicables para casi todos los elementos de HTML.

Tabla de atributos básicos

Fuente: material preparado para esta asignatura.

ATRIBUTOS PARA REGIONALIZACIÓN

Fuente: material preparado para esta asignatura.

ATRIBUTOS PARA GESTIÓN DE EVENTOS

Fuente: material preparado para esta asignatura.

Fuente: material preparado para esta asignatura.

A continuación se expone un ejemplo:

Con esto se obtendrá en el navegador lo siguiente:

Esta es la forma no correcta:

Fuente: material preparado para esta asignatura.

ELEMENTO PÁRRAFO <P>

Al emplear un párrafo es posible ingresar además un espaciado de separación. Este normalmente

Fuente: material preparado para esta asignatura.

Fuente: material preparado para esta asignatura.

&NBSP; ESPACIO EN BLANCO

Al insertar esta secuencia se conseguirá espacios en blanco que se desplegarán efectivamente. Se

Fuente: material preparado para la asignatura

4. ETIQUETAS CON SALTO DE LÍNEA AUTOMÁTICO

<BR> SALTO DE LÍNEA

Luego en el navegador se verá así:

Fuente: material preparado para esta asignatura.

Fuente: material preparado para esta asignatura.

Fuente: material preparado para esta asignatura.

Fuente: material preparado para esta asignatura.

Fuente: material preparado para esta asignatura.

En muchas ocasiones, la persona encargada de diseñar la página web observa dentro de su

Fuente: material preparado para esta asignatura.

Uso pedagógico de las TIC (2012). Web-taller-02. Recuperado de:

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2015). Fundamentos de HTML, parte II. Programación HTML I. Semana 2.

También podría gustarte