HTML Basico

HTML
Lenguaje de marcas de texto enriquecido (Hyper Text Marked Language), es un

lenguaje basado en etiquetas o tags, que van entre unos signos de mayor y menor.
<Etiqueta> Tag
Estructura Bsica
<HTML>
<HEAD>
Encabezado
</HEAD>
Codigo HTML
<BODY>
Cuerpo
</BODY>
</HTML>
Ejemplo
<HTML>
<HEAD>
<TITLE> Mi primera Pagina web</TITLE>
</HEAD>
<BODY>
Esta es mi primera pgina web con HTML
</BODY>
</HTML>
Etiqueta HEAD
En la etiqueta HEAD nosotros podemos cambiar el titulo de la pagina, insertar codigo

JavaScript, e incluir los METATAGS.
<TITLE></TITLE> Le asigna un titulo a nuestra pagina.
Etiqueta BODY
La etiqueta BODY tiene ciertos parmetros que nos permiten darle un color de fondo a
nuestra pgina, o ponerle una imagen de fondo, entre otras opciones.
<BODY BGCOLOR = #009911> Modifica el color de fondo de la pagina

<BODY BACKGROUND = imagen.jpg> Pone una imagen de fondo en la pagina.
Actividad
Buscar con que otros parmetros trabaja la etiqueta Body, y presentar un trabajo de lo
encontrado, segn las pautas del profesor
Etiquetas para la edicin de texto
<FONT> </FONT> Cambia el tipo, tamao y color de la fuente que se mostrara en la
pagina.
<FONT FACE = > tipo de fuente

<FONT COLOR = #FFFFFF> color del texto
<FONT SIZE = > Tamao de la fuente
<B></B> Pone el texto en negrita. (Tambin funciona con STRONG)
<I></I> Pone el texto en cursiva. (Tambin funciona con EM)
<U></U> Subraya el texto.
<P></P> Se utiliza para introducir los textos en prrafos.
<DIV ALIGN = ></DIV> Se utiliza para alinear el texto o parrafo.
<BR> Da un salto de linea en la pagina.
<UL></UL> Uso de vietas en el texto.
<LI></LI> Marca cada texto con una vieta

<LI TYPE = > Cambia el tipo de vieta que se mostrara.
Etiquetas de Diseo
<HR> Dibuja una lnea horizontal en la pagina web.
<H1></H1> Esta etiqueta sirve para introducir un texto de tipo encabezado, los tamaos
de los encabezados varan por nmeros que van desde el 1 al 6, siendo el uno el mas
grande y seis el mas pequeo.
Encabezado 1
Encabezado 2
Encabezado 3
Encabezado 4
Encabezado 5
Encabezado 6
<IMG SRC=imagen.jpg> Inserta una imagen en la pagina, con os atributos HEIGHT

WIDTH se puede cambiar el tamao de la imagen insertada.
<MARQUEE></MARQUEE> Esta etiqueta permite introducir un texto animado que se

desplazara en forma horizontal o vertical.
Tecnologa de la informacin
http://www.unav.es/dpp/tecnologia/
ETIQUETAS DE HTML
MARCAS BSICAS
<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 ttulo de la pgina para el navegador.
<meta> permite aportar metainformacin al documento, para su mejor
identificacin e indexacin por los motores de bsqueda. Hay distintos tipos:
<meta name="description" content="Frase descriptiva de los contenidos de la
pgina">
<meta name="keywords" content="Palabras clave que resuman la temtica de
los contenidos de la pgina>
<meta name="author" content="Nombre/s del autor/es de la pgina">
Tras cerrar el head el se pone la etiqueta:
<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>
PROPIEDADES DE LA PGINA
La etiqueta <body> puede llevar incluida informacin sobre las propiedades de la
pgina:
<body bgcolor="#xxyyzz"> define el color de fondo de la pgina.
<body text="#xxyyzz"> define el color por defecto del texto en la pgina.
<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="imagen.gif"> establece una imagen para el fondo de la
pgina.
Todos estos parmetros 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
pgina. Lo que se escribe dentro de esta etiqueta es ignorado por el navegador y
no se muestra en la pgina.
FORMATO DE TEXTOS
<b> </b> negrita (tambin sirve la etiqueta <strong> </strong>)
<i> </i> cursiva (tambin sirve la etiqueta <em></em>)
<u> </u> subrayado
<font size=X> </font> marca el tamao 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 nmeros que indica el color.
<font face=arial> </font> determina el tipo de la fuente.
La etiqueta <font> puede incluir los tres parmetros (tamao, fuente y color):
<font size=X color=#XXYYZZ face=fuente escogida> </font>
<pre> preformateado. Respeta espacios, saltos de lnea y los retornos utilizados.

<blink> hace parpadear el texto (no para Explorer)
FORMATO DE PRRAFOS
<p> salto de prrafo </p>
<br> salto de lnea
<blockquote> </blockquote> sangrado.
<center> centrar el texto.
<p align=center> prrafo centrado.
<p align=left> prrafo alineado a la izquierda.
<p align=right> prrafo alineado a la derecha.
CREACIN 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 definicin:

<dl>
<dt>trmino que se va a definir</dt>
<dd>definicin del trmino</dd>
</dl> cierra lista.
LNEAS HORIZONTALES SEPARADORAS

<hr> lnea horizontal.
<hr width="x%"> anchura de la lnea en porcentaje.
<hr width=x> anchura de la lnea en pxeles.
<hr size=x> altura de la lnea en pxeles.
<hr align=center> lnea alineada en el centro.
<hr align=left> lnea alineada a la izquierda.
<hr align=right> lnea alineada a la derecha.
<hr noshade> lnea sin efecto de sombra.
IMGENES
<img src="direccin 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 tamao 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"> alineacin inferior del texto respecto de la imagen.
<img ... align="middle"> alineacin del texto en el medio de la imagen.
<img ... align="top"> alineacin superior del texto respecto de la imagen.
<img ... align="left"> alineacin izquierda de la imagen en el prrafo.
<img ... align="right"> alineacin derecha de la imagen en el prrafo.
<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 pgina y para presentar datos tabulares.

<table></table> Define dnde comienza y termina la tabla
<table width="XX%"> Determina la anchura de la tabla. Puede darse en pxeles

(no lleva el smbolo %), o en porcentaje de la pgina.
<table height="XX> Determina la altura de la tabla en pxeles.
<table border="X"> Establece el grosor en pxeles del borde de la tabla
<table cellspacing="X"> Define el espacio en pxeles entre las celdas
<table cellpadding="X"> Define el espacio en pxeles entre el borde y el texto
<tr><tr> determina cada una de las filas de la tabla

<td></td> determina cada una de las columnas dentro de las filas
Ejemplo de tabla de 2 filas y 3 columnas
<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>
<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.
Dentro de cada celda se puede alinear el texto o cualquier contenido, cambiar el

color de fondo, con las etiquetas habituales para texto, prrafos o imgenes.
CREACIN DE ENLACES
<a href=http://www.servidor.com/directorio/pagina.htm>Enunciado del
enlace</a>
<a href=mailto:direccin de mail> Vnculo a una direccin de correo-e.
<a name=marcador> define un marcador (ancla) en un punto concreto de una
pgina, para poder enlazarlo posteriormente.
<a href=#marcador> dirige un enlace interno al punto dnde est el marcador.
<a href=direccin pgina#marcador> dirige el enlace a un punto concreto de otra
pgina.
Dentro del a href:

target="_blank" Abre la pgina en un nuevo navegador.
target=_top Abre la pgina en toda la pantalla para evitar los frames.
title=texto descriptivo del enlace permite incluir una descripcin del destino del
enlace
PGINA CON MARCOS (no lleva body)
<html>
<head>
<title>ttulo de la pgina</title>
</head>
<frameset cols="20%, 80%"> (divide la pgina 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 navegacin, 20% de anchura)
<frame src="principal.htm" name="contenidos"> (archivo principal.htm que

corresponde al marco de la derecha, llamado contenidos, 80% de anchura)
</frameset>
</html>
Las pginas tambin 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 separacin entre los marcos
scrolling="NO" evita que aparezca una barra de scroll dentro del marco
scrolling="auto" mostrar la barra de scroll slo si es necesario
Ejemplo de una pgina con tres marcos en forma de filas. La superior y la inferior
tienen un tamao fijo de 80 pixels; la del medio es adaptable. No se muestran los
bordes entre los marcos
<frameset rows="80,*,80" frameborder="NO" border="0" framespacing="0">
<frame src="navegacion_up.htm" name="topFrame" scrolling="NO">

<frame src="principal.htm" name="mainFrame">
<frame src=" navegacion_down.htm " name="bottomFrame" scrolling="NO">
</frameset>
HTML
Tablas
Las tablas nos permiten organizar el contenido de nuestra pgina y distribuirlo mas
uniformemente.
<TABLE>
<TR>
<TD>
Columna Fila Tabla
</TD>
</TR>
</TABLE>
La etiqueta TABLE tiene parmetros que permiten cambiar el aspecto de nuestra tabla.
Entre los ms importantes tenemos:
BORDER que nos da el ancho de las lneas que dividen la tabla.

BORDERCOLOR determina el color de las lneas que dividen la tabla.
BGCOLOR nos da el color de fondo de la tabla.
ALIGN determina la alineacin que tendr la tabla.
Estos y otros parmetros tambin son aplicables para las celdas individualmente.
Vnculos
<A HREF = ></A>
Con esta etiqueta es posible crear hipervnculos, para saltar a otras pginas o a un
determinado punto dentro de la misma pgina.
<A HREF="MAILTO:aaaa@xxx.com>Mail</A> Crea un vinculo a un direccin de

correo electronico.
<A NAME=""></A> Crea un ancla a la cual se podra acceder luego desde cualquier
posicin de la pagina.

HTML Basico

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Basico

Hochgeladen von

Copyright:

Verfügbare Formate

HTML

Lenguaje de marcas de texto enriquecido (Hyper Text Marked Language), es un

En la etiqueta HEAD nosotros podemos cambiar el titulo de la pagina, insertar codigo

<TITLE></TITLE> Le asigna un titulo a nuestra pagina.

<BODY BGCOLOR = #009911> Modifica el color de fondo de la pagina

<FONT FACE = > tipo de fuente

<B></B> Pone el texto en negrita. (Tambin funciona con STRONG)

<I></I> Pone el texto en cursiva. (Tambin funciona con EM)

<U></U> Subraya el texto.

<P></P> Se utiliza para introducir los textos en prrafos.

<DIV ALIGN = ></DIV> Se utiliza para alinear el texto o parrafo.

<BR> Da un salto de linea en la pagina.

<UL></UL> Uso de vietas en el texto.

<LI></LI> Marca cada texto con una vieta

<IMG SRC=imagen.jpg> Inserta una imagen en la pagina, con os atributos HEIGHT

<MARQUEE></MARQUEE> Esta etiqueta permite introducir un texto animado que se

<font size=X> </font> marca el tamao de los caracteres, donde X es un

<pre> preformateado. Respeta espacios, saltos de lnea y los retornos utilizados.

lista de glosario o definicin:

LNEAS HORIZONTALES SEPARADORAS

TABLAS: tiles para componer la pgina y para presentar datos tabulares.

<table width="XX%"> Determina la anchura de la tabla. Puede darse en pxeles

<tr><tr> determina cada una de las filas de la tabla

Ejemplo de tabla de 2 filas y 3 columnas

<table width="100%" height="200" border="1" cellspacing="3" cellpadding="5">

<td rowspan="2">&nbsp;</td> une dos celdas de dos filas adyacentes, en una

Dentro de cada celda se puede alinear el texto o cualquier contenido, cambiar el

Dentro del a href:

PGINA CON MARCOS (no lleva body)

<frameset cols="20%, 80%"> (divide la pgina en dos marcos en forma de

<frame src="menu.htm" name="navegacion"> (archivo menu.htm que

<frame src="principal.htm" name="contenidos"> (archivo principal.htm que

Las pginas tambin se pueden dividir en marcos horizontales con

frameborder="NO" evita que se vea el borde entre los marcos

<frameset rows="80,*,80" frameborder="NO" border="0" framespacing="0">

<frame src="navegacion_up.htm" name="topFrame" scrolling="NO">

BORDER que nos da el ancho de las lneas que dividen la tabla.

<A HREF = ></A>

<A HREF="MAILTO:aaaa@xxx.com>Mail</A> Crea un vinculo a un direccin de

Das könnte Ihnen auch gefallen

<td rowspan="2"> </td> une dos celdas de dos filas adyacentes, en una