ETIQUETAS HTML Y CONCEPTOS BASE DE ESTILOS CSS

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

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

Y M U L T I M E D I A

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.

<!DOCTYPE>

En primer lugar necesitamos indicar el tipo de documento que estamos creando.

<html>

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 <html>. Este elemento envolverá al resto del código:

W E B Y <head>

M U L T I M E D I A

Continuemos construyendo nuestra plantilla. El código HTML insertado entre las etiquetas <html> 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 <head> y <body> ya conocidos. El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre:

<body> 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 <body>. 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

<title> La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no hay nada nuevo para comentar: El texto entre las etiquetas <title> es el título del documento que estamos creando. Normalmente este texto es mostrado en la barra superior de la ventana del navegador.

W E B Y M U L T I M E D I A

ESTRUCTURA DEL CUERPO La estructura del cuerpo (el código entre las etiquetas <body>) 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 <table>. 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 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 <table> sería el elemento que contendría todos los elementos de la tabla, mientras que <th> y <td> 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 <tr> .

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 <p> y </p>. 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 <br/>. La etiqueta <hr> se utiliza para insertar una línea horizontal.

W E B Y M U L T I M E D I A

ETIQUETA ITITULOS Con las etiquetas <title> y </title> 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 <title> 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, <title> y </title>, oki?zontal.

<title>Título de esta página</title>

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 <img>, 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 <img>, 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 ETIQUETA COLOR

Y M U L T I M E D I A

Los elementos <input> 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

PRINTED IN SPAIN DL: SE-7867-2011 IMPRESO EN PUBLIDISA ISBN EBOOK: 978-84-267-1782-5

M U L T I M E D I A

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

Turn static files into dynamic content formats.

Create a flipbook