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.
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:
HTML Reglas básicas
Etiquetas (tags)
Atributos
Valores
apertura <xxx> cierre </xxx>
<p> ……. </p>
Modifican la funcionalidad de las tags
<body bgcolor...>
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.
• 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>
1. Primer término de la lista
2. Segundo término
3. 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:[email protected]>Manda email</a>
Imágenes
<img src="URL" /> (no tiene etiqueta de cierre)
<img src="http://www.grupobgl.com/logo.jpg" />
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>
<TR>
<TD>3 </TD>
<TD> 4</TD>
</TR>
</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 %
ALIGN=" left", "right", "center".
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
Descargar

y - Mente Interactiva