¡Descarga Diseño y programación y más Apuntes en PDF de Diseño de Redes solo en Docsity!
El lenguaje HTML (HyperText Markup Languaje), es el formato estándar que se utiliza para crear e
interpretar documentos de texto e imágenes, conocidos popularmente como páginas web. Estos
documentos, que en realidad son archivos de texto plano, están compuestos básicamente por la
información que el usuario ve en la pantalla cuando accede a una página, y códigos (tags o
etiquetas), transparentes para el usuario, que son interpretados por el programa del navegador y que
controlan la manera como la información es mostrada en la pantalla.
El objeto del presente módulo es aprender a utilizar de manera correcta, algunas de esas etiquetas,
con el fin de crear y modificar páginas mediante el uso de cualquier editor de texto.
La estructura básica de una página web en código HTML es la siguiente:
Las palabras encerradas entre los símbolos menor y mayor que (< >), son las etiquetas de HTML y
las palabras dentro de éstas, constituyen la información que realmente verá el usuario o la acción que
se aplicará a un párrafo.
Todo archivo HTML comienza siempre con la etiqueta y finaliza con la etiqueta .
La estructura de una página está compuesta básicamente por dos secciones:
El encabezado (HEAD), y el cuerpo (BODY), delimitados por las etiquetas , ,
y respectivamente.
El cuerpo y contiene toda la información de la página que será desplegada por
el browser o n a veg ad o r al accederla, mientras que el encabezado y cuyo
contenido generalmente no es visible, se utiliza principalmente para colocar en él, además del título de
la página, scripts y otras etiquetas especiales en las que se consignan datos relacionados con el autor,
palabras claves sobre el contenido, descripción, etc. también se colocan las etiquetas que conforman el
código javascript.
En un documento HTML se pueden incluir un sinnúmero de etiquetas, que controlan la manera como la
información será presentada por el explorador. Existen etiquetas para formatear la presentación del
texto y las imágenes, otras indican al sistema cómo responder a eventos generados por el usuario,
tales como, hacer clic con el ratón o desplazarlo sobre una imagen, texto o ciertas áreas
sensibles. También hay etiquetas para organizar la información dentro tablas, dividir la pantalla
en secciones o ventanas independientes, etc. Una de las más importantes es la etiqueta que le
permite al usuario “navegar” entre documentos, simplemente dando clic sobre los denominados
“vínculos” (links), sin importar dónde residen las páginas a las cuales apuntan.
El explorador, también conocido como navegador o browser, es el software que permite acceder,
interpretar y visualizar documentos HTML ubicados en cualquier sitio cuya dirección es conocida. El
navegador interpreta las etiquetas y muestra el documento en pantalla. La principal ventaja del
formato HTML es su portabilidad. Es decir, los exploradores son capaces de interpretar y mostrar la
información contenida en una página web, independientemente de la plataforma en que se usen (IBM,
MAC, UNIX, LINUX, WINDOWS, etc.).
QUE SE NECESITA PARA DISEÑAR PÁGINAS WEB
Dado que las páginas Web son simples documentos de texto plano, lo único que se requiere para su
creación es un editor de texto, en el material de esta semana encuentran el Editor de Texto que vamos a
utilizar en el curso, junto con un manual de instalación.
Aunque existen muchas y potentes herramientas para la creación y edición gráfica de documentos
HTML, el Block de Notas (NotePad), o cualquier otro editor de texto sirven bien para estos
propósitos. Mientras que para visualizar documentos HTML, debemos disponer de un explorador como
Mozilla Firefox ®, Google Chrome o Microsoft Internet Explorer ®, que son los más populares
en el mercado.
COMO USAR EL EDITOR HTML
Para crear ésta y todas las páginas propuestas, se utilizará el EDITOR HTML que ya debe haber
instalado en su computador también si lo desea puede usar el Block de Notas de Microsoft
(NotePad).
LA PRIMERA PÁGINA
Usando el código que ya trae el editor vamos a crear nuestra primera página web, para ello vamos a escribir el siguiente texto dentro de la etiqueta ..., recuerde que en esta etiqueta es donde va el contenido de las páginas web.
El atributo color puede ser un valor hexadecimal o el nombre en inglés de un color específico.
Aunque en teoría se pueden mostrar millones de colores, existen 16 de ellos que componen la
denominada “Paleta Segura”. El uso de cualquiera de esos colores, garantiza que las páginas
podrán ser vistas tal como fueron diseñadas, aun cuando se utilice para su visualización
un monitor con la configuración más pobre. La tabla siguiente muestra los valores
hexadecimales (códigos) y nombres de los 16 colores mencionados.
ETIQUETA
HTML sólo reconoce y muestra un espacio en blanco entre palabras, aunque se hayan escrito dos o
más. Tampoco reconocerá tabuladores o retornos de carro. Es decir, sí dentro del cuerpo de un
archivo HTML.
ETIQUETA
...
Es otra etiqueta que puede utilizarse abierta o cerrada. Si se usa de la primera forma, iniciará un
nuevo párrafo dejando una línea en blanco.
ETIQUETA
Esta etiqueta “abierta”, dibuja una línea horizontal (Horizontal Rule), con alineación, tamaño y ancho
variables. Se utiliza con frecuencia para separar secciones de contenido. Su sintaxis se ilustra en las
siguientes líneas.
El parámetro Align como vimos anteriormente sirve para alinear en este caso la barra horizontal, ya sea a la derecha
o al centro, si no se usa queda por defecto a la izquierda.
El parámetro Size indica el tamaño aquí se pone el número pero sin el signo + va solo.
El parámetro Width indica el ancho de la barra indicado en porcentaje.
COMO ANIDAR ETIQUETAS
En HTML podemos aplicas varias etiquetas a un mismo párrafo, texto o letra, pero se deben anidar
correctamente, es decir debemos abrir y cerrar las etiquetas de forma ordenada, por ejemplo tener en
cuenta que la primera etiqueta que se abre es la última que debe cerrarse.
LA ETIQUETA
Hasta ahora se ha trabajado con páginas cuyos colores son: blanco para el fondo y negro para el texto
escrito en ellas. Estos son los colores que HTML toma por defecto. El uso adecuado de la etiqueta
, que por supuesto tiene atributos, permite entre otras cosas cambiar o establecer: el
color del texto, un color o una imagen de fondo y los colores de los enlaces que tendrá la página. La
siguiente es la sintaxis completa de esta etiqueta:
...
En el parámetro BGCOLOR se escribe el color del fondo que vamos a aplicarle a la página, estos colores
pueden ser escritos en su correspondiente palabra en ingles o usando su respectivo código, (recordar
colores de la tabla paleta segura). De igual forma se aplica el color de texto en el parámetro TEXT.
El parámetro BACKGROUND con el texto ruta_imagen se refiere al nombre, o mejor la ubicación del
archivo de una imagen que se quiere aparezca como fondo de la página, lógicamente debemos tener
previamente guardada la imagen en la carpeta o directorio en el que la necesitemos, es de anotar que
si se usa bgcolor no usar background o viceversa, text si se puede usar en ambos casos.
ETIQUETAS PARA TABLAS
Una tabla está compuesta por columnas y filas que conforman un conjunto de celdas que permiten mostrar
información de manera organizada. En una celda se puede incluir indistintamente texto, imágenes o cualquier otro
elemento soportado por HTML.
Para crear tablas en HTML, se utiliza la etiqueta cuyos atributos o parámetros principales son:
WIDTH ="95%" Ancho de la tabla con respecto al tamaño de la página. En este caso la tabla ocupará el 95%; o
WIDTH ="600", con lo que la tabla tendrá un ancho de 600 píxeles.
BORDER ="1" Ancho en puntos de los bordes exteriores de la tabla.
CELLSPACING ="0" Ancho en puntos entre los bordes de las celdas
CELLPADDING ="4" Espacio en puntos, que separa el borde de la celda de su contenido.
BGCOLOR ="#0000ff" Color del fondo de la tabla. En el ejemplo azul.
BORDERCOLOR="#0000ff" Color del borde de la tabla. En el ejemplo azul.
En la etiqueta se definen las características principales de la tabla, pero no se dice de cuántas filas y
columnas estará compuesta ni cuál será su contenido.
En realidad existen tres etiquetas adicionales, que colocadas adecuadamente
dentro de ... permiten controlar el número de filas y columnas, además de otras
características:
Se utiliza para definir una nueva fila.
Permite agregar una celda o columna dentro de una fila
