HTML quiere decir HIPER TEXT MARKUP LANGUAGE y es código estándar básico para la creación de páginas web.
TIPOS DE ESTRUCTURAS CLASICAS
JERARQUICA: Es la típica estructura de árbol en el que la raíz (índex) contiene una presentación o introducción y un menú principal a partir de esta raíz se pueden arreglar a las diferentes secciones que contiene el sitio. La información general se encuentra en los extremos y los detalles en los niveles interiores. La estructura jerárquica permite al visitante saber siempre el lugar del sitio en el que se encuentra navegando, pudiendo adentrarse en la estructura para obtener más información.
LINEAL: Es la estructura más simple de todas en la que se maneja de una página a la siguiente o a la anterior como si se estuviera leyendo un libro. Esta estructura es muy útil cuando quieres que el visitante siga una estructura o un esquema guiado se recomienda para tutoriales o visitas guiadas.
LINEAL CON JERARQUIA: Es una mezcla de las dos estructuras anteriores: Los temas y subtemas están organizados de una forma jerárquica pero puedes leer todo el contenido en forma lineal.
RED: Es una organización libre sin orden establecido aparente. Esta estructura tiene el riesgo de perder al visitante dentro del sitio, o de que no logre ver algún contenido que pretendían mostrarle.
HTML Y TAGS
El HTML es un lenguaje de marcadores o tags que se insertan en un documento de texto los tags son indicaciones que le dicen al navegador que hacer. El navegador lee las instrucciones y despliega o ejecuta lo que se le indica. Al conjunto de instrucciones que definen una página web se le llama código fuente.
Los tags son por lo general palabras en inglés o abreviaturas y se distinguen del resto porque están encerrados entre símbolos <>.
La primera regla de HTML es muy simple los tags siempre van en parejas por ejemplo si utilizo el tag <h1> para comenzar un encabezado debo utilizar el tag </h1> para terminarlo. Notaras que se utiliza una diagonal en el segundo tag, la diagonal distingue al tag que cierra (con diagonal) del tag que abre (sin diagonal). Algunos tags no se cierran.
Todas las paginas HTML comienzan con el tag <HTML> y terminan con el tag </HTML>. Esta sección limita el documento e indica que todo lo que está dentro de los marcadores se encuentra escrito en este lenguaje.
En medio de estos dos tags globales hay dos secciones generales la cabeza <head>, y el cuerpo <body>.
En la cabeza se pone información que no aparece directamente en el interior de la página como el titulo (<title>) que debe ser corto y significativo.
En el cuerpo del documento se encuentra todo lo que va a aparecer en la página.
Una vez guardado el código fuente en el blog de notas se debe guardar con la extensión .HTML
TRABAJO CON COLOR
Los colores en tu monitor se forman mediante la combinación de tres canales de color rojo, verde y azul (red, green and blue) (RGB) con los que se pueden tomar todos los colores para una página web. Cualquier color puede expresarse mediante un código numérico formado de tres valores, que indican el valor de rojo, el valor de verde y el valor de azul.
El código de un color comúnmente se expresa en formato hexadecimal el mínimo para cada canal es doble 0 y el valor máximo doble f (que equivale a 255 en formato decimal) de este se forma, el número máximo de colores es 16777216.
De forma predeterminada los navegadores usan el esquema de colores básicos siguientes:
· El fondo de documento es blanco
· El texto normal es negro
· Los links son azules
· Los links ya visitados se vuelven morados
· Los links activos son rojos
Si deseas modificar el esquema de colores puedes agregar variantes al tag del cuerpo del documento body de esta manera:
<body bgcolor= # text=# link=# vlink=# alink=#
MARCOS (MOVIBLES)
<marquee behavior= alternate 7 biografia
Movimiento <marquee> texto en movimiento </marquee>
Tamaño <marquee width=50% height=60> biografia</marquee>
OTROS TAGS
VIDEO: <embed src= “1.avi” width=352 neight=2407
VIDEO: <img dynsrc= “1.avi” start= openfile loop= “1”>
SONIDO: <bgsound src= “1.mp3” loop= “1”>
IMAGEN: <img src= “1.jpg”
<marquee scrollamount= 50>biografia</marquee>
<marquee scrolldellay=200> biografia</marquee>
LETRAS: <font face= “impact”>
<marquee bgcolor= FFFF00>
Esto se ve con la fuente impact
</marquee>
</Font>
<table border=1>
<tr> <td>
<marquee> marquesina dentro de una tabla </marquee>
</td> </tr>
</table>
<body background “1.jpg”>
<body bgcolor= “FF00FF”>
LISTAS
A menudo nos interesa trabajar las cosas en forma de lista, podemos escoger entre tres tipos:
1.- Listas desordenadas (no numeradas).
2.- Listas ordenadas (numeradas).
3.- Listas de definición.
Las listas desordenadas sirven para presentar cosas que no necesitan ir precedidas por un numero su estructura es la siguiente.
<ul>
<li> Cosa
<li> Una cosa
<li> Otra cosa>
</ul>
Las listas ordenadas sirven para presentar cosas en un orden con un número correlativo.
<ol>
<li> Primera cosa
<li> Segunda cosa
<li> Tercera cosa
</ol>
1. Primera cosa
2. Segunda cosa
3. Tercera cosa
El tercer tipo lo forman las listas de definición apropiadas para glosarios. Toda la lista debe de ir englobada entre las etiquetas <dl> </dl> y a diferencia de las dos que hemos visto cada renglón tiene dos partes: 1.- El nombre de la cosa a definir que se consigue con la etiqueta <dt>, la definición de dicha cosa que se consigue con la etiqueta <dd> definición de la cosa.
<dl>
<dt> cosa a definir
<dd> definición de la cosa.
<dt> cosa a definir
<dd> definición de la cosa.
</dl>
TABLAS EN HTML
Al trabajar con imágenes te has dado cuenta que la ubicación de estas dentro del documento no siempre es la más adecuada. En HTML no es posible mover la imagen a la posición que quieras como lo haces en un procesador de palabras.
Para tener control preciso de la ubicación de las imágenes y el texto en un documento web, es necesario crear tablas. Las tablas son la estructura más importante para dar una buena presentación a una página web. Una tabla es la agrupación de celdas en columnas y filas.
Aunque en un principio se incorporaron dentro del lenguaje HTML para mostrar datos tabulados, actualmente las tablas son la principal herramienta para el diseño de páginas web en HTML. El proceso típico de diseño de una página es primero definir su estructura mediante una tabla y luego agregar el contenido (texto e imágenes) en las celdas de las tablas definidas.
Estos son los tags más importantes para definir tablas:
TAG |
FUNCIÓN |
NOTAS |
<table>
|
Inicia la definición de una tabla
|
Se pueden incluir las siguientes propiedades: Border: Tamaño del borde Width: Ancho de la tabla Bgcolor: Color de la tabla Cellspading: Espacio en pixeles entre celda. |
<tr>
|
Define un renglón dentro de una tabla. |
|
<td> |
Define una celda en un renglón.
|
Bgcolor: Color de la celda Colspan: Numero de columnas que se combinan con la celda natural. Rowspan: Numero de filas que se combinan con la fila actual. |
¿QUE DIFERENCIA HAY ENTRE TD Y TR?
· La etiqueta de inicio es <table> y la etiqueta de cierre es
</table>
· <tr> es la abreviatura de table row (filas) e inicia y finaliza las filas horizontales. </tr>
· <td> es la abreviatura de table data es decir datos de la tabla </td> esta etiqueta inicia y finaliza cada una de las celdas que componen las filas de la tabla.
LIGAS DESDE IMAGEN
<p> Crea una liga desde una imagen:
<a href= “Tabla 1.html”>
<img src= “1.jpg” Width= “32” height= “32”>
</a> </p>
<p> Imagen sin borde
<a href= “Tabla 1.html”>
<img Border= 0 src= “1.jpg” Width= “32” height= “32”>
</a> </p>
