GUIA GRADO DECIMO                      LENGUAJE DE PROGRAMACIÓN - HTMLOBJETIVOAprender HTML en forma sencilla viendo un co...
A los comandos u órdenes del lenguaje HTML se les conoce como etiquetas y tieneimportantes reglas de codificación: l. Las ...
<HTML><HEAD></HEAD></HTML>Hay varias etiquetas que pueden ir entre las etiquetas <HEAD>.La etiqueta <TITLE> coloca el nomb...
ETIQUETAS<P> indica el inicio de un nuevo párrafo. el cual se alinea en forma predeterminadahacia la izquierda.(salto de p...
#008000           green                                  #008080             teal                                  #00FF00...
principal de nuestro sitio Web. éste será el archivo principal de nuestro site, cuando seguarde se debe nombrarlo index.ht...
2 Párrafos centrados       3 Párrafos alineados a la derecha       Un salto de línea triple       1 párrafo alineado a la ...
Se pueden cambiar los puntos usando el atributo TYPE con tres valores. Con el valorCIRCLE, se verá con una viñeta con un c...
IMAGEN ALINEADA A LA IZQUIERDA CON MARCO. Texto alineado a la izquierdade la imagen<IMG SRC="todo.gif" ALIGN=LEFT BORDER=5...
<html><head><title>Inicio</title></head><body bgcolor="#99CC99"></body></html>Con este código estarás creando un documento...
D. crea una pagina nueva que se vea como la que esta aquí, Establecer #990033 comocolor del texto del documento, y 4 como ...
<basefont color="#003333" size="4">Con este código estarás estableciendo el color verde oscuro (#003333) y tamaño 4 parael...
H. Crea una página principal llamada menú, en la que incluyas como mínimo el nombrede 5 animales domésticos, en forma de l...
Upcoming SlideShare
Loading in …5
×

Guia html

843 views
756 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
843
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Guia html

  1. 1. GUIA GRADO DECIMO LENGUAJE DE PROGRAMACIÓN - HTMLOBJETIVOAprender HTML en forma sencilla viendo un concepto teórico, luego algunos ejerciciosresueltos y por último y lo más importante poder desarrollar otros por cuenta propia .La Programación de páginas Web con HTML tiene como fin que el estudiante conozca laestructura básica de una página web y sus principales componentes, así como, lasetiquetas más utilizadas para el diseño de páginas web. HTMLHTML es el lenguaje con el que se escriben las páginas web. Las páginas web puedenser vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemosdecir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrarlas páginas webs al usuario, siendo hoy en día la interface más extendida en la red.Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestrogusto. Además, el HTML nos permite la introducción de referencias a otras páginas pormedio de los enlaces hipertexto.Un archivo HTML (una página) no es más que un texto. Es por ello que para programaren HTML necesitamos un editor de textos.CREAR PAGINA WEBEn la actualidad, millones de personas y empresas mantienen su propio sitio en Internet,sea con fines comerciales o simplemente como un pasatiempo.Tener una página en la Red Mundial ha pasado de ser un simple capricho a unaverdadera necesidad para la mayoría de los usuarios.Muchos de los individuos que tienen sitios Web prefieren crearlos ellos mismos, debido aque el diseño en sí no necesita de mucha habilidad. Todo lo que se necesita para poderrealizar sus propias páginas interactivas es el Bloc de Notas que viene el sistema ope-rativo, así como algunos conocimientos básicos de un lenguaje llamado HTML ( HyperText Markup Language, o Lenguaje de marcado en hipertexto).Por la misma razón por la cual queremos que nuestros hijos aprendan a multiplicar porellos mismos antes de que aprendan a utilizar la calculadora, es necesario comprenderel uso y funcionamiento del lenguaje HTML, saber con qué estamos trabajando, nospermitirá sacar un mayor provecho a los editores.
  2. 2. A los comandos u órdenes del lenguaje HTML se les conoce como etiquetas y tieneimportantes reglas de codificación: l. Las etiquetas siempre deben estar encerradas entre los símbolos de menor que" ( < )y mayor que" ( > ), cómo lo muestran los ejemplos: <center> <span> <font>2. La mayoría de las etiquetas viene en pares y deben encerrar al texto al cualdeseamos aplicar el comando. Esto significa que la primera etiqueta indica que al textoque sigue se le debe aplicar cierto formato. A esta primera etiqueta se le llama etiquetade apertura. Y la etiqueta final, a la cual se le llama de cierre", indica el final delcomando; esto es, que debe dejarse de aplicar el formato o función elegida. Por ejemplo,se usan del siguiente modo:<center> texto </center>Como en todas las reglas, siempre hay algunas excepciones. Por ejemplo, la etiquetaque indica un salto de línea ( <BR> ) no necesita de una etiqueta de cierre. 3. La segunda etiqueta, la de cierre. SIEMPRE empieza con una diagonal. Por ejemplo,la etiqueta que indica que el texto siguiente debe mostrarse en negritas es <b> y sucorrespondiente etiqueta de cierre es </b>. Con esto, se indica que, a partir de ahí, eltexto debe mostrarse en forma normal.4. Las etiquetas de apertura y de cierre a menudo se utilizan en forma anidada. Estosignifica que pueden usarse etiquetas dentro de las etiquetas para aplicar más de uncomando a un mismo texto. De ser así, debemos cerrar primero la etiqueta interna antesde cerrar la externa, como lo muestra el ejemplo siguiente:Forma errónea: . .<font> <center> <b> Tu texto aquí </center> </font> </b>Forma correcta<font><center> <b>Tu texto aquí</b> </center> </font>Hay algunas etiquetas que se deben poner en todos los documentos HTML para que seconviertan verdaderamente en páginas Web. La primera etiqueta que debemos escribiren todas nuestras páginas Web es <HTML".<HTML></HTML>Debajo de la etiqueta de apertura, se ingresa la etiqueta <HEAD>. Ésta contendrá in-formación del documento, pero no aparecerá en la página. el documento debe de verse,de la siguiente forma.
  3. 3. <HTML><HEAD></HEAD></HTML>Hay varias etiquetas que pueden ir entre las etiquetas <HEAD>.La etiqueta <TITLE> coloca el nombre de la pagina en la barra de título del navegador.Las etiquetas <BODY> y </BODY> contendrán todo el cuerpo de 1a página.Después de escribir esta etiqueta; el documento debe verse de la siguiente manera:<HTML> <HEAD> <TITLE>Mi primera página Web. </TITLE> </HEAD> <BODY>Este es el cuerpo de mi página Web. </BODY" </HTML"PARTES DE UN DOCUMENTO HTMLUn documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro deeste documento, podemos asimismo distinguir dos partes principales:El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas deíndole informativo como por ejemplo el titulo de nuestra página.El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremosnuestro texto e imágenes delimitados a su vez por otras etiquetas.GUARDAR: Hay que guardar el documento y nombrarlo de acuerdo a la conveniencia.Es importante que se escriba la extensión .html o .htmEjemplo: prueba.htm prueba.htmlConsejo: Utiliza siempre la misma extensión en tus archivos HTML. Eso evitará que teconfundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html.Si trabajas con un equipo en un proyecto todavía más importante que os pongáis todosde acuerdo en la extensión.El profesor te indicara la manea de guardar y visualizar tu pagina.
  4. 4. ETIQUETAS<P> indica el inicio de un nuevo párrafo. el cual se alinea en forma predeterminadahacia la izquierda.(salto de pagina)<P ALIGN=RIGHT> alinear el párrafo a la derecha de la página o bien<P ALIGN=CENTER> para centrarlo.COLOR DE FONDO.La etiqueta <BODY> usa varios atributos que son de suma importancia para controlar laapariencia de la página.<BGCOLOR>, el cual cambia el color del fondo de la página.Ejemplo: <BODY BGCOLOR="red"> o <BODY BGCOLOR="#OOFFOO"> en número hexadecimalTIPO DE FUENTE<FONT FACE="Arial">Define tipo de letraIMAGEN DE FONDOOtra opción; además de utilizar un color en el fondo de la página, consiste en emplearuna imagen. Para ello, se debe preparar la imagen que se desea que aparezca en elfondo de la página, y guardarla en la misma carpeta Web que se crea con anterioridad.Dicha imagen se repetirá el número de veces necesario hasta cubrir toda la extensión dela página, creando así un tapiz.El código se muestra a continuación: <BODY BACKGROUND="fondo.jpg"> <BODY BACKGROUND="YELLOW.GIF">COLOR DE TEXTO<FONT COLOR="RED">. El contenido dentro de las comillas es una variable.A continuación se muestran los 216 colores seguros para web, para que puedasconsultarlos cuando lo necesites.Existe otra forma de representar algunos colores, sin la necesidad de utilizar números enhexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes: Hexadecimal Nombre #FFFFFF white #000000 black #000080 navy #0000FF blue
  5. 5. #008000 green #008080 teal #00FF00 lime #00FFFF aqua #800000 maroon #800080 purple #808000 olive #808080 gray #C0C0C0 silver #FF0000 red #FF00FF fuchsia #FFFF00 yellowFORMATO AL TEXTO: para definir distintos tamaños de letras en HTML se utiliza elelemento lleno <Hx> </hx> donde x es el número que puede variar entre 1 y 6.<H1> a la<H6>, donde <H1> es el tipo de letra de mayor tamaño y <H6> la menor. Ejemplo: <H2> Subtítulo de mi página </H2>CENTRAR<CENTER>La etiqueta <BR> obliga a que la línea sea cortada sin agregar ninguna línea en blancodespués de la etiqueta. Esta etiqueta es buena elección para terminar líneas de textodentro de un párrafo. Pero la primer línea del párrafo siguiente quedará inmediatamentedespués del párrafo anterior. Por ello, se debe utilizar esta etiqueta únicamente porrazones de diseño o contenido.<I> para itálicas o cursiva<B> para "negritas".TAMAÑO DE FUENTE<FONT SIZE="5"> El contenido dentro de las comillas es una variable que desde 1 hasta7.ENLACES O LINKSLa etiqueta que permite realizar los enlaces o links se le conoce como "ancla" (<A" </a")y se utiliza junto con algunos atributos para enlazar sitios web, páginas dentro de un mis-mo sitio o direcciones de correo electrónico. Su importancia es tal que, sin la etiquetaAncla, no existiría la World Wide Web.Para poder hacer enlaces entre páginas, se debe tener listos varios archivos, los cualesse enlazaran entre sí. Se Copia el código en el bloc de notas para integrar la página
  6. 6. principal de nuestro sitio Web. éste será el archivo principal de nuestro site, cuando seguarde se debe nombrarlo index.htmLa etiqueta <A> </a>, es la que le indica al navegador que se ha creado un enlace o link.El atributo HREF (que significa, Hyper Reference o Hiper Referencia) señala la ruta aldocumento o sitio Web al cual, se quiere vincular.Por supuesto, en cada enlace se tendrá que cambiar el nombre del documento en HTMLy la identificación del mismo.la ruta completa al documento vinculado debe mostrarse entre comillas. En esteejemplo, es "aficiones.htm”.Si el documento "aficiones.htm" está dentro de una carpeta llamada "páginas" paraorganizar mejor el site, la ruta correcta sería "paginas/aficiones.htm". En cambio, si elenlace fuera un sitio web diferente, la sintaxis y ruta del documento debe quedar de lamanera siguiente: <a HREF="http://www.l00lfotografos.com"> SITIO DE FOTOGRAFIA </A>Por otra parte, cuando un usuario navegue por la página se observará que el texto quees enlace se muestra en un color diferente y que además está subrayado. El color en elcual se mostrará las palabras que funcionen como enlaces se define en la primera líneadel documentoTEXTO ALINEADO A LA IZQUIERDA escribiríamos:<p align="left">JUSTIFICACIÓN AL CENTRO:<p align="center">JUSTIFICAR A LA DERECHA:<p align="right"> EJERCICIO PRÁCTICO1. Debes practicar cada uno de los ejemplos incluidos dentro de la teoría.2. Investiga mas colores para que tengas más opciones para tu pagina.3. Para practicar un poco vamos a proponer un ejercicio para resolver en nuestros ordenadores. Simplemente queremos construir una página que tenga, por este orden:
  7. 7. 2 Párrafos centrados 3 Párrafos alineados a la derecha Un salto de línea triple 1 párrafo alineado a la izquierda4. Copia la etiqueta <HR> y observa que función realiza dentro de tu página. Comenta tus resultados.5. Luego intenta con <PRE>6. Escribe dentro de BODY el siguiente texto y escribe que pasa cuando corras tu pagina. Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi p&aacute;gina.OTROS EFECTOS:<U> subrayado<STRIKE> tachado<BIG> letra más grande que el estándar<SMALL> letra más pequeña que el estándar<SUB> subíndice<SUP> superíndice<STRONG> texto realzado<BLINK> texto intermitenteLAS LISTAS NO ORDENADAS: Escribe lo siguiente y verifica cuales son estas listas<UL><LI>Van precedidas por "bullets"<LI>Se entiende que no importa el orden<LI>Se utilizan con mucha frecuencia</UL>LAS LISTAS ORDENADAS: Escribe lo siguiente e informa que pasa con relación a laslistas no ordenadas.<P>Las listas ordenadas:<OL><LI>Van precedidas por números<LI>La numeración es automática<LI>Son también muy utilizadas</OL>
  8. 8. Se pueden cambiar los puntos usando el atributo TYPE con tres valores. Con el valorCIRCLE, se verá con una viñeta con un circulo. SQUARE con un recuadro.Ejemplo: <UL TYPE=CIRCLE>Las listas ordenadas no solo se pueden ordenar con números. También se puedenutilizar letras y numeración romana tanto en mayúsculas como en minúsculas. Para estose utiliza el atributo TYPE del elemento <ol> con los siguientes valores: TYPE=1 ( Pordefecto) para números, TYPE=A para letras mayúsculas, TYPE =a para letrasminúsculas, TYPE=I para numeración romana en mayúscula, TYPE=i para numeraciónromana en minúsculaEjemplo: <OL TYPE=A>En algunos casos puede interesarnos que la lista no comience por el numero 1 ( porejemplo si es una lista que continua en otra pagina). Se puede conseguir con el atributoSTART combinado con TYPE.EJEMPLO: <OL TYPE=A START= 5> este empezara con la letra A.<MENU>La diferencia entre un menú y una lista desordenada, es que las líneas en la listadesordenada comienzan en el margen izquierdo y las del menú unas posiciones mas ala derecha.Ejemplo: <MENU> <LI> primera línea <LI> segunda línea </menú>INSERTAR IMÁGENESUn recurso que da mucha vida a una página hecha con HTML es la inserción deelementos gráficos. Las imágenes utilizadas pueden estar en formato GIF O JPG. Parainsertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesitaetiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src.A través de los atributos width (anchura) y height (altura) puede modificarse el tamañode la imagenLa forma de insertar una imagen es la siguiente:<IMG SRC="todo.gif">IMAGEN ALINEADA A LA IZQUIERDA (por defecto)<IMG SRC="todo.gif"> en donde todo.gif es el nombre del archivo de imagen.IMAGEN ALINEADA A LA DERECHA texto alineado a la izquierda de la imagen<IMG SRC="todo.gif" ALIGN=RIGHT>
  9. 9. IMAGEN ALINEADA A LA IZQUIERDA CON MARCO. Texto alineado a la izquierdade la imagen<IMG SRC="todo.gif" ALIGN=LEFT BORDER=5> BORDER=5 es el grueso del borde.TEXTO EN MOVIMIENTO<MARQUEE> </MARQUEE> sirve para hacer que el contenido de un bloque sedesplace horizontalmente a lo ancho del mismo. Además de texto el bloque puedecontener también imágenes. Tiene muchas parametrizaciones:DIRECTION= establece en que dirección se mueve el contenido del bloque en lapantalla. Puede tener dos valores. LEFT izquierda RIGHT derechaBEHAVIOR= determina como se mueve el contenido del bloque en la pantalla. Puedetener tres valores:SCROLL= hará que el contenido del bloque aparezcan por un extremo, desaparezca porel contrario y vuelva aparecer por donde comenzó.SLIDE=(por defecto) hace que el contenido del bloque se deslice hacia el lado indicadopor direction y se detenga al llegar al lado opuesto. Solamente volverá a moverse si lapagina es cargada de nuevo.ALTERNATE= el contenido del bloque se moverá alternativamente en una dirección yotra, comenzando por la indicada por DIRECTION.ALIGN= es la alineación del bloque en la pantalla. No funciona en todos losnavegadores. Puede tener tres valores. CENTER= LEFT= RIGHT=Ejemplo:<MARQUEE BGCOLOR=”cyan” HEIGHT=”40” WIDTH=”50%”> Indica marquesina color cyan, alto 40 y ancho 50.<DIRECTION=”RIGHT” BEHAVIOR=”ALTERNATE” SCROLLDELAY=”400”> Indica la dirección del texto que será hacia la derecha, en movimientos alternos conuna velocidad de movimiento 400 milisegundos.PARA QUE APRENNDAS MAS, DESARROLLA LOS SIGUIENTES EJERCICIOSPRACTICOS.A. crear una página básicaObjetivo: Practicar las operaciones que hay que realizar para crear una página básica.Crea una carpeta en mis documentos con el nombre animales.En el bloc de notas Escribe el código que aparece a continuación:
  10. 10. <html><head><title>Inicio</title></head><body bgcolor="#99CC99"></body></html>Con este código estarás creando un documento con el título "Inicio", y con el color defondo verde (#99CC99).Haz clic sobre el menú Archivo. Haz clic sobre la opción Guardar como. Se abrirá elcuadro de diálogo Guardar como. En el recuadro Tipo: elige Todos los archivos. Guardael documento con el nombre inicio.htm, dentro de la carpeta animales de tu disco duro.Abre el documento que acabas de crear en un navegador. Fíjate en el color de fondo dela página y en la barra de título.Ejercicio 1: Con el mismo ejercicio establecer #0099CC como color de fondo y 40 comotamaño de los márgenes.Ejercicio 2: Con ayuda del profesor crea una imagen llamada fondo.gif y almacenala enla misma carpeta creada. Establecer como imagen de fondo la imagen fondo.gif.Guardarlos cambios y comprobar el funcionamiento en tu navegador.B. Insertar una imagenObjetivo: Practicar las operaciones que hay que realizar para insertar una imagen Inserta lo siguiente<img src="_______.jpg" alt="visita aulaclic" width="90" height="32" border="4">Con este código estarás asociando el enlace con la imagen ______.jpg que seencuentra en la carpeta animales. La imagen medirá 90 píxeles de ancho, y 32 píxelesde alto (atributos width y height).Tendrá un borde de 4 píxeles (atributo border), que aparecerá de color rojo, al ser estecolor el definido para los enlaces de esta página.Guardar y verifica tu paginaInserta <p align="center"><img src="_______.gif" width="122" height="85"> </p>El párrafo se añade para centrar la imagen</ul> la línea:Crea una imagen de un gato y nombralo gatito.gif, inserta la siguiente etiqueta<img src="gatito.gif" alt="gatito" border="0">Guarda y visualize tu pagina actualizada.C. inserta una lista de actividades pendientes para realizar en tu casa con viñetas.
  11. 11. D. crea una pagina nueva que se vea como la que esta aquí, Establecer #990033 comocolor del texto del documento, y 4 como el tamaño normal. Guardar y comprobar elfuncionamiento en el navegadorE. Copia el siguiente código dentro BODY<h1><u>&iquest;QUIENES SOMOS?</u></h1><br><p align="justify">Somos una cadena de centros deportivos dispuestos a ofrecertenuestras instalaciones a buen precio, con la posibilidad de reservarlas conantelaci&oacute;n a trav&eacute;s de esta web.</p><br><p align="center">Este m&eacute;s, podr&aacute;s hacerte socio de forma totalmentegratuita. <br>Ac&eacute;rcate a uno de nuestros centros y no pierdas esta oportunidad.</p>F. Reproduce las siguientes etiquetas:Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.2 Abre el archivo inicio.htm, que creaste.3 Inserta una línea en blanco debajo de la etiqueta <body>, y escribe el siguiente códigoen ella:<basefont color="red" size="1 ">Con este código estarás estableciendo el color rojo (#FF0000) y tamaño 1 para el textodel documento.Si guardas ahora los cambios y visualizas la página, no verás ningún cambio ya que lapágina no tiene texto.4 Detrás de la etiqueta <basefont> inserta una línea en blanco, y escribe el siguientetexto: Inicio5 Guarda el archivo y visualízalo en tu navegador, el texto debe aparecer en rojo ypequeño.Dejaremos la página un poco más discreta y cambiaremos el color del texto a verdeoscuro (#003333) y subiremos el tamaño de las letras.6 Rectifica la etiqueta <basefont para que quede así:
  12. 12. <basefont color="#003333" size="4">Con este código estarás estableciendo el color verde oscuro (#003333) y tamaño 4 parael texto del documento.7 Guarda el archivo y visualízalo en tu navegador, observa los cambios.8 Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma:<h1>Inicio</h1>Con este código estarás conviertiendo el texto en un encabezado de primer nivel.9 Guarda el archivo y visualízalo en tu navegador, observa los cambios, el texto aparecedestacado y más grande.10 Inserta una línea en blanco debajo del código anterior, y escribe la etiqueta <hr>.Con esta etiqueta estarás insertando una regla horizontal.11 Guarda el archivo y visualízalo en tu navegador, observa la regla12 Inserta una línea en blanco debajo de la etiqueta anterior, y escribe el siguientecódigo en ella:<blockquote><blockquote><p align="left"><em>Somos una asociaci&oacute;n de veterinarios, estudiantes de veterinaria, o simplementeamantes de los animales.<br>Desde esta p&aacute;gina web intentaremos resolver tus dudas acerca de c&oacute;mocuidar a tus mascotas.</em></p></blockquote></blockquote>Con este código estarás insertando un párrafo (<p>) dividido en dos líneas (<br>).Este párrafo estará alineado a la izquierda (align="left"), aparecerá en cursiva (<em>) ytendrá doble sangrado (<blockquote>).13 Guarda el archivo y visualízalo en tu navegadorG. Crea una página igual a la imagen
  13. 13. H. Crea una página principal llamada menú, en la que incluyas como mínimo el nombrede 5 animales domésticos, en forma de lista con viñetas.Crea una página diferente con información acerca de cada uno de los animales de lalista, en la que debe haber una imagen. Utiliza tu creatividad para que se vea amigable,utiliza las etiquetas que consideres necesarias y llámala de acuerdo con el animal.A partir de la página inicial menú, crea vínculos para cada una de las páginas.Tienes que mostrar tu creatividad.

×