REVISTA ESTIQUETAS
ETIQUETAS HTML Y CONCEPTOS BASE DE ESTILOS CSS. DISEÑO GRÁFICO Y MULTIMEDIA
- Page 2 and 3: OBJETIVO Analiza el funcionamiento
- Page 4 and 5: CONCEPTOS DE LAS ETIQUETAS HTML Def
- Page 6 and 7: La siguiente gran sección que es p
- Page 8 and 9: La etiqueta , como siempre, simplem
- Page 10 and 11: Atributos id (name) El atributo "id
- Page 12 and 13: frame especifica qué lados de recu
- Page 14 and 15: ETIQUETA TÍTULO Hay hasta 6 etique
- Page 16 and 17: ETIQUETA ESTILO Las etiquetas de es
- Page 18 and 19: ETIQUETA COLOR Las entradas del tip
ETIQUETAS HTML Y<br />
CONCEPTOS BASE<br />
DE<br />
ESTILOS CSS.<br />
DISEÑO GRÁFICO Y MULTIMEDIA
OBJETIVO<br />
Analiza el funcionamiento de las diferentes etiquetas<br />
HTML básicas, para la creación de páginas web,<br />
además crea estilos css de bloque, de fondo, de texto,<br />
de imágenes e hipervínculos, ayudando en la presentación<br />
de la misma, mediante la resolución de ejercicios<br />
empleando Dreamweaver.
INDICE<br />
Conceptos de las Etiquetas HTML 1<br />
Estructura Global.<br />
2 - 3<br />
Estructura del cuerpo.<br />
4 - 5<br />
Etiqueta Tabla.<br />
Etiqueta párrafos.<br />
Etiqueta títulos.<br />
Etiqueta Imágenes.<br />
Etiqueta Estilos.<br />
Etiqueta Vínculos.<br />
Etiqueta Color.<br />
6 - 9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15
CONCEPTOS DE LAS ETIQUETAS HTML<br />
Definición: Las etiquetas HTML son fragmentos de texto rodead os<br />
por corchetes angulares < >, que tienen funciones y usos específicos<br />
y se utilizan para escribir código HTML.<br />
Las etiquetas o tags son la forma de escribir código HTML.<br />
En HTML existen etiquetas de apertura y etiquetas de cierre, tienen<br />
la forma: . Donde es la etiqueta<br />
de apertura y es la etiqueta de cierre indicada por la<br />
diagonal. HTML tiene definidas gran variedad de etiquetas para<br />
distintos usos.<br />
Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y<br />
etiqueta de cierre, es importante aclarar que no todas las etiquetas<br />
tienen su correspondiente etiqueta de cierre.<br />
Algunos ejemplos de etiquetas son:<br />
Etiquetas con etiqueta de cierre<br />
Apertura<br />
<br />
<br />
<br />
<br />
Cierre<br />
<br />
<br />
<br />
<br />
1
ESTRUCTURA GLOBAL<br />
HTML ofrece diferentes formas para construir y organizar la información en el<br />
cuerpo del documento.<br />
Los documentos HTML se encuentran estrictamente organizados. Cada parte del<br />
documento está diferenciada, declarada y determinada por etiquetas específicas. En<br />
esta parte del capítulo vamos a ver cómo construir la estructura global de un documento<br />
HTML y los nuevos elementos semánticos incorporados en HTML5.<br />
<br />
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<br />
navegador esv activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario.<br />
<br />
Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este<br />
lenguaje tiene su raíz en el elemento . Este elemento envolverá al resto del código:<br />
<br />
Va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre:<br />
2
La siguiente gran sección que es parte principal de la organización de un documento<br />
HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es<br />
especificadoentre etiquetas . Estas etiquetas tampoco han cambiado en<br />
relación con versiones previas de HTML:<br />
<br />
Es momento de construir la cabecera del documento.<br />
Algunos cambios e innovaciones fueron incorporados<br />
dentro de la cabecera, y uno de ellos es la etiqueta que<br />
define el juego de caracteres a utilizar para mostrar el<br />
documento. Ésta es una etiqueta que especifica<br />
cómo el texto será presentado en pantalla:<br />
<br />
Otro importante elemento que va dentro de la cabecera<br />
del documento es . Este elemento es usado para<br />
incorporar estilos, códigos Javascript, imágenes o<br />
iconos desde archivos externos.<br />
3
ESTRUCTURA CUERPO<br />
La estructura del cuerpo (el código entre las etiquetas ) generará la parte visible del documento. Este es el código que producirá nuestra<br />
página web.<br />
<br />
Conceptos básicos: HTML usa un lenguaje de etiquetas para construir páginas<br />
web. Estas etiquetas HTML son palabras clave y atributos rodeados de los signos<br />
mayor y menor (por ejemplo, ). En este caso, html es la<br />
palabra clave y lang es el atributo con el valor es. La mayoría de las etiquetas<br />
HTML se utilizan en pares, una etiqueta de apertura y una de cierre, y el<br />
contenido se declara entre ellas.<br />
IMPORTANTE: HTML5 es extremadamente flexible en<br />
cuanto a la estructura y a<br />
los elementos utilizados para construirla. El elemento<br />
puede ser incluido<br />
sin ningún atributo o incluso ignorado completamente.<br />
<br />
tiene que ser dividido entre dos<br />
secciones principales. Al igual que en<br />
versiones<br />
cabecera<br />
cuerpo.<br />
Conceptos básicos: El texto entre las etiquetas es<br />
el título del documento<br />
que estamos creando. Normalmente este texto es mostrado<br />
en la barra superior de<br />
la ventana del navegador.<br />
El siguiente paso, por lo tanto, será crear<br />
estas dos secciones en el código usando<br />
los elementos<br />
y ya conocidos.<br />
4
La etiqueta , como siempre, simplemente especifica el<br />
título del documento, y no<br />
hay nada nuevo para comentar:<br />
<br />
<br />
<br />
<br />
<br />
<br />
Este texto es el título del documento<br />
<br />
<br />
<br />
<br />
.<br />
El cuerpo representa la parte visible de todo documento<br />
y es especificado<br />
entre etiquetas .<br />
Conceptos básicos: Hasta el momento tenemos un<br />
código simple pero con una<br />
estructura compleja. Esto es porque el código HTML no<br />
está formado por un<br />
conjunto de instrucciones secuenciales. HTML es un<br />
lenguaje de etiquetas, un<br />
listado de elementos que usualmente se utilizan en pares<br />
y que pueden ser<br />
anidados (totalmente contenidos uno dentro del otro). E<br />
5
ESTRUCTURA TABLA<br />
El elemento HTML table inserta una tabla en el documento. Las tablas son<br />
una característica muy útil y poderosa del lenguaje HTML, ya que brindan<br />
una solución a la hora de insertar cuanlquier tipo de información tabulada<br />
en un documento.<br />
Este elemento es el principal contenedor de una tabla, pero muchos otros<br />
son necesarios para definir una tabla correctamente. Otros elementos que<br />
constituyen a una tabla son:<br />
Filas (elemento HTML tr)<br />
Celdas (elemento HTML td)<br />
Celdas de encabezado (elemento HTML th)<br />
Título (elemento HTML caption)<br />
Una tabla HTML puede ser básicamente considerada como un conjunto de<br />
filas que contienen celdas, pero no al revés. Esto se debe a que el elemento<br />
HTML tr está diseñado para contener elementos de celdas (HTML td y<br />
HTML th).<br />
Una tabla puede ser dividida horizontalmente, definiendo las siguientes secciones:<br />
Encabezado (elemento HTML thead)<br />
Cuerpo o cuerpos (elemento HTML tbody)<br />
Pie (elemento HTML tfoot)<br />
Además, las columnas pueden ser temáticamente agrupadas mediante el uso del elemento HTML colgroup.<br />
6
Atributos<br />
id (name)<br />
El atributo "id" asigna un identificador al elemento asociado. Este identificador<br />
debe ser único en todo el documento y puede ser usado para<br />
referirse a este elemento en otras instancias title (text)<br />
El propósito de este atributo es proveer un título para el elemento. Su<br />
valor debe ser una descripción corta y precisa del contenido del<br />
elemento. Habitualmente, los navegadores muestran el contenido de<br />
este atributo en un recuadro al posar el mouse encima del contenido<br />
del elemento por un pequeño período de tiempo.<br />
dir<br />
Este atributo indica la dirección en que el texto del elemento debe ser<br />
leído. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:<br />
RTL: derecha a izquierda.<br />
LTR: izquierda a derecha.<br />
summary (text)<br />
Provee un resumen de la estructura y/o propósito de la tabla. Se supone<br />
que la información en este atributos expande el contenido del elemento<br />
HTML caption.<br />
7
width (length)<br />
Este atributo especifica el ancho deseado de toda la tabla. Si el mismo no<br />
es especificado de alguna forma, los agentes de usuario determinan su<br />
valor.<br />
lang (langcode)<br />
specifica el lenguaje del contenido de un elemento. El valor por defecto<br />
es "desconocido".<br />
8
frame<br />
especifica qué lados de recuadro alrededor de la tabla serán mostrados.<br />
Los valores posibles son (insensibles a mayúsculas/minúsculas)<br />
rules<br />
Especifica qué reglas deben ser mostradas entre las celdas en una<br />
tabla.<br />
cellspacing (length)<br />
Define el ancho del espacio entre que se dejará entre las celdas.<br />
cellpadding (length)<br />
align<br />
Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya<br />
no es recomendado.<br />
class (cdata)<br />
El atributo "class" asigna un nombre de clase (o una lista de nombres de<br />
clases separadas por espacios) al elemento contenedor.<br />
style (style)<br />
Este atributo es utilizado para definir atributos presentacionales para el<br />
elemento contenedor, y su valor debería estar compuesto por propiedades<br />
de hojas de estilo.<br />
Define el ancho del espacio que se dejará entre el contenido de las<br />
celdas y sus bordes.<br />
9
ETIQUETA PÁRRAFOS<br />
Descripción<br />
El elemento HTML p inserta un párrafo en el documento. Los párrafos son elementos<br />
a nivel de bloque que constituyen una estructura básica de un documento y<br />
son usalmente mostrados por los navegadores con márgenes superior e inferior.<br />
Los párrafos no pueden contener elementos a nivel de bloque, incluyendo otros<br />
párrafos.<br />
Código<br />
Un párrafo en un elemento a nivel de bloque que no permite otros elementos<br />
a nivel de bloque como contenido. De echo, no puede contener a otros párrafos.<br />
Los párrafos también pueden tener estilos personalizados que los autores<br />
pueden definir a través de la hojas de estilo. El atributo "align" de este elemento ha<br />
sido desaprobado debido a su naturaleza presentacional.<br />
Vista<br />
Un párrafo en un elemento a nivel de bloque que no permite otros elementos a<br />
nivel de bloque como contenido. De echo, no puede contener a otros párrafos.<br />
Los párrafos también pueden tener estilos personalizados que los autores pueden<br />
definir a través de la hojas de estilo. El atributo "align" de este elemento ha sido<br />
desaprobado debido a su naturaleza presentacional.<br />
10
ETIQUETA TÍTULO<br />
Hay hasta 6 etiquetas en HTML para definir títulos o secciones. Todas ellas llevan<br />
por defecto el texto en negrita, y son: , , , , y . La<br />
etiqueta es la de mayor importancia y por tanto se utiliza para definir los<br />
titulares de la página. La importancia del resto de etiquetas es descendente, de<br />
forma que la etiqueta es la que se utiliza para delimitar las secciones menos<br />
importantes de la página.<br />
Todas ellas tienen su respectiva etiqueta de cierre, y al igual<br />
que en los párrafos, el texto del título va encerrado entre las<br />
etiquetas de apertura y cierre:<br />
Texto_del_título de nivel 1 <br />
Texto_del_título de nivel 2 <br />
..............<br />
Texto_del_título de nivel 6 <br />
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<br />
el elemento siguiente se coloque siempre al principio de una nueva línea.<br />
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.<br />
11
ETIQUETA IMÁGENES<br />
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<br />
utilizando la etiqueta , que no tiene una etiqueta correspondiente de cierre y es una etiqueta muy sencilla, que dispone de varios atributos<br />
para modificar como se verá la imagen (los atributos src y alt son siempre obligatorios):<br />
12
ETIQUETA ESTILO<br />
Las etiquetas de estilo modifican la tipografía del texto. Pueden anidarse con otras etiquetas de estilo, así como con programas para el procesamiento<br />
de textos.<br />
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<br />
efectos idénticos)<br />
13
ETIQUETA VINCULOS<br />
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<br />
cómo los vínculos conectan todas estas partes singulares (o documentos) unas con otras.<br />
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.<br />
En otras paralabras, un enlace define una relación entre dos recursos en la web.<br />
14
ETIQUETA COLOR<br />
Las entradas del tipo «color» son sencillas debido al número limitado<br />
de atributos que admiten.<br />
Proporcionar un color predeterminado<br />
Puede actualizar el ejemplo simple anterior para definir un valor<br />
predeterminado, de manera que el botón muestrario de colores<br />
tenga precargado ese color y el selector de colores (si lo hay) se abra<br />
con ese color preseleccionado también:<br />
<br />
Si no especifica un valor, se utilizará «#000000», negro, de manera<br />
predeterminada. El valor debe especificarse en la notación hexadecimal<br />
de siete caracteres; esto es, el carácter «#» seguido de dos dígitos para<br />
representar el rojo, el verde y el azul: «#rrggbb». Si utiliza colores especificados<br />
en cualquier otro formato (como los nombres de colores CSS o<br />
las funciones cromáticas de CSS como rgb() o rgba()), deberá convertirlos<br />
en valores hexadecimales antes de definir value.<br />
Llevar un seguimiento de los cambios de color<br />
Como sucede con otros tipos de , existen dos sucesos que<br />
pueden emplearse para detectar cambios en el valor de color: input y<br />
change. El suceso input se desencadena en el elemento siempre<br />
que cambia el color. El suceso change se desencadena cuando el<br />
usuario cierra el selector de colores.<br />
15
BIBLIOGRAFIA<br />
https://gutl.jovenclub.cu/wp-content/uploads/2013/10/El+gran+libro+de+HTML5+CSS3+y+Javascrip.pdf<br />
https://es.ccm.net/contents/246-etiquetas-de-estilo<br />
https://lenguajehtml.com/p/html/multimedia/etiquetas-html-de-imagenes<br />
http://cv.uoc.edu/web/~dcastilloce/html_estructura.html<br />
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<br />
14b&catid=69&Itemid=192<br />
https://sites.google.com/site/dwebhtml/reference/tags/table<br />
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<br />
14b&catid=69&Itemid=19