Semana 1

INTRODUCCIN AL CURSO
Semana 1
Objetivos:
Uso de editores: El HyperText Markup Language (HTML). Formato de un documento HTML con etiquetas a Nivel de Bloque. Formato de un documento HTML con etiquetas a Nivel de Texto. Etiqueta Hipervinculo : HREF, TITLE, TARGET, NAME Hipervinculos a imgenes. Hipervinculos con anclas: <A name="">, <A haref="#"> Hipervinculos a correo electrnico.
Instituto San Ignacio
Computacin e Informtica
Diapositiva 2
Uso de editores: El HyperText Markup Language Extended (HTML)

EL HTML es un lenguaje de marcas de texto utilizado normalmente en la WWW (World Wide Web). Hace uso de hiperenlaces que conectan dos elementos y etiquetas o marcas que indican como debe verse el texto. Editores: Para crear una pgina web se pueden utilizar varios programas especializados en esto, como por ejemplo programas de pago como Microsoft Front Page o el Adobe Dreamweaver, tambin se puede hacer uso del Bloc de Notas de Windows.
Diapositiva 3
FORMATO DE UN DOCUMENTO HTML CON ETIQUETAS A NIVEL DE BLOQUE

En la escritura de los documentos HTML se hace uso de etiquetas (marcas) como principal elemento de sintaxis, que para diferenciarse del contenido estn encerradas por parntesis angulares (< >).
Las pginas HTML se dividen en dos partes: La cabecera (<head> y </head>): muestra informacin sobre la propia pgina, cmo su ttulo e idioma. El cuerpo (<body> y </body>): Incluye todo el contenido , como prrafos de texto e imgenes.
Diapositiva 4
Etiquetas principales de un documento

<html>: Indica el comienzo y el final de un documento HTML. Todo lo que se coloque fuera de esta etiqueta se ignora. <head>: delimita la parte de la cabecera del documento. La cabecera contiene informacin sobre el propio documento. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepcin de la etiqueta <title>, que se utiliza para indicar el ttulo del documento. <body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (prrafos de texto, imgenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML.
Instituto San Ignacio Computacin e Informtica Diapositiva 5
A continuacin se muestra el cdigo de una pgina web muy sencilla:

<html> <head> <title>El primer documento HTML</title> </head> <body> <p>El lenguaje HTML es <strong>tan sencillo</strong> que prcticamente se entiende sin estudiar el significado de sus etiquetas principales.</p> </body> </html>
Diapositiva 6
Formato de un documento HTML con etiquetas a nivel de Bloque

Los elementos de bloque nos dan la estructura principal de los documentos. Los elementos en bloque ms importantes son: Etiqueta de ttulo o encabezado: <h1></h1> <h6></h6>. Etiqueta prrafo: <p></p> Etiqueta Salto de lnea: <br/> Etiqueta Regla horizontal: <hr /> Listas itemizadas: <ul> </ul> Listas enumeradas: <ol> </ol> Listas de definiciones: <dl> </dl>
Diapositiva 7
Etiqueta de ttulo o encabezado

Son encabezados y hay seis niveles de encabezados en HTML, siendo <h1> el ms importante y <h6> el menos importante.
<html> <head> <title>Ejemplo</title>
</head> <body>
<h1> Encabezado 1</h1> <h2> Encabezado 2</h2> <h3> Encabezado 3</h3> <h4> Encabezado 4</h4> <h5> Encabezado 5</h5> <h6> Encabezado 6</h6> </body> </html>
Etiqueta prrafo
Sirve para representar prrafos <p> y </p>
</head> <body>
<p> El hipertexto es la escritura multimedia, que integra texto con imgenes, videos, animaciones y sonidos. </p> <p> Adems posibilita el desplazmiento hacia otros documentos a travs de hiperenlaces </p> </body> </html>
Diapositiva 9
Etiqueta Salto de lnea

Sirve para representar saltos de lnea <br />
</head> <body>
Este texto contiene <br /> un salto de lnea. </body> </html>
Diapositiva 10
Etiqueta Regla horizontal

Sirve para representar una lnea separadora horizontal. Tiene seis tamaos diferentes: <hr size=1>, <hr size=2>, <hr size=3>, etc.
<html> <head> <title>Ejemplo</title> </head> <body> Etiqueta Regla horizontal <hr /> Sirve para representar una lnea separadora horizontal. Tiene seis tamaos diferentes. </body> </html>
Diapositiva 11
Listas itemizadas
Son listas sin un orden especifico <ul> </ul>.
<html> <head> <title>Ejemplo</title> </head> <body>
<ul> <li> Primer elemento </li> <li> Segundo elemento </li> <li> Tercer elemento </li> </ul>
</body> </html>
Listas enumeradas
Son listas ordenadas <ol> </ol>.
<html> <head> <title>Ejemplo</title> </head> <body>
<ol> <li> Primer elemento </li> <li> Segundo elemento </li> <li> Tercer elemento </li> </ol>
</body> </html>
Listas de definiciones
Son listas que representan textos con sus respectivas definiciones <dl> </dl>.
<html> <head> <title>Ejemplo</title> </head> <body> <dl> <dt> Titulo 1 </dt> <dd> Este texto corresponde al titulo de arriba</dd> <dt> Titulo 2 </dt> <dd> Este texto corresponde al titulo de arriba</dd> </dl>
</body> </html>
Formato de un documento HTML con etiquetas a nivel de Texto

Los elementos en lnea o de nivel de texto son elementos internos subordinados para los elementos de bloque. Los elementos en lnea ms importantes son: Etiqueta de Strong: <strong> </strong> Etiqueta cursiva: <i> </i> Etiqueta subrayado: <u> </u> Etiqueta de fuente: <font></font>
Diapositiva 15
Etiqueta Strong
Sirve para dar nfasis mayor. El navegador representar el texto con negrita, si no se indica lo contrario <strong> </strong>.
<html> <head> <title>Ejemplo</title> </head> <body> <strong> Texto con nfasis </strong> El navegador representa el texto con negrita porque no se indica lo contrario. </body> </html>
Diapositiva 16
Etiqueta Cursiva
Asigna el formato de cursiva itlica al texto <i> </i>.
<html> <head> <title>Ejemplo</title> </head> <body> Texto noral. <i> Texto italico </i>. </body> </html>
Diapositiva 17
Etiqueta Subrayado
Asigna el formato de subrayado al texto <u> </u>.
<html> <head> <title>Ejemplo</title> </head> <body> Texto noral. <u> Texto subrayado</u>. </body> </html>
Diapositiva 18
Etiqueta de Fuente
Modifica el formato de fuente del texto <font> </font>, como son el tamao (size) , el color (color), el tipo de texto (face).
<html> <head> <title>Ejemplo</title> </head> <body> <font size= "3" color= "red"> Texto rojo </font> <font size= "1" color= "blue"> Texto azul </font> <font face="arial" color="green"> Texto Verde </font> </body> </html>
Diapositiva 19
Etiqueta de hipervnculo
Los enlaces son los que hacen posible la navegacin por la Web, es decir que se valla saltando por diferentes pginas de un mismo sitio, o de sitios externos. La etiqueta de hipervnculo es <a></a> y tiene los siguientes atributos:
Href: Indica la direccin de destino del hipervnculo, acepta los valores: _blank (nueva pgina), _parent, _self (la misma pgina) y _top. Title: Texto emergente cuando se posa el puntero del mouse sobre el texto de hipervnculo. Target: Indica la ventana de destino. Id y Name: Indica el nombre del ancla dentro de un documento
Enlace a una direccin web externa:
Este tipo de enlace es conocido tambin como enlace absoluto.

<a href=http://www.google.com> Google </a>
Enlace a un correo electrnico:
<a href=mailto:NombreCorreo@hotmail.com> Mi Correo</a>
Nota: Recuerde agregar la palabra mailto antes de escribir el nombre del correo electrnico al que se va ha enlazar. Cuando se haga clic en el hipervnculo Mi Correo el navegador abrir el cliente de correo por defecto.
Diapositiva 21
Enlaces relativos:
Para enlaces entre pginas del mismo sitio y que tengan el mismo dominio, se realizan enlaces relativos. Por ejemplo si esta en la pgina www.misitio/inicio.html y quiere enlazar a la pgina www.misitio/subdirectorio/contenido.html se podra crear un enlace de la siguiente manera:
<a href=subdirectorio/contenido.html> Ir a contenido </a>
Nota: Si hace este tipo de enlace escribiendo la direccin web completa de la pgina contenido.html, tambin funcionar. Algunos buscadores recomiendan utilizar enlaces absolutos siempre que sea posible, para mejorar la indexacin por parte de sus motores.
Diapositiva 22
Enlaces y el atributo title:
El atributo title sirve para especficar una pequea descripcin del sitio que se est enlazando:
Los navegadores suelen desplegar un cartelito con el valor de este atributo cuando el usuario seala con el mouse el enlace. Esto es de gran ayuda a los usuarios, que decidirn si seguir el enlace o no.
<a href=subdirectorio/colegios.html title=Lista de Colegios privados de la zona sur> Ir a Colegios Privados</a>
Diapositiva 23
Enlaces hacia anclas en la misma pgina:
Las anclas son enlaces que permiten navegar en la misma pgina. El ancla se realiza asignando un valor al atributo id de la etiqueta a:
<a id=privados> Colegios Privados</a>

Nota: En lugar de utilizar el atributo id podra utilizar de la misma forma el atributo name, la diferencia radica en que los navegadores antiguos no reconocen el atributo id.
Para realizar un enlace hacia el ancla privados creado arriba, en otro lugar de la pgina se colocara el siguiente cdigo:
<a href=#privados> Ir a Colegios Privados</a>
Diapositiva 24
Enlaces hacia imagenes:
Es posible realizar un enlace hacia una imagen o cualquier otro archivo mediante un enlace relativo o absoluto:
<a id=subdirectorio/imagen.jpg href=_blank> Ver imagen </a> Otra forma de vncular a la imagen sera: <a href=http://www.misitio/subdirectorio/imagen.jpg> Ver imagen </a> Para realizar un vnculo a un archivo zip: <a href=subdirectorio/texto.zip> Descargar texto </a>

Semana 1

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Semana 1

Hochgeladen von

Copyright:

Verfügbare Formate

INTRODUCCIN AL CURSO

Instituto San Ignacio

Uso de editores: El HyperText Markup Language Extended (HTML)

Instituto San Ignacio

FORMATO DE UN DOCUMENTO HTML CON ETIQUETAS A NIVEL DE BLOQUE

Instituto San Ignacio

Etiquetas principales de un documento

A continuacin se muestra el cdigo de una pgina web muy sencilla:

Instituto San Ignacio

Formato de un documento HTML con etiquetas a nivel de Bloque

Instituto San Ignacio

Etiqueta de ttulo o encabezado

Instituto San Ignacio

Etiqueta Salto de lnea

Instituto San Ignacio

Etiqueta Regla horizontal

Instituto San Ignacio

<html> <head> <title>Ejemplo</title> </head> <body>

<html> <head> <title>Ejemplo</title> </head> <body>

Formato de un documento HTML con etiquetas a nivel de Texto

Instituto San Ignacio

Instituto San Ignacio

Instituto San Ignacio

Instituto San Ignacio

Instituto San Ignacio

Enlace a una direccin web externa:

Este tipo de enlace es conocido tambin como enlace absoluto.

Enlace a un correo electrnico:

<a href=mailto:NombreCorreo@hotmail.com> Mi Correo</a>

Instituto San Ignacio

<a href=subdirectorio/contenido.html> Ir a contenido </a>

Instituto San Ignacio

Enlaces y el atributo title:

<a href=subdirectorio/colegios.html title=Lista de Colegios privados de la zona sur> Ir a Colegios Privados</a>

Instituto San Ignacio

Enlaces hacia anclas en la misma pgina:

<a id=privados> Colegios Privados</a>

<a href=#privados> Ir a Colegios Privados</a>

Instituto San Ignacio

Enlaces hacia imagenes:

Das könnte Ihnen auch gefallen