SESIÓN 3 APRENDIENDO HTML

Orígenes Uno de los retos iniciales a los que se tuvo que enfrentar la informática fue el de cómo almacenar la información en los archivos digitales. Como los primeros archivos sólo contenían texto sin formato, la solución utilizada era muy sencilla: se codificaban las letras del alfabeto y se transformaban en números. Así nació la codificación ASCII.

Orígenes Una vez resuelto el problema de almacenar el texto simple, se presenta el reto de almacenar los contenidos de texto con formato. En otras palabras, ¿cómo se almacena un texto en negrita? ¿y un texto de color rojo? ¿y otro texto azul, en negrita y subrayado..?

Esencia del HTML <parrafo>Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial. </parrafo> El principio de un párrafo se indica mediante la palabra <parrafo> y el final de un párrafo se indica mediante la palabra </parrafo>. De la misma manera, para asignar más importancia a ciertas palabras del texto, se encierran entre <importante> y </importante>.

Esencia del HTML El proceso de indicar las diferentes partes que componen la información se denomina marcado (markup en inglés). Cada una de las palabras que se emplean para marcar el inicio y el final de una sección se denominan etiquetas.

Esencia del HTML Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se forman de la siguiente manera: Etiqueta de apertura: carácter <, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter > Etiqueta de cierre: carácter <, seguido del carácter /, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >

HTML Así, la estructura típica de las etiquetas HTML es: <nombre_etiqueta> ... </nombre_etiqueta>

HTML Además de HTML existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y MathML.

HTML Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.

HTML El cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).

HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes elementos que componen una página: a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.

applet, basefont, center, dir, font, isindex, menu, s, strike, u. De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden ni deben utilizar: applet, basefont, center, dir, font, isindex, menu, s, strike, u.

A pesar de que se trata de un número de etiquetas muy grande, no es suficiente para crear páginas complejas. Algunos elementos como imágenes y enlaces requieren cierta información adicional para estar completamente definidos. La etiqueta <a> por ejemplo se emplea para incluir un enlace en una página. Utilizando sólo la etiqueta <a> no es posible establecer la dirección a la que apunta cada enlace. Como no es viable crear una etiqueta por cada enlace diferente, la solución consiste en personalizar las etiquetas HTML mediante cierta información adicional llamada atributos.

Elementos HTML Además de etiquetas y atributos, HTML define el término elemento para referirse a las partes que componen los documentos HTML. Éste está formado por: Una etiqueta de apertura. Cero o más atributos. Texto encerrado por la etiqueta. Una etiqueta de cierre.

El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden encerrar ningún texto. El siguiente esquema muestra un elemento HTML, formado por una etiqueta <p>, atributos y contenidos de texto:

<p> ……. </p> <p align="center">...</P> HTML Reglas básicas Etiquetas (tags) apertura <xxx> cierre </xxx> <p> ……. </p> Atributos Modifican la funcionalidad de las tags <body bgcolor...> Valores Definen el valor del atributo <p align="center">...</P>

Estructura General <html> <head> <title>Título del Documento</title> </head> <body> ... </body> </html>

Estructura General head Contiene las etiquetas TITLE, META; los scripts y las hojas de estilo (CSS) body Contiene el contenido que ve el usuario en una pagina web: textos, imágenes, tablas, enlaces, formularios. <html> <head> <title>Título de la página</title> Aquí van otras etiquetas como las META, scripts y estilos </head> <body> Aquí va lo que se mostrará en pantalla del documento HTML </body> </html>

Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo: <meta name="description" content=“xxx"> <meta name="keywords" content=“abc,def,"> <meta http-equiv="Content-Type“ content="text/html; charset=ISO-8859-1"> En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.

HEAD. CABECERA. La cabecera es la sección comprendida entre <head> y </head>. Dentro de la cabecera también se suele incluir código en JavaScript, y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas <script language="JavaScript"> <!– Aquí iría el código // --> </script> <link href="estilo.css" rel="stylesheet" type="text/css">

BODY. CUERPO. Atributos de “body” El cuerpo (body) del documento html es donde debemos colocar el contenido de nuestra página: texto, fotos, etc. Atributos de “body” bgcolor - color de fondo de la página. Formato: #rrggbb <body bgcolor=#0000FF> o <body bgcolor=blue> text - color del texto por omisión. Defecto: negro background - ruta y nombre de archivo (URL) de la imagen que será usada como fondo del documento.

HEADERS. ENCABEZADOS. Los títulos o encabezados se emplean al comienzo de una sección. Las etiquetas que se usan son: <h1> Título </h1> .. <h6> Titulo H6 </h6>

ESTILOS DE FUENTES Estilos de fuentes – algunos de los existentes son: <B>Texto en Negrita</b> <I>Itálica</i> <B><I>Negrita e Itálica</i> HOLA</b> <U>Subrayado</u> <EM>Enfatizado</em> <STRONG>Fuerte</strong> Texto en Negrita Itálica Negrita e Itálica Subrayado Enfatizado Fuerte

Tipos y Tamaños de fuentes Tamaños de fuentes – dos maneras número del 1 al 7 (de más pequeño a más grande) 􀂄 <font size=1> Esta es la letra más pequeña que se puede conseguir </font> 􀂉 referencia relativa (tamaño por defecto 3) 􀂄 <font size="+1"> Esto es igual que poner size=4 </font> Tipos de fuentes 􀂉 <font face="Courier">Eso se verá en la fuente Courier</font>

PÁRRAFOS Y BLOQUES <p> Se utiliza para que los párrafos queden separados por una línea en blanco. Atributos: align="left" , align="right" , align="center" y align="justify" <br /> punto y aparte. No tiene etiqueta de cierre <hr /> Se emplea para representar una línea horizontal (no tiene cierre)

Listas No Ordenadas (viñetas). Unordered Lists <ul> <li>Primer término de la lista</li> <li>Segundo término</li> <li>Tercer término</li> </ul> Primer término de la lista Segundo término Tercer término

Listas Ordenadas. Ordered Lists. <ol> <li>Primer término de la lista</li> <li>Segundo término</li> <li>Tercer término</li> </ol> Primer término de la lista Segundo término Tercer término

ENLACES. HIPERVÍNCULOS. <a href="URL"> Texto del enlace </a> El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde redirecciona la liga.

ENLACES. HIPERVÍNCULOS. Tipos: 1) Enlace a otro lugar del mismo documento (anclas) <a href="#inicio"> Ir al Inicio </a> Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: 2) Enlace a otra página local (relativo) <a href=“html/pagina2.htm">Ir a pagina 2</a> <a href=“../pagina2.htm">Ir a pagina 2</a>

ENLACES. HIPERVÍNCULOS. Tipos: 3) Enlace a una página externa (absoluto) <a href=“http://www.google.com">Ir a GOOGLE</a> 4) Enlace a un email <a href=“mailto:correo@menteinteractiva.com“>Manda email</a>

Imágenes <img src="URL" /> (no tiene etiqueta de cierre) Atributos: ALT="Texto que aparece al situar el cursor sobre la imagen" ALIGN WIDTH=80, HEIGTH=100 - Indican la anchura y altura de la imagen en píxels BORDER=2 - Añade un borde, a modo de marco, a la imagen HSPACE=10 , VSPACE=15 - Especifican el espacio horizontal y vertical que separa la imagen del texto Los mas utilizados: GIF, JPG y PNG en entorno Web

Tablas <TABLE> y </TABLE> son las etiquetas donde está contenida la tabla <TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera) <TD> y </TD> señalan una celda. Ejemplo: <TABLE > <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TD>3 </TD> <TD> 4</TD> </TABLE> 1 2 3 4

Tablas. Atributos. Tablas – Atributos BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible) CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2 CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1 ALIGN=" left", "right", "center". Atributos de las etiquetas de fila y celda WIDTH="30". Ancho de toda la fila o celda. También se puede dar en % VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila COLSPAN=3. Especifica el número de columnas que abarca la fila ROWSPAN=2. Especifica el número de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos: elementos de línea (inline elements) y elementos de bloque (block elements). Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la línea. Los elementos de línea sólo ocupan el espacio necesario para mostrar sus contenidos.

HTML de tipo BLOCK Etiquetas de tipo bloque: <h1>, <p>, <ul>, <table>

HTML de tipo BLOCK Etiquetas de tipo bloque: <div>

HTML de tipo INLINE Etiquetas de tipo inline: <b>, <td>, <a>, <img>

Enfoques para hacer layouts: Enfoque basado en tablas Enfoque basado en DIVs

Tablas

DIVs

Herramientas Útiles Firebug para Firefox o Chrome Adobe Kuler