Entradas
HTML (HyperText Markup Language)
- Para publicar información en la web que potencialmente todas las computadoras puedan entender, se necesita un lenguaje universal.
- Fue desarrollado por Tim Barners-Lee en el CERN y popularizado por el navegador Mosaic.
- Se basa en SGML (Standard Generalized Markup Language)
- Es un lenguaje que describe la estructura general del contenido de un documento(ej. página web).
- No el aspecto en sí de la página en pantalla.
- Si bien existen etiquetas que nos permiten manejar el aspecto del documento, se recomienda que éste sea manejado por hojas de estilo (css)
- Las páginas Web se crean usando HTML pues permite mezclar texto con etiquetas de marcas.
- Los archivos HTML son archivos de texto plano (ASCII), puede leerse con cualquier editor.
- El contenido se estructura mediante etiquetas (tags).
- No es sensible a mayúsculas o minúsculas, el espaciado y la nueva línea se ignora.
- Las etiquetas HTML son textos que se escribe entre los signos <>
- Existen versiones de apertura y de cierre para la mayoría de las etiquetas, pero no todas tienen.
- Tanto las etiquetas de apertura como las de cierre usan el mismo texto, pero la etiqueta de cierre agrega una /. ej.: <html> </html>
“abre” “cierra”
“abre y no necesita ser cerrada con otra etiqueta” - Cada etiqueta puede tener atributos, en el ejemplo anterior img tiene como atributos src y alt.
DTD (Document Type Definition)
- El DTD es un archivo que define la sintaxis que se debe emplear para reconstruir la estructura de datos.
- Todos los archivos HTML debe especificar un tipo de DTD.
- Una declaración de tipo de documento o DOCTYPE asocia un documento SGML o XML particular con una definición de tipo de documento.
Versión html
Se debe definir la versión HTML usada en el documento.
La declaración de tipo de documento especifica el DTD (Document Type Definition) usado en el documento.
Se debe especificar uno de los 3 DTD disponibles, estos varían en los elementos que soportan.
- Strict DTD (No soporta etiquetas antiguas y código debe ser correcto)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - Transitional DTD (Con etiquetas antiguas y código debe ser correcto)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - Frameset DTD (todo, más los concernientes a los frames)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Set de caracteres
- Todo documento HTML es una secuencia de caracteres.
- Los sistemas de computadoras identifican estos caracteres por su código ASCII. Ej.: 65, 66, 67 se refieren a ‘A’, ‘B’ y ‘C’ respectivamente.
- Como el set de caracteres ASCII no es suficiente para un sistema global de información como es la Web, HTML usa un set de caracteres más completo llamado UCS (Universal Caracter Set)
- De todas formas el navegador debe saber qué codificación de caracteres (character encoding) usar para interpretar el contenido de la página web
Character enconding
- ISO-8859-1 conocido como “Latin-1” (el usado por nosotros)
- ISO-8859-15 “Latin-1” + caracter del euro
- ISO-8859-5 soporta caracteres Cyrillic (alfabeto ruso, bulgaro, esloveno)
- SHIFT_JIS codificación japonesa
- EUC_JP otra codificación japonesa
Caracteres speciales
- Para estar seguro que los caracteres acentuados o especiales se visualicen de manera correcta en el navegador deben ingresarse de la siguiente manera:
&# + nº ASCII o código especial
Ej.:
á = à = á
ñ = ñ = ñ
< = < = <
& = & = &
Estructura general para un documento html
<!DOCTYPE HTML PUBLIC “ ...” “...”> version HTML
<html>
<head>
Información que se necesita para que la
página funcione. No la ve el usuario.
</head>
<body>
Contenido de la página - La ve el usuario
</body>
</html>
<head>
- Es el cabezal del documento.
- Contiene información para buscadores o para el propio navegador.
- No es visible por el usuario (excepto el título en la barra del navegador).
- Puede contener meta información (meta data), cuyo comportamiento es variable.
Titulo
<head>
<title> Nombre de la página </title>
.......
</head>
- Es muy importante poner el título.
- Se despliega en la barra del navegador.
- Aparece cuando se imprime.
- Aparece como título en los motores de búsqueda.
- Sólo puede haber un título en cada página.
Meta data
<head>
<title> Nombre de la página </title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta name=“keywords” content=“palabras claves” />
<meta name=“description” content=“este sitio contiene
información acerca de ...” />
<meta name=“author” content=“nombre y e-mail” />
</head>
<body>
- Debe existir la etiqueta body de cierre.
<body> … </body> - Contiene el documento en sí.
- Lo que esté fuera de body puede ser no representable en algunos navegadores.
- Sin embargo es leído e interpretado (caso lenguajes de script).
- Todos los documentos html tienen body, excepto los documentos que construyen marcos (frames).
Atributos de body
- Algunos atributos de la etiqueta body son:
bgcolor: color de fondo del documento html.
El valor debe estar en formato Hexadecimal o por el nombre del
color, p.ej.: #000000 – Black, #FFFFFF – White, #FF0000 – Red
background: imagen de fondo del documento.
text: color del texto en el documento. - Estos atributos no son recomendados en la versión 4 de html, se recomienda el uso de hojas de estilos css, ya que se refieren a la apariencia del documento.
Saltos de linea y comentarios
- Para que en el navegador aparezca un salto de línea debe ingresarse el siguiente código: <br />(es el enter)
- Los comentarios son porciones de texto incluido en el código, pero que no se representará en el navegador. <!-- aquí va el comentario -->
Encabezados
- Se definen distintos tamaños de texto con destaque (negrita).
- Las etiquetas se nombran hn siendo n un número entre 1 y 6.
- A menor valor de n, mayor destaque tiene el texto (ej. h1 es el titulo principal, h2 titulo
secundario ...).
Ejemplos:
<h1> .... </h1>
<h2> .... </h2>
<h3> .... </h3>
<h4> .... </h4>
Ejemplo en el código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Página de Prueba</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<h1>Encabezado H1</h1>
<h2>Encabezado H2</h2>
...
</body>
</html>
