Jime..html blog blogger blospot

MARCAS BÁSICAS
<html></html> Al principio y al final de todo documento.
<head> </head> Cabecera del documento. Dentro del head se ponen las
etiquetas:
<title> </title> indica el título de la página para el navegador.
<meta> permite aportar metainformación al documento, para su mejor
identificación e indexación por los motores de búsqueda.
<body> </body> Dentro de esta etiqueta se insertan los contenidos del documento. El cierre de la etiqueta </body>
se coloca justo antes del cierre </html>
ETIQUETAS DE HTML

LA ETIQUETA <BODY> PUEDE LLEVAR INCLUIDA INFORMACIÓN SOBRE
LAS PROPIEDADES DE LA PÁGINA
PROPIEDADES DE LA PÁGINA
<body
bgcolor="#xxyyzz">
define el color de fondo
de la página.
<body
text="#xxyyzz">
define el color por
defecto del texto
en la página
<body
link="#xxyyzz">
define el color de
los enlaces.
<body vlink="#xxyyzz">
define el color de los
enlaces visitados.
<body
alink="#xxyyzz">
define el color de
los enlaces
activos.
<body
background="imag
en.gif"> establece
una imagen para el
fondo de la p'agina
Todos estos parámetros se
pueden agrupar en una única
etiqueta <body>:
<body bgcolor="#xxyyzz"
text="#xxyyzz"
link="#xxyyzz"
vlink="#xxyyzz"
alink="#xxyyzz">

Sirve para anotar
aclaraciones
'privadas' del autor de
la
página. Lo que se
escribe dentro de
esta etiqueta es
ignorado por el
navegador y
no se muestra en la
página

FORMATO DE
TEXTOS
<b> </b>
negrita
(también sirve
la etiqueta
<strong>…
</strong>)
<i> </i>
cursiva
(también sirve
la etiqueta
<em>…</em>)
<u> </u>
subrayado

<font size=”X”> ……
</font> marca el tamaño
de los caracteres, donde
X es un
valor del 1 a 7, o un valor
relativo (+ 1-7).
<font color=”#XXYYZZ”>
…… </font> define el
color del texto, donde
XXYYZZ es
un valor formado por
letras y números que
indica el color.
<font size=X
color=#XXYYZZ
face=fuente escogida>
…… </font>
<pre> preformateado.
Respeta espacios, saltos
de línea y los retornos
utilizados.
<font face=”arial”> ……
</font> determina el tipo
de la fuente.
La etiqueta <font> puede
incluir los tres
parámetros (tamaño,
fuente y color):
<blink> hace parpadear
el texto (no para
Explorer)

•FORMATO
DE
PÁRRAFOS
<p> salto de
párrafo </p>
•<blockquote>
</blockquote>
sangrado.
•<br> salto de
línea
<center>
centrar el
texto.
•<p
align=center>
párrafo
centrado.
•<p align=left>
párrafo
alineado a la
izquierda.
<p align=right>
párrafo
alineado a la
derecha.

CREACIÓN DE
LISTAS
LISTA NO
NUMERADA
<ul>
<li>primer
elemento de la
lista</li>
<li>segundo
elemento de la
lista</li>
<li>tercer
elemento de la
lista</li>
</ul> cierra lista
LISTA
NUMERADA
<ol>
<li>primer
elemento de la
lista</li>
<li>segundo
elemento de la
lista</li>
</ol> cierra lista.
LISTA DE
GLOSARIO O
DEFINICIÓN:
<dl>
<dt>término
que se va a
definir</dt>
<dd>definición
del
término</dd>
</dl> cierra lista.

LÍNEAS
HORIZONTALES
SEPARADORAS
<hr> línea
horizontal.
<hr width="x%">
anchura de la
línea en
porcentaje.
<hr
align=center>
línea alineada en
el centro.
<hr size=x>
altura de la línea
en píxeles.
<hr width=x>
anchura de la
línea en píxeles.
<hr align=left>
línea alineada a
la izquierda.
<hr align=right>
línea alineada a
la derecha.
<hr noshade>
línea sin efecto
de sombra.

IMÁGENES
<img src="dirección de la
imagen” "> indica la ruta
de la imagen.
<img ... border=”X">
establece un borde de X
pixels en torno a la imagen.
<img ... height="XX"
width="YY"> establece un
tamaño de la imagen
(altura y
anchura) en pixels.
<img ... alt="texto explicativo">
se muestra un texto al pasar el
cursorsobre la
imagen.
<img ... align="bottom">
alineación inferior del texto
respecto de la imagen.
<img ... align="middle">
alineación del texto en el
medio de la imagen.
<img ... align="top">
alineación superior del
texto respecto de la
imagen.
<img ... align="left">
alineación izquierda de la
imagen en el párrafo.
<img ... align="right">
alineación derecha de la
imagen en el párrafo.
<img ... hspace=X>
espacio horizontal entre
la imagen y el texto.
<img ... vspace=y>
espacio vertical entre la
imagen y el texto.

TABLAS
útiles para componer la
página y para presentar
datos tabulares.
<table>……</table>
Define dónde comienza
y termina la tabla
<table width="XX%">
Determina la anchura de la
tabla. Puede darse en
píxeles
(no lleva el símbolo %), o en
porcentaje de la página.
<table height="XX>
Determina la altura de
la tabla en píxeles.
<table border="X">
Establece el grosor en
píxeles del borde de la
tabla
<table height="XX> Determina la
altura de la tabla en píxeles.
<table border="X"> Establece el
grosor en píxeles del borde de la
tabla
<table height="XX>
Determina la altura
de la tabla en píxeles.
<table border="X">
Establece el grosor
en píxeles del borde
de la tabla

EJEMPLO DE TABLA
<table width="100%" height="200" border="1" cellspacing="3"
cellpadding="5">
<tr>
<td>primera columna de la fila 1</td>
<td>segunda columna de la fila 1</td>
<td>tercera columna de la fila 1</td>
</tr>
<tr>
<td>primera columna de la fila 2</td>
<td>segunda columna de la fila 2</td>
<td>tercera columna de la fila 2</td>
</tr>
</table>
Dentro de cada celda se puede
alinear el texto o cualquier
contenido, cambiar el
color de fondo, con las etiquetas
habituales para texto, párrafos o
imágenes.
<td rowspan="2"> </td> une
dos celdas de dos filas adyacentes,
en una
única celda.
<td colspan="2"> </td> une dos
celdas de dos columnas adyacentes
en una
sola celda.

<a
href=”http://www.servidor.com/directorio/p
agina.htm”>Enunciado del enlace</a>
<a href=”mailto:dirección de mail”> Vínculo a una
dirección de correo-e.
Dentro del a href:
target="_blank" Abre la página en un nuevo
navegador.
target=”_top” Abre la página en toda la pantalla
para evitar los frames.
title=”texto descriptivo del enlace” permite incluir
una descripción del destino del
enlace
<a href=”dirección página#marcador”> dirige el
enlace a un punto concreto de otra página
<a href=”#marcador”> dirige un enlace interno al
punto dónde está el marcador.
<a name=”marcador”> define un marcador (ancla) en
un punto concreto de una página, para poder
enlazarlo posteriormente.
CREACIÓN DE ENLACES

PÁGINA CON MARCOS (no lleva body)
<frameset cols="20%, 80%"> (divide la página en dos marcos
en forma de columnas, cada una con su anchura
correspondiente en porcentaje)
<frame src="menu.htm" name="navegacion"> (archivo
menu.htm que corresponde al marco de la izquierda,
llamado “navegación”, 20% de anchura)
<frame src="principal.htm" name="contenidos">
(archivo principal.htm que
corresponde al marco de la derecha, llamado
“contenidos”, 80% de anchura)

Las páginas también se
pueden dividir en marcos
horizontales con
<frameset rows=" , ">
frameborder="NO" evita
que se vea el borde entre
los marcos
framespacing="2"
establece 2 pixels de
separación entre los
marcos
scrolling="NO" evita que
aparezca una barra de
scroll dentro del marco
scrolling="auto" mostrará la
barra de scroll sólo si es
necesario

Jime..html blog blogger blospot

Más contenido relacionado

La actualidad más candente (12)

Destacado (20)

Similar a Jime..html blog blogger blospot (20)

Último (20)

Jime..html blog blogger blospot