You are on page 1of 17

INTRODUCCIÓN A HTML

Programación Visual
Extensión Áulica San Salvador de Jujuy
UNJu – Facultad de Ingeniería Ing. José Zapana

Conocer los la estructura de los documentos HTML Conocer la sintaxis de los Tag’s elementales de HTML 2 UNJu – Facultad de Ingeniería – Programación Visual– San Salvador de Jujuy Ing.OBJETIVOS Proveer los conceptos fundamentales permitan diseñar páginas HTML estáticas. José Zapana 12/08/2013 .

José Zapana 12/08/2013 .TEMAS HTML Historia HTML – CSS Elementos Tipos Atributos Estructura Contenedores Tablas Hipervínculos Imágenes 3 UNJu – Facultad de Ingeniería – Programación Visual– San Salvador de Jujuy Ing.

Imágenes. MarkUp Es el proceso de tomar el texto ordinario e incorporarle símbolos adicionales. Cada uno de estos símbolos identifica a un comando que le 4 indica al navegador como mostrar ese texto. José Zapana 12/08/2013 . Multimedia Y enlaces a otros documento.HTML HTML (Hypertext Markup Language) HTML = Hypertext + MarkUp Hypertext Es texto ordinario al que se le incorporan funcionalidades adicionales como: Formato. UNJu – Facultad de Ingeniería – Programación Visual– San Salvador de Jujuy Ing.

En 1986 la organización internacional de Estándares publica el SGML (Standard Generalized Markup Language) .2 abandona las sugerencias del HTML 3.En 1993 se crea el HTML 2.En 1999 aparece el estándar actual HTML 4.w3.Más información en: http://www.0 . . (Incorpora Tablas.org/ UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing. Applets. José Zapana 5 12/08/2013 .En 1997 se define el estándar HTML 4.En 1995 el W3C (World Wide Web Consortium) define el HTML 3.0 (o HTML+) . Texto alrededor de imágenes) .0 y adopta elementos desarrollados por Netscape.UN POCO DE HISTORIA .El HTML 3.01 .0 .En 1990 Tim Berners-Lee crea la WWW y el HTML con base en un subconjunto del SGML.

• Efectos • Validaciones • Automatización •Tablas • Capas • Etc.JAVA SCRIPT Página Web Estructura Contenido Apariencia • Párrafos • Encabezados • Listas • Textos • Imágenes • Enlaces • Colores • Tipografías • Alineación • Fondos • Tamaños • Etc. José Zapana .HTML – CSS . HTML CSS Javascript 6 12/08/2013 Comportamiento UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing.

Es donde se incluyen los contenidos visibles del documento. José Zapana 12/08/2013 .ESTRUCTURA DE UN DOCUMENTO HTML • <HTML>… </HTML> Delimita el Documento HTML <HEAD> … </HEAD> Delimita el encabezado del Documento HTML En general incluye los metadatos del documentos y Scripts. • • <BODY> … </BODY> Delimita el Cuerpo del Documento HTML. • Ejemplo <html> <head> Aquí se incluyen los distintos elementos del encabezado </head> <body> Aquí se incluyen los distintos elementos contenedores o scripts </body> </html> 7 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing.

edu.TIPOS DE ELEMENTOS Algunos tipos de Elementos Estructurales Describen el propósito del texto y no denotan ningún formato específico. Por ejemplo: <a href=“http://www. Ejemplo: <h1>Curso HTML</h1> De Presentacion Describen la apariencia del texto. José Zapana 12/08/2013 .ar”>Universidad Nacional de Jujuy</a> 8 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing. De HiperTexto Relaciona una parte del documento a otros documentos.unju. Por ejemplo: <b>Curso HTML</b> Los elementos de presentación se encuentran obsoletos desde la aparición del CSS. independientemente de su función.

etc. José Zapana 12/08/2013 . 9 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing.ELEMENTOS DEL HEAD Alguno de los elementos factibles de incluir en el HEAD son: <TITLE> … </TITLE> Define el título del documento HTML <SCRIPT> … </SCRIPT> Se utiliza para incluir programas al documento. palabras claves. En general se tratan de Javascripts. fecha de publicación. descripción. <META> … </META> Permite especificar información de interés como: autor. <STYLE> … </STYLE> Especifica un estilo CSS para ser utilizado en el documento.

Su sintaxis es: <DIV> … </DIV> 10 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing. Su sintaxis es: <P> … </P> • Encabezados Indican una jerarquía de secciones dentro del documento Su sintáxis: <h1>…</h1>.Lista Ordenada Enumerada <ol> … </ol> Crea una nueva lista <li> … </li> Crea un nuevo ítem en la lista .Lista Ordenada No Enumerada <ul> … </ul> Crea una nueva lista <li> … </li> Crea un nuevo ítem en la lista • .. <h6>…</h6>. <h2>…</h2>. • Listas . José Zapana 12/08/2013 .Listas de Definiciones (consistente de pares de términos y definiciones) <dl>…</dl> Crea la lista <dt>…</dt> Crea un nuevo término <dd>…</dd> Crea una nueva definición . <h3>…</h3>.CONTENEDORES (BLOCK-LEVEL ELEMENTS) • Parrafos Es el contenedor mas común.Capas Permiten agrupar y diagramar contenidos en los documentos..

TD. son definidas usando tags. TR.Son un grupo de filas donde cada una de ellas contiene un grupo de celdas.Una tabla simple puede ser insertada en un documento HTML usando los tags TABLE. así como toda estructura en documentos HTML.HTML . José Zapana 12/08/2013 . Las tablas. 11 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing. .TABLAS .

HTML – TABLAS: EJEMPLOS 12 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing. José Zapana 12/08/2013 .

José Zapana 12/08/2013 .HTML – TABLAS: EJEMPLOS 13 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing.

HTML .unju.HIPERVÍNCULOS Los vínculos de hipertexto o hipervínculos (anclajes) son elementos de una página HTML que. </a> Ejemplo: <a href="http://www.edu. Se escribe así: <a href="Dirección o URL"> .ar">Unju</a> 14 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing. Se usan para dirigirse: A otro punto en el mismo documento A un archivo HTML en una ubicación diferente del equipo que aloja la página A otro equipo El principal atributo de los anclajes es href. José Zapana 12/08/2013 . permiten a los lectores navegar hacia una nueva dirección..

</a> Este es el vínculo a esa ubicación: <a href="#vínculo_interno"> . </a> También es posible crear un enlace a un punto dentro de una página... La sintaxis siguiente debe usarse cuando desee que el destino sea: <a name="vínculo_interno"> .. </a> 15 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing...HTML – HIPERVÍNCULOS: EJEMPLOS Vínculos locales Un vínculo puede apuntar a una página ubicada en el mismo equipo. reemplazando la dirección URL con el archivo de destino. José Zapana 12/08/2013 . Los vínculos internos se definen con el atributo NAME o ID..html"> . Ejemplo: <a href="file:///drive:/directory/index.

IMG Inserta un archivo de imagen apuntado por el atributo "src".HTML .jpg" vspace="5" hspace="10"> <img src="image.jpg"> <img src="image.jpg" width="200" height="150"> <img src="image. donde es definido Ejemplos: <img src="image1.jpg" border="1"> 16 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing.jpg" alt=“foto de Jujuy" title=“jujuy"> <img src="image.jpg"align="left"> <img src="image. José Zapana 12/08/2013 .

José Zapana 12/08/2013 .¿Preguntas? 17 UNJu – Facultad de Ingeniería – Programación Visual – San Salvador de Jujuy Ing.