tema 2 - lenguajes html
TRANSCRIPT
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 1/85
Tema 2. LenguajeHTML
Lenguaje de Marcas - HLC2º SMR 15/16
Profesor Juan Carlos Moreno
IES NTRA. SRA. LOS REMEDIOS - UBRIQUE
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 2/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 2
1. INTRODUCCIÓN
A. WWW contiene gran
cantidad información,
pero ha de estar
ordenadaB. La unidad básica
almacena información
Páginas Web
C. Páginas web sonHipertexto contienen
links o enlaces
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 3/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 3
1.1 Características HTML
HiperText Markup Language
HTML es Lenguaje de Marcas más popular
otros XHTML, RSS, RTF, CSS Versión actual HTML 5.0
Mecanismos para incluir:
Hojas de Estilo CSS
JAVASCRIPTS
….
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 4/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 4
1.2 Herramientas crear Web
Cualquier ordenador ysistema operativo.
Editores HTML: Asistentes HotDog
Conversores – Word Editores WYSIWYG –
Dreamweaver
Netbeans
Notepad ++
Los archivos web tieneextensión HTM o HTML,la segunda opciónpreferentemente.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 5/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 5
1.3 Editor Notepad++
Notepad++ es un editor consoporte para varios lenguajesde programación, c++, java, javascript, css, entre ellosHTML
Distribuido bajo licencia GPL
Características: Coloreado y envoltura de sintáxis,
resaltando las expresiones propiasdel lenguaje HTML
Pestañas
Resaltado paréntesis
Ayuda en línea
Paquete de idiomas
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 6/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 6
1.4 Bases de HTML
Ordenes formadas por un conjunto deetiquetas:
<Nombre_Etiqueta>
<Nombre_Etiqueta>Texto</Nombre_Etiqueta>
Ejemplo: Escribir Línea Horizontal
<HR>
<HR SIZE=1> con grosor 1 <HR SIZE=2>
….
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 7/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 7
2. Primeros Pasos HTML
Conocidas ya las principales características
de HTML estamos listos para aprender sus
principales etiquetas y para crear nuestra
primera página
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 8/85
2.1 Estructura Básica de unaPágina
Página: <HTML>
Cabecera <HEAD>
Título <TITLE>…</TITLE>
Fin Cabecera </HEAD>
Cuerpo <BODY>
Encabezados <H1>…<H1>
Líneas <HR>, <HR
SIZE=2>
Fin Cuerpo </BODY> Fin de Página </HTML>
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 8
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 9/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 9
2.1 Estructura Básica de unaPágina. Ejemplo
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 10/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 10
2.2 Etiquetas Básicas
<HTML>
<HEAD>
<TITLE> <BODY>
<H1>
<HR>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 11/85
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
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 12/85
2.2.2 <HEAD>
Sirve para delimitar el
inicio y el fin de la
cabecera de la
Página: Es preciso
especificar:
Inicio cabecera:<HEAD>
Fin de cabecera
</HEAD>
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 12
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 13/85
2.2.3 <TITLE>
Solo se usa en la Cabeceradel Página, dentro de lasetiquetas <HEAD>
Indica el texto que apareceráen la Barra de título de laventana del Navegador.
Inicio título: <TITLE>
Fin de título </TITLE>
Indica también el nombre conel que aparecerá nuestra
página si se agrega afavoritos.
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 13
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 14/85
2.2.4 <BODY>
Sirve para delimitar el
inicio y el fin del cuerpo
de la página:
Es preciso especificar: Inicio cuerpo: <BODY>
Fin del cuerpo </BODY>
En el cuerpo es donde se
escribe el resto del
código de nuestra página.
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 14
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 15/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 15
2.2.5 Encabezados <H1>
Sirve para destacar un texto
en nuestra página.
Comienzan en una línea
nueva y el texto siguiente
continuará en otra línea
Tamaños encabezados:
<H1>, <H2>. …, <H6>
<H1> mayor tamaño
<H6> menor tamaño
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 16/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 16
2.2.6 Línea Horizontal <HR>
Dibuja una línea horizontal.
Align:
“Left”
“Right”
“Center”
Width: ancho. “300%”
Size: alto. “5”
Noshade. Elimina
sombreado
<hr align="left" width="300%"
size="5" noshade>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 17/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 17
3. Párrafos en HTML
Permite introducir un texto en la Página Web
HTML elimina del documento original: Espaciados
Saltos de línea
Tabulados
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 18/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 18
3.1 Saltos de línea <BR>
Permiten introducir un punto y aparta cuando
introducimos un texto.
<BR>
Para introducir varios saltos de línea:
<br>
<br>
<br>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 19/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 19
3.2 Insertar Párrafos <P>
Conjunto de frases sobre un mismo asunto.
<P> Inicio párrafo </P> Final párrafo
Se pueden insertar <BR> en los párrafos
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 20/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 20
3.2 Insertar Párrafos II
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 21/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 21
3.3 Párrafo con Sangría
<BLOCKQUOTE>…</ BLOCKQUOTE>
Permite establecer textos con sangría Establece un margen por la izquierda y otro por la
derecha
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 22/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 22
3.4 Etiqueta <adress>
En inglés significa
dirección
Se usa para incluir
información sobre: Autor de la página
Fecha
Empresa
Siempre al final
<adress>…</adress>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 23/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 23
3.5 Alineación del Texto
Las alineaciones posibles:
Izquierda: por defecto <LEFT>
Derecha: <RIGHT>
Centro: <CENTER> Justificado: <JUSTIFY>
Requiere uso del parámetro ALIGN en la etiqueta
<P>
<p align="center">Bienvenidos a miPAGINA.</p>
Alternativa etiquetas DIV y CSS (actual)
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 24/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 24
4. Imágenes. <IMG…>
Parámetros: SRC. Nombre del archivo que contiene la imagen.
SRC=“abispa.jpg”
SRC=“Imagenes/abispas.jpg”
ALT. Muestra un texto alternativo previo a la aparición de laimagen. ALT=“Fotografía del Centro de Educación Adultos de Ubrique”
ALIGN. Alineación 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”>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 25/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 25
4. Imágenes. <IMG…>. Align
El tipo de alineación respecto al texto escrito puede ser:
absbottom absmiddle baseline bottom left
middle
right
texttop top
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 26/85
4. Imágenes. <IMG…>. Align
Tema 2. Lenguaje HTML 26Lenguaje de Marcas - HLC - 2º SMR 15/16
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 27/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 27
5. Enlaces de Hipertexto
Parte especial de una página que al ser pulsado nos abre unanueva página o cualquier otro documento.
Sinónimos: Enlaces, Hipervínculo, Hiperenlaces, Hipertexto, Link, etc…
Normalmente los links se utilizan con textos, pero también sepueden usar con imágenes, sonidos, vídeos, y prácticamentecualquier tipo de archivo.
Tipos de enlaces: Internos:
Mismo documento HTML. Enlaza a otro lugar del mismo documentoHTML.
Distinto documento HTML. Enlaza a otra página que forma parte delmismo sitio Web
Externo: Permite saltar a cualquier otra página de cualquier otro servidor.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 28/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 28
5.1 Etiqueta <a>…</a>
Nos permitirá incluir enlaces de hipertexto.
Atributos:
HREF. Permite indicar la página 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.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 29/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 29
5.2 Ejemplos Hipertextos
<a HREF=“historia.html”>Historia de España</a>
<a href=“contenido/inicio.html”>Inicio de la Inscripción</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">
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 30/85
Tema 3. Lenguaje HTML Aplicaciones Web - 2º SMR 11/12 30
6. Color de Fondo
Para establecer fondoa una página:
En la etiquete Bodyse añade el siguienteparámetro.
<bodybgcolor="#E0F8F7“>
Cada color secorresponde con unacadena enHEXADECIMAL:
#FFFFFF – Blanco #FF0000 - Rojo
Ver la sección coloresHTML de este manual
Tema 2. Lenguaje HTML 30Lenguaje de Marcas - HLC - 2º SMR 15/16
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 31/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 31
7. Márgenes Página
Los márgenes permitenmejorar la calidad depresentación de nuestraspáginas.
En una web se puedenestablecer 4 tipos demárgenes: Superior, Inferior,Izquierdo y Derecho
Los márgenes se establecenen la etiqueta body.
Ejemplo:
<bodybgcolor="#E0F8F7"leftmargin="150px"topmargin="10px"rightmargin="150px"bottommargin="10px">
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 32/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 32
7. Anclas
Permite establecer enlaces internos,dentro del mismo ducumento HTML.
Una Ancla es una marca que seinserta en un punto determinado de
una página , 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 otrapágina
<a href=“Historia.html#nombreAncla">Texto</a>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 33/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 33
7.1 Ejemplo Uso Anclas
Código del enlace arriba:
<a
href="#Geografia">Geogr
afía</a>
Código del ancla abajo: <H2><a
name="Geografia">Ge
ografía</a></H2>
En este caso <H2> se
coloca sólo para darle
caracter de títuo al
texto
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 34/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 34
8. Formato de Texto yCaracteres Especiales
HTML contiene una serie de etiquetas que permitenasignar diferentes estilos de formatos al texto
Todas están compuestas por instrucciones de inicioy de fin <..> </..>
Tipos de etiquetas de formato: Etiqueta de estilos físicos:
son aquellas que especifican exactamente como debe serformateado el texto.
De uso común aunque últimamente están en desuso.
Etiquetas de estilos lógicos: Son aquellas que describiendo el tipo de texto asignan el
formato adecuado al texto.
Son las más usadas entre los puristas del Lenguaje HTML.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 35/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 35
8.1 Etiquetas estilos físicos
Negrita: <B>..</B>
Cursiva: <I>..</I >
Teletipo: <TT>..</TT>
Texto Tachado:
<STRIKE>..</STRIKE > Tamaño Grande:
<BIG>..</BIG>
Tamaño Pequeño:<SMALL>..</SMALL>
Subíndices:<SUB>..</SUB>
Superíndices:<SUB>..</SUB>
Subrayados: <U>...</U>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 36/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 36
8.2 Etiquetas estilo lógico.
Resaltar Texto:<STRONG>...< /STRONG>
Enfatizar: <EM>...< /EM>:
Código programación:<CODE>...< /CODE>:
Ejemplos: <SAMP>...< /SAMP>:
Delimitación texto escrito por usuario: <VAR>.. < /VAR>
Cita o Referencia:<CITE>...< /CITE>
Definición: <DFN>...< /DFN>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 37/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 37
8.3 Etiqueta <FONT>, <BASEFONT>
<FONT>. Permite cambiar laspropiedades del texto: Tamaño
Color
Nombre de fuente o tipo de letra
Atributos:
FACE: "Comic Sans MS, Arial, MSSans 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 al7. (+/-) 1 al (+/-) 7
Defecto 3
<BASEFONT> Establece losvalores pr defecto
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 38/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 38
8.4 Caracteres Especiales
Algunos caracteres no habituales en lenguaje anglosajón, sonconsiderado caracteres especiales, como la ñ y acentos.
Existen mecanismos para insertar este tipo de caracteres enaquellos sistemas donde no están soportados.
8 4 O
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 39/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 39
8.4 Otros caracteresespeciales
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 40/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 40
9. Listas en HTML
Junto con los párrafos yencabezados, las listas sonuno de los elementos HTMLmás usados en las páginaswebs.
Una lista es una enumeraciónde 2 o más elementos,dispuestos de tal forma que sefacilite su distinción.
El lenguaje HTML define lossiguientes tipos de lista: Numerada u ordenada
No ordenada
Listas de glosario o definición
Anidamientos de listas
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 41/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 41
9.1 Lista no ordenada
<UL>...</UL>: La lista
ha de estar delimitada
por estas dos
etiquetas. TYPE=“circle|square|disc”
<LI> : Cada elemento
se inserta con esta
etiqueta. Ver ejemplo
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 42/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 42
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 porestas etiquetas (Ordered
List)
Type:”1|a|A|I|i”
Start: Nº Value: Nº
<LI>: Para cada elemento
de la lista
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 43/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 43
9.3 Listas de glosarios
Se utilizan para crear listasde definiciones odescripciones.
<DL>...</DL >: Delimitan el
principio y el final de estetipo de listas. (DefinitionList)
<DT>: Especificación deltérmino a definir. (Definition
Term) <DD>: Definición o
descripción del término(Definition Description)
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 44/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 44
9.4 Anidamiento de listas
Lenguaje HTML permite insertar una listas dentro de otra.
Se incluye todo el código de una lista dentro de uno de los
elementos de la otra.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 45/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 45
10. Comentarios en HTML Son notas que el autor o autores ponen
en el código para facilitar suentendimiento.
No son mostrados por en navegador sólovisibles al leer el código HTML
Usos comentarios: Marcar determinadas partes y así
encontrarlas más fácilmente. Notas para recordar detalles del código.
Ejemplo: aclarar el uso de una etiqueta yno otra.
Apuntar lo que queda por hacer en unadeterminada sección.
Indicar el comienzo y el fin de unadeterminada sección
Indicar partes importantes del código oaquellas que cambian más a menudo
Uso particulares de cada Webmaster.Pueden usarse para cualquier cosa cadaprogramador puede tener sus propiosmodos.
Etiqueta para comentarios: <!--Comentario -->
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 46/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 46
11. Colores en HTML
Mejorar la apariencia
de una página web
Formas expresar color:
Palabra clave indicandoel nombre en inglés del
color. Ej: “red”, “green”,
“blue”
Nº Hexadecimal:
“#00FF00”
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 47/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 47
11.1 Color con palabra clave
Ventajas: Fácil para el
programador
Desventajas: No todos los
navegadores lointerpretan
Nº de colores a usar muylimitado
Por todo ello no sesuele utilizar estesistema
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 48/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 48
11.2 Color en Hexadecimal Forma el color usando una paleta de
colores RGB, a partir de los 3 coloresprimarios: Red
Green
Blue
Estructura del color en hexadecimal:
#RRGGBB Cada color le asigno mayor o menor
intensidad: 00 – Mínima intensidad
FF – Máxima intensidad
Ejemplos:
#000000 – negro, #FFFFFF – blanco,#FF0000 – rojo, #00FF00 – verde,#0000FF - azul
Ventajas: Hasta 16 millones de colores
Reconocido por todos los navegadores
Desventajas: Algo más complicado para el programador
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 49/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 49
11.3 Asignación Color
Fondo de pantalla: <body
bgcolor=“#RRGGBB”>
Texto: <body text=“#RRGGBB”>
<font color=“#RRGGBB”> <basefont
color=“#RRGGBB”>
Enlaces: enlace, visitado yactivo
<body link=“#RRGGBB”vlink =“#RRGGBB”alink=“#RRGGBB”>
<body bgcolor="#000000" text="#FFFFFF"link="#00FF00" vlink="#008080"
alink="#FF0000">
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 50/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 50
12. Imágenes Fondo de página Se utiliza para mejorar la apariencia de una
página web.
La imagen seleccionada servirá de fondo atodos los documentos HTML de nuestro sitioweb.
No siempre el uso de una imagen de fondomejora la apariencia de la página, existenunos criterios para seleccionar la imagen
adecuada: No debe impedir la visualización del
contenido de la página, 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”> Páginas fondo gratuitas:
www.specialweb.com
www.dewa.com
www.teleport.com
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 51/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 51
13. Imágenes en HTML
Fundamental para diseñador Web conocer
las distintas técnicas para:
Incluir imágenes
Manejarlas
Cambiar su apariencia
Controlar su disposición respecto a los demás
elementos de la página.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 52/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 52
13.1 Insertar Imágenes
Se guarda en un archivo independiente del documentoHTML.
Normalmente en la carpeta Imágenes dependiente de lacarpeta principal de nuestra página web
Formatos admisibles: jpg, gif o png Insertar imagen:
<img src="img.gif“ width=“nº” height=“nº”
alt=“texto” align=“alineacion” border=“nº”>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 53/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 53
13.2 Alineación de Imágenes
La etiqueta IMG tieneun atributo ALIGN quenos permite controlar laalineación de la imagen
con respecto al texto. Valores posibles ALIGN:
top
middle
bottom left
right
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 54/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 54
13.2.1 ALIGN=„top‟
Alinea la parte superior
de la imagen con la
parte superior de la
línea
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 55/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 55
13.2.2 Align=“middle”
Alinea el centro vertical
de la imagen con la
primera línea del texto
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 56/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 56
13.2.3 Align=“bottom”
Alinea la parte inferior
de la imagen con la
primera línea del texto
Alineación que se tomapor defecto
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 57/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 57
13.2.4 Align=“left”
La imagen se alinea a
la izquierda y puede
estar rodeada de texto
por arriba, derecha yparte inferior
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 58/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 58
13.2.5 Align=“right”
La imagen se sitúa a la
derecha de la página y
el texto la puede
bordear por arriba,izquierda y abajo.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 59/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 59
13.3 Márgenes en Imágenes
Para poder controlar
los márgenes de una
imagen se incorporan
dos nuevos atributos ala etiqueta IMG:
VSPACE: margen
vertical. Nº en pixels
HSPACE: margen
horizontal. Nº en pixels.
<img src=“imagen.gif” align=left
vspace=35 hspace=35>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 60/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 60
13.4 Imágenes 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>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 61/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 61
13.5 Bordes en las imágenes
HTML permite incluir en
nuestras imágenes un
borde de grosor
variable. Usar dentro de la
etiqueta IMG el atributo
BORDER:
BORDER=“0” BORDER=“1”
BORDER=“10”
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 62/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 62
13.6 Tamaño de las imágenes El tamaño de las imágenes está
determinado por dos propiedades: Width: anchura
Height: altura
A cada uno de los atributosanteriores se le da un tamaño enpixels.
Formas de asignar tamaño: Dando valores a width y a height.
Determinamos por completo eltamaño con el que se mostrará laimagen en la página.
Asignar valor a width o a height. Ladimensión omitida se ajusta para
mantener la proporción de la imagen. No asignando valores a width y
height. Toma la dimensión originalde la imagen
Mejora la eficiencia de nuestrapágina indicando los valores width yheight
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 63/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 63
14. Tablas
Con la aparición de las
tablas se revolucionó el
diseño de páginas web.
Utilidad: Herramienta perfecta
para mostrar datos de
forma ordenada
Definir estructura o
maquetación de las
páginas (escondiendo
los bordes)
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 64/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 64
14.1 Crear Tabla
Es necesario usar la etiquetaTABLE ( <Table> … </Table>)
Entre ambas debemos introducirtres etiquetas que definirán laestructura de la tabla: <TR>: Table Row . Permitirá insertar
filas en la tabla. La instrucción de fines optativa.
<TH>. Table Header . Primero de losdos tipos de celdas existentes.Celdas para cabecera. El texto semuestra en negrita y centrado.
<TD>. Table Data. Segundo tipo deceldas donde se introducen los datosde las tablas. Dentro de las celdaspodemos insertar cualquier elemento
HTML: Texto con o sin formato
Imágenes
Listas
Nuevas Tablas
Las instrucciones de fin de TR, TH yTD son optativas.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 65/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 65
14.2 Atributos de las Tablas Bordes: Atributo Border = “Nº
Grosor”. 0 sin borde. <TableBorder=“0”>
Casillas vacías: Las casillas vacíases preciso indicarlas con la cadena si queremos que aparezcandibujadas <td> </td>
Título en las Tablas. Justo despuésde la etiqueta <Table>, seespecifica la etiqueta <Caption> …</Caption>. Atributo
Align=“Top|Bottom”
Color de fondo: Atributobgcolor=“#RRGGBB”.
Alineación: Atributo Align=“Center|left|right”: Left y Right: El texto envuelve la
tabla
Center: El texto nunca envolverá latabla
<table border width="60%" align="left"
bgcolor="#ffcc00">
<caption> Tabla con casillas vacías
</caption>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 66/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 66
14.3 Alineación dentro Celdas
Horizontal: Atributo Aligndentro de la etiqueta <td> Valores Align:
Izquierda <td align="left"> Centrada <td align="center">
Derecha <td align="right">
Vertical: atributo Valign dentrode la etiqueta <td> Valores:
Arriba <td valign="top"> Medio <td valign="middle">
Abajo <td valign="bottom">
Se pueden especificar en <tr>.Lo hace extensible a todas lasceldas de la fila.
14 4 Ancho y colores de
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 67/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 67
14.4 Ancho y colores deceldas
Los atributos bgcolor ywidth, height se puedenespecificar en las etiquetas<tr> y o <td>
Se pueden establecerancho, alto, color yalineaciones diferentes:
Para toda la tabla, seespecifica en <table>
Para toda la fila, se
especifica en <tr>
Para una celda, seespecifica en <td>
14 5 Separaciones Celdas
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 68/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 68
14.5 Separaciones Celdas,Bordes y Contenidos.
Separación entre celdas: por defecto
son 2 pixels. Atributo cellspacingdentro de la etiqueta table.
Separación entre el borde de la celda
y el contenido: La separación pordefecto es 1 pixels. Atributo
cellpadding en la etiqueta table.
<table border width="60%" align="center" bgcolor="#ffffcc"
cellspacing="15“ cellpadding=“10”>
14 6 Tablas con celdas
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 69/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 69
14.6 Tablas con celdasdistintos tamaños
Es habitual diseñar tablas enlas que las celdas ocupen 1 omás filas y/o una o máscolumnas.
En dichos casos se utilizanatributos de extensión de
celda con la etiqueta <td>: Colspan: Nº de columnas que
se extiende la celda. <tdcolspan="4">
Rowspan: Nº de filas que seextiende la celda. <td
rowspan="2"> Para diseñar este tipo detablas es fundamental tenerclaro el número total de filas ycolumnas.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 70/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 70
15. Formularios
Conjunto de elementos HTML quepermite a los usuarios introducirinformación interesada.
HTML consta de una serie deetiquetas que permiten crearelementos de entrada de un
formulario. Al conjunto de elementos de
entrada se le llama controles.
Zona de envío datos:
Servidor que procese y almacene
los datos a través de un programaen PHP, javascript, ...
Dirección de correo electrónico ycomo datos no encriptados
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 71/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 71
15.1 Etiqueta <Form> Los formularios están delimitados por las etiquetas <Form>… </Form> Dentro de ella se describirán todos los controles del formulario
Atributos: ACTION: Indica la dirección a la que se enviará la información del formulario:
Dirección de correo electrónico. “mailto: [email protected]”
Script CGI que se encargará de procesar y almacenar información.“Inscripción.php”
METHOD. Indica como se enviarán los datos POST: envía los datos a la dirección indicada
GET: envía los datos agregándolos a la dirección URL
ENCTYPE: tipo de codificación.
TEXT/PLAIN: información plana, no codificada
NAME: Nombre del formulario
<form action="mailto:[email protected]" method="post" enctype="text/plain“
name=“Inscripcion”>
<form method="post" action="mostrardatos.php">
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 72/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 72
15.2 Controles
Permiten al usuario introducir información en
nuestra página.
Unas veces será un texto
Otras veces habrá que elegir una opción de una listadesplegable
Otras veces habrá que activar o desactivar una opción
Otras veces el texto introducido deberá permanecer oculto
Etc…
La mayoría de los controles de describen usando la
misma etiqueta <INPUT>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 73/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 73
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 tamaño del cuadro de texto en la plantilla delformulario
MAXLENGHT=“n” – número máximo de caracteres que se pueden introduciren 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=“descripción” – pequeña descripción del elemento
<p>Apellidos <INPUT TYPE="text" NAME=“apellidos" VALUE=“" SIZE=“´45"
MAXLENGTH=“45" ALIGN=“left">
15.2.2 Cajas de textos para
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 74/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 74
15.2.2 Cajas de textos paraPassword
Cajas de textos especialesdonde el usuario deberá deintroducir una informaciónoculta.
Se utilizan sobre todo para la
introducción de Password oclaves
Impiden que el texto se muestreal ser escrito, sin embargo no escodificado al enviarlo al servidorweb, por lo que el método no es
seguro. <INPUT TYPE=“password”>
Tiene los mismos atributos que<input type=“text”>
<INPUT TYPE="password" NAME="clave"
SIZE="tamaño"
MAXLENGTH="longitud_máxima"
VALUE="clave por defecto"
ALIGN="alineamiento">
15.2.3 Cajas de textos
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 75/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 75
15.2.3 Cajas de textosMultilinea
Campos de formularioen los que el usuariopodrá introducir variaslíneas de texto
Etiqueta <TEXTAREA>
Atributos: NAME=“texto”. Nombre
del control
ROWS=“n”. Número delíneas de la caja
COLS=“n”. Número decolumas de la caja
Por favor haga sus comentarios sobre
esta página.
<FORM>
<TEXTAREA NAME="texto“
ROWS="10“ COLS="50">Es la mejor que he visto nunca.
</TEXTAREA>
</FORM>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 76/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 76
15.2.4 Cuadro de Opciones Reciben también el nombre de Botones de
Radio
Muestra lista de opciones excluyentes
El usuario sólo podrá seleccionar una de lasopciones mostradas en el cuadro
<INPUT TYPE=“radio”>
Atributos VALUE=“valor” – valor que devolverá la variable
CHECKED – activará la opción por defecto
NAME=“nombre” – grupo de opción
Indique el tipo de música que más 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>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 77/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 77
15.2.5 Cajas de Selección Permiten insertar un cuadro de casillas de
verificación
Muestra un cuadro de opciones no excluyentes
Cada opción está representada por un cuadrito
Cada casilla de verificación es independientedel resto por ello el atributo NAME ha de ser
distinto <INPUT TYPE="checkbox“> con los mismos
atributos que el tipo “radio”
Indique su profesión (escoja todas las que procedan):
<FORM><BR>
<INPUT TYPE="checkbox" NAME="medico">Médico<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>
</FORM>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 78/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 78
15.2.6 Lista Desplegables Permiten al usuario seleccionar de
una lista una de las opciones que semuestran: Listas Desplegables
Cuadros de Listas
Etiqueta <SELECT>… <SELECT> Atributos:
NAME=“nombre”. Nombre de laselección
SIZE=“n”. Número de opcionesque se pueden ver al mismotiempo. Permite crear losCuadros de Listas
<OPTION>. Permite definir unvalor de la lista DESPLEGABLE
<OPTION VALUE=“Texto”>.Define un valor del cuadro delista
<OPTION SELECTED>. Defineun valor de la lista y seráseleccionado por defecto
<SELECT NAME="color">
<OPTION>Verde
<OPTION SELECTED>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 79/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 79
15.3 Botones de Acción
Refresco Borra todos los datos
introducidos en elformulario
<INPUT TYPE="reset"VALUE="Restablecer">
Enviar Envía los datos bien a la
dirección indicada o al
script CGI <INPUT TYPE="submit"
VALUE="Enviar">
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 80/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 80
16. Etiquetas META
Muchos buscadores leen determinadas etiquetas enla página para: Extraer la descripción de la página
Palabras claves que se le asocian
Es recomendable su buen uso para posicionarnosadecuadamente en los motores de búsqueda(google, yahoo, etc…)
Las etiquetas META, se insertan en la cabecera de
la página, entre las etiquetas <head>…</head> Es aconsejable insertar en todas las páginas html
de nuestro sitio Web, no sólo en la página principal
16.1 Descripción de la página.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 81/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 81
p p gEtiqueta description
Permite la especificación de la descripción de la página.
Recomendaciones:
Puede ser parecida al titulo, si cabe un poco más descriptiva ysiempre debe ser una frase lógica completamente legible
El tamaño puede estar entre 150 o 200 caracteres.
No debemos repetir la misma palabra en la descripción, puespueden pensar que hacemos spam
Sintáxis:
<META name="description" content="descripcion de la página aquí">
Fábrica de Artículos de Piel de Ubrique, Cádiz. Fabricación demarroquinería fina, cartera, bolsos, escribanías, chaquetas,fundas de teléfono móvil y otros productos de piel.
16.2 Palabras Claves. Etiqueta
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 82/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 82
qKeywords
Se colocarán frases claves una detrás de otra por orden deimportancia.
Recomendaciones: No se debe repetir una frase clave
No se debe repetir una palabra más de 5 veces
Separar las frases claves con “,” Conviene que las frases claves tengan relación unas con otras.
El tamaño recomendado para el texto está entre 200 y 400 caracteres
<META name="keywords" content=“frase clave 1, frase 2, frase 3">
Fabricación artículos piel Ubrique Cádiz, marroquinería fina enUbrique Cádiz, fabricación bolsos de piel Ubrique, fabricaciónde Carteras en piel Ubrique, fabricación chaquetas en pielUbrique. Productos de artesanía en piel Ubrique.
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 83/85
Tema 2. Lenguaje HTML Lenguaje de Marcas - HLC - 2º SMR 15/16 83
16.3 Otras Etiquetas META Autor:
<META NAME="author" CONTENT=“Profesor delDepartamento Informática IES LOS REMEDIOS">
Generador: <meta name="Generator" content="Macromedia dreamweaver">
Lenguaje: <meta name="Language" content="Spanish">
Ultima actualización: <meta name="Revisit" content="1 day">
Distribución: <meta name="Distribution" content="Global">
Dispuesta para buscadores: <meta name="Robots" content="All">
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 84/85
16.4 Título de la Página El Título de la página Lo primero que debemos hacer es escoger un titulo
apropiado, es decir, un titulo que describa bien la página donde se encuentra ycontemple otras pequeñas consideraciones:
Tiene que ser muy descriptivo. Algo como Taller mecánico no es suficiente.Debería indicar también la localización del taller o cualquier informaciónadicional que pudiera enriquecer la descripción, como el nombre del taller o suespecialidad.
Ha de incluir las palabras clave que definen nuestro sitio. Además deberíacontener las palabras más importantes al principio, pues muchos buscadoressolo se fijan en las primeras palabras del título.
La longitud del título también es otro parámetro que hay que ajustar. Un titulocorto es poco adecuado, pero los buscadores pueden pensar que les estashaciendo spam si encuentran uno demasiado largo. Hay muchasconsideraciones al respecto, pero podemos indicar que lo más adecuado es
que sea de 15 a 20 palabras de longitud, o del orden de los 50 a 100caracteres.
Un título apropiado para el mecánico de Vallecas sería: <TITLE>Taller mecanico de coches en Vallecas, Madrid, Todo Auto. Reparacion de
lunetas limpiaparabrisas electricidad recambios aceite</TITLE>
Tema 2. Lenguaje HTML 84Lenguaje de Marcas - HLC - 2º SMR 15/16
7/23/2019 Tema 2 - Lenguajes HTML
http://slidepdf.com/reader/full/tema-2-lenguajes-html 85/85
16.5 Primeros Párrafos Es otra cosa en la que se fijan mucho los motores de búsqueda al indexar una
página web. Si nuestra web lo permite, debemos colocar un primer párrafo que sirvade introducción a todo lo que podemos encontrarnos en la página o en la web.
Este primer párrafo, Deberá estar colocado dentro del <BODY>, lo mas cercaposible de este. Si es posible, evitaremos que entre la etiqueta y el primer párrafoexistan otras etiquetas, como imágenes.
Deberá ser legible. Este texto se verá en la página, igual que cualquier párrafo, poreso debe leerse bien.
Podríamos poner en la página del mecánico este texto después de la etiqueta<BODY> <H1 align=center> Todo Auto</H1>En Vallecas, situado en la carretera de Valencia a 3 km de Madrid, seencuentra nuestro taller de reparación de automóviles y recambios.Estaremos gustosos de atenderles y ofrecerles nuestros servicios de todotipo para su coche, como cambio de aceite, reparación de lunetas termicas, yotros.
De manera adicional, y sobretodo durante los primeros párrafos podemos utilizarotras técnicas, de más dudosa utilidad. Utilizar los encabezamientos (etiquetas <H1> y similares) para destacar los títulos de las
páginas siempre que se pueda.
Definir los atributos ALT de las imágenes con palabras claves
Estas técnicas han de usarse siempre con moderación, evitando cualquier uso