Realizado por: Ing. Mauricio Rivera1 HTML. Realizado por: Ing. Mauricio Rivera2 Que es Internet? Se crea en 1957 en el departamento de defensa de USA,

Presentación del tema: "Realizado por: Ing. Mauricio Rivera1 HTML. Realizado por: Ing. Mauricio Rivera2 Que es Internet? Se crea en 1957 en el departamento de defensa de USA,"— Transcripción de la presentación:

1 Realizado por: Ing. Mauricio Rivera1 HTML

2 Realizado por: Ing. Mauricio Rivera2 Que es Internet? Se crea en 1957 en el departamento de defensa de USA, para protegerse de los ataques rusos. Conectando 4 equipos geográficamente distantes con su principal objetivo conseguir una red capaz de recibir daños parciales. Desarrollaron pruebas de protocolos servidor a servidor

3 Realizado por: Ing. Mauricio Rivera3 Qué es Internet? Protocolos de internet mas comunes: TCP/IP (Transfer Control Protocol) HTTP (Hypertex transfer Protocol) FTP (File transfer Protocol) SMTP (Simple mail transfer Protocol) POP (Post office Protocol)

4 Realizado por: Ing. Mauricio Rivera4 Que es HTML? El HTML ó lenguaje de enlaces hipertexto es un sistema que se encarga de definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.

5 Realizado por: Ing. Mauricio Rivera5 HTML Para empezar lo primero que debemos conocer son los llamados Tags que son etiquetas que limitan una sección de elementos que serán afectadas. Su formato es de la siguiente manera: Inicio de etiqueta Cierre de la etiqueta No importa si los nombres están en mayúscula o minúscula. Pero es recomendable que se use minúscula o mayúscula.

6 Realizado por: Ing. Mauricio Rivera6 HTML Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas y : [Todo el documento] Las etiquetas tienen atributos las cuales nos dan personalidad a estas etiquetas. Ejemplo: hola mundo

7 Realizado por: Ing. Mauricio Rivera7 Comentarios Para dejar notas o comentarios utilizamos los siguientes caracteres para realizarlo: <!-- Iniciamos -- > Final Ejemplo:

8 Realizado por: Ing. Mauricio Rivera8 Estructura de Comienzo HTML La estructura se compone de los siguientes tags: y Principio y Final del Documento y El encabezamiento y Cuerpo o parte donde se trabaja Ejemplo: Primer Página Esta es mi primera página

9 Realizado por: Ing. Mauricio Rivera9 Cuerpo del HTML Entre los atributos del tenemos: Background = define un gráfico de fondo BgColor = define el color de fondo de una página Text = define el color de texto de una página Link = define el color de un enlace no visitado Vlink = define el color de un enlace ya visitado Alink = cambia el color mientras lo estamos pulsando para visitarlo. Ejemplo :

10 Realizado por: Ing. Mauricio Rivera10 Formatos al Texto Texto sin ninguna característica pero en párrafo Diferente, dejando una línea en blanco: Separar párrafos sin dejar espacios en blanco con: Para utilizar letra negrita: Para utilizar letra cursiva: Letra Subrayada: Letra Tachada:

11 Realizado por: Ing. Mauricio Rivera11 Formatos al Texto Letra de máquina de escribir: Para índice: Para subíndices: Font para la fuente de la letra. EJEMPLO

12 Realizado por: Ing. Mauricio Rivera12 Encabezados Entre los encabezados tenemos 6 tamaños el mas pequeño es 6 y el mas grande 1 de la siguiente manera:. Tiene sus atributos como los otros: center, left, right y justify. Ejemplo : Primer Línea También esta el que es para mostrar una división, se puede modificar su tamaño. Espacio en blanco entre palabras = &nbsp&;

13 Realizado por: Ing. Mauricio Rivera13 Listas También existen los conceptos de listas, que tienen tres tipos: Listas no ordenadas, Listas ordenadas y Listas de definición.

14 Realizado por: Ing. Mauricio Rivera14 Listas no Ordenadas Listas no ordenadas (no numeradas), sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Etiquetas item Ejemplo: Una cosa Mamíferos Otra cosa Peces Otra más Mamíferos Etc. Peces Sardina Bacalao Aves

15 Realizado por: Ing. Mauricio Rivera15 Listas Ordenadas Listas Ordenadas (numéricas), sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada cosa. Etiqueta item Ejemplo: Primera cosa Segunda cosa Tercera cosa Etc.

16 Realizado por: Ing. Mauricio Rivera16 Formas de las viñetas Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluído dentro de la etiqueta de apertura, si queremos que el estilo sea válido para toda la lista o dentro de la etiqueta si queremos hacerlo específico de un solo elemento. La sintáxis es del siguiente tipo: Donde tipo de viñeta puede ser una de las siguientes características: circle disc square

17 Realizado por: Ing. Mauricio Rivera17 Ejemplos Ordenamos por números Elemento 1 Elemento 2 Ordenamos por letras Elemento a Elemento b Ordenamos por números romanos empezando por el 10 Elemento x Elemento xi

18 Realizado por: Ing. Mauricio Rivera18 Listas de Definición Listas de Definición, como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Etiquetas: Ejemplo: Una cosa a definir La definición de esta cosa Otra cosa a definir La definición de esta otra cosa

19 Realizado por: Ing. Mauricio Rivera19 HTML Caracteres Especiales Hay que tomar en cuenta que algunas configuraciones de browser no entenderán todos los caracteres disponibles, así que hay maneras de realizar los acentos y otros como se explica a continuación. La forma de realizar esto es la siguiente: Para las vocales acentuadas se forman comenzando con &, seguido de la vocal en cuestión seguido de la palabra acute y después ; á para la á é para la é ¿ para ¿ ñ para la ñ ü para la ü

20 Realizado por: Ing. Mauricio Rivera20 HTML Si usted desea cambiar el tamaño de toda la página en el tamaño para comenzar se puede utilizar la siguiente etiqueta: Ejemplo: También puede forzar el texto obteniendo un determinado tipo de fuente: Este texto con la fuente Verdana

21 Realizado por: Ing. Mauricio Rivera21 Ejercicio 1