Programación de Aplicaciones Web
GUÍA PRACTICA DE LOS PRIMEROS PASOS EN HTML Y
CSS
HTML
Estructura básica de un documento HTML
HTML
Color, tamaño y tipo de letra
Tamaño del texto
<font size =”3”> Texto </size>
<!DOCTYPE html>
Color del Texto
<font color=”color”> Texto </font>
Tipo de Letra
<font face=”Comic Sans MS”>
Color de Fondo del Documento
<body bgcolor= "#A9DFBF">
Ing. Pablo Morales P. Pág. 1
Color de Texto de todo el documento
<body text="red">
Red – green- blue o colores Hexadecimales
Blanco FFFFFF
Negro 000000
LISTAS
Las listas en HTML proporcional una forma de clasificar la información.
Lista numerada. Elementos de una lista.
<ol> ... </ol>
Ejemplo: <ol>
<li> uno
<li> ... </li> (No es necesario cerrar la etiqueta)
<li> dos
<li> tres
</ol>
Lista no numerada.
<ul> ... </ul>
<ul>
<li> uno
<li> ... </li> (No es necesario cerrar la etiqueta)
<li> dos
<li> tres
</ul>
ENLACES
Sirven para acceder desde una página a otra página o a otro recurso disponible
Enlace absoluto a una página
<a href="[Link] del enlace</a>
Ing. Pablo Morales P. Pág. 2
Enlace relativo a una página
<a href="[Link]">texto del enlace</a>
Marcadores
(enlace interno) dentro de una página
<a name="marcador"> ... </a>
Ejemplo:
<a name="inicio"> </a>
Enlace a un marcador de la misma página
<a href="#marcador">texto del enlace</a>
Ejemplo:
ir a <a href="#inicio">Ir a inicio de la página</a>
Enlace a un marcador de otra página (que puede darse con dirección absoluta o
relativa)
<a href="[Link]#marcador">texto del enlace</a>
Enlace a otra página (absoluta o relativa, con o sin marcador) que se abra en otra
ventana.
<a href="[Link]" target="_blank">texto del enlace</a>
Ejemplo:
<a href="https:[Link]" target="blank"> Ir a Google </a>
IMÁGENES
<img src="[Link]">
Imágenes con texto Alternativo:
<img src="ruta_imagen" alt="Texto Alternativo">
Ejemplo:
Ing. Pablo Morales P. Pág. 3
<img src="[Link]" alt="Imágen_de_Pelileo">
Tamaño de imágenes
<img src="ruta_imagen" width="111px" height="222px" alt="Texto Alternativo">
Ejemplo:
<img src=" [Link] " width="111px" height="222px" alt=" Imagen de Empresa">
Imagen como fondo de una página Web
<body background="[Link]">
Ejemplo:
<body background=" [Link] ">
Alineación y dimensionado de imágenes
(Top, middle, buttom, align, clear, width, height)
La alineación de las imágenes fue, en su día, el primer golpe de efecto del
programa Navigator de Netscape. Permitió alinear una imagen a la izquierda o a
la derecha de la página y hacer que el texto la rodee completamente,
consiguiéndose así una apariencia similar a la de una revista.
Es el caso de este párrafo con respecto a la imagen de la derecha. Obsérvese
cómo las líneas, cuando rebasan su parte inferior, continúan normalmente hasta el
margen derecho de la página. De manera análoga, se puede alinear la imagen a
la izquierda, comportándose el texto de una forma equivalente.
Esto se consigue con las extensiones de la etiqueta ALIGN, (que ya se vio en el
capítulo 9 con los comandos TOP, MIDDLE y BOTTOM).
<BR CLEAR=”LEFT”> Busca el primer margen libre (clear) a la izquierda.
<BR CLEAR=”RIGHT”> Busca el primer margen libre a la derecha.
<BR CLEAR=”ALL”> Busca el primer margen libre a ambos lados.
Ing. Pablo Morales P. Pág. 4
TABLAS
Etiqueta: <table>
<tr> : (representando a las filas contenedoras de las celdas)
<td>: (representando a las celdas)
Ejemplo:
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Para agregar un título a la tabla
<caption> Tabla 1 </caption>
ATRIBUTOS DE LAS TABLAS
Borde:
<table border="2">
Tamaño
width="550"
Color
bgcolor=FFCECB
Alineación
align=center
Borde
border="1"
Ejemplo: <table width="200" bgcolor=FFCECB align="center" border="1">
Ejemplo:
Ing. Pablo Morales P. Pág. 5
<table class="egt">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Tablas link: [Link]
Estilos HTML
<div style="font-size: 16pt; color: red">
</div>
Ing. Pablo Morales P. Pág. 6
Estructura de una página HTML
Diseño 1
Diseño 2 y 3
Cada página puede tener un contenido diferente:
Ing. Pablo Morales P. Pág. 7
Etiquetas para agrupar o estructurar:
CSS (Estilos)
Son hojas de estilo en cascada, que permen darle al código HTML un diseño
único y especial en pocas líneas. Por tanto CSS se encarga de:
Tamaños y Tipos de Fuente
Colores
Espacios
Márgenes
Adaptar diseños a distintos dispositivos
Animaciones
Ejemplo:
Programación en cascada:
Ing. Pablo Morales P. Pág. 8
Anatomía CSS
Inclusión global del estilo en un documento HTML
Se hace poniendo un bloque de instrucciones dentro de las etiquetas <STYLE>
</STYLE>, que deberá estar colocado dentro de la cabecera del documento,
después del título, entre las etiquetas </TITLE> y </HEAD> (de igual manera que se
hace con los scripts de Javascript).
Esta etiqueta <STYLE> tiene un atributo, TYPE, que especifica el tipo de medio en
que va a ser publicado en Internet, en nuestro caso será "text/css" (que permitirá a
los navegadores que no soporten este tipo el ignorar la hoja de estilo). Es decir, la
etiqueta queda de esta manera: <STYLE TYPE="text/css">
Por tanto, la estructura será la siguiente:
<html>
<head>
<title>[Título] </title>
<style type="text/css">
[bloque de instruciones de estilo]
</style>
</head>
<body>
[conjunto de todas las etiquetas que componen la página]
</body>
</html>
Veamos ahora con un ejemplo, cómo se escribe el bloque de instrucciones del
estilo, incluido dentro de la etiqueta <style> (más tarde se verán con detalle cada
uno de los atributos):
<style type="text/css">
body {background: yellow ;font-size: 10pt; font-family: Arial; margin-left: 0.5in;
margin-right: 0.5in}
h1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
h2 {font-size: 12pt;font-weight: bold; color: red}
Ing. Pablo Morales P. Pág. 9
div {background: URL([Link])}
</style>
CSS EN DOCUMENTO EXTERNO
Nombre del archive: [Link]:
body {background: yellow ;font-size: 10pt; font-family: Arial; margin-left: 0.5in;
margin-right: 0.5in}
h1 {background: blue; font-size: 14pt;font-weight: bold; color: red}
h2 {font-size: 12pt;font-weight: bold; color: red}
div {background: URL([Link])}
Obsérvese que no tiene ninguna etiqueta, pues no es un documento normal HTML,
sino que es un fichero de texto que sólo contiene el bloque de definición del estilo.
Se guarda con el nombre que se quiera, pero tiene que tener necesariamente la
extensión .css Supongamos que lo guardamos con el nombre de [Link]
En todas las páginas que queremos que tengan este estilo concreto, solamente
deberemos de añadir (en el mismo sitio de la cabecera que para el caso anterior,
es decir entre </title> y </head>, la siguiente etiqueta:
<link rel=stylesheet href="[Link]" type="text/css">
Atributos de las hojas de estilo.
A continuación, se muestra en una tabla el resumen de los atributos que se pueden
incluir
en las hojas de estilo:
Ing. Pablo Morales P. Pág. 10
Ing. Pablo Morales P. Pág. 11
Explicación de los atributos
font-size
El atributo font-size establece el tamaño del texto en puntos (pt), pulgadas (in),
centímetros (cm), o pixels (px). Ejemplos:
{font-size: 12pt}
{font-size: 1in}
{font-size: 5cm}
{font-size: 24px}
font-family
el atributo font-family establece la fuente del texto. Se puede especificar una
única
fuente, como por ejemplo:
{font-family: Arial}
u otras fuentes alternativas, separadas por una coma, como, por ejemplo:
{font-family: Arial, Helvetica}
En el ejemplo anterior, nos aseguramos que los sistemas que no soporten la fuente
Arial, utilicen la fuente Helvetica. Es muy aconsejable especificar, como útimo
recurso, un
nombre genérico de familia de fuentes. Ejemplo:
{font-family: Arial, Helvetica, sans-serif}
Estos nombres genéricos de familia de fuentes (serif, sans-serif, cursive, fantasy, o
monospace) tienen la ventaja de que son representados como las fuentes que
tenga instaladas el usuario.
Si se hace referencia a una fuente cuyo nombre consiste en varias palabras
(separadas
por espacios en blanco), hay que englobarla entre comillas. Ejemplo:
{font-family: "Courier New"}
font-weight
El atributo font-weight establece el espesor de la fuente:
Ing. Pablo Morales P. Pág. 12
{font-weight: medium}
{font-weight: bold}
Los valores aceptados (extra-light, light, demi-light, medium, demi-bold, bold, y
extrabold)
dependen en las fuentes que tenga instaladas el usuario. (Por ejemplo, el sistema
del usuario puede que sólo permita medium y bold para una determinada
fuente).
font-style
El atributo font-style establece la fuente como cursiva:
{font-style: italic}
En el borrador de la W3C se contemplan además otros posibles estilos (minúsculas,
oblicuas, etc.)
line-height
Este atributo establece la separación entre líneas, que se puede expresar en
puntos
(pt), pulgadas (in), centÌmetros (cm), pixels (px) o porcentaje (%). Ejemplo:
{line-height: 20pt}
También se puede expresar como un porcentaje del valor por defecto:
{line-height: 150%}
En el Explorer 3.0, el espaciado se añade antes de las líneas, no después de ellas.
Además, este atributo se comporta de forma impredecible con texto que usa
diferentes
tamaños de texto en la misma línea.
color
Este atributo establece el color del texto de acuerdo con su valor hexadecimal
(véase
el Cap. 7), o usando los nombres de colores:
{color: #33CC00}
{color: red}
Los nombres de los colores son los siguientes:
Ing. Pablo Morales P. Pág. 13
background
Se utiliza este atributo para destacar secciones de una página, estableciendo un
color de fondo o una imagen de fondo.
Para establecer un color de fondo, se especifica su valor hexadecimal, o un
nombre de color (ver el atributo color visto anteriormente).
Ejemplos:
{background: red}
{background: #6633FF}
También se puede colocar una imagen de fondo en el ámbito de la etiqueta. Es
decir, se puede poner, por ejemplo, una imagen de fondo en un párrafo
determinado.
Para colocar una imagen, se especifica el URL entre paréntesis (no entre comillas,
como es lo habitual). Por ejemplo:
{background: URL([Link]
CSS Overflow
La propiedad overflow tiene los siguientes valores:
visible- Defecto. El desbordamiento no se recorta. Se rinde fuera de la caja del
elemento.
hidden - El desbordamiento se recorta, y el resto del contenido será invisible.
Ing. Pablo Morales P. Pág. 14
scroll - El desbordamiento se recorta, pero se agrega una barra de desplazamiento
para ver el resto del contenido
auto - Si se recorta el desbordamiento, se debe agregar una barra de
desplazamiento para ver el resto del contenido
Barras de Navegación:
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Cambia el color del link cuando se pasar el curso encima */
li a:hover {
background-color: #555;
color: white;
}
Html
<ul>
<li><a href="[Link]">Inicio</a></li>
<li><a href="[Link]">Noticias</a></li>
Ing. Pablo Morales P. Pág. 15
<li><a href="[Link]">Contacto</a></li>
<li><a href="[Link]">Acerca de..</a></li>
</ul>
Creación de páginas con frames
El hecho de usar frames no sólo cambia por completo la apariencia de nuestra
página, sino que también cambia el proceso de su realización. Si hasta ahora
losWebs estaban formados por un único documento HTML donde estaba el
contenido, al usar frames será necesario un documento HTML para definir la
estructura de la página (número de frames a usar y disposición de estos), y
posteriormente tantos documentos HTML extra como frames tengamos para
insertar su contenido. En la figura 8.7 vemos un ejemplo con una página Web
compuesta por 3 frames:
Las páginas con frames constarán de varios documentos HTML. En este ejemplo al
haber tres frames serán necesarios 4 documentos HTML.
En este caso serán necesarios 4 documentos HTML. El primero simplemente
contiene el código que le indica al navegador el número de frames de la página,
su tamaño, su posición y el nombre de los archivos donde está el contenido de los
3 frames, a este documento HTML le llamaremos documento de definición de
frames . Los otros 3 documentos HTML tienen el contenido de cada uno de los tres
frames y deben ser creados de la misma manera que hemos venido creando los
documentos HTML hasta ahora, eso sí, hay que tener en cuenta que ese contenido
será mostrado en un espacio reducido (el del frame correspondiente) y no en toda
la ventana del navegador.
Ing. Pablo Morales P. Pág. 16
Creación del documento de definición de frames
La estructura del documento de definición de frames es parecida a la estructura
de las páginas creadas hasta ahora. La principal diferencia será que este
documento no tendrá contenido y por tanto no debe usarse la etiqueta BODY.
A cambio ha de usarse una nueva etiqueta: FRAMESET. Esta será la etiqueta clave
en la creación de los frames.
La estructura básica del documento de definición será por tanto la que
observamos en la figura siguiente:
En ella se observa claramente como la etiqueta FRAMESET sustituye a BODY. Se
podría decir que estas dos etiquetas son exclusivas, cuando esté una no puede
estar la otra.
El siguiente paso en la creación de nuestra página con frames será decidir cuantos
queremos crear como serán. Aunque posteriormente veremos cómo se pueden
crear divisiones tan complejas como queramos, por ahora crearemos páginas en
las que la ventana del navegador está dividida en filas o en columnas.
División en columnas
Para crear una página Web formada por varios frames que dividen la ventana del
navegador en columnas usamos el atributo COLS de la etiqueta FRAMESET. Este
atributo toma como valores separados por comas la anchura de los diferentes
frames:
<FRAMESET COLS="ancho_col1, ancho_col2, ...">
Existen diversas formas de indicar el ancho de las columnas, una de ellas es usando
porcentajes. Con este método podríamos dividir la ventana en dos columnas
usando el siguiente código:
<HTML>
<HEAD>
Ing. Pablo Morales P. Pág. 17
</HEAD>
<FRAMESET COLS="20%,80%">
</FRAMESET>
En la que estamos diciendo que la primera columna (la de la izquierda) ocupará el
20% del ancho de la ventana del navegador y la segunda ocupará el 80%.
Si quisiéramos dividir la ventana en 5 columnas simplemente deberíamos
especificar cinco valores separados por comas, por ejemplo:
<FRAMESET COLS="10%,50%,15%,20%,5%">
Pero no es recomendable crear más de 5 columnas ya que el espacio de la
información sería muy pequeño.
El método de especificar los tamaños de las columnas en porcentajes es sencillo
de entender, sin embargo, no siempre es útil. Por ello existen otros métodos que es
importante comentar. Uno de ellos consiste en especificar el ancho de las
columnas en su tamaño absoluto en pixeles directamente. Sin embargo, existe un
problema: existen varias resoluciones de pantalla distintas y sería muy extraño que
todos los navegantes que visiten nuestras páginas tengan una misma anchura de
pantalla. Por esta razón no podemos saber cuál será el ancho total de la ventana
del navegador y esto sería imprescindible para poder indicar el ancho de las
columnas en pixeles. Para solucionar este problema Netscape ™ invento el
Ing. Pablo Morales P. Pág. 18
asterisco (*). Cuando se pone un asterisco como ancho de una columna estamos
indicando al navegador que use todo el espacio sobrante para ese frame. Por
ejemplo si escribimos:
<FRAMESET COLS="100,300,*">
El resultado se visualiza de la siguiente manera
El siguiente método para especificar el ancho de las columnas consiste en
combinar todos los anteriores. La mejor
forma de repasarlos es estudiando unos cuantos ejemplos. Para ellos vamos a
suponer un navegador de 800 pixeles de ancho:
1. <FRAMESET COLS="*,*"> : Al usar dos veces el asterisco se divide el resto entre
las dos columnas a partes iguales. Es decir, cada una ocupará la mitad de la
ventana del navegador (unos 400 pixeles cada una). Este ejemplo es idéntico
a usar < FRAMESET COLS="50%,50%">.
2. <FRAMESET COLS="100,*,*"> : Divide la ventana en tres columnas. La primera
de 100 pixeles y entre las otras dos divide a partes iguales el espacio sobrante
(700 pixeles) con lo que (suponiendo el ancho total de 800 pixeles) cada una
tendrá un ancho de 350 pixeles.
División en filas
Hasta ahora hemos aprendido a dividir la ventana en columnas, pero como es de
esperar también se puede dividir en filas. En esta ocasión será necesario usar el
Ing. Pablo Morales P. Pág. 19
atributo ROWS (rows significa precisamente filas en inglés). El funcionamiento del
atributo ROWS es muy similar al de COLS:
<FRAMESET ROWS="alto_fila1, alto_fila2, ...">
En este caso es más importante, si cabe, tener en cuenta que ni podemos saber el
alto de la ventana del navegador de aquellos que visiten nuestras páginas. Por esta
razón el uso de tamaños relativos o del asterisco (*) es aún más usual. Veamos
algunos ejemplos:
1. <FRAMESET ROWS="200,*,100">: Divide la ventana en tres filas: una superior de
200 pixeles en la que se podría poner un encabezado; una inferior de 100
pixeles en la que puede ponerse una coletilla o una barra de navegación; y
una central que ocupa el espacio sobrante y donde se podría situar el
contenido principal.
2. <FRAMESET ROWS="15%,*,3*">: Se divide la ventana en una primera fila que
ocupa el 15% de la altura; la siguiente fila ocupará un cuarto del resto y la
tercera tres cuartos.
No son necesarios más ejemplos para comprender el funcionamiento, así que
vamos ya a definir el contenido de cada una de las divisiones que hemos
aprendido a crear. Cuando insertemos este contenido, la división se convertirá en
lo que realmente se llama frame.
Combinando COLS y ROWS
Los atributos COLS y ROWS pueden ser usados simultáneamente en una misma
etiqueta FRAMESET. Si hacemos esto dividiremos la ventana del navegador en
cuadrículas de diferentes tamaños. Podríamos interpretar el resultado de usar
ambos atributos simultáneamente como que cada una de las filas definidas por
ROWS es subdividida en el número de columnas que indica COLS. La página que
mostramos en la figura 8.1 es una muestra del uso de COLS y ROWS
simultáneamente. En ese caso el código usado fue:
<FRAMESET COLS="*,*" ROWS="*,*">
...
</FRAMESET>
También se pueden crear combinaciones más complejas como por ejemplo:
Ing. Pablo Morales P. Pág. 20
<FRAMESET COLS="100,50,*,*"
ROWS="15%,*,3*">
... Más código ...
</FRAMESET>
Etiquetas adicionales en Frameset
Frameborder; ejemplo framedorder=”yes”
Bordercolor; ejemplo bordercolor="#333"
Scrolling; ejemplo scrolling=”yes”
FORMULARIOS HTML
Se trabaja con la etiqueta <form>
Para agregar la información al formulario es necesario utilizar la etiqueta input, y
dependiendo del tipo de campo se agregar su atributo con la etiqueta type.
La etiqueta que agregar el título al formulario es la etiqueta legend:
Para agregar las etiquetas de campo se utiliza la etiqueta: label.
Atributos de la Etiqueta Type
Texto = text; Ejemplo: type=”text” y “password”
Value= Texto a editar; Ejemplo: value="Escribe tu nombre"
Placeholder= Texto Editable; Ejemplo: placeholder="Escribe tu nombre"
Size: se modifica el tamaño del recuadro; size=”10”
Maxlenght: número máximo de caracteres ; Ejemplo: maxlenght=”2”
Ing. Pablo Morales P. Pág. 21
Name: Es el nombre de todo el input: Ejemplo: name=”ejm1”
type
email, checkbox
radio
button, value= Enviar
Lista desplegable
Se utiliza select y option con el atributo value
Ejem:
<select>
<option value="Ambato">Ambato</option>
<option value="Quito">Quito</option>
Ejemplo de Formulario:
<form>
<legend>Formulario</legend>
<fieldset>
<label>Nombre</label>
<input type="text" size="10" placeholder="Nombre">
<label>Apellidos</label>
<input type="telf" placeholder="Apellidos">
<label>Correo</label>
<input type="email" placeholder="Correo electrónico">
<label>Constraseña</label>
<input type="password" placeholder="Constraseña">
<label>Escoge tus hobbies </label>
<input type="checkbox"> <label>Leer </label>
<input type="checkbox"> <label>Trotar </label>
<label>Sexo</label>
<input type="radio"> <label>Masculino </label>
<input type="radio"> <label>Femenino </label>
<label>Mensaje</label>
<select>
<option value="Ambato">Ambato</option>
<option value="Quito">Quito</option>
</select>
<textarea class="input-text"></textarea>
Ing. Pablo Morales P. Pág. 22
<input type="submit" name="enviar">
</fieldset>
</form>
Ing. Pablo Morales P. Pág. 23