Guia 1 HTML

HTML
Conceptos Bsicos

SENA

2014

Prefacio

En la actualidad el mundo de las telecomunicaciones ha abarcado gran
parte de nuestras vidas, donde las pginas web dominan la mayor parte
de esto.

Mediante las pginas web se muestra al pblico mucho tipo de
informacin ya sea para promocionar productos, parar promocionar
nuestra empresa, eventos, concursos etc.

En esta entrega nos introduciremos en los conceptos bsicos del
desarrollo web en HTML.

ndice

Prefacio.

Que es HTML.

Tipo de Documento HTML.

Validando el Documento HTML.

Estructura bsica de un documento HTML.

Etiquetas Comunes de HTML.

Atributos de Etiquetas HTML.

Imgenes en HTML.

Enlaces en HTML.

Tablas en HTML.

Que es HTML

Es un lenguaje de etiquetas con las que se definen las pginas web.
Bsicamente se trata de un conjunto de etiquetas que definen
elementos de texto, imgenes y tablas que compondr una pgina web.

Podemos decir tambin que es un lenguaje de marcacin de elementos
para la creacin de documentos de hipertexto, con una curva de
aprendizaje corta lo que permite a cualquier persona con poca o ninguna
experiencia en programacin desarrollar pginas no es necesario tener
conocimientos en programacin para aprender HTML.

Avancemos un poco como dije anteriormente HTML es un lenguaje de
etiquetas estas etiquetas se definen de la siguiente manera <b>,
formadas por el smbolo menor que <, nombre de la etiqueta b y
mayor que > cada etiqueta tiene un significado, por ejemplo la etiqueta
<b> significa negrita y la etiqueta <p> significa prrafo, <a> es un
enlace.

Conclusin HTML es una serie de etiquetas que definen un documento
HTML con algn estilo bsico. <b>esto est en negrita</b>.

Tipo de Documento HTML

Al momento de crear un documento HTML lo primero que debemos
hacer es indicar el tipo de documento HTML con DOCTYPE declarndola
en la primera lnea de nuestro documento HTML.

Dependiendo de la versin que vallamos a utilizar debemos declara un
DOCTYPE especifico.

HTML 4.01 Estricto.

Este tipo de DOCTYPE nos indica que es un documento HTML 4.01 y que
el contenido definido en el de ser de la versin 4.01, donde los
elementos no deben estar deprecados fuera de uso, ya no se usan
como FONT.

Este DOCTYPE se declara de la siguiente manera.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict //EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Estricto.

Este tipo de documento es un poco ms flexible ya que trae una
transicin de un documento HTML sin formato a un documento HTML
4.01 estricto. Por lo cual en estos documentos se declaran las etiquetas
que pertenezcan a la versin 4.01 y adems permite etiquetas que
puedan estar obsoletas.

El DOCTYEPE de este tipo de documento HTML es:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML5

En esta versin de HTML el DOCTYPE se ha simplificado de una manera
significativa ya que se elimina la referencia DTD que valida el
documento donde solo debemos especificar el tipo de documento HTML,
esto es HTML5.

Este DOCTYPE se define as:

Validando el documento HTML

Si queremos validar el documento HTML que hemos construido siendo
compatible con el DOCTYPE que especificamos podemos hacer uso del
servicio de validacin de la W3C.

Estructura bsica de un
documento HTML

Esta es la estructura bsica de un documento HTML.

Anteriormente explicamos que es DOCTYPE

<html></html> indica que lo que sigue es contenido HTML, todas las
etiquetas irn contenidas dentro de estas.

<head></head> Indica Que es la cabecera de nuestro documento
donde se contienen diversos elementos que identifican a nuestra pgina
ante los buscadores como google, yahoo, bing etc.

<title></title>Esta etiqueta indica el ttulo de nuestra pgina que se
mostrara en la pestaa del navegador web esta etiqueta est contenida
entre las etiquetas <head></head>

<body></body>Esta etiqueta indica que es el cuerpo de la pgina
aqu es donde irn la mayora de las etiquetas html que conformaran el
contenido de nuestra pgina que ser mostrada al usuario tales como:
texto, ttulos, imgenes, videos, animaciones flash etc.

NOTA: La mayoras de etiquetas requieren de su etiqueta de cierre
ejemplo: <body> su etiqueta de cierre es </body>.

Etiquetas Comunes de HTML.

Las etiquetas listadas a continuacin aparte de las vistas anteriormente
son las ms comunes:

Etiquetas de Titulo

Estas etiquetas indican un ttulo en el documento HTML van desde el
<h1> hasta el <h6>

Etiqueta de prrafo <p></p> Indican que el contenido es un prrafo

Etiqueta de salto de lnea <br/>

Esta etiqueta sirve para realizar saltos de lnea no necesita etiqueta de
cierre se cierra inmediatamente como se ve.

Etiqueta de negrillas <b></b> indica el texto en negrilla
Etiqueta de Itlicas <i></i> Indica el Texto en Cursiva
Etiqueta de subrayado <u></u>
Etiqueta de nfasis <strong></strong> como dice indica un fuerte
nfasis, los navegadores presentan el texto en negrilla.

Etiquetas de Imagen lo veremos ms adelante.
Etiquetas de tabla lo veremos ms adelante.

Etiqueta de regla <hr/> igual que la <br /> no necesita etiqueta de
cierre pero representa una lnea o regla horizontal.

La etiqueta de direccin de correo <addres></addres> indica una
direccin de correo.

Etiquetas de formato lgico

Etiqueta de cita <cite></cite> indica un texto citado de alguna obra.

Etiqueta de enfatizado <em></em> realiza la misma accin que la
etiqueta <strong>.

Etiquetas de Listas

Listas Desordenadas

Estas listas se indican con la etiqueta <ul> y su respectiva etiqueta de
cierre </ul> donde los elementos de la lista se indican con la etiqueta
<li></li>

Ejemplo:

Listas Ordenadas

Las Listas ordenadas se indican con la etiqueta <ol> y su respectiva
etiqueta de cierre </ol> donde los elementos de la lista se indican con
la misma etiqueta que se usa en la lista desordenada la etiqueta
<li></li>, pero en esta lista nuestros tem no irna con un punto si no
con un nmero que aumentara de acuerdo a cada tem que agreguemos

Ejemplo:

Formularios

Las etiquetas de formulario <form></form> indican que el contenido
encerrado es un formulario html.

Capos de formularios

input

Estas etiquetas muestra un campo ya sea de texto, contrasea, botn
de enviar etc. Una caja de texto que se especifica en su atributo, esta es
la etiqueta <input /> que igual que la etiqueta <br /> no necesita
etiqueta de cierre.

De acuerdo a su atributo se especifica qu tipo de campo es:

<input type=text> Campo de texto.

<input type=password> Campo de texto de contrasea.

<input type=submit> Botn que enva el formulario.

Ejemplo:

combo box

Es una lista de opciones que puede ser de seleccin mltiple o nica de
acuerdo a su atributo.

Ejemplo:

Lista de Botones: radio

Son listas con botones
atributo type=radio
de radio, el cual se especifica mediante el
Ejemplo:

Lista de Cajas: checkbox

Estas listas son muy parecidas a las listas de radio o botones a
diferencia por dos detalles que veremos a continuacin.

Las cajas son diferentes y se escriben de esta manera type=checkbox

As como los listas de radio solo permiten seleccionar una opcin
(siempre y cuando los nombres de las opciones fueran los mismos), las
listas de cajas permiten seleccionar una o varias opciones.

DIV

La etiqueta <div></div> se utiliza para definir una seccin dentro del
documento.

Esta etiqueta se usa comnmente para agrupar un bloque de elementos,
para luego aadirle un estilo determinado.

Estas son las ms comunes pero HTML define 91 etiquetas que los
diseadores podemos utilizar para marcar o definir los diferentes
elementos que componen una pgina.

Atributos de etiquetas HTML

Los atributos dan una caracterstica a las etiquetas HTML.

Cualquier etiqueta HTML puede contener uno o mas atributos,
separados por espacios, que permiten especificar la etiqueta el cdigo
tendra el siguiente aspecto:

<etiqueta atributo=valor_de_atributo>

Aunque cada una de las etiquetas HTML define sus propios atributos,
algunos de los atributos son comunes a muchas o casi todas las
etiquetas. De esta forma, es habitual explicar por separado los atributos
comunes de las etiquetas para no tener que volver a hacerlo cada vez
que se explica una nueva etiqueta. Los atributos comunes se dividen en
cuatro grupos segn su funcionalidad:

Atributos Bsicos

Se utilizan prcticamente en todas las etiquetas HTML.

Atributos de Internacionalizacin

Utilizados en pginas que muestran su contenido en varios idiomas.

Atributos de Eventos

Utilizadas en pginas dinmicas creadas con JavaScript

Atributos de Foco.
Estos atributos se utilizan para la accesibilidad del sitio web.
Atributos Bsicos.

Atributo Descripcin
Id=text Establece un identificado nico a cada elemento dentro
de una pgina HTML.
Class=text Establece la clase CSS que aplica estilos a este
elemento.
Style=text Establece de forma directa los estilos CSS de un
elemento.
Title=text Establece el ttulo a un elemento (mejora la accesibilidad
y los navegadores lo muestran cuando el usuario pasa el
ratn por encima del elemento).

Atributos para Internacionalizacin

Atributo Descripcin
Lang=cdigo de
Idioma
Indica el idioma del elemento mediante un cdigo
predefinido
Xml:lang=cdigo
de Idioma
Indica el idioma del elemento mediante un cdigo
predefinido
Dir Indica la direccin del texto (til para los idiomas
que escriben de derecha a izquierda)

Atributos de Eventos

Atributo Descripcin Elementos que pueden Usarlo
onblur Deseleccionar un
elemento
<button>,<input>,<label>,<select>
<textarea>,<body>
onchange Deseleccionar un
elemento que se
ha usado
<input>,<select>,<textarea>
onclick Hacer click y
soltar
Todos los elementos

ondblclick Hacer doble click Todos los elementos
onfocus Seleccionar un
elemento
<button>,<input>,<label>,<select>
<textarea>,<body>
onkeydown Pulsar una tecla
(sin soltar)
Elementos de formulario y <body>
onkeypress Pulsar una Tecla Elementos de formulario y <body>
onkeyup Solatar una tecla
pulsada
Elementos de formulario y <body>
onload Se ha cargado la
pagina
<body>
onmousedown Click sin soltar Todos los elementos
onmousemove Mover el mouse Todos los elementos
onmouseout El raton pasa por
encima del
elemento(sale de
este)
Todos los elementos
onmouseover El raton pasa por
encima del
elemento(entra
en este)
Todos los elementos
onmouseup Soltar el botn
del mouse
Todos los elementos
onreset Reinicia el
formulario (borra
los campos)
<form>
onresize Se ha modificado
el tamao de la
ventana del
navegador
<body>
onselect Seleccionar texto <input>,<textarea>
onsubmit Enviar el
formulario
<form>
onunload Se abandona la
pgina(al cerrar
el navegador)
<body>

Atributos de Foco

Atributo Descripcin
accesskey=letra Establece una tecla de acceso rpido a un
elemento HTML.
Tabindex=numero Establece la posicin del elemento en orden de la
tabulacin de la pgina. Su valor debe estar
comprendido entre 0 y 32.767.
onfocus,onblur Controla los eventos JavaScript que se ejecutan
cuando el elemento obtiene o pierde el foco.

Imgenes en HTML
Las imgenes en HTML son un gran recurso para captar la tencion del
usuario, mostrar contenido detallado ya sea publicidad, logotipos, o
simplemente una galera de imgenes para mostrar nuestro portafolio
de servicios.

La etiqueta para insertar imagene en nuestro documento html es:

<img src=ruta_de_imagene width=ancho height=alto alt=texto />

Esta etiqueta no contiene una etiqueta de cierre

Sus propiedades:

src Indica donde esta el recurso (la imagen) para mostrarla en la
pgina web ejemplo:

<img src=img/mi_imagen.jpg />

width Indica el ancho de la imagen ya sea en porcentaje o pixeles

Ejemplo:

<img src=img/mi_imagen.jpg width=200px />

<img src=img/mi_imagen.jpg width=30%/>

height Indica el alto de la imagen ya sea en porcentaje o pixeles

Ejemplo:

<img src=img/mi_imagen.jpg height=200px />

<img src=img/mi_imagen.jpg height=30%/>

alt Indica un texto que se mostrara cuando el cursor pase sobre la
imagen.

<img src=img/mi_imagen.jpg height=30% alt=SENA/>

Enlaces en HTML
Enlaces o Hipervnculos permiten conectarnos con otros documentos ya
sea local o perteneciente a otro sitio web.

Generalmente aparecen subrayados con un color azul, al estar visitados
su color cambia, al pasar el mouse encima del enlace podemos observar
que el cursor cambia.

La etiqueta de enlace es la siguiente:

<a href=enlace_hacia_la_pagina >la pagina</a>

Donde href indica la url del archivo donde apunta el enlace

Y la pgina es el texto que se muestra al usuario para que de click
Ejemplo:

<a href=http://www.google.com >google</a>

Enlace normal

Enlace Visitado

Tablas en HTML

Las tablas son una herramienta que sirve para mostrar un contenido en
particular.

Es un grupo de filas donde cada una de ellas contiene un conjunto de
celdas. Son definidas usando elementos, un tabla puede ser introducida
en un documento html usando tres elementos.

El elemento table es la estructura contenedora principal, el elemento tr
contenedor de fila y el elemento td celda.

Resultado

Atributos

Colspan Indica el nmero de columnas que ocupara la celda. Por
defecto ocupa una sola columna. De esta forma si colocamos
<td colspan=2> significa que la celda actual se extiende en el ancho de
dos celdas.

Rowspan indica el nmero de columnas que ocupara la celda, por
defecto ocupa una sola fila.

Ejemplo:

Bueno esto es todo por ahora para dar los primeros pasos en crear
paginas html.

Es momento de empezar a probar todo lo aprendido.
Que empiece la diversin.

Guia 1 HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia 1 HTML

Cargado por

Copyright:

Formatos disponibles

HTML

También podría gustarte