Programacion Web

HTML es un lenguaje de marcado que se utiliza para
el desarrollo de páginas de Internet. Se trata de la

sigla que corresponde a HyperText Markup
Language, es decir, Lenguaje de Marcas de
Hipertexto, que podría ser traducido como Lenguaje
de Formato de Documentos para Hipertexto.
Se trata de un formato abierto que surgió a partir de

las etiquetas SGML (Standard Generalized Markup
Language). Concepto traducido generalmente como
«Estándar de Lenguaje de Marcado Generalizado»
y que se entiende como un sistema que permite
ordenar y etiquetar diversos documentos dentro de
una lista. Este lenguaje es el que se utiliza para especificar los nombres de las etiquetas que
se utilizarán al ordenar, no existen reglas para dicha organización, por eso se dice que es un
sistema de formato abierto.
EL HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como
textos y sobre su estructura, complementando dicho texto con diversos objetos (como
fotografías, animaciones, etc.).
Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver
con el formato de los documentos. El texto en él se crea a partir de etiquetas, también llamadas
tags, que permiten interconectar diversos conceptos y formatos.
Por otra parte, cabe destacar que el HTML permite ciertos códigos que se conocen como
scripts, los cuales brindan instrucciones específicas a los navegadores que se encargan de
procesar el lenguaje. Entre los scripts que pueden agregarse, los más conocidos y utilizados
son JavaScript y PHP.
El marcado estructural es el que estipula la finalidad del texto, aunque no define cómo se verá
el elemento. El marcado presentacional, por su parte, es el que se encarga de señalar cómo
se verá el texto más allá de su función.
Este lenguaje fue desarrollado por la Organización Europea de Investigación Nuclear (CERN)
en el año 1945 con la finalidad de desarrollar un sistema de almacenamiento donde las cosas
no se perdieran, que pudieran ser conectadas a través de hipervínculos.
Recién en 1965, Ted Nelson acuñó el término hipervínculo, ideando una estructura que se
encontraba conectada de forma electrónica y que más tarde permitiría la creación de la World
Wide Web (1989), un sistema de hipertexto a través del cual era posible compartir una variada
información sirviéndose de Internet (servía para la comunicación entre investigadores
nucleares que formaran parte del CERN).
ORGANIZACION DE UN DOCUMENTO
Los documentos en formato HTML son un documento de elementos anidados. En el nivel mas
alto, nos encontramos HTML que consta de dos partes: cabecera y cuerpo.
En la cabecera se proporciona información acerca del documento, mientras que el cuerpo
contiene el texto de la página.
 Cabecera:
La cabecera es una información acerca de las características generales del documento. Las
marcas de principio y fin del bloque son:
<HEAD>
...
</HEAD>
Puede contener los siguientes datos:
-Titulo (TITLE). Indica el nombre del documento.
-Dirección de base (BASE). Proporciona una dirección de base para interpretar los enlaces
relativos cuando el documento se lee fuera de su contexto.
-El documento es un índice (ISINDEX). Si se pone la palabra clave ISINDEX, el cliente

interpretara que la pagina es un índice y permitirá al usuario introducir palabras claves para
buscarlas.
-Enlaces relacionados (LINK). En la cabecera podemos incluir varios enlaces relacionados con
el documento, como versiones anteriores, dirección del autor, etc.
-Metainformación (META). Sirve para proporcionar información sobre el documento que no

pueda ser expresada en los campos anteriores. La información se escribe usando
nombre/valor que pueden ser empleados para dos propósitos:
1. Proporcionar datos al servidor de HTTP para que genere campos de cabecera.

2. Para que un usuario incluya información adicional sobre el documento.
 Cuerpo:
El cuerpo contiene la parte más importante del documento HTML. Es donde vamos a insertar
todo el texto y los objetos van a ser presentados al usuario.
<BODY>
</BODY>
Descripción de los componentes básicos de HTML: se indica el formato de los caracteres,

marcas, nombres, atributos y comentarios.
Estructura de los documentos: hablaremos de las marcas empleadas para definir las partes de
un documento
Caracteres, palabras y párrafos: juegos de caracteres aceptados en HTML
Caracteres hipermedia: además de las marcas de formato, necesitamos marcas para definir
relaciones
Formularios. permiten la interacción del usuario y el servidor mediante la definición de plantillas
de formulario
Tablas: en los documentos HTML se pueden introducir tablas
Mapas: con los mapas creamos imágenes interactivas con el usuario
Capas: con las capas estructuramos los documentos HTML
CARACTERES
toda cadena de caracteres imprimibles que no represente una maraca, se visualizará en el

navegador literalmente. Para reducir los documentos a ASCII de 7 bits y representar los
caracteres empleados para marcas el texto, se definen dos mecanismos de referencia:
Referencia por nombre: el carácter se representa con un & seguido del nombre del carácter y
un punto y coma. Por ejemplo:
& será el carácter &, y: < el carácter <.
Referencia numérica: en lugar de dar la referencia por nombre, se escribe # seguido del
número de carácter en el código de caracteres seleccionado. Por ejemplo:
& será el carácter &, y: < el carácter <.
MARCAS
Las marcas delimitan los elementos de un documento HTML, como cabeceras, párrafos, etc.
Constan de dos partes, una marca de inicio del elemento y otra marca de finalización del
elemento.
Las marcas iniciales de escriben entre los símbolos "<" y ">" y las finales entre "</" y "/>"
NOMBRES
Los nombres se componen de una letra seguida de letras, dígitos o guiones.

La longitud del nombre está limitada a 72 caracteres. Los nombres no se distinguen entre
mayúsculas o minúsculas, pero los nombres de entidades, sí
ATRIBUTOS
Cuando una marca inicial admite atributos, éstos se escriben a continuación del nombre del
elemento:
nombre_atributo=valor_atributo
COMENTARIOS
Se realiza mediante la marca de comentarios:

<!.......>
Todo comentario comienza con "--" e incluye todo el texto hasta la siguiente aparición de "--"
IDENTIFICACIÓN DEL NIVEL HTML
El lenguaje HTML se compone por bloques, cada uno identificado por marcas. Dentro de cada
bloque se pueden anidar más bloques, uno dentro de otro. Cada bloque correspondería con
un nivel del documento HTML
Estructura de una página HTML
Estructura básica
 Cada página comienza con: < HTML >.

 A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
 Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las
instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.
 La página acabará con < /HTML >.
Es decir:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
Cabecera
La cabecera de un documento está delimitada por las etiquetas < HEAD > y </HEAD > Sus
componentes son opcionales. El más importante es <TITLE> , que permite escribir el título del
documento. El título no se muestra en la página, sino en la parte superior de la ventana del
visualizador, como identificador en los bookmarks y en la history list. Se utiliza de la siguiente
forma:
<HEAD>
<TITLE>Título del documento HTML</TITLE>
</HEAD>
Cuerpo
Es la parte delimitada por <BODY> y < /BODY >. Puede llevar los siguientes atributos:
 BACKGROUND="imagen": define el fondo. Más adelante veremos más

sobre imágenes.
 BGCOLOR="######": color del fondo (sólo si no se define una imagen de fondo, o si

esta imagen no puede obtenerse... Más adelante veremos más sobre colores. Por ahora
nos basta saber que para los colores básicos se puede utilizar su nombre en inglés:
white, blue, red, green ...
 TEXT="######": color del texto. Por defecto será negro.
 LINK="######": color de los links. Por defecto será azul.
 VLINK="######": color de los links visitados. Por defecto será violeta.

Etiquetas básicas de HTML
Consejo de Atributos
<body bgcolor=?>
Establece el color de fondo, usando nombres o valores hex
<body text=?>
Establece el color del texto, usando nombres o valores hex
<body link=?>
Establece el color de los enlaces, usando nombres o valores hex
<body vlink=?>
Establece el color de los enlaces, usando nombres o valores hex
<body alink=?>
Establece el color de los enlaces con un clic
Etiquetas de texto
<pre> </ pre>
Crea texto preformateado
<h1> </ h1>
Crea un título grande
<h6> </ h6>
Crea un título pequeño
<b> </ b>
Crea texto en negrita
<i> </ i>
Crea texto en cursiva
<tt> </ tt>
Crea, o máquina de escribir estilo de texto-teletipo
<cite> </ cite>
Crea una cita, por lo general en cursiva
<em> </ em>
Hace hincapié en la palabra (con cursiva o negrita)
<strong> </ strong>
Hace hincapié en la palabra (con cursiva o negrita)
Enlaces
<a href="URL"> </ a>
Crea un hipervínculo
<a href="mailto:EMAIL"> </ a>
Crea un enlace de correo
<a name="NAME"> </ a>
Crea una ubicación de destino dentro de un documento
<a href="#NAME"> </ a>
Enlaces a ese lugar de destino en otra parte del documento
Formato
<p></p>
Crea un nuevo párrafo
<p align=?>
Alinea un párrafo a la izquierda, derecha o al centro
<br />
Inserta un salto de línea
<ol> </ ol>
Crea una lista numerada
<li> </ li>
Precede a cada elemento de la lista, y añade un número
<ul> </ ul>
Crea una lista con viñetas
Elementos gráficos
<img src="name">
Agrega una imagen
<img src="name" align=?>
Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo
<img src="name" border=?>
Ajusta tamaño del borde alrededor de una imagen
<hr />
Inserta una regla horizontal
<hr size=?>
Establece el tamaño (altura) de la regla
<hr width=?>
Establece la anchura de la regla, en porcentaje o valor absoluto
Tablas
<table> </ table>
Crea una tabla
<tr> </ tr>
marcha cada fila en una tabla
<td> </ td>
Pone en marcha cada celda de una fila
<th> </ th>
Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado)
Atributos de la tabla
<table border=#>
Establece el ancho de borde alrededor de celdas de la tabla
<table cellspacing=#>
Ajusta la cantidad de espacio entre las celdas de la tabla
<table cellpadding=#>
Ajusta la cantidad de espacio entre el borde de una celda y su contenido
<td colspan=#>
Establece el número de columnas de una celda debe abarcar
<td rowspan=#>
Establece el número de filas de una célula debe abarcar (por defecto = 1)
<td nowrap>
Evita las líneas dentro de una célula se rompa para adaptarse a
Formularios
Para las formas funcionales, tendrá que ejecutar un script CGI. El HTML sólo crea la
apariencia de un formulario.
<form> </ form>
Crea todas las formas
<select name="nombre" múltiples size=?> </ select>
Crea un menú desplegable. Tamaño establece el número de elementos de menú visible
antes de yo u necesidad de desplazarse.
<option>
Pone en marcha cada elemento de menú
<select name="NAME"> </ select>
Crea un menú desplegable
<textarea name="nombre" cols=40 rows=8> </ textarea>
Crea un área de la caja de texto. Establecer el ancho de las columnas, filas ajustar la
altura.
<input type="checkbox" name="NAME">
Crea una casilla de verificación. Texto siguiente etiqueta.
<input type="radio" name="nombre" value="x">
Crea un botón de radio. Texto sigue etiquetas
<input type=text name="foo" size=20>
Crea una línea de texto y un área. Tamaño establece la longitud, en caracteres.
<input type="submit" value="NAME">
Crea un botón Enviar
<input type="image" border=0 name="NAME" src="name.gif"> type="image"
Crea un botón Enviar con una imagen
<input type="reset">
Crea un botón de reinicio

Programacion Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Programacion Web

Cargado por

Copyright:

Formatos disponibles

HTML es un lenguaje de marcado que se utiliza para

el desarrollo de páginas de Internet. Se trata de la

Se trata de un formato abierto que surgió a partir de

-El documento es un índice (ISINDEX). Si se pone la palabra clave ISINDEX, el cliente

-Metainformación (META). Sirve para proporcionar información sobre el documento que no

1. Proporcionar datos al servidor de HTTP para que genere campos de cabecera.

Descripción de los componentes básicos de HTML: se indica el formato de los caracteres,

toda cadena de caracteres imprimibles que no represente una maraca, se visualizará en el

Los nombres se componen de una letra seguida de letras, dígitos o guiones.

Se realiza mediante la marca de comentarios:

IDENTIFICACIÓN DEL NIVEL HTML

 Cada página comienza con: < HTML >.

 BACKGROUND="imagen": define el fondo. Más adelante veremos más

 BGCOLOR="######": color del fondo (sólo si no se define una imagen de fondo, o si

 TEXT="######": color del texto. Por defecto será negro.

 LINK="######": color de los links. Por defecto será azul.

 VLINK="######": color de los links visitados. Por defecto será violeta.

También podría gustarte