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.

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 www.google.com 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  http://gias720.dis.ulpgc.es/Gias/Cursos/Tutorial_html /indice.htm Tutorial de HTML. Realizado por Esther Mª Pulido Alonso, Octavio Domínguez Arteaga, Cristina Jiménez Peñate  http://www.w3.org/MarkUp/Guide/Overview.html Getting started with HTML. Realizado por Dave Raggett  http://www.w3.org/MarkUp/Guide/Advanced.html More advanced features. Realizado por Dave Raggett  http://www.w3.org/MarkUp/Guide/Style.html Adding a touch of style. Realizado por Dave Raggett

Bibliografía (cont.)  http://www.ivia.es/htmlref/ HTML. Manual de Referencia. Realizado por Sergio Talens Oliag  http://www.etsit.upm.es/~alvaro/manual/manual.html 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  http://www.utoronto.ca/webdocs/HTMLdocs/NewHT ML/htmlindex.html Introduction to HTML. Realizado por Ian Graham. Universidad de Toronto

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.

Presentaciones similares

Presentación del tema: "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."— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

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.

Presentaciones similares

Presentación del tema: "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."— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback