Apuntes de HTML

BASCO DE HTML
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
Qu conocimientos previos debes poseer?
Para estudiar HTML no se requiere de conocimientos previos en programacin.

Es muy simple de aprender ya que no es un lenguaje de programacin sino que es un lenguaje de
marcas.
Los archivos HTML

Los archivos HTML deben tener una extensin htm o html (ej. misitio.htm o misitio.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, Google Chrome, Opera,
Safary, etc.) como mostrar la pgina Web.
Vamos a hacer nuestro primer sitio!
Si ests usando Windows, abre el "Block de Notas".

Si usas Mac, abre "Simpletext".
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, Chrome, 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".
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.
Esta es una etiqueta 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:
Pgina 3
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:
En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el

valor"#FFFF00"(representa el color amarillo en hexadecimal).
Esto quiere decir que el color de fondo de la pgina ser amarillo.
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 tus cdigos HTML.
Etiquetas bsicas de HTML

Las etiquetas ms simples y de uso ms comn en HTML.
Etiquetas Bsicas
Headings
Nos definen el tamao de un ttulo o cabecera.
<h1> nos d el tipo de letra ms grande.

<h6> nos d el tipo de letra ms pequeo.
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
Los prrafos se definen con la etiqueta <p>.
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 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.
La etiqueta <hr> no tiene cierre.
Tabla con las etiquetas bsicas
Formato de texto con HTML

Elige como decorar y visualzar 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 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:
Pgina 6
Etiquetas para dar forma al texto
Etiquetas de "Texto estructurado"
Estas etiquetas son usadas comnmente para mostrar cdigos de programacin.
Pgina 7
Etiquetas de citaciones y definiciones
Caracteres Especiales en HTML

Uso de acentos, signos de apertura de interrogacin y exclamacin, ees, 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 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 <.
El uso ms comn de los caracteres especiales es el espacio en blanco. Si en un texto figuran 5

espacios en blanco seguidos, HTML automaticamente 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 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.
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 palabraanchor(ancla).
La etiqueta <a> tiene como cierre </a>.
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.
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.
Pgina 10
mailto: nos indica la direccin email a la que va dirigida, en este ejemplo: alguien@gmail.com.
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
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.
Cada vista es un documento independiente de los otros.
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
La etiqueta <frame> asigna que documento colocaremos en cada marco.
Sintaxis
Nota: La etiqueta <frame> no debe llevar etiqueta de cierre
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 de la misma debe ir entre las etiquetas <body>
</body>
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.
Caractersticas 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, imgenes, formularios, listas, otras tablas, etc.
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.
Veamos un ejemplo sin bordes
Encabezados de las tablas
Los encabezados de una tabla se definen con la etiqueta <th>.
Pgina 17
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.
Espaciado entre celdas
Es el espacio que se encuentra entre celda y celda.

El mismo est definido con el atributo cellspacing.
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
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>.
Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc.
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>.
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>.
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
La etiqueta <form> se utiliza para definir un formulario.

El atributo action es obligatorio y nos indica el documento que procesar los datos del formulario enviado.
Tambin contamos con el atributo method que nos define el mtodo por el cual se enviarn los datos del
usuario al servidor.
Sintaxis
La etiqueta input
Nos define el registro donde el usuario puede ingresar los datos.

Los usuarios interaccionan con los formularios a travs de las 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)
El atributo type especfica el tipo de control a crear.
Sintaxis
Pgina 25
El control "text"
Crea un control que nos permite ingresar un texto en una lnea.
El control "radio"
Se usa cuando queremos que el usuario elija una sola opcin de entre una serie de posibilidades.
El control "checkbox"
Permite al usuario elegir varias opciones entre todas las posibilidades.
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" y el control "reset"
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 file nos permite enviar archivos por medio de un formulario.
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.
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>
La etiqueta textarea
Se usa para crear un control de entrada de texto multilnea.

Los atributo rows y cols nos indican la cantidad de filas y columnas que tendr el recuadro del rea de
texto.
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.
La etiqueta <img> no tiene cierre.
Sintaxis
Las etiquetas map y area
La etiqueta map especifica un mapa de imgenes.

Un mapa de imgenes es una imagen que permite clickear diferentes reas de la misma.
Esta etiqueta requiere del atributo name, con el mismo nombre usado en el atributo usemap de la
etiqueta img. De esta forma se establece la relacin imagen-mapa.
La etiqueta area se utiliza para definir regiones o reas dentro de un mapa de imgenes y los enlaces
asociados a esas regiones.
Pgina 32
Etiquetas y atributos de las imgenes
Pgina 33
Pgina 34

Apuntes de HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apuntes de HTML

Uploaded by

Copyright:

Available Formats

BASCO DE HTML

Qu conocimientos previos debes poseer?

Para estudiar HTML no se requiere de conocimientos previos en programacin.

Los archivos HTML

Vamos a hacer nuestro primer sitio!

Si ests usando Windows, abre el "Block de Notas".

Abre el navegador Internet(Internet Explorer, Firefox, Chrome, etc.).

Esta es una etiqueta HTML:

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 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?

Los atributos siempre van con la estructura: nombre="valor".

Un ejemplo de los atributos sera:

En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el

Esto quiere decir que el color de fondo de la pgina ser amarillo.

Un consejo con respecto al uso de minsculas.

Etiquetas bsicas de HTML

Nos definen el tamao de un ttulo o cabecera.

<h1> nos d el tipo de letra ms grande.

Los prrafos se definen con la etiqueta <p>.

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

La etiqueta <hr> no tiene cierre.

Tabla con las etiquetas bsicas

Formato de texto con HTML

Formato bsico del texto

Muy til para cuando queramos resaltar o enfatizar un texto en especial.

Tambin muy usado para subrayar o escribir subndices o superndices.

Para ello utilizamos las siguientes etiquetas:

Etiquetas de "Texto estructurado"

Estas etiquetas son usadas comnmente para mostrar cdigos de programacin.

Caracteres Especiales en HTML

El uso ms comn de los caracteres especiales es el espacio en blanco. Si en un texto figuran 5

Los Enlaces o Links

La etiqueta <a> tiene como cierre </a>.

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.

Un enlace a partir de una imagen

Etiquetas y atributos de los enlaces

Cada vista es un documento independiente de los otros.

La etiqueta <frame> asigna que documento colocaremos en cada marco.

Nota: La etiqueta <frame> no debe llevar etiqueta de cierre

<noframes> se coloca dentro de la etiqueta frameset

Caractersticas de las tablas

Definimos las tablas con la etiqueta <table>.

Veamos un ejemplo sin bordes

Encabezados de las tablas

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

Es el espacio que se encuentra entre los bordes de la celda y su contenido.

Espaciado entre celdas

Es el espacio que se encuentra entre celda y celda.

Son aquellas que ordenan la lista anteponiendo nmeros ,letras o signos.

Exponen la lista anteponiendo un punto, cuadrado o tringulo negro.

Se utilizan para definir trminos.

Las listas de definicin se representan con la etiqueta <dl>.

La etiqueta <form> se utiliza para definir un formulario.

Nos define el registro donde el usuario puede ingresar los datos.

El atributo type especfica el tipo de control a crear.

Crea un control que nos permite ingresar un texto en una lnea.

Permite al usuario elegir varias opciones entre todas las posibilidades.

El control "submit" y el control "reset"