plantyilla eetiquetas

W
E
B
INSTITUTO TECNOLOGICO SUPERIOR
“DANIEL ALVAREZ BURNEO”
Y
M
U
L
T
I
M
E
D
I
A
DREAMWEAVER
ETIQUETAS HTML Y CONCEPTOS
BASE DE ESTILOS CSS.
INTEGRANTES: STALIN GONZALEZ
MOISES GUAMAN
GABRIEL LEON

W
E
B
Y
M
U
L
T
I
M
E
D
I
A
OBJETIVO
Analiza el funcionamiento de las diferentes etiquetas HTML
para la creación de páginas web, además crea estilos css
ayudando en la presentación de la misma, mediante la resolución
de ejercicios empleando Dreamweaver
ESTRUCTURA GLOBAL.
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.
En primer lugar necesitamos indicar el tipo de documento que estamos creando.
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:

W
E
B
Y
M
U
L
T
I
M
E
D
I
A
Continuemos construyendo nuestra plantilla. El código HTML insertado
entre las etiquetas tiene que ser dividido entre dos secciones principales.
Al igual que en versiones previas de HTML, la primera sección es la
cabecera y la segunda el cuerpo. El siguiente paso, por lo tanto, será crear
estas dos secciones en el código usando los elementos y ya
conocidos. El elemento va primero, por supuesto, y al igual que el
resto de los elementos estructurales tiene una etiqueta de apertura y una de
cierre:
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 especificado entre etiquetas . Estas etiquetas
tampoco han cambiado en relación con versiones previas de
HTML:

W
E
B
Y
M
U
L
T
I
M
E
D
I
A
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:
La etiqueta , como siempre, simplemente especifica el título del documento,
y no hay nada nuevo para comentar:
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.
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. Uno de los usos más comunes para
es la incorporación de archivos con estilos
CSS:

W
E
B
Y
M
U
L
T
I
M
E
D
I
A
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. HTML siempre ofreció diferentes formas de construir y organizar la
información dentro del cuerpo de un documento. Uno de los primeros
elementos provistos para este propósito fue . Las tablas permitían a
los diseñadores acomodar datos, texto, imágenes y herramientas dentro de
filas y columnas de celdas, incluso sin que hayan sido concebidas para este
propósito
Estructura básica
ESTRUCTURA DEL CUERPO
Cada página comienza con: < HTML > .
A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
Después, el comando < BODY >, que indica el comienzo del cuerpo de la
página. Las instrucciones HTML se escribirán a continuación, y finalizarán con <
/BODY >.
La página acabará con < /HTML > .

W
E
B
Y
M
U
L
T
I
M
E
D
I
A
ESTRUCTURA TABLA
Las tablas están incluidas en HTML
desde sus primeras versiones y son una forma fantástica
de mostrar datos claramente. Además, si las construimos
de forma semántica y correctamente, es muy sencillo
darle estilos desde CSS y cambiar su diseño con unas cuantas
propiedades CSS, puesto que mediante las etiquetas que la
componen se puede hacer referencia a cada parte de la misma.
La etiqueta sería el
elemento que contendría todos los elementos de la tabla, mientras que y
se utilizarían para cada uno de los campos de la tabla (cabecera y celda
respectivamente). Cada vez que se quisiera añadir una nueva fila, habría que
incluirlo todo dentro de una etiqueta .

W
E
B
Y
M
U
L
T
I
M
E
D
I
A
ETIQUETA PÁRRAFOS
HTML considera que los
párrafos son bloques de texto. Los navegadores hacen
lo posible para adaptar el contenido de los párrafos a la
ventana, a menos que los atributos NOWRAP o NOBR
estén explícitamente especificados.
Dentro de un párrafo, todos los espacios, tabuladores y saltos
de línea cuentan como un espacio simple. Para colocar textos
en bloques, se utiliza el par de etiquetas y . Esta etiqueta
puede incluir cualquiera de los atributos mencionados anteriormente.
Los saltos de línea (saltar de una línea a la siguiente) se crean usando
la etiqueta . La etiqueta se utiliza para insertar una línea horizontal.

W
E
B
Y
M
U
L
T
I
M
E
D
I
A
Con las etiquetas y se define el
título de cada una de las páginas de una web. No
de la web completa sino de cada página del sitio
web. Por ejemplo, si tienes una web que habla de
cocina, tendrá dentro una página que hable de una
sopa, otra de tarta de fresa, etc, etc. Pues cada una de
esas páginas ha de tener un título que represente a esa
página, no uno genérico de la web sino un concreto
para cada una de sus páginas.
tenemos una etiqueta para indicar que empieza el título y otra para
indicar que el título ha terminado, y , oki?zontal.
Título de esta página
ETIQUETA ITITULOS
ETIQUETA IMAGENES
Las imágenes utilizadas en una página web pueden ser de dos tipos: de
contenido o de decoración. En el primer caso, si la imagen pertenece al
contenido y tema tratado en esa página, debería incluirse mediante
una etiqueta HTML , pero si por el contrario pertenece a la
decoración de la página, deberíamos incluirla como un fondo
mediante la propiedad CSS background-image
Para incluir imágenes en el contenido de una página utilizaremos
la etiqueta , que 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):.

W
E
B
Y
M
U
L
T
I
M
E
D
I
A
ETIQUETA VÍNCULOS
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.
ETIQUETA ESTILOS
Para cambiar el estilo en el que por defecto se visualizan los elementos
de un documento HTML en un navegador web, existen varios
métodos:
Estilo en línea (Inline): utilizando el atributo style.
Estilo interno (Internal): usando un elemento "style".
Estilo externo (External): empleando un archivo CSS
(Cascading Style Sheets) externo al documento
HTML.
Estilo en línea - Atributo style

W
E
B
Y
M
U
L
T
I
M
E
D
I
A
ETIQUETA COLOR
Los elementos del tipo «color»
proporciona un elemento de interfaz de usuario que permite a los
usuarios especificar un color, bien mediante una interfaz visual de
selección, bien a través de un cuadro de texto donde ingresar un
valor hexadecimal en el formato «#rrggbb». Solo se permiten colores
simples (sin canal alfa). Los valores son compatibles con CSS.
La presentación del elemento puede variar considerablamente entre
navegadores y plataformas: podría ser un campo de entrada sencillo que
valida automáticamente que la entrada esté en el formato adecuado, o
podría lanzar un selector de colores estándar de la plataforma, o incluso
podría abrir una ventana de colores personalizada.

W
E
B
Y
M
U
L
T
I
M
E
D
I
A
BIBLIOGRAFIA
EL GRAN LIBRO DE HTML5, CSS3 Y JAVASCRIPT
PRIMERA EDICIÓN, 2012
© 2012 JUAN DIEGO GAUCHAT
© MARCOMBO, S.A. 2012 GRAN VIA DE LES CORTS CATALANES, 594 08007
BARCELONA WWW.MARCOMBO.COM
PRINTED IN SPAIN
DL: SE-7867-2011
IMPRESO EN PUBLIDISA
ISBN EBOOK: 978-84-267-1782-5
CONCLUSION
HTML5 provee básicamente tres características: estructura, estilo y funcionalidad.
las etiquetas son de mucha importancia porque por medio de estas etiquetas
podemos dar la funcionalidad anuestro sito web de una forma corecta
y ordenada de lapagina