EJERCICIO DE HTML Veamos el siguiente texto:
HTML... ¿QUÉ ES? HTML (Hyper Text Mark Lenguage) es un espacio de programación para crear páginas electrónicas que corren en Internet. Es útil para publicar información de todo tipo y con el diseño que más te agrade; desde una carta o lista informativa hasta anuncios comerciales (en nuestro caso, información de nuestras oficinas). HTML no es muy complicado, sólo requiere un poco de tiempo para entenderlo y algo de práctica. El resto es creatividad y herramientas. Lo primero que necesitas es abrir un archivo en cualquier procesador de palabras. El más común es el Bloc de notas (Notepad) o cualquier procesador que maneje tu computadora. Además necesitas una nueva ventana en el navegador que estés utilizando para poder ver en ella como se verá tu página en Internet. Es muy importante que vayas practicando con ayuda de los ejemplos. Lo mejor que puedes hacer es realizar los ejemplos y verlos en tu navegador para que en realidad puedas aprender. Vamos a copiar el texto (el del recuadro) y luego lo pegamos dentro del block de notas de “mipagina.html”. Tendremos algo por el estilo:
ITGS
Pag. 1
Luego guardamos y lo abrimos desde un navegador (Internet Explorer o el Mozilla Firefox). En Mozilla seria: Del menú principal clic en menú “Archivo” y luego “Abrir archivo”. Verificar la carpeta donde guardamos el archivo html
Seleccionamos el archivo y luego clic en abrir
Después de hacer esto, tendremos una pagina de la siguiente forma:
Se observará que no tiene formato y que los “saltos de línea” no se presentan y varias cosas por el estilo.
A continuación vamos a darle formato a nuestra primera página web hasta obtener la siguiente pantalla:
ITGS
Pag. 2
Para lograr los resultados anteriores debemos hacer lo siguiente:
Toda código de una página web inicia con el tag <html> y termina con el tag </html> (añadamos estos tags en nuestro block de notas.
Observe, los TAGs de inicio y fin de toda página web. <html> </html>
Si ahora guardas (o grabas) el archivo, y lo visualizas en el navegador (recuerda, Internet Explorer o Mozilla Firefox), no vera ningún cambio. De preferencia no cerrar el navegador y cada vez que guarda el archivo, solo pulsa la tecla de función F5 para ver los cambios.
ITGS
Pag. 3
Ahora pongamos título a nuestra página web. Debajo del tag <html> añade lo siguiente: <title>Primera página de HTML</title> Guarda la página web y en el navegador (pulsa F5) veras un titulo de la ventana del programa algo similar a lo siguiente:
Observe el título del programa. Cambie en título para probar este TAG
Ahora vemos que el título tiene un tamaño especial y además esta resaltado (negrita), subrayado, centrado y color verde. Para esto debemos usar los siguientes TAGs: (Se recomienda que después de hacer cada uno de los siguientes pasos, guardar y ver resultados en el navegador) 1.- Para el tamaño tipo título: <h1> HTML...</h1> 2.- Para Negrita: <b><h1> HTML...</h1></b> 3.- Para subrayado: <u><b><h1> HTML...</h1></b></u> 4.- Para centrado: <center><u><b><h1> HTML...</h1></b></u></center> Hasta aqui hemos visto como un tag inicia con la ‘palabra clave’ del tag y termina igual, con la misma palabra clave pero antecedido del back slash Los TAGs HTML pueden tener ‘argumentos’, es decir que podemos añadir mas elementos para asignarle ciertas características a nuestra página web que estamos construyendo. Por ejemplo veamos el siguiente TAG 5.-
Para
color
vede:
<font
color="#00CC00"><center><u><b><h1>
HTML...</h1></b></u></center></font>
ITGS
Pag. 4
Observamos que el tag: <font color="#00CC00"> y que termina con </font>, tiene el argumento color="#00CC00", el cual indica que el texto dentro de éste TAG, debe presentarse con un color Verde (
Para otros colores pruebe modificando esos 6 códigos o mira la siguiente página: http://www.portalagrario.com.pe/coloresHTML.html
Sigamos con las modificaciones.
Ahora vemos que después del título hay una línea que sepárale título del primer párrafo. Para obtener esta línea, solo debemos ingresar el siguiente TAG (después del tag </font>):
<hr> Guardamos y verificamos en el navegador los resultados hasta ahora obtenidos. Ahora vemos que en el primer párrafo tenemos a “¿QUÉ ES? HTML” en negritas. Para est hacemos lo siguiente: <p><b>¿QUÉ ES? HTML</b> El TAG <p> se utiliza para insertar un salto de párrafo. Se recomienda utilizar este TAG para que cada párrafo este separado del siguiente párrafo. Sigamos buscando la palabra “Internet” y lo modificamos a: …<b>Internet</b>… Al final del párrafo colocamos </p>, quedando de la siguiente forma: … información de nuestras oficinas). </p> Para el siguiente párrafo, buscamos el texto que tiene formato especial y debemos modificarlo quedando algo similar a lo siguiente: <p>HTML no es… …<b>práctica</b>… … tu computadora- </p>
ITGS
Pag. 5
Para el último párrafo: <p>Además necesitas… … <font color="#000080"><b> Es muy importante que vayas practicando con ayuda de los ejemplos</b></font> … …puedas aprender.</p></html>
Hasta aquí hemos terminado de dar formato a nuestro primer archivo HTML.
TAGs adicionales para obtener una correcta construcción de una página web son: HEAD y el TAG BODY. Su uso es recomendado para dar ciertas características a las páginas Web y su uso básico es de la siguiente forma:
<html> <head>…aquí va características especiales de la página …</head> <title> …</title> <body> …… aquí va el resto del código de la página Web. …… </body> </html>
ITGS
Pag. 6
Listas Las siguientes etiquetas <UL> y <LI> sirven para hacer listas. Existen diferentes tipos de listas que puedes emplear para hacer más formal tu documento: listas numeradas, listas de definiciones y listas anidadas. Es decir, al usar estas etiquetas cada elemento de la lista se acomoda en un nuevo renglón y se alinea con los otros elementos. A continuación ingresemos el siguiente texto para ver como es una lista: <html> <head> <title> Practicando con Listas </title> </head> <body> <h1> Este es el título de la primera lista</h1> <hr> <p> Las etiquetas HTML tienen por lo general una etiqueta de apertura y una de cierre; aunque existen algunas excepciones. Las etiquetas de apertura son simplemente el nombre de la etiqueta y las etiquetas de cierre tienen el nombre de la etiqueta precedido por una diagonal (/). Con esto podemos construir: </p> <ul>Lista <li>Documentos diversos <li>Ingresar imágenes <li>Mostrar tablas <lI>Presentar Videos <li>Otros que la tecnología nos permita </ul> Todas las etiquetas HTML son insensibles al tipo de letra, esto es, puedes especificarlas en mayúsculas, minúsculas o en cualquier combinación de éstas. <body> </html>
ITGS
Pag. 7