An unexpected error occured. Please try again later. :: My Art :: // Bhtml
:Radio MyArt:
:Afiliados:
:Patrocinamos:
TUTORIALES >> BASE DE HTML Nivel
= Principiante
Autor = Patricia
Si ya has leído los consejos
supongo que mas o menos te habrás hecho una idea de lo que es hacer páginas
webs. Como ya dije allí hay programas como el Front Page y Dreamweaver, que
te hacen directamente el código HTML por lo que da a pensar que no lo
necesitamos. Pero eso es una idea completamente incorrecta, pues hay
muchísimas veces que necesitarás trabajar con el HTML, tanto para poner
scripts a tu página como para modificar algunos errores. Debes saber que la
forma mas rápida para modificar el HTML es con el bloc de notas. Eso si, no
te olvides nunca de añadir a tus páginas la extensión .htm, o .html. Y recuerda,
si utilizas el Front Page, no te fíes siempre de la vista previa, mejor
ábrela con internet explorer y verás exactamente como se verá en internet.
Tras esta pequeña introducción os explicaré lo principal de HTML. ^^
- ESTRUCTURA DE UN DOCUMENTO
HTML
Los documentos HTML
están estructurados en dos partes diferentes:
HEAD (cabeza) y
BODY (cuerpo)
Ejemplo:
<HTML>
<HEAD>
<TITLE>Título de tu web que aparece en el marco superior de la web</TITLE>
</HEAD>
<BODY>
<!-- Comentario que no se verá al visualizar la página -->
Texto de la web... Con enlaces, tablas...
</BODY>
</HTML>
Como puedes ver, cada vez que
terminas con una etiqueta, se pone delante </ esto también ocurre con
muchos otros elementos... Los elementos son los que se encuentran entre
<>
- ETIQUETA HEAD
En la etiqueta HEAD pueden aparecer otros elementos además de TITLE, pero al
contrario de estos este no es obligatorio. Uno de los elementos que puedes
utilizar es META, ejemplo:
- ETIQUETA BODY
La etiqueta <BODY> controla los colores, las imágenes de fondo
y algunas otras características.
Para establecer el
color del fondo, texto, enlace, enlace visitado o enlace activo,
sustituye el valor de un color modificando los seis caracteres que
aparecen tras el símbolo "#" en el siguiente ejemplo. No
hagas que todos ellos tengan el mismo color, ya que de hacerlo no verías
nada en la página. Puedes incluir cualquiera de los siguientes
elementos (BGCOLOR, TEXT, LINK, VLINK o ALINK), o no incluir ninguno
de ellos.
<BODY BGCOLOR="#FFFFFF" TEXT="#000000"
LINK="#="#0000FF" VLINK="#="#009900"
ALINK="#FF0000">
A continuación aprende muchas mas cosas:
· Elemento FONT
Este elemento nos da la oportunidad de poner un tamaño, color y tipo de
letra. Veamoslo:
<font size="2"
face="Verdana" color="#000000">TEXTO</font> (Puedes
mirar mas códigos de colores en la tabla de colores en tutoriales)
Resultado:
TEXTO
El tamaño (size) predeterminado normalmente es 3, por lo que de esta manera
lo cambiaremos en TEXTO. Sin embargo si escribes algo más tras </font>
volverá a estar en el tamaño 3. Pero hay una forma en el HTML para poner tu
propio tamaño, fuente y color predeterminado en tu documento y es:
<basefont size="2"
face="Verdana" color="#FFFFFF">
Y encuanto pongas otra basefont se cambiará a la otra en el sitio que
indicaste.
Otra cosa que debes saber es que en total hay del 1 al 7 de tamaños.
Además de la forma anterior, hay otra forma de poner los tamaños:
<H1>Ejem. H1</H1>
<H2>Ejem. H2</H2>
<H3>Ejem. H3</H3>
<H4>Ejem. H4</H4>
<H5>Ejem. H5</H5>
<H6>Ejem. H6</H6>
Resultado:
Ejem. H1
Ejem. H2
Ejem. H3
Ejem. H4
Ejem. H5
Ejem. H6
El problema de este
método es que no es posible pone Ejem.H5 junto a Ejem. H6, sin embargo con el
método FONT si.
Respecto a los colores, si no te sabes los códigos puedes poner el nombre del
color en inglés, ejemplo:
<font size="2"
face="Verdana" color="yellow">TEXTO</font>
Resultado: TEXTO
· Saltos de párrafo y
línea. Línea horizontal.
Para saltos de párrafo se utiliza <P>
Para saltos de línea se utiliza <br>
El elemento <p> permite los siguientes
tres atributos: ALIGN=LEFT (por defecto), ALIGN=CENTER, y ALIGN=RIGHT Que sirven
para alinearlos a la izquierda, centro o derecha. Ejemplo:
<p align=center>
Otra división de texto es la línea
horizontal. <HR> y para camiar esa apariencia puedes añadirle NOSHADE
ademas, admite dos atributos más WIDTH (longitud que puede estar en porcentaje
y pixeles) y SIZE (altura del 1 al 7 como las letras)
Ejemplo:
<HR> :
<HR noshade>
<HR NOSHADE WIDTH=400 SIZE=5 ALIGN=center>
· Efectos en el texto
Para modificar el aspecto del texto,
tenemos lo siguiente: Texto en negrita : <b>Texto en negrita</b> Texto realzado : <STRONG>Texto realzado</STRONG> Texto en itálica : <i>Texto en itálica</i> Texto en énfasis : <EM>Texto en énfasis</EM> Texto ejemplo de código : <CODE>Texto ejemplo de código</CODE> Texto teletipo : <TT>Texto teletipo</TT> Texto subrayado : <U>Texto subrayado</U> Texto tachado : <STRIKE>Texto
tachado</STRIKE>
Texto de dirección : <ADDRESS>Texto
de dirección</ADDRESS> Texto superíndice : <SUP>Texto
superíndice</SUP> Texto subíndice : <SUB>Texto
subíndice</SUB>
Texto grande : <BIG>Texto
grande </BIG>
Texto pequeño : <SMALL>Texto
pequeño</SMALL>
· Creación de enlaces
Esto es lo más importante en las páginas
webs ^^ que como te habrás imaginado sirve para enlazar una página a otra.Son
llamados hipervínculos, enlaces, links, hiperenlaces... Pero todos usan el
mismo código.
En tu página puede crear enlaces hacia:
- Una página o archivo del mismo directorio
- Una página o archivo de un subdirectorio
- Una ubicación externa (en Internet)
- Para crear un enlace a una página o archivo del mismo directorio que
el de la página que se modifica, basta con usar la ruta de acceso
relativa, con lo que el enlace sólo incluirá el nombre del archivo,
ejemplo:
En la página aparecerá el texto "Mi perro", y al
hacer clic en él aparecerá el archivo/página llamado "perro.html".
Si deseas cambiar el texto del enlace sustituye "Mi perro" por el que
deseas usar. Además, si quiere que el
enlace señale a otra página, sólo sustituye "perro.html"
con el nombre del nuevo archivo.
Cuando el enlace sea a un subdirectorio (subcarpeta, carpeta dentro de
donde tienes la pagina que estas haciendo, esta subcarpeta tiene el
archivo/página a la que quieres dirigir el enlace), debes usar este formato:
Al crear un enlace a una página externa al directorio, o a otro sitio
de Internet, basta con usar la dirección completa (denominada ruta de
acceso absoluta) en lugar de la ruta de acceso relativa:
ADEMÁS hay una forma que debes saber que permite hacer que la
página enlazada aparezca en un frame, iframe, una nueva página, la
página raíz... Estoy hablando de los TARGET. Los cuales se pone tras
la dirección de la página que quieres enlazar, ejemplo:
El target _blank hace que la página enlazada aparezca en una nueva
ventana. Hay más targets:
El mismo marco: _self
Marco primario: _parent
Toda la página:
_top
Nueva ventana: _blank
Además no se me tiene que
olvidar comentaros que también puedes enlazar a tu email ^^
· IMAGENES
Son muy importantes para las páginas webs, al igual que los enlaces. Pues las
páginas webs, además de estar organizadas, y ser amenas, necesitan dar buena
impresión al visitante^^
El elemento utilizado para insertarlas es <IMG> el cual puede ir
acompañado de los siguientes atributos; SRC, ALT, ALIGN, BORDER, WIDTH, HEIGTH,
VSPACE Y HSPACE. Los cuales veremos como se utilizan y para que sirven a
continuación.
El atributo SRC, es el más importante, pues
sin el la imagen no se visualizará. Él lleva la dirección de donde se
encuentra la imagen para poder visualizarla.
ALT, nos sirve para evitar problemas a los
visitantes que no pueden visualizaar determinadas imagenes. Este atributo, nos
proporciona la posibilidad de acompañar a la imágen con un texto, lo cual da
mucha ayuda en el caso de los links.
ALIGN como anteriormente he dicho es lo que
indica la alineación del texto. Pero en las imágenes además de center, left y
right, podemos usar top (texto alineado arriba, junto a la imagen), botton
(texto alineado abajo, que es el que suele salir por defecto).
BORDER, como bien supones es el borde de la
imagen ^^
HSPACE y VSPACE, son los espacios horizontales
y verticales que rodea la imagen respectivamente.
Y por último os voy a poner un ejemplo
totalmente completo de todo lo anterior y de como se linkea una imagen.
Texto que rodea la imagen por su parte
vertical VSPACE
Texto que rodea la imagen por su horizontal HSPACE... Probando...
Probando...
Veis?? El borde de la imagen es el que está
mas cercano al gato .
Shoutbox