Upload
marco-martinez
View
240
Download
0
Embed Size (px)
DESCRIPTION
HTML
Citation preview
Tutorial de HTML
” Año de la Integración Nacional y el Reconocimiento de Nuestra Diversidad”
Trabajo de investigación: 1
TUTORIAL DE HTML
Autor: CHATA YAURI, CARLOS
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 5define el cuerpo del documento).El contenido de dicho elemento es: Hola a todos. <b>Este texto es ennegrita</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.
Tutorial de HTML
Etiquetas básicas de HTML
Las etiquetas más simples y de uso más común en HTML.
Headings6
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>.
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
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 < o <.
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 " " 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
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 ejemploVamos 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
15
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
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 HTMLDividimos 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> 19
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
Tutorial de HTML
Tablas de HTMLLas 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
22
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.
Tutorial de HTML
Veamos un ejemplo sin bordes:
23Nota: 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.
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
Listas - ListadosLas listas son ideales para el diseño de menús.
¿Qué son las listas de HTML?29
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>.
Tutorial de HTML
Listas de definición 30
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>.
Tutorial de HTML
Formularios en HTMLGuía práctica de como diseñar los formularios HTML para tu sitio.
¿Para qué se usan los formularios? 32
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.
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 textarea36
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
Tutorial de HTML
Imágenes en HTMLLas 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? 41
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.
Tutorial de HTML
Fondos de PantallaEs 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 44para el fondo de nuestras páginas.El fondo se define en la etiqueta <body>.
Para insertar una imagen de fondo debemos utilizar el atributo backgrounddentro 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.
Tutorial de HTML
INFORMACIÓN ADICIONAL: Las marcas o etiquetasLas 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>
45
</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 especialesComo 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:
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.