Animation Island
Conectate a el foro o registrate ¡Haci podras descargar todo!, Divertirte, Aprender, Conocer gente y Más!! Que esperas para acceder


La isla de animaciones flash
 
PortalPortal  ÍndiceÍndice  FAQFAQ  RegistrarseRegistrarse  ConectarseConectarse  

Comparte | 
 

 Guia Basica HTML

Ver el tema anterior Ver el tema siguiente Ir abajo 
AutorMensaje
Yoru
Web Master
Web Master
avatar

Masculino
Mensajes : 92
IslandCash IslandCash : 641
Fecha de inscripción : 02/01/2011
Edad : 23
Localización : Mi casa =3

MensajeTema: Guia Basica HTML   Lun Ene 10, 2011 9:51 pm

Very Happy Hola, aqui les traigo la guia basica HTML, para aprender todo el lenguaje :3 espero que les guste, alli va!

INTRODUCCION



La información en la Red necesita viajar de una manera rápida y precisa,
para lo cual se creó el protocolo de comunicación HTTP o Hyper Text
Transport Protocol, el cual fue desarrollado en un laboratorio de física de
partículas del CERN en Suiza con el fin de transferir rápidamente a todos los
usuarios lo últimos resultados de sus investigaciones.

Fue entonces este el comienzo de las redes compuestas por diferentes
servidores que proveen información de todo tipo a los usuarios.

Inicialmente el WWW (Worl Wide Web) era poco interactivo, limitándose a
desplegar la información en modo texto . Luego el permanente avance de
tecnológico surgieron los visualizadores gráficos (browsers) y con ellos el
HTML (Hypertext Markup Languaje) lenguaje utilizado para la presentación de
la información en la red.

La finalidad de los browsers, como Netscape o Internet Explorer es
interpretar el código HTML que llega a nuestros computadores por medio del
HTTP.

Ahora para proporcionar mayor versatilidad a las páginas, se utiliza el
Common Gateway Interface (CGI), que le permite a un programa correr en el
servidor de acuerdo a los requerimientos del protocolo HTTP de las páginas.



▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬


HTML (Hypertext Markup Languaje)







El HTML es mas una codificación que un lenguaje de programación. Su
estructura básica es tan simple que cualquier persona sin principios en
programación puede aprenderlo con gran facilidad.

Lo sorprendente de este lenguaje es que proporciona al usuario la información
en una manera interactiva, haciendo uso del hypertexto , o texto con enlaces
hacia otros lugares del Web, o hacia inserciones de multimedia (videos,
sonidos, gráficos, etc.). Además es universal y no depende del sistema
operativo que se esté utilizando.

Los documentos HTML se escriben en modo ASCII (texto plano), haciendo uso de
cualquier procesador de palabras y en cualquier sistema operativo.



▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬




ESTRUCTURA BÁSICA







Para comenzar debemos saber que el HTML utiliza una codificación genérica,
la cual hace uso de TAGS o etiquetas. Mediante estas etiquetas es posible
separar el contenido del documento de su formato.

Los TAGS son comandos que se especifican en el cuerpo del programa, con el
fin de darle las características deseadas a la información.

Toda página Web debe contener la siguiente estructura :



Código:
<HTML>
 
  [font=verdana, arial, helvetica][size=9]
<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY> Esta es mi primera página Web</BODY>

</HTML>
    [/size][/font]

La etiqueta <HTML> le indica al visualizador que va a comenzar a leer un
documento HTML y se debe colocar siempre al comienzo y al fin del texto.

La etiqueta <HEAD> indica un encabezado, dentro del cual se coloca
información como el título, el cual debe estar contenido entre la etiqueta
<TITLE>

Entre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que
realmente vemos en el Web. Para comenzar a escribir un documento, es
importante tener en cuenta que el lenguaje HTML no distingue mas de un
espacio entre caracteres y se olvida de cualquier formato que se le de al
texto (negrilla, cursiva, tipo de letra, entre otras). Recordemos que para
esto es que se creó el HTML, toda presentación final debe ser proporcionada
mediante las etiquetas.

Cada etiqueta, con excepción de unas cuantas, le debe indicar al visualizador
cuando finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser
cualquier etiqueta. De esta manera indicamos cuando comienza y termina el
encabezado, el título, el cuerpo y el documento HTML.



▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
EDITAR - GUARDAR Y VISUALIZAR







Para editar o crear un documento HTML se puede hacer uso de cualquier
procesador de palabras. Para ello se debe modificar o digitar la estructura
completa del documento y guardarlo como texto simple con extensión HTML.

Ahora para visualizar nuestros cambios o ver como va quedando nuestra página,
antes de cargarla en nuestro servidor, se puede abrir el archivo en cualquier
visualizador, y este lo desplegará tal como se vería la página en la black.

Las opciones de que disponen los browser mas comunes, son :



Nestcape:
Menu "File", comando "Open file in a browser" (Ctrl O). Para
volver a cargar el archivo una vez que este ya esté abierto en el browser,
se dispone del comando "Reload" del menú "View".Internet Explorer:
comando "Abrir" del menú "Archivo". Para volver a cargar se dispone del
comando "Actualizar", del menú "Ver".

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬DANDO FORMATO AL TEXTO DEL DOCUMENTO

Como ya habíamos mencionado, el HTML no distingue masa de un espacio entre
caracteres, saltos de línea, negrilla, cursiva, tamaño y tipo de fuente,
viñetas, entre otras. Para lograr tales características en el texto del
documento HTML (recordemos que el texto va dentro del cuerpo del documento
entre las etiquetas
<BODY> </BODY>) se debe hacer uso de las etiquetas que
explicaremos a continuación.

Etiquetas de formato:


Negrita<B> Texto en negrita<*/B>
Cursiva <I> Texto en cursiva<*/I>
Subrayado<U> Texto subrayado<*/U>
Monoespaciado<TT> Texto como si estuviera escrito en máquina da escribir
<*/TT>
Preformateado<PRE> Texto que conserva todos sus espacios y tabuladores,
y aparece en formato monoespaciado<*/PRE>


Sin los "*"


Etiquetas para párrafos:

Etiquetas de formato:


Negrita<B> Texto en negrita</B>
Cursiva <I> Texto en cursiva</I>
Subrayado<U> Texto subrayado</U>
Monoespaciado<TT> Texto como si estuviera escrito en máquina da escribir
</TT>
Preformateado<PRE> Texto que conserva todos sus espacios y tabuladores,
y aparece en formato monoespaciado</PRE>


Etiquetas para párrafos:



Nuevo párrafo (dos espacios)<P>
Línea horizontal<HR>
Salto de línea (un espacio)<BR>
Tamaño de la fuente<Hx> <*/Hx>. Donde x es un número entre 1 y 6, siendo
1 el tamaño mas grande y 6 el más pequeño

Sin los "*"

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
LISTAS






Las listas sirven para desplegar la información que debe ser enumerada o
tabulada de una manera organizada. En el lenguaje HTML se pueden construir
varios tipos de listas :


Lista numerada:
Numera los párrafos u objetos que se encuentran dentro de la siguiente
estructura :
<OL>

<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</OL>
Útiles para crear tablas de posiciones y enumerar procedimientos.Lista con viñetas:
Inserta un punto negro a los párrafos u objetos que se encuentran
dentro de la siguiente estructura :
<UL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</UL>
Son útiles para enumerar por puntos los comentarios de su página.Lista de definición:
Son útiles para las entradas de tipo diccionario o para las secciones
de documentos donde un término es el encabezado de la sección y la definición
es el texto de aquella. La estructura es la siguiente :
<DL>
<DT> Primer término.
<DD> Primera definición.
<DT> Segundo término.
<DD> Segunda definición.
Etc...
</DL>


A cada una de estas listas se les puede crear una lista dentro de ellas,
simplemente agregando la estructura deseada dentro de la etiqueta
correspondiente.


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
VÍNCULOS DE HYPERTEXTO






El hipertexto son vínculos dentro del texto del documento HTML que permiten
al usuario navegar con facilidad a través de la black, tanto a nivel interno
como externo, es decir , pueden crearse vínculos que lleven hacia una misma
parte del documento (interno) o hacia otra parte del mundo Web (externo).
También existen otro tipo de vínculos que llevan al surfeador a otra partes
como correo, gopher, ftp, entre otras.

Las etiquetas HTML que se encargan de generar los vínculos son <A> y </A>.
A esta etiqueta se le debe agregar el "URL" con el que se desea vincular.
Esto se realiza de la siguiente manera :




<A HREF="URL">Texto del vínculo</A>


Vínculos externos hacia páginas lejanas

Este vínculo envía al lector fuera de la página hacia otro site Web.
Generalmente son usados para relacionar al usuario con otros sitios
interesantes en el mundo Web.

El URL será entonces la dirección completa de la página a la que se desea
crear el vínculo. Ejemplo : http ://www.insomnia-group.com

Vínculos externos hacia páginas cercanas

Generalmente las personas que diseñan sus páginas no encuentran cómodo
desplegar toda la información en una sola, sino que crean varias páginas
vinculadas entre sí. Por ejemplo, es común ver una página principal
(Home Page) con una tabla de contenido a la cual se le han creado vínculos
hacia cada uno de sus temas. Estos vínculos son hacia archivos HTML que,
generalmente, se encuentran en el mismo directorio de la página principal.

El URL será entonces la ruta completa (incluyendo el nombre del archivo)
que lleva al visualizador a cargar el documento que se desea desplegar.

Por ejemplo en mi cuenta he creado una página para que las personas que
visiten al Home Page registren su visita. Si el nombre de documento es
firmas.html y se encuentra en el mismo directorio de la Home Page, el URL
sería firmas.html.

Vínculos internos : anclas

Cuando un página tiene un gran contenido, es posible hacer que el usuario
navegue a través de la página. Para ello se debe marcar tanto el inicio
como el fin del ancla.

Para marcar el inicio del ancla se utiliza la etiqueta <A HREF="#sección">
Texto que relaciona al ancla </A> . Nótese que lo que sería en los otros
casos el URL se ha cambiado por el nombre que se le da al ancla, precedido
del signo #.

Para marcar el fin del ancla (a donde debemos llegar) se hace uso de la
etiqueta <A NAME="sección"> Texto del ancla </A>. Donde "sección" debe
coincidir con el nombre designado en el inicio del ancla.

Vínculos de correo electrónico

Por lo general las personas que diseñan sus paginas proporcionan la opción
de tener una retroalimentación por parte del visitante. La manera mas
sencilla de lograr esto es través de un vínculo que lleve al surfeador a un
cuadro de correo electrónico con la dirección pblacketerminada.

La estructura es la siguiente:




<A HREF=mailto :"dirección de correo electrónico" Texto del vínculo </A>
Ejemplo:
<A HREF=mailto :"edpq148cronos.eafit.edu.co" Sugerencias y comentarios</A>


Vínculos hacia otros recursos del Web

En la black, a parte del World Wide Web, existen otros cuatro recursos, que
son el gopher, el FTP, el Usenet y el Telnet.

Para generar un vínculo hacia cualquiera de estos recursos, basta con
designar adecuadamente el URL requerido dentro de la estructura normal de
etiquetas de vínculo.




RECURSOURL
FTP (directorio)ftp ://quién/dónde
FTP (archivo)ftp ://quién/dónde/que
Gophergobher ://quién
UseNetnews ://nombre del grupo de noticias
Telnettelnet ://quién


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

AGREGANDO IMÁGENES A SU PÁGINA






Las páginas en el Web no
deben estar llenas de texto por todos lados pues esto hace que los
surfeadores se aburran de verlas y como resultado obtendrán una página
que nunca es visitada. Una herramienta muy útil para hacer de las
páginas un documento llamativo y amigable es hacer uso de imágenes
relacionadas con el texto al que se esta haciendo referencia. ¿Se
imaginan una valla publicitaria sin ningún tipo de imagen ?

También es muy
importante una excelente combinación de colores de fondo y de texto, con
el fin de hacer que la página sea lo mas leíble posible. Es en este
punto donde entra a jugar la creatividad del diseñador.

Para colocar una imagen
en una página basta con llamarla desde el documento HTML ( es similar
los vínculos hacia páginas cercanas). Lo primero es diseñar el gráfico
deseado en cualquier programa de dibujo como el Corel Draw o el Adobe
Photoshop, luego se debe convertir a cualquiera de los formatos
aceptados por el lenguaje HTML (GIF y JPEG).

La estructura es la siguiente :

<IMG SRC= "Nombre del archivo" >

Donde "Nombre del archivo" es el nombre del archivo de gráfico que desea desplegar.

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

GENERE TABLAS






En general las tablas pueden ser sin borde o con borde.

La tabla sin borde es
quizás la herramienta mas útil en la codificación HTML, pues a través de
ellas podemos organizar nuestro documento como lo deseemos, teniendo en
cuenta que el HTML no entiende mas de un espacio, tabulador o salto de
línea?

Pero ¿por qué no hacerlo usando la etiqueta preformateado para arreglar la distribución de mi documento?

Sencillo: como todos
sabemos esta etiqueta despliega el texto en el tipo de letra
monoespaciado y no permite cambios ni de forma ni de tamaño. Conclusión;
el documento se vería horrible.

La tabla con borde es útil para desplegar tablas de contenido, resúmenes, cuadros de atención, entre otras.

Pero qué es una tabla?: es un conjunto rectangular de filas y columnas que aparecen en su pantalla.

ESTRUCTURA BÁSICA DE LAS TABLAS

<TABLE BORDER="Número entre 0 y 7">

<CAPTION ALIGN=TOP ó BOTTOM>;Aquí va el texto del título</CAPTION>

<TR>
<TD>Primera fila, primera columna</TD>
<TD>Primera fila, segunda columna</TD>

<TD>Primera fila, tercera columna</TD>
..........
</TR>
<TD>Segunda fila, primera columna</TD>
<TD>Segunda fila, primera columna</TD>
<TD>Segunda fila, primera columna</TD>
..........
</TR>
etc...
</TABLE>


Notas:
El número que se designa en la etiqueta <TABLE BORDER="Número entre 0 y 7"> determina el
ancho del borde de la tabla. Este número puede estar entre 0 y 7.
Se
preguntarán que significa la etiqueta <CAPTION ALIGN=TOP ó
BOTTOM>; Aquí va el texto del título</CAPTION>. Simplemente da
la posibilidad de colocarle un título a la tabla, bien sea en la parte
superior (TOP) o en la parte inferior (BOTTOM).


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

REGLAS BÁSICAS EN EL DISEÑO






  1. Tener algo interesante que decir en su Home Page:

    Su página deberá ser informativa para mantener vivo el interés.

  2. No será otra lista de listas:

    Todo el mundo ya conoce las herramientas de búsqueda. Haga que sus enlaces sean pertinentes al
    tema que está tratando.

  3. Recordar que no en todos los Browser aparece igual:

    No haga que su página dependa demasiado de ciertos comandos HTML que pueden no apatrecer
    en todos los Browsers . Algunos Browsers pueden no aceptar sus gráficasa, así que proporcione
    textos alternativos.

  4. No todos los que ven página,lo hacen a 28.8 o más rápido:

    Mantenga su página con un máximo de 15K en imágenes o fraccionela si ésta es muy grande.

  5. No usar gráficas de otros autores si no está autorizado:

    Hay muchasa fuentes de gráficas gratis. También existen graficadoes sencilos con los que usted
    puede crear sus propias gráficas.

  6. Reconocer el trabajo de los demás:

    Si algún "Web Site" le ayudó de alguna manera a construir su página, entonces bríndele un enlace

  7. Colocar fecha de la última revisión:

    Indique cuándo se realizó la última revisión. Esto hará que las personas se motiven a leer su
    página.

  8. Verifique sus enlaces periódicamente:

    No deje que expiren sus enlaces durante largos períodos de tiempo. Revise su validez.

  9. Sea abierto a comentarios o sugerencias:

    Especifique vínculos de correo electrónico o, si es podible, formularios de realimentación.

  10. Practique su HTML:

    Use los editores solo cuando conozca los principios básicos del HTML. Esta es la
    combinación ideal.

  11. RECUERDE QUE ÉSTAS SON SÓLO GUÍAS - ALGUNAS SON DE BUENOS MODALES EN LA black - PERO NUNCA
    DEJE QUE LE QUITEN SU ESTILO - LA EXPRESIÓN PERSONAL ES MUY IMPORTANTE -.













_________________


¡The Black Cat!
=3 Cualquier duda me la envias por MP (Mensaje Privado)
Volver arriba Ir abajo
Http://www.yorunya.es.tl
 

Guia Basica HTML

Ver el tema anterior Ver el tema siguiente Volver arriba 

 Temas similares

+
Página 1 de 1.

Permisos de este foro:No puedes responder a temas en este foro.
Animation Island :: Animation Island :: Otros Lenguajes-
Cambiar a: