Scribd
Cargar
306 vistas

Guía Práctica HTML - CSS

El documento presenta información sobre elementos básicos de HTML y CSS para el diseño y estructuración de páginas web. Explica etiquetas para formato de texto, listas, enlaces, imágenes y tablas. Luego introduce conceptos de CSS para aplicar estilos a páginas web.

Cargado por

Luis Salan Lopez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
306 vistas

Guía Práctica HTML - CSS

El documento presenta información sobre elementos básicos de HTML y CSS para el diseño y estructuración de páginas web. Explica etiquetas para formato de texto, listas, enlaces, imágenes y tablas. Luego introduce conceptos de CSS para aplicar estilos a páginas web.

Cargado por

Luis Salan Lopez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 23

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="http://servidor/recurso.html">texto del enlace</a>

Ing. Pablo Morales P. Pág. 2


Enlace relativo a una página

<a href="recurso.html">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="recurso.html#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="recurso.html" target="_blank">texto del enlace</a>

Ejemplo:

<a href="https:www.google.com" target="blank"> Ir a Google </a>

IMÁGENES

<img src="nombre.gif">

Imágenes con texto Alternativo:

<img src="ruta_imagen" alt="Texto Alternativo">

Ejemplo:

Ing. Pablo Morales P. Pág. 3


<img src="Logo.png" alt="Imágen_de_Pelileo">

Tamaño de imágenes

<img src="ruta_imagen" width="111px" height="222px" alt="Texto Alternativo">

Ejemplo:
<img src=" Logo.png " width="111px" height="222px" alt=" Imagen de Empresa">

Imagen como fondo de una página Web

<body background="fondo.gif">

Ejemplo:

<body background=" Logo.png ">

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: http://www.htmlquick.com/es/tutorials/tables.html

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(nubes.jpg)}
</style>

CSS EN DOCUMENTO EXTERNO


Nombre del archive: miestilo.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}
div {background: URL(fondo.jpg)}

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 miestilo.css

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="miestilo.css" 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(http://nubes.jpg)}

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="default.asp">Inicio</a></li>
<li><a href="news.asp">Noticias</a></li>

Ing. Pablo Morales P. Pág. 15


<li><a href="contact.asp">Contacto</a></li>
<li><a href="about.asp">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

También podría gustarte