PDA

Ver la versión completa : Clases de HTML



supercito
16/09/2008, 13:21
Clases de HTML por supercito

1º Clase

Estructura basica de HTML:

Ejemplo


<!DOCTYPE> (eso va con mas info solo que en estas clases no lo veremos jeje)
<html>

<head>

<!--------Encabezado de la página - aquí se coloca titulo, metatags,
e informacion para buscadores entre otras cosas.
Está información no es visible.---->

<title> xat ayuda </title>

</head>

<body>

<!-------Dentro de esta etiqueta va toda la parte
visible de la página web.---->

<hl>XAT AYUDA</hl>

<p> Solo ayuda referida a XAT</p>

</body>

</html>

Nota: las etiquetas se abren con la palabra y se cierra con / y la palabra ejemplo:
<head> </head>

supercito
16/09/2008, 13:22
2º Clase


ALGUNOS ATRIBUTOS DEL BODY


<body bgcolor=?>
Configura el color de fondo de la página, usando el valor del código de color hexadecimal.
<body text=?>
Configura el color por defecto del texto, usando el valor del código de color hexadecimal.
<body link=?>
Configura el color de las ligas, usando el valor del código de color hexadecimal.
<body vlink=?>
Configura el color de las ligas visitadas, usando el valor del código de color hexadecimal
<body alink=?>
Configura el color de las ligas al darle clic, usando el valor del código hexadecimal.

supercito
16/09/2008, 13:24
3º Clase

ETIQUETAS DE TEXTO


<pre></pre>
Texto pre-formateado

<hl></hl>
Título más grande

<h6></h6>
Título más pequeño

<b></b>
Negritas

<u></u>
Subrayado

<i></i>
Cursivas

<tt></tt>
Tipo máquina de escribir

<cite></cite>
Cita, en cursiva

<em></em>
Resalta una palabra, negrita o cursiva

<strong></strong>
Resalta una palabra o grupo de palabras

<font face=?></font>
Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc.

<font size=?></font>
Coloca tamaño de letra, de 1 a 7

<font color=?></font>
Configura el color, usand valor hexadecimal o nombre directo (blue, green, etc.)

supercito
16/09/2008, 13:26
4º Clase

ENLACES


<a href="URL"></a>
Hipervínculo

<a href="mailto:EMAIL"></a>
Hipervínculo mailto (para envío de correo)

<a name="name"></a>
Ancla en el mismo documento

<a href="#name"></a>
Liga hacia algún lugar dentro del mismo sitio

supercito
16/09/2008, 13:28
5º Clase

FORMATO Y PRESENTACION


<p></p>
Nuevo párrafo

<p align=?>
Alinea el párrafo hacia la izquierda, derecha o al centro

<br>
Inserta un interlineado suave. Crea otra línea

<blockquote>
</blockquote>
Texto indentado de ambos lados

<dl></dl>
Lista de definiciones (glosario)

<dt>
Precede a cada término en definiciones

<dd>
Precede cada definición

<ol></ol>
Lista ordenada

<li></li>
Entrada en una lista

<ul></ul>
Lista con viñetas sin ordenar

<div align=?>
Para formato a porciones grandes del documento html, incluyendo hojas de estilo

supercito
16/09/2008, 13:31
6º Clase

GRAFICOS


<img src="url">
Incorpora una imagen

<img src="url" align=?>
Alinea la imagen: izquierda, derecha y centro

<img src="url" border=?>
Determina el contorno de la imagen. Un valor 0 no tendrá contorno

<map></map>
Mapa de imágenes

<body background="URL o ruta de archivo"></body>
Coloca la imagen como fondo de la página

<hr>
Linea horizontal

<hr size=?>
Tamaño de una linea horizontal

<hr width=?>
Ancho de linea horizontal, ya sea porcentaje o valor absoluto.

<hr noshade>
Linea horizontal sin sombra

supercito
16/09/2008, 13:33
7º Clase

TABLAS


<table></table>
Crea tabla

<tr></tr>
Crea filas en una tabla

<td></td>
Crea celda en una fila

<th></th>
Encabezado de tabla, texto normal, negrita y centrado


Atributos de Tablas


<table border=#>
Coloca contorno en las celdas de la tabla

<table cellspacing=#>
Espacio entre las celdas de una tabla

<table cellpadding=#>
Espacio entre el contorno de una celda y su contenido

<table width=# or %>
Ancho de la tabla, en pixeles o porcentaje del ancho de la página

<tr align=?> or <td align=?>
Alineación para las celdas, izquierda derecha, centro

<tr valign=?> or <td valign=?>
Alineación vertical de las celdas, arriba, abajo,enmedio

<td colspan=#>
Expansión de una celda, en número de columnas

<td rowspan=#>
Expansión de una celda, en número de celdas

<td nowrap>
Texto continuo dentro de una celda

supercito
16/09/2008, 13:35
8º Clase

FRAMES (marcos)


<frameset></frameset>
Substituye a la etiqueta HTML body en documentos con frames. Puede insertarse en otros framesets

<frameset rows="value,value">
Número de lineas en un frameset, usando pixeles o porcentaje de ancho

<frameset cols="value,value">
Número de columnas en un frameset, usando pixeles o porcentaje de ancho

<frame>
Frame singular dentro de un framset

<noframes></noframes>
Texto que aparecerá en navegadores que no soportan frames

Atributos de Frames


<frame src="URL">
Especifica que página html se muestra

<frame name="name">
Nombra al frame para que sea identificado por otros frames y accesado

<frame marginwidth=#>
Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1

<frame marginheight=#>
Margen superior e inferior de un grame, igual o mayor a 1

<frame scrolling=VALUE>
Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto

<frame noresize>
No permite al usuario modificar el tamaño de un frame

supercito
16/09/2008, 13:39
9º Clase


FORMAS


<form></form>
Forma

<select name="name"></select>
Menú desplegable

<option>
Opción del menú desplegable

<textarea name="name" cols=40 rows=8></textarea>
Crea una caja de texto, columnas es el ancho y las lineas la altura (cols y rows)

<input type="checkbox" name="name">
Crea un checkbox.

<input type="radio" name="name" value="x">
Crea botón de radio.

<input type=text name="name" size=20>
Crea una opción de texto para entrada de información o despliegue

<input type="submit" value="name">
Crea botón de envío de forma tipo submit

<input type="image" border=0 name="name" src="name.gif">
Crea botón de envío con imagen

<input type="reset">
Crea botón de limpieza (reset). Vacía la forma


ESPERO LES SIRVA Y SI ENCUENTRAN ERRORES HAGAN EL FAVOR DE COMUNICARLO

GRACIAS!!


FUENTE: SAN GOOGLE Y MI CABEZA



..::supercito::..