Tutorial de HTML 15-7-2012 CHALOO TUTORIAL DE HTML HTML BASICO | Carlos Tutorial de HTML ” Año de la Integración Nacional y el Reconocimiento de Nuestra Diversidad” Trabajo de investigación: TUTORIAL DE HTML Autor: CHATA YAURI, CARLOS 1 Tutorial de HTML Introducción al HTML ¿Qué significa HTML? y un primer ejemplo de este manual. 2 ¿Qué son los archivos HTML? HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto". Los archivos HTML deben tener una extensión htm o html. Para crear un archivo HTML solo hace falta un editor de texto. Un archivo HTML está compuesto por etiquetas. Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Mozilla, etc.) como mostrar la página. ¡Vamos a hacer una pequeña prueba! Si estás usando Windows, abre el "Block de Notas". Si usas Mac, abre "Simpletext". Escribe en el mismo, el siguiente texto: Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML). Abre el navegador Internet (Internet Explorer, Firefox, Opera, etc.). Selecciona "File" y luego "Open". Se abrirá una ventana, selecciona "Browse" y ubica el archivo que acabas de guardar -"pagina1.html"- elígelo y presiona "Open". Ahora tú ves la dirección, por ejemplo "C:\My Documents\pagina1.html". Presiona "OK" y el navegador mostrará la página. Tutorial de HTML Expliquemos el ejemplo 3 La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página. Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página (<title>Mi primera página Web</title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento. Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.". Nota: observa que todas las etiquetas de cierre se diferencian de las de apertura por llevar "/" antes del nombre. Tutorial de HTML Elementos y etiquetas de HTML Las etiquetas HTML son las encargadas de dar forma a nuestro sitio. 4 ¿Qué son los elementos y las etiquetas de HTML? Los elementos son declaraciones para visualizar o dar forma a una página Web. Las etiquetas (en inglés: tags) son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido. Reglas básicas Las etiquetas están encerradas entre los signos "<" y ">". Generalmente vienen en pares <p> y <⁄p>. La primera es de apertura y la segunda de cierre. El texto que se encuentra entre dos etiquetas es el contenido del elemento. Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>. Etiquetas de HTML Veamos un ejemplo. Esta es una etiqueta HTML: Tutorial de HTML El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en negrita). El contenido de dicho elemento es: Este texto es en negrita. El fin del elemento HTML es con la etiqueta de cierre </b>. Otro elemento HTML en el ejemplo es: EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del documento). El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita</b>. El fin del elemento HTML es con la etiqueta de cierre </body>. ¿Qué son los atributos de las etiquetas? Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML. Los atributos siempre van con la estructura: nombre="valor". Los atributos siempre van en la etiqueta de apertura. Los valores siempre hay que ponerlos entre comillas. Un ejemplo de los atributos sería: Un consejo con respecto al uso de minúsculas. Si bien HTML acepta tanto etiquetas en mayúscula <B> como en minúscula <b>, el World Wide Web Consortium (W3C) recomienda el uso de minúsculas. Además XHTML (la siguiente versión de HTML) acepta solo minúsculas. Es por eso que recomendamos acostumbrarse a usar minúsculas cuando escribas sus códigos HTML. 5 Tutorial de HTML Etiquetas básicas de HTML Las etiquetas más simples y de uso más común en HTML. Headings Nos definen el tamaño de un título o cabecera. <h1> nos da el tipo de letra más grande. <h6> nos da el tipo de letra más pequeño. HTML agrega automáticamente un espacio antes y después de cada título. <h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google tiene en cuenta, a la hora de indexar su sitio. Párrafos Los párrafos se definen con la etiqueta <p>. 6 Tutorial de HTML 7 Comentarios La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo. * Nota que el signo de exclamación se coloca solo al principio del código. Salto de línea El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos terminar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos. Trazar una línea La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial. La etiqueta <hr> no tiene cierre. Tutorial de HTML Tabla con las etiquetas básicas 8 Tutorial de HTML Formato de texto con HTML Elige como decorar y visualizar los textos de tu sitio. 9 Formato básico del texto HTML nos permite definir el formato de visualización del texto en la pantalla. Muy útil para cuando queramos resaltar o enfatizar una un texto en especial. También muy usado para subrayar o escribir subíndices o superíndices. Estos son solo algunos ejemplos de lo que podemos hacer con estos elementos Para ello utilizamos las siguientes etiquetas: Tutorial de HTML Etiquetas para dar forma al texto 10 Etiquetas de "Texto estructurado" Estas etiquetas son usadas comúnmente para mostrar códigos de programación. Etiquetas de citaciones y definiciones Tutorial de HTML Caracteres Especiales en HTML Uso de acentos, signos de apertura de interrogación y exclamación, eñes, espacio en blanco, etc. Caracteres especiales Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado especial en HTML (por ej. "<" - menor que).Para poder mostrarlos debemos usar su nombre en código. Los nombres de las entidades están compuestos por el signo(&), luego el nombre de la entidad y al final (";" - punto y coma). Los números de estos caracteres están compuestos por (&), luego (# - numeral), el número de la entidad y al final (";" - punto y coma). Por ejemplo para mostrar el signo "<" debemos escribir &lt; o &#60;. El uso más común de los caracteres especiales es el espacio en blanco. Si en un texto figuran 5 espacios en blanco seguidos, HTML automáticamente borra 4. Para ingresar espacios en blanco usamos "&nbsp;" y HTML los dejará en su lugar. Otro uso muy frecuente es el de insertar acentos en el código html por medio de los números de las entidades 11 Tutorial de HTML Caracteres especiales de uso frecuente 12 Tutorial de HTML Enlaces en HTML La propiedad más importante de Internet, es la posibilidad de conectarse los unos con los otros. 13 ¿Qué son los Enlaces o Links? Los enlaces o links (en Inglés) nos permiten conectarnos con otros documentos: una imagen un video un archivo de sonido sitios en la web(otra página web) mandar un email Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra anchor (ancla). La etiqueta <a> tiene como cierre </a>. Veamos un ejemplo Vamos a crear un enlace hacia la home de Virtualnauta.com La etiqueta <a> nos señala que es un enlace. El atributo href="http://www.virtualnauta.com/" indica la dirección donde nos conectaremos. El texto La home de Virtualnauta es el que aparecerá en pantalla. La etiqueta </a> es la etiqueta de cierre. Tutorial de HTML EL atributo target Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace. El ejemplo de abajo abrirá el documento en una nueva página del navegador. 14 EL atributo name Este atributo se usa para definir una determinada ubicación dentro de la página. Supongamos que definimos un destino de vínculo llamado "destino-uno" en el archivo "uno.html". Esto crea un destino de vínculo alrededor del texto: Capítulo 1. Una vez definido el destino, podemos crear un enlace a él desde el mismo documento o desde otro diferente, utilizando un carácter "#" seguido del nombre del elemento. Por ejemplo: O en caso que el enlace está definido en el mismo documento: Creando un enlace a un email Se utiliza en caso que queramos que un enlace mande un email. En el momento que presionamos dicho link se abrirá automáticamente el programa de email que tenemos definido por defecto. Tutorial de HTML mailto: nos indica la dirección email a la que va dirigida, en este ejemplo: [email protected]. Un enlace a partir de una imagen Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto. Etiquetas y atributos de los enlaces 15 Tutorial de HTML 16 Tutorial de HTML 17 Atributos estándar Si desea una descripción completa, diríjase a: atributos estándard. Eventos intrínsecos Tutorial de HTML Frames en HTML Dividimos la página en partes más pequeñas y en cada una de ellas visualizamos documentos diferentes. 18 ¿Qué son los frames? Los frames (marcos en español) permiten a los autores presentar documentos con vistas múltiples. Esto posibilita mantener cierta información visible mientras otras vistas se desplazan o se sustituyen. Cada vista es un documento independiente de los otros. La etiqueta framese La etiqueta <frameset> se usa para dividir la ventana del navegador en diferentes marcos que pueden ser de diferentes medidas. Cada frameset define un grupo de filas y columnas. La etiqueta frame La etiqueta <frame> define qué documento colocaremos en cada marco. En el ejemplo dividimos la pantalla en una columna de 25% y otra de 75%. La primera columna contiene el documento "frame1.html" y la segunda columna el documento "frame2.html". La etiqueta <frame> no debe llevar etiqueta de cierre. Tutorial de HTML La etiqueta noframes La etiqueta <noframes> muestra un texto para los navegadores que no soportan frames. <noframes> se coloca dentro de la etiqueta frameset si el navegador soporta frames, el texto del <noframes> no se mostrará si usamos la etiqueta <noframes> el texto debe ir entre las etiquetas <body> </body> La etiqueta iframe La etiqueta <iframe> se usa para crear un frame en línea que contiene otro documento. Es decir, que puedo mostrar una ventana que contenga otra página Web dentro de la página que estamos diseñando En este ejemplo podemos observar que la ventana del resultado nos está mostrando la página principal de Virtualnauta.com. 19 Tutorial de HTML Etiquetas y atributos de los marcos 20 Tutorial de HTML 21 Atributos estándar Eventos intrínsecos Tutorial de HTML Tablas de HTML Las usamos para componer un sitio o simplemente como tabla de datos. ¿Qué son las tablas de HTML? Las tablas son una herramienta muy útil para presentar datos de tablas y para el diseño de texto y gráficos de una página HTML. Características de las tablas Definimos las tablas con la etiqueta <table>. La tabla está dividida en filas definidas con la etiqueta <tr>. Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>. Las celdas pueden contener texto, imágenes, formularios, listas, otras tablas, etc. Bordes de las tablas Para que se visualicen los bordes de una tabla, debemos agregar el atributo border junto con el valor expresado en pixels, de lo contrario no se verán los bordes que dividen las celdas de la tabla. 22 Tutorial de HTML Veamos un ejemplo sin bordes: Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe. Encabezados de las tablas Los encabezados de una tabla se definen con la etiqueta <th>. La etiqueta <th> siempre muestra los encabezados remarcados. Márgenes de las celdas Es el espacio que se encuentra entre los bordes de la celda y su contenido. Definimos los márgenes con el atributo cellpadding. 23 Tutorial de HTML 24 Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mínimo entre las palabras dentro de cada celda y los bordes de las mismas. Espaciado entre celdas Es el espacio que se encuentra entre celda y celda. El mismo está definido con el atributo cellspacing. Tutorial de HTML Etiquetas y atributos de las tablas 25 Tutorial de HTML 26 Tutorial de HTML 27 Tutorial de HTML 28 Tutorial de HTML Listas - Listados Las listas son ideales para el diseño de menús. ¿Qué son las listas de HTML? Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. Tenemos tres tipos de listas: Ordenadas. Desordenadas. De definición. Listas Ordenadas Son aquellas que ordenan la lista anteponiendo números, letras o signos. Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma, utilizamos la etiqueta <li>. Listas Desordenadas Exponen la lista anteponiendo un punto, cuadrado o triángulo negro. Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>. 29 Tutorial de HTML Listas de definición Se utilizan para definir términos. Las listas de definición se representan con la etiqueta <dl>. Los términos de las mismas con <dt>. La definición de esos términos comienza con <dd>. 30 Tutorial de HTML Etiquetas y atributos de las listas 31 Tutorial de HTML Formularios en HTML Guía práctica de como diseñar los formularios HTML para tu sitio. ¿Para qué se usan los formularios? Los formularios son usados para que el usuario ingrese datos. Esos datos son enviados a un agente para que los procese (por ej., a un servidor web, a un servidor de correo, etc.). La etiqueta form Dentro de la etiqueta <form> se encuentra el formulario. Los usuarios interaccionan con los formularios a través de los llamados controles. Tipos de controles: Botones (buttons) Casillas de verificación (checkboxes) Radiobotones (radio buttons) Menúes (menus) Entrada de texto (text input) Selección de ficheros (file select) Controles ocultos (hidden controls) Controles tipo objeto (object controls) Dentro de la etiqueta <form>, se encuentra el atributo action. Este nos especificará el documento que manejará el formulario completado y enviado. También contamos con el atributo method. El mismo nos define el método por el cual se enviarán los datos del usuario al servidor. La etiqueta input Nos define el registro donde el usuario puede ingresar los datos. El atributo type específica el tipo de control a crear. Entre ellos se encuentran los siguientes valores: Text Crea un control que nos permite ingresar un texto en una línea. 32 Tutorial de HTML 33 Nota: en este ejemplo podemos observar lo siguiente: action="datos.php" --> nos indica que el archivo datos.php es el encargado de manipular los datos que el usuario ingresó en el formulario method="get" --> nos indica que los datos del formulario se enviarán por el método get name="nombre" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo Radio botones Se usan cuando queremos que el usuario elija una sola opción de entre una serie de posibilidades. Nota: en este ejemplo podemos observar lo siguiente: action="edades.asp" --> nos indica que el archivo edades.asp es el encargado de manipular los datos que el usuario ingresó en el formulario method="post" --> nos indica que los datos del formulario se enviarán por el método post name="edad" --> debemos utilizar el mismo nombre (en este caso "edad") para todos los elementos del mismo control radio. value="mayor" --> define el valor del elemento <input> Tutorial de HTML Checkbox (casillas de verificación) Permite al usuario elegir varias opciones entre todas las posibilidades. 34 Nota: en este ejemplo podemos observar lo siguiente: action="hobbie.php" --> nos indica que el archivo hobbie.php es el encargado de manipular los datos que el usuario ingresó en el formulario method="get" --> nos indica que los datos del formulario se enviarán por el método get name="pasa" --> debemos utilizar el mismo nombre (en este caso "pasa") para todos los elementos del mismo control checkbox. value="tv" --> define el valor del elemento <input> Password Funciona igual que text, pero el texto introducido se presenta mediante una serie de asteriscos. Es utilizado generalmente para ingresar contraseñas. Submit Botón de envió de datos del formulario. Reset Botón de re inicialización. Al ser pulsado reinicializa todos los controles a sus valores iniciales. Tutorial de HTML 35 Nota: en este ejemplo podemos observar lo siguiente: action="datos_personales.php" --> nos indica que el archivo datos_personales.php es el encargado de manipular los datos que el usuario ingresó en el formulario method="post" --> nos indica que los datos del formulario se enviarán por el método post name="nombre" - name="secreto" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo value="Enviar" --> define el texto del botón "submit" value="Borrar" --> define el texto del botón "reset" Las etiquetas select y option La etiqueta <select> es usada para crear un menú desplegable. Cada opción ofrecida por el menú se representa con la etiqueta <option> Nota: en este ejemplo podemos observar lo siguiente: Tutorial de HTML action="continentes.php" --> nos indica que el archivo continentes.php es el encargado de manipular los datos que el usuario ingresó en el formulario method="get" --> nos indica que los datos del formulario se enviarán por el método get name="continente" --> le asigna un único nombre al menú desplegable value="america" --> define el valor del elemento <option> La etiqueta textarea Se usa para crear un control de entrada de texto multilínea. Los atributos rows y cols nos indican la cantidad de filas y columnas que tendrá el recuadro del área de texto. Nota: en este ejemplo podemos observar lo siguiente: action="texto.php" --> nos indica que el archivo texto.php es el encargado de manipular los datos que el usuario ingresó en el formulario method="post" --> nos indica que los datos del formulario se enviarán por el método post name="eltexto" --> le asigna un nombre al elemento textarea 36 Tutorial de HTML Etiquetas y atributos de los formularios 37 Tutorial de HTML 38 Tutorial de HTML 39 Tutorial de HTML 40 Tutorial de HTML Imágenes en HTML Las imágenes, gráficos y fotos le dan vida y color a las páginas web. ¿Cómo insertamos imágenes en un archivo HTML? Para insertar imágenes en un sitio usaremos la etiqueta <img>. Esta etiqueta es vacía, es decir que debemos utilizarla con el atributo src para que muestre la imagen. La etiqueta <img> no tiene cierre. Veamos un ejemplo Si tenemos que insertar una imagen que lleva por nombre de archivo "foto1.jpg" y que está ubicada en el directorio "www.virtualnauta.com/imagenes/", entonces esta sería la forma de escribir el código: Nota: el atributo <img> mediante el uso del atributo src inserta la imagen foto1.jpg ubicada en la dirección "www.virtualnauta.com/imagenes/" Texto alternativo de la imagen Se utiliza comúnmente cuando deseamos visualizar un texto explicativo de una imagen. Este texto aparece al pasar el apuntador sobre la imagen o en muchos casos cuando el navegador, por alguna razón, no visualiza las imágenes y en su lugar coloca este texto alternativo dentro de un recuadro. Para ello vamos a usar el atributo alt. 41 Tutorial de HTML Etiquetas y atributos de las imágenes 42 Tutorial de HTML 43 Tutorial de HTML Fondos de Pantalla Es el telón de fondo de toda página web. El atributo background Si queremos diseñar sitios más atractivos debemos utilizar imagenes o colores para el fondo de nuestras páginas. El fondo se define en la etiqueta <body>. Para insertar una imagen de fondo debemos utilizar el atributo background dentro de la etiqueta <body>. El valor de este atributo es la URL de la imagen que deseamos colocar. Si la imagen es más pequeña que la pantalla del navegador, esta se repetirá tantas veces como sea necesario hasta cubrir toda la pantalla. Ejemplos El atributo bgcolor El atributo bgcolor específica el color de fondo de una página HTML. El valor del mismo puede expresarse con un número hexadecimal, valor RGB, o nombre de color (en inglés). Este atributo también debe ir dentro de la etiqueta <body> Ejemplos ¡Importante! Los atributos background y bgcolor están desaprobados en la última versión de HTML (HTML4 y XHTML). En su lugar debemos usar las propiedades de fondo de CSS para escribir un código correcto de nuestro sitio. 44 Tutorial de HTML INFORMACIÓN ADICIONAL: Las marcas o etiquetas Las partes de la etiqueta que van entre "[]" son opcionales. Una etiqueta siempre va entre "<...>". Opcionalmente, puede tener un conjunto de atributos y valores. Algunos atributos no tienen un valor asociado; a estos atributos se les suele denominar compactos. En caso de tener un valor asociado, el valor del atributo debe ir entre comillas. El contenido de la etiqueta puede ser texto, u otras etiquetas. Algunas etiquetas no tienen ningún contenido. Habitualmente, todas las etiquetas deben cerrarse. Todo el contenido de un documento HTML se encuentra entre las etiquetas <html> </html>. Cada página se divide a su vez en cabecera (delimitada entre las etiquetas <head> </head>) y cuerpo (delimitado entre las etiquetas <body> </body>). Toda la información que se incluye en la cabecera no se renderiza al visualizar el documento. Se considera "meta información". Es buena práctica incluir dentro de la cabecera de la página web un título, empleando la etiqueta <title>. Éste será el título que nuestro navegador web muestre en su barra. Este título también es considerado por los buscadores de Internet, como Google, a la hora de determinar sobre qué trata nuestra página. Caracteres especiales Como en todo lenguaje de programación, en HTML hay algunos caracteres que tiene significado especial, como por ejemplo < y >. Por ello, no pueden emplearse directamente en el código HTML, sino que debe emplearse una secuencia de escape equivalente. En la siguiente tabla mostramos las secuencias de escape más comunes: 45 Tutorial de HTML 46 Como habrás podido observar, todas las secuencias de escape empiezan con un "&" y terminan en un ";". La mayor parte de los navegadores modernos permiten escribir vocales con acento y caracteres como la "ñ" directamente en el HTML. No obstante, suele ser una buena idea curarse en salud y emplear las secuencias de escape por compatibilidad con navegadores antiguos.
