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 seIdentificaras como primer
necesita el icono del bloc
requisito abrir el bloc de notas: 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:

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

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.

</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
3. Dale un nombre a tu que vas a guardar tu
documento pero ponle documento.
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.

Primero debes crear
las celdas
“cabecera”.

Después crea las
celdas “normales”.

Te quedará de la siguiente manera:

Práctica Informática - Archivo PDF

Práctica Informática - Archivo PDF

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Similar a Práctica Informática - Archivo PDF

Similar a Práctica Informática - Archivo PDF (20)

Último

Último (20)

Práctica Informática - Archivo PDF