tema 2 - lenguajes html

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



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




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

….




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.




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




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>

….




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



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>





2.1 Estructura Básica de unaPágina. Ejemplo




2.2 Etiquetas Básicas

<HTML>

<HEAD>

<TITLE> <BODY>

<H1>

<HR>



2.2.1 <HTML>

Indica que se trata de

un documento HTML

Es preciso usar la

etiqueta:

Inicio <HTML>

Fin </HTML>




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>




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.




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.





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




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>




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




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>




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




3.2 Insertar Párrafos II




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




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>




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)




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”>




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



4. Imágenes. <IMG…>. Align

Tema 2. Lenguaje HTML 26Lenguaje de Marcas - HLC - 2º SMR 15/16




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.




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.




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">

http://www.ieslosremedios.org/

http://www.ieslosremedios.org/



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





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. 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.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




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.




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>




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>




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




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




8.4 Otros caracteresespeciales




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




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




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




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)




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.

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:




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”




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




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




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">




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




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.




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º”>




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




13.2.1 ALIGN=„top‟

Alinea la parte superior

de la imagen con la

parte superior de la

línea




13.2.2 Align=“middle”

Alinea el centro vertical

de la imagen con la

primera línea del texto




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




13.2.4 Align=“left”

La imagen se alinea a

la izquierda y puede

estar rodeada de texto

por arriba, derecha yparte inferior




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.




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>




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>




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”




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




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)




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.




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>




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




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




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




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.




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




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">




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>




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




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




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>




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>




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>




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>




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">




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.




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




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.




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">



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>




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

tema 2 - lenguajes html

Documents