Académique Documents
Professionnel Documents
Culture Documents
Qu es HTML?
HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".
HTML es el lenguaje que te permite describir y dar forma a ts pginas Web.
Publica tus propias pginas con fotos, listas, tablas, etc.
Obtn informacin de los visitantes de tu sitio.
Disea los formularios que te permitirn contactar tus futuros clientes.
Crea un sitio para vender ts productos o servicios.
Incluye video clips, msica, sonidos, y otras aplicaciones que darn vida a ts pginas Web
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).
Pgina 1
Ahora t ves la direccin, por ejemplo "C:\My Documents\pagina1.html". Presiona "OK" y el
navegador mostrar la pgina recin creada.
Expliquemos el ejemplo
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.
Pgina 2
Elementos y etiquetas de HTML
Las etiquetas HTML son las encargadas de dar forma a nuestro sitio.
Los elementos
Los elementos son declaraciones para visualizar o dar forma a una pgina Web.
Las etiquetas
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.
El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en
negrita).
Pgina 3
EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del
documento).
Muchas etiquetas llevan atributos. Los mismos proveen de mayor informacin a los elementos HTML.
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 tus cdigos HTML.
Etiquetas Bsicas
Headings
Pgina 4
HTML agrega automaticamente 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 y dems buscadores tiene en cuenta, a la hora de indexar un sitio web.
Prrafos
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.
Salto de lnea
El salto de lnea est definido con la etiqueta <br>. Es utilizado cuando queremos cortar una lnea sin
necesidad de terminar con el prrafo. La etiqueta <br> obliga a saltar de lnea dondequiera que la
ubiquemos.
Pgina 5
Trazar una lnea
La etiqueta <hr> nos permite trazar una lnea horizontal como las que separan las distintas secciones
de este tutorial.
Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos
Pgina 6
Etiquetas para dar forma al texto
Pgina 7
Etiquetas de citaciones y definiciones
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 < o <.
Otro uso muy frecuente es el de insertar acentos en el cdigo html por medio de los nmeros de las
entidades
Pgina 8
Caracteres especiales de uso frecuente
Enlaces en HTML
La propiedad ms importante de Internet, es la posibilidad de conectarse los unos con los otros.
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 palabraanchor(ancla).
Pgina 9
Sintaxis
EL atributo target
Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace.
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".
Sintaxis
Y en otra parte de la pgina, del mismo sitio o de otro sitio, creamos un enlace a Captulo 1. Para ello
utilizamos el signo # seguido del nombre del enlace.
Pgina 10
mailto: nos indica la direccin email a la que va dirigida, en este ejemplo: alguien@gmail.com.
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.
Pgina 11
Atributos estndard
Eventos intrnsecos
Frames en HTML
Dividimos la pgina en partes ms pequeas y en cada una de ellas visualizamos documentos
diferentes.
Los Frames
Pgina 12
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.
La etiqueta frameset
La etiqueta <frameset> se usa para dividir la ventana del navegador en diferentes marcos y a cada
uno asignarle una medida distinta.
Cada frameset define un grupo de filas y columnas.
Sintaxis
Los posibles valores para definir el tamao de las filas y de las columnas
La etiqueta frame
Sintaxis
La etiqueta noframes
La etiqueta <noframes> muestra un texto para los navegadores que no soportan frames.
Pgina 13
La etiqueta iframe
La etiqueta <iframe> se usa para crear un frame en lnea que contiene otro documento.
El iframe puedo mostrar una ventana que contenga otra pgina Web dentro de la pgina que estamos
diseando
Sintaxis
Ejemplo
En este ejemplo podemos observar que la ventana del resultado nos est mostrando la pgina principal de
Virtualnauta.com.
Pgina 14
Etiquetas y atributos de los marcos
Pgina 15
Atributos estndard
Eventos intrnsecos
Tablas de HTML
Las usamos para componer un sitio o simplemente como tabla de datos.
Las tablas
Las tablas son herramientas muy tiles para presentar datos en forma de tablas y para el diseo de pginas
y ubicacin de textos y grficos dentro de las mismas.
Sintaxis
Pgina 16
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.
Pgina 17
Mrgenes de las celdas
Pgina 18
Etiquetas y atributos de las tablas
Pgina 19
Pgina 20
Pgina 21
Listas - Listados
Las listas son ideales para el diseo de mens.
Las listas
Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura.
Tenemos tres tipos de listas:
Ordenadas.
Desordenadas.
Pgina 22
De definicin.
Listas Ordenadas
Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc.
Listas Desordenadas
Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma
utilizamos la etiqueta <li>.
Listas de definicin
Pgina 23
Etiquetas y atributos de las listas
Pgina 24
Formularios en HTML
Gua prctica de como disear los formularios HTML para tu sitio.
Los formularios
Los formularios son usados para que el usuario ingrese datos.
Esos datos son enviados a un documento, que se encuentra en un servidor, para que los procese (por ej., a
un servidor web, a un servidor de email, etc.).
La etiqueta form
Sintaxis
La etiqueta input
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)
Sintaxis
Pgina 25
El control "text"
El control "radio"
Se usa cuando queremos que el usuario elija una sola opcin de entre una serie de posibilidades.
El control "checkbox"
Pgina 26
El control "password"
Funciona igual que text, pero el texto introducido se presenta mediante una serie de puntitos. Es utilizado
generalmente para ingresar contraseas.
El control submit es el botn de envio de datos del formulario y el control reset es el botn de
reinicializacin. Al ser pulsado reinicializa todos los controles a sus valores iniciales.
El control "file"
El control "hidden"
El control hidden nos permite enviar informacin oculta a los ojos del usuario.
Pgina 27
El control "image"
El control image nos permite utilizar una imagen personalizada como botn de un formulario.
La etiqueta textarea
Pgina 28
Etiquetas y atributos de los formularios
Pgina 29
Pgina 30
Pgina 31
Imgenes en HTML
Las imgenes, grficos y fotos le dan vida y color a las pginas web.
Las imgenes
Para insertar imgenes en un sitio usaremos la etiqueta <img>.
Esta etiqueta debe ir acompaada del atributo src que es el que contiene el URL de la ubicacin del archivo
de la imagen.
El atributo alt se utiliza para dar una breve descripcin de la imagen, la cual podremos observar en caso que
el navegador del usuario, por alguna razn, no muestre la misma.
Sintaxis
Pgina 32
Etiquetas y atributos de las imgenes
Pgina 33
Pgina 34