Scribd
Cargar
13 vistas8 páginas

Fundamentos de HTML

El documento proporciona una guía sobre los fundamentos de HTML, incluyendo las etiquetas básicas como <HTML>, <HEAD>, y <BODY>, así como su estructura y uso. Se describen diversas etiquetas para el contenido, como encabezados, párrafos, tablas, y listas, además de atributos para personalizar el estilo y formato. También se abordan enlaces y la importancia del hipertexto en la web.

Cargado por

dant18
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
13 vistas8 páginas

Fundamentos de HTML

El documento proporciona una guía sobre los fundamentos de HTML, incluyendo las etiquetas básicas como <HTML>, <HEAD>, y <BODY>, así como su estructura y uso. Se describen diversas etiquetas para el contenido, como encabezados, párrafos, tablas, y listas, además de atributos para personalizar el estilo y formato. También se abordan enlaces y la importancia del hipertexto en la web.

Cargado por

dant18
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Computación e Informática Tercer Ciclo

FUNDAMENTOS DE HTML

1. Etiquetas básicas de HTML

Las etiquetas básicas de HTML, de obligada presencia en todo documento son:

• <HTML>: Es la etiqueta que define el inicio del documento html, le indica al navegador que
todo lo que viene a continuación debe tratarlo como una serie de códigos html.

• <HEAD>: Define la cabecera del documento html, esta cabecera suele contener
información sobre el documento que no se muestra directamente en el navegador. Como
por ejemplo el título de la ventana de su navegador. Dentro de la cabecera <HEAD>
podemos encontrar:
o <TITLE>: Define el título de la página. Por lo general, el título aparece en la barra
de título encima de la ventana
o <LINK>: para definir algunas características avanzadas, como por ejemplo las
hojas de estilo usadas para el diseño de la página, ejemplo :<link rel="stylesheet"
href="/style.css" type="text/css">

• <BODY>: Define el contenido principal o cuerpo del documento, esta es la parte del
documento html que se muestra en el navegador, dentro de esta etiqueta pueden definirse
propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del
cuerpo <BODY> podemos encontrar numerosas etiquetas. A continuación se indican
algunas a modo de ejemplo:
o <h1>, <h2>,... <h6>: encabezados o títulos del documento en diferentes tamaños
de fuente
o <p>: párrafo nuevo
o <br>: salto de línea forzado
o <table>: comienzo de una tabla (las filas se identifican con <TR> y las celdas
dentro de las filas con <TD>)
o <a>: indica la existencia de un hipervínculo o enlace, dentro o fuera la página web.
Debe definirse el parámetro de pasada por medio del atributo href (ejemplo: <a
href="http://www.google.com">Google</a> se representa como Google)
o <div>: comienzo de un área especial en la página
o <img>: indica la existencia de una imagen para mostrarse en el navegador
o <font color="#rrggbb">: Color del texto, representado por un código hexadecimal.
"rr"=Red, "gg"=Green, "bb"=Blue. Cada par puede variar entre 00 (el tono más
oscuro) a FF(más claro).
o <li><ol><ul>: Es uno de los más utilizados para el manejo de listas.
o <b>: Texto en negrita
o <i>: Texto en cursiva
o <u>: Texto subrayado
o <marquee="texto"> texto en movimiento horizontal

Cada etiqueta debe cerrarse tal cual se abrió pero con un pequeño cambio: un "/" tal como se
muestra en el siguiente ejemplo:

<script> </script>

2. Estructura de una página HTML

Estructura básica

• Cada página comienza con: < HTML >.


• A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD >
• Después, la etiqueta < BODY >, que indica el comienzo del cuerpo de la página. Las
instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.

Herramientas de Internet 1 Marco A. Sotelo Monge


Computación e Informática Tercer Ciclo

• La página acabará con < /HTML >.

Es decir:

<HTML>

<HEAD>

Definiciones de la cabecera

</HEAD>
<BODY>

Instrucciones HTML

</BODY>
</HTML>

• Cabecera
La cabecera de un documento está delimitada por las etiquetas <HEAD> y </HEAD> Sus
componentes son opcionales. El más importante es <TITLE>, que permite escribir el título del
documento. El título no se muestra en la página, sino en la parte superior de la ventana del
visualizador, como identificador en los bookmarks y en la history list. Se utiliza de la siguiente
forma:

<HEAD>

<TITLE>Título del documento HTML</TITLE>

</HEAD>

• Cuerpo
Es la parte delimitada por <BODY> y < /BODY >. Puede llevar los siguientes atributos:

o BACKGROUND="imagen": define el fondo. Más adelante veremos más sobre


imágenes.
o BGCOLOR="######": color del fondo (sólo si no se define una imagen de fondo, o
si ésta imagen no puede obtenerse. Más adelante veremos más sobre colores. Por
ahora nos basta saber que para los colores básicos se puede utilizar su nombre en
inglés: white, blue, red, green, etc.
o TEXT="######": color del texto. Por defecto será negro.
o LINK="######": color de los links. Por defecto será azul.
o VLINK="######": color de los links visitados. Por defecto será violeta.

Ejemplos:

<body background= "fondo.gif"> El documento tendrá como fondo la imagen


indicada.
<body bgcolor="white" text="blue" El fondo será blanco, el texto azul, y todos los
link="red" vlink="red"> links (visitados o no) serán rojos

Aquí algunos colores y sus respectivos equivalentes en hexadecimal:

COLOR RGB INGLÉS


Negro #000000 Black
Blanco #FFFFFF White
Marrón #800000 Maroon

Herramientas de Internet 2 Marco A. Sotelo Monge


Computación e Informática Tercer Ciclo
Verde oliva #00FF00 Olive
Azul marino #000080 Navy
Violeta #800080 Violet
Gris oscuro #808080 Gray
Rojo #FF0000 Red
Amarillo #FFFF00 Yellow
Azul #0000FF Azul
Azul verdoso #008080 Teal
Verde lima #00FF00 Lime
Azul claro #00FFFF Aqua
Fucsia #FF00FF Fuchsia
Plateado #C0C0C0 Silver

3. Tags (etiquetas)

Los tags o etiquetas representan el principal elemento en un documento HTML y brindan


información especial que es utilizada para calcular la representación final del documento. Esto
significa que donde se define un tag en el código, algo sucederá en la representación del
documento, algunas veces visualmente y otras de manera oculta. Cada uno de los tags
produce un resultado específico cuando el documento es representado (por ejemplo, el tag
HTML <b> produce texto en negrita) permitiendo a los autores dar formato y/o agregar
información a los documentos. Cada tag puede tener atributos, eventos y contenido. Toda esta
información debe ser declarada (en forma genérica) de la siguiente manera:

<nomre_tag atributo1="valor1" atributo2="valor2" ...


evento1="funcion1" evento2="funcion2" ...>Contenido</nombre_tag>

Dado que el estándar XHTML fuerza el cierre de tags, un tag debe ser cerrado siempre
(</nombre_tag>).

4. Etiquetas Html para la construcción de tablas

Código Visualización
<table border="1">
<tr> Columna 1 Columna 2 Columna 3
<th>Columna 1</th>
<th>Columna 2</th> Celda 1 Celda 2 Celda 3
<th>Columna 3</th> Celda 4 Celda 5 Celda 6
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>

Herramientas de Internet 3 Marco A. Sotelo Monge


Computación e Informática Tercer Ciclo

Bloques de texto
Disponemos de diversos tipos de bloques de texto en HTML:

• Párrafos.
• Saltos de línea.
• Texto preformateado.

Párrafos
Disponemos de la etiqueta <p> para separar párrafos. Habida cuenta de que HTML ignora los
saltos de línea introducidos en el fichero original y de que para HTML todo el texto es continuo,
requeriremos algún mecanismo para indicar principio y final de párrafo. Dicho mecanismo viene
dado por las marcas <p> y </p>.
La etiqueta P admite además un atributo, ALIGN, que indica la alineación del texto en el
párrafo, pudiendo tomar los valores:

• LEFT, alineación a la izquierda, es el activo por defecto.


• RIGHT, alineación a la derecha.
• CENTER, centrado del texto.
• JUSTIFY, texto justificado

Saltos de línea
La etiqueta <BR> nos indica un salto de línea. Podemos usarla como marca inicial sin final. La
marca BR no modifica los parámetros especificados para el párrafo en el que nos encontremos
en ese momento.

Reglas horizontales
HTML proporciona una etiqueta que nos permite incluir en nuestra página una regla horizontal
(una raya de extremo a extremo de la página) de anchura variable. Dicha etiqueta, <hr>, se
utiliza para separar bloques de texto, tiene las siguientes propiedades:

• NOSHADE: elimina el efecto de sombreado de la regla.


• WIDTH: define la longitud de la línea respecto a la página.
• SIZE: define el grosor de la línea (en píxeles o en porcentaje)

Ejemplo:
<hr noshade="noshade" width="100%" size="2"></hr>

Texto preformateado
El texto insertado entre las etiquetas <PRE> y </PRE> será visualizado por el navegador
respetando el formato de saltos de línea y espacios con el que se ha introducido. El navegador,
por norma general, mostrará dicho texto con un tipo de letra de espaciado fijo similar a la de las
máquinas de escribir.

Ejemplo:
<pre>
En un lugar de la Mancha,
De cuyo nombre no quiero acordarme,
No ha mucho tiempo que vivía un hidalgo
De los de lanza en astillero, adarga
Antigua, rocín flaco y galgo corredor.
Una olla de algo más vaca que carnero,
</pre>

Tipos de letra
HTML proporciona etiquetas que nos permiten modificar el tipo de letra, los colores, etc., de
nuestros textos. Además, HTML proporciona unos marcadores especiales, llamados entidades

Herramientas de Internet 4 Marco A. Sotelo Monge


Computación e Informática Tercer Ciclo
de carácter, que permiten introducir caracteres especiales, como el símbolo de copyright,
acentos, y otros, para aquellos casos en los que nuestro teclado o nuestro editor de texto no lo
soportan, para cuando el juego de caracteres no lo soporta, etc.

Cabeceras
Disponemos de un elemento <Hx> que podemos utilizar para definir qué partes de nuestro
texto deben ser consideradas como encabezados (de sección, capítulo, etc.). La etiqueta
asigna un mayor tamaño de texto a los caracteres (en función de x, como veremos). Además,
utiliza un tipo de letra en negrilla para la cabecera e incluye un salto de párrafo después de
esta cabecera.
El tamaño de la cabecera (o el nivel de ésta o el índice de importancia) puede variar entre 1 y
6, es decir, existen 6 posibles etiquetas:

h1, h2, h3, h4, h5 y h6.

Tipo de letra
HTML proporciona una etiqueta para gestionar la tipografía. Esta etiqueta, FONT, ha sido
declarada obsoleta en HTML 4.01, por lo que debemos evitar su uso y tratar de usar en su
lugar hojas de estilo (CSS). La etiqueta <font> nos permite especificar:

• Medidas, con el atributo SIZE.


• Colores, con el atributo COLOR.
• Tipografías, con el atributo FACE.

Debemos utilizar esta etiqueta con mucha precaución. Al especificar tipografías debemos tener
en cuenta que quizás el cliente no tenga dicha tipografía instalada, con lo que la visión que
obtendrá de la página no corresponderá a la deseada.
Los atributos soportados por FONT y que nos permiten definir las características del tipo de
letra son:

• SIZE: tamaño de los caracteres


• COLOR: color de los caracteres
• FACE: tipografía que vamos a usar

Estilos de letra
HTML nos proporciona un conjunto de etiquetas que permiten definir diferentes estilos de letras
para el texto contenido entre las marcas. Las etiquetas disponibles son:

• B (negrilla).
• I (itálica).
• U (subrayado).
• STRIKE (tachado).
• SUP (superíndice).
• SUB (subíndice).
• EM (enfatizado).
• STRONG (destacado).

Ejemplo:

<p align="justify"><font color="#FF0000" face="Arial, Helvetica, sans-serif">En este parrafo se


<sub>observa</sub> el <sup>texto</sup> en <strong>negrita</strong>, esta palabra esta en
<em>cursiva</em>, y esta otra esta <strike>tachada</strike></font></p>

Herramientas de Internet 5 Marco A. Sotelo Monge


Computación e Informática Tercer Ciclo

Enlaces
Una de las características más destacadas y de mayor influencia en el éxito de la web ha sido
su carácter hipertexto, es decir, la posibilidad de que podamos enlazar documentos que
pueden residir en diferentes servidores de forma intuitiva y transparente. Cabe destacar que los
enlaces no sólo llevan a páginas web, sino también a imágenes, audio, vídeo, etc.

Disponemos para realizar los enlaces de una etiqueta A, que con su conjunto de atributos,
NAME, HREF, TARGET, nos permite un total control a la hora de crear enlaces en los
documentos.

Los principales tipos de enlaces son:


• Enlaces dentro de la misma página.
• Enlaces a otras páginas de nuestro sistema.
• Enlaces a páginas de otros sistemas

Para crear un enlace utilizaremos la etiqueta A con el atributo HREF. Como valor de dicho
atributo pasaremos el destino del enlace:

<A HREF=“destino”>Texto o imagen</A>

Donde el “destino” es una URI.

Destinos dentro de la página


Una de las posibilidades que nos ofrece HTML consiste en saltar a destinos dentro de una
página. Para ello debemos definir en la página los destinos con nombre, anchors o anclas.
Para realizar dicha definición, disponemos del atributo NAME de la etiqueta A.

Por ejemplo:
<A NAME=“ancla”>

Una vez definidas las anclas dentro de nuestros documentos, podemos navegar e ir
directamente a ellas. Para navegar a estas anclas usaremos una extensión de la URI.

Herramientas de Internet 6 Marco A. Sotelo Monge


Computación e Informática Tercer Ciclo
Ejemplo:
<A HREF=”#ancla”>Enlace</A>

Listas
HTML nos permite definir listas y enumeraciones de tres tipos principales:
• Listas no ordenadas.
• Listas ordenadas (numeradas).
• Listas de definiciones.

Listas no ordenadas
Para introducir listas no ordenadas disponemos de la etiqueta <UL>, que nos indica el inicio de
la lista, de </UL>, que nos indicará el final de la lista y de <LI>, que nos indica cada uno de los
elementos de la lista.
Disponemos además de un atributo TYPE que nos indica el marcador que hay que usar para
señalar los diferentes elementos: DISC, CIRCLE, SQUARE.
Debemos introducir todos los elementos entre <LI> y </LI>.

Listas ordenadas (numeradas)


El funcionamiento de las listas ordenadas es muy similar al de las listas no ordenadas. Para
éstas disponemos de la etiqueta <OL>, que nos indica el inicio de la lista, de </OL> que nos
indicará el final de la lista y de <LI> que nos indica cada uno de los elementos de la misma.

Disponemos, además, de un atributo TYPE que nos indica el marcador que conviene usar para
enumerar los diferentes elementos:
TYPE=1 Números (la elegida por defecto).
TYPE=A Letras mayúsculas.
TYPE=a Letras minúsculas.
TYPE=I Numeración romana en mayúsculas.
TYPE=i Numeración romana en minúsculas.
Disponemos también de un atributo START que nos indica en qué punto debe comenzar la
numeración de la línea. El atributo TYPE también puede usarse en los elementos individuales.
Debemos introducir todos los elementos entre <LI> y </LI>.

Listas de definiciones
Una lista de definiciones es una lista no numerada que nos permite dar una descripción o
definición de cada elemento. Las listas descriptivas están formadas con las etiquetas: <DL> y
</DL> para definir la lista, <DT> para indicar el término que hay que definir y DD para indicar la
definición.
Disponemos para DL de un atributo, COMPACT, que indica al navegador que muestre la lista
de la forma más compacta posible, incluyendo el término y su definición en la misma línea.
Podemos ver diferentes ejemplos de listas de HTML:

Imágenes
Para poder incluir imágenes y gráficos en nuestras páginas disponemos de una única etiqueta:
<IMG>, que dispone de diversos atributos que nos permiten especificar qué fichero de imagen
queremos usar, las medidas de ésta, etc. El atributo que nos permite especificar qué imagen

Herramientas de Internet 7 Marco A. Sotelo Monge


Computación e Informática Tercer Ciclo
debemos mostrar es SRC. Con dicha etiqueta podemos especificar una URL de fichero de
imagen que será el que el navegador solicitará al servidor para mostrárnoslo.
Las imágenes que referenciemos con el atributo SRC pueden estar en cualquier directorio del
servidor, en otros servidores, etc. El valor que pasemos a SRC debe ser una URI.
Disponemos, además, de un atributo ALT que nos permite asignar un texto alternativo a la
imagen para el caso de que el navegador no pudiese mostrar la imagen que enseñase ese
texto al usuario.
Disponemos asimismo de un par de atributos que nos permiten especificar las medidas de la
imagen, anchura y altura, WIDTH y HEIGHT. En caso de no especificarlos, el navegador
mostrará la imagen con el tamaño que tenga el archivo de ésta. En caso de especificarlos, el
navegador redimensionará la imagen adecuadamente. Usar los parámetros de medida de
imagen permite al navegador dejar el espacio que ocupará la imagen y mostrar el resto de la
página mientras se descarga éstas.

Tablas
Disponemos en HTML de un grupo de etiquetas que nos permite introducir texto en forma de
tablas. Las etiquetas para ello son:
TABLE: marca el inicio y final de la tabla.
TR: marca el inicio y final de una fila.
TH: marca el inicio y final de una celda de cabecera.
TD: marca el inicio y final de una celda.

Una tabla simple queda conformada por el siguiente código:

<TABLE>
<TR><TH>Cabecera 1</TH>...<TH>Cabecera n</TH></TR>
<TR><TD>Celda 1.1</TD>...<TD>Celda n</TD></TR>
...
<TR><TD>Celda 1.1</TD>...<TD>Celda n</TD></TR>
<CAPTION>Título</CAPTION>

Etiqueta <TABLE>
La etiqueta TABLE tiene algunos atributos que nos permiten especificar más concretamente el
formato que queremos darle a la tabla.
• BORDER: nos indica el tamaño de los bordes de la celda.
• CELLSPACING: nos indica el tamaño en puntos del espacio entre celdas.
• CELLPADDING: nos indica el tamaño en puntos entre el contenido de una celda y los
bordes.
• WIDTH: especifica el ancho de la tabla. Puede estar tanto en puntos como con relación
al porcentaje de la anchura total disponible. Por ejemplo, 100% indica toda la ventana
del navegador.
• ALIGN: alinea la tabla respecto a la página, a la izquierda (LEFT), a la derecha
(RIGHT) o al centro (CENTER).
• BGCOLOR: especifica el color de fondo de la tabla.

* COLSPAN: especifica cuántas celdas, incluyendo esta, se unirán hacia la derecha para
formar una sola. Si COLSPAN es cero, todas las celdas se unirán a la derecha.

* ROWSPAN: especifica el número de celdas de la columna situadas debajo de la actual que


se unen a ésta.

Ejemplo:

Herramientas de Internet 8 Marco A. Sotelo Monge

También podría gustarte