Práctica Informática - Archivo PDF

1. Introducción. El HTML (HyperText Markup Language) no es más que una aplicación

del SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.

2. ¿Qué se necesita para crear una página de Internet? Existen diferentes métodos para poder elaborar una página de

Internet. Para tal fin puedes utilizar programas especializados en la materia, uno de ellos es Java, o el más tradicional: el bloc de notas.

a) La elaboración. Para poder crear una página de Internet se

requisito abrir el bloc de notas: necesita como primer

Identificaras el icono del bloc denotas porque es una pequeña libreta (la ubicación depende de la máquina)

Después de dar clic en el icono del bloc te saldrá un cuadro de diálogo como este:

3. Las etiquetas principales. La creación de cualquier página de Internet tiene que contener

necesariamente las siguientes etiquetas:

<HTML> Indica el inicio del documento. <HEAD> Inicio de la cabecera.

<TITLE> NOMBRE DEL DOCUMENTO </TITLE>

</HEAD> Final de la cabecera del documento

<BODY> Inicio del cuerpo del documento.

</BODY> Final del cuerpo del documento.

Este cuadro te indica que ya puedes empezar a trabajar en el bloc.

</HTML> Final del documento.

Así en el bloc de notas tendrás que tener la estructura antes explicada y te quedará de la siguiente manera:

Sin embargo para que tu página se guarde como aplicación HTML debes de hacer lo siguiente:

1. Da clic en: Archivo/Guardar como...

2. Elije el archivo en el que vas a guardar tu documento.

3. Dale un nombre a tu documento pero ponle la terminación “.html”. Ejemplo: tallerI.html

4. Da clic en Guardar

Si revisas el archivo en que guardaste tu página te tendrá que salir de la siguiente forma tu documento:

Esto te indica que tu documento tiene formato HTML

Hasta aquí, ya sabes cuáles son los elementos esenciales que debe de contener una página de Internet y cómo es que debes de guardarla con el formato HTML. En las siguientes secciones encontrarás cuáles son las funciones que realizan cada una de las etiquetas básicas así como también encontrarás algunas aplicaciones que puedes ir agregando al contenido de tu documento.

4. Cabecera. La etiqueta <HEAD> </HEAD> delimita la cabecera del documento,

esto se realiza a través de la etiqueta de titulo (<TITLE></TITLE>) El título que le des a tu página es el que aparecerá en la barra de

título cada vez que la abras. Ejemplo: <TITLE> Mi primera página </TITLE>

5. Cuerpo del documento. La etiqueta <BODY> </BODY> delimita el cuerpo del documento, esta

parte contendrá todo aquello que se quiera mostrar en la página: texto, gráficos, enlaces, tablas, etc. Todo lo que quieras agregar a tu documento lo harás a través del bloc de notas, para poder observar lo que contiene tu página cada vez que haces una modificación debes de guardarlo. (Archivo/Guardar)

a) Título de la página. Para darle un título a tu documento se utiliza la siguiente etiqueta: <Hx> <Hx> en donde x= 1, 2, 3, 4, 5 y 6. Así H1 indica el tamaño de

letra más grande y H6 el más pequeño.

Ejemplo:

Guardas (Archivo/ Guardar), después abres tu documento y

aparecerá de la siguiente manera:

Si quieres que tu texto este centrado debes de utilizar el siguiente atributo: align= center que te alineará el texto en el centro. align=right alineará el texto a la derecha y align=left que lo alineará a la izquierda. Por facto cada vez que escribas algo aparecerá alineado a la izquierda. Este atributo lo utilizarás de la siguiente forma:

Lo aplicarás dentro de la etiqueta del título de la siguiente manera: <h1 align=center> Después guarda el cambio, Y abre tu documento para comprobar que el título principal de tu página está centrado.

b) El texto. Para comenzar a escribir necesitas indicarlo a través de la etiqueta:

<P></P> entre párrafo y párrafo debes de abrir esta etiqueta, si no lo haces en tu documento el texto aparecerá en un sólo párrafo.

Al actualizar tu contenido (porque recuerda que después de cada

cambio debes de guardarlo) tu archivo te quedará de la siguiente manera:

Sin embargo como se ve muy opaco este archivo, se le pueden aplicar algunas modificaciones, estas modificaciones tienen que ver con el color, tamaño y tipo de letra del contenido, esto lo realizarás de la siguiente manera:

En donde tienes la etiqueta del párrafo aplicarás otra:

<p align="center"><font size="5" face="arial" color="white"> -----</font></p>

En esta parte es en donde indicaras el tamaño, color y tipo de letra que quieres.

Aplicando características personales a tu documento se verá

semejante a esto:

Algunas de las características que puedes agregar al texto lo puedes

hacer con las siguientes etiquetas:

Negrita <b> </b>

Cursiva <i> </i>

Subrayado <u> </u>

Si lo que quieres es cambiar el color de las letras puedes utilizar los

siguientes caracteres:

Negro “#000000” Rojo “#FF0000” Verde “#00FF00” Azul “#0000FF” Blanco “#FFFFFF”

6. Creación de enlaces. Un enlace es un elemento de la página que hace que el navegador

acceda a otra página, un archivo tec. Para incluir un en lace se necesita la etiqueta: <a></a>. El texto o

imagen que se encuentre dentro de esta etiqueta será “sensible”; si pulsas el ratón sobre de ella se realzará. Si el enlace es un texto aparecerá subrayado en distinto color.

Esta etiqueta tiene el parámetro “href” que indica el lugar a donde nos llevará el enlace si se pulsa.

7. Utilización de imágenes. Para poder incluir una imagen en tu página debes de tomar en cuenta

que existen dos tipos de formatos: “.gif” y “jpg”. Debes de revisar qué tipo

de archivo es tu imagen. Además de que debes de tener guardada tu imagen en la misma carpeta en la que guardaste tu página.

La primer etiqueta que debes de tener presente es: <img> para esta

etiqueta no es necesario tener una etiqueta de fin como en las anteriores. Lo que si hay que considerar es que necesitas un parámetro muy

importante: src=”nombre del archivo” este será el que introducirá la imagen:

Te quedará de la siguiente manera:

Si quisieras realizar algunas otras modificaciones en puedes utilizar

las siguientes etiquetas:

border Indica el tamaño del borde de la imagen

hspace Indica el # de espacios horizontales que separan la imagen del texto que la siga y anteceda

vspace Indica el # de espacios verticales que separan la imagen del texto que la siga y anteceda

height Indica el alto de la imagen. (Varia el tamaño de la imagen)

width Indica el ancho de la imagen.

a) Marqee. La etiqueta <marquee></marquee> crea una marquesina con un texto

en su interior que se desplaza. Ejemplo:

<marquee bgcolor="#00F0FF" width=100% scrolldelay=0> Bienvenido a mi página personal en Internet. </marquee>

Algunos de los parámetros que puedes aplicar aquí son:

align= top/middle/ bottom Indica si el texto del interior de la marquesina se alinea en la zona alta, media o baja.

direction=left/right Indica el lugar al que se desplaza el texto.

bgcolor Indica el color del fondo de la marquesina.

height Indica la altura de la marquesina width Indica la anchura de la marquesina scrolldelay Indica el # de milisegundos que

tarda en reescribirse el texto, a número mayor el desplazamiento es más lento.

8. Creación de tablas. Para crear una tabla necesitas la etiqueta: <table></table> Las etiquetas más importantes que debes de tomar en cuenta son:

<tr></tr> que indican una linea de celdas, <td></td> que indican una celda normal y <th></th> que indican una celda “cabecera”, quiere decir que su contenido será resaltado en negrita y en un tamaño superior al normal.

Y los parámetros que se utilizan dentro de la etiqueta de <table> son: border Indica el ancho del borde de la

tabla. cellspacing Indica el espacio que separa las

celdas dentro de la tabla. cellpadding Indica el espacio que separa el

borde de c/d celda y el contenido de ella.

width Indica la anchura de la tabla. height Indica la altura de la tabla bgcolor Especifica el color de fondo de la

tabla. Los parámetros que se utilizan dentro de la etiqueta de <td> y <th>

son:

align=left/center/right/justify Alinea el contenido.

valign= top/middle/ bottom Indica la alineación vertical del contenido de la celda.

rowspan Indica el número de filas que ocupará la celda.

colspan Indica el número de columnas que ocupará la celda.

width Indica la anchura de la columna.

Después crea las celdas “normales”.

Primero debes crear las celdas “cabecera”.

Te quedará de la siguiente manera:

Práctica Informática - Archivo PDF

Technology

Transcript of Práctica Informática - Archivo PDF