Sie sind auf Seite 1von 85

Tema 2.

Lenguaje
HTML
Lenguaje de Marcas - HLC
2 SMR 15/16
Profesor Juan Carlos Moreno
IES NTRA. SRA. LOS REMEDIOS - UBRIQUE

1. INTRODUCCIN
A.

B.

C.

Tema 2. Lenguaje HTML

WWW contiene gran


cantidad informacin,
pero ha de estar
ordenada
La unidad bsica
almacena informacin
Pginas Web
Pginas web son
Hipertexto contienen
links o enlaces

Lenguaje de Marcas - HLC - 2 SMR 15/16

1.1 Caractersticas HTML

HiperText Markup Language


HTML es Lenguaje de Marcas ms popular
otros XHTML, RSS, RTF, CSS
Versin actual HTML 5.0
Mecanismos para incluir:

Hojas de Estilo CSS


JAVASCRIPTS
.

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

1.2 Herramientas crear Web

Cualquier ordenador y
sistema operativo.
Editores HTML:

Tema 2. Lenguaje HTML

Asistentes HotDog
Conversores Word
Editores WYSIWYG
Dreamweaver
Netbeans
Notepad ++

Los archivos web tiene


extensin HTM o HTML,
la segunda opcin
preferentemente.

Lenguaje de Marcas - HLC - 2 SMR 15/16

1.3 Editor Notepad++

Notepad++ es un editor con


soporte para varios lenguajes
de programacin, c++, java,
javascript, css, entre ellos
HTML
Distribuido bajo licencia GPL
Caractersticas:

Tema 2. Lenguaje HTML

Coloreado y envoltura de sintxis,


resaltando las expresiones propias
del lenguaje HTML
Pestaas
Resaltado parntesis
Ayuda en lnea
Paquete de idiomas

Lenguaje de Marcas - HLC - 2 SMR 15/16

1.4 Bases de HTML

Ordenes formadas por un conjunto de


etiquetas:

<Nombre_Etiqueta>
<Nombre_Etiqueta>Texto</Nombre_Etiqueta>

Ejemplo: Escribir Lnea Horizontal

<HR>
<HR SIZE=1> con grosor 1
<HR SIZE=2>
.

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

2. Primeros Pasos HTML

Conocidas ya las principales caractersticas


de HTML estamos listos para aprender sus
principales etiquetas y para crear nuestra
primera pgina

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

2.1 Estructura Bsica de una


Pgina

Pgina: <HTML>

Cabecera <HEAD>

Fin Cabecera </HEAD>


Cuerpo <BODY>

Ttulo <TITLE></TITLE>

Encabezados <H1><H1>
Lneas <HR>, <HR
SIZE=2>

Fin Cuerpo </BODY>

Fin de Pgina </HTML>

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

2.1 Estructura Bsica de una


Pgina. Ejemplo

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

2.2 Etiquetas Bsicas

<HTML>
<HEAD>
<TITLE>
<BODY>
<H1>
<HR>

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

10

2.2.1 <HTML>

Indica que se trata de


un documento HTML
Es preciso usar la
etiqueta:

Inicio <HTML>
Fin </HTML>

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

11

2.2.2 <HEAD>

Sirve para delimitar el


inicio y el fin de la
cabecera de la
Pgina:
Es preciso
especificar:

Inicio cabecera:
<HEAD>
Fin de cabecera
</HEAD>

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

12

2.2.3 <TITLE>

Solo se usa en la Cabecera


del Pgina, dentro de las
etiquetas <HEAD>
Indica el texto que aparecer
en la Barra de ttulo de la
ventana del Navegador.

Inicio ttulo: <TITLE>


Fin de ttulo </TITLE>

Indica tambin el nombre con


el que aparecer nuestra
pgina si se agrega a
favoritos.

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

13

2.2.4 <BODY>

Sirve para delimitar el


inicio y el fin del cuerpo
de la pgina:
Es preciso especificar:

Inicio cuerpo: <BODY>


Fin del cuerpo </BODY>

En el cuerpo es donde se
escribe el resto del
cdigo de nuestra pgina.

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

14

2.2.5 Encabezados <H1>

Sirve para destacar un texto


en nuestra pgina.
Comienzan en una lnea
nueva y el texto siguiente
continuar en otra lnea
Tamaos encabezados:

Tema 2. Lenguaje HTML

<H1>, <H2>. , <H6>


<H1> mayor tamao
<H6> menor tamao

Lenguaje de Marcas - HLC - 2 SMR 15/16

15

2.2.6 Lnea Horizontal <HR>

Dibuja una lnea horizontal.


Align:

Tema 2. Lenguaje HTML

Left
Right
Center

Width: ancho. 300%


Size: alto. 5
Noshade. Elimina
sombreado
<hr align="left" width="300%"
size="5" noshade>

Lenguaje de Marcas - HLC - 2 SMR 15/16

16

3. Prrafos en HTML

Permite introducir un texto en la Pgina Web


HTML elimina del documento original:

Espaciados
Saltos de lnea
Tabulados

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

17

3.1 Saltos de lnea <BR>

Permiten introducir un punto y aparta cuando


introducimos un texto.
<BR>
Para introducir varios saltos de lnea:

<br> &nbsp;
<br> &nbsp;
<br> &nbsp;

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

18

3.2 Insertar Prrafos <P>

Conjunto de frases sobre un mismo asunto.


<P> Inicio prrafo
</P> Final prrafo
Se pueden insertar <BR> en los prrafos

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

19

3.2 Insertar Prrafos II

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

20

3.3 Prrafo con Sangra

<BLOCKQUOTE></ BLOCKQUOTE>
Permite establecer textos con sangra
Establece un margen por la izquierda y otro por la
derecha

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

21

3.4 Etiqueta <adress>

En ingls significa
direccin
Se usa para incluir
informacin sobre:

Tema 2. Lenguaje HTML

Autor de la pgina
Fecha
Empresa

Siempre al final
<adress></adress>

Lenguaje de Marcas - HLC - 2 SMR 15/16

22

3.5 Alineacin del Texto

Las alineaciones posibles:

Izquierda: por defecto <LEFT>


Derecha: <RIGHT>
Centro: <CENTER>
Justificado: <JUSTIFY>

Requiere uso del parmetro ALIGN en la etiqueta


<P>
<p align="center">Bienvenidos a mi
PAGINA.</p>
Alternativa etiquetas DIV y CSS (actual)

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

23

4. Imgenes. <IMG>

Parmetros:

SRC. Nombre del archivo que contiene la imagen.

ALT. Muestra un texto alternativo previo a la aparicin de la


imagen.

SRC=abispa.jpg
SRC=Imagenes/abispas.jpg

ALT=Fotografa del Centro de Educacin Adultos de Ubrique

ALIGN. Alineacin de la imagen con respecto al texto escrito.


Tipos: left, middle, right,
BORDER. Borde de la imagen. BORDER=3
WIDTH. Anchura WIDTH=234
HEIGHT. Altura. HEIGHT=90
VSPACE. Margen arriba y abajo. VSPACE=10
HSPACE. Margen izquierdo y derecho. HSPACE=10

Ejemplo:
<IMG SRC=imagen.jpg ALT=Imagen de la Sierra
ALIGN=middle HSPACE=10 VSPACE=10>

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

24

4. Imgenes. <IMG>. Align


El tipo de alineacin respecto al texto escrito puede ser:
absbottom
absmiddle
baseline
bottom
left
middle
right
texttop
top

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

25

4. Imgenes. <IMG>. Align

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

26

5. Enlaces de Hipertexto

Parte especial de una pgina que al ser pulsado nos abre una
nueva pgina o cualquier otro documento.
Sinnimos:
Enlaces, Hipervnculo, Hiperenlaces, Hipertexto, Link, etc
Normalmente los links se utilizan con textos, pero tambin se
pueden usar con imgenes, sonidos, vdeos, y prcticamente
cualquier tipo de archivo.
Tipos de enlaces:

Internos:

Mismo documento HTML. Enlaza a otro lugar del mismo documento


HTML.
Distinto documento HTML. Enlaza a otra pgina que forma parte del
mismo sitio Web

Externo:

Permite saltar a cualquier otra pgina de cualquier otro servidor.

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

27

5.1 Etiqueta <a></a>

Nos permitir incluir enlaces de hipertexto.


Atributos:

HREF. Permite indicar la pgina a la que saltar


el enlace.
Objeto del Enlace:

Texto: Se introduce entre la etiqueta de inicio y la


etiqueta de fin.
Imagen: se introduce una etiqueta IMG en lugar del
texto correspondiente.

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

28

5.2 Ejemplos Hipertextos

<a HREF=historia.html>Historia de Espaa</a>


<a href=contenido/inicio.html>Inicio de la Inscripcin</a>
<a href=http://www.ieslosremedios.org>Mi instituto</a>
<a href=contenido/inicio.html><img src=imagen.gif
width=200 height=300></a>
<a href="varios/hobbies.html">hobbies</a>
<a href="http://www.dmoz.org">Directorio DMOZ</a>
<body link="#FF0000" vlink="#FF0099"
alink="#FF9900">

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

29

6. Color de Fondo

Para establecer fondo


a una pgina:

En la etiquete Body
se aade el siguiente
parmetro.

<body
bgcolor="#E0F8F7>

Cada color se
corresponde con una
cadena en
HEXADECIMAL:

#FFFFFF Blanco
#FF0000 - Rojo

Ver la seccin colores


HTML de este manual
Tema 2.
3. Lenguaje HTML

Lenguaje
Aplicaciones
de Marcas
Web
- HLC
- 2 SMR
- 2 SMR
11/12
15/16

30

7. Mrgenes Pgina

Los mrgenes permiten


mejorar la calidad de
presentacin de nuestras
pginas.

En una web se pueden


establecer 4 tipos de
mrgenes: Superior, Inferior,
Izquierdo y Derecho
Los mrgenes se establecen
en la etiqueta body.
Ejemplo:

<body
bgcolor="#E0F8F7"
leftmargin="150px"
topmargin="10px"
rightmargin="150px"
bottommargin="10px">

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

31

7. Anclas

Permite establecer enlaces internos,


dentro del mismo ducumento HTML.
Una Ancla es una marca que se
inserta en un punto determinado de
una pgina , posteriormente se podr
crear un enlace a ese ancla.
Crear Ancla

<a name="nombreAncla">Texto</a>

Crear Enlace a ese ancla


<a href=#nombreAncla">Texto</a>

Crear Enlace a ese ancla desde otra


pgina

<a href=Historia.html#nombreAncla">Texto</a>
Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

32

7.1 Ejemplo Uso Anclas

Cdigo del enlace arriba:

<a
href="#Geografia">Geogr
afa</a>

Cdigo del ancla abajo:

<H2><a
name="Geografia">Ge
ografa</a></H2>
En este caso <H2> se
coloca slo para darle
caracter de ttuo al
texto

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

33

8. Formato de Texto y
Caracteres Especiales

HTML contiene una serie de etiquetas que permiten


asignar diferentes estilos de formatos al texto
Todas estn compuestas por instrucciones de inicio
y de fin <..> </..>
Tipos de etiquetas de formato:

Etiqueta de estilos fsicos:


son aquellas que especifican exactamente como debe ser
formateado el texto.
De uso comn aunque ltimamente estn en desuso.
Etiquetas de estilos lgicos:
Son aquellas que describiendo el tipo de texto asignan el
formato adecuado al texto.
Son las ms usadas entre los puristas del Lenguaje HTML.

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

34

8.1 Etiquetas estilos fsicos

Tema 2. Lenguaje HTML

Negrita: <B>..</B>
Cursiva: <I>..</I >
Teletipo: <TT>..</TT>
Texto Tachado:
<STRIKE>..</STRIKE >
Tamao Grande:
<BIG>..</BIG>
Tamao Pequeo:
<SMALL>..</SMALL>
Subndices:
<SUB>..</SUB>
Superndices:
<SUB>..</SUB>
Subrayados: <U>...</U>

Lenguaje de Marcas - HLC - 2 SMR 15/16

35

8.2 Etiquetas estilo lgico.

Tema 2. Lenguaje HTML

Resaltar Texto:
<STRONG>...< /STRONG>
Enfatizar: <EM>...< /EM>:
Cdigo programacin:
<CODE>...< /CODE>:
Ejemplos: <SAMP>...<
/SAMP>:
Delimitacin texto escrito
por usuario: <VAR>.. <
/VAR>
Cita o Referencia:
<CITE>...< /CITE>
Definicin: <DFN>...<
/DFN>

Lenguaje de Marcas - HLC - 2 SMR 15/16

36

8.3 Etiqueta <FONT>, <BASEFONT>

<FONT>. Permite cambiar las


propiedades del texto:

Atributos:

Tema 2. Lenguaje HTML

Tamao
Color
Nombre de fuente o tipo de letra
FACE: "Comic Sans MS, Arial, MS
Sans Serif"
COLOR:
N Hexadecimal: #FF0011
Texto predefinido: black, white,
maroon, olive, navy, purple, red,
yellow, blue, teal, lime, aqua,
fuchsia, silver
SIZE:
N del 1 al 7
Incremento o decremento del 1 al
7. (+/-) 1 al (+/-) 7
Defecto 3

<BASEFONT> Establece los


valores pr defecto

Lenguaje de Marcas - HLC - 2 SMR 15/16

37

8.4 Caracteres Especiales

Algunos caracteres no habituales en lenguaje anglosajn, son


considerado caracteres especiales, como la y acentos.
Existen mecanismos para insertar este tipo de caracteres en
aquellos sistemas donde no estn soportados.

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

38

8.4 Otros caracteres


especiales

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

39

9. Listas en HTML

Junto con los prrafos y


encabezados, las listas son
uno de los elementos HTML
ms usados en las pginas
webs.
Una lista es una enumeracin
de 2 o ms elementos,
dispuestos de tal forma que se
facilite su distincin.
El lenguaje HTML define los
siguientes tipos de lista:

Tema 2. Lenguaje HTML

Numerada u ordenada
No ordenada
Listas de glosario o definicin
Anidamientos de listas

Lenguaje de Marcas - HLC - 2 SMR 15/16

40

9.1 Lista no ordenada

<UL>...</UL>: La lista
ha de estar delimitada
por estas dos
etiquetas.

Tema 2. Lenguaje HTML

TYPE=circle|square|disc

<LI> : Cada elemento


se inserta con esta
etiqueta.
Ver ejemplo

Lenguaje de Marcas - HLC - 2 SMR 15/16

41

9.2 Lista ordenada

Numera los elementos de la


lista en el orden que se han
introducido.
<OL>...</OL>: La lista ha
de estar delimitada por
estas etiquetas (Ordered
List)

Tema 2. Lenguaje HTML

Type:1|a|A|I|i
Start: N
Value: N

<LI>: Para cada elemento


de la lista

Lenguaje de Marcas - HLC - 2 SMR 15/16

42

9.3 Listas de glosarios

Tema 2. Lenguaje HTML

Se utilizan para crear listas


de definiciones o
descripciones.
<DL>...</DL >: Delimitan el
principio y el final de este
tipo de listas. (Definition
List)
<DT>: Especificacin del
trmino a definir. (Definition
Term)
<DD>: Definicin o
descripcin del trmino
(Definition Description)

Lenguaje de Marcas - HLC - 2 SMR 15/16

43

9.4 Anidamiento de listas

Lenguaje HTML permite insertar una listas dentro de otra.


Se incluye todo el cdigo de una lista dentro de uno de los
elementos de la otra.

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

44

10. Comentarios en HTML

Son notas que el autor o autores ponen


en el cdigo para facilitar su
entendimiento.
No son mostrados por en navegador slo
visibles al leer el cdigo HTML
Usos comentarios:

Tema 2. Lenguaje HTML

Marcar determinadas partes y as


encontrarlas ms fcilmente.
Notas para recordar detalles del cdigo.
Ejemplo: aclarar el uso de una etiqueta y
no otra.
Apuntar lo que queda por hacer en una
determinada seccin.
Indicar el comienzo y el fin de una
determinada seccin
Indicar partes importantes del cdigo o
aquellas que cambian ms a menudo
Uso particulares de cada Webmaster.
Pueden usarse para cualquier cosa cada
programador puede tener sus propios
modos.

Etiqueta para comentarios: <!-Comentario -->

Lenguaje de Marcas - HLC - 2 SMR 15/16

45

11. Colores en HTML

Mejorar la apariencia
de una pgina web
Formas expresar color:

Tema 2. Lenguaje HTML

Palabra clave indicando


el nombre en ingls del
color. Ej: red, green,
blue
N Hexadecimal:
#00FF00

Lenguaje de Marcas - HLC - 2 SMR 15/16

46

11.1 Color con palabra clave

Ventajas:

Desventajas:

Tema 2. Lenguaje HTML

Fcil para el
programador
No todos los
navegadores lo
interpretan
N de colores a usar muy
limitado

Por todo ello no se


suele utilizar este
sistema

Lenguaje de Marcas - HLC - 2 SMR 15/16

47

11.2 Color en Hexadecimal

Forma el color usando una paleta de


colores RGB, a partir de los 3 colores
primarios:

Estructura del color en hexadecimal:

Hasta 16 millones de colores


Reconocido por todos los navegadores

Desventajas:

Tema 2. Lenguaje HTML

00 Mnima intensidad
FF Mxima intensidad
Ejemplos:

#000000 negro, #FFFFFF blanco,


#FF0000 rojo, #00FF00 verde,
#0000FF - azul

Ventajas:

#RRGGBB

Cada color le asigno mayor o menor


intensidad:

Red
Green
Blue

Algo ms complicado para el programador

Lenguaje de Marcas - HLC - 2 SMR 15/16

48

11.3 Asignacin Color

Fondo de pantalla:

Texto:

Tema 2. Lenguaje HTML

<body text=#RRGGBB>
<font color=#RRGGBB>
<basefont
color=#RRGGBB>

Enlaces: enlace, visitado y


activo

<body
bgcolor=#RRGGBB>

<body link=#RRGGBB
vlink =#RRGGBB
alink=#RRGGBB>

<body bgcolor="#000000" text="#FFFFFF"


link="#00FF00" vlink="#008080"
alink="#FF0000">

Lenguaje de Marcas - HLC - 2 SMR 15/16

49

12. Imgenes Fondo de pgina

Se utiliza para mejorar la apariencia de una


pgina web.
La imagen seleccionada servir de fondo a
todos los documentos HTML de nuestro sitio
web.
No siempre el uso de una imagen de fondo
mejora la apariencia de la pgina, existen
unos criterios para seleccionar la imagen
adecuada:

No debe impedir la visualizacin del


contenido de la pgina, tendr as
colores tenues y con pocos contrastes.

Bordes adecuados.

Poco peso (12 Kb, ) Clipart

Formatos: jpg o gif o png


Colocar imagen de fondo:

<body background=imagen.jpg>

Pginas fondo gratuitas:

Tema 2. Lenguaje HTML

www.specialweb.com
www.dewa.com
www.teleport.com

Lenguaje de Marcas - HLC - 2 SMR 15/16

50

13. Imgenes en HTML

Fundamental para diseador Web conocer


las distintas tcnicas para:

Incluir imgenes
Manejarlas
Cambiar su apariencia
Controlar su disposicin respecto a los dems
elementos de la pgina.

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

51

13.1 Insertar Imgenes

Se guarda en un archivo independiente del documento


HTML.
Normalmente en la carpeta Imgenes dependiente de la
carpeta principal de nuestra pgina web
Formatos admisibles: jpg, gif o png
Insertar imagen:

<img src="img.gif width=n height=n


alt=texto align=alineacion border=n>

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

52

13.2 Alineacin de Imgenes

La etiqueta IMG tiene


un atributo ALIGN que
nos permite controlar la
alineacin de la imagen
con respecto al texto.

Valores posibles ALIGN:

Tema 2. Lenguaje HTML

top
middle
bottom
left
right

Lenguaje de Marcas - HLC - 2 SMR 15/16

53

13.2.1 ALIGN=top

Tema 2. Lenguaje HTML

Alinea la parte superior


de la imagen con la
parte superior de la
lnea

Lenguaje de Marcas - HLC - 2 SMR 15/16

54

13.2.2 Align=middle

Tema 2. Lenguaje HTML

Alinea el centro vertical


de la imagen con la
primera lnea del texto

Lenguaje de Marcas - HLC - 2 SMR 15/16

55

13.2.3 Align=bottom

Tema 2. Lenguaje HTML

Alinea la parte inferior


de la imagen con la
primera lnea del texto
Alineacin que se toma
por defecto

Lenguaje de Marcas - HLC - 2 SMR 15/16

56

13.2.4 Align=left

Tema 2. Lenguaje HTML

La imagen se alinea a
la izquierda y puede
estar rodeada de texto
por arriba, derecha y
parte inferior

Lenguaje de Marcas - HLC - 2 SMR 15/16

57

13.2.5 Align=right

Tema 2. Lenguaje HTML

La imagen se sita a la
derecha de la pgina y
el texto la puede
bordear por arriba,
izquierda y abajo.

Lenguaje de Marcas - HLC - 2 SMR 15/16

58

13.3 Mrgenes en Imgenes

Para poder controlar


los mrgenes de una
imagen se incorporan
dos nuevos atributos a
la etiqueta IMG:

Tema 2. Lenguaje HTML

VSPACE: margen
vertical. N en pixels
HSPACE: margen
horizontal. N en pixels.

<img src=imagen.gif align=left


vspace=35 hspace=35>

Lenguaje de Marcas - HLC - 2 SMR 15/16

59

13.4 Imgenes como enlaces

Sabemos crear un enlace de hipertexto e


insertar una imagen
Uniendo las dos cosas se establece una
imagen como un enlace.
<a href="index.htm">
<img src="img/izda.gif">
</a>

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

60

13.5 Bordes en las imgenes

HTML permite incluir en


nuestras imgenes un
borde de grosor
variable.
Usar dentro de la
etiqueta IMG el atributo
BORDER:

Tema 2. Lenguaje HTML

BORDER=0
BORDER=1
BORDER=10

Lenguaje de Marcas - HLC - 2 SMR 15/16

61

13.6 Tamao de las imgenes

El tamao de las imgenes est


determinado por dos propiedades:

A cada uno de los atributos


anteriores se le da un tamao en
pixels.
Formas de asignar tamao:

Tema 2. Lenguaje HTML

Width: anchura
Height: altura

Dando valores a width y a height.


Determinamos por completo el
tamao con el que se mostrar la
imagen en la pgina.
Asignar valor a width o a height. La
dimensin omitida se ajusta para
mantener la proporcin de la imagen.
No asignando valores a width y
height. Toma la dimensin original
de la imagen

Mejora la eficiencia de nuestra


pgina indicando los valores width y
height

Lenguaje de Marcas - HLC - 2 SMR 15/16

62

14. Tablas

Con la aparicin de las


tablas se revolucion el
diseo de pginas web.
Utilidad:

Tema 2. Lenguaje HTML

Herramienta perfecta
para mostrar datos de
forma ordenada
Definir estructura o
maquetacin de las
pginas (escondiendo
los bordes)

Lenguaje de Marcas - HLC - 2 SMR 15/16

63

14.1 Crear Tabla

Es necesario usar la etiqueta


TABLE (<Table> </Table>)

Entre ambas debemos introducir


tres etiquetas que definirn la
estructura de la tabla:

<TR>: Table Row. Permitir insertar


filas en la tabla. La instruccin de fin
es optativa.
<TH>. Table Header. Primero de los
dos tipos de celdas existentes.
Celdas para cabecera. El texto se
muestra en negrita y centrado.
<TD>. Table Data. Segundo tipo de
celdas donde se introducen los datos
de las tablas. Dentro de las celdas
podemos insertar cualquier elemento
HTML:

Tema 2. Lenguaje HTML

Texto con o sin formato


Imgenes
Listas
Nuevas Tablas

Las instrucciones de fin de TR, TH y


TD son optativas.

Lenguaje de Marcas - HLC - 2 SMR 15/16

64

14.2 Atributos de las Tablas

<table border width="60%" align="left"


bgcolor="#ffcc00">
<caption> Tabla con casillas vacas
</caption>

Bordes: Atributo Border = N


Grosor. 0 sin borde. <Table
Border=0>
Casillas vacas: Las casillas vacas
es preciso indicarlas con la cadena
&nbsp; si queremos que aparezcan
dibujadas <td>&nbsp;</td>
Ttulo en las Tablas. Justo despus
de la etiqueta <Table>, se
especifica la etiqueta <Caption>
</Caption>. Atributo
Align=Top|Bottom
Color de fondo: Atributo
bgcolor=#RRGGBB.
Alineacin: Atributo
Align=Center|left|right:

Tema 2. Lenguaje HTML

Left y Right: El texto envuelve la


tabla
Center: El texto nunca envolver la
tabla

Lenguaje de Marcas - HLC - 2 SMR 15/16

65

14.3 Alineacin dentro Celdas

Horizontal: Atributo Align


dentro de la etiqueta <td>

Valores Align:

Vertical: atributo Valign dentro


de la etiqueta <td>

Valores:

Tema 2. Lenguaje HTML

Izquierda <td align="left">


Centrada <td align="center">
Derecha <td align="right">

Arriba <td valign="top">


Medio <td valign="middle">
Abajo <td valign="bottom">

Se pueden especificar en <tr>.


Lo hace extensible a todas las
celdas de la fila.

Lenguaje de Marcas - HLC - 2 SMR 15/16

66

14.4 Ancho y colores de


celdas

Los atributos bgcolor y


width, height se pueden
especificar en las etiquetas
<tr> y o <td>
Se pueden establecer
ancho, alto, color y
alineaciones diferentes:

Tema 2. Lenguaje HTML

Para toda la tabla, se


especifica en <table>
Para toda la fila, se
especifica en <tr>
Para una celda, se
especifica en <td>

Lenguaje de Marcas - HLC - 2 SMR 15/16

67

14.5 Separaciones Celdas,


Bordes y Contenidos.

Separacin entre celdas: por defecto


son 2 pixels. Atributo cellspacing
dentro de la etiqueta table.
Separacin entre el borde de la celda
y el contenido: La separacin por
defecto es 1 pixels. Atributo
cellpadding en la etiqueta table.

<table border width="60%" align="center" bgcolor="#ffffcc"


cellspacing="15 cellpadding=10>
Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

68

14.6 Tablas con celdas


distintos tamaos

Es habitual disear tablas en


las que las celdas ocupen 1 o
ms filas y/o una o ms
columnas.
En dichos casos se utilizan
atributos de extensin de
celda con la etiqueta <td>:

Tema 2. Lenguaje HTML

Colspan: N de columnas que


se extiende la celda. <td
colspan="4">
Rowspan: N de filas que se
extiende la celda. <td
rowspan="2">

Para disear este tipo de


tablas es fundamental tener
claro el nmero total de filas y
columnas.

Lenguaje de Marcas - HLC - 2 SMR 15/16

69

15. Formularios

Conjunto de elementos HTML que


permite a los usuarios introducir
informacin interesada.
HTML consta de una serie de
etiquetas que permiten crear
elementos de entrada de un
formulario.
Al conjunto de elementos de
entrada se le llama controles.
Zona de envo datos:

Tema 2. Lenguaje HTML

Servidor que procese y almacene


los datos a travs de un programa
en PHP, javascript, ...
Direccin de correo electrnico y
como datos no encriptados

Lenguaje de Marcas - HLC - 2 SMR 15/16

70

15.1 Etiqueta <Form>

Los formularios estn delimitados por las etiquetas <Form> </Form>


Dentro de ella se describirn todos los controles del formulario
Atributos:

ACTION: Indica la direccin a la que se enviar la informacin del formulario:


Direccin de correo electrnico. mailto: webmaster@servidor.es
Script CGI que se encargar de procesar y almacenar informacin.
Inscripcin.php
METHOD. Indica como se enviarn los datos
POST: enva los datos a la direccin indicada
GET: enva los datos agregndolos a la direccin URL
ENCTYPE: tipo de codificacin.
TEXT/PLAIN: informacin plana, no codificada
NAME: Nombre del formulario

<form action="mailto:login@servidor.es" method="post" enctype="text/plain


name=Inscripcion>
<form method="post" action="mostrardatos.php">
Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

71

15.2 Controles

Permiten al usuario introducir informacin en


nuestra pgina.

Unas veces ser un texto


Otras veces habr que elegir una opcin de una lista
desplegable
Otras veces habr que activar o desactivar una opcin
Otras veces el texto introducido deber permanecer oculto
Etc

La mayora de los controles de describen usando la


misma etiqueta <INPUT>

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

72

15.2.1 Cuadro de Texto.

Los cuadros de textos se definen mediante la siguiente etiqueta: <INPUT


TYPE=text>
Abritutos:

TYPE=text tipo de control Cuadro de Texto


NAME=Nombre Nombre del campo que almacenar el valor introducido
SIZE=n establece el tamao del cuadro de texto en la plantilla del
formulario
MAXLENGHT=n nmero mximo de caracteres que se pueden introducir
en la caja de texto
VALUE=Valor establece el valor por defecto que tomar el campo
DISABLED. Permite desactivar la caja de texto
ALIGN=Alineacion top, bottom, middle, right, left
ALT=descripcin pequea descripcin del elemento

<p>Apellidos <INPUT TYPE="text" NAME=apellidos" VALUE=" SIZE=45"


MAXLENGTH=45" ALIGN=left">

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

73

15.2.2 Cajas de textos para


Password

Cajas de textos especiales


donde el usuario deber de
introducir una informacin
oculta.
Se utilizan sobre todo para la
introduccin de Password o
claves
Impiden que el texto se muestre
al ser escrito, sin embargo no es
codificado al enviarlo al servidor
web, por lo que el mtodo no es
seguro.
<INPUT TYPE=password>
Tiene los mismos atributos que
<input type=text>

Tema 2. Lenguaje HTML

<INPUT TYPE="password" NAME="clave"


SIZE="tamao"
MAXLENGTH="longitud_mxima"
VALUE="clave por defecto"
ALIGN="alineamiento">

Lenguaje de Marcas - HLC - 2 SMR 15/16

74

15.2.3 Cajas de textos


Multilinea

Campos de formulario
en los que el usuario
podr introducir varias
lneas de texto
Etiqueta <TEXTAREA>
Atributos:

NAME=texto. Nombre
del control
ROWS=n. Nmero de
lneas de la caja
COLS=n. Nmero de
columas de la caja

Tema 2. Lenguaje HTML

Por favor haga sus comentarios sobre


esta pgina.
<FORM>
<TEXTAREA NAME="texto
ROWS="10 COLS="50">
Es la mejor que he visto nunca.
</TEXTAREA>
</FORM>

Lenguaje de Marcas - HLC - 2 SMR 15/16

75

15.2.4 Cuadro de Opciones

Reciben tambin el nombre de Botones de


Radio
Muestra lista de opciones excluyentes
El usuario slo podr seleccionar una de las
opciones mostradas en el cuadro
<INPUT TYPE=radio>
Atributos

VALUE=valor valor que devolver la variable


CHECKED activar la opcin por defecto
NAME=nombre grupo de opcin

Indique el tipo de msica que ms le guste:


<FORM>
<INPUT TYPE="radio" NAME="musica" VALUE="Jazz">Jazz <BR>
<INPUT TYPE="radio" NAME="musica" VALUE="Pop checked>Pop <BR>
<INPUT TYPE="radio" NAME="musica" VALUE="Rock">Rock <BR>
<INPUT TYPE="radio" NAME="musica" VALUE="Country">Country
</FORM>
Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

76

15.2.5 Cajas de Seleccin

Permiten insertar un cuadro de casillas de


verificacin
Muestra un cuadro de opciones no excluyentes
Cada opcin est representada por un cuadrito
Cada casilla de verificacin es independiente
del resto por ello el atributo NAME ha de ser
distinto
<INPUT TYPE="checkbox> con los mismos
atributos que el tipo radio

Indique su profesin (escoja todas las que procedan):


<FORM><BR>
<INPUT TYPE="checkbox" NAME="medico">Mdico<BR>
<INPUT TYPE="checkbox" NAME="programador CHECKED>Programador<BR>
<INPUT TYPE="checkbox" NAME="abogado">Abogado<br>
<INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero
<CENTER><INPUT TYPE="submit" VALUE="Enviar"></CENTER>
Tema 2. Lenguaje HTML
Lenguaje de Marcas - HLC - 2 SMR 15/16
</FORM>

77

15.2.6 Lista Desplegables

Permiten al usuario seleccionar de


una lista una de las opciones que se
muestran:

Listas Desplegables
Cuadros de Listas

Etiqueta <SELECT> <SELECT>

Atributos:

NAME=nombre. Nombre de la
seleccin
SIZE=n. Nmero de opciones
que se pueden ver al mismo
tiempo. Permite crear los
Cuadros de Listas
<OPTION>. Permite definir un
valor de la lista DESPLEGABLE
<OPTION VALUE=Texto>.
Define un valor del cuadro de
lista

<SELECT NAME="color">
<OPTION>Verde
<OPTION SELECTED>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>

<OPTION SELECTED>. Define


un valor de la lista y ser
seleccionado por defecto

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

78

15.3 Botones de Accin

Refresco

Enviar

Tema 2. Lenguaje HTML

Borra todos los datos


introducidos en el
formulario
<INPUT TYPE="reset"
VALUE="Restablecer">
Enva los datos bien a la
direccin indicada o al
script CGI
<INPUT TYPE="submit"
VALUE="Enviar">

Lenguaje de Marcas - HLC - 2 SMR 15/16

79

16. Etiquetas META

Muchos buscadores leen determinadas etiquetas en


la pgina para:

Extraer la descripcin de la pgina


Palabras claves que se le asocian

Es recomendable su buen uso para posicionarnos


adecuadamente en los motores de bsqueda
(google, yahoo, etc)
Las etiquetas META, se insertan en la cabecera de
la pgina, entre las etiquetas <head></head>
Es aconsejable insertar en todas las pginas html
de nuestro sitio Web, no slo en la pgina principal

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

80

16.1 Descripcin de la pgina.


Etiqueta description

Permite la especificacin de la descripcin de la pgina.


Recomendaciones:

Puede ser parecida al titulo, si cabe un poco ms descriptiva y


siempre debe ser una frase lgica completamente legible
El tamao puede estar entre 150 o 200 caracteres.
No debemos repetir la misma palabra en la descripcin, pues
pueden pensar que hacemos spam

Sintxis:

<META name="description" content="descripcion de la pgina aqu">

Fbrica de Artculos de Piel de Ubrique, Cdiz. Fabricacin de


marroquinera fina, cartera, bolsos, escribanas, chaquetas,
fundas de telfono mvil y otros productos de piel.
Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

81

16.2 Palabras Claves. Etiqueta


Keywords

Se colocarn frases claves una detrs de otra por orden de


importancia.
Recomendaciones:

No se debe repetir una frase clave


No se debe repetir una palabra ms de 5 veces
Separar las frases claves con ,
Conviene que las frases claves tengan relacin unas con otras.
El tamao recomendado para el texto est entre 200 y 400 caracteres

<META name="keywords" content=frase clave 1, frase 2, frase 3">

Fabricacin artculos piel Ubrique Cdiz, marroquinera fina en


Ubrique Cdiz, fabricacin bolsos de piel Ubrique, fabricacin
de Carteras en piel Ubrique, fabricacin chaquetas en piel
Ubrique. Productos de artesana en piel Ubrique.
Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

82

16.3 Otras Etiquetas META

Autor:

Generador:

<meta name="Revisit" content="1 day">

Distribucin:

<meta name="Language" content="Spanish">

Ultima actualizacin:

<meta name="Generator" content="Macromedia dreamweaver">

Lenguaje:

<META NAME="author"
CONTENT=Profesor del
Departamento Informtica IES LOS REMEDIOS">

<meta name="Distribution" content="Global">

Dispuesta para buscadores:

<meta name="Robots" content="All">

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

83

16.4 Ttulo de la Pgina

El Ttulo de la pgina Lo primero que debemos hacer es escoger un titulo


apropiado, es decir, un titulo que describa bien la pgina donde se encuentra y
contemple otras pequeas consideraciones:
Tiene que ser muy descriptivo. Algo como Taller mecnico no es suficiente.
Debera indicar tambin la localizacin del taller o cualquier informacin
adicional que pudiera enriquecer la descripcin, como el nombre del taller o su
especialidad.
Ha de incluir las palabras clave que definen nuestro sitio. Adems debera
contener las palabras ms importantes al principio, pues muchos buscadores
solo se fijan en las primeras palabras del ttulo.
La longitud del ttulo tambin es otro parmetro que hay que ajustar. Un titulo
corto es poco adecuado, pero los buscadores pueden pensar que les estas
haciendo spam si encuentran uno demasiado largo. Hay muchas
consideraciones al respecto, pero podemos indicar que lo ms adecuado es
que sea de 15 a 20 palabras de longitud, o del orden de los 50 a 100
caracteres.
Un ttulo apropiado para el mecnico de Vallecas sera:

<TITLE>Taller mecanico de coches en Vallecas, Madrid, Todo Auto. Reparacion de


lunetas limpiaparabrisas electricidad recambios aceite</TITLE>

Tema 2. Lenguaje HTML

Lenguaje de Marcas - HLC - 2 SMR 15/16

84

16.5 Primeros Prrafos

Es otra cosa en la que se fijan mucho los motores de bsqueda al indexar una
pgina web. Si nuestra web lo permite, debemos colocar un primer prrafo que sirva
de introduccin a todo lo que podemos encontrarnos en la pgina o en la web.
Este primer prrafo, Deber estar colocado dentro del <BODY>, lo mas cerca
posible de este. Si es posible, evitaremos que entre la etiqueta y el primer prrafo
existan otras etiquetas, como imgenes.
Deber ser legible. Este texto se ver en la pgina, igual que cualquier prrafo, por
eso debe leerse bien.
Podramos poner en la pgina del mecnico este texto despus de la etiqueta
<BODY> <H1 align=center> Todo Auto</H1>
En Vallecas, situado en la carretera de Valencia a 3 km de Madrid, se
encuentra nuestro taller de reparacin de automviles y recambios.
Estaremos gustosos de atenderles y ofrecerles nuestros servicios de todo
tipo para su coche, como cambio de aceite, reparacin de lunetas termicas, y
otros.
De manera adicional, y sobretodo durante los primeros prrafos podemos utilizar
otras tcnicas, de ms dudosa utilidad.

Utilizar los encabezamientos (etiquetas <H1> y similares) para destacar los ttulos de las
pginas siempre que se pueda.
Definir los atributos ALT de las imgenes con palabras claves

Estas tcnicas han de usarse siempre con moderacin, evitando cualquier uso
excesivo que acabe perjudicando
la posicin del sitio.
Tema 2. Lenguaje HTML
Lenguaje de Marcas - HLC - 2 SMR 15/16

85

Das könnte Ihnen auch gefallen