PV-Jujuy-Clase#01-Introducción A HTML

INTRODUCCIN A HTML
Programacin Visual
Extensin ulica San Salvador de Jujuy
UNJu Facultad de Ingeniera Ing. Jos Zapana
OBJETIVOS
Proveer los conceptos fundamentales permitan disear pginas HTML estticas. Conocer los la estructura de los documentos HTML Conocer la sintaxis de los Tags elementales de HTML
2
UNJu Facultad de Ingeniera Programacin Visual San Salvador de Jujuy Ing. Jos Zapana
12/08/2013
TEMAS
HTML Historia HTML CSS Elementos
Tipos Atributos Estructura Contenedores Tablas Hipervnculos Imgenes
3
12/08/2013
HTML
HTML (Hypertext Markup Language) HTML = Hypertext + MarkUp Hypertext
Es texto ordinario al que se le incorporan funcionalidades adicionales como: Formato, Imgenes, Multimedia Y enlaces a otros documento. MarkUp Es el proceso de tomar el texto ordinario e incorporarle smbolos adicionales. Cada uno de estos smbolos identifica a un comando que le
4
indica al navegador como mostrar ese texto.

12/08/2013
UN POCO DE HISTORIA
- En 1986 la organizacin internacional de Estndares publica el SGML (Standard Generalized Markup Language) - En 1990 Tim Berners-Lee crea la WWW y el HTML con base en un subconjunto del SGML. - En 1993 se crea el HTML 2.0 (o HTML+) - En 1995 el W3C (World Wide Web Consortium) define el HTML 3.0 - El HTML 3.2 abandona las sugerencias del HTML 3.0 y adopta elementos desarrollados por Netscape. (Incorpora Tablas, Applets, Texto alrededor de imgenes) - En 1997 se define el estndar HTML 4.0 - En 1999 aparece el estndar actual HTML 4.01 - Ms informacin en: http://www.w3.org/
12/08/2013
HTML CSS - JAVA SCRIPT
Pgina Web Estructura Contenido Apariencia

Prrafos Encabezados Listas Textos Imgenes Enlaces Colores Tipografas Alineacin Fondos Tamaos Etc. Efectos Validaciones Automatizacin Tablas Capas Etc.
HTML
CSS Javascript
6
12/08/2013
Comportamiento
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. Es donde se incluyen los contenidos visibles del documento.
Ejemplo <html> <head> Aqu se incluyen los distintos elementos del encabezado </head> <body> Aqu se incluyen los distintos elementos contenedores o scripts </body> </html>
12/08/2013
TIPOS DE ELEMENTOS
Algunos tipos de Elementos
Estructurales Describen el propsito del texto y no denotan ningn formato especfico. Ejemplo: <h1>Curso HTML</h1> De Presentacion Describen la apariencia del texto, independientemente de su funcin. Por ejemplo: <b>Curso HTML</b> Los elementos de presentacin se encuentran obsoletos desde la aparicin del CSS. De HiperTexto Relaciona una parte del documento a otros documentos. Por ejemplo: <a href=http://www.unju.edu.ar>Universidad Nacional de Jujuy</a>
8
12/08/2013
ELEMENTOS DEL HEAD

Alguno de los elementos factibles de incluir en el HEAD son:
<TITLE> </TITLE> Define el ttulo del documento HTML <SCRIPT> </SCRIPT> Se utiliza para incluir programas al documento. En general se tratan de Javascripts. <STYLE> </STYLE> Especifica un estilo CSS para ser utilizado en el documento. <META> </META> Permite especificar informacin de inters como: autor, fecha de publicacin, descripcin, palabras claves, etc.
9
12/08/2013
CONTENEDORES (BLOCK-LEVEL ELEMENTS)
Parrafos
Es el contenedor mas comn. Su sintaxis es: <P> </P>
Encabezados
Indican una jerarqua de secciones dentro del documento Su sintxis: <h1></h1>, <h2></h2>, <h3></h3>,.. <h6></h6>,
Listas
- Listas de Definiciones (consistente de pares de trminos y definiciones) <dl></dl> Crea la lista <dt></dt> Crea un nuevo trmino <dd></dd> Crea una nueva definicin - 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
- Capas
Permiten agrupar y diagramar contenidos en los documentos. Su sintaxis es: <DIV> </DIV> 10
12/08/2013
HTML - TABLAS
- Son un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, as como toda estructura en documentos HTML, son definidas usando tags. - Una tabla simple puede ser insertada en un documento HTML usando los tags TABLE, TD, TR.
11
12/08/2013
HTML TABLAS: EJEMPLOS
12
12/08/2013
HTML TABLAS: EJEMPLOS
13
12/08/2013
HTML - HIPERVNCULOS
Los vnculos de hipertexto o hipervnculos (anclajes) son elementos de una pgina HTML que, permiten a los lectores navegar hacia una nueva direccin. Se usan para dirigirse:
A otro punto en el mismo documento A un archivo HTML en una ubicacin diferente del equipo que aloja la pgina A otro equipo
El principal atributo de los anclajes es href. Se escribe as: <a href="Direccin o URL"> .. </a> Ejemplo:
<a href="http://www.unju.edu.ar">Unju</a>
14
12/08/2013
HTML HIPERVNCULOS: EJEMPLOS

Vnculos locales Un vnculo puede apuntar a una pgina ubicada en el mismo equipo, reemplazando la direccin URL con el archivo de destino. Ejemplo: <a href="file:///drive:/directory/index.html"> ... </a> Tambin es posible crear un enlace a un punto dentro de una pgina. Los vnculos internos se definen con el atributo NAME o ID. La sintaxis siguiente debe usarse cuando desee que el destino sea: <a name="vnculo_interno"> ... </a> Este es el vnculo a esa ubicacin: <a href="#vnculo_interno"> ... </a>
15
12/08/2013
HTML - IMG
Inserta un archivo de imagen apuntado por el atributo "src", donde es definido Ejemplos:
<img src="image1.jpg"> <img src="image.jpg" width="200" height="150"> <img src="image.jpg" alt=foto de Jujuy" title=jujuy"> <img src="image.jpg" vspace="5" hspace="10"> <img src="image.jpg"align="left"> <img src="image.jpg" border="1">
16
12/08/2013
Preguntas?
17
12/08/2013

PV-Jujuy-Clase#01-Introducción A HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

PV-Jujuy-Clase#01-Introducción A HTML

Cargado por

Copyright:

Formatos disponibles

INTRODUCCIN A HTML

indica al navegador como mostrar ese texto.

HTML CSS - JAVA SCRIPT

Pgina Web Estructura Contenido Apariencia

ESTRUCTURA DE UN DOCUMENTO HTML

ELEMENTOS DEL HEAD

CONTENEDORES (BLOCK-LEVEL ELEMENTS)

HTML TABLAS: EJEMPLOS

HTML TABLAS: EJEMPLOS

HTML HIPERVNCULOS: EJEMPLOS

También podría gustarte