| Lenguaje HTML Básico |
<!DOCTYPE>
Es la primera parte de una página web, aún antes que la etiqueta <html>.
Le indica al navegador que especificación de HTML se está utilizando
HTML 4.01: los tipos de documento que define son: strict, transitional y frameset.
Strict
Se usa cuando se utilizan CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional
Presenta elementos en proceso de transición de acuerdo a los estándares del W3C.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frames
Debe usarse en documentos que incluyen frames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
|
<html></html>
Abre y cierra un documento HTML |
<head></head>
Encabezado de la página - aquí se coloca titulo, metatags, e informacion para buscadores entre otras cosas.
Está información no es visible. |
<body></body>
Dentro de esta etiqueta va toda la parte visible de la página web. |
|
|
| Etiquetas del Encabezado |
<title></title>
El título de la página web. |
|
| Atributos de la etiqueta 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.
|
|
| Etiquetas HTML 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.) |
|
| Ligas |
<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 |
|
| Formato y presentación |
<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 |
|
| Elementos Gráficos |
<img
src="name">
Incorpora una imagen
|
<img
src="name" align=?>
Alinea la imagen: izquierda, derecha y centro |
<img
src="name" 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 |
|
| 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 |
|
| Marcos (frames) |
<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 |
|
| 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 |
| Otras Etiquetas HTML |
<EMBED SRC="url o ruta de archivo" VOLUME="50" HEIGHT="50" WIDTH="130">
Incorpora sonido con panel de control en la pantalla. |
<
object width="600" height="300">
<param name="movie" value="miarchivo.swf">
<embed src="miarchivo.swf" width="600" height="300">
</embed>
</object>
Para insertar una pelicula flash swf en html |
<!-- Este es un comentario -->
Inserta comentarios no visibles en la página.
|
<
iframe src ="/mipagina.html"> ...
</iframe>
>
Inserta un frame dentro de una página. Inline Frame. |
<
script type="text/javascript">
document.write("<h2>bienvenido!</h2>")
</script>
Inserta un script dentro de una página html. |
|
<span style="color:#00FFFF;"> </span>
Aplica a un grupo de texto un estilo, por ejemplo font, tamaño, color. |
