semana_1__16192__
DESCRIPTION
WEBBTRANSCRIPT
HTML5
HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5
también es un término de marketing para agrupar las nuevas tecnologías de desarrollo de
aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.
La versión anterior y más usada de HTML, HTML4, carece de características necesarias
para la creación de aplicaciones modernas basadas en un navegador. El uso fuerte de
Javascript ha ayudado a mejorar esto, gracias a frameworks como jQuery, jQuery UI,
Sproutcore, entre otros.
Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que
superaran las habilidades de un navegador: Audio, video, webcams, micrófonos, datos
binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas otras
cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran
compatibilidad entre navegadores.
ESTRUCTURA DE UN SITIO WEB EN HTML5
El HTML5 nos brinda elementos que perfeccionan la estrutura de un sitio web estableciendo
por secciones, eliminando asi el uso de las etiquetas <div> innecesarios. Este cambio en la
semántica hace que la estructura de la web sea más coherente y fácil de entender por otras
personas, los buscadores podrán encontrar con mayor facilidad estos sitios en la web.
1. ESTRUCTURA DE UNA ETIQUETA EN HTML5
< ETIQUETA > < / ETIQUETA >
ESTRUTURA DE UN SITIO WEB HTML5
Contenido web basado
en la etiqueta
Apertura o inicio de
etiqueta
Fin o cierre de
etiqueta
Etiqueta o Tag definido
por el lenguaje HTML5
2. ATRIBUTOS DE UNA ETIQUETA HTML5
Componentes de un atributo:
Apertura de la etiqueta Contenido Cierre de etiqueta
<p class=“titulo”> Hola, Te odio…!!! </p>
Nombre Valor
Atributo
3. ESPECIFICACION DOCTYPE
Esta línea deberá ser la primera línea del documento, sin espacios ni líneas previas.
Esto es una manera de activar el modo estándar y forzar a los navegadores a
interpretar el HTML5 siempre que sea posible, o a ignorarlo cuando no lo sea.
La especificación DOCTYPE tendrá el siguiente aspecto:
<!DOCTYPE html>
Doctype es el encargado de indicarle al navegador web que el documento
que está abriendo es un documento html. En esta versión el Doctype es
mucho más simplificado y compatible con HTML y XHTML.
Ejemplo:
Crear un sitio web con un color de fondo que permita mostrar el siguiente
mensaje “Los panditas tienen más derechos que los gatos” el título de la
web seria “PandiWeb”
Código:
En el navegador se visualiza:
1. http://www.w3.org/International/questions/qa-html-language-declarations
2. http://www.w3schools.com/tags/att_meta_charset.asp
3. http://www.w3schools.com/tags/att_body_bgcolor.asp
Declaración de 𝑖𝑑𝑖𝑜𝑚𝑎1
Habilita el uso de las tildes y
las ñ en 𝐻𝑇𝑀𝐿2 , codificación
unicode
bgcolor : color de fondo para
un documento 𝐻𝑇𝑀𝐿3
4. ETIQUETA HEAD (CABECERA)
La etiqueta <HEAD> permite definir la cabecera del documento web contenido
información que no es visible para el usuario. Se debe colocar antes de la etiqueta
<body> y dentro de <html>
El formato completo del documento seria:
4.1 ELEMENTOS DE LA CABECERA
4.1.1 <TITLE>
Permite definir el título del documento, el cual es mostrado en la barra de título del
navegador.
Ejemplo:
Cabecera del documento
Indica el tipo de documento
Cuerpo del documento
Inicio y Fin del
documento Web
Título del documento Web
4.1.2 ETIQUETA <META>
Describe la información sobre los datos de un documento HTML (metadatos)
La etiqueta <meta> proporciona metadatos sobre el documento HTML. Los
metadatos no se mostrarán en la página, pero será legible por la máquina.
Atributo NAME: Define el tipo de información que proporciona la etiqueta. Los más
comunes son:
a) Author: Informacion sobre el autor del documento web.
b) Description: Habilita que se puede describir el documento web.
c) Keywords: Habilita el uso de las palabras clave.
Atributo CHARSET: permite habilitar el uso de las tildes y la ñ.
4.1.3 LINK
Permite asociar las páginas web a un archivo externo. Es el más usado para
los enlazar a la hoja de estilo (stylesheet) CSS
Ejemplo:
4.1.4 STYLE
La etiqueta <style> se utiliza para definir la información de estilo para un documento HTML.
Dentro de la <style> especifica cómo los elementos HTML deben representar en un explorador.
Cada documento HTML puede contener varias etiquetas <style>.
Ejemplo:
En el navegador:
5. ETIQUETA BODY
Es un espacio de trabajo que contiene todo lo visible de un documento HTML para el
usuario.
La etiqueta BODY puede contener:
Elementos estándares HTML5 como: párrafos, formularios, imágenes, tablas, listas,
etc.
Enlaces a otros sitios web.
Scripts de los Lenguajes de programación: Java, PHP, ASP, etc.
Objetos incrustado como los Applets de Java: animaciones flash, videos embed de
youtube, etc.
5.1 ATRIBUTOS MAS IMPORTANTES DE <BODY>
5.1.1 ATRIBUTO BGCOLOR
Permite asignar color de fondo al sitio web
Sintaxis
Ejemplo:
a) Nombre de color como red, blue, yelow, Green, etc.
<BODY bgcolor= “blue”>
b) Para los ver los códigos hexadecimales permitidos en la web, ver el
siguiente enlace:
http://es.wikipedia.org/wiki/Colores_web
Ejemplo: crear un sitio web, utilizando código sexagesimal para el fondo del sitio.
En el navegador:
Código sexagesimal
para el fondo
5.1.2 ATRIBUTO BACKGROUND
Permite asignar una imagen de fondo a su sitio web.
Sintaxis
<BODY background = “Nombre_imagen.extension” >
<BODY background = “URL / Nombre_imagen.extension” >
5.1.3 ATRIBUTO TEXT
Define el color de texto usado en todo el documento web. El color
predeterminado es negro
Sintaxis
<BODY TEXT = “#0000FF” >
<BODY TEXT = “blue” >
5.1.4 ATRIBUTOS MARGENES
Permite asignar un especio entre los componentes de un documento web y el
margen del mismo documento.
Ejemplo: diseñar un sitio web que tenga atributos de color y márgenes
En el navegador:
6. PÁRRAFOS
Los párrafos sirven para estructurar el contenido. Para crear un párrafo, metemos
texto entre las etiquetas <p> y </p>. Un ejemplo:
7. SALTOS DE LINEA
Hay veces que necesitamos forzar un salto de línea dentro de un párrafo. Para ello,
usamos la etiqueta <br/>, así:
Ejemplo:
En el navegador:
8. ENCABEZADOS
Puede que queramos empezar nuestra web o nuestro texto con un encabezado
indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados
tenemos que utilizar las etiquetas <h>.
Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo
éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras
que <h6> sería el más pequeño.
<h1> Texto muy grande</h1> <h2>Texto grande</h2> <h3>Texto algo más grande de lo normal</h3> <h4>Texto normal</h4> <h5>Texto pequeño</h5> <h6>Texto muy pequeño</h6>
Ejemplo:
Encabezados
s
En el navegador: