Tutorial html
|
INTRODUCCION
AL HTML |
Mis
pretensiones con este Tutorial no son ni mucho menos intentar
enseñar el lenguaje HTML, es más lo único que quiero es llegar a
aprender más sobre HTLM según escribo estas líneas. Así que os
ruego me perdoneís las meteduras de pata que pueda tener y espero
que todos aquellos que sepais de esto me ayudeís a completar el
tutorial.
Realizar una página web es bastante fácil y no es necesario saber
HTML, basta con utilizar uno de los innumerables programas que hay
en el mercado y te ayudan a ello, todo se hace a golpe de ratón.
No obstante siempre hay que retocar algo, y por eso estoy
escribiendo esto, para que con unos ligeros conocimientos, podamos
dar nuestro toque personal a las páginas que diseñemos. |
| |
|
¿Que es HTML? |
Una buena pregunta
eh?, bueno pues HTLM son las iniciales de Hiper Text Markup
Languaje. Pues eso, en definitiva es un lenguaje de
programación, mas o menos standard que se usa para que podamos
crear documentos que se puedan ver con cualquier navegador.
Los programas HTLM, están hechos con texto plano, sólo contienen
números y letras, pero ojo, no todos los caracteres son válidos,
algunos carácteres son especiales y debemos insertar su código,
por ejemplo las minúsculas acentuadas . Para decirle al navegador
que nos muestre una a acentuada debemos teclear á y el
resultado sería á, la e acentuada é, y así el resto de
vocales. Más adelante incluire una tabla con los códigos
especiales, pero de momento esto nos sirve.
Lo que si hay que tener en cuenta es que los códigos de marcado
del lenguaje HTML, no son puntillosos y no distinguen entre
mayúsculas y minúsculas. Con lo que si hay que tener cuidado es
con las llamadas externas, y sobre todo con nombres de ficheros.
Con los maravillosos sistemas operativos que tienen ahora nuestros
ordenadores, podemos poner nombres larguisimos a nuestros
ficheros, y además pueden contener espacios. Por cuestiones de
portabilidad, yo seguiría con los nombres cortitos, y si tengo que
separar palabras, nunca useis un blanco, es mejor un guión, y
apañado. Además, donde si hay que tener cuidado por que si
distingue mayúsculas y minúsculas es en los nombres de los
ficheros, para el no es lo mismo PEPE que Pepe que pepe, serían
tres ficheros distintos, así que cuidado con esto, luego no digaís
que no os he avisado. |
| |
|
ESTRUCTURA
DE UNA PAGINA |
Bueno, esto ya
se empieza a poner interesante. Vamos a empezar a escribir nuestro
primer código HTML. Lo primero que hay que saber es que todo
documento HTML debe empezar y acabar por las etiquetas <HTML>
y </HTML> respectivamente. Como veís empezamos a
utilizar este lenguaje. Todas las etiquetas van entre <>. Además
la gran mayoría de las etiquetas van emparejadas y para distinguir
entre la etiqueta de inicio y de fin, se le pone / a la etiqueta
de fin. Fácil no?.
Todos los documentos HTML tienen dos partes, el encabezado y el
cuerpo, de perogrullo no?. Pues hasta para esto hay que poner
etiqueta, y cuales son? .
Para el encabezado la etiqueta es <HEAD>
y </HEAD> En esta sección se pone la información de la página
y poco más. Aquí es donde pónemos el título de nuestra página,
para que todo el mundo nos conozca. El título irá entre las
etiquetas <TITLE> y </TITLE> lo que pongamos aqui,
aparecera en la parte izquierda de la línea superior de la
ventana.
Ya esta, manos a la obra vamos a empezar a diseñar nuestra primera
página. Cogemos cualquier procesador, y acordaros de que se debe
salvar como texto normal.
<HEAD>
<TITLE>Mi pagina Web</TITLE>
</HEAD>
Y ahora vamos con la parte importante, el
cuerpo del documento, donde vamos a insertar nuestro texto,
imagenes, hiperenlaces, scrips ......... el cuerpo también tiene
su etiqueta, que como no podia ser de otra manera son <BODY> y
</BODY> y entre medias que?. Nuestra página WEB como todos los
documentos, necesita un encabezamiento, algo que llame la atención
y que defina el resto de la página. Podemos definir hasta 6
tamaños de encabezados, y esto se hace con las etiquetas <H1> a
<H6> teniendo en cuenta que el número 1 define el tamaño de
letra más grande y el 6 define el más pequeño.
Seguimos diseñando la página:
<BODY>
<H1>BIENVENIDO A MI PAGINA PERSONAL</H1>
</BODY>
Bienvenido a mi página personal (H1)
Bienvenido a mi página personal (H2)
Bienvenido a mi página personal (H3)
Bienvenido a mi página personal (H4)
Bienvenido a mi página personal (H5)
Bienvenido a mi página personal (H6)
|
| |
|
PARRAFOS |
Y ahora que, ya
tenemos el encabezado de nuestra página, pero se puede mejorar el
aspecto, alineando el parrafo. Lo normal es que todos queramos
poner el encabezado en el centro de la página. Esto se logra con
la etiqueta <CENTER> </CENTER>. Esta etiqueta también es
válida para gráficos, pero lo veremos mas adelante.
<BODY>
<CENTER><H3>BIENVENIDO A MI PAGINA
PERSONAL</H3></CENTER>
</BODY>
BIENVENIDO A MI PAGINA PERSONAL
(H2)
Los párrafos van entre las etiquetas <P> y </P>, y los
podemos alinear a la izquierda, a la derecha y como ya hemos
visto, centrarlos, pero vamos a seguir con nuestra página,
introduciendo el comando ALIGN.
<BODY>
<CENTER><H3>BIENVENIDO A MI PAGINA
PERSONAL</H3></CENTER>
<P ALIGN="LEFT"> Ahora estoy escribiendo
el primer párrafo de mi página personal, que quiero que se alinea
a la izquierda. </P>
<P ALIGN="RIGTH"> Pero esta línea quiero
que salga a la derecha</P>
<P ALIGN="CENTER"> Toma ya y ahora en el
centro</P>
</BODY>
Ahora estoy
escribiendo el primer párrafo de mi página personal, que quiero
que se alinie a la izquierda
Pero esta línea
quiero que salga a la derecha
Toma ya y ahora en
el centro.
Habeís visto las posibilidades de alineamiento del parrafo, pues
hay más. Si lo que queremos es sangrar un párrafo, debemos
escribir entre las etiquetas <BLOCKQUOTE>
Y </BLOCKQUOTE>.
|
| |
|
FORMATOS |
Pues visto lo
anterior, seguimos dando forma a nuestra página, ahora vamos a ver
como darle formato a nuestro texto. Lo primero que vamos a ver es
como modificar el tamaño de la letra, esto se hace con el comando
<FONT> </FONT>, en unión con el modificador SIZE.
Hay varias maneras de modificar el tamaño de la fuente. En primer
lugar podemos hacer referencia al tamaño absoluto de la fuente.
Los tamaños absolutos varían entre el 1 y el 7, siendo 7 el mas
grande, y 1 el mas pequeño. La segunda manera de realizar la
modificación, es hacer referencia al tamaño relativo de la fuente,
es decir restando o incrementando el tamaño actual de la fuente en
la cantidad especificada. Este modificador puede varíar entre -4 y
+4. Pero como mejor se ve esto es continuando con nuestra página.
<P><FONT SIZE="3">Esta línea está
escrita con tamaño 3</FONT></P>
Esta línea esta escrita con tamaño 3
<P><FONT SIZE="5">Esta línea está
escrita con tamaño 5</FONT></P>
Esta línea esta escrita con tamaño 5
<P><FONT SIZE="-3">Esta línea está
escrita con tamaño -3</FONT></P>
Esta línea esta escrita con tamaño relativo -3
Cómo vemos en el último ejemplo, el resultado es el mismo que si
aplicamos <FONT SIZE="2">, resultado que restarle 3 unidades al
último tamaño definido de fuente, en nuestro ejemplo 5.
Visto todo lo anterior, sólo queda por decir que es posible
determinar cual es el tamaño base de la fuente con la que vamos a
escribir nuestro documento HTML, para ello usamos la etiqueta <BASEFONT
SIZE=tamaño>, escrito justo a continuación de la etiqueta <BODY>.
|
| |
|
ESTILOS |
Para
resaltar partes del texto que estamos escribiendo, podemos
utilizar negritas, cursivas, etc. Las etiquetas mas comúnes que
podemos usar aparecen en la siguiente tabla
|
Estilo |
Etiqueta |
|
| Negrita |
<B> </B> |
Negrita |
| Cursiva |
<I> </I> |
Cursiva |
| Subrayado |
<U> </U> |
Subrayado |
| Cita |
<CITE> </CITE> |
Cita |
| Código |
<CODE> </CODE> |
Código |
| Enfasis |
<EM></EM> |
Enfasis |
| Fuerte |
<STRONG> </STRONG> |
Fuerte |
| Teletipo |
<TT> </TT> |
Teletipo |
| Tachado
|
<STRIKE< </STRIKE> |
Tachado |
| Subíndice |
<SUB> </SUB> |
Subíndice |
| Superíndice |
<SUP> </SUP> |
Superíndice |
| Grande |
<BIG> </BIG> |
Grande |
| Pequeño |
<SMALL> </SMALL> |
Pequeño |
<P><B>Esto
se va a escribir en negrita</B></P> |
| |
|
LINEAS HORIZONTALES |
A veces vamos a
necesitar separar las distintas secciones de nuestro documento
HTML, una forma sencilla de hacerlo, es insertar líneas
horizontales. Esto se consigue con la etiqueta <HR>. Esta
etiqueta no lleva su pareja de cierre, es individual, por defecto
traza una línea de todo el ancho de la pantalla, no obstante se
puede modificar el aspecto de las líneas añadiendo los siguientes
parámetros:
SIZE = Indica el grosor en pixel de la línea
WIDTH = Especifica la anchura que la línea ocupa en la pantalla,
se le puede especificar en pixels o en porcentaje.
ALIGN= Alineación de la línea
NOSHADE = Si queremos la línea con sombra o sin sombra.
Pero todo esto se ve mejor con un ejemplo:
<HR SIZE="5" WIDTH="50%" ALIGN="LEFT"
NOSHADE="NOSHADE">
El resultado es una línea de grosor 5 pixel un 50% de la pantalla
alineada a la izquierda sin sombra, es decir:
|
| |
|
ENLACES |
La verdadera potencia
de internet nos la da la posibilidad de enlazar todas las páginas
como si de una tela de araña se tratase, una página sin enlaces no
tiene demasiado sentido, asi que vamos a ver de forma muy breve
como insertar enlaces dentro de nuestro documento. Los enlaces nos
pueden llevar a otro documento o bien a otra sección dentro del
documento editado. Este documento de tutorial, esta repleto de
enlaces a la misma página, como habeís podido ver, desde el índice
que está al principio de este documento, se accede a las secciones
directamente, igualmente de cada una de las secciones, se accede
al índice. Además, este documento tiene enlaces externos, como
vereis en la parte inferior de la pantalla, hay un enlace a la
página principal de mi site y hay otro enlace a
Por cierto si os gusta
leer y escuchar música, pinchar en este enlace, podreis adquirir
los mejores libros y la mejor música de internet, y además así
colaborareis a que pueda seguir manteniendo este tutorial.
Bueno, y ahora manos a
la obra que es lo que nos interesa, vamos a generarnos un enlace a
uno de los buscadores mas conocidos YAHOO
<A
HREF="http://YAHOO.COM">Buscar en YAHOO</A>
Buscar
en YAHOO
Ahora lo vamos a complicar un poco
más y vamos a poner un gráfico como el del ejemplo anterior.
<P ALIGN="CENTER"><A
HREF="http://armazon.com"><IMG SRC="armazon.gif"></A></P>
Bien no, es mucho más fácil de lo que parece.Como veis Hemos
realizado dos enlaces a otras páginas pero con el mismo formato
podemos acceder a otros muchos servicios de internet, podemos
realizar enlace tipo ftp, correo electronico, etc. Vamos a ver
como añadir un enlace de correo:
<A HREF="mailto:f_casa@yahoo.com">Mandame
un correo</A>
Mándame un correo
Para agregar enlaces a marcadores dentro de la página actual, o
dentro de otra página, lo primero que hay que definir es el
marcador, esto se hace de la siguiente manera:
<A NAME="Nombre del marcador">Texto del
marcador </A>
Texto del marcador
El enlace al marcador anterior se definiría:
<A HREF="#Nombre del marcador">Enlace al
marcador anterior</A>
Cómo véis se incluye el símbolo "#" antes del nombre del marcador
Enlace al marcador anterior
Tambien se pueden hacer llamadas a marcadores definidos en otras
páginas:
<A HREF="index.html#Nombre del
marcador">Enlace al marcador de la página index.html</A>
|
| |
|
DAR COLOR A LA
PAGINA |
Hasta ahora hemos
visto todo lo necesario para realizar nuestra primera página WEB,
pero ahora, vamos a darle un poco de vidilla, ya que una pagina
con letra negra sobre fondo blanco, queda un poco sosa, asi que
vamos a modificar los colores tanto del fondo como de las letras,
e incluso vamos a poder insertar un gráfico como fondo de nuestra
página.
Para modificar los colores de fondo del documento debemos añadir a
la etiqueta de cuerpo de documento <BODY> el parámetro BGCOLOR="#RRGGBB"
donde #RRGGBB indica la combinacion de tonos de rojo, verde y azul
necesarios para conseguir el color que deseamos. No obstante HTML
reconoce 16 colores simples black, gray, maroon, purple, green,
olive, navy, teal, silver, red, white, lime, yelow, aqua, blue y
fuchsia con nombre y apellidos, así que para poner un fondo azul,
bastará con poner <BODY BGCOLOR="BLUE">
sin más. Si lo queremos complicar más, necesitamos saber el número
en hexadecimal que define el color que queremos y lo ponemos en la
etiqueta bgcolor, el color rojo sin ir mas lejos sería #FF0000.
Para definir el color del texto, utilizaremos el parámetro TEXT="#RRGGBB".
Para definir el color de los enlaces no vilistados, LINK="#RRGGBB",
para los enlaces visitados VLINK="#RRGGBB", para los enlaces en
los que se haga click ALINK="#RRGGBB".
Para insertar una imagen de fondo, usamos el parámetro
BACKGROUND="imagenfondo.gif". Los formatos de ficheros más
utilizados son el gif y jpg. Cabe reseñar que el fichero debe
estar en el mismo directorio que el documento HTML que lo llama,
en caso contrario se debe especifivar el PATH a dicho fichero
gráfico. Y OJO, ya dije anteriormente que aunque en el código HTML
da igual escribir las etiquetas en mayúsculas o minúsculas, cuando
se hace una llamada a un fichero, enlace, etc... Si existen
diferencias, con lo cual para evitar problemas, escribimos todo en
minúsculas. |
| |
|
INSERTAR IMAGENES |
Y como todo documento
que se precie debe tener imagenes, vamos a insertarlas de una
manera facilísima, esto se hace con el comando
<IMG SRC="Nombre de la imagen">.
Si además queremos especificar el tamaño
<IMG SRC="Nombre de la imagen" HEIGHT="n" WITDH="n" >
siendo n el tamaño en pixels de la imagen.
Si a esto le añadimos todo lo que hemos visto anteriormente,
podemos alinear la imagen, incluirla en un enlace a otras páginas,
etc etc.
<P ALIGN="CENTER"><A HREF="http://armazon.com"><IMG
SRC="armazon.gif"></A></P>
Ahora entendemos mucho mejor el ejemplo anterior
|
| |
|
LISTAS |
| Este es uno de los
elementos mas útiles para nuestros documentos HTML, ya que nos
permite esquematizar de una forma clara la información contenida
en nuestro documento. Una
lista es una sucesion de elementos que pertenecen a una estructura
común y que es posible numerarlo, sin darle muchas más vueltas, el
índice de esta página esta realizado con una lista.
Hay diferentes tipos de listas, sin
orden con orden, numeradas, alfabeticas, etc.... Es bastante común
que vayan precedidos de bolos o números para diferenciar una línea
de otra.
Para crear una lista ordenada, se
usan las etiquetas <OL> y </OL>, y a cada elemento se le incluye
entre las etiquetas <L1> y </L1> pe.
<OL>
<LI>INTRODUCCION</LI>
<LI>QUE ES HTML?</LI>
</OL>
El resultado es como sigue:
- INTRODUCCION
- QUE ES HTML?
Las listas sin orden, preceden a
las líneas por un bolo, y es igual que el ejemplo anterior,
sustituyendo <OL> por <UL>
Los elementos de las listas pueden
ser a su vez listas
<OL>
<LI>Estructura
de un documento HTML</LI>
<UL>
<LI> Encabezado
</LI>
<LI> Cuerpo </LI>
</UL>
</OL>
- Estructura de un documento HTML
Para las listas ordenadas, también
podemos usar los parámetros TYPE y START, para definir el tipo de
numeración que deseamos y en que número empezar, los tipos són
AaIi, para las numeraciones Alfabéticas, Alfabéticas minúsculas,
Romanas y Romano minúsculas respectivamente.
pe. <OL TYPE=A START=3>, El primer
elemento numerado de la lista será la C |
| |
|
CARACTERES ESPECIALES |
|
Código |
Cáracter especial |
|
< |
< |
|
> |
> |
|
& |
& |
|
" |
" |
|
¿ |
¿ |
|
¡ |
¡ |
|
á |
á |
|
Á |
Á |
|
é |
é
|
|
É |
É |
|
í |
í |
|
Í |
Í |
|
ó |
ó |
|
Ó |
Ó |
|
ú |
ú |
|
Ú |
Ú |
|
ñ |
ñ |
|
Ñ |
Ñ |
|
ü |
ü |
|
Ü |
Ü |
|
&nbs; |
Espacio en blanco |
|
| |
Comparte este articulo :
/
Compartir en Facebook
/
VER MAS CURSOS Y TUTORIALES |
|
Como
publicitar aquí
Contacto