Está en la página 1de 3

COLEGIO CAMPESTRE RAFAEL REYES

GUIA DE TRABAJO Nº 1
PROGRAMACION BÁSICA EN HTML

OBJETIVO: Conocer los fundamentos básicos de la programación en el lenguaje


HTML para el diseño de sitios Web.

Para la programación en lenguaje HTML debemos tener en cuenta una serie de aspectos
importantes que permitan comprender su uso y aplicación, además de los pasos a seguir
durante esta. Dichos aspectos son:

1. HTML es un lenguaje diseñado con el fin de desarrollar páginas Web.


2. Una página Web es el elemento visualizado en pantalla luego del desarrollo del
programador.
3. Existe un elemento VISUALIZADOR que consiste en el programa capaz de mostrar el
resultado de la programación (Internet Explorer, google chrome, Mosaic entre otros).
4. Para la programación se requiere de otro programa denominado EDITOR que en este
caso es el bloc de notas o notepad de Windows®.
5. Toda la programación se realiza mediante comandos agrupados en líneas y organizados
secuencialmente.

EJERCICIO Nº 1
RECONOCIENDO HTML
Desarrolle los siguientes pasos en orden sin saltarse ninguno:

1. Abra el bloc de notas de Microsoft Windows® dando clic en


inicio, seleccionando la opción Todos los programas, activando el
submenú accesorios y finalmente dando clic en Bloc de notas.

2. Escriba en la primera línea organizado y completo el siguiente comando <HTML> ya


que este es el comando de inicio de todo programa en HTML y este le avisa al sistema que
está escrito en dicho lenguaje. Al finalizar el programa debemos escribir el comando
</HTML> que indica el final de la programación de este documento.

3. Luego de clic en archivo, seleccione la opción guardar como Y EN LA VENTANA


EMERGENTE escriba como nombre de archivo ejercicio1.htm , seleccione la
ubicación escritorio y a continuación de clic en guardar.

4. debajo de la primera instrucción escrita y luego de dar Enter escribimos <TITLE>MI


PRIMERA PAGINA WEB</TITLE> completo y teniendo cuidado de escribirlo todo en
orden ya que este es el título que le damos a la página Web y aparecerá en las partes
superior e inferior de la ventana. A continuación escribimos </HTML>, seleccionamos
archivo, guardar y minimizamos la ventana.

5. Buscamos en el escritorio el archivo con forma de página Web llamado


ejercicio1.htm y damos doble clic sobre el para abrirlo.

6. Ahora volvemos al documento del bloc de notas donde estamos editando la página
Web y escribimos debajo de <TITLE>MI PRIMERA PAGINA WEB</TITLE> (luego de
dar enter) la etiqueta <BODY> que significa el inicio del cuerpo de la página Web.

7. Luego de dar enter y encontrarse en la siguiente línea escribimos la instrucción


<B>ESTO ES EN NEGRITA</B> <I>ESTO ES EN CURSIVA<I> <TT>ESTO ES EN
COURIER</TT>, damos enter y escribimos debajo la instrucción </BODY> que da por
terminado el texto. Guardamos el texto y luego volvemos al escritorio y visualizamos el
archivo EJERCICIO1.htm.

8. Luego de visualizar minimizamos la página Web y debajo de la instrucción


<B>ESTO ES EN NEGRITA</B> <I>ESTO ES EN CURSIVA<I> <TT>ESTO ES EN
COURIER</TT> y encima de </BODY> escribimos <H1>TITULO TIPO 1</H1>
<H2>TITULO TIPO 2</H2> <H3>TITULO TIPO 3</H3> <H4>TITULO TIPO
4</H4> <H5>TITULO TIPO 5</H5> <H6>TITULO TIPO 6</H6>

9. Si queremos centrar un título o un elemento envolvemos la instrucción del elemento con


la instrucción <CENTER>….</CENTER> por ejemplo si modificamos la instrucción del
paso 7 así <CENTER><B>ESTO ES EN NEGRITA</B> <I>ESTO ES EN CURSIVA<I>
<TT>ESTO ES EN COURIER</TT></CENTER>, guardamos y volvemos a visualizar la
página que hemos creado (final del paso 7).

10. Retornamos al editor de la página en bloc de notas y debajo de la instrucción


<H1>TITULO TIPO 1</H1> <H2>TITULO TIPO 2</H2> <H3>TITULO TIPO
3</H3> <H4>TITULO TIPO 4</H4> <H5>TITULO TIPO 5</H5> <H6>TITULO
TIPO 6</H6> y encima de </BODY> escribimos
<P Align="left">Este párrafo está alineado a la izquierda</P>
<P Align="center">Este párrafo está centrado</P>
<P Align="right">Este párrafo está alineado a la derecha</P>, guardamos y volvemos a
visualizar la página guardada en el escritorio.

11. Retornamos al editor de la página en bloc de notas y debajo de la instrucción


<P Align="left">Este párrafo está alineado a la izquierda</P>
<P Align="center">Este párrafo está centrado</P>
<P Align="right">Este párrafo está alineado a la derecha</P>
Y encima de </BODY> escribimos la instrucción <HR> </HR> que permite dibujar una
línea horizontal en la pantalla para separar textos. Guardamos la página y la visualizamos.
12. Con los comandos anteriores diseñe una página Web propia de los dos integrantes que
tenga como título el nombre de los dos, luego en el cuerpo el nombre del primer integrante
como título centrado en negrita y debajo alineado a la izquierda un texto que lo describa de
más de cinco renglones, debajo una línea horizontal y luego debajo como título el nombre
del segundo integrante centrado en negrita y debajo alineado a la derecha un texto que lo
describa de más de cinco renglones, para finalizar debajo una línea horizontal. Para
terminar guardar el programa con un nombre por ejemplo xxxx.htm, fíjese que siempre
debe terminar en .htm para que sea una página Web y lo visualiza como página Web en
Internet Explorer.