75.43 Introducción a los Sistemas Distribuidos
75.33 Redes y Teleprocesamientos I
1° Cuatrimestre 2005
" Breve Introducción a
HTML, PHP y JavaScript"
Gabriel Frymer y María Feldgen
FIUBA
HTML (HyperText Markup Language)
Manual completo: buscar en http://www.w3.org/ MarkUp/ y buscar HTML 4.01.
HTML es un lenguaje de Markup basado en el SGML (Standard Generalized Markup
Language), al cual se le agregaron vínculos de hipertexto. Cada browser presenta la
página escrita en HTML de acuerdo a su estructura de Markup. La forma exacta de
interpretación depende de cada browser, por ejemplo los browsers visuales tales como IE
y NN presentan las páginas en pantalla, en cambio, los browsers para no videntes van a
leer el contenido de acuerdo al Markup.
Una página escrita en HTML puede ser creado mediante cualquier editor de texto ya que
se trata de un simple archivo de texto.
Historia de HTML
• 1989: Tim Berners-Lee en el CERN (European Laboratory for Particle Physics)
define un versión muy simple de HTML basado en SGML (Standard Generalized
Markup Language), como parte de un sistema basado en red para compartir
documentos por medio de browsers de texto y que fuera simple de aprender y
mostrar.
• 1992-3: un grupo del NCSA (National Center for Supercomputing Applications,
USA) desarrolla el MOSAIC, un browser visual y gráfico, agregando al HTML
soporte para imágenes, listas anidadas y formularios. Fue el inicio del WEB.
• 1994: Varias personas del grupo de MOSAIC ayudan a empezar a Netscape.
• 1994: Se forma el W3 Consortium (W3C) con sede en el MIT, como una
organización con soporte industrial para la estandarización y desarrollo del Web.
• 1997: Se crea el primer estándar de HTML: HTML 3.2
• 1999: (Diciembre): HTML 4.01 es la recomendación del W3C, que empieza a separar
claramente la estructura del documento de los aspectos de la presentación y que
especifica claramente las relaciones entre HTML y los client-side scripts
(JavaScripts).
HTML 4 viene en 3 diferentes tipos: Strict, Transitional y Frameset. Los últimos
dos permiten a los autores pasar del estándar estricto enfatizando la estructura sobre la
presentación y usando elementos de presentación y atributos que están marcados
como deprecated (cuyo uso se abandonará a corto plazo).
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
Se pueden especificar estilos de presentación para elementos individuales y agregar
diferentes estilos de presentación para diferentes tipos de elementos con style sheets.
HTML 4.01 no está basado en XML. Agregarle a HTML la sintaxis estricta del XML
tiene las siguientes ventajas:
•
•
los elementos de XHTML se pueden usar con otros elementos definidos por XML
las páginas XHTML se pueden procesar fácilmente con herramientas de XML.
• 2000 (Enero): el W3C lanza XHTML 1.0 como una reformulación de HTML 4 .01
bajo la sintaxis estricta de XML. Para soportar los tres tipos de HTML 4,
XHTML 1.0 provee tres DTD's (Document Type Definitions) y que indican el tipo en
la declaración DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
En el primero no se aceptan elementos o atributos deprecated. Muchos browsers no
respetan estas disposiciones y los presentan igual.
• 2001 (Abril): el W3C lanza la recomendación Modularization of XHTML agrupando
elementos de XHTML relacionados en módulos definidos por XML DTD Fragments.
Esta organización modular hace que XHTML sea más flexible y extensible.
• 2002 (Agosto): se lanza el XHTML 2.0 working draft que actualiza los módulos,
elimina el soporte para elementos deprecated y arma una base para la evolución
futura de XHTML.
HTML
Una página Web contiene dos partes: etiquetas de identificación del Markup, llamados
tags y contenido. Los tags están enmarcados entre los símbolos < y > y pueden tener
atributos o modificadores.
Como los tags pueden contener a su vez a otros tags (en forma de un árbol), deberá
entonces existir un tag de inicio y otro de fin. La diferencia entre los mismos lo da la
barra “/” antes del nombre, en el caso del tag de finalización. Si el tag no tiene contenido,
entonces la barra estará antes del signo mayor.
Formato:
<TAG atributo1=”valor1” atributo2=”valor2”>CONTENIDO</TAG>
Los tags son case-insensitive.
Como ejemplo, veamos un documento o página HTML sencilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="es">
<head>
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
2
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
<title>Primer HTML</title>
</head>
<body bgcolor="white">
<font color=”blue”><i>Hola Mundo!<br />Este es un ejemplo.</i></font>
</body>
</HTML>
• La primera línea nos indica el tipo de documento un documento HTML y que su
versión es la 4.01.
• En la segunda línea se abre el tag <HTML> para indicar que comienza un
documento HTML y es en el cual se puede agregar un atributo indicando que el
idioma empleado es español y no inglés que el standard por defecto. El
documento se cierra mediante el tag </HTML> como última línea del documento
que tomará en cuenta el browser. Entre estos dos tags se encontrarán todos los
demás de la página.
• En la tercera línea aparece <HEAD>, debajo de este tag se ubicará la cabecera de
la página y que contiene la información para los "spiders" y "scrawlers" la usen
para armar los índices para los "searchers" (de los tags META y TITLE).
• Luego del tag <TITLE> se colocará el título de la página, que se cerrará
mediante </TITLE>.
• El tag <body> marca el comienzo del contenido de la página que mostrará el
browser.
No todos los usuarios pueden apreciar las páginas web de la misma manera, esto se debe
a varios motivos:
• Pequeñas diferencias entre los browsers.
• No todos los usuarios tienen instaladas las mismas fuentes.
• Diferentes resoluciones de pantalla.
• Tamaño de la ventana.
Comentarios
En HTML los comentarios se deberán encerrar entre “<!--“ y “-->”.
Información para los índices de los buscadores (tag META)
Mediante este tag, podemos brindar información sobre características del documento,
como por ejemplo:
1. AUTHOR: quien escribió el documento.
2. KEYWORDS: los spiders y scrawlers obtienen de este tag las palabras clave que
identifican al documento para armar los índices que usarán los buscadores.
3. HTTP-EQUIV: mediante este atributo, podemos modificar las cabeceras HTTP
que se envían al cliente. Por lo tanto, si el documento está escrito en japonés, el
browser podrá interpretarlo correctamente.
<META http-equiv=”Content-Type” content=”text/HTML; charset=EUC-JP” />
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
3
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
Imágenes
Para utilizar imágenes en nuestras páginas usamos el tag <IMG> y algunos de sus
atributos son.
1. ALIGN: la alineación de la imagen con respecto al texto. (LEFT, RIGHT,
BOTTOM, TOP, MIDDLE, CENTER)
2. ALT: Ya que hay muchos browsers que no pueden mostrar imágenes, es
importante poner la descripción de cuál es la imagen que viene aquí. También,
pensar que la página puede ser accedida por no videntes, quienes usan un lector
para navegarla, entonces es fundamental completar este campo.
3. WIDTH: ancho de la imagen (si no se especifica se toma el que viene con el
archivo, y en ese caso el browser debe esperar a que se cargue todo el archivo que
contiene la imagen).
4. HEIGHT: alto de la imagen (por default: lo mismo que para width)
5. SRC: indica el path al archivo, puede ser relativo o una URL completa (esta
última opción solo se usa si el archivo está físicamente en otro servidor).
<IMG src=”imágenes/foto1.jpg” width=”20” height=”30” align=”center” />
Tablas
Las tablas se usan para ordenar y alinear el texto en filas y columnas.
Los tags que definen una tabla son:
<TABLE>: comienza una tabla y termina con </TABLE>.
1. Algunos de los atributos del tag de comienzo son:
a. ALIGN: define la alineación.
b. WIDTH: el ancho de la tabla, puede ser un porcentaje con lo cual,
ocupará una cantidad relativa a donde estará insertada la tabla.
c. CELLSPACING, CELLPADDING: definen los márgenes entre cada
celda de la tabla.
d. SUMMARY: cumple la misma función que el ALT.
e. BORDER: define el tamaño del borde de la tabla.
La tabla contiene los siguientes tags:
2. <THEAD>: comienza las líneas que son los títulos de las columnas, si tiene y
termina con </THEAD> . Muchas páginas tienen títulos pero se expresaron como
líneas comunes, lo cual hace compleja su comprensión para una persona no
vidente que usa un lector automático. Este tag contiene los siguientes tags:
a. <TR> y termina con </TR>: define una nueva fila. Algunos de sus
atributos son:
i. BGCOLOR: define el color de fondo para esa fila.
FIUBA 75.43/75.33
(Gabriel Frymer y María Feldgen)
4
75.43 Introducción a los Sistemas Distribuidos - 75.33 Redes y Teleprocesamiento I
Breve Introducción a HTML, PHP y JavaScript
ii. VALIGN: especifica la alineación vertical de las columnas de esa
fila.
b. <TH> y termina con </TH>: define el titulo de una columna tiene los
mismos atributos que <TD>
3. <TBODY> y termina con </TBODY>: indica la información que contienen la
tabla. Este tag contiene los siguientes tags:
a. <TR> y termina con </TR> ver 2. a)
b. <TD> y termina con </TD>: es la información de una celda de una
columna. Algunos de sus atributos son:
i. COLSPAN: dice que este dato ocupará N columnas en vez de 1.
ii. ROWSPAN: lo mismo que COLSPAN
Crear cuenta
Comentarios de: HTML (HyperText Markup Language) (0)
No hay comentarios