Până acum, am învățat să utilizăm imagini, linkuri și să formatăm textul.Dar chiar si asa, website-ul nostru nu arată deloc ca cele moderne.Trebuie să adăugăm un strop de design. Vei vedea că pe măsură ce avansezi, atât în cunoștiințe cât și în design si Photoshop o mare problemă se vor dovedi lucrurile aparent simple. Ce font să alegi, ce culoare să aibă acel element, ce mărime să aibă acel heading, toate vor deveni mici detalii cu efect important.

Pentru cei care au citit toate tutorialele știți ca în primul am creat primul nostru website (dacă il putem numi astfel). În acest tutorial ne vom axa pe același site, dar îl vom face mult mai atrăgător.

Elementele structurale de markup

Pentru a avea un design consistent trebuie introduse o serie de tag-uri structurale. Scopul lor principal este să ofere relație directă, la nivel semantic, între design și codul ce descrie design-ul.

Structura clasică a unui site

Puțină istorie totuși: la sfârșitul anilor 90 și la începutul anilor 2000, tabelele erau utilizate pe post de elemente structurale cu ajutorul cărora se crea de exemplu un wrapper peste pagină sau vreun container ce era pe post de header.

Dacă n-ai înteles uită-te aici pe website. Vei observa ca acest continuț se află pe un fundal alb. Pagina albă este de fapt un element stilat cu CSS. <div>-urile sunt deosebit de importante fiindcă permit creearea unui întreg schelet de site.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { font-size: 62.5%; }
body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222; 
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300; 
}
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
/* Larger than phablet */
@media (min-width: 550px) {
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
h4 { font-size: 3.0rem; }
h5 { font-size: 2.4rem; }
h6 { font-size: 1.5rem; }
}
p { margin-top: 0; }
a { color: #1EAEDB; }
a:hover { color: #0FA0CE; }
button {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box; 
}
button:hover,
button:focus {
color: #333;
border-color: #888;
outline: 0; 
}
header h1 {
margin-bottom: 0;
}
header h2 {
margin-bottom: 0px;
font-style:italic;
}
.container {
width: 600px; 
background: #fff; 
border: 1px solid #ddd; 
margin: 20px auto; 
padding: 20px;
}
</style>
<title>Primul website</title>
</head>
<body>
<header class='container' style='margin-bottom: 0'>
<h1>Primul meu website</h1>
<h2><a href="https://www.code-it.ro">code-it.ro</a></h2>
</header>
<article class='container' style='margin-top: 0'>
<h3>Prima mea postare</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button href="#">Citeste</button>
</article>
</body>
</html>

Haideti sa cream si noi un header si o sectiune pentru continut, pe care sa le stilam apoi utilizand HTML Styles.CSS ar fi o varianta mult mai recomandata, dar pentru a mentine acest tutorial strict HTML vom utiliza stiluri.Totusi, o sa vedeti ca stilurile sunt aproape identice cu cele din CSS asa ca, cine stie stilurile din HTML va invata CSS imediat.Rezultatul codului de mai sus:

Previzualizare primul meu website
Previzualizare primul meu website

Iar acum sa explicam fiecare atribut ce face:

  • background – cu acesta stabilim culoarea de fundal a elementului.Culoarea poate fi fie un cuvant(white, black, cyan etc) fie o valoare hexadecimala precedata de #.E mult mai recomandat sa scrieti in valori hexadecimale caci in felul acesta aveti acces la cateva milioane de culori.In cazul nostru am adaugat atat la body cat si la div-uri
  • width – face exact ce credeti si anume stabilim latimea elementului
  • height – stabilim inaltimea elementului
  • text-align – stabilim alinierea textului.Poate fi right, center, left si justify.
  • border – adaugam o bordura unui element(de structura cel mai adesea) si avem nevoie de 3 parametrii:
    • de o valoare numerica(in pixeli e cel mai bine) prin care stabilim marimea bordurii
    • un atribut prin care stabilim de ce tip sa fie bordura:solid, dotted, dashed
    • de o culoare pentru a ne colora bordura..Destul de logic nu?
  • margin – stabilim la ce distanta sa fie un element fata de urmatorul element ce ii este parent
  • padding – stabilim la ce distanta sa se afle elementele continute de un div(poate fi orice alt element de structura) fata de limita lui exterioara(putem spune ca este bordura div-ului).Nota:Adaugand un padding unui element latimea lui se schimba, dar latimea utilizabila ramane aceasi.De exemplu la div-uri latimea utilizabila este de 600 de pixeli, dar nu si latimea propriu-zisa acare este 640 de px(20 de px la stanga respectiv la dreapta).Adaugand un padding div-ului facem textul mult mai usor de citit.Imaginati-va textul din exemplu sa fie lipit de bordura div-ului.Incercati cu si fara padding ca sa vedeti.

Totusi, tagurile de mai sus sunt doar o mica parte din cele existente, asa ca ar fi bine sa mai adaugam cateva exemple pentr a intelege modul in care putem modifica stilul unui element.Cand nu modificam stilul unui element browserul ii va atribui stilurile default.Nu este un lucru prea bun ca browserul sa aiba control asupra elementelor.Titlurile si textul din codul de mai sus nu au avut nici un stil asa ca browserul a atribuit stilurile default.

<h1 style="font-family: Georgia; font-size: 35px; font-style: italic; color: #555; margin: 20px 200px;">Acesta este un titlu situat la 20 de px de partea superioara a ferestrei web si la 200 de px stanga de aceasta!</h1>
<p style="font-family: Arial; font-size: 13px; color: #333; line-height: 18px; margin: 10px 200px 30px 200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="#">Acesta este un link fara stiluri</a></p>
<a style="padding: 5px; background: #f0f0f0; border: 1px solid #ddd; text-decoration: none; color: #1e627d; margin: 20px 200px;" href="#">
Acesta este un link cu stiluri</a>

Rezultatul este unul asemanator cu(depinde de rezolutia la monitor caci nu am setat un width)

Iar acum sa explicam si codul de mai sus:

  • font-family – cu acest atribut stabilim familia fontului
  • font-size – dupa cum sugereaza si numele cu acesta stabilim marimea fontului
  • font-style – stabilim stilul fontului;poate fi italic. oblique sau normal
  • color – stabilim culoarea textului;din nou fie o valoare hexadecimala precedata de un #, fie un cuvant
  • text-decoration – l-am utilizat pentru a elimina linia de sub link(puteti vedea diferenta)

Utilizand iteligent padding si background am putut crea dintr-un link un buton(foarte simplist).Posibilitatile sunt nelimitate.In tutorialul urmator vom discuta despre liste si tabele, o parte mai mica, dar destul de importanta.

Leave a comment

Your email address will not be published. Required fields are marked *

Send this to a friend