Intro paginasweb

INTRODUCCIÓN
El lenguaje HTML (HyperText Markup
Language), 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 siguiente ejemplo sencillo, contiene lo
necesario para crear una página que
desplegará en el explorador (browser o
navegador), la frase “Bienvenido ONCE al
curso de HTML”:

<HTML>
<HEAD>
<TITLE>Primer Página</TITLE>
</HEAD>
<BODY>
Bienvenido al curso de HTML
</BODY>
</HTML>

Las palabras encerradas entre los símbolos
menor y mayor que (< >), son las etiquetas
de HTML y las frases dentro de éstas,
constituyen la información que realmente
verá el usuario.

 El cuerpo contiene toda la información de la
página que será desplegada por el browser
al accederla, mientras que el encabezado
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.

 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.

ETIQUETAS DE TEXTO
Las etiquetas de texto como su nombre lo
indica, permiten cambiar los atributos y la
manera como el texto se verá dentro de la
página. Se puede afectar todo un párrafo,
una línea, una palabra o caracteres
individuales simplemente
encerrándolos dentro de las etiquetas
apropiadas.

ETIQUETA <HX> </HX>
Esta etiqueta, conocida como etiqueta de
encabezado (heading), es utilizada con
frecuencia para escribir títulos y subtítulos,
dado que permite mostrar texto en negrillas
con seis tamaños diferentes, dependiendo
del valor asignado al atributo X.

<HTML>
<HEAD>
<TITLE> Encabezados</TITLE>
</HEAD>
<BODY>
<H1>Este texto tiene el tamaño que le da la etiqueta H1</H1>
</BODY>
</HTML>

La etiqueta <HX> tiene otro atributo que
permite controlar la alineación del texto.
Éste se puede alinear al centro
(align="center"), a la derecha
(align="right"), a la izquierda, que es la
alineación que toma por defecto cuando el
atributo align es omitido, o justificado
(align="justify").

 <H1 align=”center”>Texto </H1>
 <H1 align=”right”>Texto </H1>

ETIQUETA <FONT> </FONT>
 Esta etiqueta permite controlar tres atributos
del texto que se encuentra encerrado entre
ellas: su tamaño (SIZE), su color (COLOR)
y el tipo de fuente (FACE). Por ejemplo,
las siguientes líneas escritas dentro del
cuerpo de un nuevo archivo, mostrarán
texto con cuatro tamaños de fuente
diferentes:

Texto con fuente tamaño normal
<FONT SIZE="+1">Texto con fuente tamaño +
1</FONT>
<FONT SIZE="+2">Texto con fuente tamaño +
2</FONT>
<FONT SIZE="-1">Texto con fuente tamaño -
1</FONT>
<FONT SIZE="-2">Texto con fuente tamaño -
2</FONT>

 La sintaxis completa de la etiqueta <FONT>
es la siguiente:
<FONT SIZE="X" COLOR="color"
FACE="Nombre de la
fuente">Texto</FONT>
 Donde X corresponde como ya se vió, al
tamaño de la fuente que admite valores
positivos y negativos.

 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”.

 Como ejemplo, se propone escribir las siguientes
líneas dentro del cuerpo de una nueva página:
<FONT SIZE="+1" COLOR="maroon" FACE="Comic
Sans MS">TEXTO</FONT>
<FONT SIZE="+2" COLOR="#0000ff"
FACE="Tahoma">TEXTO</FONT>
<FONT SIZE="+2" COLOR="Purple"
FACE="Stencil">TEXTO</FONT>
<FONT SIZE="+2" COLOR="#ff00ff"
FACE="Arial">TEXTO</FONT>

ETIQUETA <BR> Y <P>
La etiqueta <BR> permite forzar un salto de
línea dentro de un texto. Observe que esta
etiqueta no se cierra con </BR>, razón por la
que se le conoce como etiqueta abierta. <P>
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, si por el contrario se cierra con </P>
permite alinear el nuevo párrafo a la derecha,
en el centro, a la izquierda o justificado,
dependiendo del valor asignado al parámetro
ALIGN. A continuación se muestran algunos
ejemplos:

ETIQUETA <HR >
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:

 Línea centrada, de tamaño 10 puntos y ocupando el
30% de la página
<HR ALIGN=”center” SIZE= ”10” WIDTH= ”30%”>
 Línea alineada a la izquierda, de tamaño 5 puntos y
ocupando la mitad de la página
<HR ALIGN=”left” SIZE= ”5” WIDTH= ”50%”>
 Línea alineada a la derecha, de tamaño 20 puntos y
ocupando la mitad de la página
<HR ALIGN=”right” SIZE= ”20” WIDTH= ”50%”>
 Línea sencilla que ocupará el 90% de la página
<HR>

OTRAS ETIQUETAS PARA TEXTO
 La siguiente tabla muestra otras etiquetas
muy útiles a la hora de trabajar con texto y
los efectos que se conseguirán:

FONDOS
 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 siguiente ejemplo desplegará una página
con fondo negro (black)

IMAGEN DE FONDO
 Cuando el fondo es una imagen, esta debe estar en
la misma carpeta que el archivo html. La sintaxis es
 <HTML>
 <HEAD>
 <TITLE>fondo</TITLE>
 </HEAD>
 <BODY background=”nombreimagen.jpg”>
 Aquí hay una imagen de fondo
 </BODY>
 </HTML>

 <HTML>
 <HEAD>
 <TITLE>Cuerpo</TITLE>
 </HEAD>
 <BODY BGCOLOR=”green”>
 <H3>ESTA PÁGINA TENDRÁ FONDO
VERDE</H3>
 </BODY>
 </HTML>

LISTAS
 En ocasiones es necesario presentar
información de manera ordenada mediante
listas con viñetas o listas numeradas. Con
HTML se pueden crear tres de estos tipos de
listados: listas ordenadas o numeradas,
listas con viñetas o listas de definición, cada
una de ellas con sus variaciones.

LISTA ORDENADA <OL>
<OL TYPE ="1" START ="4">
<LI>Dirección de Informática
<LI>Planeación
<LI>Vicepresidencia Financiera
<LI>Comunicaciones
</OL>
I

 En la etiqueta <OL>, el atributo TYPE ="1"
indica que la lista será Numérica (el número
entre comillas puede ser cualquier entero y el
resultado será el mismo), mientras que el
atributo START ="4" hace que el primer
elemento del listado esté precedido por el
número 4, el segundo por el número 5 y así
sucesivamente. Sí no se incluye ninguno de los
dos atributos anteriores, el explorador
desplegará la misma lista pero comenzando el
listado en 1.

<OL TYPE = "A" START ="1">
<LI>Dirección de Informática
<LI>Planeación
<LI>Vicepresidencia Financiera
<LI>Comunicaciones
</OL>
Esta etiqueta hace la lista ordenada pero con
parte LITERAL, es decir, a, b, c, ….

LISTA CON VIÑETAS <UL>
<UL TYPE = "circle">
<LI> Ítem 1
<LI> Ítem 2
<LI> Ítem 3
<LI> Ítem 4
</UL>
Las otras dos opciones de TYPE son square y
disc.

LISTA DE DEFINICIÓN <DL>
Esta etiqueta como su nombre lo indica,
permite desplegar listas de palabras con su
correspondiente definición. Se utiliza
típicamente en la construcción de glosarios.
Considere por ejemplo, la siguiente lista de
términos que definen las funciones de
algunas dependencias de la empresa:

PLANEACIÓN:
Encargada de ejecutar y revisar los planes de
inversión.
INFORMÁTICA:
Encargada de diseñar, implementar y ejecutar los
planes de desarrollo informático en la empresa.
RECURSOS HUMANOS:
Encargada de los asuntos relacionados con el
recurso humano.

El listado anterior se comienza y termina con
las etiquetas <DL> y </DL>. Cada uno de
los términos a definir se precede con la
etiqueta <DT>, mientras que a la definición
en sí, se le antepone la etiqueta <DD>:

<DL>
<DT>PLANEACIÓN:
<DD>Encargada de ejecutar y revisar los planes de
inversión.
<DT>INFORMÁTICA:
<DD>Encargada de diseñar, implementar y ejecutar los
planes de desarrollo informático
en la empresa.
<DT>RECURSOS HUMANOS.
<DD>Encargada de los asuntos relacionados con el recurso
humano.
</DL>

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.

 En la etiqueta <TABLE> 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 <TABLE> y </TABLE> permiten
controlar el número de filas y columnas,
además de otras características:

 <TR> Se utiliza para definir una
nueva fila.
 <TD> Permite agregar una celda o
columna dentro de una fila
 <TH> Es similar a <TD>, con la
diferencia de que el texto contenido
en ella será escrito en negrilla.

Lo anterior significa que una tabla
en HTML tendrá tantas filas como
etiquetas <TR> contenga y una
fila estará compuesta por un
número de celdas igual al de
etiquetas <TD> o <TH> que la
misma tenga.

 Las siguientes líneas ilustran el uso de estas etiquetas para crear una
tabla sencilla, compuesta por dos filas y dos columnas:
<TABLE BORDER=”1”>
<TR>
<TH>Primera Celda</TH>
<TH>Segunda Celda</TH>
</TR>
<TR>
<TD>Tercera Celda</TD>
<TD>Cuarta Celda</TD>
</TR>
</TABLE>

 Las etiquetas <TD> y <TH> tienen entre otros,
atributos que permiten controlar: el color del
fondo de la celda (BGCOLOR=”color”), la
alineación del texto o de la imagen dentro de
la celda (ALIGN=”alineación”), y que
funcionan de manera idéntica a los utilizados
con las etiquetas <H#>, <P> y <FONT>. Otro
de los atributos importante de estas dos
etiquetas, es el que permite indicar el número
de columnas o de filas que ocupará una celda
en particular.

 Suponga que se debe crear una tabla similar
a la siguiente:

 Observe que la tabla está compuesta por dos
filas y dos columnas, y que la celda del título
ocupa dos columnas. Cuando este es el caso,
es decir que una celda está distribuida en dos o
mas columnas o filas, se utiliza para su
definición el atributo COLSPAN=”X” o
ROWSPAN=”X” respectivamente. X
obviamente corresponde al número de
columnas o filas sobre las que se distribuirá la
celda.
Para crear la tabla que se muestra arriba, se debe
escribir:

<TR>
<TH COLSPAN=”2”>TÍTULO DE LA
TABLA</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
</TR>
</TABLE>

 Y si lo que se desea es crear una tabla como
la siguiente:

 Se debe escribir:
<TR>
<TH ROWSPAN=”2”>TÍTULO DE LA TABLA</TH>
<TD>Celda 1</TD>
</TR>
<TR>
<TD>Celda 2</TD>
</TR>
</TABLE>

IMAGENES
 Las páginas Web además de mostrar texto, son
capaces de desplegar imágenes que han de ser
creadas en cualquiera de los formatos
aceptados: GIF, JPG o PNG.
 Para insertar imágenes lo único que se necesita
conocer es la ruta y el nombre del archivo que
la contiene. La etiqueta <IMG> junto con su
atributo SRC ="ruta" permiten mostrar una
imagen:
 <IMG SRC ="logo.gif">

 La etiqueta <IMG> cuenta además de SRC
con otros atributos que controlan la
manera como se desplegarán las imágenes:
1. ALT ="Texto alternativo" Permite definir
un texto que aparecerá en caso de que la
imagen por alguna razón no pueda ser
mostrada, o cuando se desplaza elpuntero
del ratón sobre la imagen ya desplegada.

2. HEIGHT = ”XX” y WIDTH = ”XX” Medida
en píxeles del alto y ancho de la imagen.
Con ellos podemos controlar además el
tamaño original de una imagen.
3. BORDER ="X" Dibuja un borde o marco
negro de x puntos alrededor de la
imagen. Si se omite este atributo,
simplemente no se dibujará ningún borde.

4. ALIGN = ”Alineación de texto” Permite
especificar la alineación respecto de la
imagen de un texto que se escriba
inmediatamente después de la etiqueta
<IMG>. El texto en mención, puede
alinearse arriba, utilizando TOP como valor;
en el centro de la imagen, si utilizamos
MIDDLE y en la parte inferior de la misma, si
el valor para ALIGN es BOTTOM. Además, el
atributo ALIGN puede recibir el valor LEFT,
con lo que la imagen se colocará a la
izquierda del texto, o RIGHT, caso en el que
la imagen aparecerá a la derecha.

EJEMPLO
 Para comprender mejor el comportamiento
de las imágenes, copie en una carpeta
denominada Imágenes un archivo que sea
una foto o imagen y luego escriba en un
archivo HTML las líneas que a continuación
se muestran, teniendo en cuenta que
XXXXXX representa el nombre de su
archivo:

<IMG SRC =“XXXXXXX.gif" ALT ="Logo tamaño 180 x 180
píxeles" WIDTH = 180 ALIGN = “top” BORDER=”5”>Este texto
alineado arriba de la imagen, con borde cinco.
<P>
<IMG SRC ="XXXXXXX.gif" ALT =" Logo tamaño original"
ALIGN = “middle” BORDER=”3”>Este Texto alineado en la mitad
de la imagen con borde 3 y la muestra en su tamaño original.
<P>
<IMG SRC ="XXXXXXX.gif" ALT =" Logo tamaño 60 x 60
píxeles" HEIGHT = 80 ALIGN= “Bottom” >Texto alineado abajo de
la
Imagen sin borde
<P>
<IMG SRC ="Noexiste.gif" ALT ="No existe la imagen" > Texto

ENLACES
 Para crear hipervínculos o enlaces se utiliza
la etiqueta <A> acompañada del atributo
HREF cuyo valor en comillas dobles será el
nombre de la pagina web a la cual se
accederá al darle click.
 La sintaxis es la siguiente:
<A HREF=“pagina.html”>Click aquí</A>

ENLACES DENTRO DE LA MISMA PAGINA WEB
 Para crear enlaces dentro de la misma
pagina web
 La sintaxis es la siguiente:
<A name=“nombre”>se muestra el orden de
los equipos a continuacion</A> este es el
lugar al que saltará el navegador cuando
demos click al enlace.
Y este es el enlace
<A Href=“#nombre”>Tabla de posiciones </a>

1 - QUE SON LAS HOJAS DE
ESTILO (CSS)?
CSS son las siglas de Cascade Style
Sheet que traducido significa hojas de
estilo en cascada.
Las hojas de estilo es una tecnología que
nos permite controlar la apariencia de una
página web. En un principio, los sitios web
se concentraban más en su contenido que
en su presentación.

el HTML y la Web en general.
Con CSS podemos especificar estilos
como el tamaño, fuentes, color, espaciado
entre textos y recuadros así como el lugar
donde disponer texto e imágenes en la
página.
Veremos que podemos asociar las reglas
de estilo a las marcas HTML de tres
maneras: directamente a la marca, en el
head de la página o agrupar las reglas de
estilo en un archivo independiente con
extensión *.css

En este periodo veremos las tres
metodologías, pero pondremos énfasis en
la tercera forma, que es la más adecuada
para separar el contenido de la página y la
forma como se debe representar la misma
por medio de la hoja de estilo.
La metodología a trabajar brinda un
concepto teórico corto, luego un problema
resuelto que invito a ejecutar, modificar y
jugar con el mismo. Por último, y lo más
importante, un ejercicio propuesto que nos
permitirá saber si podemos aplicar el
concepto.

EJEMPLO
<!DOCTYPE html>
<html>
<head>
<title>Prueba de hojas de estilo</title>
</head>
<body>
<p style="color:#000000;background-
color:yellow;font-family:verdana;font-
size:25px;text-align:center">Esto es un
ejemplo</p>
</body>
</html>

2 - DEFINICIÓN DE ESTILOS A NIVEL
DE ELEMENTO HTML.
Es la forma más fácil pero menos recomendada
para aplicación de un estilo a un elemento
HTML. Se define en la propiedad style los estilos
a definir para dicho elemento.
Es común a veces definir estilos directamente
en los elementos HTML cuando estamos
probando diseños de elementos particulares de
la página y posteriormente trasladar el estilo
creado a una hoja de estilos.
La sintaxis para definir un estilo a un elemento
HTML es la siguiente:

EJEMPLO
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:#ff0000;background-
color:#ffff00"> Este mensaje es de color rojo
sobre fondo amarillo. </h1>
</body>
</html>

Veremos más adelante que hay muchas
propiedades en CSS. En este primer ejemplo
inicializamos las propiedades color (define el
color del texto) y background-color (define el
color de fondo del texto).
Cada vez que inicializamos una propiedad
debemos separarla de la siguiente por punto y
coma.
Cuando definimos estilos directamente en el
elemento HTML, tenemos que tener en cuenta
que el estilo se aplica únicamente a dicho
elemento donde inicializamos la propiedad style,
es decir, si tenemos dos secciones h1,
deberemos definir la propiedad style para cada
elemento:

color:#ffff00"> Primer título </h1>
color:#ffff00"> Segundo título </h1>
Como podemos observar, más allá que los dos
estilos son exactamente iguales, estamos
obligados a definirlos para cada elemento
HTML.

Intro paginasweb

Más contenido relacionado

La actualidad más candente

Similar a Intro paginasweb

Más de MUNICIPIO DE ITAGUI

Último

Intro paginasweb