Sunteți pe pagina 1din 47

Tutorial de HTML

15-7-2012

CHALOO

TUTORIAL DE HTML

HTML BASICO | Carlos

Tutorial de HTML
Ao de la Integracin Nacional y el Reconocimiento de Nuestra Diversidad

Trabajo de investigacin: TUTORIAL DE HTML

Autor: CHATA YAURI, CARLOS

Tutorial de HTML

Introduccin al HTML
Qu significa HTML? y un primer ejemplo de este manual.

Qu son los archivos HTML?


HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto". Los archivos HTML deben tener una extensin 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 pgina.

Vamos a hacer una pequea prueba!


Si ests 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"- elgelo y presiona "Open". Ahora t ves la direccin, por ejemplo "C:\My Documents\pagina1.html". Presiona "OK" y el navegador mostrar la pgina.

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 cdigo HTML de la pgina. Luego vemos la etiqueta <head>. Lo que sigue a continuacin hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aqu colocamos informacin tal como el ttulo de la pgina (<title>Mi primera pgina Web</title>), palabras claves para los motores de bsqueda, una descripcin de la pgina 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 seccin 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.

Qu son los elementos y las etiquetas de HTML?


Los elementos son declaraciones para visualizar o dar forma a una pgina Web. Las etiquetas (en ingls: tags) son marcas insertadas en un documento HTML para proporcionar informacin sobre una unidad o contenido.

Reglas bsicas
Las etiquetas estn 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 maysculas y minsculas, 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 informacin 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 sera:

Un consejo con respecto al uso de minsculas. Si bien HTML acepta tanto etiquetas en mayscula <B> como en minscula <b>, el World Wide Web Consortium (W3C) recomienda el uso de minsculas. Adems XHTML (la siguiente versin de HTML) acepta solo minsculas. Es por eso que recomendamos acostumbrarse a usar minsculas cuando escribas sus cdigos HTML.

Tutorial de HTML

Etiquetas bsicas de HTML


Las etiquetas ms simples y de uso ms comn en HTML.

Headings
Nos definen el tamao de un ttulo o cabecera. <h1> nos da el tipo de letra ms grande. <h6> nos da el tipo de letra ms pequeo. HTML agrega automticamente un espacio antes y despus de cada ttulo. <h1> al ser usado como ttulo de una pgina Web, es de suma importancia ya que es uno de los parmetros que Google tiene en cuenta, a la hora de indexar su sitio.

Prrafos
Los prrafos se definen con la etiqueta <p>.

Tutorial de HTML

Comentarios
La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del cdigo que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el cdigo y son de gran ayuda en el momento que necesitemos editarlo.

* Nota que el signo de exclamacin se coloca solo al principio del cdigo.

Salto de lnea
El salto de lnea est definido con la etiqueta <br>. Es utilizado cuando queremos terminar una lnea sin necesidad de terminar con el prrafo. La etiqueta <br> obliga a saltar de lnea dondequiera que la ubiquemos.

Trazar una lnea


La etiqueta <hr> nos permite trazar una lnea horizontal como las que separan las distintas secciones de este tutorial. La etiqueta <hr> no tiene cierre.

Tutorial de HTML

Tabla con las etiquetas bsicas

Tutorial de HTML

Formato de texto con HTML


Elige como decorar y visualizar los textos de tu sitio.

Formato bsico del texto


HTML nos permite definir el formato de visualizacin del texto en la pantalla. Muy til para cuando queramos resaltar o enfatizar una un texto en especial. Tambin muy usado para subrayar o escribir subndices o superndices. 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 comnmente para mostrar cdigos de programacin.

Etiquetas de citaciones y definiciones

Tutorial de HTML

Caracteres Especiales en HTML


Uso de acentos, signos de apertura de interrogacin y exclamacin, ees, espacio en blanco, etc.

11

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 cdigo. Los nombres de las entidades estn compuestos por el signo(&), luego el nombre de la entidad y al final (";" - punto y coma). Los nmeros de estos caracteres estn compuestos por (&), luego (# - numeral), el nmero de la entidad y al final (";" - punto y coma). Por ejemplo para mostrar el signo "<" debemos escribir &lt; o &#60;. El uso ms comn de los caracteres especiales es el espacio en blanco. Si en un texto figuran 5 espacios en blanco seguidos, HTML automticamente 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 cdigo html por medio de los nmeros de las entidades

Tutorial de HTML
Caracteres especiales de uso frecuente

12

Tutorial de HTML

Enlaces en HTML
La propiedad ms 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 Ingls) nos permiten conectarnos con otros documentos: una imagen un video un archivo de sonido sitios en la web(otra pgina 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 seala que es un enlace. El atributo href="http://www.virtualnauta.com/" indica la direccin 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 pgina del navegador.

14

EL atributo name
Este atributo se usa para definir una determinada ubicacin dentro de la pgina. Supongamos que definimos un destino de vnculo llamado "destino-uno" en el archivo "uno.html".

Esto crea un destino de vnculo alrededor del texto: Captulo 1. Una vez definido el destino, podemos crear un enlace a l desde el mismo documento o desde otro diferente, utilizando un carcter "#" 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 automticamente el programa de email que tenemos definido por defecto.

Tutorial de HTML

mailto: nos indica la direccin email a la que va dirigida, en este ejemplo: alguien@yahoo.com.

15

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

Tutorial de HTML

16

Tutorial de HTML

17

Atributos estndar

Si desea una descripcin completa, dirjase a: atributos estndard.

Eventos intrnsecos

Tutorial de HTML

Frames en HTML
Dividimos la pgina en partes ms pequeas y en cada una de ellas visualizamos documentos diferentes.

18

Qu son los frames?


Los frames (marcos en espaol) permiten a los autores presentar documentos con vistas mltiples. Esto posibilita mantener cierta informacin 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 lnea que contiene otro documento. Es decir, que puedo mostrar una ventana que contenga otra pgina Web dentro de la pgina que estamos diseando

En este ejemplo podemos observar que la ventana del resultado nos est mostrando la pgina principal de Virtualnauta.com.

Tutorial de HTML
Etiquetas y atributos de los marcos

20

Tutorial de HTML

21 Atributos estndar

Eventos intrnsecos

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 diseo de texto y grficos de una pgina HTML. Caractersticas de las tablas

22

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, imgenes, 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 vern los bordes que dividen las celdas de la tabla.

Tutorial de HTML
Veamos un ejemplo sin bordes:

Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe.

23

Encabezados de las tablas


Los encabezados de una tabla se definen con la etiqueta <th>.

La etiqueta <th> siempre muestra los encabezados remarcados.

Mrgenes de las celdas


Es el espacio que se encuentra entre los bordes de la celda y su contenido. Definimos los mrgenes con el atributo cellpadding.

Tutorial de HTML

24
Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mnimo 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 diseo de mens.

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

29

Listas Ordenadas
Son aquellas que ordenan la lista anteponiendo nmeros, 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 tringulo 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 definicin
Se utilizan para definir trminos. Las listas de definicin se representan con la etiqueta <dl>. Los trminos de las mismas con <dt>. La definicin de esos trminos comienza con <dd>.

30

Tutorial de HTML
Etiquetas y atributos de las listas

31

Tutorial de HTML

Formularios en HTML
Gua prctica de como disear 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.).

32

La etiqueta form
Dentro de la etiqueta <form> se encuentra el formulario. Los usuarios interaccionan con los formularios a travs de los llamados controles. Tipos de controles: Botones (buttons) Casillas de verificacin (checkboxes) Radiobotones (radio buttons) Menes (menus) Entrada de texto (text input) Seleccin 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. Tambin contamos con el atributo method. El mismo nos define el mtodo por el cual se enviarn los datos del usuario al servidor.

La etiqueta input
Nos define el registro donde el usuario puede ingresar los datos. El atributo type especfica 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 lnea.

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 enviarn por el mtodo 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 opcin 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 enviarn por el mtodo 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 verificacin)
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 enviarn por el mtodo 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 contraseas.

Submit
Botn de envi de datos del formulario.

Reset
Botn de re inicializacin. 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 enviarn por el mtodo 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 botn "submit" value="Borrar" --> define el texto del botn "reset"

Las etiquetas select y option


La etiqueta <select> es usada para crear un men desplegable. Cada opcin 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 enviarn por el mtodo 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 multilnea. Los atributos rows y cols nos indican la cantidad de filas y columnas que tendr el recuadro del rea de texto.

36

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 enviarn por el mtodo post name="eltexto" --> le asigna un nombre al elemento textarea

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

Imgenes en HTML
Las imgenes, grficos y fotos le dan vida y color a las pginas web.

Cmo insertamos imgenes en un archivo HTML?


Para insertar imgenes en un sitio usaremos la etiqueta <img>. Esta etiqueta es vaca, es decir que debemos utilizarla con el atributo src para que muestre la imagen. La etiqueta <img> no tiene cierre.

41

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 sera la forma de escribir el cdigo:

Nota: el atributo <img> mediante el uso del atributo src inserta la imagen foto1.jpg ubicada en la direccin "www.virtualnauta.com/imagenes/"

Texto alternativo de la imagen


Se utiliza comnmente 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 razn, no visualiza las imgenes y en su lugar coloca este texto alternativo dentro de un recuadro. Para ello vamos a usar el atributo alt.

Tutorial de HTML

Etiquetas y atributos de las imgenes

42

Tutorial de HTML

43

Tutorial de HTML

Fondos de Pantalla
Es el teln de fondo de toda pgina web.

El atributo background
Si queremos disear sitios ms atractivos debemos utilizar imagenes o colores para el fondo de nuestras pginas. 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 ms pequea que la pantalla del navegador, esta se repetir tantas veces como sea necesario hasta cubrir toda la pantalla.

44

Ejemplos

El atributo bgcolor
El atributo bgcolor especfica el color de fondo de una pgina HTML. El valor del mismo puede expresarse con un nmero hexadecimal, valor RGB, o nombre de color (en ingls). Este atributo tambin debe ir dentro de la etiqueta <body>

Ejemplos

Importante!
Los atributos background y bgcolor estn desaprobados en la ltima versin de HTML (HTML4 y XHTML). En su lugar debemos usar las propiedades de fondo de CSS para escribir un cdigo correcto de nuestro sitio.

Tutorial de HTML
INFORMACIN 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 ningn contenido. Habitualmente, todas las etiquetas deben cerrarse. Todo el contenido de un documento HTML se encuentra entre las etiquetas <html> </html>. Cada pgina se divide a su vez en cabecera (delimitada entre las etiquetas <head> </head>) y cuerpo (delimitado entre las etiquetas <body> </body>). Toda la informacin que se incluye en la cabecera no se renderiza al visualizar el documento. Se considera "meta informacin". Es buena prctica incluir dentro de la cabecera de la pgina web un ttulo, empleando la etiqueta <title>. ste ser el ttulo que nuestro navegador web muestre en su barra. Este ttulo tambin es considerado por los buscadores de Internet, como Google, a la hora de determinar sobre qu trata nuestra pgina.

45

Caracteres especiales

Como en todo lenguaje de programacin, en HTML hay algunos caracteres que tiene significado especial, como por ejemplo < y >. Por ello, no pueden emplearse directamente en el cdigo HTML, sino que debe emplearse una secuencia de escape equivalente. En la siguiente tabla mostramos las secuencias de escape ms comunes:

Tutorial de HTML

46

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

S-ar putea să vă placă și