Curso de Diseño y Publicación de Páginas Web

Texto completo

(1)

Curso de Diseño y Publicación de Páginas Web

Docente Responsable:

Ing. Jorge Raúl Olguín Colaboradora:

Lic. Mónica Páez

- 2000 -

(2)

Ejercicio 1

} Activar Inicio, Programas, HomeSite 4.5 y hacer clic sobre el ícono HomeSite 4.5.

} Aparece la ventana del programa Allaire HomeSite 4.5. En la parte superior muestra las barras de Menú y de Herramientas. Debajo de éstas, a la izquierda, la ventana de directorios y a la derecha, la ventana de trabajo con sus tres solapas: [Edit] [Browse]

[Design].

} Como puede observarse, aparecen en la hoja las etiquetas básicas, que indican una página web en blanco, como se muestra a continuación:

<html>

<head>

<title>Untitled</title>

</head>

<body>

</body>

</html>

} Si se hace clic en la solapa [Browse] (que permite visualizar) se observa una página en blanco. Pulsar sobre [Edit] para volver a la edición.

} Si se observa detenidamente, el cursor aparece debajo de la etiqueta <body>. Desde la posición del cursor, tipear lo que se indica en negrita en el texto siguiente:

<body>

Ejercicio Nro. 1 Curso de HTML

Incorporación de etiquetas básicas (Saltos de línea y efectos de caracteres)

</body>

} Pulsar sobre la solapa [Browse] y observar que el texto se visualiza pero no tiene formato alguno e inclusive, no se respeta la separación en renglones. Pulsar en [Edit]

para volver al modo de edición.

} Para lograr la separación, agregar al final de cada línea la etiqueta <br>. Comprobar si se logró el efecto pulsando sobre la solapa [Browse]. Volver nuevamente a edición con [Edit].

} Para comenzar a aplicar formatos, agregar al comienzo del texto ingresado la etiqueta que visualiza en negrita <b> y luego cerrarla al final, tal como se indica. (Se habrá advertido que al insertar la etiqueta el programa inmediatamente adiciona el cierre de la misma. Esta se puede cortar y pegar en el lugar correspondiente o bien borrarla y reescribirla en el lugar adecuado). El texto con etiquetas sería:

<b> Ejercicio Nro. 1 <br>

Curso de HTML <br>

Incorporación de etiquetas básicas <br>

(Saltos de línea y efectos de caracteres) <br></b>

(3)

} Si se visualiza nuevamente la página se observa que todo el texto cambió su aspecto.

Qué se debería hacer para que sólo la primer línea aparezca en negrita? Intentarlo cambiando de lugar el cierre </b>, es decir, colocándolo en el final de la primera línea.

} Se intentará ahora aplicar formato de cursiva al segundo renglón. Para ello se utiliza la etiqueta <i>:

<i> Curso de HTML <br></i>

} Visualizar el efecto obtenido.

} Se pretende ahora subrayar el próximo renglón. Para ello, se utiliza la etiqueta <u>:

<u> Incorporación de etiquetas básicas </u><br>

} Observar si el efecto se produjo.

} A continuación se le dará un título a esta página. Para ésto se incorporará el nombre deseado dentro de la etiqueta <title> </title>, reemplazando el valor Untitled.

<title> Curso de HTML – Ejercicio 1 </title>

} Observar la presentación mediante [Browse]. No deberían percibirse cambios ya que esta etiqueta sólo afecta lo que muestra la barra de títulos del navegador y por lo tanto se apreciará cuando la página se abra con un navegador.

} Ahora se grabará la página. Si se observa la parte inferior de la ventana de trabajo, hay una solapa que indica: x Untitled (sín título). Acceder al menú File, Save y en la ventana que aparece buscar el disco C:, carpeta Mis documentos, crear una carpeta con el nombre CursoHTML y grabar allí la página creada con el nombre: ejercicio1.htm (Si se dispone de un diskette, grabarla también allí).

} Observar que en la parte inferior de la ventana de trabajo la solapa ahora indica:

ejercicio1.htm

} El código completo de este ejercicio sería:

<html>

<head>

<title>Curso de HTML - Ejercicio 1 </title>

</head>

<body>

<b> Ejercicio Nro. 1 </b><br>

<i>Curso de HTML </i><br>

<u>Incorporación de etiquetas básicas </u><br>

(Saltos de línea y efectos de caracteres) <br>

</body>

</html>

} Para visualizar este ejercicio con un navegador, una vez que está grabado, abrir el Internet Explorer, ir a Archivo, Abrir y utilizando el botón Examinar, seleccionar y cargar el archivo recientemente creado: C:\Mis Documentos\CursoHTML\ejercicio1.htm } El documento tendría el siguiente aspecto:

Ejercicio Nro. 1 Curso de HTML

Incorporación de etiquetas básicas (Saltos de línea y efectos de caracteres)

} Para finalizar, salir del Internet Explorer y cerrar el archivo de HomeSite mediante la opción Close del menú File.

(4)

Ejercicio 2

} Desde HomeSite crear un nuevo documento en blanco, pulsando en File, New y aceptando la propuesta de: Default Template (Plantilla por defecto).

} Titular esta página como:

<title> Curso de HTML – Ejercicio 2 </title>

} Se pretende crear dos listas de ítems, una numerada y una con viñetas. Dentro de las etiquetas de <body> introducir los siguientes elementos:

Lista ordenada o numerada:

<ol>

<li>Primer elemento

<li>Segundo elemento

<li>Tercer elemento

</ol>

} Observar la presentación mediante [Browse]. Se ha creado una lista numerada. Se puede advertir que no se requiere incorporar etiquetas del tipo <br> para separar las líneas: las etiquetas que generan listas también incluyen este efecto.

} A continuación se creará una lista desordenada (en realidad es una lista no- numerada) o con viñetas. Agregar, debajo de lo anterior, los siguientes elementos:

Lista desordenada o con viñetas:

<ul>

<li>Primer elemento

<li>Segundo elemento

<li>Tercer elemento

</ul>

} Notar las diferencias entre los tipos de lista mediante [Browse]. Agregar entre ambas listas y al final de la segunda lista, la etiqueta: <hr> y hacer [Browse] nuevamente.

Deberían aparecer dos separadores de líneas horizontales.

} Para finalizar, se incorporará una lista anidada. Transcribir lo siguiente al final, siempre dentro de las etiquetas <body> </body>:

Lista con viñetas (anidada):

<ul>

<li>Primer elemento

<li>Segundo elemento

<ul>

<li>Primer sub elemento

<li>Segundo sub elemento

<li>Tercer sub elemento

</ul><li>Tercer elemento

</ul>

} Analizar el efecto mediante [Browse]. Observar que cuando se incrementa la profundidad de la indentación o anidamiento se modifican automáticamente las viñetas. Las listas anidadas también se pueden aplicar a las listas numeradas o bien mezclar ambos tipos. (Si se desea mejorar la lectura del código dentro de edición, se puede indentar manualmente con la tecla de tabulación o agregar espacios en blanco, que no tienen efecto en el aspecto que muestra el navegador).

} Grabar esta página en: C:\Mis Documentos\CursoHTML, con el nombre: ejercicio2.htm.

(5)

} Comenzar una nueva página en blanco. Asignarle el título: Curso de HTML – Ejercicio 3 y agregarle el siguiente texto:

Editores HTML

Los editores HTML se clasifican en tres tipos:

Wysywyg:

"What you see is what you get" (lo que vé es lo que obtiene): en ellos se puede ir viendo en pantalla inmediatamente lo que se va creando. Son muy útiles para apreciar los colores y la disposición en pantalla de los elementos.

No Wysywyg

Ellos usualmente invocan una aplicación externa (un navegador) para mostrar lo que se va creando. Son muy útiles para recordar los comandos HTML y sus atributos.

Mixtos

Presentan la pantalla dividida en dos segmentos, uno con el código HTML y otro con el resultado final o se puede conmutar entre ambos modos.

} Observar la presentación mediante [Browse].

} Como puede apreciarse todo el texto aparece como un único párrafo. Se podría separar utilizando la etiqueta <br>, pero se aprovechará para incorporar otros comandos: Los títulos y la identificación de párrafos. Volver a edición

} Encerrar la primera línea entre las etiquetas: <h1 align=center> </h1>. Esta etiqueta identifica un título, siendo el 1 el mayor disponible; a medida que ese número aumenta, se reduce el tamaño o importancia del título. El atributo align establece la alineación del texto (que podría omitirse y tomaría la alineación por defecto que es la izquierda).

} Encerrar la segunda línea entre las etiquetas: <p align=justify> </p>. Esta etiqueta define un párrafo. El comportamiento del atributo align es el mismo que para la etiqueta de títulos.

} Para la próxima línea usar la etiqueta <h2> pero con la alineación izquierda (left).

Para el párrafo siguiente emplear la etiqueta <p> con la alineación izquierda.

} Para la línea siguiente usar la etiqueta <h2> pero con la alineación centrada (center).

Para el próximo párrafo emplear la etiqueta <p> con la alineación centrada.

} Para la próxima línea usar la etiqueta <h2> pero con la alineación derecha (right).

Para el último siguiente emplear la etiqueta <p> con la alineación derecha.

} El código del cuerpo de la página debería tener un aspecto parecido al siguiente:

<body>

<h1 align=center> Editores HTML</h1>

<p align=justify>Los editores HTML se clasifican en tres tipos:</p>

<h2 align=left>Wysywyg:</h2>

<p align=left>"what you see is what you get" (lo que ve es lo que obtiene): en ellos se puede ir viendo en pantalla inmediatamente lo que se va creando. son muy útiles para apreciar los colores y la disposición en pantalla de los elementos. </p>

<h2 align=center>No Wywywyg </h2>

<p align=center>Ellos usualmente invocan una aplicación externa (un navegador) para mostrar lo que se va creando. Son muy útiles para recordar los comandos HTML y sus atributos. </p>

<h2 align=right>Mixtos </h2>

<p align=right>Presentan la pantalla dividida en dos segmentos, uno con el código HTML y otro con el resultado final o se puede conmutar entre ambos modos. </p>

</body>

(6)

} Visualizar el aspecto. Debería obtenerse una imagen como la siguiente:

Editores HTML

Los editores HTML se clasifican en tres tipos:

Wysywyg:

"What you see is what you get" (lo que vé es lo que obtiene): en ellos se puede ir viendo en pantalla inmediatamente lo que se va creando. Son muy útiles para apreciar los colores y la disposición en pantalla de los elementos.

No Wysywyg

Ellos usualmente invocan una aplicación externa (un navegador) para mostrar lo que se va creando. Son muy útiles para recordar los comandos HTML y sus atributos.

Mixtos Presentan la pantalla dividida en dos segmentos, uno con el código HTML y otro con el

resultado final o se puede conmutar entre ambos modos.

} Como puede apreciarse todo el texto aparece separado en párrafos y éstos y sus títulos tienen las orientaciones esperadas. Estos párrafos guardan unidad aún si se reduce el tamaño de la ventana de exploración, adecuándose a las dimensiones que presente el navegador y la resolución del adaptador de video de la computadora.

} Si el texto no aparece como se pretendía se debe revisar la sintaxis de las etiquetas ya que en esta etapa el editor no informa errores.

} A continuación se modificará el tipo de fuente empleado en este documento. Para eso se incluirá la etiqueta <font> con su atributo: face, asignándosele el valor: “arial” (para utilizar esa fuente). Agregar entonces: <font face=arial> al comienzo del cuerpo de la página. No olvidar cerrar la etiqueta al final. Visualizar la página para comprobar el efecto.

} Ahora se pretende establecer el color azul oscuro al título principal. Para eso se utilizará nuevamente la etiqueta <font> pero esta vez con el atributo color, asignándosele el valor: “Navy”. (Se pueden seleccionar otros colores predefinidos o generar colores propios, haciendo clic con el botón derecho del mouse sobre la etiqueta correspondiente y seleccionando Edit tag... del menú contextual). Agregar entonces: <font color=navy> antes del titulo principal (marcado con <h1>) y cerrarlo con </font>. Tener en cuenta que el editor puede generar la etiqueta de cierre inmediatamente, por lo que se deberá mover a la posición deseada.

} Observar si el efecto pretendido se logró.

} Para modificar el color de fondo y de texto que tendrá por defecto la página en construcción, hacer clic con el botón derecho del mouse sobre la etiqueta <body> y seleccionar Edit tag... del menú contextual. En Background Color (color de fondo) desplegar la lista y seleccionar el color “Gray” y en Text Color elegir el “White” (dejar los otros atributos sin modificar). Salir de ese cuadro de diálogo haciendo clic en OK.

Visualizar el efecto con [Browse].

} Repetir el proceso para otras combinaciones de fondo y texto que se consideren apropiados (por el momento no modificar otros atributos de la etiqueta <body>). A continuación experimentar creando colores propios, utilizando la opción de color

“Custom” (observar que los colores creados tienen un valor numérico hexadecimal y no un nombre identificatorio).

} Grabar esta página en: C:\Mis Documentos\CursoHTML, con el nombre: ejercicio3.htm.

Figure

Actualización...

Referencias

Actualización...

Related subjects :