HTML Básico
Temas a desarrollar ¿Qué es HTML? Estructura de un documento HTML Comentarios Títulos Cabeceras Párrafos Salto de línea Fuentes Estilos de caracteres Agregar imágenes Agregar links a otras páginas Tipos de listas
¿Qué es HTML? HTML, HyperText Markup Language, es un lenguaje utilizado para crear documentos de hipertexto para WWW Un hipertexto es texto resaltado que el usuario puede activar para cargar otra página WWW HTML describe la estructura y el contenido de un documento Es independiente de la plataforma en que se utilice
¿Qué es HTML? (cont.) Utiliza una serie de marcas (tags) que controlan el comportamiento del documento Para escribir HTML se necesita: un editor de texto ASCII, como el Bloc de Notas de Windows un programa cliente WWW, como Netscape para probar el documento a medida que se va desarrollando
Estructura de un documento HTML Opcionalmente, se empieza con la marca y se finaliza con la marca Opcionalmente, se empieza con la marca y se finaliza con la marca Los documentos HTML se estructuran en dos partes: la cabecera ( ) el cuerpo ( ) Ejemplo del formato mínimo de la cabecera <html><head> Aquí va el nombre del documento Aquí va el nombre del documento </head> Cuerpo del documento...</html>
Estructura de un documento HTML (cont.) El cuerpo del documento va entre y El cuerpo del documento va entre y Estructura mínima que debe poseer todo documento HTML: <html><head> Estructura mínima de un documento HTML Estructura mínima de un documento HTML </head><body>Documento...</body></html>
Comentarios Los comentarios se introducen entre las marcas: Los comentarios se introducen entre las marcas: Ejemplo:
Títulos El título se coloca al principio del documento, en la cabecera La mayoría de los browsers muestran el título en la barra window caption Ejemplo: Mi primer documento HTML Mi primer documento HTML
Cabeceras En HTML hay seis tipos de cabeceras es la más importante (grande) es un poco menos importante, y así hasta es un poco menos importante, y así hasta Una cabecera importante se agrega así: Una cabecera importante Una cabecera importante se agrega así: Una cabecera importante Una un poco menos importante así: Una cabecera un poco menos importante Una cabecera un poco menos importante
Párrafos Cada párrafo debe empezar con el tag Cada párrafo debe empezar con el tag es opcional admite el atributo align, que puede tomar uno de los siguientes valores: left: justifica el texto a la izquierda (por defecto) right: justifica el texto a la derecha center: el texto aparece centrado Por ejemplo: Este es el primer párrafo. Este es el primer párrafo. Este es el segundo párrafo. Este es el segundo párrafo.
Salto de línea Se usa el tag Se usa el tag sólo tiene marca inicial Ejemplo: Texto1, texto1, texto1, texto1, texto1, texto1, texto1. Texto2
Fuentes El tag define el tamaño, color y tipo de letra mediante los siguientes atributos: size: regula el tamaño de los caracteres (1 - 7) color: especifica el color de los caracteres face: permite definir el tipo de letra: Algerian, Arial, Times New Roman, Courier … Ejemplos: Texto de color verde y tamaño 4. Texto de color verde y tamaño 4. Texto de color rojo y tamaño 6. Texto de color rojo y tamaño 6.
Estilos de caracteres Negritas: tag Negritas: tag Cursiva: tag Cursiva: tag Subrayado: tag Subrayado: tag Tachado: tag Tachado: tag Superíndice: tag Superíndice: tag Subíndice: tag Subíndice: tag Por ejemplo: Negrita y cursiva Negrita y cursiva
Agregar imágenes Para agregar imágenes se usa el tag Para agregar imágenes se usa el tag Si tenemos una imagen en un archivo llamado “bono.jpg” en el mismo directorio que el documento HTML, agregamos una imagen así: El atributo src nombra y localiza el archivo imagen
Agregar imágenes (cont.) Para la gente que no puede ver la imagen, se coloca una pequeña descripción de la misma usando el atributo alt:
Agregar links a otras páginas Los links se definen con el tag Los links se definen con el tag Para definir un link a la página “bono.html”: Este es un link a la página de Bono. El texto entre y es el link
Agregar links a otras páginas (cont.) Para hacer link a una página que está en otro sitio Web se debe dar la dirección Web completa (el URL) Por ejemplo, para ir a se debe escribir: Este es un link a Google. Una imagen puede ser un link:
Tipos de listas Lista sin orden Usa los tags y Usa los tags y Por ejemplo: <ul> el primer ítem de la lista el segundo ítem de la lista el tercer ítem de la lista el primer ítem de la lista el segundo ítem de la lista el tercer ítem de la lista </ul> es obligatorio, es opcional
Tipos de listas Lista ordenada Es una lista numerada Usa los tags y Usa los tags y Por ejemplo: <ol> el primer ítem de la lista el segundo ítem de la lista el tercer ítem de la lista el primer ítem de la lista el segundo ítem de la lista el tercer ítem de la lista </ol> es obligatorio, es opcional
Tipos de listas Lista de definiciones Es útil para listar términos y sus definiciones Una lista de definiciones comienza con un tag y termina con un tag que es obligatorio Cada término comienza con un tag y cada definición comienza con un tag Cada término comienza con un tag y cada definición comienza con un tag Por ejemplo: <dl> el primer término su definición el primer término su definición el segundo término su definición el segundo término su definición </dl> Los tags y son opcionales
Tipos de listas Listas Anidadas Las listas se pueden anidar Por ejemplo: <ol> el primer ítem de la lista el segundo ítem de la lista el primer ítem anidado el segundo ítem anidado el primer ítem de la lista el segundo ítem de la lista el primer ítem anidado el segundo ítem anidado </ul></li> el tercer ítem de la lista el tercer ítem de la lista </ol>
Bibliografía /indice.htm Tutorial de HTML. Realizado por Esther Mª Pulido Alonso, Octavio Domínguez Arteaga, Cristina Jiménez Peñate Getting started with HTML. Realizado por Dave Raggett More advanced features. Realizado por Dave Raggett Adding a touch of style. Realizado por Dave Raggett
Bibliografía (cont.) HTML. Manual de Referencia. Realizado por Sergio Talens Oliag Manual Práctico de HTML. Realizado por Alvaro Martínez Echevarría. Escuela Técnica Superior de Ingenieros de Telecomunicación de la Universidad Politécnica de Madrid ML/htmlindex.html Introduction to HTML. Realizado por Ian Graham. Universidad de Toronto