REVISTA ESTIQUETAS

ETIQUETAS HTML Y
CONCEPTOS BASE
DE
ESTILOS CSS.
DISEÑO GRÁFICO Y MULTIMEDIA

OBJETIVO
Analiza el funcionamiento de las diferentes etiquetas
HTML básicas, para la creación de páginas web,
además crea estilos css de bloque, de fondo, de texto,
de imágenes e hipervínculos, ayudando en la presentación
de la misma, mediante la resolución de ejercicios
empleando Dreamweaver.

INDICE
Conceptos de las Etiquetas HTML 1
Estructura Global.
2 - 3
Estructura del cuerpo.
4 - 5
Etiqueta Tabla.
Etiqueta párrafos.
Etiqueta títulos.
Etiqueta Imágenes.
Etiqueta Estilos.
Etiqueta Vínculos.
Etiqueta Color.
6 - 9
10
11
12
13
14
15

CONCEPTOS DE LAS ETIQUETAS HTML
Definición: Las etiquetas HTML son fragmentos de texto rodead os
por corchetes angulares < >, que tienen funciones y usos específicos
y se utilizan para escribir código HTML.
Las etiquetas o tags son la forma de escribir código HTML.
En HTML existen etiquetas de apertura y etiquetas de cierre, tienen
la forma: . Donde es la etiqueta
de apertura y es la etiqueta de cierre indicada por la
diagonal. HTML tiene definidas gran variedad de etiquetas para
distintos usos.
Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y
etiqueta de cierre, es importante aclarar que no todas las etiquetas
tienen su correspondiente etiqueta de cierre.
Algunos ejemplos de etiquetas son:
Etiquetas con etiqueta de cierre
Apertura
Cierre
1

ESTRUCTURA GLOBAL
HTML ofrece diferentes formas para construir y organizar la información en el
cuerpo del documento.
Los documentos HTML se encuentran estrictamente organizados. Cada parte del
documento está diferenciada, declarada y determinada por etiquetas específicas. En
esta parte del capítulo vamos a ver cómo construir la estructura global de un documento
HTML y los nuevos elementos semánticos incorporados en HTML5.
IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De esta forma, el modo estándar del
navegador esv activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario.
Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este
lenguaje tiene su raíz en el elemento . Este elemento envolverá al resto del código:
Va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre:
2

La siguiente gran sección que es parte principal de la organización de un documento
HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es
especificadoentre etiquetas . Estas etiquetas tampoco han cambiado en
relación con versiones previas de HTML:
Es momento de construir la cabecera del documento.
Algunos cambios e innovaciones fueron incorporados
dentro de la cabecera, y uno de ellos es la etiqueta que
define el juego de caracteres a utilizar para mostrar el
documento. Ésta es una etiqueta que especifica
cómo el texto será presentado en pantalla:
Otro importante elemento que va dentro de la cabecera
del documento es . Este elemento es usado para
incorporar estilos, códigos Javascript, imágenes o
iconos desde archivos externos.
3

ESTRUCTURA CUERPO
La estructura del cuerpo (el código entre las etiquetas ) generará la parte visible del documento. Este es el código que producirá nuestra
página web.
Conceptos básicos: HTML usa un lenguaje de etiquetas para construir páginas
web. Estas etiquetas HTML son palabras clave y atributos rodeados de los signos
mayor y menor (por ejemplo, ). En este caso, html es la
palabra clave y lang es el atributo con el valor es. La mayoría de las etiquetas
HTML se utilizan en pares, una etiqueta de apertura y una de cierre, y el
contenido se declara entre ellas.
IMPORTANTE: HTML5 es extremadamente flexible en
cuanto a la estructura y a
los elementos utilizados para construirla. El elemento
puede ser incluido
sin ningún atributo o incluso ignorado completamente.
tiene que ser dividido entre dos
secciones principales. Al igual que en
versiones
cabecera
cuerpo.
Conceptos básicos: El texto entre las etiquetas es
el título del documento
que estamos creando. Normalmente este texto es mostrado
en la barra superior de
la ventana del navegador.
El siguiente paso, por lo tanto, será crear
estas dos secciones en el código usando
los elementos
y ya conocidos.
4

La etiqueta , como siempre, simplemente especifica el
título del documento, y no
hay nada nuevo para comentar:
Este texto es el título del documento
.
El cuerpo representa la parte visible de todo documento
y es especificado
entre etiquetas .
Conceptos básicos: Hasta el momento tenemos un
código simple pero con una
estructura compleja. Esto es porque el código HTML no
está formado por un
conjunto de instrucciones secuenciales. HTML es un
lenguaje de etiquetas, un
listado de elementos que usualmente se utilizan en pares
y que pueden ser
anidados (totalmente contenidos uno dentro del otro). E
5

ESTRUCTURA TABLA
El elemento HTML table inserta una tabla en el documento. Las tablas son
una característica muy útil y poderosa del lenguaje HTML, ya que brindan
una solución a la hora de insertar cuanlquier tipo de información tabulada
en un documento.
Este elemento es el principal contenedor de una tabla, pero muchos otros
son necesarios para definir una tabla correctamente. Otros elementos que
constituyen a una tabla son:
Filas (elemento HTML tr)
Celdas (elemento HTML td)
Celdas de encabezado (elemento HTML th)
Título (elemento HTML caption)
Una tabla HTML puede ser básicamente considerada como un conjunto de
filas que contienen celdas, pero no al revés. Esto se debe a que el elemento
HTML tr está diseñado para contener elementos de celdas (HTML td y
HTML th).
Una tabla puede ser dividida horizontalmente, definiendo las siguientes secciones:
Encabezado (elemento HTML thead)
Cuerpo o cuerpos (elemento HTML tbody)
Pie (elemento HTML tfoot)
Además, las columnas pueden ser temáticamente agrupadas mediante el uso del elemento HTML colgroup.
6

Atributos
id (name)
El atributo "id" asigna un identificador al elemento asociado. Este identificador
debe ser único en todo el documento y puede ser usado para
referirse a este elemento en otras instancias title (text)
El propósito de este atributo es proveer un título para el elemento. Su
valor debe ser una descripción corta y precisa del contenido del
elemento. Habitualmente, los navegadores muestran el contenido de
este atributo en un recuadro al posar el mouse encima del contenido
del elemento por un pequeño período de tiempo.
dir
Este atributo indica la dirección en que el texto del elemento debe ser
leído. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
RTL: derecha a izquierda.
LTR: izquierda a derecha.
summary (text)
Provee un resumen de la estructura y/o propósito de la tabla. Se supone
que la información en este atributos expande el contenido del elemento
HTML caption.
7

width (length)
Este atributo especifica el ancho deseado de toda la tabla. Si el mismo no
es especificado de alguna forma, los agentes de usuario determinan su
valor.
lang (langcode)
specifica el lenguaje del contenido de un elemento. El valor por defecto
es "desconocido".
8

frame
especifica qué lados de recuadro alrededor de la tabla serán mostrados.
Los valores posibles son (insensibles a mayúsculas/minúsculas)
rules
Especifica qué reglas deben ser mostradas entre las celdas en una
tabla.
cellspacing (length)
Define el ancho del espacio entre que se dejará entre las celdas.
cellpadding (length)
align
Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya
no es recomendado.
class (cdata)
El atributo "class" asigna un nombre de clase (o una lista de nombres de
clases separadas por espacios) al elemento contenedor.
style (style)
Este atributo es utilizado para definir atributos presentacionales para el
elemento contenedor, y su valor debería estar compuesto por propiedades
de hojas de estilo.
Define el ancho del espacio que se dejará entre el contenido de las
celdas y sus bordes.
9

ETIQUETA PÁRRAFOS
Descripción
El elemento HTML p inserta un párrafo en el documento. Los párrafos son elementos
a nivel de bloque que constituyen una estructura básica de un documento y
son usalmente mostrados por los navegadores con márgenes superior e inferior.
Los párrafos no pueden contener elementos a nivel de bloque, incluyendo otros
párrafos.
Código
Un párrafo en un elemento a nivel de bloque que no permite otros elementos
a nivel de bloque como contenido. De echo, no puede contener a otros párrafos.
Los párrafos también pueden tener estilos personalizados que los autores
pueden definir a través de la hojas de estilo. El atributo "align" de este elemento ha
sido desaprobado debido a su naturaleza presentacional.
Vista
Un párrafo en un elemento a nivel de bloque que no permite otros elementos a
nivel de bloque como contenido. De echo, no puede contener a otros párrafos.
Los párrafos también pueden tener estilos personalizados que los autores pueden
definir a través de la hojas de estilo. El atributo "align" de este elemento ha sido
desaprobado debido a su naturaleza presentacional.
10

ETIQUETA TÍTULO
Hay hasta 6 etiquetas en HTML para definir títulos o secciones. Todas ellas llevan
por defecto el texto en negrita, y son: , , , , y . La
etiqueta es la de mayor importancia y por tanto se utiliza para definir los
titulares de la página. La importancia del resto de etiquetas es descendente, de
forma que la etiqueta es la que se utiliza para delimitar las secciones menos
importantes de la página.
Todas ellas tienen su respectiva etiqueta de cierre, y al igual
que en los párrafos, el texto del título va encerrado entre las
etiquetas de apertura y cierre:
Texto_del_título de nivel 1
Texto_del_título de nivel 2
..............
Texto_del_título de nivel 6
Al igual que los párrafos, estas son etiquetas de bloque, de manera que empiezan siempre al principio de una nueva línea y provocan que
el elemento siguiente se coloque siempre al principio de una nueva línea.
El tamaño del texto de las etiquetas va decreciendo desde la h1 con un tamaño más grande a la h6 que es la de menor tamaño.
11

ETIQUETA IMÁGENES
Debemos tener en cuenta que las imágenes tienen que tener los formatos GIF, JPG o PNG. Las imágenes dentro de una página web se incluyen
utilizando la etiqueta , que no tiene una etiqueta correspondiente de cierre y es una etiqueta muy sencilla, que dispone de varios atributos
para modificar como se verá la imagen (los atributos src y alt son siempre obligatorios):
12

ETIQUETA ESTILO
Las etiquetas de estilo modifican la tipografía del texto. Pueden anidarse con otras etiquetas de estilo, así como con programas para el procesamiento
de textos.
Esta es una lista de las etiquetas de estilo reconocidas por la mayoría de los navegadores (cada cual a su manera aunque algunos pueden tener
efectos idénticos)
13

ETIQUETA VINCULOS
Los vínculos son una parte vital de HTML y consituyen la razón misma por la cual la WWW existe. Internet es considerada una "red" debido a
cómo los vínculos conectan todas estas partes singulares (o documentos) unas con otras.
La función básica de un vínculo es la de hacer una referencia, de un documento HTML a un recurso, que puede ser a su vez otro documento.
En otras paralabras, un enlace define una relación entre dos recursos en la web.
14

ETIQUETA COLOR
Las entradas del tipo «color» son sencillas debido al número limitado
de atributos que admiten.
Proporcionar un color predeterminado
Puede actualizar el ejemplo simple anterior para definir un valor
predeterminado, de manera que el botón muestrario de colores
tenga precargado ese color y el selector de colores (si lo hay) se abra
con ese color preseleccionado también:
Si no especifica un valor, se utilizará «#000000», negro, de manera
predeterminada. El valor debe especificarse en la notación hexadecimal
de siete caracteres; esto es, el carácter «#» seguido de dos dígitos para
representar el rojo, el verde y el azul: «#rrggbb». Si utiliza colores especificados
en cualquier otro formato (como los nombres de colores CSS o
las funciones cromáticas de CSS como rgb() o rgba()), deberá convertirlos
en valores hexadecimales antes de definir value.
Llevar un seguimiento de los cambios de color
Como sucede con otros tipos de , existen dos sucesos que
pueden emplearse para detectar cambios en el valor de color: input y
change. El suceso input se desencadena en el elemento siempre
que cambia el color. El suceso change se desencadena cuando el
usuario cierra el selector de colores.
15

BIBLIOGRAFIA
https://gutl.jovenclub.cu/wp-content/uploads/2013/10/El+gran+libro+de+HTML5+CSS3+y+Javascrip.pdf
https://es.ccm.net/contents/246-etiquetas-de-estilo
https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-imagenes
http://cv.uoc.edu/web/~dcastilloce/html_estructura.html
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=484:etiquetas-html-basicas-imagenes-img-src-alt-width-height-deprecated-border-align-rutas-cu007
14b&catid=69&Itemid=192
https://sites.google.com/site/dwebhtml/reference/tags/table
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=484:etiquetas-html-basicas-imagenes-img-src-alt-width-height-deprecated-border-align-rutas-cu007
14b&catid=69&Itemid=19