HTML/CSS( Mi(primera(página(

Tamaño: px
Comenzar la demostración a partir de la página:

Download "HTML/CSS( Mi(primera(página("

Transcripción

1 HTML/CSS Miprimerapágina

2 QuéesHTML Esunlenguajedemarcasparaformateary estructurarundocumento,quepuedeleerseen cualquiernavegador. <html> </html> EstandarizadoenlanormaISOdeSGML StandardGeneralizedMarkupLenguage). ElW3Cdesarrollaespecificacionestécnicasy directrices,deformaquesepuedaaseguraruna altacalidadtécnicayeditorial.

3 EstructuraHTML UndocumentoHTMLKenetreseKquetasquedescribenla estructurageneraldeundocumentoydanunainformaciónsencilla sobreél.<html>,<head>y<body> LaseKquetaspuedenescribirsetantoenmayúsculascomoen minúsculas,peroserecomiendaelusodeminúsculas:<html>o <HTML>,<body>o<BODY> Editor Visualizaciónenelnavegador

4 EstructuraHTML <!doctypehtml>declaraundocumentohtml5paraquese visualicecorrectamente. DoctypecomienzaauKlizarseenHTML4.01yXHTML h\p://validator.w3.org/ <!doctypehtml>

5 EstructuraHTML <html>paraidenkficarqueestacodificadoenestelenguajey Limitar,elprincipioyelfindeldocumento. <html></html>

6 EstructuraHTML <HEAD>lacabecera,queconKeneinformaciónyrecursossobreel propiodocumentoyquenoapareceeneldocumento,destacando elktulo<title>.seráelnombrequeapareceenlacabeceradel visualizadoryenlosbuscadoresdeahílaimportanciadequesea significakvo. <head></head> <Ktle></Ktle>

7 EstructuraHTML LaeKquetametadefinevariosKposdemetadatos. Elatributocharsetespecificalacodificaciónusadaennuestra página. <metacharset="character_set"> <metacharset="ude8">

8 EstructuraHTML CharsetuFG8eslaUnicodeTransformaKonFormat8ebit representaelcódigodecaracteresunicode.escompakblecon ASCII. Permitevisualizarloscaracteresdetodoslosidioma.

9 EstructuraHTML Caracteresespeciales:paraincluireneltextocaracteresquesonpropiasdel lenguajehtmlesnecesariousarsuanotacióncodificada: h\p://dev.w3.org/html5/htmleauthor/charref Espacioenblancononebreakingspace) < Menorque < > Mayorque > & Ampersand & Comillas " apóstrofo &apos;

10 EstructuraHTML <body>elcuerpoconkeneloselementosvisiblesenlapágina. Lasimágenes,losencabezados,lospárrafosdetexto,laslistas,las tablas,loshipervínculos <body></body>

11 EditoresHTML Antesdecomenzaratrabajarconuneditorespecífico,esrecomendableconocer elcódigo. Podemosusarprogramasquetrabajencontextoplano,sinañadirsuspropias marcasdeedición,enwindowselblocdenotasyenmacintosheltextedit. TextEditestápordefectoenRichTextesnecesarioconfigurarloparaqueguarde tutrabajocomoarchivosdetextoplano. LosdocumentosHTMLdebentenerlaextensiónhtmlohtm. UsaruneditorwysiwygcomoelAdobeDreamweaver)oelBlueGrifon h\p://www.bluegriffon.org/)ouneditorconayudasvisualescomoelsublime h\p://www.sublimetext.com/)nosfacilitarálascosas. VercomparaKva:h\p://en.wikipedia.org/wiki/Comparison_of_HTML_editors

12 EstructuraHTML Mi)primera)página)vistaenelprogramaBlocdeNotas

13 EstructuraHTML Mi)primera)página)vistaenelprogramaSublime.

14 EstructuraHTML Mi)primera)página)vistaenelprogramaDreamweaver.

15 LenguajeHTML UndocumentoHTMLinsertaeneltextoeTquetasquecontrolan losdiferentesaspectosdelapresentaciónylasemánkcadel contenido. Lostextoshabitualesestánformadosporencabezados<h1>, párrafos<p>,textoimportante<strong>enfakzado<em>listas <ul><li>...

16 SelectoresCSS ParaaplicarunesKlodepresentación,elselectordeelemento puedeserunaekquetahtml: p,h1,ul,li ElesKloafectaatodoelcontenidoincluidodentrodeesaeKqueta <p></p>,<h1></h1>,<ul></ul>. ElselectorpuedeaplicarseamásdeunaeKquetaHTML: elemento,elemento h1,h2,h3 Afectaaloselementos<h1>,<h2>y<h3>.

17 CSS ElesKlopuedeestarenlacabeceradelapágina,debeexpresarse enunelemento<style>dentrodelacabecera<head>del documento. Selector{ycadadeclaración:propiedad:valor;}

18 RecursosHTML MDN:ListadeElementosHTML5 h\ps://developer.mozilla.org/es/docs/html/html5/html5_lista_elementos W3C:HTML5elements h\p://dev.w3.org/html5/markup/elements.html WoorkUp:HTML5tagreference h\p://woorkup.com/wpecontent/uploads/2009/12/html5evisualecheate Sheet1.pdf

19 HTML/CSS Findeltema

20 Ejercicio 1.eRealizarconeditordetextoplano,KpoBlocdeNotaslaprimerapáginaWeb: <!doctypehtml> <html> <head> <metacharset="ude8"> <Ktle>Miprimerapágina</Ktle> </head> <body> Miprimerapáginaweb </body> </html> 2.eGuárdaloconextensión.html 3.eCompruebaenelnavegadorelficheroqueacabasdecrear.

21 Ejercicio 1.eEsobligatorioespecificareljuegodecaracteres"charset"enHTML5 a)sib)no 2.eEscorrectoemplearmayúsculasenlaseKquetasHTML,<HEAD><BODY>... a)sib)no 3.eElKpodedocumentoseescribeantesodespuésdeliniciodelaeKqueta <html> a)antes<!doctypehtml><html>b)después<html><!doctypehtml> 4.elaeKqueta<Ktle>seescribe: a)antesdel<head>b)dentrodel<head>c)dentrodel<body> 5.eladeclaración:<!doctypehtml>define: a)cualquierversióndedocumentohtmlb)undocumentoenhtml5

22 EjercicioeSoluciones 1.eEsobligatorioespecificareljuegodecaracteres"charset"enHTML5 a)sib)nob 2.eEscorrectoemplearmayúsculasenlaseKquetasHTML,<HEAD><BODY>... a)sib)noa 3.eElKpodedocumentoseescribeantesodespuésdeliniciodelaeKqueta <html> a)antes<!doctypehtml><html>b)después<html><!doctypehtml>a 4.elaeKqueta<Ktle>seescribe: a)antesdel<head>b)dentrodel<head>c)dentrodel<body>b 5.eladeclaración:<!doctypehtml>define: a)cualquierversióndedocumentohtmlb)undocumentoenhtml5b

23 HTML/CSS Marcasbásicas

24 HTML Lasmarcasdetextoenhtml,seempleanparaelestructurado* semán.co*del*contenido. Lostextoshabitualesestánformadosporpárrafos,palabrasen negritaocursiva,anotacionesycorrecciones,citasaotros documentosexternos... * Marcado*básico:* <p></p>*apárrafo <em></em>*adaénfasisaltextoqueencierra <strong></strong>*amáximaimportanciaaltextoqueencierra LaseDquetas<b>*paralaboldonegritaylaeDqueta*<i>*paralaitálicaocursiva, sonsimilaresvisualmente,perosinsignificadosemándco. hfp://www.w3.org/wiki/html/elements/b

25 CSS EllenguajedemarcasHTML,estáorientadoaladefinicióndela estructuraylasemándcadeldocumentoynoasurepresentación gráfica. CSScontrolaelaspectográficodeldocumentomediantehojasde esdlostylesheets),indicandoalnavegadorcomosedeben visualizarloselementosdeundocumentohtml.asíseconsigue separarelaspectodelcontenido. Proyectocss*Zen*Garden: hfp://www.mezzoblue.com/zengarden/alldesigns/

26 CSS CadaeDquetaHTMLDeneunosvaloresdeCSSpordefecto,que puedenvariarsegúnelnavegador,quetendremosquemodificar connuestrosesdlospersonales. Visualizaciónvalorespor defectocssenelnavegador

27 HTML EjemplovaloresCSSpordefectodelnavegador,de:h1,*p,*strong,* em.* h1{ display:block; fontasize:2em; marginabefore:0.67em; marginaazer:0.67em; marginastart:0; marginaend:0; fontaweight:bold;} p{ display:block; marginabefore:1em; marginaazer:1em; marginastart:0; marginaend:0;} strong{ fontaweight:bold;} em{ fontastyle:italic;}

28 CSS Másinformaciónvalorespordefecto: W3C:* hfp://dev.w3.org/html5/markup/elements.html * Internet*Explorer:** hfp://www.iecss.com/ * Firefox:* hfp://mxr.mozilla.org/mozillaacentral/source/layout/style/html.css * Chrome,*Safari:* hfp://trac.webkit.org/browser/trunk/source/webcore/css/html.css * Opera* hfp://www.iecss.com/operaa10.51.css

29 CSS LaprimeraformadeañadirelesDloCSSaundocumentoHTMLes conelementosen*línea,*eselmétodomássencillo,añadiendoun atributostyleenelelementoconcretodentrodelapágina.*nose puedenreudlizarparavarioselementosquecompartenlasmismas propiedades. SeescribenlaspropiedadesdelesDloenlasmarcasdelHTMLcomo "nombre:valor"separadasporpuntoycoma. <body style="color: red; "> <p style="font-size: 16px; color: blue; font-family: Arial, Helvetica, sans-serif;"> Mi primera página</p>

30 CSS LasegundaformaañadeelesDloCSSenunbloque<style>*en*la cabecera*<head>)yaplicaelesdloavarioselementosdelapág.. CadaelementoHTMLDeneunacaja*asociada,dondeaplicanlos comandosdeesdlocss.elcolordefondoaplicadoacada elementohtmldelejemplo,muestralacajaasociadaacadauno.

31 CSS Lomásaconsejableparamantenerlaseparaciónentrecontenidoy presentación,enunahojadeesdlocssseparadadelhtml,quese importaconunelemento<link>enlacabecera.

32 CSS Laprincipalventajaesquelashojas deesdlosonaplicablesaunaoa muchaspáginas.permiteademás adaptarlapresentaciónapcs, móviles,tabletasoimpresorascon elatributomediaqueacdvaráel esdloespecíficodecadadisposidvo. <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link href= estilo.css" rel="stylesheet" type="text/css" media="min-width:380px)"> hfp://www.w3.org/tr/css3amediaqueries/

33 CSS Formato*de*las*normas*y*comandos*de*es.lo* * * ElesDlosedefineentrellaves"{"y"}";elselectordeterminasobre queelementoshtmlaplicaelesdlo,cadabloquededeclaración: {declaración;*declaración}*separadasporpuntoycoma";". Cadadeclaración:propiedad*:*valor,fijaunvalorparauna propiedaddeles:lo). H1 {color : green; text-align : center}

34 HTML Listas:* <ul></*ul*>*adefinelistas,noordenadas. <ol></*ol*>*adefinelistas,ordenadas. <li></li>*adefineloselementosdelaslistas ul{ display:block; listastyleatype:disc; marginabefore:1em; marginaazer:1em; marginastart:0; marginaend:0; paddingastart:40px;} ol{ display:block; listastyleatype:decimal; marginabefore:1em; marginaazer:1em; marginastart:0; marginaend:0; paddingastart:40px;}

35 TextoHTML Citas:*<blockquote></*blockquote*>*Acitastextualesdeuntexto externo. Elatributocite="url"AIndicaladireccióndelapáginaweboriginal delaqueseextraelacita. blockquote{ display:block; marginabefore:1em; marginaazer:1em; marginastart:40px; marginaend:40px;}

36 TextoHTML Texto*preformateado:* <pre></*pre*>*amandeneelaspectovisual,loselementoenblanco semandenenigualqueeneltextooriginal. pre{ display:block; fontafamily:monospace; whiteaspace:pre; margin:1em0;}

37 TextoHTML Abreviatura*y*acrónimo:* <abbr></abbr>*aparaindicarelsignificadodeunaabreviaturaoun acrónimo.

38 TextoHTML Salto*de*línea:* <br>*asaltodelíneaeneltexto,sinlosmárgenesdefinidosparael párrafo. Pocasveceshayqueusarunsaltodelínea:Unapoesía,unlistado delcódigo,cuandocadalíneanoesunpárrafoporsísola.

39 TextoHTML Superíndices*y*subíndices:* <sup></sup>** <sub></sub>*aparaedquetareltextocomosuperosubíndices. sub{ verdcalaalign:sub; fontasize:smaller;} sup{ verdcalaalign:super; fontasize:smaller;}

40 TextoHTML code:* <code></code>*apararepresentarfragmentosdecódigo informádco. Valorespordefecto: code{ fontafamily:monospace;} Otras*marcas*de*texto:* Textoborrado<del>*einsertado<ins>*enundocumento. Listasdedefiniciones<dl>,*<dt>*y<dd>*

41 Tabla LastablassedefinenconlaseDquetas<table>,*<tr>*paracadafilay <td>*paracadacolumna<th>indicaqueunaceldaeslacabecera.

42 TablaCSS

43 TextoHTML LIBROS*WEB:*Marcadobásicodetexto hfp://librosweb.es/xhtml/capitulo_3/ marcado_basico_de_texto.html Con*Clase:**Texto hfp://html.conclase.net/w3c/html401aes/struct/text.html MDN:*CSS hfps://developer.mozilla.org/enaus/docs/web/css

44 HTML/CSS Findeltema

45 Ejercicio 1.AEnelarchivocreadoenelejercicioanterior"laprimerapáginaWeb",cambiar elcolordelfondo,delafuente,lafamiliadpográficayeltamaño.

46 Ejercicio 1.ALosvaloresdeesDlosCSSpordefectodelnavegador,sonigualesentodoslosnavegadores a)sib)no 2.AQueesmásaconsejable,queelesDloesteenlalíneaoenlacabeceradeldocumento. a)enlalíneab)enlacabecera 3.AQueesmásaconsejable,queelesDloesteenlacabeceradeldocumentooenarchivoCSSaparte. a)enlacabecerab)enhojadeesdlocssaparte 4.ElusodelosesDlosCSSenlalíneadelHTML, estádesaconsejado? a)sib)no 5.A PuedehaberesDlosdiferentesdependiendodeldisposiDvo?. a)sib)noc)si,sielesdlocssseaplicaenlalíneadelhtml 6.AlaeDqueta<th>representa: a)unaceldaimportantedelatablab)unaceldadelatablac)unaceldaqueescabeceradelatabla 7.ALaeDqueta<em>daénfasisaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoredondad)comonegrita 8.ALaeDqueta<strong>damáximaimportanciaaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoversalitad)comonegrita 9.ALaslistasdeinformaciónnoordenadasseidenDficanconlaeDqueta: a)<ul>b)<ol>c)<dl> 10.ALaeDqueta<blockquote>seempleaparatratar: a)parabloquesdetextob)enpárrafossangradosc)pararepresentarcitasd)pararepresentar fragmentosdecódigoinformádco

47 EjercicioASoluciones 1.ALosvaloresdeesDlosCSSpordefectodelnavegador,sonigualesentodoslosnavegadores a)sib)nob 2.AQueesmásaconsejable,queelesDloesteenlalíneaoenlacabeceradeldocumento. a)enlalíneab)enlacabecerab 3.AQueesmásaconsejable,queelesDloesteenlacabeceradeldocumentooenarchivoCSSaparte. a)enlacabecerab)enhojadeesdlocssaparteb 4.ElusodelosesDlosCSSenlalíneadelHTML, estádesaconsejado? a)sib)noa 5.A PuedehaberesDlosdiferentesdependiendodeldisposiDvo?. a)sib)noc)si,sielesdlocssseaplicaenlalíneadelhtmla 6.AlaeDqueta<th>representa: a)unaceldaimportantedelatablab)unaceldadelatablac)unaceldaqueescabeceradelatablac 7.ALaeDqueta<em>daénfasisaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoredondad)comonegritab 8.ALaeDqueta<strong>damáximaimportanciaaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoversalitad)comonegritad 9.ALaslistasdeinformaciónnoordenadasseidenDficanconlaeDqueta: a)<ul>b)<ol>c)<dl>a 10.ALaeDqueta<blockquote>seempleaparatratar: a)parabloquesdetextob)enpárrafossangradosc)pararepresentarcitasd)pararepresentar fragmentosdecódigoinformádcoc

48 HTML Estructura

49 EstructuraHTML Loselementoshtmlpuedenvisualizarsecomobloqueocomoenlínea. Loselementosbloquesblockocupantodoelanchodelapáginayfuerzanauna nuevalíneaantesydespués. <article> <aside> <canvas> <div> <footer> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <header> <p> <pre> <section> <ul> hbps://developer.mozilla.org/eneus/docs/html/blockelevel_elements Loselementosenlíneainlinesóloocupanelanchonecesarioynofuerzan nuevaslíneas. <em> <a> <br> <img> <span> <button> <input> <select> <textarea> hbps://developer.mozilla.org/eneus/docs/html/inline_elements

50 EstructuraHTML DIV, Elelemento<div>esunelementodebloquequeseemplea contenerensuinteriorotroselementoshtml. Elelemento<div>,noLeneningúnsignificado,essemánLcamente neutro. EmpleandoCSS,elelemento<div>,sepuedeuLlizarpara estructurareldocumentoengrandesbloquesdecontenido. EldiveslapropuestaparasusLtuiraloselementos<table>,parael diseño.elpropósitodelelemento<table>,esparamostrardatos tabulados.

51 <div> <div>definebloqueungenéricoempleadoparaformatearconcss. <div,id="caja" class="cabecera">,.,</div> AtributoID:idenLficaunívocamenteunelementoHTMLenuna página.unelementohtmlsolodebetenerunatributoidyeste debeserúnicoenlapágina.elselectorcsscaja,serefiereal elementoconatributoid="caja,comoencaja,{color:blue},, AtributoCLASS:defineunaclasedeelementosHTML.Unelemento puedetenervariosatributosclass.,elselectorcss.cabecera,se refiereatodosloselementodelaclasecabeceraquellevanel atributoclass="cabecera"),comoen.cabecera,{color:red},,,,

52 EstructuraHTML SPAN, ElelementoHTML,<span>,esunelementoenlíneaqueseemplea comouncontenedordetexto. Elelemento<span>,noLeneningúnsignificadoespecial,es semánlcamenteneutro.. CuandoseuLlizajuntocon,CSS,elelemento<span>,sepuede ullizarparaestablecerlosatributosdeeslloparalaspartesdel textomedianteunidenlficadoridounaclaseclass.

53 CSS Loselementos<DIV>y<SPAN>seempleanparadefinirnormasde esllomásespecíficas. Elatributo,id,seempleaparaidenLficarunelementoúnico. ElatributoclasscuandohaymásdeunelementoquemanLenen unarelaciónsignificalva,puedesercomparlrelesllo.

54 EstructuraHTML EnHTML5,losbloques,sonsusLtuidosporbloquessemánLcosque muestransignificadoporsimismos. <header> <nav> <seclon> <arlcle> <aside> <footer>

55 EstructuraHTML UnapáginadeesteLporealizadacon<div>,quedaríadela siguientemanera. Eshabitualunacajacontenedorparaimpedirqueocupetodalapáginacuandolaventana delanavegadoresmuygrandeocontrolarladisposicióndeloselementoscuandoesmuy pequeña. +,CSS,

56 EstructuraHTML UnapáginadeesteLporealizadaconlosnuevosbloques semánlcosdelhtml5quedaría. +,CSS,

57 EstructuraHTML LaestructuraHTML,,deberealizarseenelsenLdológicodelectura deldocumento,cuandolapáginaseveasinaplicarlosesllosno pierdasusignificado.

58 HerenciaCSS ParaentendercomofuncionanlosselectoresylaherenciaCSSes necesarioentenderquéeselárboldeldocumento.

59 HerenciaCSS elárboldeldocumentodelejemploanterior: html head body Ltle div.caja header nav arlcle footer h1 ul li li li a a a

60 HerenciaCSS Ancestoresunelementoconectadoperomásarribaenla estructuradeldocumento html head body Ltle div.caja Ancestor header nav arlcle footer h1 ul descendientes li li li, a a a

61 HerenciaCSS Descendientessonloselementosconectadosperomásabajoenla estructuradeldocumento. html head body Ltle div.caja Ancestor header nav arlcle footer h1 ul descendientes li li li, a a a

62 HerenciaCSS Parenteselelementoconectadoydirectamentesobreun elementoenlaestructuradeldocumento. html head body Ltle div.caja header nav arlcle footer h1 ul Parent descendientes li li li, a a a

63 HerenciaCSS Childeselelementoconectadoydirectamentedebajodeun elementoenlaestructuradeldocumento. html head body Ltle div.caja Child header nav arlcle footer h1 ul li li li a a a

64 HerenciaCSS Siblings,sonloselementosquecompartenunmismopadreenla estructuradeldocumento. html head body Ltle div.caja header nav arlcle footer h1 ul Parent Siblings li li li,

65 HerenciaCSS SidefinimosunesLloenelbody,todosloselementossituados debajoenelárboldeldocumento,heredanesapropiedad.

66 HTML Findeltema

67 Ejercicio RealizaunesquemasencillodeestedocumentoHTMLasuestructuraLpoárbol,queresumabrevementelas relacionesdirectasentreelementosdelapágina,clarificandolajerarquíadelárbol. <!doctypehtml> <html> <head> <metacharset="u_e8"> <Ltle>Ejercicioopcionalárbol</Ltle> </head> <body> <header> <imgsrc="logolpo.jpg"alt="firefoxlogo"width="100"height="100"> </header> <nav> <ul> <li>menú1</li> <li>menú2</li> <li>menú3</li> </ul> </nav> <arlcle> <h1>titulardenivel1</h1> <p>contenidodelapágina</p> </arlcle> <footer>piedepágina</footer> </body> </html>

68 Ejercicio 1.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<h1>b)<hr>c)<span>d)<p> 2.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<p>b)<hr>c)<ul>d)<strong> 3.ECuáldelassiguienteseLquetasNOesenlíneainline: a)<em>b)<span>c)<pre>d)<a> 5.ECuáldelassiguienteeLquetadeestructuranoessemánLcaHTML5 a)<header>b)<seclon>c)<pie>d)<aside> AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul></body></html> 6.ElaeLquetaulseriael"parent"de: a)bodyb)elpropioulc)loslid)html 7.Ebodyes"ancestor"deLtle: a)sib)no AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul> <p>estoesunpárrafo</p></body></html> 8.ElaeLqueta,pseriaelhijo"child"de: a)bodyb)ulc)elúllmolid)detodoslosanteriores 9.ElaeLquetas,serianhermanos"siblings": a)lostreslib)lostresliyelpc)uld)lasrespuestasaybsoncorrectas 10.ECuáldelassiguientesafirmacionesesincorrecta a)uleshijo"child"debodyb)peshijo"child"debodyc)peshijo"child"deuld)lieshijo"child"deul

69 EjercicioESoluciones 1.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<h1>b)<hr>c)<span>d)<p>c 2.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<p>b)<hr>c)<ul>d)<strong>d 3.ECuáldelassiguienteseLquetasNOesenlíneainline: a)<em>b)<span>c)<pre>d)<a>c 5.ECuáldelassiguienteeLquetadeestructuranoessemánLcaHTML5 a)<header>b)<seclon>c)<pie>d)<aside>c AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul></body></html> 6.ElaeLquetaulseriael"parent"de: a)bodyb)elpropioulc)loslid)htmlc 7.Ebodyes"ancestor"deLtle: a)sib)nob AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul> <p>estoesunpárrafo</p></body></html> 8.ElaeLqueta,pseriaelhijo"child"de: a)bodyb)ulc)elúllmolid)detodoslosanterioresa 9.ElaeLquetas,serianhermanos"siblings": a)lostreslib)lostresliyelpc)uld)lasrespuestasaybsoncorrectasa 10.ECuáldelassiguientesafirmacionesesincorrecta a)uleshijo"child"debodyb)peshijo"child"debodyc)peshijo"child"deuld)lieshijo"child"deulc

70 CSS Prioridad

71 SelectoresCSS ElselectoraplicaatodosloselementosHTMLdelapáginaconesa e9quetap). Elselectormúl+pledeCSS,incluyevariosselectoresseparadospor coma,),aplicandoeles9loacualquierelementoconalgunadelas marcasincluidas:h1,h2,h3. Elselectorpuedeincluire9quetasseparadassoloporespacios.El selectoraplicarásoloaelementosconlaúl9mamarcaul),conlos anteriorescomoancestros,esdecir.cajadeberáserancestrode navynavdeberáserancestrodeul.

72 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=0ID C=0clases D=1elemento Puntuación=0,0,0,1 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

73 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=0ID C=0clases D=2marcas Puntuación=0,0,0,2 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

74 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=1ID C=1clase D=1elemento Puntuación=0,1,1,1 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

75 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=1ID C=0clases D=2marcas Puntuación=0,1,0,2 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

76 PrioridadCSS Laganadoraes,caja.cabecerah1=0,1,1,1 Ganadora: A=0es9losenlínea B=1ID C=1clase D=1elemento Puntuación=0,1,1,1

77 PrioridadCSS Cuandodosdeclaraciones9enenelmismovalor: Serálaúl9maespecificada

78 SelectoresCSS Selectoruniversal * Afectaatodosloselementos.

79 ReglasCSS Modificacióndees9los,porelusuarioenelnavegador:9pograYas

80 PrioridadCSS ReglasadicionalesdeprioridaddelasdeclaracionesCSSordenadas demenoramayor: CSSpordefectodelNavegadornavegador) CSSenpreferenciasdeusuariodelnavegadorusuario) CSSenpáginaHTMLoscriptCSSdiseñador) CSSenpáginaHTMLoscriptCSScon!importantdiseñador),p.e. body{color:blue!important;} CSSenpreferenciasdeusuariodelnavegadorcon!important usuario),p.e.body{color:blue!important;}

81 RecursosCSS KsesoCSS:CSSbásico:Cascada,especificidadyherencia h\p://ksesocss.blogspot.com/2012/05/css`basico`cascada`especificidad`y.html Dev.Opera:RecorriendoelárbolDOM h\p://dev.opera.com/ar9cles/view/traversing`the`dom`es/ LIBROSWEB:Árboldenodo h\p://librosweb.es/javascript/capitulo_5/arbol_de_nodos.html UOC:Herenciaycascada h\p://mosaic.uoc.edu/ac/le/es/m6/ud2/ LIBROSWEB:Colisionesdees9los h\p://librosweb.es/css/capitulo_2/colisiones_de_es9los.html CSS:SpecifityWars h\p://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

82 RecursosHTML BruceLawson:HTML5ar9clesandsec9ons:what sthedifference? h\p://www.brucelawson.co.uk/2010/html5`ar9cles`and`sec9ons` whats`the`difference/ html5doctor:thear9cleelement h\p://html5doctor.com/the`ar9cle`element/ HTM5pasoapaso:div,sec9onyar9cle h\p://html5pasoapaso.blogspot.com.es/2011/08/div`sec9on`y` ar9cle.html ondho:html5discusionesentrear9cleysec9on) h\p://www.ondho.com/html5`discusiones`entre`ar9cle`y`sec9on/

83 CSS Findeltema

84 Ejercicio RealizarenelsiguienteHTML5declaracionesdees9loCSSqueafectenalmismoelemento,el9tularh1,con diferentespuntuacionesdeprioridad,eindicarsupuntuacióncomouncomentarioenelpropiohtml: <!doctype html> <html> <head> <meta charset="utf-8"> <title>herencia</title> </head> <body> <div id="caja"> <header class="cabecera"> <h1>cabecera: header</h1> </header> </div> </body> </html>

85 Ejercicio QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9lopordefectodelnavegador`h2{color:black;}2.`Es9lofijadoporeldiseñador`h2{color:green;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9lopordefectodelnavegador`h2{color:black;}2.`Es9lofijadoporelusuario`h2{color:green;} 3.`Es9loenhojaCSSexternaoenelHead`h2{color:blue;}4.`Es9loenhojaCSSexternaoenelHead`h2 {color:lime!important;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`h2.news{color:green;}2.`Es9loenhojaCSSexternaoenelHead `h2{color:blue;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`h2{color:blue;}2.`EnlalíneasiguientedelCSS`h2{color: purple;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.`Es9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.`es9loenhojacssexternaoenelhead`h2{color:blue;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.`Es9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.`es9loenhojacssexternaoenelhead`h2{color:blue;}4.`es9loenhojacss externaoenelhead`h2{color:purple;}5.`es9loenhojacssexternaoenelhead`divcajah2{color: black;}

86 Ejercicio`Soluciones QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9lopordefectodelnavegador`h2{color:black;}2.`Es9lofijadoporeldiseñador`h2{color:green;}2 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9lopordefectodelnavegador`h2{color:black;}2.`Es9lofijadoporelusuario`h2{color:green;} 3.`Es9loenhojaCSSexternaoenelHead`h2{color:blue;}4.`Es9loenhojaCSSexternaoenelHead`h2 {color:lime!important;}4 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`h2.news{color:green;}2.`Es9loenhojaCSSexternaoenelHead `h2{color:blue;}1 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`h2{color:blue;}2.`EnlalíneasiguientedelCSS`h2{color: purple;}2 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.`Es9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.`es9loenhojacssexternaoenelhead`h2{color:blue;}1 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.`Es9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.`Es9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.`es9loenhojacssexternaoenelhead`h2{color:blue;}4.`es9loenhojacss externaoenelhead`h2{color:purple;}5.`es9loenhojacssexternaoenelhead`divcajah2{color: black;}5

87 HTML/CSS Navegación

88 NavegaciónHTML Unmenúesunalistadeenlaces.Serecomiendausarlasmarcasde lista<ul>)<li>)yelenlace<a>,queesloestablecidoporlasnormas deaccesibilidad.

89 NavegaciónHTML MenúverAcal)

90 NavegaciónCSS LosvaloresCSSpordefectodelalistaydelenlace,debenser ajustadosanuestrasnecesidades.) EjemplomenúverAcal myspace

91 NavegaciónHTML Menúhorizontal)

92 NavegaciónCSS CSSmenúhorizontal.) Ejemplomenúhorizontal BBC

93 MenúsFirefoxOS LosmenúsrecomendadosparalasaplicacionesenFirefoxOS FirefoxOSAppBuMons: hmp://www.mozilla.org/enpus/styleguide/products/firefoxpos/bumons/

94 IconosparaaplicacionesFirefoxOS UniconoparaunaaplicaciónFirefoxOSesunaimagendepíxeles 60x60píxelsenformatoPNGde24bits. Hayotrastamaños necesariosparaotros disposiavos: 16px,32px,48px, 60px,128px,256px. Guíasdediseñodemozilla,)paradescargarlasplanAllasdelosiconos hmp://www.mozilla.org/enpus/styleguide/products/firefoxpos/icons/

95 RecursosnavegaciónCSS Cristalab:)MenúsverAcales hmp://www.cristalab.com/cursophtml/menuspveracales/ CSS)Blog:)CrearunmenúhorizontalsimpleconCSS hmp://www.cssblog.es/crearpunpmenuphorizontalpsimplepconpcss/ w3schools:)menúhorizontal hmp://www.w3schools.com/css/tryit.asp?filename=trycss_float5

96 HTML/CSS Findeltema

97 Ejercicio 1.PRealizarelCSSdeunmenúverAcaldeestehtml: <!doctypehtml><html><head><metacharset="uhp8 ><Atle>Menú</Atle></head> <body> <nav><h1>discover</h1><ul><li><ahref=""class="welcome">welcome</a></li><li><ahref="" class="featured">featured</a></li><li><ahref=""class="people">people</a></li><li><ahref="" class="music">music</a></li><li><ahref=""class="mixes">mixes</a></li><li><ahref="" class="videos">videos</a></li><li><ahref=""class="radio">radio</a></li></ul></nav> </body></html> 2.PRealizarelCSSdeunmenúhorizontaldeestehtml: <!doctypehtml><html><head><metacharset="uhp8 ><Atle>Menú</Atle></head> <body> <nav><h1>bbc</h1><ul><liclass="news"><ahref="">news</a></li><liclass="sport"><ahref="">sport</a></ li><liclass="weather"><ahref="">weather</a></li><liclass="capital"><ahref="">capital</a></li> <liclass="culture"><ahref="">culture</a></li><liclass="autos"><ahref="">autos</a></li> <liclass="tv"><ahref="">tv</a></li><liclass="radio"><ahref="">radio</a></li><liclass="more"><a href="">more </a></li></ul><divclass="clear"></div></nav> </body></html>

98 Ejercicio 1.PunmenúserealizaaparArdeunalistadeelementos,queseconvierteenunalistadeenlaces,sus eaquetasson: a)ul>li>ab)p>li>ac)p>ad)todaslasanteriores 2.PElselectora:hover,seempleaparadefinirelesAlode: a)elenlaceacavob)elenlacevisitadoc)cuandoelratónpasasobreelenlaced)todaslas anteriores 3.PEnelmenúhorizontal,hayquemodificarlosvalorespordefectodelalistaparaqueestén horizontal,serealizamodificandoelesalodelselectorypropiedad: a)ul{display:inline;}b)il{display:inline;}c)a{display:inline;}d)cualquieradelasanteriores 4.PLadiferenciaentreunelementoconenlaceyeltextosinenlace,seaconsejaporusabilidadquesea visiblementediferente a)sib)no 5. QuécondicionesdebecumpliruniconoparaFirefoxOS? a.debeserunaimagendeformatopng.b.debeserunaimagendeformatojpg.c.debemedir 3REM.d.Debemedir3REMpíxelesencolorblanco.

99 EjercicioPSoluciones 1.PunmenúserealizaaparArdeunalistadeelementos,queseconvierteenunalistadeenlaces,sus eaquetasson: a)ul>li>ab)p>li>ac)p>ad)todaslasanterioresa 2.PElselectora:hover,seempleaparadefinirelesAlode: a)elenlaceacavob)elenlacevisitadoc)cuandoelratónpasasobreelenlaced)todaslas anterioresc 3.PEnelmenúhorizontal,hayquemodificarlosvalorespordefectodelalistaparaqueestén horizontal,serealizamodificandoelesalodelselectorypropiedad: a)ul{display:inline;}b)il{display:inline;}c)a{display:inline;}d)cualquieradelasanterioresb 4.PLadiferenciaentreunelementoconenlaceyeltextosinenlace,seaconsejaporusabilidadquesea visiblementediferente a)sib)noa 5. QuécondicionesdebecumpliruniconoparaFirefoxOS? a.debeserunaimagendeformatopng.b.debeserunaimagendeformatojpg.c.debemedir 3REM.d.Debemedir3REMpíxelesencolorblanco.A

Introducción al curso y al programa. Juan Quemada, DIT, UPM

Introducción al curso y al programa. Juan Quemada, DIT, UPM Introducción al curso y al programa Juan Quemada, DIT, UPM 1 Curso: Diseño de aplicaciones Web en HTML5 y para móviles FirefoxOS Curso de iniciación al diseño y a la programación en HTML5 HTML, CSS y JavaScript)

Más detalles

Introducción HTML y CSS. Clientes, servidores, nube

Introducción HTML y CSS. Clientes, servidores, nube Clientes, servidores, nube a. Los clientes dan acceso a los servicios en Internet. b. Los servidores alojan la información y los servicios. c. La nube es el conjunto de terminales y servidores. TCP/IP

Más detalles

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales. 1 Que es CSS3? El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio

Más detalles

Yusef Hassan Montero Francisco Jesús Martín Fernández. Referencia CSS. Todos los derechos reservados www.nosolousabilidad.com

Yusef Hassan Montero Francisco Jesús Martín Fernández. Referencia CSS. Todos los derechos reservados www.nosolousabilidad.com Yusef Hassan Montero Francisco Jesús Martín Fernández Referencia CSS Todos los derechos reservados www.nosolousabilidad.com Introducción Este documento tiene por objetivo servir de material de apoyo y

Más detalles

CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos

CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos Desarrollo de aplicaciones web Manuel Torres Gil mtorres@ual.es Departamento de Lenguajes y Computación Universidad de Almería Desarrollo de aplicaciones web 1. Características y ventajas de 2. Sintaxis

Más detalles

Hojas de estilo en cascada (CSS) Tecnologías Web

Hojas de estilo en cascada (CSS) Tecnologías Web Hojas de estilo en cascada (CSS) Tecnologías Web Motivación El objetivo fundamental de las hojas de estilo CSS es separar el contenido de la apariencia La información de nuestros sitios WEB tienen que

Más detalles

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) 1. Hojas de estilo: una base para el marcado semántico Lluís Codina UPF. Abril 2007 Una hoja de estilo es un conjunto

Más detalles

Imágenes#HTML# Las#imágenes#se#vinculan#en#una#página#HTML#con#la#e8queta##con#los# atributos# ### src#=#url###

Imágenes#HTML# Las#imágenes#se#vinculan#en#una#página#HTML#con#la#e8queta#<img>#con#los# atributos# ### src#=#url### CSS div ImágenesHTML LasimágenessevinculanenunapáginaHTMLconlae8quetaconlos atributos src=url alt=textoalterna8vodelaimagen width=ancho height-=alto EstructuraCSS lae8quetaofrecealosdiseñadoreslaflexibilidadyelcontrol

Más detalles

Web con HTML5 Y CSS3 parte 1

Web con HTML5 Y CSS3 parte 1 Web con HTML5 Y CSS3 parte 1 En este tutorial de creación de una plantilla web basada en HTML Y CSS3, en esta primera parte vamos a ver la estructuración básica del sitio y vamos a utilizar las nuevas

Más detalles

CSS. Cascading Style Sheets (Hojas de estilo en cascada)

CSS. Cascading Style Sheets (Hojas de estilo en cascada) 1 CSS Cascading Style Sheets (Hojas de estilo en cascada) INTRODUCCIÓN Las Hojas de estilo son un conjunto de reglas de estilo definidas por el programador sobre elementos HTML, que definen la apariencia

Más detalles

fuentes para un mejor diseño web

fuentes para un mejor diseño web Webfonts fuentes para un mejor diseño web ❶ Breve historia sobre fuentes en Internet Breve historia de las webfonts A.W. W. D.W HTML 1 HTML 2 CSS CSS 2 1993 1995 1996 1998 NO HAY CONTROL SOBRE LA FUENTE

Más detalles

Diseño y Programación de Páginas Web

Diseño y Programación de Páginas Web Diseño y Programación de Páginas Web 1.2. Hojas de Estilo CSS Juan Ruiz de Miras (demiras@ujaen.es) Departamento de Informática Universidad de Jaén Contenidos 1. Introducción 2. Sintaxis de las hojas de

Más detalles

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin

Más detalles

III. Hojas de estilo en cascada (CSS)

III. Hojas de estilo en cascada (CSS) III. Hojas de estilo en cascada (CSS) 1. Introducción 2. Declaración de CSS 2.1. Propiedades típicas en CSS 2.2. Inserción de CSS en HTML 3. Herencia de propiedades en CSS 4. Declaración avanzada de CSS

Más detalles

Taller de Paginas Web

Taller de Paginas Web Taller de Paginas Web Las páginas web son documentos de texto que se comparten en la red. La mecánica es la siguiente : Un ordenador de usuario, que llamarermos cliente, hace una petición a una direccion

Más detalles

CSS1. manual de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003

CSS1. manual de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 CSS1 manual de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre CSS1 disponible en: http://www.w3.org/tr/1999/rec-css1-19990111 Manual de referencia de CSS1-

Más detalles

... ...

<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML> ... ... Marcos en HTML

Más detalles

Práctica 4: Edición de contenidos web

Práctica 4: Edición de contenidos web Comercio Electrónico Práctica 4: Edición de contenidos web Antonio Sanz ansanz@unizar.es Rafael del Hoyo rdelhoyo@ita.es Objetivo de la práctica En esta práctica se pretende realizar una introducción a

Más detalles

Hojas de Estilos - CSS. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15

Hojas de Estilos - CSS. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15 Hojas de Estilos - CSS Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15 Introducción Motivación: Separar el formato del contenido y estructura de una

Más detalles

ETIQUETAS HTML 5 Diseño de Sitios Web TUW

ETIQUETAS HTML 5 Diseño de Sitios Web TUW Etiqueta Descripción Define un comentario nueva nueva nueva nueva

Más detalles

CSS, hojas de estilos

CSS, hojas de estilos CSS, hojas de estilos 1. Introducción a las CSS El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobre todo), distinto

Más detalles

Introducción a CSS. Aplicaciones Web (2016/17) Jesús Arias Fisteus. Aplicaciones Web (2016/17) Introducción a CSS 1

Introducción a CSS. Aplicaciones Web (2016/17) Jesús Arias Fisteus. Aplicaciones Web (2016/17) Introducción a CSS 1 Introducción a CSS Jesús Arias Fisteus Aplicaciones Web (2016/17) Aplicaciones Web (2016/17) Introducción a CSS 1 Parte I Introducción a CSS Aplicaciones Web (2016/17) Introducción a CSS 2 Hola Mundo!

Más detalles

5º Unidad Didáctica. Hojas de estilo en Cascada CSS. Eduard Lara

5º Unidad Didáctica. Hojas de estilo en Cascada CSS. Eduard Lara 5º Unidad Didáctica Hojas de estilo en Cascada CSS Eduard Lara 1 ÍNDICE 5.1 El Origen de CSS 5.2 Hojas de estilo y sus clases 5.3 Las reglas de estilo 5.4 Presentación con estilos 2 5.1 EL ORIGEN DE CSS

Más detalles

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí. Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la

Más detalles

HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe

HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe HTML para E-mail Guía de Buenas prácticas Less ys More Ludwig Mies van der Rohe Ejemplo de un e-mail sin buenas prácticas Textos degradados Los textos están sobre un fondo degradado Newsletter Septiembre

Más detalles

Joomla! Joomla! Diseños de sitios Web y Comercio Electrónico

Joomla! Joomla! Diseños de sitios Web y Comercio Electrónico Diseños de sitios Web y Comercio Electrónico Universidad Politécnica de Valencia Campus de Gandía Organización del curso viernes 6 sábado 7 viernes 13 sábado 14 viernes 20 Introducción a Instalación en

Más detalles

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto) HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional

Más detalles

Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 10: Diseño web con estilos.

Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 10: Diseño web con estilos. Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 10: Diseño web con estilos. Instituto Nacional de Tecnologías Educativas y de Formación del profesorado 2012 Diseño web con estilos

Más detalles

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html. Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje

Más detalles

TEMA 4: INFORMACIÓN EN LA RED: PÁGINAS WEB

TEMA 4: INFORMACIÓN EN LA RED: PÁGINAS WEB TEMA 4: INFORMACIÓN EN LA RED: PÁGINAS WEB 4.1.- CONCEPTOS BÁSICOS DE INTERNET 4.2.- CONTENIDOS DE UNA WEB 4.3.- SERVICIO FTP 4.4.- INSTRUCCIONES BÁSICAS EN HTML 4.5.- INSTRUCCIONES BÁSICAS PARA TABLAS

Más detalles

Ejemplo: font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma de la lista de atributos es opcional)

Ejemplo: font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma de la lista de atributos es opcional) Anexo: Reglas básicas sobre la sintaxis CSS: Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un

Más detalles

Introducción a las aplicaciones WEB

Introducción a las aplicaciones WEB Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 3 de mayo de 2010 Qué es Internet? I LAN: Local Area Network, red de ámbito local. Qué es Internet? II Qué es Internet?

Más detalles

Listado de elementos o etiquetas HTML5

Listado de elementos o etiquetas HTML5 Listado de elementos o etiquetas HTML5 Etiqueta Función Define un comentario Define el tipo de docuemento Define

Más detalles

Guía para creación de temas para editor de EditandSend

Guía para creación de temas para editor de EditandSend Guía para creación de temas para editor de EditandSend En este documento se describen las acciones que debe realizar el diseñador/maquetador para personalizar un tema y poder ser utilizado en el EDIT.

Más detalles

Abril 2005. Jordi Llonch jordi@laigu.net. Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/

Abril 2005. Jordi Llonch jordi@laigu.net. Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/ Abril 2005 Jordi Llonch jordi@laigu.net Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/ http://creativecommons.org/licenses/by-sa/2.0/ 2 Conceptos básicos World Wide

Más detalles

Creación y uso de Hojas de Estilo

Creación y uso de Hojas de Estilo Creación y uso de Hojas de Estilo Definición de Hojas de Estilo con la etiqueta Definición de Hojas de Estilo en Ficheros Externos Definición de Clases de Estilo Definición de Estilos Individuales

Más detalles

Joomla! Joomla! Diseños de sitios Web y Comercio Electrónico

Joomla! Joomla! Diseños de sitios Web y Comercio Electrónico Diseños de sitios Web y Comercio Electrónico Universidad Politécnica de Valencia Campus de Gandía Organización del curso viernes 15 martes 19 jueves 21 viernes 22 martes 26 jueves 28 viernes 29 Introducción

Más detalles

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA. En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta

Más detalles

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite

Más detalles

HTML HyperText Markup Language. Fernando Pérez Costoya fperez@fi.upm.es

HTML HyperText Markup Language. Fernando Pérez Costoya fperez@fi.upm.es HTML HyperText Markup Language Fernando Pérez Costoya fperez@fi.upm.es Índice Definición Historia y evolución de HTML El fiasco de XHTML HTML 5: la resurrección Un tour por HTML Diseño de aplicaciones

Más detalles

MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico

MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico MAQUETACIÓN CON CSS Elementos principales Para maquetar una página web y crear su estructura visual (layout) hay que dividir la página en bloques. La estructura de una página web tendrá una serie de áreas

Más detalles

(*) Creo un directorio de trabajo llamado /bloggalpon/ en el directorio del usuario. (*) Inicializar el repositorio vacío.

(*) Creo un directorio de trabajo llamado /bloggalpon/ en el directorio del usuario. (*) Inicializar el repositorio vacío. (*) Creo un directorio de trabajo llamado /bloggalpon/ en el directorio del usuario. (*) Inicializar el repositorio vacío. (*) Crear el archivo index.htm (*) Añadir la estructura básica

Más detalles

CSS: hojas de estilo en cascada. Visualización de una página I. Luis Fernando Llana Díaz. 21 de abril de 2008

CSS: hojas de estilo en cascada. Visualización de una página I. Luis Fernando Llana Díaz. 21 de abril de 2008 Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 21 de abril de 2008 Visualización de una página I 1 Analizar el HTML y crear un árbol que repesenta el documento (document

Más detalles

HTML & CSS HTML & CSS. (Versión 1.5) José María Morales Vázquez josemaria@morales-vazquez.com

HTML & CSS HTML & CSS. (Versión 1.5) José María Morales Vázquez josemaria@morales-vazquez.com HTML & CSS (Versión 1.5) José María Morales Vázquez josemaria@morales-vazquez.com Página 1 CONTENIDO 1. INTRODUCCIÓN...6 Historia de los lenguajes de marcas...6 Algunos lenguajes de marcas...7 Componentes

Más detalles

CSS, hojas de estilos

CSS, hojas de estilos CSS, hojas de estilos Introducción a las CSS El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fué concebido para otros usos (científicos sobretodo), distinto

Más detalles

Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales HTML Desarrollo

Más detalles

HTML5: Nuevas etiquetas semánticas. Juan Eladio Sánchez Rosas

HTML5: Nuevas etiquetas semánticas. Juan Eladio Sánchez Rosas HTML5: Nuevas etiquetas semánticas Juan Eladio Sánchez Rosas Objetivo Semantics Objetivo de la sesión Presentar y describir las nuevas etiquetas del estándar HTML5 Citar los antecedentes que derivaron

Más detalles

Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1

Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1 Índice HTML HyperText Markup Language Conceptos básicos Historia y evolución de HTML XHTML vs. HTML HTML dinámico Hojas de estilo (CSS) DOM Diseño de servicios Web 2 DATSI Qué es HTML? Lenguaje de publicación

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2014 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Introducción a las hojas de estilo Lugar de ejecución: Laboratorio

Más detalles

MANUAL BÁSICO CSS. Antes de empezar con CSS deberías tener por lo menos unos conocimientos básicos de HTML.

MANUAL BÁSICO CSS. Antes de empezar con CSS deberías tener por lo menos unos conocimientos básicos de HTML. MANUAL BÁSICO CSS Presentación Bienvenido a este tutorial de CSS, el lenguaje de hojas de estilo usado en páginas web. Este tutorial pretende hacer una introducción a este lenguaje, métodos para separar

Más detalles

Consejos para el correcto armado de HTML para Emails

Consejos para el correcto armado de HTML para Emails Consejos para el correcto armado de HTML para Emails Consejos para el correcto armado de HTML para Emails Cuando desarrollas una campaña de Email Marketing, es fundamental que tu mensaje sea recibido correctamente.

Más detalles

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho

Más detalles

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes 10/09/14 CÓMO SE HACE LA WEB LO QUE VES Bases del HTML CÓMO ES CREADA Sitios pequeños utilizan solamente HTML y CSS. Sesión 3 Sitios más grandes usan CMS, herramientas de blog o comercio de e-commerce.

Más detalles

Tecnologías Web para la presentación CSS

Tecnologías Web para la presentación CSS Tecnologías Web para la presentación CSS Aplicaciones Web/Sistemas Web Juan Pavón Mestras Dep. Ingeniería del Software e Inteligencia Artificial Facultad de Informática Universidad Complutense Madrid Material

Más detalles

Manual de v2cms v2cms v1.01

Manual de v2cms v2cms v1.01 Manual de v2cms v2cms v1.01 Introducción v2cms es un sistema de manejo de contenido que ofrece una gran flexibilidad para la creación de sitios web no importa el tamaño del mismo. El mismo permite una

Más detalles

Capítulo 3 Estilo para un documento HTML: CSS

Capítulo 3 Estilo para un documento HTML: CSS Capítulo 3 Estilo para un documento HTML: CSS.3.0 Qué es el estilo?!"#$ "!$ &'!$!($ ) *+ " *, -.,#/-..3.1 Propiedades y valores 0 )" & + 1& &1& 2 " '" Medidas: 3 + 14 "56 1'#/ 1/5-7 3 1 1 + 1' Colores:

Más detalles

Tema 2. I- Hojas de estilo CSS.

Tema 2. I- Hojas de estilo CSS. Tema 2. I- Hojas de estilo CSS. Programación Multimedia. G.I.M. Inmaculada Coma, Francisco Grimaldo Resumen En este tema: Recordaremos cómo crear estilos CSS e insertarlos en una página HTML. Recordaremos

Más detalles

www.librosweb.es Introducción a CSS Javier Eguíluz Pérez

www.librosweb.es Introducción a CSS Javier Eguíluz Pérez Introducción a CSS Javier Eguíluz Pérez Sobre este libro... Los contenidos de este libro están bajo una licencia Creative Commons Reconocimiento No Comercial - Sin Obra Derivada 3.0 (http://creativecommons.org/licenses/by-nc-nd/

Más detalles

HTML HTML HTML. Diseño de Sitios Web. Qué es HTML?

HTML HTML HTML. Diseño de Sitios Web. Qué es HTML? Diseño de Sitios Web 5 (I) Qué es? Es un lenguaje descriptivo con el cual se describe la estructura del texto y todos los elementos que se muestran en la página. Es el método más usado para publicar documentos

Más detalles

Desarrollo de Aplicaciones para Internet I. Unidad III - CSS Profesor: M.C. Martín Olguín

Desarrollo de Aplicaciones para Internet I. Unidad III - CSS Profesor: M.C. Martín Olguín Desarrollo de Aplicaciones para Internet I Unidad III - CSS Profesor: M.C. Martín Olguín Cascading Style Sheets (CSS) Aunque el HTML desde sus orígenes privilegia el contenido sobre la apariencia, esta

Más detalles

Wenceslao Zavala. www.producciondigitalup.com.ar

Wenceslao Zavala. www.producciondigitalup.com.ar Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña:

Más detalles

ACTIVIDADES PÁGINAS WEB

ACTIVIDADES PÁGINAS WEB ACTIVIDADES PÁGINAS WEB PRÁCTICA 1: Plantilla Nuestro primer ejercicio consiste en diseñar una plantilla de documento HTML para iniciar rápidamente todas nuestras páginas y ahorrarnos escribir los elementos

Más detalles

Información general. Últimas noticias

Información general. Últimas noticias Información general Últimas noticias 1 Registro de miembros Texto informativo { Registro nuevo usuario { 2 Registro de miembros 1) Acceder a secciones privadas de la página. 2) Acceso a contenido descargable

Más detalles

Aplicaciones Telemáticas (2014-15)

Aplicaciones Telemáticas (2014-15) Aplicaciones Telemáticas (2014-15) Grado en Ingeniería Telemática (URJC) Jesús M. González Barahona, Gregorio Robles Martínez http://cursoweb.github.io GSyC, Universidad Rey Juan Carlos 23 de mayo de 2015

Más detalles

Manual de Website Baker Website Baker v2.7.0

Manual de Website Baker Website Baker v2.7.0 Manual de Website Baker Website Baker v2.7.0 Introducción Website Baker es un sistema de manejo de contenido que ofrece una gran flexibilidad para la creación de sitios web no importa el tamaño del mismo.

Más detalles

Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas:

Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas: Mi primera web... El ejemplo que utilizaremos para este tutorial, es la misma página web de los tutoriales. Puede descargar los archivos desde aquí. Para la creación de las imagenes he utilizado Fireworks

Más detalles

UCEMA Ingeniería Informática Introducción a HTML y Javascript

UCEMA Ingeniería Informática Introducción a HTML y Javascript UCEMA Ingeniería Informática Introducción a HTML y Javascript,QJ'LHJR-$UFXVLQ GDUFXVLQ#FHPDHGXDU Objetivos del Curso 9 Proveer al asistente de conceptos fundamentales que le permitan utilizar los lenguajes

Más detalles

Resumen Rápido de CSS

Resumen Rápido de CSS Resumen Rápido de CSS Selectores. Resumimos la manera de seleccionar los elementos a ''lookear''. * Todos los elementos div #div #div * Todos los elementos dentro de

Más detalles

Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 9: Hojas de estilo.

Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 9: Hojas de estilo. Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 9: Hojas de estilo. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Hojas de estilo Atrás quedaron

Más detalles

Introducción al desarrollo web (idesweb)

Introducción al desarrollo web (idesweb) Introducción al desarrollo web (idesweb) Práctica 3: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en una página

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2014 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Fundamentos del Lenguaje HTML Lugar de ejecución: Laboratorio

Más detalles

MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D)

MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D) APRENDERAPROGRAMAR.COM MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D) Sección: Cursos Categoría: Tutorial básico del programador

Más detalles

Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales

Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 3 Box

Más detalles

lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos definidos con HTML y XHTML

lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos definidos con HTML y XHTML : Introducción En la primera parte del curso (XHTML) se comentó en numerosas ocasiones que el aspecto de la página podía modificarse mediante las hojas de estilo. Qué es el? es un lenguaje de hojas de

Más detalles

Introducción: páginas web y navegadores

Introducción: páginas web y navegadores IB14 Informática Aplicada a la Construcción Creación de páginas web con HTML Introducción: páginas web y navegadores Una página web, pese a la gran cantidad de colores, imágenes e información que puede

Más detalles

Un documento escrito en HTML contendría básicamente las siguientes etiquetas:

Un documento escrito en HTML contendría básicamente las siguientes etiquetas: GUIA de HTML5 Qué es HTML? HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks)

Más detalles

Conceptos Teóricos de HTML5 (material extra adicional libro):

Conceptos Teóricos de HTML5 (material extra adicional libro): Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas

Más detalles

Widget de catálogos. Manual de Usuario. Versión 2. Madrid 13/08/2015

Widget de catálogos. Manual de Usuario. Versión 2. Madrid 13/08/2015 Widget de catálogos Manual de Usuario Madrid 13/08/2015 Versión 2 Contenidos 1 Introducción... 3 2 Alta de conjuntos de datos en datos.gob.es... 7 3 Descripción del widget... 12 3.1 Widget, versión sencilla...

Más detalles

WEB: Diseño e Interacción

WEB: Diseño e Interacción WEB: Diseño e Interacción DISE-2525 Primer Semestre del 2013 Martes 26 de Febrero Universidad de los Andes Facultad de Arquitectura y Diseño Departamento de Diseño Clase Taller: Martes 7:00 am 9:50 am

Más detalles

Lenguaje HTML y páginas web. Alex Sánchez

Lenguaje HTML y páginas web. Alex Sánchez Lenguaje HTML y páginas web Alex Sánchez Introducción: La web y las páginas web Componentes de la web Como funciona la web? Como es la comunicación en la web El acceso a la Web suele basarse en un un explorador

Más detalles

UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda

UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda 1 Índice 1. Introducción... 3 2. Objetivos... 4 3. El lenguaje HTML...

Más detalles

Creación de Páginas WEB con HTML

Creación de Páginas WEB con HTML Universidad de Cantabria Creación de Páginas WEB con HTML Febrero-2006 Ricardo Sáez Marta Zorrilla Creacion paginas Web con HTML 1 Introducción El servicio WEB utiliza para la transferencia de información

Más detalles

MANUAL TECNICO DE EMAILING BIZBOX

MANUAL TECNICO DE EMAILING BIZBOX MANUAL TECNICO DE EMAILING BIZBOX 1.- Verificar Registro SPF El dominio desde el que envía su coreo no puede ser cualquier dominio, debe ser un dominio aprobado y verificado para enviar correos, estos

Más detalles

HTML 5 & CSS 3. Expositor: Tec. Henrry Osmar Torres Andonaire

HTML 5 & CSS 3. Expositor: Tec. Henrry Osmar Torres Andonaire HTML 5 & CSS 3 Expositor: Tec. Henrry Osmar Torres Andonaire E-mail Laboral: htorres@adylconsulting.com E-mail Personal: osmar.1@hotmail.com Sitio Web: www.facehot.vacau.com Facebook: HeOsToAnd/ Twitter:

Más detalles

Técnicas de visualización

Técnicas de visualización Técnicas de visualización LENGUAJE HTML Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez Introducción

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2015 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 1 Nombre de la practica: Introducción al lenguaje HTML Lugar de ejecución: Laboratorio

Más detalles

Creación de una página web accesible sencilla

Creación de una página web accesible sencilla Unidad 2: Las hojas de estilo en cascada Creación de una página web accesible sencilla Objetivos: -Agregar formato a la página creada, a través de una hoja de estilo. Contenidos: -Incorporación de una

Más detalles

CURSO DE CREACIÓN DE PÁGINAS WEB EN HTML PARA REALIZAR LA PÁGINA DEL INSTITUTO

CURSO DE CREACIÓN DE PÁGINAS WEB EN HTML PARA REALIZAR LA PÁGINA DEL INSTITUTO CURSO DE CREACIÓN DE PÁGINAS WEB EN HTML PARA REALIZAR LA PÁGINA DEL INSTITUTO Realizado por: Antonio Bueno 1 CURSO DE CREACIÓN DE PÁGINAS WEB EN HTML INDICE: 1.- Software y Hardware necesario.... 3 2.-

Más detalles

Ejemplos-Capítulo-6 Ejemplo-1: Distintos tipos de sombras en el navegador Safari de Apple

Ejemplos-Capítulo-6 Ejemplo-1: Distintos tipos de sombras en el navegador Safari de Apple Ejemplos-Capítulo-6 Ejemplo-1: Distintos tipos de sombras en el navegador Safari de Apple

Más detalles

HTML/XHTML/FORMS. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR

HTML/XHTML/FORMS. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR HTML/XHTML/FORMS CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR HTML Estructura de un documento HTML Elemento HTML HEAD TITLE META datos BODY HTML HTML

Más detalles

Introducción al diseño de páginas web con estándares y programas open source: Tutorial de XHTML, CSS y NVU

Introducción al diseño de páginas web con estándares y programas open source: Tutorial de XHTML, CSS y NVU Introducción al diseño de páginas web con estándares y programas open source: Tutorial de XHTML, CSS y NVU Por Lluís Codina y Cristòfol Rovira UPF, Marzo 2007 Primera Parte: El código fuente de una página

Más detalles

Introducción. Qué es CSS? Historia de las CSS

Introducción. Qué es CSS? Historia de las CSS Introducción En esta sección intentaremos iniciarnos en el uso de las Hojas de Estilo en Cascada o CSS, que se utilizan para dar estilo a documentos HTML y XML, separando el contenido de la presentación.

Más detalles

ESTRUCTURA DEL CÓDIGO HTML5

ESTRUCTURA DEL CÓDIGO HTML5 ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo

Más detalles

Para que cualquiera pueda disponer de estos recursos a través de la Web, se han definido:

Para que cualquiera pueda disponer de estos recursos a través de la Web, se han definido: Guía de publicación en web 1.- Introducción La WWW o Web es un sistema de publicación horizontal y universal que permite compartir información entre personas a través de una red de computadoras conectadas

Más detalles

CSS BÁSICO Hojas de Estilo. Iván Martínez Toro

CSS BÁSICO Hojas de Estilo. Iván Martínez Toro CSS BÁSICO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Introducción al CSS. Cómo es CSS? Sintaxis general. Reglas. Selectores. Class. Divy Span. Uso de las hojas de estilo. CSS (CASCADING STYLE

Más detalles

Hola mundo!

<HTML><BODY>Hola mundo!</body></html> Hola mundo! Introducción El HTML, acrónimo para HyperText Markup Language es un lenguaje interpretado, esto quiere decir que se puede ver fácilmente el código detrás del lenguaje

Más detalles

Proyecto WifiCloudCan ecastro21

Proyecto WifiCloudCan ecastro21 Proyecto WifiCloudCan ecastro21 CURSO: Introducción a la programación en HTML - PHP y al Desarrollo Web INDICE Introducción Lenguaje de etiquetas HTML Herramientas necesarias para diseñar una página Web

Más detalles

CSS: Cascading Style Sheets

CSS: Cascading Style Sheets Diseño de Sitios Web (T.U.W.) Hojas de Estilo Qué son las hojas de estilo? Una hoja de estilo es un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML. Permiten

Más detalles

HTML. guía rápida de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003

HTML. guía rápida de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 HTML guía rápida de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre HTML4 disponible en: http://www.w3.org/tr/html4/ Jorge Sánchez 2003 índice introducción...

Más detalles