Curso de HTML y CSS

Curso HTML + CSS

Abril 2005

Jordi Llonch
jordi@laigu.net

Basado en los cursos de:
http://www.webestilo.com/html/
http://www.webestilo.com/css/

http://creativecommons.org/licenses/by-sa/2.0/

Curso HTML + CSS

Conceptos básicos
• World Wide Web (WWW): Sistema de información.
• Navegador: Es el programa que nos ofrece acceso a Internet.
• Servidor: Se encarga de proporcionaral navegador los documentos y medios que
este solicita.

• HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los

servidores de World Wide Web utilizan para mandar documentos HTML a través de
Internet.

• URL: Es el Localizador Uniforme de Recursos.
• HTML: "Lenguaje para marcado de hipertexto".

2

Curso HTML + CSS

El lenguaje HTML
• Lenguaje queestructura el documento.
• Proporciona el contenido (utilizaremos CSS para el formato...)
• Compatibilidad.
• Etiquetas:
– texto afectado

3

Curso HTML + CSS

Estructura básica de un doc. HTML: Cabecera y cuerpo del
documento

• : Limitan el documento e indica que se encuentra
escrito en este lenguaje.
• : Especifica el prólogo del resto del archivo. Son
pocas las tags que vandentro de ella, destacando la
del titulo .
• : Encierra el resto del documento, el contenido.

4

Curso HTML + CSS

Primer ejemplo HTML



Ejemplo 1


Hola mundo



5

Curso HTML + CSS

Primeros pasos:
• , , ...: Titulares. Sirven para dividir el texto
en secciones. Se pueden definir seis niveles de
titulares.
• : Párrafos.
• : Saltos de línea.
• : Comentarios.

6Curso HTML + CSS

Ejemplo


Ejemplo 2


Mi primera página

Hola mundo, esta es un página con titular,
que tiene también un párrafo y unos cuantos
saltos de línea.
Uno
Dos
Tres



7

Curso HTML + CSS

Creación de enlaces
• Lo característico del lenguaje HTML es el poder generar
vínculos de hipertexto para enlazar con ellos todos sus
documentos en web:
– .....: Sirvepara saltar entre diferentes
URLs.
– Primera parte: Utilizamos el
atributo name para dar nombre a una sección de nuestro
documento.

8

Curso HTML + CSS

Ejemplo enlaces


Ejemplo 3


Página de enlaces
Ir abajo
Ir a ejemplo 4
Ir a WebEstilo
.......


.....

Ir arriba



9

Curso HTML + CSS

URL: Localizador Universal de Recursos
• Los URL son las direcciones delas informaciones que buscamos en
Internet.
• Constan de:
– Protocolo: Programa que utilizará el navegador para obtener
el archivo elegido. (HTTP, FTP...)
– Nombre del host: Se trata del sistema donde se encuentra
almacenada la información que buscamos.
– Ruta del fichero: Se trata de la ubicación del archivo dentro
del host.
• Ej:
– http://www.bienvenidos.es/publico/saludos.html

10Curso HTML + CSS

Tipos de URL
• HTTP: Los utilizados por los servidores de WWW.
• FTP: Apuntar archivos que estén en servidores que usan
el protocolo FTP (File Transfer Protocol). Utilizado para
enviar y recibir ficheros.
• File: Apuntan hacia archivos contenidos en el mismo
disco que se encuentra el navegador
• Mailto: Se usa para mandar correos electrónicos.(webmaster@bienvenidos.es)
• News: Son URL de grupos de noticias.

11

Curso HTML + CSS

Listas


Ejemplo 6


Listas
Una lista ordenada

Uno
Dos
Tres


Una lista sin ordenar

Uno
Dos
Tres


Una lista de glosario

Témino 1
Definición 1
Témino 2
Definición 2


Listas anidadas

Uno

Uno
Dos
Tres


Dos
Tres




12

Curso HTML + CSSEstilos de caracter


Ejemplo 7


Estilos de caracter
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.

Un ejemplo de texto de realzado.
Un ejemplo de texto de...