INTRODUCCION A HTML HTML(HyperTextMarkupLanguage) o "Lenguaje para Marcado de Hipertexto". HTMLes 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 estudiarHTMLnose 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 archivosHTMLdeben tener una extensinhtmohtml(ej. misitio.htmo misitio.html). Para crear un archivoHTMLsolo hace falta uneditor de texto. Un archivoHTMLest compuesto poretiquetas. Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Google Chrome, Opera, Safary, etc.)como mostrarla pgina Web.

Vamos a hacer nuestro primer sitio!Si ests usando Windows, abre el "Block de Notas".Si usas Mac, abre "Simpletext".Ejemplo

Escribe en el mismo, el siguiente texto:

Cdigo

Mi primera pgina Web

Hola a todos.

ResultadoHola a todos.

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". 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--> Indica al navegador que abre un archivo HTML.--> Apertura de la cabecera del documento. Seccin que no se muestra en la pantalla.Mi primera pgina Web--> Ttulo de la pgina.--> Cierre de la cabecera del documento.

--> Apertura del cuerpo del documento. Esta seccin aparece en la pantalla.Hola a todos.--> Texto que va a ser mostrado por el navegador.--> Cierre del cuerpo del documento.--> Cierre del archivo HTMLLa primera etiqueta del archivo es. Esto le indica al navegador que se t

rata de un archivo HTML. Para cerrar el archivo usamos. Todo lo que se encuentra entre las dos etiquetas es el cdigo HTML de la pgina.

Luego vemos la etiqueta. Lo que sigue a continuacin hasta su cierre, es la cabecera del documento y no se muestra en la pantalla. Aqu colocamos informacin tal como el ttulo de la pgina(Mi primera pgina Web), palabras claves para los motores de bsqueda, una descripcin de la pgina y otros datos del documento.

Entre las etiquetasyse 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.

La estructura del sitioEn los prximos captulos, encontrars una explicacin sobre los distintos elementos que conforman HTML, con una completa gua de referencias y mltiples ejemplos que harn ms simple el proceso de aprendizaje.

Elementos y etiquetas de HTMLLas etiquetas HTML son las encargadas de dar forma a nuestro sitio.

Los elementosLos elementos son declaraciones para visualizar o dar forma a una pgina Web.

Las etiquetasLas 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 "". Generalmente vienen en paresy. La primera es deaperturay la segunda decierre. El texto que se encuentra entre dos etiquetas es elcontenidodel elemento. Las etiquetas no son sensibles a las maysculas y minsculas, o seaes lo mismo que.Etiquetas de HTMLVeamos un ejemplo.Una pgina WebHola a todos. Este texto es en negritaEsta es una etiqueta HTML:Este texto es en negrita.El elemento HTML comienza con laetiqueta de apertura(etiqueta que nos muestra el texto en negrita).Elcontenidode dicho elemento es:Este texto es en negrita.El fin del elemento HTML es con laetiqueta de cierre.Otro elemento HTML en el ejemplo es:Hola a todos. Este texto es en negritaEL elemento HTML comienza con laetiqueta de apertura(etiqueta que define el cuerpo del documento).Elcontenidode dicho elemento es:Hola a todos. Este texto es en negrita.El fin del elemento HTML es con laetiqueta de cierre.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 laetiqueta de apertura. Los valores siempre hay que ponerlosentre comillas.Un ejemplo de los atributos sera:EjemploCdigoHola a todos. Este texto es en negritaResultadoHola a todos.Este texto es en negritaEn la etiqueta podemos observar elatributobgcolor=(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 cCon respecto al uso de minsculas.Si bien HTML acepta tanto etiquetas en mayscula como en minscula ,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 HTMLLas etiquetas ms simples y de uso ms comn en HTML.Etiquetas BsicasHeadingsNos definen el tamao de un ttulo o cabecera.nos d el tipo de letra ms grande.nos d el tipo de letra ms pequeo.HTML agrega automaticamente un espacio antes y despus de cada ttulo.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.EjemploCdigoHeadingsHeading 1Heading 2Heading 3Heading 4Heading 5Heading 6ResultadoHeading 1Heading 2Heading 3Heading 4Heading 5Heading 6PrrafosLos prrafos se definen con la etiqueta.EjemploCdigoPrrafosEste es el primer prrafo.Y este es el segundo prrafo.ResultadoEste es el primer prrafo.Y este es el segundo prrafo.ComentariosLa etiquetase 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 lneaEl salto de lnea est definido con la etiqueta
. Es utilizado cuando queremos cortar una lnea sin necesidad de terminar con el prrafo. La etiqueta
obliga a saltar de lnea dondequiera que la ubiquemos.EjemploCdigoEsto es
un salto de l
nea.ResultadoEsto esun salto de lnea.Trazar una lneaLa etiquetanos permite trazar una lnea horizontal como las que separan las distintas secciones de este tutorial.La etiquetano tiene cierre.EjemploCdigoResultadoTabla con las etiquetas bsicasEtiquetasDescripcinEj.aDefine el tamao de los encabezadosDefine un prrafoDefine un comentario
Define un salto de lneaDefine una lnea horizontalFormato bsico del textoHTML 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 elementosPara ello utilizamos las siguientes etiquetas:EjemploCdigoTexto en negritaTexto grandeTexto enfatizadoTexto en itlicaTexto pequeoTexto fuerteTexto subndiceTexto superndiceTexto subrayadoTexto tachadoTexto teletipoResultadoTexto normalTexto en negritaTexto normalTexto grandeTexto normalTexto enfatizadoTexto normalTexto en itlicaTexto normalTexto pequeoTexto normalTexto fuerteTexto normalTexto subndiceTexto normalTexto superndiceTexto normalTexto subrayadoTexto normalTexto tachadoTexto normalTexto teletipo Etiquetas para dar forma al textoEtiquetasDescripcinDefine un texto en negritaDefine un texto grandeDefine un texto enfatizadoDefine un texto en itlicaDefine un texto pequeoDefine un texto fuerteDefine un texto subndiceDefine un texto superndiceDefine un texto subrayadoDefine un texto tachadoDefine un texto de teletipoDefine un texto tachado.Desaprobado.Useen su lugarDefine un texto tachado.Desaprobado.Useen su lugarDefine un texto subrayado.Desaprobado.Useen su lugarEtiquetas de "Texto estructurado"Estas estiquetas son usadas comunmente para mostrar cdigos de programacin.EtiquetasDescripcinDefine un texto en cdigo de computadoraDefine un texto del tecladoDefine un texto ejemplo de cdigo de computadoraDefine una variableDefine un texto preformateadoDesaprobado.Useen su lugarDesaprobado.Useen su lugarDesaprobado.Useen su lugarEtiquetas de citaciones y definicionesEtiquetasDescripcinIndica una forma abreviada (p.ej., WWW, HTTP, etc.)Indica un acrnimo (p.ej., WAC ,radar, autobs, etc.)Define la informacin sobre el autorDefine la direccin del texto (p.ej., de izq. a der., de der. a izq.)Designa una cita largaDesigna una cita cortaContiene una cita o una referencia a otras fuentesIndica que aqu es donde se define el trmino encerradoCaracteres Especiales en HTMLUso de acentos, signos de apertura de interrogacin y exclamacin, ees, espacio en blanco, etc.Caracteres especialesMuchas veces necesitamos incluir en nuestros textos, signos que tienen un significado especial en HTML(por ej. "