PAGINA WEB

Creatuweb está dedicado a mostrarte la manera de crear un sitio de éxito en la red. Como complemento a este sitio te ofrecemos este pequeño manual con el que podrás conocer los entresijos del lenguaje HTML, el que se usa para crear páginas web.

En este curso pretendemos tan solo que llegues a ser capaz de construir páginas web correctas, válidas para cualquier explorador, tando los de la familia de Netscape como los diferentes Explorers de Microsoft y otros. La idea es por tanto que estas páginas te sirvan como una guia práctica en tu labor de crear buenas páginas web.

Quizás pienses que con los editores gráficos está todo hecho y no es necesario conocer el HTML. En parte llevas razón, si no pretendes pasar del nivel de principiante y tan solo quieres crear páginas impersonales para ti y tus amigos pues no necesitas conocer HTML. Pero si lo que quieres es llegar a crear y publicar verdaderos sitios web de aspecto profesional y dignos de estar en la red, entonces lo mejor es que conozcas a fondo el lenguaje con el que se construyen esos sitios.

¿Que es una Pagina Web?

Pues eso de entrada podemos preguntarnos qué es una página web. Habrían dos respuestas: para el internauta y para el diseñador.

Para el internauta una página WEB es una pantalla en su monitor que le muestra la información que va buscando y enlaces a otros sitios relacionados.

Para el diseñador una página WEB es un documento construído para mostrar información en la pantalla de un monitor, que contiene además de la información una serie de instrucciones para indicar como se ha de mostrar esa información. Estas instrucciones se escriben siguiendo un lenguaje llamado HTML

Como ves el diseñador define la página web como algo más completo y técnico que el simple internauta. La página web se concreta en un documento con un nombre terminado con la extensión .htm o .html.

Una serie de páginas web interconectas e interrelacionadas de alguna forma (el mismo tema, el mismo objetivo...) forman un sitio web, que habitualmente está almacenado en un servidor

Definición de HTML

Hyper Text Markup Language, o simplemente HTML, es un lenguaje de programación muy sencillo que se utiliza para crear los textos y las páginas web. Si se hace la traducción de su nombre del inglés al castellano, sería “Lenguaje de Marca de Hipertextos”, ya que es justamente un lenguaje que se basa en las marcas para crear los hipertextos

Esta definición se debe a que está compuesto por etiquetas que definen la estructura y el formato del documento que verá el usuario a través de la web. Esas etiquetas son leídas por el navegador o visualizador, es decir el programa que se utiliza para navegar, y que es el que ejecuta las funciones creadas en HTML permitiendo que puedan ser visibles en nuestra máquina.

VERSIONES DE HTML

-html.2.0
-html.3.0 y 3.2
-html.4.0

NAVEGADORES COMPATIBLES

- Lo que demuestra que al menos la gente de Chrome, Safari, Opera y Firefox están trabajando duro para tener listos sus navegadores con soporte completo antes de que el estándar sea oficial.
La tabla a continuación muestra la puntuación obtenida para cada uno de los navegadores, siendo Google Chrome el que aprobó con la mayor nota, alcanzando 137 puntos de 160 posibles, seguido de Safari con 113/160, Opera 102/160, Firefox 101/160 mientras que Internet Explorer apenas logra 19 puntos.




EDITORES DE CODIGO DE HTML

-Dreamweaver
Probablemente el mejor editor de páginas web para diseñadores que busquen resultados profesionesles.
Puntos  9

-Editor de código PSPad
Analizamos un editor de código gratuito que te permite editar código PHP, HTML, C, Java, etc.
Puntos  8

-Adobe GoLive
Editor de HTML profesional WYSIWYG. Con grandes capacidades.
Puntos  8

-HTML-kit
Editor de HTML donde se porgrama directamente con código.
Puntos  8

-HTMLed pro
Editor de HTML con capacidades medias.
Puntos  7

-Kompozer
Editor web sencillo, para diseñadores y usuarios con un nivel técnico medio-bajo, que permite crear páginas web en vista diseño (WYSIWYG).
Puntos  7

-Ñandú editor web que funciona como extensión de Mozilla
Comentamos un editor web WYSIWYG muy sencillo de usar que se instala como una extensión de Mozilla Firefox.
Puntos 

-Editplus
Programa de características medias para la edición de páginas web. Permite el trabajo con HTML y otros lenguajes como ASP o PHP.
Puntos  7

-Arachnophilia
Programa para la edición de páginas web en HTML y otros lenguajes, posee múltiples wizards para ayudar en la creación de códigos.
Puntos  7

-Frontpage
El editor de páginas web de Microsoft
Puntos  5

-CoffeeCup Free – Editor HTML
Comentamos la versión gratuita de CoffeeCup HTML, un editor de HTML con programa FTP integrado.
Puntos  5
ESTRUCTURA DE UNA PAGINA WEB

Un documento escrito en HTML contendría básicamente las siguientes etiquetas :

-"html"---- Indica el inicio del documento.
-"head"-----Inicio de la cabecera.
-"title"--- Inicio del título del documento.
-"/title"-- Final del título del documento.
-"/head"--- Final de la cabecera del documento.
-"body"-----Inicio del cuerpo del documento.
-"/body"--- Final del cuerpo del documento.
-"/html"--- Final del documento.

COLORES HEXADECIMALES

Con esta Tabla de colores HTML dinámica puede conseguir códigos HTML para los colores básicos. Haga clic en cualquier cuadro de color para conseguir su Código de color HTML:


2. FORMATO DE TEXTO

Caracteres especiales y espacios en blanco:

Caracteres especiales

Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado especial en HTML
(por ej. "<" - menor que).
Para poder mostrarlos debemos usar su nombre en código.

Los nombres de las entidades están compuestos por el signo(&), luego el nombre de la entidad y al final (";" - punto y coma).
Los números de estos caracteres están compuestos por (&), luego (# - numeral), el número de la entidad y al final (";" - punto y coma).

Por ejemplo para mostrar el signo "<" debemos escribir &lt; o &#60;.

El uso más común de los caracteres especiales es el espacio en blanco. Si en un texto figuran 5 espacios en blanco seguidos, HTML automaticamente borra 4.
Para ingresar espacios en blanco usamos "&nbsp;" y HTML los dejará en su lugar.

Otro uso muy frecuente es el de insertar acentos en el código html por medio de los números de las entidades

Sesión Formato de Texto
<BR>	Permite Realizar un Salto de Línea
<pre></pre>	Permite mostrar el texto como el mismo formato del editor
<HR>	Permite crear una línea horizontal
<BLOCKQUOTE></BLOCKQUOTE>	Sirve para dar formato con sangría a un párrafo de documento
<FONT></FONT>	Permite dar formato a la fuente
<B></B>	Establece estilo negrita en le texto
<S></S>	Establece estilo tachado en le texto
<U></U>	Establece Estilo Subrayado En el Texto
<I></I>	Establece estilo cursiva en el texto
<P></P>	Permite separar parrafos
<H1>	Permite definir un titulo donde puede ser de 1 hasta 6
<marquee></marquee>	Permite dar movimiento al texto
<UL></UL>	Permite crear una lista desordenada
<OL></OL>	Permite crear una lista ordenada
ALIGN video: http://www.youtube.com/watch?v=r5RWUPgU0bk	Permite dar alineamiento , left(izquierdo), right(derecha),center(centrado).

Sesión De Hiperenlaces
<a> y </a>.	Permite crear un vínculo o hipervínculo
Tipos de referencia
Referencia absoluta	Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio Ejemplo: <a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>
Referencia relativa al sitio	Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio. Ejemplo: <a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Referencia relativa al documento	Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual Ejemplo: a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Punto de fijacion videos: http://www.youtube.com/watch?v=gYuLtRox6xU	Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto". Ejemplo: <a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>

Sesión de imágenes
<IMG>	Para insertar una imagen es necesario insertar
SRC	Indica el nombre y ubicación del imagen
ALT	Permite definir un texto como comentario
WIDTH	Permite indicar el ancho de la imagen
HEIGHT	Permite indicar el altura de la imagen
ALIGN	Posición de la imagen left(izquierda), right(derecha), top(arriba), bottom(abajo), middle(centro)
BORDER	Permite indicar el borde de la imagen

Sesión de tablas
<TABLE></TABLE>	Perite crear tablas
BACKGROUND	Establece la imagen de fondo de la tabla
BORDERCOLOR	Permite establecer el color de borde
WIDTH	Permite indicar el ancho de la tabla
BORDER	Permite indicar el grosor del borde
ALIGN	Posición de la tabla left(izquierda), right(derecha), top(arriba), bottom(abajo), middle(centro)
CELLSPACING	Indica los espacios que separa las celdas que están dentro de la tabla
CELLPADDING	Indica los espacios que separa el borde  de cada celda con el contenido
VALIGN	Permite crear un alineamiento vertical, top(arriba), bottom(abajo), middle(centro)
COLSPAN	Permite combinar columnas
ROWSPAN	Permite combinar filas
<TH></TH>	Permite establecer el número de celdas
<TD></TD>	Permite crear columnas
<TR></TR> videos: http://www.youtube.com/watch?v=KO0UlCAxoVw	Permite crear filas

Sesión de marcos
<FRAMESET></FRAMESET>	Permite crear varias páginas en una página web, se programa en el head
Cols	Permite establecer el número de columnas
Rows	Permite establecer el número de filas
<FRAME></FRAME>	Permite Definir Las Características Del Marco
SRC	Indica el nombre y la ubicación de la pagina web a mostrar
NAME	Permite asignar un nombre al marco(para trabajar con vinculos)
SCROLLING	Permite Visualizar La Barra De Desplazamiento (Auto,Yes,No)
<NOFRAME></NOFRAME> videos: http://www.youtube.com/watch?v=AXdJnI-bI2o	SIN MARCOS

Sesión de Formularios
<FORM></FORM>	Permite crear formularios
ACTION	Indica programa del servidor web que se utilizará para procesar la información
METHOD	Indica cómo se enviara los datos al servidor(get, post el mas usado)
<INPUT></INPUT>	Permite Definir Los diferentes controles de formulario
TYPE	Permite establecer en tipo de objeto a crear
NAME	Permite asignar un nombre al control
TABINDEX	Especifica el orden de la tabulación
<SELECT></SELECT>	Permite crear los campos de selección(list, combo)
NAME	Permite asignar un nombre al control
<TEXTAREA></TEXTAREA>	Permite crear un cuadro de texto de múltiples líneas
NAME	Permite asignar un nombre que identifique este control
COLS	Establece el número de columnas visibles del área de trabajo
ROWS videos: http://www.youtube.com/watch?v=2OMACZoCTIY	Establece el número de filas visibles del área de trabajo

Sesión de Multimedia
<FORM></FORM>	Permite crear formularios
ACTION	Indica programa del servidor web que se utilizará para procesar la información
METHOD	Indica cómo se enviara los datos al servidor(get, post el mas usado)
<INPUT></INPUT>	Permite Definir Los diferentes controles de formulario
TYPE	Permite establecer en tipo de objeto a crear
NAME	Permite asignar un nombre al control
TABINDEX	Especifica el orden de la tabulación
<SELECT></SELECT>	Permite crear los campos de selección(list, combo)
NAME	Permite asignar un nombre al control
<TEXTAREA></TEXTAREA>	Permite crear un cuadro de texto de múltiples líneas
NAME	Permite asignar un nombre que identifique este control
COLS	Establece el número de columnas visibles del área de trabajo
ROWS videos: http://www.youtube.com/watch?v=U1VkGmh6g8c	Establece el número de filas visibles del área de trabajo

seccion videos

 

abel blanco soto

 

http://www.youtube.com/watch?v=U1VkGmh6g8c

http://www.youtube.com/watch?v=iEoywFvUhhM&feature=related







INTRODUCCION