APRENDIENDO HTML

SESIOacuteN 3

Oriacutegenesbull Uno de los retos iniciales a los que se tuvo que enfrentar la

informaacutetica fue el de coacutemo almacenar la informacioacuten en los archivos digitales

bull Como los primeros archivos soacutelo conteniacutean texto sin formato la solucioacuten utilizada era muy sencilla se codificaban las letras del alfabeto y se transformaban en nuacutemeros Asiacute nacioacute la codificacioacuten ASCII

Oriacutegenesbull Una vez resuelto el problema de almacenar el texto simple se

presenta el reto de almacenar los contenidos de texto con formato

bull En otras palabras iquestcoacutemo se almacena un texto en negrita iquesty un texto de color rojo iquesty otro texto azul en negrita y subrayado

Esencia del HTMLltparrafogtContenido de texto con ltimportantegtalgunas palabrasltimportantegt resaltadas de forma especialltparrafogt

El principio de un paacuterrafo se indica mediante la palabra ltparrafogt y el final de un paacuterrafo se indica mediante la palabra ltparrafogt De la misma manera para asignar maacutes importancia a ciertas palabras del texto se encierran entre ltimportantegt y ltimportantegt

Esencia del HTMLEl proceso de indicar las diferentes partes que componen la informacioacuten se denomina marcado (markup en ingleacutes) Cada una de las palabras que se emplean para marcar el inicio y el final de una seccioacuten se denominan etiquetas

Esencia del HTMLAunque existen algunas excepciones en general las etiquetas se indican por pares y se forman de la siguiente manera

bull Etiqueta de apertura caraacutecter lt seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

bull Etiqueta de cierre caraacutecter lt seguido del caraacutecter seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

HTMLAsiacute la estructura tiacutepica de las etiquetas HTML es

ltnombre_etiquetagt ltnombre_etiquetagt

HTMLAdemaacutes de HTML existen muchos otros lenguajes de etiquetas como XML SGML DocBook y MathML

HTMLbull Las paacuteginas HTML se dividen en dos partes la cabecera y el

cuerpo La cabecera incluye informacioacuten sobre la propia paacutegina como por ejemplo su tiacutetulo y su idioma El cuerpo de la paacutegina incluye todos sus contenidos como paacuterrafos de texto e imaacutegenes

HTMLEl cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la uacutenica excepcioacuten del tiacutetulo de la paacutegina que los navegadores muestran como tiacutetulo de sus ventanas)

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Oriacutegenesbull Uno de los retos iniciales a los que se tuvo que enfrentar la

informaacutetica fue el de coacutemo almacenar la informacioacuten en los archivos digitales

bull Como los primeros archivos soacutelo conteniacutean texto sin formato la solucioacuten utilizada era muy sencilla se codificaban las letras del alfabeto y se transformaban en nuacutemeros Asiacute nacioacute la codificacioacuten ASCII

Oriacutegenesbull Una vez resuelto el problema de almacenar el texto simple se

presenta el reto de almacenar los contenidos de texto con formato

bull En otras palabras iquestcoacutemo se almacena un texto en negrita iquesty un texto de color rojo iquesty otro texto azul en negrita y subrayado

Esencia del HTMLltparrafogtContenido de texto con ltimportantegtalgunas palabrasltimportantegt resaltadas de forma especialltparrafogt

El principio de un paacuterrafo se indica mediante la palabra ltparrafogt y el final de un paacuterrafo se indica mediante la palabra ltparrafogt De la misma manera para asignar maacutes importancia a ciertas palabras del texto se encierran entre ltimportantegt y ltimportantegt

Esencia del HTMLEl proceso de indicar las diferentes partes que componen la informacioacuten se denomina marcado (markup en ingleacutes) Cada una de las palabras que se emplean para marcar el inicio y el final de una seccioacuten se denominan etiquetas

Esencia del HTMLAunque existen algunas excepciones en general las etiquetas se indican por pares y se forman de la siguiente manera

bull Etiqueta de apertura caraacutecter lt seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

bull Etiqueta de cierre caraacutecter lt seguido del caraacutecter seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

HTMLAsiacute la estructura tiacutepica de las etiquetas HTML es

ltnombre_etiquetagt ltnombre_etiquetagt

HTMLAdemaacutes de HTML existen muchos otros lenguajes de etiquetas como XML SGML DocBook y MathML

HTMLbull Las paacuteginas HTML se dividen en dos partes la cabecera y el

cuerpo La cabecera incluye informacioacuten sobre la propia paacutegina como por ejemplo su tiacutetulo y su idioma El cuerpo de la paacutegina incluye todos sus contenidos como paacuterrafos de texto e imaacutegenes

HTMLEl cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la uacutenica excepcioacuten del tiacutetulo de la paacutegina que los navegadores muestran como tiacutetulo de sus ventanas)

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Oriacutegenesbull Una vez resuelto el problema de almacenar el texto simple se

presenta el reto de almacenar los contenidos de texto con formato

bull En otras palabras iquestcoacutemo se almacena un texto en negrita iquesty un texto de color rojo iquesty otro texto azul en negrita y subrayado

Esencia del HTMLltparrafogtContenido de texto con ltimportantegtalgunas palabrasltimportantegt resaltadas de forma especialltparrafogt

El principio de un paacuterrafo se indica mediante la palabra ltparrafogt y el final de un paacuterrafo se indica mediante la palabra ltparrafogt De la misma manera para asignar maacutes importancia a ciertas palabras del texto se encierran entre ltimportantegt y ltimportantegt

Esencia del HTMLEl proceso de indicar las diferentes partes que componen la informacioacuten se denomina marcado (markup en ingleacutes) Cada una de las palabras que se emplean para marcar el inicio y el final de una seccioacuten se denominan etiquetas

Esencia del HTMLAunque existen algunas excepciones en general las etiquetas se indican por pares y se forman de la siguiente manera

bull Etiqueta de apertura caraacutecter lt seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

bull Etiqueta de cierre caraacutecter lt seguido del caraacutecter seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

HTMLAsiacute la estructura tiacutepica de las etiquetas HTML es

ltnombre_etiquetagt ltnombre_etiquetagt

HTMLAdemaacutes de HTML existen muchos otros lenguajes de etiquetas como XML SGML DocBook y MathML

HTMLbull Las paacuteginas HTML se dividen en dos partes la cabecera y el

cuerpo La cabecera incluye informacioacuten sobre la propia paacutegina como por ejemplo su tiacutetulo y su idioma El cuerpo de la paacutegina incluye todos sus contenidos como paacuterrafos de texto e imaacutegenes

HTMLEl cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la uacutenica excepcioacuten del tiacutetulo de la paacutegina que los navegadores muestran como tiacutetulo de sus ventanas)

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Esencia del HTMLltparrafogtContenido de texto con ltimportantegtalgunas palabrasltimportantegt resaltadas de forma especialltparrafogt

El principio de un paacuterrafo se indica mediante la palabra ltparrafogt y el final de un paacuterrafo se indica mediante la palabra ltparrafogt De la misma manera para asignar maacutes importancia a ciertas palabras del texto se encierran entre ltimportantegt y ltimportantegt

Esencia del HTMLEl proceso de indicar las diferentes partes que componen la informacioacuten se denomina marcado (markup en ingleacutes) Cada una de las palabras que se emplean para marcar el inicio y el final de una seccioacuten se denominan etiquetas

Esencia del HTMLAunque existen algunas excepciones en general las etiquetas se indican por pares y se forman de la siguiente manera

bull Etiqueta de apertura caraacutecter lt seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

bull Etiqueta de cierre caraacutecter lt seguido del caraacutecter seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

HTMLAsiacute la estructura tiacutepica de las etiquetas HTML es

ltnombre_etiquetagt ltnombre_etiquetagt

HTMLAdemaacutes de HTML existen muchos otros lenguajes de etiquetas como XML SGML DocBook y MathML

HTMLbull Las paacuteginas HTML se dividen en dos partes la cabecera y el

cuerpo La cabecera incluye informacioacuten sobre la propia paacutegina como por ejemplo su tiacutetulo y su idioma El cuerpo de la paacutegina incluye todos sus contenidos como paacuterrafos de texto e imaacutegenes

HTMLEl cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la uacutenica excepcioacuten del tiacutetulo de la paacutegina que los navegadores muestran como tiacutetulo de sus ventanas)

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Esencia del HTMLEl proceso de indicar las diferentes partes que componen la informacioacuten se denomina marcado (markup en ingleacutes) Cada una de las palabras que se emplean para marcar el inicio y el final de una seccioacuten se denominan etiquetas

Esencia del HTMLAunque existen algunas excepciones en general las etiquetas se indican por pares y se forman de la siguiente manera

bull Etiqueta de apertura caraacutecter lt seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

bull Etiqueta de cierre caraacutecter lt seguido del caraacutecter seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

HTMLAsiacute la estructura tiacutepica de las etiquetas HTML es

ltnombre_etiquetagt ltnombre_etiquetagt

HTMLAdemaacutes de HTML existen muchos otros lenguajes de etiquetas como XML SGML DocBook y MathML

HTMLbull Las paacuteginas HTML se dividen en dos partes la cabecera y el

cuerpo La cabecera incluye informacioacuten sobre la propia paacutegina como por ejemplo su tiacutetulo y su idioma El cuerpo de la paacutegina incluye todos sus contenidos como paacuterrafos de texto e imaacutegenes

HTMLEl cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la uacutenica excepcioacuten del tiacutetulo de la paacutegina que los navegadores muestran como tiacutetulo de sus ventanas)

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Esencia del HTMLAunque existen algunas excepciones en general las etiquetas se indican por pares y se forman de la siguiente manera

bull Etiqueta de apertura caraacutecter lt seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

bull Etiqueta de cierre caraacutecter lt seguido del caraacutecter seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el caraacutecter gt

HTMLAsiacute la estructura tiacutepica de las etiquetas HTML es

ltnombre_etiquetagt ltnombre_etiquetagt

HTMLAdemaacutes de HTML existen muchos otros lenguajes de etiquetas como XML SGML DocBook y MathML

HTMLbull Las paacuteginas HTML se dividen en dos partes la cabecera y el

cuerpo La cabecera incluye informacioacuten sobre la propia paacutegina como por ejemplo su tiacutetulo y su idioma El cuerpo de la paacutegina incluye todos sus contenidos como paacuterrafos de texto e imaacutegenes

HTMLEl cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la uacutenica excepcioacuten del tiacutetulo de la paacutegina que los navegadores muestran como tiacutetulo de sus ventanas)

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HTMLAsiacute la estructura tiacutepica de las etiquetas HTML es

ltnombre_etiquetagt ltnombre_etiquetagt

HTMLAdemaacutes de HTML existen muchos otros lenguajes de etiquetas como XML SGML DocBook y MathML

HTMLbull Las paacuteginas HTML se dividen en dos partes la cabecera y el

cuerpo La cabecera incluye informacioacuten sobre la propia paacutegina como por ejemplo su tiacutetulo y su idioma El cuerpo de la paacutegina incluye todos sus contenidos como paacuterrafos de texto e imaacutegenes

HTMLEl cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la uacutenica excepcioacuten del tiacutetulo de la paacutegina que los navegadores muestran como tiacutetulo de sus ventanas)

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HTMLAdemaacutes de HTML existen muchos otros lenguajes de etiquetas como XML SGML DocBook y MathML

HTMLbull Las paacuteginas HTML se dividen en dos partes la cabecera y el

cuerpo La cabecera incluye informacioacuten sobre la propia paacutegina como por ejemplo su tiacutetulo y su idioma El cuerpo de la paacutegina incluye todos sus contenidos como paacuterrafos de texto e imaacutegenes

HTMLEl cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la uacutenica excepcioacuten del tiacutetulo de la paacutegina que los navegadores muestran como tiacutetulo de sus ventanas)

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HTMLbull Las paacuteginas HTML se dividen en dos partes la cabecera y el

cuerpo La cabecera incluye informacioacuten sobre la propia paacutegina como por ejemplo su tiacutetulo y su idioma El cuerpo de la paacutegina incluye todos sus contenidos como paacuterrafos de texto e imaacutegenes

HTMLEl cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la uacutenica excepcioacuten del tiacutetulo de la paacutegina que los navegadores muestran como tiacutetulo de sus ventanas)

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HTMLEl cuerpo (body) contiene todo lo que el usuario ve en su pantalla y la cabecera (head) contiene todo lo que no se ve (con la uacutenica excepcioacuten del tiacutetulo de la paacutegina que los navegadores muestran como tiacutetulo de sus ventanas)

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HTML define 91 etiquetas que los disentildeadores pueden utilizar para marcar los diferentes elementos que componen una paacutegina

a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

De todas las etiquetas disponibles las siguientes se consideran obsoletas y no se pueden ni deben utilizar

applet basefont center dir font isindex menu s strike u

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

A pesar de que se trata de un nuacutemero de etiquetas muy grande no es suficiente para crear paacuteginas complejas Algunos elementos como imaacutegenes y enlaces requieren cierta informacioacuten adicional para estar completamente definidos

La etiqueta ltagt por ejemplo se emplea para incluir un enlace en una paacutegina Utilizando soacutelo la etiqueta ltagt no es posible establecer la direccioacuten a la que apunta cada enlace Como no es viable crear una etiqueta por cada enlace diferente la solucioacuten consiste en personalizar las etiquetas HTML mediante cierta informacioacuten adicional llamada atributos

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Elementos HTMLAdemaacutes de etiquetas y atributos HTML define el teacutermino elemento para referirse a las partes que componen los documentos HTML Eacuteste estaacute formado por

Una etiqueta de apertura Cero o maacutes atributos Texto encerrado por la etiqueta Una etiqueta de cierre

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

El texto encerrado por la etiqueta es opcional ya que algunas etiquetas de HTML no pueden encerrar ninguacuten texto El siguiente esquema muestra un elemento HTML formado por una etiqueta ltpgt atributos y contenidos de texto

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HTML Reglas baacutesicasEtiquetas (tags) apertura ltxxxgt cierre ltxxxgt

ltpgt helliphellip ltpgt

Atributos Modifican la funcionalidad de las tagsltbody bgcolorgt

Valores Definen el valor del atributo ltp align=centergtltPgt

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Estructura Generallthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Estructura Generalhead

Contiene las etiquetas TITLE META los scripts y las hojas

de estilo (CSS)

body

Contiene el contenido que ve el usuario en una pagina web

textos imaacutegenes tablas enlaces formularios

lthtmlgt ltheadgt lttitlegtTiacutetulo de la paacuteginalttitlegt Aquiacute van otras etiquetas como las META scripts y estilos ltheadgtltbodygtAquiacute va lo que se mostraraacute en pantalla del documento HTMLltbodygtlthtmlgt

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Entre las etiquetas lthtmlgt y ltheadgt se suelen colocar otras opcionales como por ejemplo

ltmeta name=description content=ldquoxxxgtltmeta name=keywords content=ldquoabcdefgtltmeta http-equiv=Content-Typeldquo content=texthtmlcharset=ISO-8859-1gt

bull En este caso las etiquetas le indican a los buscadores el contenido de nuestras paacuteginas (description) y algunas palabras clave (keywords) para su localizacioacuten

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HEAD CABECERAbull La cabecera es la seccioacuten comprendida entre ltheadgt y

ltheadgt

bull Dentro de la cabecera tambieacuten se suele incluir coacutedigo en JavaScript y CSS (Hojas de Estilo) que se reconocen porque va comprendido entre las etiquetas

ltscript language=JavaScriptgtltndash Aquiacute iriacutea el coacutedigo --gtltscriptgt

ltlink href=estilocss rel=stylesheet type=textcssgt

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

BODY CUERPObull El cuerpo (body) del documento html es donde debemos

colocar el contenido de nuestra paacutegina texto fotos etc

Atributos de ldquobodyrdquobgcolor - color de fondo de la paacutegina Formatorrggbbltbody bgcolor=0000FFgt o ltbody bgcolor=bluegt

text - color del texto por omisioacuten Defecto negro

background - ruta y nombre de archivo (URL) de laimagen que seraacute usada como fondo del documento

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HEADERS ENCABEZADOSLos tiacutetulos o encabezados se emplean al comienzo de una seccioacuten Las etiquetas que se usan son

lth1gt Tiacutetulo lth1gtlth6gt Titulo H6 lth6gt

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

ESTILOS DE FUENTESEstilos de fuentes ndash algunos de los existentes son

ltBgtTexto en Negritaltbgt ltIgtItaacutelicaltigt ltBgtltIgtNegrita e Itaacutelicaltigt HOLAltbgt ltUgtSubrayadoltugtltEMgtEnfatizadoltemgtltSTRONGgtFuerteltstronggt

Texto en NegritaItaacutelicaNegrita e ItaacutelicaSubrayadoEnfatizadoFuerte

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Tipos y Tamantildeos de fuentes

Tamantildeos de fuentes ndash dos manerasnuacutemero del 1 al 7 (de maacutes pequentildeo a maacutes grande)1048708 ltfont size=1gt Esta es la letra maacutes pequentildea que se puedeconseguir ltfontgt1048708 referencia relativa (tamantildeo por defecto 3)1048708 ltfont size=+1gt Esto es igual que poner size=4 ltfontgt

Tipos de fuentes1048708 ltfont face=CouriergtEso se veraacute en la fuenteCourierltfontgt

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

PAacuteRRAFOS Y BLOQUESltpgt Se utiliza para que los paacuterrafos queden separados por una liacutenea en blanco

Atributos align=left align=right align=center y align=justify

ltbr gt punto y aparte No tiene etiqueta de cierre

lthr gt Se emplea para representar una liacutenea horizontal (no tiene cierre)

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Listas No Ordenadas (vintildeetas)Unordered Lists

ltulgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltulgt

bull Primer teacutermino de la listabull Segundo teacuterminobull Tercer teacutermino

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Listas Ordenadas Ordered Listsltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt

1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

ENLACES HIPERVIacuteNCULOSlta href=URLgt Texto del enlace ltagt

El texto del enlace es lo que se visualizaraacute en el navegador La URL es la direccioacuten donde redirecciona la liga

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

ENLACES HIPERVIacuteNCULOSTipos

1) Enlace a otro lugar del mismo documento (anclas)lta href=iniciogt Ir al Inicio ltagtY en el sitio exacto adonde queremos saltar debemos poner la siguienteetiqueta

2) Enlace a otra paacutegina local (relativo)lta href=ldquohtmlpagina2htmgtIr a pagina 2ltagtlta href=ldquopagina2htmgtIr a pagina 2ltagt

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

ENLACES HIPERVIacuteNCULOSTipos

3) Enlace a una paacutegina externa (absoluto)lta href=ldquohttpwwwgooglecomgtIr a GOOGLEltagt

4) Enlace a un emaillta href=ldquomailtocorreomenteinteractivacomldquogtManda emailltagt

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Imaacutegenesltimg src=URL gt (no tiene etiqueta de cierre)

ltimg src=httpwwwgrupobglcomlogojpg gt

AtributosALT=Texto que aparece al situar el cursor sobre la imagenALIGNWIDTH=80 HEIGTH=100 - Indican la anchura y altura de la imagen en piacutexelsBORDER=2 - Antildeade un borde a modo de marco a la imagenHSPACE=10 VSPACE=15 - Especifican el espacio horizontal y vertical quesepara la imagen del texto

Los mas utilizados GIF JPG y PNG en entorno Web

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

TablasltTABLEgt y ltTABLEgt son las etiquetas donde estaacute contenida la tabla

ltTRgt y ltTRgt son las etiquetas que indican el comienzo y fin de unafila (ltthgt y ltthgt si es una fila de cabecera)

ltTDgt y ltTDgt sentildealan una celda

Ejemplo

ltTABLE gt ltTRgt ltTDgt1 ltTDgt ltTDgt 2 ltTDgt ltTRgt ltTRgt ltTDgt3 ltTDgt ltTDgt 4ltTDgt ltTRgtltTABLEgt

1 2

3 4

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Tablas AtributosTablas ndash Atributos

BORDER=4 Indica el tamantildeo del borde en piacutexels en este caso 4 Si no se indicanada carece de bordeWIDTH=5 o WIDTH=50 Es el ancho de la tabla puede especificarse en valorabsoluto (5 piacutexels) o como un porcentaje (50 del ancho disponible)CELLSPACING=2 Es el espacio entre las celdas por defecto es 2CELLPADDING=5 Es el espacio entre el contenido de las celdas y el borde de lasmismas por defecto es 1ALIGN= left right centerAtributos de las etiquetas de fila y celdaWIDTH=30 Ancho de toda la fila o celda Tambieacuten se puede dar en ALIGN= left right centerVALIGN=top middle o bottom Alinea el contenido verticalmente arriba en medioo abajoBGCOLOR=AACCEE Pone un fondo del color especificado a la celda o filaCOLSPAN=3 Especifica el nuacutemero de columnas que abarca la filaROWSPAN=2 Especifica el nuacutemero de filas que abarca la columna

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

El lenguaje HTML clasifica a todos los elementos en dos grupos elementos de liacutenea (inline elements) y elementos de bloque (block elements)

Los elementos de bloque siempre empiezan en una nueva liacutenea y ocupan todo el espacio disponible hasta el final de la liacutenea aunque sus contenidos no lleguen hasta el final de la liacutenea

Los elementos de liacutenea soacutelo ocupan el espacio necesario para mostrar sus contenidos

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HTML de tipo BLOCKEtiquetas de tipo bloquelth1gt ltpgt ltulgt lttablegt

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HTML de tipo BLOCKEtiquetas de tipo bloqueltdivgt

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

HTML de tipo INLINEEtiquetas de tipo inlineltbgt lttdgt ltagt ltimggt

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Enfoques para hacer layoutsbull Enfoque basado en tablasbull Enfoque basado en DIVs

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Tablas

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

DIVs

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles

Herramientas Uacutetilesbull Firebug para Firefox o Chromebull Adobe Kuler

• Slide 1
• Oriacutegenes
• Oriacutegenes (2)
• Esencia del HTML
• Esencia del HTML (2)
• Esencia del HTML (3)
• HTML
• HTML (2)
• HTML (3)
• HTML (4)
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Elementos HTML
• Slide 17
• HTML Reglas baacutesicas
• Estructura General
• Estructura General (2)
• Slide 21
• HEAD CABECERA
• BODY CUERPO
• HEADERS ENCABEZADOS
• ESTILOS DE FUENTES
• Tipos y Tamantildeos de fuentes
• PAacuteRRAFOS Y BLOQUES
• Listas No Ordenadas (vintildeetas) Unordered Lists
• Listas Ordenadas Ordered Lists
• ENLACES HIPERVIacuteNCULOS
• ENLACES HIPERVIacuteNCULOS (2)
• ENLACES HIPERVIacuteNCULOS (3)
• Imaacutegenes
• Tablas
• Tablas Atributos
• Slide 36
• HTML de tipo BLOCK
• HTML de tipo BLOCK (2)
• HTML de tipo INLINE
• Enfoques para hacer layouts
• Slide 41
• Slide 42
• Tablas (2)
• DIVs
• Herramientas Uacutetiles