Introducción al lenguaje HTML
Objetivo: que el alumno/a elabore una pagina web para publicitar una empresa de su comunidadad, aplicando criterios técnicos.
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces(hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa navegador especializado (como Mosaic, o Netscape).
<title>MI PRIMERA PAGINA></title>
<body>Aqui anotamos el desarrollo de nuestro tema. Incluyendo imagenes, sonido, video etc.</body>
</html>
La etiqueta <body></body> indica el inicio y final de nuestra página Web. Será entre el inicio y el final de esta etiqueta donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc.... Esta etiqueta tiene una serie de parámetros opcionales que nos permiten indicar la "apariencia" global del documento:
background="nombre de fichero gráfico" Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si la imagen no rellena todo el fondo del documento, esta será reproducida tantas veces como sea necesario.
bgcolor="código de color" Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro background.
text="código de color"
Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro.
link="código de color"
Indica el color de los textos que dan acceso a un Hiperenlace. Por defecto es azul.
Indica el color de los textos que dan acceso a un Hiperenlace que ya hemos visitado con nuestro navegador. Por defecto es purpura.
El código de color es un numero compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores "primarios", rojo, verde y azul. El codigo de color se antecede del símbolo #.
Ejemplos:
#000000 - Negro
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
#FFFFFF - Blanco
El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la proporción de color Verde y las dos últimas la proporción de color Azul. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos diferentes colores.
Hasta el momento hemos visto como se puede escribir texto en una página Web, así como sus posibles formatos.
Para incluir una imagen en nuestra página Web utilizaremos la etiqueta <img>.
Hay tres formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes GIF , JPG y PNG .
Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el navegador, a no ser que disponga de un programa externo que permita su visualización.
La etiqueta <img> tiene varios parámetros:
src="imagen" Indica el nombre del fichero gráfico a mostrar.
alt="Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen.
lowsrc="imagen" Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la página. Este parametro no es reconocido por la totalidad de los navegadores ya que esta en estudio su aplicacion, asi que en la mayoria de los casos sera ignorado mostrandose solo la primera imagen ( src ). En Netscape muestra la imagen indicada porlowsrc en primer lugar, y posteriormente muestra la imagen indicada por src . Si las imagenes son iguales pero tienen distinta "resolucion" se conseguirá un efecto tipo "Fade". Si las imagenes son de distinto tamaño la imagen indicada en src se redimensionara al tamaño indicado por la imagen indicada en lowsrc
align="top / middle / bottom" Indica como se alineará el texto que siga a la imagen. top alinea el texto con la parte superior de la imagen, middle con la parte central, y bottom con la parte inferior.
border="tamaño" Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace.
height="tamaño" Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
width="tamaño" Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
hspace="margen" Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.
vspace="margen" Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.
ismap / usemap Indica que la imagen es un MAPA. Veremos estos parametros más adelante en este manual.
Nuestra página Web puede tener un sonido que se active al entrar en la página.
Esta característica de Ms Explorer utiliza la etiqueta <bgsound> y tiene los siguientes parámetros :
src="fichero" Indica el nombre del fichero que contiene el sonido (.waw, .mid,. mp3, .mp4).
loop="num / infinite" Indica el número de veces que se reproducirá el sonido. Si se indica infinite, el sonido se reproducirá de forma contínua hasta que abandonemos la página.
Un ejemplo de esta etiqueta sería :
Para utilizar esta funcion en Netscape se utiliza la etiqueta <embed> . Esta etiqueta se utiliza realmente para "incrustar" un objeto en nuestra pagina Web. Dicho objeto puede ser un fichero de sonido, un video, un grafico BMP, etc... Tiene los siguientes parámetros :
src="fichero" Indica el nombre del fichero que contiene el sonido (.waw, .mid) o el video (.avi).
autostart="true" Incluirlo si deseamos que la reproduccion se inicie inmediatamente.
loop="true" Incluirlo si deseamos que la reproduccion no se detenga. (al terminar, vuelve a comenzar automaticamente).
volume="numero" Volumen al que se reproducen los ficheros de sonido.
height="numero" Anchura y Altura de la representacion del objeto. (Si es un sonido no es necesario este parámetro).
controls="smallconsole" Visualiza una serie de controles que nos permiten iniciar la reproduccion del fichero, asi como realizar una pausa o detenerlo.
Un ejemplo de esta etiqueta sería :
<embed src="yesterday.mid" loop="true" autostart="true" volume="50" width="50"height="15" controls="smallconsole">
- Etiqueta para marquesina.
Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc...) en diferentes filas y columnas separadas entre si. Es una herramienta muy útil para "ordenar" contenidos de distintas partes de nuestra página.
La tabla se define mediante la etiqueta <table></table>. Los parámetros opcionales de esta etiqueta son :
border="num". Indica el ancho del borde de la tabla en puntos.
cellspacing="num" Indica el espacio en puntos que separa las celdas que estan dentro de la tabla.
cellpadding="num" Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.
width="num" ó % Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.
height="num" ó % Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del navegador. Si no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.
bgcolor="codigo de color" Especifica el color de fondo de toda la Tabla.
Para definir las celdas que componen la tabla se utilizan las etiquetas <td> y <th> . <td>indica una celda normal, y <th> indica una celda de "cabecera", es decir, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de ambas etiquetas son:
align="left / center / right / justify" Indica como se debe alinear el contenido de la celda, a la izquierda (left), a la derecha (right), centrado (center) o justificado (justify).
valign="top / middle / bottom" Indica la alineación vertical del contenido de la celda, en la parte superior (top), en la inferior (bottom), o en el centro (middle).
rowspan="num" Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
colspan="num" Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
width="num" ó % Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del navegador. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este parámetro solo funciona en los navegadores modernos.
bgcolor="codigo de color" Especifica el color de fondo del elemento de la Tabla. Para indicar que acaba una fila de celdas se utiliza la etiqueta <tr> . A continuación mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente el contenido de las celtas puede ser cualquier elemento de HTML, un texto, una imagen, un Hiperenlace, una Lista, etc...
Ejemplo
|
<table border="4" cellspacing="4" cellpadding="4" width="80%">
<tr>
<th align="center"> Buscadores</th>
<th align="center" colspan="2"> Otros Links</th>
</tr>
<tr>
<td align="left">Yahoo</td>
<td align="left">Microsoft</td>
<td align="left">IBM</td>
</tr>
<tr>
<td align="left">Infoseek</td>
<td align="left">Apple</td>
<td align="left">Digital</td>
</tr>
|
Buscadores
|
Otros Links
|
|---|
Yahoo
|
Microsoft
|
IBM
|
Infoseek
|
Apple
|
Digital
|
Las etiquetas <td> y <th> son cerradas según el estandar de HTML, es decir que un elemento de tabla <td> deberia cerrarse con un </td> , sin embargo los navegadores asumen que un elemento de la tabla, queda automaticamente "cerrado" cuando se "abre" el siguiente.
La característica principal de una página Web es que podemos incluir Hiperenlaces. Un Hiperenlace es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc...
Para incluir un Hyperenlace se utiliza la etiqueta <a></a> . El texto o imagen que se encuentre dentro de los límites de esta etiqueta será sensible, esto quiere decir que si pulsamos con el raton sobre él, se realzará la funcion de hiperenlace indicada por la etiqueta <a></a> .
Si el Hiperenlace está indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta etiqueta tiene el parámetro href que indica el lugar a donde nos llevará el Hiperenlace si lo pulsamos.
Ejemplo
|
|
<a href="http://www.microsoft.com/" > Pulse para ir a la página de Microsoft </a>
|
|
Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la página Web indicada por el parámetro
href , es decir, accederá a la página situada en
http://www.microsoft.com/
Lo mismo podríamos hacer con un gráfico.
Ejemplo
|
Se vería como
|
Para buscar en Internet :
<a href="http://www.yahoo.com/" >
<img src="yahoo.gif" ></a>
|
Para buscar en Internet :  |
Pulsando sobre la imagen se accedería a la pagina situada en http://www.yahoo.com/.
Un Hiperenlace también puede llevarnos a una zona de nuestra página. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Lo haremos con el parametro name .
Esta instrucción marca el inicio de una sección dentro de nuestra página. La seccion se llamará seccion1 . Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma :
<a href="#seccion1">Primera Parte</a>
|
<a href="http://www.mipagina.dom/mipagina.htm#seccion1">Primera Parte </a>
|
Un Hiperenlace puede hacerse a cualquier tipo de fichero. Con las etiquetas anteriores hemos visto como hacer enlaces a páginas Web o secciones dentro de una página web, pero podríamos hacer un Hiperenlace a un grupo de noticias, o a otro servicio de Internet.
|
<a href="news://news.actualidad.es/">Noticias de actualidad </a>
|
Asimismo podemos hacer que el Hiperenlace de como resultado el envío de un correo electrónico a una dirección de correo determinada.
|
<a href="mailto:usuario@email.dom"> Envíame tus sugerencias </a>
|
También podemos realizar un Hiperenlace a un fichero cualquiera. En este caso el navegador intentará "ejecutar" el fichero, y si no puede hacerlo nos preguntará si deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los visitantes de nuestra página copiar ficheros a su ordenador.
<a href="manual.zip">Pulsa aqui para llevarte una copia del manual. </a>
Las frames es una técnica para subdividir la pantalla del navegador en diferentes ventanas.
Cada una de estas ventanas se podrá manipular por separado, permitiéndonos mostrar en cada una de ellas una página Web diferente.
Esto es muy util para, por ejemplo, mostrar permanentemente en una ventana los diferentes contenidos de nuestra página, y en otra ventana mostrar el contenido seleccionado.
Para definir las diferentes subventanas o frames se utilizan las etiquetas <frameset> </frameset> y <frame> .
La etiqueta <frameset> indica como se va a dividir la ventana principal. Pueden incluirse varias etiquetas <frameset> anidadas con el objeto de subdividir una subdivisión. Los parámetros de <frameset> son rows y cols en función de si la división de la pantalla se realiza por filas (rows) o columnas (cols).
Los parámetros rows y cols se acompañan de un grupo de números que indican en puntos o en porcentaje el tamaño de cada una de las subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc... En el caso de cols los tamaños se aplican de izquierda a derecha.
<framseset rows="25%,50%,25%">
|
Crea tres subventanas horizontales, la primera ocupará un 20% de la ventana principal, la segunda un 50% y la tercera un 25%.
|
<frameset cols="120,*,100">
|
Crea tres subventanas verticales, la primera y la tercera tendrán un "ancho" fijo de 120 y 100 puntos respectivamente. La segunda ocupará el resto de la ventana principal (*).
|
<frameset cols="15%,*"><frameset rows="20%,*">
|
En este caso "anidamos" dos directivas. La primera divide la ventana principal en dos subventanas verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda directiva vuelve a subdividir la primera subventana creada anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupará un 20% de la subventana, y la inferior el resto.
|
La etiqueta <frame> indica las propiedades de cada subventana. Es necesario indicar una etiqueta <frame> para cada subventana creada. Los parámetros de <frame> son :
name="nombre" Indica el nombre por el que nos referiremos a esa subventana.
src="URL" La ventana mostrará en principio el contenido del documento HTML que se indique.
marginwidth="num". Indica el margen izquierdo y derecho de la subventana en puntos.
marginheight="num" Indica el margen superior e inferior de la subventana en puntos.
scrolling = "yes / no / auto" Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la página que se cargue en ella no quepa en los límites de la subventana. El valor " yes " muestra siempre la barra de desplazamiento, " no " no la muestra nunca (la zona de la página que no quepa en la subventana no la veremos), y " auto " la muestra solo en caso de que sea necesario para poder ver la página.
noresize Si se indica este parámetro, el usuario no podrá "redimensionar" las subventanas con el navegador. Un usuario que este viendo una pagina con frames puede redimensionarlas seleccionando un borde de la subventana con el cursor y desplazándolo.
border="num". Indica el "borde" que separara esta frame de la siguiente. Si se indica cero (0) no se mostrara borde entre las frames, consiguiendo un efecto muy elegante, siempre y cuando el "fondo" de todas las frames sea el mismo, o sean colores solidos.
Los navegadores que no soportan la característica de subventanas, no mostrarán nada de lo indicado con estas etiquetas. Es por ello que existe una etiqueta llamada <noframes> </norames> . Todo los indicado entre esta etiqueta será lo que muestren los navegadores sin capacidad para visualizar Frames. Los navegadores que soporten Frames obviaran las etiquetas incluidas entre <noframes> </noframes> .
Si su navegador puede visualizar Frames tendrá en estos momentos la pantalla dividida en dos zonas independientes, en la izquierda verá el índice de materias de este manual, y en la derecha estará viendo la sección del manual que haya selecionado. En otro caso simplemente verá la sección del manual.
La definición de las Frames debe ir antes de la definición del cuerpo de documento (<body> ).
Veamos un ejemplo completo de Frames con comentarios :
<html>
<head>
<title> Pagina con Frames </title>
</head>
<frameset cols="15%,*" >
<!-- Creo dos subventanas verticales, la de la izquierad ocupa un 15% de la pantalla, la de la derecha el resto. -->
<frameset rows = "35%,*" >
<!-- Creo dos subventanas horizontales dentro de la subventana izquierda. -->
<frame name="upd" src="update.htm" scrolling="auto" > <!-- Llamo a la subventana horizontal superior izquierda con el nombre "upd" y muestro el documento update.htm -->
<frame name="menu" src="menu1.htm" scrolling="auto" > <!-- Llamo a la subventana horizontal inferior izquierda con el nombre "menu" y muestro el documento menu1.htm -->
</frameset> <!-- Cierro la definicion de las subventanas horizontales de la ventana de la izquierda -->
<frame name = "home" src = "home.htm" scrolling = "auto" > <!-- Llamo a la subventana vertical derecha con el nombre "home" y muestro el documento home.htm -->
<noframes>
<!-- Indico las órdenes para aquellos navegadores que no soporten Frames -->
<body>
SU navegador NO MUESTRA FRAMES. Pulse <a href="home.htm"> AQUI </a> para ir a la página sin Frames. </body>
</noframes>
</frameset>
<!-- Cierro la definición de las subventanas verticales -->
|
Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una página Web debemos indicarle al navegador en que subventana queremos que se muestre. Por defecto se mostrará en la ventana donde se encuentre el enlace. Para poder escoger la subventana de destino del Hiperenlace se añade un nuevo parámetro a la etiqueta <a href="enlace.html"> </a> . Este parámetro se llama target y puede tener los siguientes valores :
target ="nombre_ventana" Muestra el Hiperenlace en la ventana cuyo nombre se indica.
target="_blank" Abre una nueva copia del navegador y muestra el Hiperenlace en ella. (Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa).
target="_self" Se muestra el Hiperenlace en la subventana activa.
target="_parent" El Hyperenlace se muestra en el <frameset> definido anteriormente al actual. Si no hay ningún <frameset> anterior se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla.
target="_top" Suprime todas las subventanas de la pantalla y muestra el Hiperenlace a pantalla completa.
<a href= "http://www.microsoft.com/"target="_blank">
|
Muestra la pagina de Microsoft en una nueva copia del visor
|
<a href="http://www.ibm.com/" target="home">
|
Muestra la pagina de Ibm en la subventanna llamada "home"
|
<a href="http://www.yahoo.com/" target="_top">
|
Muestra la pagina del buscador Yahoo a pantalla completa
|
CADA VEZ QUE SE NECESITE UNA ETIQUETA NUEVA, PARA MEJORAR LA APARIENCIA DE TU WEB, HAZ LA PREGUNTA EN UN BUSCADOR. POR EJEMPLO
Tarea:
- Presentar un listado de 10 etiquetas diferentes de lenguaje HTML.
- Pagina web de la empresa seleccionada.
Criterios de evaluacion:
- Páginas ligeras que descarguen rápidamente.
- El formato y estilo de los diferentes elementos están centralizados en un solo archivo, de tal forma que el navegador solamente lo tiene que leer una vez.
- Elementos técnicos que facilitan la indexación en buscadores de Internet:
- Inclusión de Metatags “Description” y “Keywords”.
- Información bien redactada sin intentos de engañar a los buscadores de Internet.
- Uso de etiquetas H1 a H6 para títulos.
- Imágenes optimizadas para que pesen menos.
- No utilizar marcos (frames). Esto evita algunos posibles errores de visualización en el navegador y facilita la impresión.
- No utilizar Flash cuando no agregue valor. Los buscadores de Internet y algunos smartphones y tabletas no pueden leer el texto en Flash.
- En la mayoría de los casos es recomendable utilizar un ancho fijo (no expandible a todo lo ancho de la pantalla) porque facilita la lectura.
- Utilización de tipos de letra fácilmente legibles y una herramienta para permitir crecer el texto. Existe una estimación de que el 75% de los adultos utiliza algún tipo de anteojos para corregir la visión.
- Todas las páginas contarán con un URL absoluto. Esto es, cada página tendrá una dirección distinta y única en la barra de direcciones de tu navegador (puede parecer obvio, pero hay sitios web que no funcionan así). Haciéndolo correctamente, es posible para el visitante añadir tu página a favoritos o enviar una liga a un producto determinado por e-mail.
- De manera opcional se puede utilizar la migaja (breadcrumb) en todas las páginas. Ejemplo: “Usted está en: Inicio –> Servicios –> Consultoría”.
- Apegarse a estándares de desarrollo para garantizar que el sitio web pueda ser visualizado en todos los navegadores, como Internet Explorer, Firefox, Safari, Chrome y Opera tanto en computadoras Windows como Mac.
- Establecer contacto con el visitante mediante formularios y una herramienta de chat en línea.
- Para romper la monotonía de grandes cantidades de texto, utilizar fotografías propias o de stock.
- Utilización de Google Analytics o alguna otra herramienta para medir los ingresos al sitio web.
- El copy del sitio web, es decir, la información que contiene, debe tener estas características:
- Textos bien redactados, que contengan información relevante a lo que queremos destacar.
- No tratar de engañar a los buscadores de Internet mediante repeticiones exageradas de palabras, utilización del mismo color de texto y fondo, o alguna otra táctica indeseable.
- No utilizar un lenguaje muy técnico ya que nuestros posibles clientes no son necesariamente expertos en el tema.
- Mantener los textos breves y concisos.
- Incluir alguna sección (o blog) en la que se publiquen artículos generados por tu empresa sobre el tema que domina. Esto ayuda a que tu página sea más relevante para los buscadores, además de que te conviertes en una fuente de información confiable para tus clientes y posibles clientes.
http://www.desarrolloweb.com/manuales/21/
http://www-app.etsit.upm.es/~alvaro/manual/manual.html
http://manual-html.com/manualhtml/imagenes.html
