HTML y CSSNombre: Sebastin Rubio Gonzlez

Monet

LotosContenido

31Introduccin a HTML

52HTML Etiquetas de contenido

83HTML Formularios.

104HTML Etiquetas avanzadas

125HTML Quiz

136Introduccin a CSS

187CSS Estilos avanzados

208CSS layout **

219CSS Ejercicios

3110CSS Quiz

1 Introduccin a HTML Qu es HTML? Para qu sirve?.

HTML, siglas de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboracin de pginas web. Es decir HTML es el lenguaje con el que se definen las pginas web. Bsicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrn una pgina Web. Qu organismos definen los estndares de HTML? Quin ha descrito HTML5?.El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un organismo sin nimo de lucro llamado World Wide Web Consortium, ms conocido como W3C. Como se trata de un estndar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma pgina HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo.HTML5 (HyperText Markup Language, versin 5) es la quinta revisin importante del

lenguaje bsico de la World Wide Web, HTML. El desarrollo de este lenguaje de

marcado es regulado por el Consorcio W3C.

Opera fue quien propuso este estndar originalmente, y es uno de los principales

promotores de esta tecnologa, junto con Mozilla Foundation, estos ltimos siendo los

creadores del navegador Firefox.

Qu hace un navegador cuando recibe un archivo HTML?.

El lenguaje HTML basa su filosofa de desarrollo en la referenciacin. Para aadir un elemento externo a la pgina (imagen, vdeo, script, etc.), este no se incrusta directamente en el cdigo de la pgina, sino que se hace una referencia a la ubicacin de dicho elemento mediante texto. De este modo, la pgina Web contiene slo texto mientras que recae en el navegador Web (interpretador del cdigo) la tarea de unir todos los elementos y visualizar la pgina final.

Cul es la estructura bsica de un archivo HTML?.Todos los documentos HTML tienen la estructura que se muestra a continuacin, aunque la etiqueta puede ser sustituida por para un tipo de pginas que dividen la ventana del navegador en varios cuadros (frames).

Qu significa la etiqueta ?.

DOCTYPE es una declaracin del estndar usado al construir un documento HTML. Para los navegadores es importante conocer el doctype de la pgina web, porque de ese modo pueden mostrar la pgina web con la versin exacta del lenguaje HTML o XHTML con la que fue construida.

As pues, dependiendo de nuestra pgina y el cdigo que utilicemos, tendremos que declarar

uno u otro DOCTYPE. Existen diversos DOCTYPE que abarcan una gran gama de posibilidades, configurando distintas versiones de HTML.

El DOCTYPE debe incluirse en la primera lnea del cdigo HTML de la pgina.

Qu son los atributos? Para qu sirven?.

Las etiquetas sirven para estructurar el contenido de todo el documento HTML e indican al navegador cmo debera presentarse el sitio Web (por ejemplo,
informa al navegador para que introduzca un salto de lnea). En algunas etiquetas se puede aadir ms informacin. Esa informacin extra se denomina atributo.

Los atributos se incluyen siempre dentro de la etiqueta de inicio y llevan inmediatamente detrs el signo de igual ("=") con los valores de dichos atributos entre comillas (""). El punto y coma que sigue al atributo se usa para separar los diferentes comandos de estilo.

Ejemplo:

Qu etiqueta sirve para poner un ttulo a la pgina HTML?. En qu seccin se encuentra esa etiqueta?La presencia de este elemento en la seccin de encabezado del documento (ira dentro del elemento HTML head) y dicha etiqueta es obligatoria. Toda pgina debe tener un ttulo que describa correctamente el contenido del documento en unas pocas palabras.

Y como resultado nos dara la siguiente imagen

Los atributos que puede llevar consigo esta etiqueta son solamente 2 que son:

Lang: Especifica el lenguaje del contenido contenido dentro del ttulo. No es obligatorio ponerlo.Dir: Este atributo indica la direccin en que el texto del elemento debe ser ledo. Esto incluye al contenido, los valores de los atributos y las tablas.

2 HTML Etiquetas de contenido Escribe una pgina HTML que contenga un prrafo de texto usando la etiqueta correctaPara escribir un prrafo usaremos la etiqueta escribiremos el prrafo que queremos poner y a continuacin cerraremos dicha etiqueta . Los prrafos son elementos a nivel de bloque que constituyen una estructura bsica de un documento y son usualmente mostrados por los navegadores con mrgenes superior e inferior. Los prrafos no pueden contener elementos a nivel de bloque, incluyendo otros prrafos. A continuacin veremos un ejemplo de como poner un prrafo.Los atributos que se usan con esta etiqueta son los siguientes:

ALIGN: este atributo define la alineacin horizontal de su contenido. Los posibles valores que tiene este atributo son: left, right, center, justify. left:el texto del prrafo es alineado a la margen izquierda.

right:el texto del prrafo es alineado a la margen derecha.

center:el texto del prrafo es centrado.

justify:el texto del prrafo es alineado a ambos mrgenes.

CLASS: El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento est asociado.STYLE: Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debera estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente til, es una mejor prctica poner los atributos presentacionales en archivos externos, relacionndolos a los elementos a travs del atributo "class".

ID: 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.

Y el resultado de los posibles ejemplos de prrafos es el siguiente

Aade ahora una cabecera principal al documento. Adems aade dos cabeceras desegundo nivel con un prrafo asociado a cada una.

El resultado del cdigo anteriormente escrito seria el siguiente y como vemos en cada cabecera tanto en la Cabecera Principal y las cabeceras de nivel 2 tienen asociadas un prrafo.

Aade dos listas, una a cada subcabecera. Una de las listas ser ordenada y otra no ordenada.

Y el resultado del cdigo HTML anteriormente escrito ser el siguiente

Para qu sirve una etiqueta anchor ?. Escribe 3 ejemplos de usos de dicha etiqueta.La etiqueta define un hipervnculo, el cual se utiliza para vincular de una pgina a otra.Los atributos que pueden acompaar a esta etiqueta son:

Href: Especifica la direccin URL de la pgina.

Hreflang: Especifica el idioma de una pgina web o de un medio a que se les hace referencia mediante el atributo href. El valor del atributo hreflang es un cdigo de idioma representados por dos letras normalizadas por el estandar "ISO 639", que identifica un lenguaje natural. El atributo hreflang se debe de utilizar junto con el atributo href. Media: Especifica un medio alternativo de una pgina web, es decir, el mismo

contenido pero en formato vdeo, audio, PDF o una versin para imprimir. El valor por defecto del atributo media es "all", que significa que la pgina web es apropiada para todos los dispositivos. En el interior de la directiva el atributo Media trabaja con el atributo rel que tiene que tener el valor "alternate" (alternativa). Rel: Especifica la relacin entre el documento actual y el destino del vnculo.

Target: Indica donde abrir el URL.

Una vez pinchamos en el enlace que pone Google vemos que nos lleva a la siguiente pgina.

Type: Especifica el tipo de contenido a conectar.La gran diferencia que hay entre el html4.01 y HTML5 es que hay ciertos atributos de la etiqueta que han dejado de ser compatibles en HTML5 y estos atributos son charset, coords, name, rev, shape y se han introducido dos nuevos atributos en el standart de HTML5 como son los atributos media y type. Completa tu documento aadiendo un enlace a una pgina web externa y otro enlace a la

segunda cabecera de tu documento.

El resultado de nuestro cdigo HTML ser el siguiente

Cuando pinchamos en la direccin de nuestro aulavirtual podremos ver el contenido que se encuentra dentro de la direccin www.aulavirtual3.educa.madrid.org/ies.lapaz.alcobendas/que es la direccin que le pusimos dentro de la etiqueta . En el cdigo HTML podemos

ver que tenemos marcado de color rojo el enlace a nuestra aula virtual del Mdulo de IAW.

Para poder realizar la comprobacin del enlace a una cabecera concreta he tenido que poner varios prrafos auxiliares para rellenar espacio. En el cdigo HTML podremos ver que dichos prrafos auxiliares estn marcados en verde.

Cuando hacemos clic en el enlace llamado ir a cabecera podemos ver que automticamente

nos lleva directamente a la cabecera que hayamos puesto su nombre en el href deberemos de poner lo siguiente