Professional Documents
Culture Documents
Para Principiantes
www.ebookred.com |
Miguel A. Fernndez
Confidential
www.ebookred.com
Estimado Cliente
SUMARIO
Qu es HTML ? 3
Estructura de un Documento HTML.. 4
Ruta Absoluta y Ruta Relativa 4
Nuestra primera pgina web.. 5
Reglas de Formato. 6
Gnesis de la URL 6
Cabecera. 7
Ttulo. 7
Cuerpo 8
Caracteres especiales.. 9
Etiquetas HTML bsicas... 10
Listas. 14
Hiperenlaces 14
Imgenes 15
Vdeos... 16
Tablas.. 16
Formularios. 18
Ejemplo Formulario 27
Qu es HTML?
HTML es la abreviatura de HyperText Markup Language, y es el lenguaje
de marcas que todos los programas navegadores usan para presentar
informacin en la World Wide Web (WWW).
Est basado en el uso de etiquetas, consistentes en un texto ASCII
encerrado dentro de un par de parntesis angulares(<..>). El texto incluido
dentro de los parntesis nos dar una explicacin de la utilidad de la
etiqueta. As por ejemplo la etiqueta <TABLE> nos permitir definir una
tabla.
Las etiquetas podrn incluir una serie de atributos o parmetros, en su
mayora opcionales, que nos permitirn definir diferentes posibilidades o
caractersticas de la misma. Estos atributos quedarn definidos por su
nombre (que ser explicativo de su utilidad) y el valor que toman separados
por un signo de igual. En el caso de que el valor que tome el atributo tenga
ms de una palabra deber expresarse entre comillas, en caso contrario no
ser necesario.
As por ejemplo la etiqueta <TABLE border=3> nos permitir definir una
tabla con borde de tamao 3.
Entre otras cosas, el manejo de estas etiquetas nos permitir:
Definir la estructura lgica del documento HTML.
Aplicar distintos estilos al texto (negrita, cursiva, subrayado ...).
La inclusin de hiperenlaces, que nos permitirn acceder a otros
documentos relacionados con el documento principal.
La inclusin de imgenes y ficheros multimedia (grficos, vdeo,
audio).
Qu vamos a necesitar para crear un documento HTML?
Ruta Absoluta:
La ruta absoluta indica la direccin completa del archivo sin importar
donde estemos, es decir, si yo tengo una foto de mi casa llamada
micasa.jpg dentro de la carpeta imgenes en mi dominio ebookred.com
la ruta absoluta es: http://www. ebookred.com /imagenes/micasa.jpg
Podemos utilizar esa ruta para llamar a la imagen desde cualquier sitio,
ya sea en nuestro dominio o en otro cualquiera. Es aconsejable trabajar con
rutas absolutas, para tener un mayor control de la web.
Ruta Relativa:
La ruta relativa llama al mismo archivo pero desde el lugar donde
estamos situados, es decir que solo funciona dentro de nuestro dominio. Por
ejemplo: si nosotros estamos en el directorio principal y queremos insertar
la foto desde el index la ruta relativa desde el index sera:
imagenes/micasa.jpg
Reglas de formato
Todos los navegadores usan unas reglas bsicas para poder mostrar una
pgina web con un buen formato:
El espacio en blanco es ignorado. Ya que un documento HTML
puede estar en cualquier tipo de fuente y adems la ventana del navegador
puede ser de cualquier tamao.
Las etiquetas pueden ser escritas en maysculas o en
minsculas. En todo caso se aconseja su escritura en maysculas para
poder distinguirlas del texto normal.
Existe normalmente una etiqueta de inicio y otra de fin. La
etiqueta de fin contendr el mismo texto que la de inicio aadindole al
principio una barra inclinada /. La etiqueta afectar por tanto a todo lo que
est incluido entre las etiquetas de inicio y fin. No obstante, existen algunas
que no necesitan cierre, ya que en estas etiquetas se presupone su final,
como
por ejemplo: <P> prrafo, <BR> salto de lnea <IMG> inclusin de
una imagen.
Por ejemplo:
Instruccin HTML Resultado En Navegador
<B>Texto en negrita</B> Texto en negrita
<I>Texto en cursiva</I> Texto en cursiva
<B><I>Texto en negrita y cursiva</B></I> Texto en negrita y
cursiva
Gnesis de la URL
La URL (ruta) nos va a permitir localizar y acceder a cualquier recurso de
la red desde nuestro programa navegador. A travs de los URL podremos
referenciar cualquier fichero que deseemos incluir en nuestro documento
HTML. Cada elemento de Internet vendr definido por su URL
correspondiente, independientemente del tipo de servidor en el que se
encuentre.
Cuerpo
Es la pgina web en s, o sea nuestro contenido que queramos incluir y
del tema que deseemos. En el cuerpo de un documento HTML es donde
incluiremos las distintas instrucciones del lenguaje junto con el contenido en
s de nuestra pgina Web: textos, imgenes, enlaces a otras pginas, etc..
Las etiquetas <BODY> y </BODY> son las que van a delimitar el cuerpo
de nuestro documento.
Los argumentos que podemos incluir son muchsimos como el color del
texto o del color de fondo de nuestra pgina web etc...
Referente a los colores en un documento HTML, estos se pueden
especificar por su nombre (name) o por su cdigo de color, que es un
nmero compuesto de tres pares de cifras hexadecimales que nos indican la
proporcin de los colores primarios (rojo, verde y azul) que forman el color
deseado (#rrggbb):
Nombre #Cdigo de color Color mostrado
Black #000000 Negro
White #FFFFFF
Teal #008080 Teal
Blue #0000FF Azul
Navy #000080 Azul marino
Lime #00FF00 Lima
BlaPurple #800080 Prpura
Yellow #FFFF00 Amarillo
Olive #808000 Oliva
Red #FF0000 Rojo
maroon #800000 Marrn
gray #808080 Gris
fuchsia #FF00FF Fucsia
green #008000 Verde
La etiqueta <BODY> presenta una serie de atributos que van a afectar a
todo el documento en su conjunto. Estos atributos nos van a permitir definir
los colores del texto, del fondo, y de los hiperenlaces del documento.
Incluso nos permitirn insertar una imagen de fondo en nuestra pgina.
<BODY background="URL" bgcolor="#rrggbb name" text="name"
Caracteres especiales
Hasta ahora hemos escrito algunos ejemplos de cdigo HTML, pero
hemos pasado por alto algunas limitaciones de HTML respecto al uso de
caracteres especiales. Una de estas limitaciones es, por ejemplo, el uso de
los caracteres < y >, que como ya sabemos indican el inicio y fin de una
etiqueta HTML. Pues bien, si quisiramos escribir estos caracteres como
parte normal de un texto, el navegador no sabra si se trata de texto normal
del contenido de una web o del comienzo y final de una etiqueta.
Para ello tendremos los siguientes unos cdigos para poder escribir estos
caracteres y otros relacionados con las etiquetas:
Smbolo Cdigo
< <
> >
& &
" "
Para las letras especficas del idioma castellano tenemos:
Letra - Cdigo
á
Á
ñ
é
É
Ñ
í
Í
ü
ó
Ó
Ü
ú
Ú
¿
¡
11
Ejemplo Resultado
<H1>Cabecera 1</H1>
<H2>Cabecera 2</H2>
<H3>Cabecera
<H4>Cabecera
<H5>Cabecera
<H6>Cabecera
Cabecera 1
Cabecera 2
3</H3> Cabecera 3
4</H4> Cabecera 4
5</H5> Cabecera 5
6</H6> Cabecera 6
Ejemplo Resultado
<H5 align=center>Cabecera 5</H5> Cabecera 5
12
Tamao 5 (3+2)
Texto verde y de
tamao 5
face="nombre de font". Nos va a permitir escribir texto con el tipo de
letra que especifiquemos. En el caso de que el tipo de letra no estuviera
cargada en el ordenador o computadora, al leer la pgina, se usar el
<Font> por defecto del navegador utilizado.
Ejemplo Resultado
<FONT face=Tahoma>Tipo de letra
Tahoma</FONT>
Tipo de letra Tahoma
<FONT size=4 color=red
face=Tahoma>Texto azul, de tamao
4 y Tahoma</FONT>
13
Listas
Las listas son muy importantes, muchas veces tendremos que utilizarlas
para ordenar nuestro contenido. Tendremos que usar dos etiquetas para
formar una lista, la primera es <ul></ul> con la que indicamos que
comenzaremos una lista, y la segunda es <li></li> donde insertamos los
items o texto de la lista, se utiliza as:
<ul>
<li>texto lista 1</li>
<li> texto lista 2</li>
<li> texto lista 3</li>
</ul>
texto lista 1
texto lista 2
texto lista 3
Hiperenlaces
Los hiperenlaces son enlaces de hipertexto que nos van a permitir
acceder de manera directa a otros documentos HTML independientemente
de su ubicacin, o a otras zonas dentro de nuestro propio documento.
Para crear un hiperenlace (enlaces que al clicar llevan a otra pgina)
utilizaremos la etiqueta <a> con varios atributos, uno para indicar la
direccin del enlace y otro para insertar una descripcin:
<a href=http://www.ebookred.com title=Como crear una pagina web
con explicaciones paso a paso>Como crear una pgina Web</a>
Para enlazar una pgina interna de nuestra pagina web tenemos que tener
en cuenta que esta se encuentra en una carpeta comn y corriente,
entonces no hace falta indicar el dominio, quedara as:
<a href=/contacto.html>Contacto</a>
y si el archivo contacto.html se encontrara dentro de otra carpeta
llamada usuarios quedara de esta forma:
<a href=usuarios/contacto.html>Contacto</a>
14
Imgenes
Podremos dar un aspecto mucho ms vistoso a nuestros documentos
HTML con la inclusin de imgenes. Los formatos de imagen que todos los
navegadores reconocen son: gif y jpg. Si queremos insertar una imagen en
otro formato, el visor debera disponer del programa externo que permita
su visualizacin. De todas formas, una buena solucin es utilizar algn
programa de tratamiento de imgenes que nos convierta la imagen a uno
de los formatos mencionados anteriormente.
El formato gif es ms recomendado para la inclusin de iconos, grficos,
y el formato jpg para el caso de insertar fotografas en nuestras pginas.
La etiqueta que nos va a permitir la insercin de imgenes es <IMG>. La
imagen se insertar justo en el punto del documento donde coloquemos
dicha etiqueta, pudiendo insertar imgenes dentro de listas,
tablas o formularios.
El formato de la etiqueta, con sus posibles argumentos, es el siguiente:
<IMG src="URL de la imagen" alt="Texto alternativo"
align="top/middle/botton/left/rigth" border="Tamao"
height="Tamao" width="Tamao" hspace="margen"
vspace="margen">
15
Tablas
definicin de fila, de forma que por cada etiqueta <TH> o <TD> que
incluyamos se crear una celda dentro de la fila correspondiente. La
etiqueta <TH> la usaremos para crear celdas de tipo cabecera, es decir,
celdas cuyo contenido est resaltado en negrita, dejando la etiqueta <TD>
para definir celdas de datos. En este caso tampoco es necesario indicar las
etiquetas de cierre.
<table border="1" summary="Ejemplo de tabla simple con celdas de
encabezado.">
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<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>
La salida en el navegador es la siguiente:
1
Columna
Celda 1
Celda 4
Columna
Celda 2
Celda 5
Columna
Celda 3
Celda 6
<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
La salida en el navegador es la siguiente:
Campo1
Campo2
Campos 4 y 5
Campo7
Campo3
Campo6
Campo8
Campo9
Formularios
Los formularios es la herramienta ms utilizada en Internet para obtener
datos e informacin acerca de los usuarios que navegan nuestra website.
La idea de los formularios es recoger informacin online con la
interaccin del usuario y luego ejecutar una determinada accin con la
misma, que podra ser por ejemplo, un formulario de venta que el usuario
completa y luego es enviado va email al vendedor en forma encriptada. La
etiqueta HTML que nos va a permitir la creacin de formularios es <FORM>.
Vamos a detenernos en esta importante fase de HTML.
Las etiquetas son las siguientes:
Etiqueta <FORM>
Todo formulario debe estar encerrado entre el par de etiquetas
<FORM> y </FORM>, y debe ser ubicado en el cuerpo de cualquier
documento HTML, es decir, entre el par de etiquetas <BODY> y </BODY>.
Esta etiqueta <FORM> presenta tres atributos posibles:
ACTION: La Ruta o URL del programa o del Servidor Web utilizado para
procesar la informacin recolectada.
METHOD: Es importante saber que existen dos mtodos, el valor GET
que aade argumentos del formulario o el valor POST, el ms utilizado y
definen la manera en la cual los datos son transferidos al servidor.
ENCTYPE: este atributo est reservado para que la informacin viaje en
forma encriptada a travs de Internet. El ms usado para que lleguen el
contenido a travs de un mail con el mtodo post sera "text/plain". Esta es
la nica etiqueta optativa, los anteriores son obligatorios.
18
Etiqueta <INPUT>
La etiqueta <INPUT> es la segunda etiqueta ms importante de los
formularios. Se la puede definir como una etiqueta multifuncin, ya que con
la misma podemos crear "botones", "radio-buttons", "checkbox", y simples
recuadros para ingresar texto.
Tiene los siguientes parmetros: ALIGN, CHECKED, MAXLENGTH,
NAME, SIZE, SRC, TYPE, y VALUE. Pero no todos son obligatorios. Los
atributos importantes para toda etiqueta <INPUT> son:
NAME, que asocia un nombre con cada variable ingresada.
TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX,
RADIO, SUBMIT, RESET, IMAGE y HIDDEN; de acuerdo al tipo de
elemento que deseemos representar en el formulario.
Ahora veremos cada tipo de TYPE y sus valores detenidamente:
- Botn de type=text
Se utiliza para la entrada de cadenas de texto corto, como por ejemplo
nombre de usuarios, nmeros, fechas o diversos datos que se puedan
expresar en una lnea de texto. Se mostrar un recuadro que ocupa una
lnea y la que ser posible especificar este texto. El formato de la
instruccin es el siguiente:
<INPUT type=text name="variable1" value="valor inicial"
size="tamao" maxlength="longitud mxima" >
Las dimensiones de la ventana de introduccin de texto se fija con el
atributo SIZE, que indica el tamao de la ventana en caracteres. Aqu solo
se define la parte visible, pero el usuario podr introducir ms texto si lo
desea. Para indicar el mximo nmero de caracteres que se permiten en la
entrada usaremos: MAXLENGTH. El atributo NAME indica el nombre de la
variable que toma el valor de la entrada y VALUE especifica el valor de
inicializacin del campo. De todos los atributos solo ser obligatorio NAME,
ya que es el nombre de la variable, siendo el resto opcionales.
Aqu tenemos un ejemplo sencillo y su salida:
Usuario: <INPUT type=text name=variable value="Tu nombre">
Usuario:
19
Tu nombre
20
21
22
23
Cdigo:
<P align=center><B>Nombre WEB<I></I></B></P>
<FORM action="mailto:direccion@dominio.com" method = post>
<p align="left"><strong>Nombre:</strong>
<INPUT type="text" size="30" name="nombre"></p>
<p align="left"><BR>
<strong>E_mail: </strong>
<INPUT type="text" size="30" name="e_mail"></p>
<P><strong>Deseas recibir informacin sobre:
</strong>
<P><INPUT type="checkbox" name="infoCursos" value="cursos"
id="infoCursos">CURSOS
<P> <INPUT type="checkbox" name="infoManuales" value="manuales"
id="infoManuales">MANUALES
<P>
<INPUT type="checkbox" name="infoSoft" value="sw" id="infoSoft">
SOFTWARE
<P><strong>Quieres estar informado periodicamente?:
</strong><br>
<INPUT type="radio" name="informar" value="si">S
<INPUT type="radio" name="informar" value="no">No
<P><strong>Cmo nos conciste?: </strong><BR>
<SELECT name="referencia" multiple size="3" id="referencia">
<option>buscador
<option>Publicidad
<option>foro
<option>usuario
</SELECT>
<P><strong>Aadir nota:</strong><BR>
<TEXTAREA name="nota" rows="5" cols="40" id="nota"></TEXTAREA>
<P><INPUT type="submit" value="Enviar Datos">
<INPUT type="reset" value="Borrar Datos">datos">
24
Nombre WEB
Nombre:
E_mail:
Deseas recibir informacin sobre:
CURSOS
MANUALES
SOFTWARE
Quieres estar informado periodicamente?:
S
No
Aadir nota:
Enviar Datos
25
Borrar Datos
Etiqueta <TEXTAREA>
Esta etiqueta nos permite definir un rea de dimensiones arbitrarias que
funciona como un verdadero editor, donde el usuario puede ingresar texto.
26
<HTML>
<HEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>
<FORM ACTION="mailto:direccin@dominio.com" METHOD=POST>
<table align="center" border="0">
<td align="left" width="100">Nombre:
</td>
<td align="center" width="150"><INPUT NAME="nombre"
MAXLENGTH="25" TYPE="TEXT" VALUE="">
</td>
<tr>
<td align="left" width="100">Email:
</td>
<td align="center" width="150"><INPUT NAME="mail" MAXLENGTH="25"
TYPE="TEXT" VALUE="">
</td>
<tr>
<td align="left" width="100">Motivo:
</td>
<td align="center" width="150"><INPUT NAME="motivo"
MAXLENGTH="25" TYPE="TEXT" VALUE="">
</td>
<tr>
<td align="left" width="100"> Mensaje:
</td>
<td><TEXTAREA NAME="mensaje" ROWS=3 COLS=20>
</TEXTAREA>
</td>
<tr>
<td widht="100">
</td>
<td align="right" width="150"><INPUT NAME="boton" TYPE="SUBMIT"
VALUE="Enviar">
</td>
</TABLE>
</FORM>
</BODY>
</HTML>
27
Nombre:
Email:
Motivo:
Mensaje:
Enviar
28