orígenes uno de los retos iniciales a los que se tuvo que enfrentar la informática fue el de cómo...
TRANSCRIPT
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
HTML
bull 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
HTML
El 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
HTML
bull 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
HTML
El 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
HTML
bull 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
HTML
El 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
HTML
bull 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
HTML
El 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
HTML
bull 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
HTML
El 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
HTML
bull 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
HTML
El 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
HTML
bull 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
HTML
El 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
HTML
bull 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
HTML
El 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
bull 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
HTML
El 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
El 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 HTML
Ademaacutes 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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
AtributosModifican la funcionalidad de las tags
ltbody bgcolorgt
ValoresDefinen el valor del atributo ltp align=centergtltPgt
Estructura General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 General
lthtmlgt ltheadgt lttitlegtTiacutetulo del Documentolttitlegt ltheadgtltbodygtltbodygtlthtmlgt
Estructura General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 General
headContiene 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 FUENTES
Estilos 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 Lists
ltolgt ltligtPrimer teacutermino de la listaltligt ltligtSegundo teacuterminoltligt ltligtTercer teacuterminoltligtltolgt
1 Primer teacutermino de la lista2 Segundo teacutermino3 Tercer teacutermino
ENLACES HIPERVIacuteNCULOS
lta 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 layouts
bull 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 HIPERVIacuteNCULOS
lta 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 layouts
bull 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 layouts
bull 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 layouts
bull 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 layouts
bull 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 layouts
bull 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 layouts
bull 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 layouts
bull 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 layouts
bull 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 layouts
bull 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 layouts
bull 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 layouts
bull 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
-