Etiquetas HTML

¿Qué son las etiquetas de HTML?
Definición: Las etiquetas HTML son fragmentos de texto rodeados por corchetes
angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código
HTML.
HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de

Internet. Se trata de la sigla que corresponde a Hipertexto Maru Lenguaje, es decir,
Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato
de Documentos para Hipertexto.
Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a través
de corchetes o paréntesis angulares: < y >. Entre sus componentes, los elementos dan
forma a la estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido
en sí mismo y sus atributos).
Por otra parte, cabe destacar que el HTML permite ciertos códigos que se conocen
como scripts, los cuales brindan instrucciones específicas a los navegadores que se
encargan de procesar el lenguaje. Entre los scripts que pueden agregarse, los más
conocidos y utilizados son JavaScript y PHP.
El marcado estructural es el que estipula la finalidad del texto, aunque no define cómo
se verá el elemento. El marcado presentaciones, por su parte, es el que se encarga de
señalar cómo se verá el texto más allá de su función.
Para conocer el código HTML que utiliza una página web, hay que seleccionar Ver
código fuente en nuestro navegador (como Internet Explorer o Mozilla Firefox). Al
elegir esta opción, se abrirá el editor de texto con el código HTML de la página que se
está visualizando.
ETIQUETAS DE HTML
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. Hay distintos
tipos:
<meta name="description" content="Frase descriptiva de los contenidos de
la página">
<meta name="keywords" content="Palabras clave que resuman la temática
de los contenidos de la página”>
<meta name="author" content="Nombre/s del autor/es de la
página"> 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 PÁGINA
La etiqueta <body> puede llevar incluida información sobre las 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="imagen.gif"> establece una imagen para el fondo de
la página.
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 face=”arial”> …… </font> determina el tipo de la fuente.
La etiqueta <font> puede incluir los tres parámetros (tamaño, fuente y
color): <font size=X color=#XXYYZZ face=fuente escogida> …… </font>
<pre> preformateado. Respeta espacios, saltos de línea y los retornos
utilizados. <blink> hace parpadear el texto (no para Explorer)
FORMATO DE PÁRRAFOS
<p> salto de párrafo </p>
<br> salto de línea
<blockquote> </blockquote> sangrado.
<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 width=x> anchura de la línea en
píxeles. <hr size=x> altura de la línea en píxeles.
<hr align =center> línea alineada en el
centro. <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íxel
es (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 cellspacing="X"> Define el espacio en píxeles entre las
celdas
<table cellpadding="X"> Define el espacio en píxeles 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, párrafos o
imágenes.
CREACIÓN DE ENLACES
<a href=”http ://www.contoso.com/directorio/pagina.htm”>Enunciado
del enlace</a>
<a href=”mailto:dirección de mail”> Vínculo a una dirección de correo-e.
<a name=”marcador”> define un marcador (ancla) en un punto concreto de
una página, para poder enlazarlo posteriormente.
<a href=”#marcador”> dirige un enlace interno al punto dónde está el
marcador. <a href=”dirección página#marcador”> dirige el enlace a un punto
concreto de otra página.
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
PÁGINA CON MARCOS (no lleva body)
<html>
<head>
<title>título de la página</title>
</head>
<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)
</frameset>
</html>
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
Ejemplo de una página con tres marcos en forma de filas. La superior y la
inferior tienen un tamaño 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">
</f rame set>

Etiquetas HTML

Cargado por

Copyright:

Formatos disponibles

Etiquetas HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Etiquetas HTML

Cargado por

Copyright:

Formatos disponibles

¿Qué son las etiquetas de HTML?

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de

También podría gustarte