Lenguaje HTML

TECNOLOGÍAS DE LA INFORMACIÓN
TEMA 5.- Lenguaje HTML
LENGUAJE HTML
1º.- ESTRUCTURA DE UN DOCUMENTO HTML
Todo archivo HTML presenta una estructura similar a la mostrada a continuación:
<HTML>
<HEAD>
<TITLE> EJEMPLO DE CÓDIGO HTML </TITLE>
</HEAD>
<BODY>
Aquí irá el contenido de la página Web
</BODY>
</HTML>
HEAD: especifica la información relativa al título de la página Web que aparece en la barra de control de
la ventana.
BODY: hace referencia al contenido del cuerpo del documento.
2º.- APLICAR FORMATO A LOS CARACTERES DE UN DOCUMENTO
Para aplicar formato al texto de un documento se utilizan una serie de etiquetas continente, que
podemos dividir en dos grupos:
a) Etiquetas físicas. Se trata de etiquetas que establecen de forma precisa el formato a aplicar.
Etiqueta Efecto
B Negrita
FONT Especifica una fuente de un tipo, tamaño y color concretos
I Cursiva
S Tachado
SMALL Indica que el texto representa una muestra
SUB Subíndice
SUP Superíndice
U Subrayado
b) Etiquetas lógicas. Se trata de etiquetas que no indican al explorador cómo representar el texto sobre el
que actúa, sino que sólo indican al explorador lo que el texto representa y delegan en el explorar del
usuario la decisión sobre la forma de representarlas.
Etiqueta Efecto
BIG Aumenta el tamaño del texto
CODE Indica que el texto representa un ejemplo de código
PLAINTEXT Fuente de ancho fijo
STRONG Resaltar (normalmente en negrita)
Profesor: Ricardo Rodríguez García Página nº 1

Veamos un ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplos de Estilos de Fuentes</TITLE>
</HEAD>
<BODY>
Este ejemplo muestra cómo cambiar el estilo de la fuente empleada en un determinado párrafo de texto
<BR>
<STRONG>Este texto está en negrita</STRONG>
<BR>
<I>Este texto está en cursiva</I>
<BR>
<U>Este texto está subrayado</U>
<BR>
También es posible anidar distintos estilos de texto. Por ejemplo, <I>podemos incluir <B>un texto en
negrita</B> en un texto en cursiva.</I>
</BODY>
</HTML>
3.- USO DE FUENTES ESPECÍFICAS
Para un mayor control del tipo de letra, su color y formato, podemos utilizar la etiqueta <FONT> y los
atributos FACE, SIZE y COLOR.
<HTML>
<HEAD>
<TITLE>Ejemplos de Estilos de Fuentes</TITLE>
</HEAD>
<BODY>
<FONT FACE = "Arial">
Este ejemplo muestra cómo cambiar la fuente de un determinado texto.
</FONT>
<BR>
<FONT SIZE =+4>
Este ejemplo muestra cómo cambiar el tamaño de un determinado texto.
</FONT>
<BR>
<FONT COLOR=RED SIZE="2" FACE="Arial, Courier">
Este ejemplo muestra cómo cambiar tamaño, tipo y color de un determinado texto
</FONT>
</BODY>
</HTML>

Colores en HTML
AQUA (agua) BLACK (negro) BLUE (azul) FUCHSIA (fucsia)

GRAY (gris) GREEN (verde) LIME (lima) MAROON (marrón)
NAVY (azul marino) OLIVE (oliva) PURPLE (morado) RED(rojo)
SILVER (plata) TEAL(azul verdoso) WHITE (blanco) YELLOW (amarillo)
4.- APLICAR FORMATO A PÁRRAFOS DE UN DOCUMENTO
Para aplicar formatos de párrafo disponemos de etiquetas como <P>, que aplica un estilo de párrafo
normal, <H1>, que aplica el estilo de Encabezado de nivel 1 o <LI> que especifica el formato de cada elemento
de una lista. En la tabla que se muestra a continuación, se recogen las etiquetas que permiten aplicar la mayoría
de los formatos de párrafo que HTML pone a nuestra disposición.
Etiqueta Formato
<ADDRESS> Dirección de correo
<H1>…<H6> Nivel de encabezado (de 1 a 6)
<LI> Elemento de una lista
<OL> Lista enumerada (se usa conjuntamente con LI)
<P> Párrafo normal
<PRE> Texto sin formato
<UL> Lista de viñetas (se usa conjuntamente con LI)
Creación de párrafos normales
En un explorador Web, cada párrafo se separa de los demás por una línea en blanco, una antes y la otra
después del párrafo. Para especificar un párrafo en un documento HTML se usa la etiqueta <P>. Veamos un
ejemplo:
<HTML>
<HEAD>
<TITLE> Creación de Párrafos Normales </TITLE>
<HEAD>
<BODY>
<P>Este es el primer párrafo del documento.
<P>Este es el segundo párrafo del documento.
</BODY>
</HTML>

Organizar una página usando encabezados
El lenguaje HTML pone a nuestra disposición seis niveles de encabezados, que podemos usar a través
de las etiquetas <H1> a <H6>.
<HTML>
<HEAD>
<TITLE>Organizar una Página Web usando Encabezados</TITLE>
</HEAD>
<BODY>
<H1>Aficiones</H1>
<P>El anterior es un encabezado de nivel 1.</P>
<H2>Fotografía</H2>
<H3>Viajar</H3>
:
:
<BODY>
</HTML>
Lista de viñetas y listas enumeradas
Para crear una lista de viñetas usaremos la etiqueta continente <UL> para envolver los distintos
elementos de la lista, y a continuación, envolveremos cada uno de los elementos que compondrán la misma por
la etiqueta continente <LI>.
<HTML>
<HEAD>
<TITLE>Lista de viñetas</TITLE>
<HEAD>
<BODY>
Los últimos cuatro viajes que he realizado han tenido como destino:
<UL>
<LI>Canarias</LI>
<LI>Venezuela</LI>
<LI>Nueva Zelanda</LI>
<LI>El Tíbet</LI>
</UL>
</BODY>
</HTML>
En general, las listas enumeradas u ordenadas se utilizan

para indicar una lista de instrucciones en las que el orden es
importante, o una lista de conceptos en orden de importancia. Para
crear una lista enumerada el proceso es idéntico al seguido para las
listas de viñetas salvo en que en vez de utilizar la etiqueta <UL>, se utiliza la etiqueta <OL>.

<HTML>
<HEAD>
<TITLE>Lista enumerada</TITLE>
<HEAD>
<BODY>
Mis viajes más bonitos han tenido como destino:
<OL START=4 TYPE=A>
<LI>Canarias</LI>
<LI>Venezuela</LI>
<LI>Nueva Zelanda</LI>
<LI>El Tíbet</LI>
</OL>
</BODY>
</HTML>
Texto con formato previo
Mediante la etiqueta continente <PRE>, el texto comprendido en la misma, conservará el formato con el
que lo hayamos escrito.
5.- INCRUSTAR IMÁGENES EN UNA PÁGINA WEB
Para incrustar una imagen en una posición concreta de una página Web utilizaremos la etiqueta <IMG>.
El único atributo que exige esta etiqueta es SRC, que contiene la dirección URL del archivo de imagen que se
desea incluir. También se pueden establecer otros atributos:
• WIDTH y HEIGHT, que permiten especificar el espacio reservado para la imagen en el documento.
• ALIGN, controla la forma en la que el explorador alinea la imagen con respecto al texto que la rodea.
Admite como posibles valores TOP (superior), MIDDLE (central) y BOTTOM (inferior).
• Si asignamos al parámetro anterior los valores LEFT (izquierda) o RIGHT (derecha), podemos hacer que
la imagen quede flotante bien a la izquierda , bien a la derecha de nuestra página Web, de forma que el
texto rodee la imagen.
<HTML>
<HEAD>
<TITLE>Insertando una imagen en una página Web</TITLE>
</HEAD>
<BODY>
<IMG SRC=”file:\\Imagenes/Einstein.gif” WIDTH=”160” HEIGHT=”108”>
</BODY>
</HTML>

6.- ESTABLECER HIPERVÍNCULOS
La etiqueta que permite crear vínculos ya sean de imagen o de texto es <A>. Se trata de una etiqueta
continente que marca el comienzo y el final del ancla del vínculo. Cuando el usuario hace clic sobre este ancla, el
explorador abre el recurso especificado en el atributo HREF.
<HTML>
<HEAD>
<TITLE>Establecer vínculos</TITLE>
</HEAD>
<BODY>
<A HREF=http://www.iesvictoriakent.net>
Web oficial del I.E.S. Victoria Kent
</A>
</P>
<A HREF=http://www.iesvictoriakent.net>
<IMG SRC=”Imagenes/Logotipo.gif”>
</A>
</BODY>
</HTML>
7.- AGREGAR FORMULARIOS A UNA PÁGINA WEB
La etiqueta continente <FORM> permite agregar formularios a páginas web. El explorador mostrará
cualquier texto contenido en esta etiqueta como leyenda de los distintos campos que conformarán el formulario.
Para especificar el tipo de campo disponemos de una cierta variedad de etiquetas.
Para poder recibir y procesar los datos que los usuarios introducen en un determinado formulario,
primero hemos de hacer que el explorador los envíe. Los datos pueden enviarse a un script que se ejecute en el
servidor Web, o podemos hacer que se envíen a una determinada dirección de correo electrónico.
El atributo ACTION, sirve para especificar la dirección URL a la que queremos que se envíen los datos.
Si pretendemos enviarlos a un script de un servidor, habrá que asignar a este atributo la dirección URL del script.
Si deseamos enviar los datos a una dirección de correo electrónico, basta asignar a este atributo la dirección
URL de dicha dirección.
METHOD sirve para indicar al explorador la forma en la que deseamos que envíe los datos. Si
asignamos el valor POST a este atributo, el explorador enviará los datos de forma independiente a la URL. Si
piensa enviar los datos a una dirección de correcto electrónico es recomendable asignar el valor GET.
Agregar cuadros de texto con la etiqueta <INPUT>
Podemos crear cuadros de texto usando la etiqueta <INPUT>. Esta etiqueta no requiere una etiqueta de
cierre. El atributo NAME sirve para asignar un nombre al control. El atributo TYPE indica al explorador que
estamos creando un cuadro de texto. El atributo SIZE, simplemente especifica la longitud en caracteres del
cuadro de texto.

<HTML>
<HEAD>
<TITLE>Añadir cuadros de texto</TITLE> </HEAD>
<BODY>
<PRE>
<FORM METHOD=GET ACTION=MAILTO:jerry@honey.com>
Introduzca su nombre:
<INPUT NAME=nombre TYPE=text SIZE=30>
<INPUT TYPE=submit VALUE=Enviar>
</FORM>
</PRE>
</BODY>
</HTML>
Agregar botones de opción con la etiqueta <INPUT>
Asignaremos el valor RADIO en el atributo TYPE de la etiqueta <INPUT>, teniendo en cuenta que todos
los botones que queramos que formen parte de un grupo han de poseer el mismo valor del atributo NAME.
<INPUT NAME=Nivel TYPE=RADIO VALUE=”Experto” CHECKED> Experto en HTML

<INPUT NAME=Nivel TYPE=RADIO VALUE=”Novato” > Novato en HTML
Agregar un cuadro de lista
La etiqueta continente <SELECT> permite definir un cuadro de lista. Cada uno de los elementos que
queramos que aparezcan en la lista ha de ser precedido por la etiqueta <OPTION>. La etiqueta <SELECT>
presenta los siguientes atributos:
• NAME: asigna un nombre al cuadro de lista.
• SIZE: establece el número de elementos que se pueden ver simultáneamente en el navegador. Si

deseamos transformar el cuadro de lista en un cuadro combinado, basta con eliminar el atributo SIZE.
A continuación se muestra un ejemplo de creación de un cuadro de lista:
<SELECT NAME=“Opciones” MULTIPLE SIZE=3>

<OPTION>Aprender más sobre programación básica en HTML
<OPTION>Aprender más sobre la creación de formularios en HTML
<OPTION>Aprender más sobre la creación de marcos en HTML
<OPTION>Pasar el día en la playa
</SELECT>

Agregar botones con la etiqueta <INPUT>
Para crear botones con la etiqueta <INPUT> sólo hay que asignar el valor BUTTON al atributo TYPE. La
leyenda que queramos que aparezca en la cara del botón se introduce a través del atributo VALUE, como se
puede observar en el siguiente ejemplo:
<INPUT NAME=MiBotón TYPE=BUTTON VALUE=“Haga clic sobre mí”>
8.- MARCOS
Los marcos dividen la ventana del navegador en varias subventanas. Podemos pensar que se trata de
distintos paneles, en cada uno de los cuales puede abrirse una página Web distinta.
Para crear una página con marcos, hay que empezar usando la etiqueta <FRAMSET>. Especificaremos
cada marco y su archivo HTML asociado. Irá acompañada de uno de los siguientes atributos:
• ROWS: divide la ventana en filas
• COLS: divide la ventana en columnas
El valor asignado a cada uno de estos atributos es una lista de valores delimitados por comas. El número
de valores indica el número de divisiones a realizar, y los valores, los tamaños de cada una de las divisiones
expresados en tanto por ciento.
La etiqueta <FRAME> permite establecer el recurso asociado a cada marco a través del atributo SRC.
Los archivos HTML que asociemos con marcos no deben poseer etiquetas <HEAD> ni <BODY>.
<HTML>
<HEAD>
<TITLE>Página Web con marcos</TITLE> </HEAD>
<BODY>
<FRAMESET ROWS=“25%,75%”>
<FRAME SRC=“exb_04.html”>
<FRAMESET COLS=“25%,75%”>
</FRAMESET>
</FRAMESET>
</BODY>
</HTML>
9.- TABLAS
Una de las funciones más útiles de HTML es su soporte de tablas. Diseñar una tabla con etiquetas HTML
es muy sencillo. Primero, se especifica la sección del documento que se tratará como una tabla con las etiquetas
<TABLE> y </TABLE>. Cada fila de la tabla comienza con la etiqueta <TR> y termina con la etiqueta </TR>.
Finalmente, cada fila de la tabla contiene celdas, que se delimitan con las etiquetas <TD> y </TD>. Esta es la
estructura general de una tabla:

<HTML>
<H1>Una tabla simple 3 x 3</H1>
<FONT FACE=“Verdana”>
<TABLE>
<TR>
<TD> Fila 1, Columna 1</TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</HTML>
Para agregar un borde alrededor de las celdas inserta el atributo BORDER en la etiqueta <TABLE>. En
otras palabras sustituye la cadena <TABLE> por la cadena <TABLE BORDER>. El atributo BORDER puede
tener un valor, que es el ancho del borde en píxeles
A menudo, las tablas no tienen filas y columnas del mismo tamaño. Las etiquetas ROWSPAN Y
COLSPAN nos permiten generar tablas con celdas que abarcan múltiples columnas y filas. Cuando ROWSPAN y
COLSPAN se colocan entre las etiquetas <TD> y</TD>, mezclan la celda actual con una o más de sus celdas
adyacentes, en la misma fila (en el caso de COLSPAN) o columna (en el caso de ROWSPAN). El número de
celdas adyacentes que se fusionan con la celda actual es el valor especificado para los atributos COLSPAN y
ROWSPAN.
<HTML>
<HEAD>
<TITLE> Ejemplos ROWSPAN - COLSPAN</TITLE> </HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TD COLSPAN=2 ROWSPAN=2>Origen:<BR>Censo 2000</TD>
<TD COLSPAN=2>Media</TD>
</TR>
<TR>
<TD>Altura</TD>
<TD>Peso</TD>
</TR>
<TR>
<TD ROWSPAN=2>Sexo</TD>
<TD>Hombres</TD>
<TD>5,83</TD>

<TD>195,5</TD>
</TR>
<TR>
<TD>Mujeres</TD>
<TD>5,22</TD>
<TD>167,8</TD>
</TR>
</TABLE>
</BODY>
</HTML>
10.- USO DE SCRIPTS
Un script puede ser definido como un conjunto de ordenes, identificado con un nombre, que el navegador
ejecutará en un determinado momento o dado un evento concreto. Podemos usar scripts en nuestras páginas
Web, lo que hará que éstas sean más dinámicas e interactivas. Existen dos lenguajes que permiten introducir
scripts en una página Web: JavaScript y VBScript.
Agregar Scripts a páginas Web
Utilizaremos la etiqueta continente <SCRIPT>, que sólo precisa un atributo, LANGUAGE, a través del
cual estableceremos el lenguaje de scripts a usar. El aspecto una vez introducido en el documento HTML será
como el que se muestra a continuación:
<SCRIPT LANGUAGE=VBSCRIPT>
Instrucciones en VBScript
</SCRIPT>
El Objeto Document
VBScript puede acceder a numerosos objetos, uno de ellos es el objeto Document, que representa al
documento que contiene el código. A través de los métodos y propiedades del objeto Document puedes
manipular la apariencia, o incluso el contenido del documento actual.
Las propiedades del objeto Document son:
bgColor y fgColor. Devuelven o establecen el color de fondo de la página y el color de texto,

respectivamente.
Los métodos del objeto Document son:
Write. Escribe una cadena en el documento actual. La cadena se inserta en la ubicación

actual en el documento.
WriteLn. Similar al método anterior, pero añade un carácter de fin de línea.

Open. Abre el documento para salida. Su contenido es eliminado y se puede colocar nuevas
cadenas en el documento con los métodos anteriores.
Close. Este método cierra el documento y actualiza la ventana del navegador.
Las propiedades y métodos del objeto Document permiten crear documentos HTML al vuelo.
<HTML>
<SCRIPT LANGUAGE=VBScript>
If Time < #12.00.00# Then
Document.Write “<H1>Buenos días</H1>”
Else
Document.Write “<H1>Buenas tardes</H1>”
End If
Document.Write “<H2>y bienvenido a VBScript</H2>”
Document.Write “<H3>La fecha actual es “ & Date() & “</H3>”
Document.Write “<H3>y la hora actual es “ & Time() & “</H3>”
</SCRIPT>
<BODY>
<FONT FACE=Verdana Size=4>
<HR>
La línea 3ª y 4ª de esta página se generan en el momento
en que el documento se abre y muestran <I>la fecha y hora
actuales</I>.
El resto de la página es un documento HTML normal, que
permanece igual, independientemente de cuándo se abra.
</BODY>
</HTML>

Lenguaje HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Lenguaje HTML

Загружено:

Авторское право:

Доступные форматы

TECNOLOGÍAS DE LA INFORMACIÓN

TEMA 5.- Lenguaje HTML

Todo archivo HTML presenta una estructura similar a la mostrada a continuación:

2º.- APLICAR FORMATO A LOS CARACTERES DE UN DOCUMENTO

Profesor: Ricardo Rodríguez García Página nº 1

3.- USO DE FUENTES ESPECÍFICAS

Profesor: Ricardo Rodríguez García Página nº 2

AQUA (agua) BLACK (negro) BLUE (azul) FUCHSIA (fucsia)

4.- APLICAR FORMATO A PÁRRAFOS DE UN DOCUMENTO

Creación de párrafos normales

Profesor: Ricardo Rodríguez García Página nº 3

Organizar una página usando encabezados

Lista de viñetas y listas enumeradas

En general, las listas enumeradas u ordenadas se utilizan

Profesor: Ricardo Rodríguez García Página nº 4

Texto con formato previo

5.- INCRUSTAR IMÁGENES EN UNA PÁGINA WEB

Profesor: Ricardo Rodríguez García Página nº 5

6.- ESTABLECER HIPERVÍNCULOS

7.- AGREGAR FORMULARIOS A UNA PÁGINA WEB

Agregar cuadros de texto con la etiqueta <INPUT>

Profesor: Ricardo Rodríguez García Página nº 6

Agregar botones de opción con la etiqueta <INPUT>

<INPUT NAME=Nivel TYPE=RADIO VALUE=”Experto” CHECKED> Experto en HTML

Agregar un cuadro de lista

• NAME: asigna un nombre al cuadro de lista.

• SIZE: establece el número de elementos que se pueden ver simultáneamente en el navegador. Si

A continuación se muestra un ejemplo de creación de un cuadro de lista:

<SELECT NAME=“Opciones” MULTIPLE SIZE=3>

Profesor: Ricardo Rodríguez García Página nº 7

Agregar botones con la etiqueta <INPUT>

<INPUT NAME=MiBotón TYPE=BUTTON VALUE=“Haga clic sobre mí”>

• ROWS: divide la ventana en filas

• COLS: divide la ventana en columnas

Profesor: Ricardo Rodríguez García Página nº 8

Profesor: Ricardo Rodríguez García Página nº 9

10.- USO DE SCRIPTS

Agregar Scripts a páginas Web

Las propiedades del objeto Document son:

 bgColor y fgColor. Devuelven o establecen el color de fondo de la página y el color de texto,

Los métodos del objeto Document son:

 Write. Escribe una cadena en el documento actual. La cadena se inserta en la ubicación

 WriteLn. Similar al método anterior, pero añade un carácter de fin de línea.

Profesor: Ricardo Rodríguez García Página nº 10

 Close. Este método cierra el documento y actualiza la ventana del navegador.

Profesor: Ricardo Rodríguez García Página nº 11

Вам также может понравиться

bgColor y fgColor. Devuelven o establecen el color de fondo de la página y el color de texto,

Write. Escribe una cadena en el documento actual. La cadena se inserta en la ubicación

WriteLn. Similar al método anterior, pero añade un carácter de fin de línea.

Close. Este método cierra el documento y actualiza la ventana del navegador.