Guia Nro. 1 Html5

INTRODUCION HTML5
CONCEPTOS
La World Wide Web(WWW) o web, es un Sistema de información distribuido por internet

basado en la tecnología hipertexto/hipermedia.
Un documento hipertexto, es un texto en que cualquier palabra puede ser especificada

como un enlace a otros documentos que contienen información sobre dicho palabra.
Un documento hipermedia es un hipertexto, pero que no incluye solo información textual

sino también información multimedia, es decir, puede incluir gráficos, video y sonido.
Las Páginas Web, es un documento hipertexto/hipermedia, que pueden estar localizadas

en diferentes sitios de internet llamados servidores web.
Navegadores o Browsers, aplicaciones para utilizar el servicio Web, mediante el browser

el usuario puede acceder a las páginas y moverse a través de sus vínculos o enlaces, este
hecho se conoce como Navegar por internet.
Sea cual fuere el navegador elegido, siempre tenga en mente que un buen desarrollador
instala y prueba sus códigos en cada programa disponible en el mercado.
Para descargar las últimas versiones, visite los siguientes enlaces:

 www.google.com/chrome
 www.apple.com/safari/download
 www.mozilla.com
 windows.microsoft.com
 www.opera.com
HTML (HyperText Markup Language, Lenguaje de Marcas Hipertexto), es un lenguaje que

permite describir documentos Hipertexto/hipermedia. Es el lenguaje con el que se
escriben las páginas web.
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.
HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya
antigua tecnología, sino un nuevo concepto para la construcción de sitios web y aplicaciones en una
era que combina dispositivos móviles, computación en la nube y trabajos en red.
EDITORES HTML
Es una herramienta capaz de crear un archivo HTML(una página), que no es más que un
texto. Para programar en HTML se necesita un editor de textos como por ejemplo el Bloc
de Notas u otros editores que son sencillos.
Existen editores específicos para la creación de páginas web los cuales ofrecen muchas
facilidades, que permiten aumentar nuestra productividad. Se recomienda en un principio
utilizar una herramienta sencilla.
Un documento HTML es un archivo de texto. Si usted no posee ningún programa para
desarrollo web, puede simplemente utilizar el Bloc de Notas de Windows o cualquier otro
editor de textos. El archivo debe ser grabado con la extensión .html y el nombre que desee
(por ejemplo, midocumento.html).
DOCUMENTOS HTML5
COMPONENTES BASICOS
HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. HTML5 es
considerado el producto de la combinación de HTML, CSS y Javascript. Estas tecnologías son
altamente dependientes y actúan como una sola unidad organizada bajo la especificación de
HTML5. HTML está a cargo de la estructura, CSS presenta esa estructura y su contenido en la
pantalla y Javascript hace el resto que (como veremos más adelante) es extremadamente
significativo.
Para trabajar y crear sitios webs y aplicaciones con HTML5, necesitamos saber primero cómo esa
estructura es construida.
ESTRUCTURA GLOBAL DE UN DOCUMENTO HTML
 <!DOCTYPE>Primero se necesita indicar el tipo de documento que está creando. Esto en

HTML5 es sencillo:
<!DOCTYPE html>
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 navegador se activa y las incorporaciones de HTML5 son
interpretadas siempre que sea posible, o ignoradas en otro caso.
 <html> Luego de declarar el tipo de documento, se debe comenzar a construir la estructura

HTML. La estructura tipo árbol de este lenguaje tiene su raíz en el elemento <html>. Este elemento
envolverá al resto del código.
<!DOCTYPE html>
<html>
</html>
 <head> y <body> 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<head> y la segunda el cuerpo<body>.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
 <meta> 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.
Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar información general
sobre el documento, pero esta información no es mostrada en la ventana del navegador, es solo
importante para motores de búsqueda y dispositivos que necesitan hacer una vista previa del
documento u obtener un sumario de la información que contiene.
 <title> La etiqueta <title>, simplemente especifica el título del documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3,
JavaScript">
<title>Este texto es el título del documento</title>
</head>
<body>
</body>
</html>
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.
Cómo usamos los nuevos elementos depende de nosotros, pero las palabras clave otorgadas a cada uno de
ellos nos dan ayudan a entender sus funciones. Normalmente una página o aplicación web está dividida
entre varias áreas visuales para mejorar la experiencia del usuario y facilitar la interactividad. Las palabras
claves que representan cada nuevo elemento de HTML5 están íntimamente relacionadas con estas áreas.
Un diseño común encontrado en la mayoría de los sitios webs estos días, a pesar de que cada diseñador crea
sus propios diseños, en general se puede identificar las siguientes secciones en cada sitio web estudiado:
HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y declarar cada una de
sus partes.
<header>
Es un nuevo elemento incorporado en HTML5. El elemento <header> no debe ser confundido con <head>
usado antes para construir la cabecera del documento. El objetivo de <header> es proveer información
introductoria (títulos, subtítulos, logos). Mientras que el elemento <head> tiene el propósito de proveer
información acerca de todo el documento, <header> es usado solo para el cuerpo o secciones específicas
dentro del cuerpo.
<nav>
La siguiente sección es la Barra de Navegación. Esta barra es generada en HTML5 con el elemento
<nav>.
<section>
Es la columna de Información Principal, contiene la información más relevante del documento y puede
ser encontrada en diferentes formas (por ejemplo, dividida en varios bloques o columnas). Debido a que el
propósito de estas columnas es más general, el elemento en HTML5 que especifica estas secciones se llama
simplemente <section>.
<aside>
En un típico diseño web la columna llamada Barra Lateral se ubica al lado de la columna Información
Principal. Esta es una columna o sección que normalmente contiene datos relacionados con la información
principal pero que no son relevantes o igual de importantes. En HTML5 podemos diferenciar esta clase
secundaria de información utilizando el elemento <aside>.
<footer>
Es el elemento para finalizar la construcción de la plantilla o estructura elemental de un documento HTML5,
es decir, cerrar el diseño para otorgarle un final al cuerpo del documento. HTML5 provee un elemento
específico para este propósito llamado <footer>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="keywords" content="HTML5, CSS3, JavaScript">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
</html>
CONTENIDO
Los elementos HTML5 ayudan a identificar cada sección del diseño y asignar un propósito intrínseco a cada
una de ellas, pero lo que es realmente importante para nuestro sitio web se encuentra en el interior de
estas secciones.
La mayoría de los elementos fueron creados para construir una estructura para el documento HTML que
pueda ser identificada y reconocida por los navegadores y nuevos dispositivos.
Aprendimos acerca de la etiqueta <body> usada para declarar el cuerpo o parte visible del documento, la
etiqueta <header> con la que agrupamos información importante para el cuerpo, la etiqueta <nav> que
provee ayuda para la navegación del sitio web, la etiqueta <section> necesaria para contener la
información más relevante, y también <aside> y <footer> para ofrecer información adicional de cada
sección y del documento mismo. Pero ninguno de estos elementos declara algo acerca del contenido. Todos
tienen un específico propósito estructural.
Dentro del documento nos encontramos con la definición del contenido. Esta información estará compuesta
por diferentes elementos visuales como títulos, textos, imágenes, videos y aplicaciones interactivas, entre
otros. Se necesita diferenciar estos elementos y establecer una relación entre ellos dentro de la estructura.
<article>
El elemento <article> nos permite identificar cada una de estas partes, como contenido.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="keywords" content="HTML5, CSS3, JavaScript">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi segundo mensaje
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
</html>
SINTAXIS HTML
HTML, se basa en un elemento que llamamos etiqueta, que presenta dos partes
 Una apertura <etiqueta>

 Un cierre </etiqueta>
<etiqueta>CONTENIDO</etiqueta>
Todo el CONTENIDO sufrirá las modificaciones que caracterizan a la etiqueta.
Ejemplo:
<b> texto ejemplo </b> Define el texto en negrita
ATRIBUTOS DE ETIQUETAS
Los atributos de una etiqueta modifican el funcionamiento de la misma, se ponen de la siguiente

forma:
<etiqueta atributo1=”valor1” atributo2=”valor2” …>CONTENIDO</etiqueta>
COMENTARIOS
Un comentario no se muestra en la pagino, sirve para nosotros mismos.

SIMBOLOS ESPECIALES
Para usar códigos se colocan con el símbolo&, seguido del código
COLORES
Muchos etiquetas indican colores, hay dos formas de indicar el color: Por el nombre (“blue”,
“yellow”,..) o por el código que consta de seis cifras hexadecimales, donde las dos primeras
indican el nivel del rojo, las dos siguientes el nivel del verde y las dos últimas el nivel del azul.
Algunos colores se muestran en la siguiente tabla.
CUATRO NORMAS FUNDAMENTALES
 HTML es simplemente texto
 Igualdad de mayúsculas y minúsculas: no si distingue mayúsculas y minúsculas en la
especificación de marcas y sus atributos.
 No importa los tabuladores, ni los saltos de línea: se debe usar etiquetas para evitar que
quede el texto en una sola línea
 Caracteres especiales
COMANDOS BASICOS
SALTO DE LINEA <BR>. No necesita de etiqueta de fin de marca.
INSERTA UNA LINEA HORIZONTAL <HR>
Atributos:
 width=tamaño. Tamaño puede ser relativa(%) o absoluta(en pixeles)

 aling=”alineacion”
 color=”codigo”
 size=n. Establece el Grosor
Ejemplo: <hr width= 300 align=”center” size=5 color=”blue”>
TITULOS DE ENCABEZAMIENTO. Se usan para los títulos o resaltes en las páginas <Hn>..</Hn>
 <H1>Nivel de encabezado 1</H1>
TIPOS DE LETRAS. Estas etiquetas la tipografía y se pueden anidar
 <B>Negrita(bold) </B>
 <I>Cursiva (Italic) </I>
 <BLINK>Parpadeante(Blink) </BLINK>
 <TT> Tamano fijo </TT>
 <EM> enfasis </EM>
 <STRONG> Gran enfasis </STRONG>
 <U> subrayado(underline) </U>
 <sub> subindice</sub>
 <sup>superindice</sup>
CARACTERISTICAS DE UN TEXTO. Etiqueta FONT
Atributos:
 SIZE=”tamaño”, en HTML se tiene siete tamaños(1..7), por defecto se tiene el tamaño

3.
 COLOR=”codigo”
 FACE=”tipo de letra”
Ejemplo: <Font color=”yellow” size=5 face=”arial”> texto……</FONT>
Para dar color a todo el texto del documento <BODY TEXT=”blue”>. Para especificar el color de
fondo del documento <BODY BGCOLOR=”blue”>
PARRAFOS <P>..</P>. Sirve para separar párrafos en html. Además de introducir un retorno de
carro, y fuerza un segundo retorno de carro para dejar una línea en blanco entre un párrafo y el
siguiente.
<P>párrafo….</P>
ATRIBUTO ALIGN=”Alineacion” : “left”, “center”, “right”
<BLOCKQUOTE> Coloca los párrafos en modo anotación, es decir les hace una sangría.
ATRIBUTOS <BODY ></ BODY>

Guia Nro. 1 Html5

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Guia Nro. 1 Html5

Hochgeladen von

Copyright:

Verfügbare Formate

INTRODUCION HTML5

La World Wide Web(WWW) o web, es un Sistema de información distribuido por internet

Un documento hipertexto, es un texto en que cualquier palabra puede ser especificada

Un documento hipermedia es un hipertexto, pero que no incluye solo información textual

Las Páginas Web, es un documento hipertexto/hipermedia, que pueden estar localizadas

Navegadores o Browsers, aplicaciones para utilizar el servicio Web, mediante el browser

Para descargar las últimas versiones, visite los siguientes enlaces:

HTML (HyperText Markup Language, Lenguaje de Marcas Hipertexto), es un lenguaje que

HTML5, HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5

ESTRUCTURA GLOBAL DE UN DOCUMENTO HTML

 <!DOCTYPE>Primero se necesita indicar el tipo de documento que está creando. Esto en

 <html> Luego de declarar el tipo de documento, se debe comenzar a construir la estructura

ESTRUCTURA DEL CUERPO

 Una apertura <etiqueta>

Todo el CONTENIDO sufrirá las modificaciones que caracterizan a la etiqueta.

<b> texto ejemplo </b> Define el texto en negrita

Los atributos de una etiqueta modifican el funcionamiento de la misma, se ponen de la siguiente

<etiqueta atributo1=”valor1” atributo2=”valor2” …>CONTENIDO</etiqueta>

Un comentario no se muestra en la pagino, sirve para nosotros mismos.

Para usar códigos se colocan con el símbolo&, seguido del código

SALTO DE LINEA <BR>. No necesita de etiqueta de fin de marca.

INSERTA UNA LINEA HORIZONTAL <HR>

 width=tamaño. Tamaño puede ser relativa(%) o absoluta(en pixeles)

Ejemplo: <hr width= 300 align=”center” size=5 color=”blue”>

TIPOS DE LETRAS. Estas etiquetas la tipografía y se pueden anidar

CARACTERISTICAS DE UN TEXTO. Etiqueta FONT

 SIZE=”tamaño”, en HTML se tiene siete tamaños(1..7), por defecto se tiene el tamaño

Ejemplo: <Font color=”yellow” size=5 face=”arial”> texto……</FONT>

ATRIBUTO ALIGN=”Alineacion” : “left”, “center”, “right”

ATRIBUTOS <BODY ></ BODY>

Das könnte Ihnen auch gefallen