HTML 5 Introducción a HTML HTML
Anuncio
HTML 5 1 . INTRODUCCIÓN 2 . FORMATO BÁSICO 3 . ENLACES 4 . MULTIMEDIA 5 . ORGANIZACIÓN DE LA INFORMACIÓN Introducción a HTML _ El HTML (HyperText Markup Language), es el lenguaje que posibilita la creación y edición de documentos web. _ El código HTML puede teclearse en cualquier editor básico para posteriormente ser interpretado por el navegador que visualiza el resultado en pantalla. _ Nosotros utilizaremos el editor de paginas web: notepad++ que es gratuito, multiplataforma y de código abierto. _ Aunque también disponemos de editores HTML y CSS online como por ej: Cssizer.com _ Como comentaba, nosotros vamos a trabajar con Notepad ++. _ Cada vez que realicemos un documento en html debemos indicárselo al programa: Lenguaje / HTML. _ Una vez escrito el código debemos guardarlo con la extensión .htm o .html. _ Por último, para probar nuestros ejercicios o documentos escritos en HTML pinchamos en Ejecutar / Launch in IE. Estructura HTML _ El HTML es un lenguaje que basa su sintaxis en un elemento que llamamos etiqueta. _ La etiqueta presenta frecuentemente dos partes: Una apertura de forma general <etiqueta> Un cierre de tipo </ etiqueta> _ Un documento HTML tiene tres etiquetas que describen la estructura general de un documento: <html>, <head> y <body>. Nuestra primera página con HTML <!DOCTYPE html> <html> <head> <title>Proyecto AIRE</title> </head> <body> Bienvenido. Estas en la pagina del Proyecto AIRE. </body> </html> FORMATO BÁSICO Etiquetas para encabezados _ Existen etiquetas para definir párrafos especiales, formateados como títulos. Son los encabezados. _ Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan. La etiqueta en concreto es la <h1> para los encabezados mas grandes, <h2> para los de segundo nivel y así hasta <h6> que es el encabezado mas pequeño. Ejercicio práctico: encabezados <html> <head> <title>Todos los encabezados</title> </head> <body> <h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6> </body> </html> Etiquetas para párrafos _ Etiqueta <p>: para definir los párrafos (introduce un salto y deja una línea en blanco antes de continuar con el resto del documento). Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda, centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. <p align="left / center / right">Texto alineado</p> _ Etiqueta <br>: para realizar un simple retorno de carro (no dejamos una línea en blanco sino que solo cambiamos de línea). Etiquetas de texto _ Etiqueta b: muestra el texto en negrita. _ Etiqueta i: muestra el texto en cursiva. _ Etiqueta tt: muestra el texto con caracteres monoespaciados. _ Etiqueta big: aumenta el tamaño del texto seleccionado. _ Etiqueta small: reduce el tamaño del texto seleccionado. _ Etiqueta u: subraya el texto seleccionado. _ Etiqueta sup: convierte el texto seleccionado en superíndice, por ejemplo: E=mc2. _ Etiqueta sub: convierte el texto seleccionado en subíndice, por ejemplo:texto normal, texto en subíndice. _ Etiqueta strike: convierte el texto seleccionado en tachado, por ejemplo:Texto tachado. La etiqueta FONT _ El elemento <FONT> puede servirnos para cambiar la fuente del texto que escribimos, el tamaño, el color... Para cambiar el tipo de letra: <FONT face="Comic Sans MS"> Para cambiar el tamaño del texto: <FONT size="1"> y el tamaño será según el número que indiques. Para cambiar el color tienes que poner este código:<FONT color="*">; el asterisco lo pongo porque hay 2 formas de poner el color, _ Poner el nombre del color en inglés, blue, red... _ Poner el color hexadecimal correspondiente poniendo antes una almohadilla (#), por ejemplo #660033. Atributos para las páginas _ SE COLOCAN EN LA ETIQUETA BODY¡¡ _ bgcolor: especificamos un color de fondo para la pagina _ background: sirve para indicar la colocación de una imagen como fondo de la pagina. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la pagina. La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la pagina. <body background="fondo.jpg"> _ text: este atributo sirve para asignar el color del texto de la pagina. Por defecto es el negro. _ link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito) _ vlink: el color de los enlaces visitados. Por defecto su color es morado. _ alink: es el color de los enlaces activos. <body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" vlink="ffff00"> ENLACES _ Los enlaces son los elementos que nos permiten navegar por las páginas HTML. _ La sintaxis general de un enlace es: <a href="destino">contenido</a> es la parte de la página que se colocará activa y donde deberemos pulsar para acceder al enlace. Puede ser un texto o una imagen. Destino: será una página, un correo electrónico o un archivo. En función del destino los enlaces son agrupados del siguiente modo: Contenido: _ Enlaces internos. _ Enlaces locales. _ Enlaces remotos. _ Enlaces con direcciones de correo. _ Enlaces con archivos. ENLACES: enlaces internos _ Son los enlaces que apuntan a un lugar diferente dentro de la misma página. _ Para crear un enlace de este tipo es necesario, aparte del enlace de origen propiamente dicho, un segundo enlace que será colocado en el destino. _ Supongamos que queremos crear un enlace que apunte al final de la página. Lo primero será colocar nuestro enlace origen: < a href="#abajo">Ir abajo</a> _ Como podéis ver, el contenido del enlace es el texto "Ir abajo" y el destino, abajo, es un punto de la misma página que todavía no hemos definido. _ Ojo al símbolo #; es él quien especifica al navegador que el enlace apunta a una sección en particular. _ En segundo lugar, hay que generar un enlace en el destino. En este caso, la etiqueta que escribiremos será ésta: < a name="abajo"></a> ENLACES: enlaces locales _ Son los enlaces que permiten relacionar los distintos documentos HTML que componen nuestro sitio web. _ Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguiente forma: < a href="archivo.html">contenido</a> ENLACES: enlaces remotos, de correo o descarga _ Enlaces remotos: Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nuestro sitio web, es decir, cualquier otro documento que no forma parte de nuestro sitio. <a href="http://www.formate100por100">ir a mi plataforma de formación</a> _ Enlaces a direcciones de correo: son aquellos que al pincharlos nos abre un nuevo Para colocar un enlace dirigido hacia una dirección de correo colocamos mailto: en el atributo href del enlace, seguido de la dirección de correo a la que se debe dirigir el enlace. <a href="mailto:[email protected]">Contacto</a> _ Enlaces con archivos: enlace para descargar un archivo. < a href="mi_fichero.zip">Descarga mi_fichero.zip</a> _ Si quieres que la página que enlazas aparezca, por ejemplo, en una nueva ventana del navegador, tenemos que utilizar el atributo target: <a href="index.htm" target=“_blank">Indice</a> _ Hay ciertos valores reservados para TARGET, estos son: hace que la página se cargue en la ventana completa del navegador. TARGET=_self, hace que la página se cargue en la misma ventana. TARGET=_blank, hace que la página se cargue en una nueva TARGET=_top, ventana. MULTIMEDIA IMÁGENES _ La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato: <IMG SRC="URL de la Imagen" ALT="Texto alternativo"> _ Esta etiqueta no necesita la etiqueta de fin. El atributo SRC indica el fichero de imagen que se incluirá en el documento. Se indicará el camino hasta la imagen en formato URL. El atributo ALT, indicará un texto alternativo a mostrar si no fue posible mostrar la imagen. IMÁGENES: atributos más utilizados _ <IMG ... ALIGN=...> Alineación de la imagen: Indica cómo se alinea el texto que sigue a la imagen con respecto a ésta. Indicará si la primera frase del texto se colocará: en la parte alta de la imagen, TOP en el punto medio de la imagen,MIDDLE en la parte de abajo de la imagen, BOTTOM. _ <IMG .. BODER=...> Borde de la imagen: Indicará el tamaño del borde de la imagen. _ <IMG .. HEIGHT=... WIDTH=...> Tamaño de la imagen: Es posible cambiar el tamaño de la imagen de forma que pueda ajustarse como se desee, pudiendo ampliar o disminuir éste. El atributo HEIGHT determina el alto de la imagen a mostrar, se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamaño del documento. El atributoWIDTH indica el ancho al que se mostrará la imagen. No es necesario indicar el ancho y el alto, se puede especificar sólo uno de las dimensiones, ajustándose la otra a la proporción de la imagen. _ <IMG .. HSPACE=... VSPACE=...> Espaciado de separación de la imagen. El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante. Se especificará en puntos. Con el atributo VSPACE se indica el margen vertical. PRACTICAR CON IMÁGENES _ Resultara obvio para los lectores hacer ahora una pagina que contenga una imagen varias veces repetida pero con distintos atributos. Una de las veces que salga debe mostrarse con su tamaño originar y con un borde de 3 pixeles. En otra ocasión la imagen aparecerá sin borde, con su misma altura y con una anchura superior a la original También mostraremos la imagen sin borde, con su misma anchura y con una altura superior a la original Por ultimo, mostraremos la imagen con una altura y anchura mayores que las originales, pero proporcionalmente igual que antes. _ Vamos a utilizar esta imagen para hacer el ejercicio: _ Las dimensiones originales de la imagen son 28x21, así que este seria el código fuente: <img src="img1.gif" width="28" height="21" alt="Tamano original" border="3"> <img src="img1.gif" width="68" height="21" alt="Achatada" border="0"> <img src="img1.gif" width="28" height="51" alt="Alargada" border="0"> <img src="img1.gif" width="56" height="42" alt="Doble grande" border="0“> MAPAS DE IMÁGENES _ Puede hacer que parte de la imagen sea un enlace a otra página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. _ Las etiquetas usadas para esto son: <map>.....</map> identifican que vamos a crear un mapa de imágenes. _ Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa. define las áreas que vamos a poder activar en esa imagen. A esta etiqueta le acompañan los siguientes atributos: <area> Entre comillas estableceremos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular). _ Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del área a activar. _ Href= indica la dirección, entre comillas, de la página web a la que accede si pinchamos en un área determinada. _ shape= _ Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, debe incluir en la etiqueta de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa". Tipos de áreas: shape distintas Existen tres tipos de áreas distintas: _ shape="RECT“ Crea un área rectangular. El área tendría la siguiente etiqueta: <area shape="RECT" coords="X1,Y1,X2,Y2" href="#"> _ shape="CIRCLE“ Crea un área circular. La etiqueta de un área circular tendría esta forma: <area shape="CIRCLE" coords="X1,Y1,R" href="#"> _ shape="POLY“ Este tipo de área, poligonal. La etiqueta <area> quedaría de esta forma. <area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#"> PARA CONOCER LAS COORDENADAS DE UN PUNTO DE UNA IMAGEN, ABRIR LA IMAGEN CON EL PAINT¡¡ PRACTICAR CON MAPAS DE IMÁGENES _ Supongamos que queremos colocar esta imagen en nuestra web: < img src="mapa1.gif" width="380" height="72" alt="Mapa de imágenes. Pulsa en cada una de los círculos." border="0" usemap="#mapa1"> < map name="mapa1"> < area alt="Pulsa para ver la página de mis amigos“ shape="CIRCLE“ coords="44, 36, 29" href="#"> < area alt="Pulsa para ver mi novia" shape="CIRCLE“ coords="140, 36, 29“ href="#"> < area alt="Pulsa para conocer a mi Familia" shape="circle“ coords="239, 36, 29“ href="#"> < area alt="Pulsa para conocer mi trabajo" shape="CIRCLE“ coords="336, 36, 29“ href="#"> < /map> < br> Pulsa en los círculos para acceder a las secciones! VIDEO _ Insertarmos video en nuestra web mediante la etiqueta <video>. <video src="video.webm"></video> _ Los navegadores pueden darnos problemas según el formato del vídeo. Por lo que recurrimos a la siguiente solución: <video> <source src="video/video.mp4" type="video/mp4" /> <source src="video/video.ogg" type="video/ogg" /> <source src="video/video.webm" type="video/webm" /> </video> _ Como sucedía con las imágenes, en un vídeo podemos indicar su anchura y altura mediante los valores width y height: <video src="video.webm" width="300" height="208"></video> VIDEO: más parámetros Hay otros parámetros que resultan útiles para la reproducción del vídeo: _ controls: si queremos que se muestren los controles que permiten pararlo, reproducirlo, etc. _ autoplay: al indicar este valor, el vídeo se reproducirá en cuanto esté listo. _ preload: hace que el vídeo se empiece a cargar en cuanto se accede a la página. Por el contrario, indicando preload="none", no se cargará hasta que el usuario haga clic en el vídeo para su reproducción. Esta segunda opción es muy útil, si el vídeo no es el recurso fundamental de la página y vamos a tener personas que no estén interesadas en verlo, ya que nos ahorrará mucho ancho de banda. _ loop: indicándolo conseguiremos que el vídeo se reproduzca cíclicamente. Si no indicamos nada, al terminar su reproducción se detendrá. _ muted: el vídeo no tendrá sonido al comenzar. <video src="video.webm" width="300" height="208” loop="loop" controls="controls" autoplay="autoplay”></video> VIDEO EXTERNOS Siga estos pasos para incrustar un vídeo de Youtube en una página web. 1. Acceda a Youtube y seleccione un vídeo. 2. Haga clic en el botón Compartir. 3. Haga clic en el botón Insertar que aparece más abajo. Copie el pequeño código HTML que se despliega. Será similar a esto que se recoge en la figura: <iframe width="420" height="315" src="http://www.youtube.com/embed/aDyAdqaLSJ4" frameborder="0" allowfullscreen></iframe> 4. Un poco más abajo podemos personalizar las dimensiones de la ventana y otros parámetros. Tras realizar los cambios, copie el código HTML. AUDIO _ El mismo procedimiento que empleamos para el vídeo se repetiría aquí. <audio src=“AUDIO.mp3" loop="loop" controls="controls" autoplay="autoplay" > ORGANIZACIÓN DE LA INFORMACIÓN 1 . LISTAS 2 . TABLAS 3 . FORMULARIOS LISTAS: Listas no ordenadas _ Son listas en las que la información se muestra de forma no secuenciada. Para construirlas emplearemos: Elemento _ Sus ul: Es el que define y delimita la lista. etiquetas son: <ul> y </ul> (ambas obligatorias) Elemento li: Es el que define y delimita cada uno de los puntos de la lista. _ Sus etiquetas son: <li> y </li> Sus principales atributos de transición son: type – estilo de viñeta: 'disc‘ / 'circle‘ / 'square' LISTAS: Listas ordenadas _ Son listas en las que la información se muestra secuenciada numérica o alfabéticamente. Para construirlas emplearemos: Elemento _ Sus ol: Es el que define y delimita la lista. etiquetas son: <ol> y </ol> (ambas obligatorias) Elemento li.: Es el que define y delimita cada uno de los puntos de la lista. _ Sus etiquetas son: <li> y </li> Sus principales atributos de transición son: type – estilo de numeración • 1 Para ordenar por números • a Por letras del alfabeto • A Por letras mayúsculas del alfabeto • i Ordenación por números romanos en minúsculas • I Ordenación por números romanos en mayúsculas TABLAS _ Las tablas son definidas por las etiquetas <table> y </table>. Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imágenes que darán forma y contenido a la tabla. _ Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: <tr> y </tr> _ Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será donde coloquemos nuestro contenido. TABLAS _ Atributos para modificar la tabla (se colocan dentro de la etiqueta table): Background: Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen. Bgcolor: Da color de fondo a la tabla. Border: Define el número de pixels del borde principal. Bordercolor: Define el color del borde. Height: Define la altura de la tabla en pixels o porcentaje. Width: Define la anchura de la tabla en pixels o porcentaje. TABLAS _ Atributos que nos permiten modificar una celda en concreto o toda una línea (se pueden colocar en la etiqueta tr o td): --alineación horizontal: left / center / right Valign --alineación vertical: top / middle / bottom Bgcolor – color de la celda o línea elegida. Bordercolor - color del borde. _ Atributos que pueden ser únicamente asignados a una celda y no al Align conjunto de celdas de una línea son (se colocan en la etiqueta td): número de columnas ocupados por la celda. El valor que pueden tomar estas etiquetas es numérico. El numero representa la cantidad de celdas fusionadas. Rowspan-- número de filas ocupados por la celda. Height - altura de la celda en píxels o porcentaje. Width - anchura de la celda en píxels o porcentaje. Colspan-- FORMULARIOS _ Los formularios son definidos por medio de las etiquetas <form> y </form>. Entre estas dos etiquetas colocaremos todos los campos y botones que componen el formulario. _ Dentro de esta etiqueta <form> debemos especificar algunos atributos: El atributo ACTION nos indica la dirección de correo a la cual se van a enviar los datos del formulario. El atributo METHOD se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar esta atributo son post y get. A efectos prácticos daremos siempre el valor post. El atributo ENCTYPE indica la forma en la que viajará la información que se mande por el formulario. En el caso más corriente, enviar el formulario por correo electrónico, el valor de este atributo debe de ser "text/plain". Así conseguimos que se envíe el contenido del formulario como texto plano dentro del email. Si queremos que el formulario se procese automáticamente por un programa, no utilizaremos este atributo <form action="mailto:[email protected]" method="post" enctype="text/plain"> FORMULARIOS: elementos básicos _ Entrada de texto de una línea <INPUT TYPE="text" SIZE="25" NAME="Nombre“ VALUE = “Pon aquí tu nombre”> _ Hay determinados casos en los que podemos desear esconder el texto escrito en el campo INPUT, por medio asteriscos, de manera que aporte una cierta confidencialidad. Este tipo de campos son análogos a los de texto, con una sola diferencia: remplazamos el atributo type="text" por type="password": < input type="password" name="nombre"> FORMULARIOS: elementos básicos _ Entrada de texto de varias líneas <TEXTAREA NAME="comentario" ROWS=3 COLS=50> Introduzca aquí sus comentarios </TEXTAREA> _ Lista de opciones o menú desplegable <SELECT NAME="estudios"> < OPTION SELECTED> ESO < OPTION> Bachillerato < OPTION> Ciclos Formativos < OPTION> Garantía Social < /SELECT> FORMULARIOS: elementos básicos _ Una variante de las listas de opciones son los menús con barras de desplazamiento <SELECT NAME="americanos" SIZE=6> < OPTION>España < OPTION>México < OPTION>Argentina < OPTION>Costa Rica < OPTION>Panamá < OPTION>Belice < OPTION>Honduras < OPTION>Bolivia < OPTION>Chile < OPTION>Paraguay </SELECT> _ Atributo size : Indica el número de valores mostrados a la vez en la lista. _ Atributo MULTIPLE: nos está permitido efectuar selecciones múltiples. <SELECT NAME="menu" SIZE=6 MULTIPLE> FORMULARIOS: elementos básicos _ Casillas de verificación. < INPUT TYPE="checkbox" NAME="nivel" VALUE="eso"> ESO < INPUT TYPE="checkbox" NAME="nivel" VALUE="bachiller"> Bachillerato < INPUT TYPE="checkbox" NAME="nivel" VALUE="primaria"> Primaria Nos permite elegir entre varias posibilidades una o más casillas. _ Botones de radio o de opción < INPUT TYPE="radio" NAME="sexo" VALUE="hombre" CHECKED> Hombre < INPUT TYPE="radio" NAME="sexo" VALUE="mujer" > Mujer Similar al anterior, con la diferencia de que solo nos permite seleccionar una de las opciones mostradas _ Cabe señalar que es posible preseleccionar por defecto una de las opciones. Esto puede ser conseguido por medio del atributo checked. FORMULARIOS: elementos básicos _ Botones envío y borrado. Se utilizan las siguientes etiquetas para hacer los botones de Enviar y Borrar < INPUT TYPE="submit" VALUE="Enviar"> < INPUT TYPE="reset" VALUE="Borrar">
