¡Descarga Html Básico - Apuntes - Fundamentos De Programación y más Apuntes en PDF de Programación de Ordenadores solo en Docsity!
Guia para el principiante
Este documento asume que usted sabe como publicar en WWW.
Lenguaje HTML
El lenguaje HTML es el usuado actualmente para escribir textos hypermediales en el Web.
El siguiente texto, está diseñado como una primera aproximación al lenguaje HTML.
Tres normas fundamentales
1. HTML es simplemente texto
Lo primero es saber que un documento HTML es un archivo de texto simple, luego, se puede editar con cualquier editor de texto.
2. No importan los tabs, ni los saltos de
línea
Los intérpretes HTML no toman en cuenta las tabulaciones, los saltos de línea ni los espacios en blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite obtener resultados uniformes y de buena presentación de manera bastante fácil. La principal desventaja es que un documento HTML, por lo menos se debe usar los comandos ...
o
para evitar que quede todo el texto en una sola línea.
3. Existen tres caracteres especiales
- < Menor que, se usa para indicar el comienzo de un comando HTML.
- > Mayor que, se usa para indicar el término de un comando HTML.
- & Ampersand, se usa para escribir caracteres especiales (símbolos matemáticos, comerciales, así como el signo menor que y el mayor que entre otros) en un documento.
Comandos básicos de HTML
Lo primero es conocer los comandos que debe contener todo documento HTML de más de una línea de largo.
El comando párrafo
El comando
...
se usa como un delimitador de párrafo en HTML. Inserta automáticamente un quiebre de línea al final del párrafo, y produce un espaciamiento conveniente entre los diferentes párrafos de un documento.
Adicionalmente permite alinear el texto al centro, a la izquierda o a la derecha.
El comando quiebre de línea
El comando
permite hacer un quiebre (salto) de línea.
Adicionalmente se permite realizar saltos más largos o más cortos, dejar atrás las imágenes, etcétera.
Los comandos de encabezamiento
Los textos en HTML poseen seis niveles de encabezados. El nivel de encabezado 1 se usa para las divisiones mayores del texto; es, por lo tanto, el que hace que el texto sea más grande. El nivel de encabezado 6 se usa para las divisiones más chicas del texto; luego, es el que muestra el texto más pequeño.
Todos los comandos de encabezado se escriben de a pares, e insertan un quiebre de línea al final del texto que delimitan.
Nivel de encabezado 1
Nivel de encabezado 2Nivel de encabezado 3
Nivel de encabezado 4
Nivel de encabezado 5
Nivel de encabezado 6
Apariencia del texto
Hay varios comandos para hacer distinta la manera en que aparece el texto. Se trata de delimitadores, que indican donde comienza y donde termina el texto que se verá diferente.
Estos comandos se pueden mezclar entre sí. Algunos de ellos son:
Más comandos en HTML
El comando HTML
El comando ... se usa para delimitar el documento en hypertexto completo. Es útil incluirlo para evitar conflictos con futuras revisiones del lenguaje HTML.
Este comando permite ademá s indicar al cliente la versión de HTML que estamos usando, entre otras cosas.
Listas
Revisaremos dos tipos de lista que se pueden incluir en un hypertexto. Ambos tipos permiten varios niveles de enlace, es decir, podemos tener una lista dentro de otra lista.
Listas no numeradas También llamadas listas no ordenadas, se declaran usando el comando ... . Cada item de la lista se marca con un . El resultado final es que el item se separa del borde izquierdo y aparece marcado con un símbolo (un pu nto, un cuadrado, etc.. depende del nivel de enlace). Listas numeradas También llamadas listas ordenadas, se declaran usando el comando ... . Cada item de la lista se marca con un . El resultado final es que el item se separa del borde izquierdo y aparece marcado con un número. Este comando permite especificar el tipo de numeración que se dará (números arábigos, números romanos, letras, etc.).
Una lista no numerada se ve así:
- Primer item
- Segundo item o (^) Primer subitem o Segundo subitem
- Tercer item
Lo que en HTML se escribe:
Primer item Segundo item
Primer subitem Segundo subitem
Tercer item
La misma lista numerada se ve así:
- Primer item
- Segundo item o Primer subitem o Segundo subitem
- Tercer item
Lo que en HTML se escribe:
Primer item Segundo item
Primer subitem Segundo subitem
Tercer item
Listas descriptivas
Una lista descriptiva es muy útil al momento de hacer glosarios, índices, referencias a otros documentos, o describir, en general, cualquier cosa.
Una lista descriptiva se declara usando el comando ... . Cada ítem de la lista consta de un t ítulo, marcado mediante ... , y una descripción para dicho título, que se indica mediante el comando .
Una lista descriptiva se ve así:
Primer nombre a describir Descripción del primer nombre Segundo nombre a describir Descripción del segundo nombre
Lo que en HTML se escribe:
Primer nombre a describir Descripción del primer nombre Segundo nombre a describir Descripción del segundo nombre
Descripcion Es nombrar las propiedades de algo Lista descriptiva Es nombrar las propiedades de varios objetos
También sabemos centrar el texto.
y escribir preformateado
[email protected]
Santiago de Chile, 1 Enero 2010
Cómo crear una tabla?
Una tabla es una manera muy compacta y clara de mostrar la información. Una tabla en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra.
Una tabla se declara usando el comando ... . Dentro de la tabla, se usa ... para indicar una fila y dentro de una fila, ... para delimitar el contenido de una celda. El elemento de cierre de fila y de celda es optativo.
Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir celdas, especificar la alineación del contenido de la celda, y mucho más.
Para entender mejor el comando ... , está disponible una muy amplia gama de ejemplos.
Ejemplo de tabla
Aquí se muestra una tabla muy simple:
Celda A1Celda B1Celda C1 Celda A2Celda B2Celda C2 Celda A3Celda B3Celda C3
Como hacer referencias en un hypertexto?
La capacidad de hacer referencias en un hypertexto, es sin duda su capacidad más atrayente y práctica para poder entregar de mejor manera la información.
Clasificaremos las referencias o links en tres tipos:
- Referencia a otra zona dentro del mismo documento.
- Referencias a otros documentos.
- Referencias a otra zona en otro documento.
Referencias dentro de un mismo documento
Es posible hacer referencias que lleven al usuario de una parte del documento a otra dentro del mismo documento con solo hacer click. Llamaremos a estas referencias referencias locales Estas referencias constan de dos objetos:
La referencia Corresponde a la zona en la cual el usuario hará click , para viajar a otra parte del documento. Esta zona aparece subrayada en el documento. Una referencia local se crea delimitando la zona con el comando ... , en que nombre es la etiqueta que se está referenciando. El nombre referenciado Corresponde a la zona del documento a la cual el usuario llegará al hacer click en la referencia correspondiente. Esta zona no cambia sus atributos en el documento. Un nombre local se crea delimitando la zona con el comando ... , en que nombre es la etiqueta que asignamos a esta zona.
Ejemplo de referencias locales
Ejemplo 4 - Referencias locales
Referencias locales Indice
Sección uno Sección dos Sección tres
Sección uno
Click aqui para volver al índice
Sección dos Sección tres
[email protected]
Santiago, 1 Enero 2001
Referencias a un lugar de otro documento
Para este tipo de referencias se utiliza una mezcla de las dos formas anteriores. Se indica el URL del documento a referenciar, luego un signo # y luego el nombre de la zona a referenciar.
Un ejemplo de referencia a un lugar en otro
documento
Ejemplo 6 - Referencia a otro documento
Referencia a un lugar en otro documento Referencias especiales
Los comandos de referencia tienen muchas más aplicaciones. Para eso, hay información detallada en la descripción completa.
[email protected]
Santiago, 1 de Enero 2001.
Incluyendo otros elementos en el hypertexto
Para hacer más atractivo y fácil de entender un hypertexto, es posible incluir imágenes, sonido y animaciones. Las imágenes aparecen directamente en el hypertexto (en los casos en que el cliente provee de una interfaz gráfica); en cambio, los sonidos y las animaciones deben ser activados por el usuario mediante un click.
Imagenes
Para incluir una imágen en un hypertexto, se usa el comando .
La imagen puede ser referenciada en forma absoluta o relativa, de la misma forma en que se referenciaba a los documentos hypertexto en la sección anterior.
El comando acepta numerosos modificadores, por ejemplo, se puede especificar la alineación de la imagen (a izquierda, derecha, o centro), el tamaño, agregarle un borde, etc.
Audio
Los archivos de audio son, por lo general, bastante grandes en cuanto al espacio en disco que ocupan; por esto mismo, son también bastante lentos de transferir a través del WWW. Es por esto que los archivos de audio no se cargan de manera automática, sino que requieren son transferidos sólo cuando el usuario lo solicita. Para incluir un sonido, se delimita la sección con un comando que apunte al URL del archivo de audio.
Animaciones
Para incluir una animación, se procede de la misma manera anterior, apuntando al URL de la animación.
Caracteres especiales
Para incluir caracteres especiales, se usa el comando & código ;. El código corresponde al código interno del caracter especial.
De los caracteres especiales, los más usados para las personas de habla hispana son los necesarios para escribir acentos y hacer la letra Ñ. Los códigos de estos caracteres son:
á á é é í í ó ó ú ú ñ ñ Ñ Ñ
Existe una amplia gama de caracteres especiales, símbolos matemáticos, caracteres
extendidos,
