Vous êtes sur la page 1sur 13

Mdulo profesional: Lenguajes de marcas y sistemas de gestin de informacin

HTML 1. Introduccin 2. Formato 3. Listas 4. Tablas 5. Enlaces o hipervnculos 6. Formularios 7. Marcos Hojas de estilo CSS

www.desarrolloweb.com

HTML. INTRODUCCIN. Qu es HTML? Par Cliente-Servidor. Estructura de una pgina web. Elementos HTML. Reglas para dar nombre a los ficheros .html.

HTML. INTRODUCCIN. Qu es HTML?


o Los documentos que observamos cuando navegamos por Internet se denominan genricamente pginas Web y en su mayor parte suelen estar realizados en un lenguaje conocido como HTML, Hyper Text Markup Language que traducido al castellano sera Lenguaje de Marcas de Hipertexto. o Hipertexto: conjunto de informacin en soporte multimedia que se estructura mediante enlaces o hipervnculos de forma que el usuario puede acceder a ella de forma gil y teniendo la posibilidad de establecer su propio itinerario de lectura.

HTML. INTRODUCCIN. Qu es HTML? o Un documento HTML no es ms que un documento de texto que incluye informacin que se desea publicar. Adems cuenta con una serie de elementos incrustados (llamados marcas o etiquetas) que indican al explorador o navegador Web (Explorer, Mozilla, Netscape, Opera,...) cmo debe de mostrar en la pantalla la informacin que contiene. o Todos los grficos, sonidos, imgenes que se ven en una pgina Web son archivos individuales, en el cdigo del documento html se indica cmo se llama el archivo, en qu carpeta est situado, dnde debe ponerlo en la pgina y cmo mostrarlo pero no estn incrustados dentro de l, por lo que adems de subir al servidor el documento html deberemos enviar todos los grficos, sonidos, etc, que se utilicen en la pgina (tambin deberemos adjuntar todos los archivos utilizados si enviamos la pgina por correo).

HTML. INTRODUCCIN. Par Cliente-Servidor. o Cliente web o navegador: cada uno de los usuarios que quiera consultar un pgina web. Utilizar un software especializado en recibir la informacin ofrecida por el ordenador que hace las funciones de servidor. o El empleo del trmino navegador obedece a dos motivos: o Por una parte la metfora de Internet como un mar de contenidos nos lleva a aplicar el nombre de navegador al programa cuya misin es transportarnos por ese mar. o Por otra parte, el trmino es en parte una generalizacin por extensin del nombre del programa ms utilizado durante la fase inicial de la expansin de Internet: el Navigator de Netscape (tambin son llamados exploradores por Internet Explorer).

HTML. INTRODUCCIN. Par Cliente-Servidor. o Servidor web: hace posible que las pginas web estn disponibles en Internet. Requisitos que debe cumplir: o Que se encuentren en un ordenador permanentemente conectado a Internet.
o Que dispongamos de una direccin IP fija y conocida

por los ordenadores que se encargan de traducir las peticiones de los internautas a direcciones IP.

o Que el ordenador en el que se alojan las pginas disponga del software adecuado para recibir conexiones exteriores y sea capaz de poner a disposicin de los visitantes aquello que solicitan. o As pues, ya tenemos definida la estructura de relacin entre ordenadores necesaria para que la Web funcione: establecer un par Cliente-Servidor.

HTML. INTRODUCCIN. Estructura de una pgina web.


<html> (Indica que lo que viene a continuacin es cdigo html) <head> (Etiqueta de apertura de la cabecera) La cabecera contiene informacin sobre la propia pgina, esta informacin se introduce mediante unas etiquetas especiales que hacen que su contenido no se muestre en la ventana del navegador, el ttulo de la pgina aparecer en la barra de ttulo del navegador. Si no utilizamos etiquetas especficas su contenido se mostrar en la pantalla. </head> (Etiqueta de cierre de la cabecera) <body> (Etiqueta de apertura del cuerpo) En el cuerpo debemos escribir toda la informacin que deseemos que se muestre en la pantalla del navegador, tambin se colocan todas las etiquetas que indican el formato con que debe aparecer dicha informacin. </body> (Etiqueta de cierre del cuerpo) </html>

HTML. INTRODUCCIN. Elementos HTML. o Los elementos HTML suelen estar formados por pares de etiquetas: inicial y final. La etiqueta inicial es un conjunto de caracteres (suelen hacer referencia al nombre ingles del elemento) encerrado entre los signos menor que < y mayor que >, por ejemplo <head> . La etiqueta final es igual a la inicial si exceptuamos que va precedida de una lnea inclinada, </head> . o Existen elementos que no necesitan etiqueta final, porque no encierran informacin. Por ejemplo <br> hace un salto de lnea o <hr> crea una lnea horizontal. En algunos otros elementos es opcional, aunque es recomendable ponerla, por ejemplo <p>...</p> indica un salto de prrafo e introducir un doble salto de lnea. IMPORTANTE en XHTML <br/> y <hr/>.

HTML. INTRODUCCIN. Elementos HTML. o Las etiquetas iniciales pueden contener atributos que modifican los valores predeterminados de dichas etiquetas. Por ejemplo, cuando abrimos un documento el fondo del mismo es siempre de color blanco, si yo quiero modificar dicho color deber aadir un atributo dentro de la etiqueta <body>, en concreto debera poner <body bgcolor=blue> , el atributo bgcolor me permite modificar el color del fondo de un documento. o El atributo debo de escribirlo entre los signos < y > a continuacin del nombre del elemento, dejando al menos un espacio en blanco de separacin, el valor del atributo es recomendable que vaya entrecomillado.

Prctica 1
Abre el bloc de notas. Escribe las seis etiquetas que tienes en el recuadro superior (<html> <head> </head> ...) cada una en una lnea. Coloca el cursor a continuacin de la etiqueta de apertura <head> y escribe<title> Mi primera pgina</title> Coloca el cursor a continuacin de la etiqueta de apertura <body>, pulsa [Intro] y escribe lo siguiente: TTULO DE LA PGINA WEB. Pulsa la tecla [Intro] dos veces para dejar una lnea en blanco y escribe: Esta es la primera lnea de mi ejercicio: Pulsa una vez la tecla [Intro] para escribir en la lnea siguiente y escribe: Esta es la segunda lnea de mi ejercicio. Guarda el documento en la carpeta curso_html con el nombre practica1.htm. Para poder guardar el documento como htm o html debers pulsar la opcin Guardar como del men ARCHIVO, a continuacin en el cuadro de texto Guardar en debers buscar y seleccionar la carpeta curso_html, posteriormente escribirs en el cuadro de texto Nombre de archivo el nombre del fichero con la extensin, es decir, practica1.htm ( tambin puedes poner practica1.html) y para finalizar en el cuadro Guardar como archivo de tipo pulsars en la flecha de la derecha yseleccionars la opcin Todos los archivos (*.*). Abre en el navegador el documento que acabamos de salvar y comprueba el resultado.

HTML. INTRODUCCIN. Reglas para dar nombre a los ficheros .html. o No s si te habrs fijado que en el nombres del fichero, no hemos colocado la tilde en la palabra practica, que, segn las reglas de acentuacin debera de llevar. o La explicacin de esto tiene que ver con la forma en que los servidores de Internet van a tratar los nombres de los ficheros que almacenan y las peticiones que les realizan los navegadores: los caracteres no anglosajones (entre los que se encuentran las vocales acentuadas y la ) as como los espacios en blanco en los nombres van a provocar errores y el servidor va a contestar que no encuentra la pgina.

HTML. INTRODUCCIN. Reglas para dar nombre a los ficheros .html. o Para evitar errores ten en cuenta siempre estas tres reglas: o Escribe siempre los nombres de ficheros y pginas con minsculas, cambia el nombre si es necesario. La mayor parte de los servidores de Internet utilizan un sistema operativo distinto de Windows, este sistema diferencia las maysculas de las minsculas para l ejemplo1.htm, Ejemplo1.htm, ejemplo1.HTM seran tres ficheros distintos. o No dejes espacios en blanco en los nombres de ficheros, si est formado por dos o ms palabras utiliza el signo del subrayado para unirlas. Ejemplo: mi_primera_pagina.htm o No utilices nunca caracteres especiales en los nombres de ficheros, muy importante la es un carcter especial y los acentos tambin.

HTML. INTRODUCCIN. Reglas para dar nombre a los ficheros .html. o CUIDADO! cuando veas las pginas en tu ordenador no notars ningn problema. Ten en cuenta que te las

est sirviendo tu propio ordenador, que tiene configurado el teclado en castellano, un sistema operativo que no diferencia maysculas de minsculas (Windows) y que admite espacios en blanco.

Vous aimerez peut-être aussi