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 hipertextosEsta 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
Analizamos un editor de código gratuito que te permite editar código PHP, HTML, C, Java, etc.
Puntos 8
-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
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
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
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
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
-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
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 HEXADECIMALESCon 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
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 < o <.
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 " " 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
|
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>
|
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
|
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)
|
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
|
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
|
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
No hay comentarios:
Publicar un comentario