jueves, 18 de noviembre de 2010

HTML

HTML - HyperText Markup Languaje (Lenguaje de Marcado de Hipertexto), como ya sabemos este es el lenguaje más predominante para elaboración de una página web. Se usa para describir la estructura y el contenido en forma de texto. HTML se escribe en forma de <etiquetas >. También puede incluir un script, el cual puede afectar el comportamiento de navegadores web.  

Bueno siguiendo con el tema, HTML tiene ciertos componentes que son muy importantes, entre ellos elementos y sus atrubutos, tipos de dato y la declaración del tipo de documento.


ELEMENTOS

Los elementos son la estructura básica de HTML. Estos tienen dos propiedades: atributos y restricciones, estos son necesarios para que el documento HTML se considere válido. Un elemento normalmente, tiene una etiqueta de inicio < nombre_elemento>y una etiqueta de cierre < / nombre_elemento> . Los atributos de estos elementos se encuentran en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas. < nombre_elemento atributo = "valor" >Contenido< / nombre_elemento>. Existen ciertos elementos, como < br> que no tienen contenido ni llevan etiqueta de cierre.

Les pondré algunos ejemplos de estos elementos:

< html> --> este se tiene que poner siempre para empezar a escribir el html y al final de todo tu html lo tienes que cerrar.

< head>Ejemplo --> esto se pone para que sea la cabeza de la página, es lo que aparece en las pestañas de la página o en el título de arriba de la barra de herramientas del navegador.

< title></span></b><span style="font-family: "Trebuchet MS",sans-serif;">Progra web</span><b><span style="font-family: "Trebuchet MS",sans-serif;">Progra web--> este es el título principal de la página el que aparece cuando se abre tu página mero arriba.

< body> --> aquí comienza tu cuerpo principal, donde irá toda la información, tablas, imagenes y todo lo de la página web.

hola soy carmen! -->Esto es el texto que puse dentro del body.

< / body >
--> aquí se cierra la etiqueda body
< / html >-->aquí se cierra la etiqueta html.

El marcado estructural es el que describe el propósito del texto. Por ejemplo <h2 >Carmen</ h2>; establece que "Carmen" es un encabezado de segundo nivel. Este marcado no define como se verá el elemento. Puedes decidir un formato específico utilizando las hojas de estilo css.

El marcado presentacional es el que describe la apariencia del texto, sin importar que función tenga. Por ejemplo < u >subrayado< / u> indica que ese texto en navegador web debe mostrarse asi: subrayado así como también < b > < /b > se muestra como negrita, entre otras cosas.

El marcado hipertextual se utiliza para enlazar partes de documentos con otros documentos o con otras parets del mismo documento. Para crear estos enlaces se tiene que poner la etiqueta < a > junto al atributo ahref, el cual establece la dirección URL a la que apunta el enlace. Por ejemplo un enlace a mi blog sería < a href = "http://carmen-suarez.blogspot.com >BLOG CARMEN< / a>. Esto también se utiliza para enlazar a imagenes.


ATRIBUTOS DEL BODY

< body bgcolor=... >
Es para definir el color de fondo

< body text=... >
Es para definir el color de texto
< body link=... >
Es para definir el color de los enlaces 

ETIQUETAS DE TEXTO

< pre > < / pre>
Crea texto preformateado
< h1> < / h1>
Crea el título principal
<i  > < / i >
Crea texto en itálicas
< tt > < / tt >
Crea texto teletipo
< cite > < / cite >
Crea una cita, usando itálicas
< strong > < / strong >
Enfatiza una palabra (italicas o negritas)

FORMATO

< p > < /p >
Crea un párrafo nuevo
< p align=... >
Alinea un párrafo
< dl > < / dl >
Crea una lista de definición
 < ol > < / ol >
Crea una lista enumerada
< ul > < / ul >
Crea una lista con puntos

TABLAS 

< table > < / table >
Crea una tabla
< tr > < / tr >
Filas de las tablas

< td > < / td>
Celdas de la tabla

ATRIBUTOS DE LAS TABLAS
< table border=... >
Grosor del borde de la tabla

< table cellspacing=... >
Espacio entre las celdas

< table width=... >
Ancho de la tabla en pixeles o en porcentaje

< tr colspan=... >
Cantidad de columnas dentro de una celda

< td rowspan=... >
Cantidad de filas de una celda


FORMULARIO
< form > < / form >
Crea un formulario

< select multiple name = "NAME" size=... >< / select >
Crea un menú de desplazamiento. Size es el número de opciones visibles antes de tener que desplazarse.
< option >
Es cada opción del menú

< select name = "NAME" > </  select >
Crea un menú desplegable
< textarea name = "NAME" cols = 40 rows = 8 > < / textarea >
Crea una área de texto

< input type = "checkbox" name = "NAME" >
Crea una checkbox

< input type="radio" name="NAME" value="x" >
Crea un radio button
< input type = text name = "foo" size = 20 >
Crea un área de texto de una sola línea. Size es el maximo de caracteres

< input type = "submit" value = "NAME" >
Crea un botón de envio

Les dejo un tutorial de HTML por si no saben bien que onda con esto, les servirá mucho. :)

Tutorial de HTML
  

1 comentario: