HTML - ¿Qué es?
El HTML (Hyper Text Markup Language)
Es un lenguaje de programación Web
Sirve para escribir hipertexto
Todo ello se puede presentar acompañado de cuantos gráficos estáticos o animados y sonidos.
¿Qué ofrece?
La estética de los documentos escritos en HTML no se limita a texto digamos normal.
Consigue todos los efectos que habitualmente se pueden producir con un moderno procesador de textos: Negrita, cursiva, distintos tamaños y fuentes, tablas, párrafos tabulados, sangrías, incluso texto y fondo de página de colores etc…
¿Cómo Funciona?
La pieza clave es el "browser", "navegador", "visualizador" o "cliente“
Todas las codificaciones de efectos en el texto que forman el lenguaje HTML no son más que instrucciones para el visualizador.
Partiendo de esto, se entiende el porqué no se ve lo mismo con todos los visualizadores.
Depende de cómo estén diseñados y para qué versión de lenguaje estén diseñados.
10 Navegadores
¿Cómo se crea?
Sólo tienes que crear un documento con tu editor preferido, nosotros usaremos AEDIX y guardarlo con la extensión .htm o .html
Los navegadores abren estos archivos por defecto. miweb.html
Recomendaciones 1
Dependiendo del sistema operativo que tenga el servidor, los nombres de los ficheros deben atenerse a ciertas convenciones.
Si el servidor utiliza una plataforma UNIX o LINUX (la mayoría de ellos) los nombres no pueden tener espacios en blanco, y además se tienen en cuenta las mayúsculas.
No es lo mismo Index.html que index.html. Otra cosa importante es que nunca utilices palabras con acentos o caracteres especiales, como eñes, cedillas, etc. para dar nombre a los ficheros.
Recomendaciones 2
Si el servidor utiliza sistemas Windows esto carece de importancia, pero hay que tener en cuenta que tus páginas, antes de llegar al cliente, tendrán que pasar por muchos nodos enrutadores que generalmente son máquinas UNIX
Recomendaciones 3
Otra cosa que hay que tener en cuenta, es el nombre por defecto de la primera página de tu documento. Casi todos los servidores basados en UNIX o LINUX consideran como primera página cualquier fichero llamado index.html. Si no existe este archivo, o el que establezca el administrador del sistema, es necesario que el usuario escriba el nombre de la primera página del documento que desea visitar.
EN RED:
index
http://mi_servidor/index.html otra http://mi_servidor/mis_fotos.html
LOCAL: Si estás diseñando tu documento y solamente quieres ver tu trabajo en local, los navegadores funcionan igual que cualquier otro programa de Windows, y con la opción "Archivo/Abrir" de tu navegador preferido puedes ver cualquier fichero escrito en HTML. En ese caso, la ruta será de este estilo: file:///C:/mi_web_local/index.htm file:///C:/mi_web_local/mis_fotos.html
Elementos en un documento HTML Las instrucciones que forman el lenguaje HTML les llamaremos "TAGS", o "ETIQUETAS".
La notación de las Etiquetas consiste en los símbolos
que encierran dentro una instrucción.
Elementos llenos
Se forman abriendo una instrucción
Escribiendo el texto
Y se cierra la instrucción con la barra diagonal
Ejemplo:
Texto de prueba
Que hace: La instrucción pone el texto al máximo tamaño posible.
Elementos vacíos
Los elementos vacíos se escriben como los llenos, pero no es necesario poner la instrucción repetida al final con una barra. Esto se debe a que estos elementos no producen un efecto sobre el texto. Generalmente se utilizan para separar bloques de texto, y por tanto no es necesario indicar su fin. Empiezan y terminan en el mismo punto. Por ejemplo, el elemento
que sirve para dibujar una línea horizontal en la pantalla.
Elementos con argumento
Algunos elementos se escriben con argumento. Es como pasarle parámetros a la instrucción, y se llaman atributos del elemento. Por ejemplo, el elemento que sirve para hacer un link (enlace) con otro documento o con otra página del actual, se escribirá: Link de prueba .
Este es un elemento lleno donde al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm".
El texto al que afecta este elemento es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.es.
Anidados Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres en el lugar adecuado. Por ejemplo, el elemento combinado con que sirve para generar texto en itálica, se escribirá: Texto de prueba
. Resultado:
Texto de prueba
Estructura básica
Un documento HTML comienza con la etiqueta , y termina con .
Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas:
El encabezamiento delimitado por y . El cuerpo, delimitado por y , donde reside la información del documento.
Estructura
Por tanto siempre tendremos esta estructura.
En la cabecera SUELE ir el título delimitado por title
Título Texto del documento, menciones a gráficos,enlaces, etc.
El El título que realizamos con <title> no aparece como texto en nuestro documento como texto, sino como el título de nuestra web en el navegador
Los diferentes Efectos Ahora que ya sabemos cual es la organización de un documento HTML, podemos empezar a introducir elementos en el. Ejercicios
Ejercicios
10 Ejemplos de Lenguajes de programación web
Definición de hipertexto
Nombra 10 navegadores diferentes
Instalación de Aedix
Comentarios en el código
Toda etiqueta:
Será ignorado por el browser, y por lo tanto no será visible. Esto sirve al autor del documento para comentar su fichero fuente.
Ejercicio
Crear una carpeta en D:\ donde almacenaremos las diferentes webs y archivos en html que realizaremos.
Crear un documento html con su estructura básica.
Cabecera, título, cuerpo, contenido, y los elementos que sean necesarios para ver texto plano en html.
Color y Tamaño del texto
La marca FONT permite actuar sobre bloques distintos de caracteres situados en la misma línea. El atributo SIZE: Regula la altura de los caracteres (1 a 7). El atributo COLOR: Especifica el color de los caracteres. Ejemplo: texto de ejemplo
¿Qué color es?
http://html-color-codes.info/
Fondo BACKGROUND Este atributo especifica una imagen residente en el servidor la cual se utilizará como fondo de página.
Estilo de los caracteres
Programar en el editor…
Listas regulares •Fichero de imagen •Fichero de sonido •Fichero de video
1. Fichero de imagen 2. Fichero de sonido 3. Fichero de video
Código correspondiente:
Código correspondiente:
- Fichero de imagen
- Fichero de sonido
- Fichero de video
- Fichero de imagen
- Fichero de sonido
- Fichero de video
Listas regulares
Listas regulares LI,UL,OL - Esta marca precede a cada objeto de la lista.
Permite generar listas no ordenadas, cada uno de los elementos de la listas irá precedido por un símbolo que puede variar según el nivel de anidamiento de la lista. Esta marca se utiliza para listas ordenadas en las que cada marca LI incrementa el número que se visualizará delante del elemento de la lista.
Cambios de párrafo y línea
Ejercicio Alineación
Listas Anidadas Listas anidadas:
Ficheros HTML 1.
Ficheros de prueba
2. 3.
prueba1.html prueba2.html prueba2.html
Ficheros de ejemplos Ficheros del servidor
Ficheros de imágenes Ficheros de sonido Ficheros de vídeo Código:
- Ficheros HTML
- Ficheros de prueba
- prueba1.html
- prueba2.html
- prueba2.html
- Ficheros de ejemplos
- Ficheros del servidor
- Ficheros de imágenes
- Ficheros de sonido
- Ficheros de vídeo
Tablas
Una tabla se define entre las marcas . Esta primera marca regula la presentación general de la tabla mediante tres atributos:
BORDER define el grosor del marco exterior CELLPADDING define el espacio alrededor del texto de una celda CELLSPACING define el espacio entre celdas WIDTH define la anchura de la tabla relativa a la anchura de la ventana del browser