Page 1

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 necesita como primer 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...

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

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

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.

son:

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

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 ocupará la celda.

colspan

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

width

Indica la anchura de la columna.

de

filas

que


Primero debes crear las celdas “cabecera”.

Después crea las celdas “normales”.

Te quedará de la siguiente manera:


practica infor issuu  

issuu is a website

Read more
Read more
Similar to
Popular now
Just for you