Ejercicio HTML
7
ITGS Pag. 1 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:
description
Como usar el HTML
Transcript of Ejercicio HTML
ITGS Pag. 1
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. 2
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”.
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:
Verificar la carpeta donde guardamos el archivo html
Seleccionamos el archivo y luego clic en
abrir
ITGS Pag. 3
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.
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.
Observe, los TAGs de inicio
y fin de toda página web.
<html> </html>
ITGS Pag. 4
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:
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>
Observe el título del programa.
Cambie en título para probar este
TAG
ITGS Pag. 5
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. 6
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. 7
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>
