clase03_pweb

8/18/2019 Clase03_PWEB

1/18

Prof. Yadelis SilvaProf. Yadelis [email protected]@gmail.com


2/18

Hemos visto varias etiquetas HTML, semánticas, cuyoobjetivo como ya sabes, es aportar información sobre eltipo de contenido de nuestras páginas.

Aora bien, ay etiquetas que son más gen!ricas, que noaportan información semántica, pero que son muy

necesarias por ejemplo para la maquetación de nuestrapágina.

"stos elementos son los arciconocidos #div$.%i necesitas maquetar un elemento de tu &eb y noencuentras una etiqueta semántica que pueda dar

información sobre ese contenido' usa un #div$. (e alguna forma, un div es la expresión más cercana a

una caja.


3/18

Hasta aora emos utili*ado como selector, esto es, como identi+cación deelementos tml para asignar estilos css, las propias etiquetas semánticas de loselementos. or ejemplo, para estili*ar un h1, usábamos como selector el h1, paraestili*ar un header , usábamos como selector el header .

ero para poder estili*ar elementos más gen!ricos como los div , necesitamosusar otro tipo de selectores, para poder identi+car cada elemento correctamente.ara ello usamos los atributos id y class.

Tenemos fundamentalmente dos formas de identi+car un elemento &eb que notienen información semántica'

- id' el id es un atributo HTML que sirve para identifcar inequívocamente unelemento en nuestro tml, en nuestra página. "s decir, un id solopuede identi+car a un elemento y por lo tanto no podemos repetir ese id ennuestra página. or tanto, los id son tiles cuando necesitamos etiquetarelementos nicos en nuestro tml.

/eneralmente los id se usan para interactuar con nuestros elementos tml desdenuestros arcivos javascript, o para poder interactuar con nuestros elementosdesde Analytics o /oogle Tag Manager.or ejemplo, si queremos saber si un usuario a pulsado un botón en concreto denuestra &eb podemos asignar un id para identi+car ese botón, que será nico.


4/18

ara crear un atributo id dentro de la etiquetade nuestro elemento tml, le asignamos unvalor, en este caso un nombre'

HTML: #div id01caja2roja1$#3div$ ara referirnos a un id desde nuestro css,

usaremos el s4mbolo # seguido del nombre delidenti+cador. "n este caso en concreto'

!!: 5caja2roja 6 bac7ground2color'red8 9


5/18

clase: una clase es un atributo HTML que nos permite identifcarelementos que tienen características en com"n. :na claseviene a ser como un molde de galletas, el cual con+guramos anuestro gusto y con el cual creamos elementos que serán igualesentre s4. Tendrán el mismo molde.

Las clases son sin duda, el atriuto de $tml más %recuente ya

que lo usamos básicamente para dar estilo a elementos que tienenlas mismas caracter4sticas.

:na clase se declara en el tml como cualquier atributo, asignándoleun valor, que en este caso será el nombre de la clase'

HTML: #div class01caja2roja1$#3div$ ara interactuar con las clases que

emos de+nido en nuestro tml, usamos el & seguido del nombre dela clase, por ejemplo'

!!: .caja2roja 6 bac7ground2color'red8 9


6/18

'n elemento puede tener varias clases y as4 puede adquirircaracter4sticas de varios tipos de elemento. (ico de una formasimpli+cada' imagina que tenemos una clase declarada paraelementos que tienen un borde naranja de ; p


7/18

@a comentamos que todo elemento &eb se comporta como una caja, ytambi!n vimos lo que es un div , que no es otra cosa que un elemento&eb sin signi+cado semántico, una caja en su sentido más general.

Algo fundamental en la maquetación &eb es poder asignar un tamaoa un elemento &eb, a una caja. ues bien, podemos dimensionaruna caja aportándole un anc$o y un alto. "sto lo acemos

asignándole los atributos >%% )idt$ y $ei($t a dico elemento. ara asignar un valor de anco o de alto a un elemento &eb, lo más

sencillo es indicar el valor en piomo un div es un elemento gen!rico, vamos a utili*ar una clase como

selector de >%%' HTML: #div class01caja2roja1$#3div$ !!: .caja2roja 6 bac7ground2color' red8 &idt' =CCp


8/18


9/18

Aora bien, oy d4a, aplicar valores absolutos para dimensionar unelemento no tiene demasiado sentido.:no de los requisitos que tiene que cumplir nuestros proyectos&eb a d4a de oy es que se adapte a cualquier tipode pantalla. .uestros dise/os deen ser elásticos,adaptativos.

or ello tenemos que dimensionar nuestros elementos de formadinámica, para que puedan adaptarse a la pantalla de undispositivo móvil.Hay mucas formas de dimensionar nuestros elementos de%orma dinámica, como por ejemplo, los 0'

Al div anterior podemos decirle que ocupe la totalidad de lapantalla independientemente de los pi


10/18


11/18

(imensionando una caja en pi


12/18

Gtra forma de dimensionar un elemento de forma elástica sonlos em y los rem. ero los veremos más adelante cuandotratemos la tipograf4a. o falta muco.Eásicamente se basa en la idea de dimensionar nuestroselementos en base al tamao de la fuente que emos de+nido. "nel caso de los em, se trata de la medida de la letra Mmay"scula. or tanto si emos de+nido que la fuente deldocumento es de =I p


13/18

resta atención a la posición de la caja roja en nuestro navegador. Korqu!,

si no emos asignado ningn margen a nuestra caja, ay una especie demargen blanco entre nuestra caja roja y la ventana de nuestro navegador

La respuesta es muy sencilla' porque los nave(adores vienen conestilos predeterminados que modifcan el comportamiento denuestros elementos, y encima, para complicarlo más, cada navegadortrae estilos diferentes entre s4.

"sto produce varios efectos no deseados' el primero es que afecta a cómodeben relacionarse los objetos de nuestra página entre s4, ya que a/ademár(enes* paddin(s y di%erentes estilos.Gtro efecto no deseado es que ,como cada navegador viene con sus estilosprede+nidos y son diferentes, nuestras maquetaciones pueden verse

afectados de diferente forma en función del navegador con el cualestamos renderi*ando nuestra &eb. 'n $- no tiene el mismo tama/opredeterminado en !a%ari o en $rome.


14/18


15/18

ara solucionar este ay varias opciones. ui*á las más destacadassean reset y normali1e.

2eset es un arcivo que se enla*a en nuestra página como si una ojade estilo css se tratara, y lo que ace es resetear todos los estilos."s decir, a todos los atributos le asigna un valor de C.(ebido a que en HTML se ejecuta el código en orden secuencial, cuando

el lin7 de reset lo colocamos antes de nuestro estilo, lo que ocurre esque todos los estilos, incluidos los del navegador se ponen a cero. Tras esto se carga nuestro >%% sin que sea interferido por los estilos delnavegador.3l prolema de reset es que una ve1 aplicado* un $- tiene elmismo tama/o que un p* lo cual es un inconveniente porque

además nos oli(a a soreescriir todos los elementossemánticos que utilicemos. or ello ay otra solución muc$o más optima y que te recomiendo,

que es .ormali1e.


16/18


17/18

Lo que ace ormali*e es $omo(enei1ar los estilos detodos los nave(adores. >uando usamos ormali*e, un =tiene el mismo estilo predeterminado en todos losnavegadores, tanto en >rome como en %afari.uedes descargarlo de aqu4 .

Al descargarlo se abre una ventana del navegador con elcódigo. %implemente cópialo y p!galo en un arcivo >%% enblanco que creas tu mismo. "nlá*alo con tu tml, y recuerdaacerlo siempre antes de tu >%% de estilos'

HTML: #lin7 rel01styleseet1 ref01normali*e.css13$ #lin7

rel01styleseet1 ref01style.css13$ Necuerda aadir siempre atodas tus páginas tu normali*e.css. Aora si te +jas adesaparecido ese margen que aparec4a alrededor de nuestracaja roja, y además a cambiado el tipo de fuente.

http://necolas.github.io/normalize.css/http://necolas.github.io/normalize.css/


18/18

clase03_pweb

Documents