17
CECYTEM PLANTEL NICOLAS ROMERO II Manual para crear páginas web en HTML GRUPO: 301 ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ
CECYTEM PLANTEL NICOLAS ROMERO II
Manual para crear páginas web en HTML
GRUPO: 301
ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ
HTML (HyperText Markup Language - Lenguaje de Marca de Hipertextos) es el
lenguaje estándar utilizado en Internet para representar la información
intercambiada por sus usuarios en forma de documentos de hipertexto. Esto
quiere decir que cualquier cliente web (Internet Explorer, Google Chrome, Mozilla,
Firefox, etc.) que utilice las normas estándar de visualización de documentos web
podrá leer e interpretar perfectamente este lenguaje. La mayoría de las páginas
web están escritas en este lenguaje.
Estructura de un documento HTML
HTML es un
lenguaje basado en
el uso de marcas o etiquetas. Estas etiquetas comienzan por el símbolo de menor
(“<”) y
terminan con
el símbolo de mayor (“>”). Por ejemplo, son etiquetas:
<HTML> <BODY> <HEAD>
La palabra que se encierra entre esos dos símbolos indica qué acción debe
realizar el navegador o qué tipo de información aparece a continuación.
Además, para delimitar el ámbito en el que ha de aplicarse una etiqueta, se debe
indicar hasta donde actúa. Para ello se utiliza la misma etiqueta pero con el
símbolo / justo delante de la palabra. Así, por ejemplo, las siguientes etiquetas
indican fin de una acción:
</HTML> </BODY> </HEAD>
Así pues, cada etiqueta de principio de acción < … > tiene una “correspondencia”
con una etiqueta de fin de acción </ … >.
NOTA:
Las etiquetas NO son sensitivas, es decir, pueden escribirse en mayúsculas,
minúsculas o combinadas, ya que siempre mantienen su valor:
<HTML> <Html> <html>
Esquema de una página
Todas las páginas web comienzan siempre con la etiqueta <HTML> y terminan
con la etiqueta </HTML>.
El texto que está entre <HTML> y </HTML> es la página web, lo que esté fuera de
lo delimitado por esas marcas, no se considera texto de la página.
Las páginas web se dividen en dos partes bien diferenciadas: la cabecera y el
cuerpo.
cabecera de la página se emplea para proporcionar información acerca del
documento (título, autor, fecha de creación, etc.).
La cabecera debe ser delimitada con las etiquetas <HEAD> al principio y
</HEAD> al final. Entre esas dos marcas se encuentran las líneas que pertenecen
a la cabecera de la página.
cuerpo contiene el texto de la página, es decir, la información que se va a
presentar al usuario.
Para el cuerpo se deberá poner <BODY> al principio y </BODY> al final. Entre
esas dos marcas se encontrarán las líneas que pertenecen al cuerpo de la página.
ESQUEMA DE UNA PÁGINA
<HTML>
<HEAD>
Aquí va la cabecera de la página
</HEAD>
<BODY>
Aquí va el cuerpo de la página
</BODY>
</HTML>
Para indicar el título de la página también se utiliza una etiqueta, en este caso se
emplea <TITLE> y </(TITLE>:
<TITLE> Título de la página </TITLE>
Observe cómo las etiquetas delimitan donde empieza (<TITLE>) y donde terminan
(</TITLE>) las palabras pertenecientes al título.
Comentarios
Los comentarios se construyen también utilizando etiquetas, aunque en este caso
no hay una etiqueta de inicio y otra de fin.
<! – Texto comentario –>
<HTML>
<HEAD>
<!- esto de aquí es la cabecera de la página ->
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
<!- esto de aquí es el cuerpo del mensaje ->
...
...
</BODY>
</HTML>
Saltos de línea
HTML considera continuo al texto contenido en la parte BODY, es decir, que pone
todas las líneas de texto unas a continuación de otras.
Para indicar que se desea hacer un salto de línea hay que utilizar una etiqueta
(<BR>), la cual se trata de una etiqueta especial, ya que al ordenar una acción
puntual (no actúa sobre un conjunto de palabras, sino actúa en un punto de la
página), no tiene una etiqueta de fin.
Cada vez que el navegador encuentre la etiqueta <BR> en el texto del documento,
hace un salto de línea, es decir, hace un “punto y aparte”.
Para indicar al navegador que desea utilizar más de un espacio, se emplea el
código:
De este modo, si desea incluir dos espacios adicionales entre una palabra y otra,
deberá indicarlo del siguiente modo:
Primera palabra Segunda palabra
y el navegador reemplazará cada por un espacio de separación.
Párrafos o bloques
Cuando se construye una página web con HTML, se debe agrupar el texto en
párrafos o bloques. Así, cada vez que comience un nuevo párrafo el navegador
insertará una línea en blanco para separar unos bloques de otros. Para ello se
utiliza la etiqueta <P> para indicar comienzo de párrafo y </P> para indicar fin de
párrafo.
Este salto que produce <P> es igual que el de <BR> solo que la separación entre
líneas es mucho mayor. Se podría decir que equivale a un <BR> y medio.
Por lo tanto, el texto del cuerpo se encuentra dividido en bloques o párrafos
mediante el uso de las etiquetas <P> y </P>.
Estas etiquetas tienen, además, otras opciones que permiten indicar cómo será
mostrada esa página. Con <P> puede establecer, por ejemplo, que el párrafo
aparezca centrado, alineado a la izquierda o a la derecha. Para ello se utiliza del
siguiente modo:
<P ALIGN=alineación>
Donde alineación es uno de los siguientes valores:
en <P> se considera por defecto esta alineación.
Estilo del texto
HTML nos ofrece las opciones básicas de cualquier editor de texto, por tanto,
también permite poner textos en negritas, cursivas o subrayados. Para ello es
necesario poner etiquetas del siguiente modo:
- Para resaltar un texto en negrita se utilizan las etiquetas <B> y </B>,
- Ejemplo:
Parte de este texto está <B> en negrita </B>
- Para poner un texto en cursiva o itálica se utilizan las etiquetas <I> e </I>,
- Ejemplo:
Parte de este texto está <I> en cursiva </I>
- Para poner un texto subrayado se utilizan las etiquetas <U> e </U>,
- Ejemplo:
Parte de este texto está <U> subrayado </U>
- También se pueden utilizar varias de estas etiquetas de forma conjunta. En este
caso, deberá ir cerrando las etiquetas en orden inverso a como las fue abriendo.
Así si, por ejemplo, empieza con <U> <B> <I>, deberá cerrarlas en este orden </I>
</B> </U>.
Por ejemplo, si desea poner unas palabras de una frase subrayado y negrita
deberá escribir:
Parte de este texto está
<U><B> subrayado y negrita </B></U> 15
HTML también nos permite mostrar el texto con el tamaño que se desee. Para ello
se utilizan las etiquetas <FONT SIZE = t> .. </FONT>, siendo t el tamaño del texto.
El número que se pone después de SIZE (es decir, t) debe estar comprendido
entre 1 (el tamaño más pequeño) y 7 (el mayor tamaño posible). El valor por
defecto es 3.
Así, por ejemplo, si desea imprimir el texto ¡Hola Mundo¡ con un tamaño más
grande deberá escribir:
<FONT SIZE=7>¡Hola Mundo!</FONT>
Títulos o encabezados
Cuando escribimos una página en HTML, seguramente en más de una ocasión, se
tendrá que mostrar texto que está organizado en párrafos y en los que además
hay encabezados o títulos en cada uno de ellos.
En estos casos, cuando se desea definir un título se pueden utilizar las etiquetas
<FONT SIZE = n> .. </FONT>, para dar mayor tamaño a los encabezados y
distinguirlos así del texto de los párrafos. En el caso de que se utilicen subtítulos
se empleará un tamaño intermedio entre el título y el párrafo siguiente. Por
ejemplo:
<HTML>
<HEAD>
<TITLE> Títulos y encabezados </TITLE>
</HEAD>
<BODY>
<P>
<FONT SIZE=7> Tema 2. <B>Enriqueciendo el documento</FONT></B>
</P>
</P><FONT SIZE=6>Introducción;n; n</FONT></P>
</P><FONT SIZE=3>
LA CURVA MAS HERMOSA DE UNA MUJER ES SU SONRRISA </FONT></P>
</BODY>
</HTML>
Tipos de letra
HTML permite también modificar el tipo de letra, es decir, la forma en la que los
caracteres van a ser mostrados en la pantalla.
La etiqueta FONT, además de seleccionar el tamaño del texto, permite especificar
el nombre de la fuente de caracteres que se van a utilizar.
Para especificar el nombre de la fuente que se desea utilizar, se emplea el atributo
FACE, del siguiente modo:
<FONT FACE= “Nombre de la fuente”>
Por ejemplo, si deseamos que nuestro texto aparezca con el tipo de letra Arial, se
deberá escribir:
<FONT FACE= “Arial”>
Texto
</FONT>
Podemos combinar los atributos FACE y SIZE. Si por ejemplo, deseamos mostrar
un texto con fuente Courier New y tamaño grande, se deberá escribir:
<FONT FACE= “Courier New” SIZE = 5>
Texto
</FONT>
Color de fuente
Además de cambiar el tamaño de la fuente, la etiqueta <FONT> nos permite
especificar el color con el que serán mostradas las letras, del siguiente modo:
<FONT COLOR=color> texto </FONT>
Donde color es el nombre del color (en inglés) que queremos aplicar. Por ejemplo:
<FONT COLOR=red> rojo </FONT>
<FONT COLOR=blue> azúl </FONT>
<FONT COLOR=green> verde </FONT>
COLOR NOMBRE
Blanco nieve Snow
Blanco White
Negro Black
Gris oscuro DarkGrey
Gris Gray
Gris claro LightGray
Color de fondo de página y color del texto en toda la página
A la etiqueta BODY se le pueden añadir parámetros que permiten definir el color
que tendrá el fondo de la página o el color que tendrá por defecto el texto. Estos
parámetros son los siguientes:
BODY BGCOLOR = color>. Cambia el color de fondo de una página. Si no se
indica nada en BODY, el color de una página es blanco.
BODY TEXT = color>.Cambia el color del texto de toda la página, excepto en
los casos en los que se utilice <FONT COLOR…>.
ASI VA QUEDANDO NUESTRO ESQUEMA DE PÁGINA
<HTML>
<HEAD>
<TITLE> Ejemplos de colores </TITLE>
</HEAD>
<BODY BGCOLOR = black TEXT =red>
<H1>BIENVENIDOS</H1>
Azul marino NavyBlue
Azul Blue
Turquesa Turquoise
Cyan Cyan
Verde claro LightGreen
Verde Green
Amarillo Yellow
Oro Gold
Beige Beige
Naranja Orange
Rojo Red
Rosa pink
<P><FONT COLOR=red SIZE = 4>
Bienvenidos a mi página web </FONT></P>
<FONT FACE= "Courier New" SIZE = 2>
En el capítulo 2 has aprendido a diseñar páginas HTML muy sencillas.
También aprendiste que HTML se basa en el ...
</FONT></P>
</BODY>
</HTML>
Inserción de líneas de separación
Otra forma visual de separar los párrafos es mediante el uso de líneas de
separación, las cuales van de extremo a extremo del navegador.
Para mostrar una línea de separación en su página se utiliza la etiqueta <HR> y
no tiene etiqueta de terminación.
Atributos:
ALIGN: Indica la alineación en la que será mostrada la línea en la pantalla del
navegador. (CENTER, LEFT, RIGHT).
SIZE = #:Indica la altura en puntos (pixeles) que tendrá la línea. Por ejemplo:
<HR SIZE = 4> Muestra una línea de 4 pixeles de alto
WIDHT = #: Indica la anchura de la línea, pudiéndola identificar en píxeles o en
tanto por ciento del ancho de la página (en este caso será necesario añadir el
símbolo %). Por ejemplo:
<HR WIDHT = 120> Muestra una línea que tiene 120 píxeles de ancho
<HR WIDHT = 60%> Muestra una línea que ocupa el 60% del ancho de la pantalla
Inserción de imágenes con IMG
Existen varias formas de insertar imágenes dentro de una página. Sin embargo, el
método más utilizado por los diseñadores de páginas es por medio de la etiqueta
<IMG> mediante la siguiente estructura básica:
<IMG SRC=URL>
o bien,
<IMG SRC=URI>
Su sintaxis es la siguiente:
<IMG SRC=”archivo de imagen” ALT= “descripción de la imagen”>
La forma más sencilla de desplazar una imagen dentro de la página es utilizando
las etiquetas <P> y </P> y los caracteres de espaciado .
Para crear un fondo de página a partir de una imagen se utiliza el atributo
BACKGROUND en lugar del atributo BGCOLOR, asociándole al mismo una URI o
URL que referencie un archivo gráfico BMP, JPG/JPEG, GIF o PNG.
Apariencia final de la imagen: bordes y tamaño Existen una serie de atributos asociados a la etiqueta IMG que permiten definir
tanto el tamaño de la imagen asociada como el grosor del borde, la existencia de
éste o la separación existente entre varias imágenes contiguas:
HEIGHT: Indica el alto de la imagen en píxeles. Por lo general éste deberá ser
un valor igual o superior al alto real de la imagen. También puede indicarse un
valor porcentual con respecto al alto de la página mostrada. En este caso el valor
numérico deberá ir seguido del carácter %.
WIDTH: indica el ancho de la imagen en píxeles. Por lo general éste deberá ser
un valor igual o superior al ancho real de la imagen. También puede indicarse un
valor porcentual con respecto al ancho de la página mostrada. En este caso el
valor numérico deberá ir seguido del carácter %.
HSPACE: indica la separación horizontal en píxeles, a la izquierda y a la
derecha de la imagen con respecto a los elementos que la rodean. Por defecto su
valor es un número entero muy pequeño o igual a cero, dependiendo del
navegador que se utilice.
VSPACE: indica la separación vertical en píxeles, por encima o por debajo de la
imagen con respecto a los elementos que la rodean. Por defecto su valor es un
número entero muy pequeño o igual a cero, dependiendo del navegador que se
utilice.
Creación de hiperenlaces Los hiperenlaces en HTML están definidos básicamente por el uso de la etiqueta
<A> junto con determinados parámetros adicionales.
Los enlaces realizados con la etiqueta <A> se pueden agrupar en varios tipos o
grupos, en función de la localización del objetivo o target del mismo:
to HTML
Definición básica de tablas en HTML
Para definir una tabla se utilizan las etiquetas <TABLE> y </TABLE>. Estas dos
etiquetas delimitan el principio y el fin de la tabla, y todo lo que se escriba entre
ellas pertenecerá a ella.
Una vez fijado su ámbito, en su interior, deberá utilizar las etiquetas <TR> y </TR>
para delimitar sus filas. Estas dos etiquetas equivalen a <P> y </P> en los
párrafos, de modo que, hasta que no se use <TR> no pasará a la siguiente fila de
la tabla.
Dentro de cada fila deberá delimitar el principio y el final de cada celda con las
etiquetas <TD> y </TD>. Lo que se escriba entre esas dos etiquetas es lo que se
va a mostrar dentro de la celda. Cuando se escriba <TD> pasará a la siguiente
celda de la tabla, es decir, la que está inmediatamente a la derecha de la que
acaba de crear.
La etiqueta <BORDER> nos permite, además, indicar el grosor que va a tener la línea que
delimite a la tabla (no la de las celdas). Para ello, deberá poner la siguiente estructura: <TABLE BORDER = n>
Fusión de celdas
Cuando se desea generar celdas que abarquen otras celdas (como en el caso
anterior, la celda “Países Europeos” y la celda “Países Americanos”, que engloban
a tres celdas), puede utilizar las siguientes etiquetas que pertenecen a <TD> y
</TD>:
ROWSPAN = n
Que indica que esa celda se extiende en n filas
COLSPAN = n
Que indica que esa celda se extiende en n columnas.
Así, por ejemplo, si escribe <TD COLSPAN = 2>, quiere decir que la celda actual
se extiende a lo ancho de dos celdas. Algo parecido ocurre con ROWSPAN, si
escribe <TD ROWSPAN = 3>, la celda ocupará el alto de tres celdas normales.
ASI QUEDA NUESTRA PAGINA WEB
