Hypertext Markup Language HTML. OBJETIVOS Conocer los fundamentos de HTML Escribir HTML usando un editor sencillo Conocer las marcas HTML Visualizar el.

Presentación del tema: "Hypertext Markup Language HTML. OBJETIVOS Conocer los fundamentos de HTML Escribir HTML usando un editor sencillo Conocer las marcas HTML Visualizar el."— Transcripción de la presentación:

1 Hypertext Markup Language HTML

2 OBJETIVOS Conocer los fundamentos de HTML Escribir HTML usando un editor sencillo Conocer las marcas HTML Visualizar el HTML en un navegador Cuando se creó? En 1986 la organización internacional de Estándares publica el SGML (Standard Generalized Markup Language) En 1993 se crea el HTML 2.0 (o HTML+)

3 HTML HTML (Hypertext Markup Language) es un lenguaje de marcas, sencillo, pensado para el intercambio de información en la WWW. CSS se usa para formatear el contenido previamente estructurado. Hypertext Es texto ordinario al que se le incorporan funcionalidades adicionales como: Formato, Imágenes, Multimedia Y enlaces a otros documento. MarkUp Es el proceso de tomar el texto ordinario e incorporarle símbolos adicionales.

4

5 Archivo HTML básico … Delimita el Documento HTML … Delimita el encabezado del Documento HTML En general incluye los metadatos del documentos y Scripts. … Delimita el Cuerpo del Documento HTML. Es donde se incluyen los contenidos visibles del documento. Ejemplo Aquí se incluyen os distintos elementos del encabezado Aquí se incluyen los distintos elementos contenedores

6 Estructura General Titulo de mi Página...... Información opcional......... el texto del documento con marcas.... Cabecera Cuerpo

7 Documento HTML con encabezados Encabezado 1 Encabezado 2 Encabezado 3 Encabezado 4 Encabezado 5 Encabezado 6

8 Parrafos Es el contenedor mas común. Su sintaxis es: … Encabezados Indican una jerarquía de secciones dentro del documento Su sintáxis: …, …, …,.. …,

9 Elementos Etiquetas Pares de etiquetas Texto Etiquetas con atributos Las etiquetas pueden anidarse

10 PARRAFOS Cambian las dos líneas para que se muestren asi Mi primera página web Ésta es mi primera página web Qué emocionante

11 Reglas Generales Los documentos son estructurados Nombres de elementos o atributos no sensibles a mayúsculas Valores de atributos pueden ser sensibles a mayúsculas Nombres de elementos no pueden contener espacios Usar comillas para valores de atributos El browser destruye e ignora caracteres de espacio

12 Elemento HTML Nombre de La Etiqueta Nombre del atributo Valor del atributo AtributoContenido Etiqueta Final Elemento HTML Encabezado de Ejemplo Etiqueta de Inicio

13 Atributos de texto... Soy un parrafo... Soy un texto en Negrita... Soy un texto en Cursiva... Soy un texto Subrayado... Souy un texto Tachado Salto de linea inserta una linea Horizontal... Letra SuperIndice... Letra SubIndice

14 Documento HTML con encabezados Mi primera página web Mi primera página web ¿Qué es esto? Una página simple creada usandoHTML ¿Para qué es esto? Para aprender HTML

15 Documento HTML con contenido Mi primera página WEB Hola a todos, como han deducido por el titulo esta es la primera pagina web que hago, espero que les guste. Seguiré mejorando.

16 Uso de etiquetas HTML Dibujo de líneas horizontales Escritura de contenido sin tener en cuenta espacios en blanco Escritura de párrafos Comentarios

17 Presentación de texto en HTML Alineamiento align "center", "left" y "right" Espaciado Tipo de letra,,,,,,,,,,,,,,, Tamaño de letra Color de letra

18 Presentación de texto en HTML Escritura de caracteres del alfabeto español á, é, í, ó, ú, ñ Á, É, Í, Ó, Ú, Ñ Escritura de caracteres especiales, &, " &# nnn ;

19 Presentación de texto en HTML Listas – Numerada u ordenada – No ordenada – Listas de glosario o de definición – Menús – Listas de directorio Tablas,,,

20 LISTAS DESORDENADAS Browsers Netscape. Explorer. Mosaic.

21 http://colposfesz.galeon.com/html/LECCION6. HTM Para hacer una lista ordenada solo cambia por Por ejemplo: Browsers Netscape. Explorer. Mosaic.

22 Otra lista útil es la de definición, ésta se indica por medio de las etiquetas: como se muestra en el siguiente ejemplo: Browsers Programas para navegar el Internet, entre los mejores Netscape Comunicator, Microsoft Internet Explorer y NCSA Mosaic.

23 Imágenes: La etiqueta img es usada para insertar una imagen en un documento HTML La imagen tiene que estar en un archivo separado Ejemplos de tipo de archivo: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF,

24 ENLACES http://colposfesz.galeon.com/html/LECCION Bueno, tal vez te has dado cuenta que en los colores de los enlaces cambian de página a página, esto es al gusto de los diseñadores, la respuesta de este misterio esta en los atributos LINK, VLINK y ALINK de la etiqueta body. 5.HTM http://colposfesz.galeon.com/html/LECCION

25 El atributo src le dice al navegador dónde está laimagen. Los atributos ancho (width) y la altura (height)son necesarios. El atributo alt es la descripción alternativa. Esusada para gente que no puede o ha elegido nover imágenes. Es requerido. Como la etiqueta br, img no tiene etiqueta paracerrar, así que se cierra a sí misma terminandocon “/>”

26 LISTAS: las hay de 3 tipos: ordenadas (ol), desordenadas(ul), de definiciones (li) Mi primera página web Mi primera página web ¿Qué es esto? Una página simple creada usando HTML ¿Para qué es esto? Para aprender Presumir Porque me he enamorado de mi computadora y quiero darle amorHTML.

27 Para aprender HTML Para presumir A mi maestra A mis amigos A mi gato Al pequeño pato hablador en mi cerebro Porque me he enamorado de mi computadora y quiero darle amorHTML.

28 Enlaces hipertexto en HTML Página en otro directorio: dir/subdir/arch Uso de anclas: Comienzo Referencia externa: Texto sensible

29 Apariencia de una página Color de fondo Imágenes de fondo Imágenes y texto Texto … Imagen de enlace

30 Mi primera página web Mi primera página web ¿Qué es esto? Una página simple creada usando HTML ¿Para qué es esto? Para aprender HTML Enlace recomendado Rock &Tech

31 http:// colposfesz.galeon.com/html/LECCION3.HTM algo bonito CORREO ELECTRONICO VINCULO CORREO ELECTRONICO