A weblapok strukturált szerkesztéséről már beszéltünk itt korábban. Emlékeztetőül, különböző címsorokat használtunk, hogy formailag elkülönítsük az oldalon lévő szöveg tartalmát. Ez egyaránt jó volt az embernek és a gépnek is. A különböző erősségű címsorokat különböző méretben jelenítették meg a böngészők. A HTML tag-ekből pedig a keresőrobotok is ügyesen tudják értelmezni a szöveg logikai összefüggéseit. De mi van akkor, ha ez nekünk nem elég? Mi van akkor, ha szeretnénk kiemelni egy címsort, de nem akarunk az alá- és fölérendeltségi viszonyon változtatni? Beszúrhatunk egy kis CSS formázást.
Extra címsor
Minden HTML címsor rendelkezik egy alapértelmezett beállítással. Egy oldal főcímét <h1> tag-el jelöljük. Minden oldalnak ajánlott , hogy csak egyetlen h1 címsora legyen, ebben helyezzük el a legfontosabb kulcsszavakat., majd ezt követik az alcímek h2,h3… jelöléssel. Ez megkönnyíti az oldal értelmezését. A címsorok rendelkeznek egy alapértelmezett formázással Ha ettől el szeretnénk térni módosíthatjuk az adott címsor megjelenését a style attribútum segítségével egy CSS szabály hozzáadásával akár a címsoron belül.
<h1 style=„font-size:60px;”>Címsor 2</h1>
A fenti példában a h1 nyitótag után következik az attribútum, ez esetben style azaz egy stílus szabály, aminek az egyik paramétere a font-size (betűméret) és az értéke 60 pixel. A style paramétereit és a lehetséges értékeket később részletesen tárgyaljuk majd.
Vízszintes elválasztás
A <hr> elem régen egy vízszintes elválasztóvonalat jelentett egy bekezdésen belül. HTML5-ben a jelentése inkább szemantikai elválasztás, mint grafikai, bár a leggyakrabban még mindig vízszintes vonalként jelenítik meg a böngészők. HTML5 szabványú weboldalon nem nem szükséges lezárni, a <br> sortöréshez hasonlóan használjuk, és egy horizontális elválasztást szúrhatunk be vele a dokumentumba.
A <HEAD> elemről
A <head></head> tag-ekkel jelöljük a dokumentum fejrészét. A fejrészbe kerülő információk nem jelennek meg a weblapon, viszont gyakran nagyon fontos extra információt szolgáltatnak a böngészőknek és a keresőrobotok is beleolvasnak, miközben az oldalunkat próbálják értelmezni. A <head> elem gyakorlatilag a META adatok tárolására szolgál, itt helyezzük el böngésző lapfülén megjelenő címet, a betöltendő formázásokat, szkriptek hivatkozását, a karakterkódolást és más kiegészítő információkat. Helye a <html>… és <body> (törzs) elem között van.
<!DOCTYPE html>
<html>
<head>
<title>Az én honlapom</title>
<meta charset=”UTF-8″>
</head>
<body><p>A HTML head elem tartalmazza a META adatokat.</p>
<p>A metaadatok a html dokumentum adatait tartalmazzák.</p></body>
</html>
Angol nyelvű területen gyakran összetévesztik a HEAD (fej) elemet a HEADING (leginkább cím h1,h2,h3…) elemmel, angolul rengeteg nagyszerű ingyenes forrás áll rendelkezésre a webfejlesztéssel kapcsolatban, ha ilyen oldalakat is olvasol vigyázz mert a head elemnek önmagában semmi köze a heading-hez.
Forráskód, hogyan puskázzunk
Most már tudod, hogy ha látsz egy gyönyörű honlapot, azt a böngésző a betöltött forráskód alapján jeleníti meg a képernyőn. A tanulás során előfordul, hogy kíváncsiságból vagy hibakeresés során meg szeretnénk nézni a megjelenített tartalom forráskódját. Ehhez minden modern böngésző tartalmaz eszközöket, a legegyszerűbb az egér jobb gombjával kattintani a weboldalra, és a felugró menüben kiválasztani az „oldal forrása” parancsot. Gyakorlatilag ezt a kódot tölti le a böngésző a webszerverekről, és ezt alakítja át a szabványnak megfelelően emberi fogyasztásra.
A bonyolult forráskód megjelenítésén kívül, lehetőségünk van egy-egy elem alapos vizsgálatára is működés közben, ez hasznos lehet a hibakeresés során. A fentiekhez hasonlóan kell eljárnunk, de ezúttal elem vizsgálata parancsot kell keresnünk. Az elemzés során nem csak a forráskódot láthatjuk, hanem az ahhoz kapcsolódó stílus beállításokat, szkripteket, különböző képernyőméreteken nézhetjük meg az oldalunkat, a sebességét figyelhetjük és kipróbálhatunk módosításokat is a forráskódban.
Ennyi fért bele a leckébe mára, a végére egy kis kód a <hr> (horizontal rule) különböző változataihoz. Másold az editorba, mentsd el a megfelelő formátumban, és nézd meg hogy jelenik meg a böngészőben. Elemezd a forráskódot és próbáld meg módosítani a böngésző paneljein (röptében).
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<style>
body{
background-color: #f0f0f0;
width: 700px;
float: center;
}hr.style1{
border-top: 1px solid #8c8b8b;
}hr.style2 {
border-top: 3px double #8c8b8b;
}hr.style3 {
border-top: 1px dashed #8c8b8b;
}hr.style4 {
border-top: 1px dotted #8c8b8b;
}hr.style5 {
background-color: #fff;
border-top: 2px dashed #8c8b8b;
}hr.style6 {
background-color: #fff;
border-top: 2px dotted #8c8b8b;
}hr.style7 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}hr.style8 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}
hr.style8:after {
content: ”;
display: block;
margin-top: 2px;
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}hr.style9 {
border-top: 1px dashed #8c8b8b;
border-bottom: 1px dashed #fff;
}hr.style10 {
border-top: 1px dotted #8c8b8b;
border-bottom: 1px dotted #fff;
}hr.style11 {
height: 6px;
background: url(https://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
border: 0;
}hr.style12 {
height: 6px;
background: url(https://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
border: 0;
}hr.style13 {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}hr.style14 {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}hr.style15 {
border-top: 4px double #8c8b8b;
text-align: center;
}
hr.style15:after {
content: ‘\002665’;
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}hr.style16 {
border-top: 1px dashed #8c8b8b;
}
hr.style16:after {
content: ‘\002702’;
display: inline-block;
position: relative;
top: -12px;
left: 40px;
padding: 0 3px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17:after {
content: ‘§’;
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}hr.style18 {
height: 30px;
border-style: solid;
border-color: #8c8b8b;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.style18:before {
display: block;
content: „”;
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #8c8b8b;
border-width: 0 0 1px 0;
border-radius: 20px;
}
</style>
</head>
<body><h1>Normál Címsor</h1>
<h1 style=”font-size:60px;”>Nagyobb h1 Címor</h1>
<br>1
<hr class=”style1″>
<br>2
<hr class=”style2″>
<br>3
<hr class=”style3″>
<br>4
<hr class=”style4″>
<br>5
<hr class=”style5″>
<br>6
<hr class=”style6″>
<br>7
<hr class=”style7″>
<br>8
<hr class=”style8″>
<br>9
<hr class=”style9″>
<br>10
<hr class=”style10″>
<br>11
<hr class=”style11″>
<br>12
<hr class=”style12″>
<br>13
<hr class=”style13″>
<br>14
<hr class=”style14″>
<br>15
<hr class=”style15″>
<br>16
<hr class=”style16″>
<br>17
<hr class=”style17″>
<br>18
<hr class=”style18″></body>
</html>