Vous êtes sur la page 1sur 20

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I

CURSO DE HTML
1. INTRODUCCIN El HTML no es ms que una aplicacin del SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El trmino HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas. A medida que nos afianzamos en el manejo de Internet cada uno de nosotros pasa por tres etapas diferentes: Al principio solamente conocemos unas pocas pginas, luego nos damos cuenta que existen buscadores lo cual lo hace ms interesante y por ltimo nos damos cuenta que en Internet no solamente se puede ver la informacin sino que tambin se puede publicar. y qu otra manera ms fcil y ms sencilla? Si Internet tiene acceso a todos los rincones del mundo. Para que varias personas se comuniquen es necesarios que stas hablen un mismo idioma. El lenguaje que utilizan las computadoras que estn conectadas a Internet es HTML. A travs de esta monografa explicaremos que es HTML, sus orgenes y el proceso de creacin de una pgina web. 2. QUE ES EL HTML El HTML, Hyper Text Markup Language (Lenguaje de marcacin de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web). Fue creado en 1986 por el fsico nuclear Tim Berners-Lee; el cual tomo dos herramientas preexistentes: El concepto de Hipertexto (Conocido tambin como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estndar de Marcacin General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programacin como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningn compilador, por lo tanto algn error de sintaxis que se presente ste no lo detectar y se visualizara en la forma como ste lo entienda. El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensin .htm o .html Estos documentos pueden ser mostrados por los visores o "browsers" de pginas Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer. Tambin existe el HTML Dinmico (DHTML), que es una mejora de Microsoft de la versin 4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que vuela desde la pgina palabra por palabra o efectos de transicin al estilo de anuncio publicitario giratorio entre pgina y pgina. A continuacin vamos a hablar un poco de historia: 3. ORGENES DEL HTML 1986. Publicacin de la ISO 8879 que presenta el Standard General Markup Language, origen del HTML. 1989. Tim Berners-Lee, a la sazn en el Centro Europeo de Investigaciones Nucleares presenta su artculo Information Management: A Proposal dedicndose de lleno al desarrollo de un sistema que permitiera el

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I acceso en lnea de manera uniforme a la informacin disponible en muchos recursos distintos, y que pudiese funcionar en mquinas que conectadas por redes basadas en TCP/IP. 1990-1991. Tim Berners-Lee define el HTML como un subconjunto de SGML (Standard Generalized Markup Language), que ms tarde se llamar nivel 0; soporta encabezados, listas y anclas. Se crea el nombre World Wide Web. 1991. Tim Berners-Lee introduce el primer visor de HTML, LineMode, que trabaja en modo texto y slo en plataformas UNIX. El Centro Europeo de Investigaciones Nucleares realiza la apertura del primer sitio con acceso pblico de World Wide Web el 17 de mayo ( http://info.cern.ch). 1992. Dan Connolly produce la primera Definicin de Tipo de Documento (DTD) para el lenguaje, llamada HTML 1.0, agregando a la definicin original atributos para modificar el estilo fsico del texto. Se distribuye Viola, primer visor grfico de Web y disponible slo para X.11. 1993. Un nuevo visor que soporta un mayor nivel, Lynx, es producido por la Universidad de Kansas, si bien lee slo texto. Aparece Mosaic, desarrollado por el Centro Nacional para Aplicaciones de Supercomputadoras, es el primer visor de Web en entorno grfico que se hace disponible para computadoras personales, lo que lo hace inmediatamente popular. A fines de ao, comienzan a aparecer los primeros artculos sobre WWW en diarios y revistas de circulacin masiva. Tim Berners-Lee utiliza el trabajo del ao anterior de Connolly para presentar el borrador de la primera norma (RFC -Recommendation for Comments) de HTML para Internet. 1994. La Universidad Tcnica de Graz desarrolla un servidor y clientes con mayores prestaciones para HTML, Hyper-G, que no tiene gran xito. Cello, primer visor de HTML que no requiere TCP/IP presentado por la Escuela de Leyes de la Universidad de Cornell. Dan Connolly y Karen Olson Muldrow redefinen el HTML para el nivel 2.0, que ahora soporta formularios. Un grupo de programadores que desarrollaran el Mosaic producen un nuevo visor de World Wide Web, Netscape (tambin conocido como Mozilla), que tiene una amplia aceptacin entre los usuarios, pero que soporta elementos de programacin que equivalen a una degeneracin del HTML (tamaos de letra, fondos). Se define un equivalente para los modelos en tres dimensiones del HTML, el VRML (Virtual Reality Modeling Language), que permite moverse dentro de los ambientes definidos. En este mismo ao se realizan la Primera y Segunda conferencias internacionales de WWW, en Ginebra y Chicago, respectivamente. Se crea la W3 Organization. 1995. Dave S. Raggett (Hewlett-Packard, Inglaterra) comienza a compilar la normativa del nuevo nivel del lenguaje, el HTML 3.0, cuya principal novedad es el soporte de tablas. Microsoft produce su primer visor de Internet, el cual tambin utiliza elementos de HTML degenerados. Una nueva versin de Netscape, Navigator 2.0, agrega soporte de encuadres. Sun Microsystems produce el primer visor de World Wide Web con soporte de un lenguaje de programacin, HotJava. Se celebran la Tercera y Cuarta conferencias internacionales de WWW, en Boston y Darmstadt respectivamente, y la conferencia de WWW para Asia y el Pacfico en Wagga-Wagga. 1996. Netscape Communications y Microsoft presentan las nuevas versiones de sus visores que soportan gran parte del nivel de HTML 3.0. Aparecen visores no comerciales que implementan la norma completa de HTML 3.0. Se formaliza un nuevo nivel para la modelacin en tres dimensiones, VRML 3.0, que permite

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I interactuar con los objetos definidos. Se celebra la Quinta conferencia internacional de WWW en Rocquencourt. 1997. D. Raggett presenta, en enero, la versin normalizada del 3.2. En julio, aparece la versin 4.0, experimental. 1998. HTML 4.0. 4. CREACIN DE PGINAS WEB CON LENGUAJE HTML Para crear una pgina web se pueden utilizar varios programas especializados en esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver 3. Otra forma de disear un archivo .html, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa cumple con un requisito mnimo que es la posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje. A continuacin les mostraremos las etiquetas ms comunes que deben aprenderse para hacer una pgina Web. ESTRUCTURA DE LOS DOCUMENTOS DE HTML Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en comn. Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrar el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerrados respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo. La cabecera puede contener informacin y siempre contiene el titulo del documento encerrado por el elemento <TITLE>. En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imgenes, sonidos, hipervnculos, etc. Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden: Ejemplo: <HTML> <HEAD> <TITLE> Ttulo de mi pgina de Internet </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera pagina </CENTER> </H1> <HR> Esta es mi primera pgina, aunque todava es muy sencilla. Como el lenguaje HTML no es difcil, pronto estaremos en condiciones de hacer cosas ms interesantes. <P> Aqu va un segundo prrafo. </BODY> </HTML> Para escribir ttulos se usa la etiqueta <Hx></Hx> en donde x es un nmero.

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I EJEMPLO: <h1>Titulo principal</h1> <h2>Titulo secundario</h2> <h3>Titulo terciario</h3> <h4>Titulo cuarto nivel</h4> <h5>Titulo quinto</h5> <h6>Titulo sexto</h6> Quedara ms o menos as: Titulo principal Titulo secundario Titulo terciario Titulo cuarto nivel Titulo quinto Titulo sexto 5. ETIQUETAS DE PRRAFO Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy til debido a que si uno escribe algo (en el editor que se est utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma lnea. Para alinear un prrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de la etiqueta <P>. Se puede alinear de tres formas diferentes: <p align="left"> Prrafo... </p> Alinea a la izquierda. <p align="center"> Prrafo... </p> Realiza un centrado. <p align="right"> Prrafo... </p> Alinea a la derecha. Cuando nosotros queremos que lo que escribimos aparezca en otra lnea utilizamos el comando <BR>. Al terminar de escribir un prrafo es conveniente y esttico utilizar el comando para separar un prrafo de otro que es <HR> ETIQUETAS PARA DARLE FORMATO AL TEXTO: Para el tamao y tipo de letra se usa la etiqueta <FONT> y </FONT>, que posee tres atributos: tamao (Size), Tipo de letra o fuente (face) y color FORMATO: <B> y </B> Sirve para colocar un texto en Negrita. <U> y < /U> Sirve para subrayar un texto <STRIKE> y </STRIKE> Sirve para tachar un texto. <STRONG> y </STRONG> Cumple la misma funcin que <B> <I> y <I> Para colocar un texto en cursiva. <EM>texto con nfasis</EM> texto con nfasis <CITE>citacin</CITE> citacin <DFN>definicin</DFN> definicin <KBD>teclado</KBD> teclado <SAMP>ejemplo</SAMP> ejemplo SIZE: Regula el tamao de los caracteres.

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I Ejemplo: <font> texto... </FONT>. FACE: Es la fuente que se quiere usar, Arial, Times new Roman, etc. Ejemplo: <FONT> texto</FACE> Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los colores en HTML: 1. Mediante la especificacin de los valores RGB del color deseado en forma hexadecimal (RGB=Red/Green/Blue, valores Rojo/Verde/Azul) 2. Mediante la especificacin del nombre del color en ingles Ejemplos: <FONT COLOR="WHITE">Blanco</FONT> Blanco #FFFFFF <FONT COLOR="BLACK">Negro</FONT> Negro #000000 <FONT COLOR="RED">Rojo</FONT> Rojo #FF0000 <FONT COLOR="GREEN">Verde</FONT> Verde #00FF00 <FONT COLOR="BLUE">Azul</FONT> Azul #0000FF <FONT COLOR="YELLOW">Amarillo</FONT> Amarillo #FFFF00 <FONT COLOR="CYAN">Cyan</FONT> Cyan #00FFFF <FONT COLOR="MAGENTA">Magenta</FONT> Magenta #FF00FF Si nos decidimos a trabajar con valores hexadecimales, entonces tenemos la libertad de utilizar 16,7 millones de colores. De esta manera trabajamos independientemente de los navegadores Web. Si especificamos el nombre del color, podemos evitar la definicin del color en forma hexadecimal que es un poco ms difcil. Actualmente estn estandarizados tan slo 16 colores. Existen colores adicionales los cuales son dependientes de los navegadores Web. Primero que todo debe escribir un smbolo #. A continuacin siguen las 6 cifras para la definicin del color. Las primeras 2 cifras definen el valor rojo, las siguientes 2 el valor verde y las 2 ltimas el valor azul. Las cifras hexadecimales son:
12/10/2010 ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I 0 (corresponde al decimal 0) 1 (corresponde al decimal 1) 2 (corresponde al decimal 2) 3 (corresponde al decimal 3) 4 (corresponde al decimal 4) 5 (corresponde al decimal 5) 6 (corresponde al decimal 6) 7 (corresponde al decimal 7) 8 (corresponde al decimal 8) 9 (corresponde al decimal 9) A (corresponde al decimal 10) B (corresponde al decimal 11) C (corresponde al decimal 12) D (corresponde al decimal 13) E (corresponde al decimal 14) F (corresponde al decimal 15) (Mirar el cuadro de la pgina anterior) Para ponerle color de fondo a la pgina escribir: <body bgcolor=#808080></body> con el cual obtendremos un color de fondo gris oscuro. Colocar mal los colores de fondo en nuestras pginas puede provocar problemas. Qu ocurra con los links o enlaces si colocramos un fondo de color azul?. Puesto que los links son azules cuando todava no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se puedan distinguir en absoluto del fondo. Se puede imaginar todava un caso peor si decidiramos colocar un fondo demasiado oscuro, tan oscuro que no permitiera distinguir con claridad la informacin que se presenta en pantalla. Podemos remediar esto eligiendo nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes: * text="#nmero" Para el color del texto. * link="#nmero" Para el color de los enlaces. * vlink="#nmero" El color con que aparecern los enlaces ya visitados. * alink="#nmero" Color del enlace cuando lo pulsamos. Por lo tanto la etiqueta <body> puede quedar del siguiente modo: <body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num"> Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta: background="localizacin de la imagen" Esta etiqueta va dentro de la etiqueta <body>. Ejemplo: <body background="/documentos/html/gifs/dragonball.gif"> Con esto lograremos que la imagen dragonball.gif aparezca como fondo en nuestra pgina. ETIQUETAS META Son usadas para poner meta-informacin del documento. Esta "directiva" indica al visor de Internet las palabras clave y contenido de nuestra pgina Web. Muchos de los buscadores de pginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la pgina en sus bases de datos. Ejemplo:
12/10/2010 ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I <META NAME = "Pagina de Pablo" content = "Mi pgina personal de Sailor Moon"> Indica al visor el nombre de la pgina y sus contenidos principales. <META NAME="Author" content="Pablo Ravioli"> Indica el nombre de la persona que elabora la pagina WEB <META NAME = "keywords" content = "Informacin de Sailor Moon"> Indica al visor las palabras clave para los buscadores de Internet. PARA HACER LISTAS: Las listas se definen de forma muy sencilla: se dice dnde empieza la lista, dnde empieza cada punto y dnde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de lnea, o al menos sin texto por delante (slo espacios o tabulaciones). Las listas pueden ser: Lista desordenada, <UL> (Unordered List). Lista ordenada, <OL> (Ordered List). EJEMPLOS DE DIFERENTES TIPOS DE LISTAS: LISTA CON NMEROS ROMANOS: <ol> <li type=I>Manzana <li type=I>Zanahoria <li type=I>Lechuga <li type=I>Tomate </ol> Manzana Zanahoria Lechuga Tomate LISTA NUMERADA: <ol> <li>Manzana <li>Zanahoria <li>Lechuga <li>Tomate </ol> Manzana Zanahoria Lechuga Tomate LISTA CON PUNTOS: <ul> <li> Manzana <li> Zanahoria <li> Lechuga <li>Tomate
12/10/2010 ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I </ul> Manzana Zanahoria Lechuga Tomate LISTA CON CRCULOS: <ul> <li type=circle> Manzana <li type=circle> Zanahoria <li type=circle> Lechuga <li type=circle> Tomate </ul> Manzana Zanahoria Lechuga Tomate LISTA CON CUADRADOS: <ul> <li type=square> Manzana <li type=square> Zanahoria <li type=square> Lechuga <li type=square> Tomate </ul> Manzana Zanahoria Lechuga Tomate 6. COMO INSERTAR UNA IMAGEN A la hora de crear una pgina Web podemos introducir grficos de forma muy sencilla, slo hay que tener en cuenta que las imgenes deben tener formato Gif o JPEG. La etiqueta utilizada para agregar imgenes a una pgina Web es <IMG> y va acompaada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar. Es decir: <IMG SRC="lugar donde guardo la imagen"> Supongamos que tenemos la imagen dragonball.gif, que est presente en el mismo directorio en donde est la pgina y que la queremos insertar. La etiqueta apropiada sera: <IMG SRC="dragonball.gif">

Y el usuario ver en el browser: Para poner la imagen en la izquierda escribir: <IMG ALIGN=LEFT SRC=" dragonball.gif ">
12/10/2010 ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I A la derecha: <IMG ALIGN=RIGHT SRC=" dragonball.gif"> Y si se quiere poner la imagen en el centro: <P ALIGN=CENTER> <IMG SRC=" dragonball.gif"> </P> HIPERENLACES, HYPERLINKS, ANCLAS O LINKS Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parmetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="URL">, y despus cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aqu para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en nuestro texto HTML: <a href="http://www.nasa.gov/">Pulse aqu para visitar a la NASA</a> Que se vera de esta forma: Pulse aqu para visitar a la NASA Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir: <a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrir la imagen.gif. Tambin se puede ir a otro enlace por medio de una imagen. Lo nico que se debe hacer es cambiar el texto por una imagen: <a href="http://www.altavista.com"><img src="Logo.jpg"></a> Con esto tendremos por resultado que cuando se pase el puntero del mouse por arriba del Logo.jpg (que podra ser el logo del Altavista) y se convierta en una "manito", al hacer clic nos enve al buscador Altavista. Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera: <a href="mailto:pfravioli[arroba]fibertel.com.ar">Mandame un Email</a> Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrir (por defecto) el Microsoft Outlook Express con la direccin del destinatario ya escrita. CARACTERES ESPECIALES Existe una razn evidente que impide que podamos escribir ciertos smbolos directamente en un texto HTML, como por ejemplo el <: dichos smbolos tienen un significado en HTML, y es necesario diferenciar claramente cundo poseen ese significado y cundo queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el texto como tal tendremos que dar un rodeo escribiendo algo que no d lugar a confusin, en este caso &lt;. Los smbolos afectados por esta limitacin, y la forma de escribirlos, se detallan a continuacin: * < (Menor que): &lt; * >(Mayor que): &gt; * & (smbolo de and, o ampersand): &amp; * " (comillas dobles): &quot;

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I Es decir, que para escribir <"hola"> en poner&lt;&quot;hola&quot;&gt;. nuestro texto HTML original debemos

El otro caso especial se da cuando en un texto HTML se quiere escribir una ee, por ejemplo. Existe una forma fcil de hacerlo, que consiste en utilizar cdigos como las que antes se presentaron para escribir ciertos smbolos. Los cdigos comienzan siempre con el smbolo &, y terminan con un punto y coma (. Entre medias va un identificador del carcter que queremos que se escriba. Los cdigos necesarios en nuestro idioma son: * : &aacute; * : &eacute; * : &iacute; * : &oacute; * : &uacute; * : &Aacute; * : &Eacute; * : &Iacute; * : &Oacute; * : &Uacute; * : &uuml; * : &Uuml; * : &ntilde; * : &Ntilde; * : &#191; * : &#161; * ?: &#63; * !: &#33; * @: &#64; Por lo tanto la palabra pgina la podramos escribir como: pgina p&aacute;gina Otro ejemplo: En qu ao estamos? Sera: &#191En qu&eacute; a&ntilde;o estamos&#63; Es por ello que si deseamos que cualquier visor de pginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes cdigos para representarlas. Recuerden que las etiquetas se pueden escribir en maysculas o en minsculas, es lo mismo poner<HTML>, <html> o <HtmL>. Una vez que terminamos de escribir todo nuestro documento, lo guardamos ponindole un nombre, y necesariamente lo debemos guardar con la extensin .HTM o .HTML. Para ir visualizando lo que hemos estado haciendo tendramos que abrir nuestro browser (Netscape o Internet Explorer), hacemos clic en la opcin FILE o ARCHIVO, estando all seleccionamos OPEN o ABRIR, le damos BROWSE o EXAMINAR, seleccionamos el archivo y le damos OPEN. Luego le damos ACEPTAR, e inmediatamente se abrir nuestra pgina.

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I 7. CONCLUSIN Sin HTML no existira el Internet que hoy conocemos, si no se hubiera inventado, seguiramos con el aburrido FTP (Protocolo de Transferencia de Archivos) mandndonos o bajando archivos que a veces ni sabamos lo que eran, sin tener la posibilidad de visualizarlo antes. Ahora por medio de una pgina llena de colores y botones por la cual se puede navegar, se puede tener acceso a bastante informacin y archivos. El lenguaje de HTML abri una puerta al mundo permitindole a las personas expresar sus ideas por medio de pginas y mostrrselas a todas las personas de todos los pases. Con el HTML se logr un gran movimiento econmico ya que muchsimas empresas publican, venden, y ofrecen sus productos, sus servicios y sus ofertas atrayendo a mayor cantidad de personas. Tambin gracias al HTML nacieron muchas empresas que ofrecen diversos servicios como Yahoo, Altavista, HotMail, Terra, Yupi, Mercadolibre, De Remate, etc. Infinitas son las posibilidades que te brindan las pginas WEB ya que no solo te dan la posibilidad de pasar el tiempo navegando, sino que tambin hasta se puede comprar un auto por Internet, solo basta con llenar un formulario con los datos personales y el nmero de tarjeta de crdito y en ocho das lo tenemos en nuestra casa. Todo el universo de Internet se lo debemos al HTML, ya que todas las pginas con las que se compone la World Wide Web estn hechas con el lenguaje de programacin HTML. LECCION 1 Para confeccionar una pgina web lo nico que se necesita es un editor de texto. Existen editores especializados en crear archivos HTML Podemos utilizar Notepad, WordPad o el que queramos. Es preferible utilizar Notepad o un editor especializado para generar archivos de Html que en editor ms avanzado que puede incluir cdigos no deseados. Seguramente tienes uno de estos programas en tu computador. Si no sabes donde esta pulsa en la esquina inferior izquierda "Inicio" y "Buscar".

Escribimos el nombre del archivo que estoy buscando en este caso Notepad y pulsamos "Buscar Ahora"

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I

Y pulsamos dos veces sobre sobre el archivo de Notepad

Existen editores gratuitos en Internet. Por ejemplo en la pgina de Internet: http://www.softonic.com/ en la seccin de programacin tienes editores gratuitos para descargar. PASOS PARA CREAR LA PGINA WEB: 1. Abrir el programa editor de texto. 2. Escribir los cdigos o "tags". Escribimos los comandos como escribimos en un procesador de textos. Y guardamos el archivo que creamos como archivo de texto.A lo largo de este curso veremos los diferentes cdigos. Una vez abierto el programa editor de texto voy escribiendo los cdigos o "tags" Las instrucciones, cdigos o "tags" de html van entre dos signos < y >. Las instrucciones es indiferente si se escriben en maysculas o minsculas. Tenemos que poner un cdigo de inicio y uno de cierre. EJEMPLO: PONER TEXTO EN NEGRILLA La instruccin para que un texto se ponga en negrilla es <b>Soy magnfico</b> La instruccin de cierre tiene que llevar el signo / Por lo tanto:

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I A) Ponemos el cdigo de inicio para poner el texto en negrilla <b> B) A continuacin el texto que queremos que aparezca en negrilla y C) Al final el cdigo de cierre </b> 3. Guardar el archivo. Es recomendable que cree un directorio en el disco duro de su computador para guardar ordenadas los archivos que iremos generando. Para guardar el archivo tenemos que ponerle un nombre y como extensin htm. html o shtml. Es decir nombre, punto y htm. Por ejemplo miprimerapagina.htm Es preferible no poner acentos, "" ni simbolos extraos para evitar problemas de compatibilidad No ponerle espacios en blanco al nombre del archivo. Y guardar como documento de TEXTO. Formato de texto ASCII. Volveremos a ver esta cuestin. Una vez guardado el archivo podemos ver cmo queda utilizando el mismo programa con el que ve esta pgina. El resultado cuando veamos con el navegador el documento ser Soy magnfico Puede ver como quedara el archivo pulsando el enlace miprimerapagina. Para volver pulse Atrs en su navegador.

miprimerapagina.htm Si utiliza una versin avanzada de Internet Explorer, puede ver los cdigos de la pgina. Una vez que este en miprimerapagina pulse en la Barra superior: Pulsamos Archivo Y pulsamos Modificar con Microsoft Front Page. Esperamos unos segundos.

Y pulsamos sobre la pestaa HTML que se encuentra en la parte inferior derecha.


12/10/2010 ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I

LECCION 2 Vamos a realizar nuestra primera pgina utilizando los cdigos html que denominaremos "La Primera" y en la que aparezca escrito "soy un fenmeno" Tenemos que crear un archivo en el que podremos las instrucciones y lo guardamos como archivo con terminacin .htm A) Todas las pginas html comienzan con el cdigo de inicio <html> y terminan con el cdigo </html> As que ponemos <html> </html> B) Las pginas html se dividen en un encabezado y un cuerpo. Para el encabezamiento tenemos que poner los "tags" <head> </head Tenemos que ponerlo dentro de las instrucciones inicial y final de pgina (paso A) por lo tanto nos queda <html> <head> </head> </html> C) Igualmente insertamos las instrucciones para el cuerpo de la pgina <body> y </body> Con lo que nos queda <html> <head> </head> <body> </body> </html>

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I Podemos dejar lneas en blanco para comprender con ms claridad la estructura del programa que estamos escribiendo. las lneas en blanco sern ignoradas cuando se ejecute el archivo html D) Le ponemos ttulo a la pgina con la instruccin <title> </title> que tenemos que poner dentro del encabezado (entre head y head) <html> <head> <title>Mi primera Pagina</title> </head> <body> </body> </html> E) Vamos a poner el texto en negrilla "Soy un fenmeno". La instruccin para negrilla es <b> y <b/>. Y el texto hay que colocarlo dentro del cuerpo (entre body y body) de la pgina. Por tanto nos queda <html> <head> <title>Mi primera Pagina</title> </head> <body> Soy el mejor </body> </html> LECCION 3 Guardamos el archivo para lo cual es aconsejable ser ordenado y crear un subdirectorio en el disco duro de nuestro computador para ir almacenando los archivos. Es importante A) Ponerle al archivo la terminacin html B) Guardarlo como documento de TEXTO (para que no se incluyan otros cdigos) C) Para evitar problemas es interesante que en el nombre del archivo, NO DEJAR ESPACIOS y NI PONER SIGNOS NO COMUNES como acentos, "", o smbolos de distintos idiomas.

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I

LECCION 4 DAR FORMATO A LAS LETRAS Cambiar los atributos de las letras utilizamos el comando <font> </font> (fuente o tipo de letra). El color o el tamao son atributos del elemento tipo de letra. Podemos dar distintos atributos a las letras. A) TAMAO DEL TEXTO * Si queremos poner las letras de distinto tamao empleamos el atributo SIZE="". * Dentro de las comillas pondremos "+" para aumentar el tamao y "-" para disminuirlo EJEMPLO 1 <FONT SIZE="+1">este texto se ve con mayor tamao</FONT> El resultado: Este texto se ve con mayor tamao EJEMPLO 2 Si queremos aun mayor tamao ponemos un nmero mayor. Voy a probar con 4 <FONT SIZE="+4">este texto se ve muy grande</FONT> este texto se ve muy grande EJEMPLO 3 Para disminuir el tamao ponemos -1 <FONT SIZE="-1">al poner -1 disminuye el tamao</FONT> Al poner -1 disminuye el tamao Podemos poner el texto en negrilla, en cursiva o subrayado PONER EL TEXTO EN NEGRILLA Para poner el texto en negrilla utilizamos el tag "b" (de bold)

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I Soy el <b>mejor</b> de la clase Soy el mejor de la clase PONER EL TEXTO EN CURSIVA Para ponerlo en cursiva utilizamos "i" (de italian) Poner un <i>texto en cursiva</i> Poner un texto en cursiva PONER EL TEXTO SUBRAYADO Para subrayado Ahora toca el <u>subrayado</u> de parte de la frase Ahora toca el subrayado de parte de la frase LECCION 5 PONER COLORES La instruccin para poner color a las letras es <FONT COLOR="entre estas comillas va el nombre o el nmero del color">aqu el texto al que queremos dar color</FONT> EJEMPLO 1 Para poner el texto en rojo <FONT COLOR="RED">este texto se pone rojo</font> El resultado si lo ponemos dentro de los cdigos del archivo html ser este texto se pone rojo EJEMPLO 2 Para poner el texto en azul <FONT COLOR="BLUE">este texto se pone en azul</font> Este texto se pone en azul ALINEAR EL TEXTO Para alinear el texto utilizamos el atributo align align=left para alinear a la izquierda

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I align=right para alinear a la derecha align=center para centrar el texto EJEMPLO ALINEAR A LA IZQUIERDA <p align="left">alineamos el texto a la izquierda</p> Alineamos el texto a la izquierda EJEMPLO "ALINEAR A LA DERECHA" <p align="right">alineamos el texto a la derecha</p> Alineamos el texto a la derecha EJEMPLO DE CENTRAR <p align="center">centramos el texto</p> Centramos el texto LOS PARRAFOS Y EL CAMBIO DE LINEA Para mantener el texto formando un prrafo o bloque de texto utilizamos el "tag" <p>aqui va el texto</p> <p>Si utilizamos la instruccin de prrafo nos aseguramos que el texto se mantenga junto y controlamos cuando queremos que exista una lnea de espacio en blanco</p> Si utilizamos la instruccin de prrafo nos aseguramos que el texto se mantenga junto y controlamos cuando queremos que exista una lnea de espacio en blanco PASAR A LA SIGUIENTE LINEA Cuando queremos pasar el texto a otra lnea podemos utilizar el "tag" <br> que no tiene tag de cierre. Si queremos separar el siguiente texto en varias lneas. La casa el perro el nio las vacaciones Pondremos: la casa<br> el perro<br> el nio<br> las vacaciones<br> Y en el documento HTML mostrar en el navegador: la casa el perro
12/10/2010 ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I el nio las vacaciones PONER TITULARES Los titulares o encabezamiento de los textos son otra forma de modificar el tamao del texto. La orden para encabezamiento es "H1" para un titular muy grande, "H2" para uno grande, H3, H4, H5 y para letra pequea H6 <H1>Encabezamiento muy grande</H1> Encabezamiento muy grande <H2>Encabezamiento grande</H2> Encabezamiento grande <H3>Encabezamiento menos grande</H3> Encabezamiento menos grande <H6>Encabezamiento muy pequeo</H6> Encabezamiento muy pequeo PONER ENLACES Lo ms caracterstico de Internet es ser un medio que no es lineal sino hipertexto es decir que utiliza enlaces para movernos entre distintos niveles o pginas. La instruccin para un enlace es de la forma <A HREF="aqui ponemos la direccin a la que queremos que apunte el enlace">el texto que queremos que se vea en el documento</A> EJEMPLO Queremos enlazar con la pgina 100mejores.com y que el texto que se vea sea "La mejor seleccin de enlaces" <A HREF="http://www.100mejores.com/">La mejor seleccin de enlaces"</A> La mejor seleccin de enlaces Recordar que los enlaces externos a otras pginas deben llevar la direccin completa de la pgina. LECCION 6 ATRIBUTOS DE LA PAGINA O ATRIBUTOS DE "BODY" Hemos visto que los archivos HTML se dividen en una cabecera y un cuerpo o body. Los archivos incorporan las instrucciones

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS

UNIVERSIDAD POPULAR DEL CESAR FACULTAD DE INGENIERA Y TECNOLOGAS PROGRAMA DE INGENIERA ELECTRNICA LABORATORIO TELEMATICA I <html> <head> </head> <body> </body> </html> Al "tag" body podemos aadirle una serie de atributos de color para asignar un color diferente: A) Al fondo del documento con BGCOLOR B) Colocar una imagen de fondo BACKGROUND C) LINK para cambiar el color de los enlaces D) VLINK para cambiar el color de los enlaces ya visitados por el usuario E) Podemos cambiar el color del texto con el atributo TEXT EJEMPLO Asignaremos un fondo de color amarillo al documento <html> <head> </head> <body bgcolor=yellow> </body> </html> Nos quedar el fondo de la pgina en amarillo. AADIR COMENTARIOS Una buena idea cuando se programa es ir aadiendo comentarios para aclarar lo que estamos haciendo. Esto es especialmente importante cuando despus de un tiempo volvemos a revisar un programa o cuando otro programador tiene que revisar o utilizar el programa. Los comentarios no aparecen cuando el usuario ve el archivo con un navegador y no tiene efectos en el programa. Para aadir comentarios utilizamos <!--aqu ponemos los comentarios sobre el programa--> Lo mismo podemos hacer comentarios</comment> utilizando los "tags" <comment>aqui ponemos el texto del

12/10/2010

ING. GIOVANNI BRACHO T. E3T UIS