Címsor és fejrész

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>

h1-css h1 címsor

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.HTML hr tag

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>

HTML head elem

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.

forráskod képe
„AJÁNLATOT KÉREK” gomb vizsgálata Firefox böngészőben

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>

 

HTML attribútumok – 4. óra

Asz attribútumokról már volt szó a korábbi jegyzetekben is. Néhányat használtunk is a gyakorlatok során.  Az attribútumok feladata a HTML kódolás során az, hogy kiegészítő információval lássák el a HTML elemeket. Minden HTML elemnek lehet attribútuma, de az attribútumokat mindig a kezdőcímkében kell megadni. Az attribútumokat általában név-érték párban szoktuk megadni.

attribútumnév=”érték

A href attribútum

Az egyik leggyakrabban használt elem-attribútum pár az <a href=”… „>hivatkozás szövege</a>

A href attribútum értéke egy URL, amely meghatározza azt, hogy hova mutatnak a hivatkozások.

  • Ez lehet egy abszolút URL, amely pontosan meghatározza a hivatkozás célját (pl.: href=”http://dongopc.atw.hu/zene.html”),
  • lehet relatív URL, valamihez viszonyítva adjuk meg az elérhetőségét ez esetben az aktuális könyvtárhoz képest (pl.: a fenti oldalon elhelyezett linkben href=”zene.html”),
  • de mutathat egy oldalon belüli elemre is, ha az megfelelően azonosítható (pl.: href=”#azonosito”),
  • vagy egy másik protokollra (pl: https://, mailto:, ftp://… stb.),
  • vagy akár egy script is lehet az értéke.

Fájlok forrása

Amikor egy fájl forrását szeretnénk meghatározni egy HTML elemben az src attribútumot használjuk. A korábban bemutatott példákban az src értékét állítottuk be amikor egy audio fájlt hívtunk be a böngészőbe, alább pedig egy kép forrását határoztuk meg vele.

<img src=„viragok.jpg” width=„250” height=„300” alt=„viragos rét”>

Méretező attribútumok

A képek forrása mellett meg kell említeni a méretezés attribútumait is melyekkel a képek és videók szélességét (width) és magasságát (height) állíthatjuk be. A modern weboldalaknak különböző felbontású kijelzőkön is jól kell megjelennie. Másrészt célszerű takarékoskodni a kódolással, egy adott formázási beállítást többször is felhasználhatunk egy webhelyen. Ezért ritka, hogy pl. a képek méretezését a HTML elemekben végezzük el. A dokumentumok formázását a jövőben stíluslapokon fogjuk elvégezni, ám most még a könnyebb érthetőség miatt az elemcímkékben is kísérletezhetünk ennek az értékeivel.

<img src=„viragok.jpg”width=”250” height=”300alt=”viragos rét>

Alternatíva – alt

Ahogy már korábbi példákban szerepelt az <img> elem nélkülözhetetlen attribútuma az alt attribútum. Abban az esetben jelenik meg a tartalma, amikor a weblapon elhelyezett kép valamilyen oknál fogva nem jeleníthető meg. Ez leggyakrabban e-mailben érkező weboldalaknál fordul elő, ugyanis a legtöbb levelezőprogram alapértelmezetten biztonsági okokból letiltja a képek megjelenítését. Gondolnunk kell azokra  a látogatókra is, akik valamilyen kisegítő lehetőségként felolvasó szoftvert használnak az internet böngészésére. Számukra az egyetlen információ az oldalon elhelyezett képek tartalmáról az amit az alt értékeként megadtunk.

<img src=„viragok.jpg” width=„250” height=„300” alt=„viragos rét”>

Style – stílus mint attribútum

Egy elem megjelenését azaz stílusát módosíthatjuk ennek az értékével soron belül is. A dokumentum további részére nem hat ki. Értéke lehet szín, méretezés, szövegrendezés és még sok lehetőség, de ezeket a CSS résznél bőségesen fogjuk tárgyalni. Soron belüli használat során felülír minden globálisan meghatározott formázást.

<p style=„color:blue;font-size:46px;”>
Nagy kék <strong>vastag</strong> szöveg
</p>

Lang – nyelv beállítása

Ez egy fontos érték, a segítségével közölhetjük a böngészővel, hogy az adott elem milyen nyelven íródott. A nyelvi beállítás nem azonos a betűkódolás beállításával.

<!DOCTYPE html>
<html lang=”en-US>
<body>

</body>

</html>

Helyes szintaxisa: <elemcímke lang=„nyelvi kód”>. HTML5-ben már bármelyik elemhez hozzáadhatjuk, a régebbi verziókban még voltak kivételek. A fenti példában globálisan adtuk meg az attribútumot, tehát az egész HTML dokumentumra vonatkozni fog. Az értéke „en-US” a kisbetűvel szedett rész a nyelvi kód, a nagybetűs rész pedig a dialektusra utal, ha van ilyen. Jelen esetben amerikai angol. A nyelvi kódokat egy ISO szabványban az ISO 639-1 szabványban határozták meg. A magyar nyelv kódja hu, vagy hu-HU.

Kódolási ajánlás

A HTML5 címkékben nincs előírás arra, hogy kicsi vagy nagybetűvel kell e beírnunk a kódot. Az általános ajánlás az, hogy ahol csak lehet használjunk kisbetűt. A példákban általában mi is kisbetűvel kódolunk. A paraméterértékeket ajánlott idézőjelek vagy aposztrófjelek közé tenni, nem létfontosságú, de ajánlott. Ha értékként idézőjelet szeretnénk használni, tehetjük azt aposztrófjelek közé is.

<h1 title=‘Don „Dragon” Wilson’>A véres játék hőse</h1>

Végül összefoglalva a mai leckét videó helyett a szélesebb kijelzővel rendelkező olvasók működés közben is megtekinthetik az attribútumokat az alábbi kód mellett. Bal oldalon a forrsákód látható, jobb oldalon pedig az eredményét lehet kipróbálni.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”XqeGoR” default_tab=”html,result” user=”dongopc”]See the Pen <a href=’https://codepen.io/dongopc/pen/XqeGoR/’>XqeGoR</a> by Zoltán Tábit (<a href=’https://codepen.io/dongopc’>@dongopc</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

 

 

Dokumentum struktúra és az alapelemek – 3. óra

Ahogy a nyomtatott dokumentumokban kialakítunk egy struktúrát, ugyanígy szükség van valamilyen rendezettség kialakítására a HTML dokumentumokban is. Egy nyomtatott dokumentummal szemben egy weboldalnak nem csak az olvashatóság miatt kell bizonyos formai követelményeknek megfelelni. Bár kétség kívül a legfontosabb a tartalom emberi fogyasztásra való alkalmassá tétele.

 

Figura nagyítoval
Kattints a figurára!

A XXI. század modern eszközei olykor még a „mesterséges intelligencia” felhasználásával is fürkészik minden egyes másodpercben viselkedésünket, és az általunk fogyasztott tartalmakat. Talán mindenki hallotta már a keresőrobot kifejezést, de ha nem, az biztos hogy senkinek sem kell bemutatni a Google-t az egyik legismertebb internetes keresőprogramot. Nem a Google az egyetlen keresőprogram az interneten, ott van még mellette a Bing, a Yahoo és a Yandex, hogy csak az ismertebbeket említsük, vagy ott a különc DuckDuckGo is.

Keresőrobotok a XXI. században

Mit várunk mi a keresőrobotoktól, és hogy lehetséges ez?

Nekem kicsi koromban mindig azt mondta az édesanyám, hogy az a jó számítógép, amelyik minden kérdésre tudja a választ. Ha csak ennyi lenne az elvárásunk a modern keresőprogramokkal, és az internet segítségével már nagyon sok „jó számítógépet” el lehetne adni a boltokban.

Amikor elromlott a közel húsz éves autóm rákerestem a hibákra az interneten és azt vártam a Google majd megmondja mit kell csinálnom. Majd amikor egy pár hét múlva még valami elromlott, már a gondolataimat is kitalálta és néhány szó begépelése után kiegészítette velük a keresőkifejezést

– Hogy lehetséges ez?

Azt, aki valami titkos összeesküvést sejt a jelenség hátterében, ki kell ábrándítanom nem történt csoda, és nem az UFO-nauták ültettek telepatikus képességekkel rendelkező halacskát a fülünkbe, hogy lehallgassák a gondolatainkat. Egyszerűen az adatok világméretű feldolgozásának eredményét, strukturált értelmezését látjuk viszont egy weboldalon megjelenítve a mi igényeinkre szabva.

Strukturált tartalom és egy kis SEO

Azt a munkát, amit azért végzünk, hogy egy webhely minél jobb pozíciót foglaljon el a keresőmotorok találatai között keresőoptimalizálásnak, vagy idegen szóval SEO-nak (Search Engine Optimization) hívjuk. Ezen belül is megkülönböztetünk on-site és off-site SEO-t. Ennek a cikksorozatnak nem célja hogy a SEO eszközeit tárgyalja, de időnkét említést teszünk majd egy-egy eleméről, ha az szorosan kapcsolódik a tanult anyaghoz. Ám fontos tudni hogy a technika villámgyors fejlődésével a keresőoptimalizálás külön szakmává vált a weboldalkészítésen belül. Egy modern mobiltelefonra optimalizált weboldalnál még az is szempont, hogy a felhasználó hol érinti meg a képernyőt, miközben az általunk gyártott tartalmat fogyasztja. A jövőben valószínűleg a tartalom által kiváltott érzelmi reakció is egy szempont lesz (pl. iphone 3d face recognition) a keresők által készített rangsorban ugyanazon keresőkifejezésre.

 

érintések egy weboldalon
Érintéstérkép a heatmap oldalán

A címek hierarchiája

Ahhoz hogy a keresőmotorok is tudják mit tartalmaz az oldalunk, mik a kulcsfontosságú információk, illetve az olvasók is könnyen áttekinthessék a szöveget, elengedhetetlen valamiféle ügyesen megtervezett hierarchia kialakítása. Szerencsére a HTML mindkettőre szinte egyetlen lépésben ad lehetőséget.  Az egyik ilyen elem a Címsor.

A HTML5 dokumentum alapvető felépítéséről az előző óra anyagában már volt szó, de ott még csak egyetlen címsort használtunk. Ahogy a szövegszerkesztőben úgy a HTML dokumentumokban is lehetőségünk van címek és alcímek segítségével hierarchia kialakítására az oldalon. A szabvány szerint a HTML hat különböző cím jelölésére ad lehetőséget, ezeket az elemeket szokás szerint nyitó és záró tag-ekkel jelöljük.

<h1>Legnagyobb és legfontosabb cím</h1>

<h2>nagyobb és fontosabb</h2>

<h3>nagy és fontos</h3>

<h4>kicsi és kevésbé fontos</h4>

<h5>még kisebb és kevésbé fontosabb</h5>

<h6>legkisebb és legkevésbé fontosabb címsor</h6>

H1-H6-ig tag

Ennek ellenére nagyon ritka az, hogy mind a hat tag-et felhasználjuk egy weboldalon. A Dongó PC webhelyén legtöbbször a h1 és h2 címsorokat használjuk, néha h3 is előfordul, de ennél kisebb kiemelésre még nem volt szükség. A címsorok a keresőmotorok számára is fontos információt hordoznak az oldal tartalmáról.

Bekezdések a weblapon

Miután kigondoltuk a figyelemfelhívó címsorokat, ki is kell fejtenünk azokat. A könyebb olvashatóság érdekében gondolatainkat érdemes bekezdésekre tagoltan megjeleníteni. Erre az angol paragraph (bekezdés, cikkecske) szó rövidítéséből a <p> tag szolgál. A bekezdéseket nyitó és zárótagok közé kell helyeznünk valahogy így:

<p>Ide kerül az új bekezdés szövege…</p>

Megfigyelhetjük, hogy egy HTML dokumentumban az internetböngésző csak azokat a formázásokat hajtja végre, amire mi utasítást adunk. A sortörést automatikusan elvégzi a képernyő széléhez érve, hacsak valami más parancsot nem adtunk. Ha mi magunk szeretnénk sortörést beszúrni, akkor erre egy üres elem a <br>  szolgál. Az üres elemeket HTML5 szabványban nem szükséges bezárni, ha valamiért mégis szükségünk lenne rá (XML kompatibilis dokumentum), rögtön a nyitó tag-ben kell megtennünk: <br />.

A HTML dokumentumok nem szabványos A4 papírméretre készülnek, hanem a különböző méretű és felbontású monitorok képernyőjére. Ráadásul a mobilinternet elterjedésével nem csak számítógép monitorára, hanem az okostelefon apró kijelzősére is gondolnunk kell. Erről még sokat fogunk beszélni a CSS résznél a HTML alapok után.

html5 paragraph
Bekezdés a HTML-ben

Lista és a felsorolás

A háziasszonyok biztosan néztek már receptet az interneten. A hozzávalókat nem biztos hogy könnyű lenne megtalálni egy bekezdésen belül folyó szövegben. Szerencsére erre is van megoldása a HTML két fajta lista megjelenítésére is lehetőséget ad, az egyik a rendezetlen (unordered), a másik pedig a számozott rendezett (ordered) lista. A listák készítése eltér az eddigi gyakorlattól, mert nem csak a lista kezdetét és végét kell jelölnünk tag-ekkel, hanem a listán belüli listaelemek kezdetét és végét. Ezek a tag-ek szintén az angol szavak rövidítéséből származnak. Rendezett listát jelölő tag: <ol>, a rendezetlen listáé <ul>, a listaelemeket pedig <li> tag-gel kezdjük. A HTML elemek egymásba ágyazhatók, de mindig figyelni kell arra hogy a belső elemet még a külső elem lezárása előtt zárjuk.

lista
HTML lista

Hivatkozások és attribútumok

A weboldalakon a navigáció megkönnyítése érdekében linkeket (hivatkozások) helyezhetünk el. Alapvetően megkülönböztethetünk külső és belső linkeket az alapján hogy az a mi webhelyünkre, vagy egy másik külső helyre mutat. A link jelölésére a HTML-ben az <a> tag szolgál. A link célját a href attribútum határozza meg, értéke pedig a hivatkozás címe lesz, ahova a link mutat, kattintáskor ide viszi az olvasót. az attribútumot a nyitó tag-en belül kell elhelyezni, plusz információval egészíti ki a különböző elemeket. Az értéket idézőjelek között kell megadni. A HTML5 nem kis-nagybetű érzékeny, de ajánlott minden a tag-eket kisbetűvel írni. Az alábbi példa egy olyan linket tartalmaz ami külső hivatkozásként a zagyva szövegek oldalára visz.

<a href=”https://hu.lipsum.com/”>Lorem ipsum</a>

Természetesen a böngésző csak a Lorem ipsum feliratot jeleníti meg, a tag-eket nem. A hivatkozások mutathatnak ugyanabban a mappában egy másik HTML dokumentumra is, vagy egy másik mappában lévő fájlra is, de akkor az elérési utat is meg kell adnunk.

<a href=”/pictures/pictures.html„>Képek</a>

Ezzel viszont legyünk óvatosak, mert bár a Windows nem tesz különbséget a kis- és nagybetűk között, más operációs rendszereknél /pictures/pictures.html és a /pictures/Pictures.html két különböző fájlt jelent. Nem biztos hogy beállították ennek a kiküszöbölését a webszerveren.

Még egy gondolat: ha elvittük a  látogatót egy oldalra a webhelyünkön belül érdemes abban is segíteni, hogy visszataláljon. Erre is készítsünk neki egy linket. Legyen a példa kedvéért a kezdőoldalunk neve index.html (szabványos kezdőoldal), ahol egy listában soroljuk fel a receptekre mutató linkeket. Amikor az olvasó egy ilyen hivatkozást követve elolvasta a pörkölt receptet gondoskodnunk kell arról, hogy visszajusson a receptlistát tartalmazó oldalunkra, ha meggondolta volna magát és valami mást főzne.

<a href=”/index.html”>Vissza a főoldalra</a>

Képek a weblapon

A fenti példákat követve tegyük fel, hogy szeretnénk egy szakácskönyvet készíteni. Tudjuk már hogy adhatunk címet neki, azt is tudjuk hogyan adhatjuk meg a különböző ételek alcímeit, és a hozzávalókat szépen listában felsorolva. De szeretnénk az elkészült ételekről fotókat is közzé tenni a honlapon.

A képek dokumentumba ágyazására az <img> tag szolgál. A képeknek több attribútuma is van ezeket illik mind megadni.

<img src=”dongo.jpg” alt=”rovar” width=”100″ height=”150″>
Az attribútumok pedig:
  • src – a kép forrása, ha ugyanabban a mappában van mint az oldal akkor elég csak a kép neve, egyébként viszont az elérési út is kell,
  • alt – egy alternatív szöveg, ha a kép nem jelenik meg valamilyen oknál fogva (letiltották a képeket, vagy át lett helyezve máshova), vagy ha a látogató felolvasó programot használ,
  • width – a kép szélességét határozza meg képpontban,
  • height – a kép magassága szintén képpontban.

Ennyi fért bele a mai leckébe, az oldal alján pedig a gyakorlatról készült videót láthatjátok. Érintőlegesen végigmentünk néhány alapelemen, a későbbiekben még részleteiben is beszélni fogunk a paraméterekről. Tanulni csak úgy lehet, ha eleget gyakorolunk. A <!DOCTYPE html> nevű Facebook-csoportban várunk benneteket a feladatokkal, és ha elakadnátok, vagy valami nem működne nálatok, ott a kérdéseiteket is feltehetitek.

 

A videóban, és gyakorlaton mi a Notepad++ programot használtuk, amely ingyenes és a linkre kattintva letölthető.

Text Editorok és az első kód – 2. óra

Beszéljünk egy kicsit a szövegszerkesztőkről. Számtalan különböző tulajdonságokkal felvértezett program elérhető az interneten, de általában a különböző operációs rendszerek beépítve tartalmaznak egy, vagy két szövegszerkesztő programot.

Szövegszerkesztők csoportosítása

Alapvetően a szövegszerkesztőket három különböző típusra különíthetjük el:

  • Egyszerű – Text editor
  • Professzionális – Word processor
  • Kiadványszerkesztő – Desktop publishing

Bár a weboldal készítéséhez számtalan program fellelhető az interneten, még a profi webprogramozók is gyakran csak egy egyszerű szövegszerkesztőt „editort” használnak. Hogy kinek melyik a legjobb választás, az egyrészt ízlés, másrészt az adott feladatok függvénye.

Word processor

Kezdjük talán a legrosszabb választással (weboldal készítés szempontjából), ez a széles körben ismert MS Word.

MS Word
Microsoft Word – Office 365

A Word alapvetően egy WYSIWYG ((!) What You See, Is What You Get – Amit látsz azt kapod) szövegszerkesztő, nyomtatott dokumentumokat hozhatunk vele létre, ezek a dokumentumok rengeteg szövegformázást, és láthatatlan formázási jelet tartalmaznak. A Word képes a dokumentumokat html formátumba konvertálni, de az így átalakított szöveg sok fölösleges elemet tartalmazhat, ami a későbbi optimalizálás során még problémákhoz is vezethet.

Desktop publishing

A kiadványszerkesztőket alapvetően nyomdai célokra tervezték, erősségük a tipográfiában van. Bár ezek között is vannak már „hibrid” termékek (pl. Adobe InDesign), melyek képesek weboldalak előállítására, egy oldal funkcióinak beállításakor lehetnek nehézségeink. Az ilyen programok több nyomdai szakember munkáját hivatottak kiváltani, és professzionális oldalak létrehozásához, nagyon magas szinten kell elsajátítani kezelésüket.

Text editor

A text editor, vagy más néven egyszerű szövegszerkesztő az egyik legjobb választás kódolására. A különböző programozási nyelvekhez rengeteg segítséget nyújthatnak a parancsok szintaktikai kiemelésével, vagy a kód automatikus tagolásával, rendezésével.

Egy weboldal készítésekor a kódolás során mi magunk mondjuk meg a böngészőnek hogyan kezelje különböző tartalmakat. Az internet fejlődésével egyre szélesebb körű tartalmak megjelenítését várták el a böngészőtől az emberek. Kezdetben elég volt az egyszerű szöveg, meg néhány kép. Később mindenféle bővítményekkel (plugin) egészítették ki a böngészőjüket, hogy az képes legyen megjeleníteni animációkat, zenét, videót. A HTML5 ezen a téren is követte a fejlődést a W3C sztenderdjei szabványosították az új elemek kódolását is, így a modern böngészők bővítmény nélkül is képesek megjeleníteni pl. egy HTML5 weboldalon lévő videót. Egy nagyobb weboldal szerkesztése közben több különböző kódnyelvet használhatunk a html-be ágyazva.

Notepad – Jegyzettömb (Windows)

Tanulás szempontjából úgy hisszük a legjobb választás mindenképp egy egyszerű szövegszerkesztő. A Windows beépített szövegszerkesztője a Notepad, melyet a Windows-menübe gépelve könnyen megtalálhatunk megfelel erre a célra.

notepad editor

A weboldalkészítést csak gyakorlattal lehet elsajátítani, a legjobb módszer a tanulásra, ha mindent kipróbálunk. Keressük meg a számítógépen a Notepadot, gépeljünk bele egy tetszőleges kódot, és mentsük el.

Én ezt a kódot használtam:

<!DOCTYPE html>
<html>
<body>

<h1>Címsor</h1>

<p>Bekezdés…</p>

</body>
</html>

Néhány dologra viszont nem árt figyelni! A Windows a fájlok kiterjesztése alapján dönti el, mihez milyen programot kell társítani. A fájl kiterjesztése az utolsó pont utáni karaktersorozat: „valami.txt” az egyszerű szövegé, „valami.htm” vagy „valami.html” a HTML fájloké. Az, hogy a Notepad bezárása után milyen ikont és milyen programot társít majd a Windows attól függ milyen kiterjesztéssel mentjük el. Az alapértelmezett kiterjesztés a „.txt” Ezért nekünk másképp kell mentenünk, válasszuk a „Fájl” menü „Mentés másként…” parancsát, majd a fájl típusa mező „Minden fájl (*.*)” típus kiválasztása után saját magunk adhatjuk meg a kívánt név után a kiterjesztést.

notepad-mentes
Notepad mentés másként parancsa után

A másik fontos dolog a karakter kódolás beállítása. Dióhéjban a karakterkódolásra azért van szükség, mert a számítógép a betűket vagy más karaktereket számok formájában tárolja. Különböző szabványok terjedtek el arra vonatkozóan melyik számérték milyen karaktert jelent. Erről részletesen olvashatsz a Wikipedia cikkében. Hogy a világ minden pontján ugyanaz a betű jelenjen meg a weboldalakon a különböző számítógépeken ezt is szabványosítani kellett valahogy. Erről a későbbiekben még lesz szó, de most elég annyit tudni, hogy a HTML5 szabványos karakterkészlete az UTF-8. Ne felejtsük el beállítani a jegyzettömbben a megfelelő karakterkódolást is.

Feladat:

Gyakoroljunk, hozzunk létre különböző dokumentumokat, próbáljuk ki mi történik ha átírjuk a kódot, használjunk több sorközt, nézzük meg milyen fájlt kapunk ha nem .html kiterjesztést használunk.

Végül pedig egy kis videó Windows 8.1 és a Notepad használatával.

HTML bevezetés – az 1. óra

Mi is az a HTML?

A HTML egy angol mozaikszó „HiperText Markup Language” azaz hiperszöveg jelölőnyelv. Szerencsére ez nem valami földöntúli kód, hanem egy egyszerű leíró nyelv, amely megmondja a böngészőknek, hogyan kell megjeleníteni a dokumentumokat. A weboldalak HTML elemekből épülnek fel. A HTML elemeket címkék jelölik. A címkéket idegen szóval „tag„-nek mondjuk. Ezekkel a címkékkel jelöljük a különböző típusú tartalmakat egy dokumentumban. Ilyen tartalom lehet a dokumentum fejrésze, egy táblázat vagy egy bekezdés. A webböngészők nem jelenítik meg ezeket a címkéket, de ezeket használjuk a tartalom elrendezésére az oldalon.

Nézzünk egy konkrét példát egy egyszerű HTML dokumentumra:

html kód

És akkor jöhet egy kis magyarázat a különböző elemekről:

  1. <!DOCTYPE html> minden HTML5 dokumentumot ezzel kezdünk. Ez a tag mondja el a böngészőnek, hogy ez egy HTML5 dokumentumot fog beolvasni.
  2. <html> gyakorlatilag a dokumentum kezdete,
  3. <head> fejrész elem, ide kerülnek majd a meta információk a dokumentumról,
  4. <title> ez az elem meghatározza a dokumentum címét,
  5. <body> a dokumentum teste, gyakorlatilag a látható tartalom,
  6. <h1> Címsor a dokumentumon belül (a legnagyobb),
  7. <p>bekezdés a dokumentumban.

Az oldal elemit nyitó és záró címkék közé helyezzük

<címkenév>tartalom…</címkenév>

Ahogy a fenti példában látható a zárótag abban különbözik a nyitótagtól, hogy egy / jelet is tartalmaz. Ahogy korábban említettük, a webböngészők beolvassák a HTML dokumentumot és megjelenítik a tartalmát, a címkéket kivéve. Azt hogy hogyan kell kialakítani a megjelenített oldal felépítését ezek a címkék mondják meg a böngészőnek.

HTML oldal szerkezete

Most nézzük meg egy egyszerű oldal szerkezetét!

forraskod
Oldal forráskód (nodepad++)

A könnyebb olvashatóság érdekében a kód begépelésekor tabulátorokat és soremelést is használtunk. Később ez jó gyakorlat lehet számodra is mert így áttekinthetőbb a forráskód.

Most pedig nézzük, hogy jeleníti meg a böngésző a fenti kódot!

firefox html dokumentum
HTML megjelenítése a Firefox böngészőben

Ha összevetjük a kódot a megjelenített lappal, látható, hogy a böngésző csak a <body>…</body> elemcímkék közötti tartalmat jeleníti meg. Hamarosan azt is megtudjuk, mire való a többi terület.

HTML verziók, a <!DOCTYPE> címke

A WWW fejlődésével fejlődött a weboldalakon megjeleníthető tartalom is. Ahhoz hogy a böngészők helyesen tudják megjeleníteni a különböző verziójú HTML webhelyeket, fontos hogy valahol megmondjuk a böngészőnek, hogy most épp melyik verziót kell értelmeznie.

A különböző HTML verziókról olvashatsz a Wikipedián is. Ez a tanfolyam a HTML legújabb verziójával a HTML5-el foglalkozik. A <!DOCTYPE> címkét használjuk a HTML verzió meghatározásához. Rögtön a dokumentum elején egyetlen egyszer kell zárótag nélkül használni. A HTML5 dokumentum helyes címkézése:

<!DOCTYPE html>

Ha kíváncsi vagy a HTML fejlődésére a Wikipedián is olvashatsz róla.

Egy kis történelmi áttekintés:

  • 1991 – HTML
  • 1995 – HTML 2.0
  • 1997 – HTML 3.2
  • 1999 – HTML 4.01
  • 2000 – XHTML
  • 2014 – HTML5

A szabványosítást a W3C konzorcium végzi világszerte vannak irodái, többek között Magyarországon is.

Ennyi volt mára a Webprogramozás óra. A következő alkalommal beszélünk egy kicsit a munkakörnyezetről, a megfelelő szerkesztőprogramról és elkészítjük az első weboldalunkat is. Lehet hogy annak aki egy kicsit már ismeri a weboldalakat unalmas ez a néhány óra, de ahhoz hogy később el tudjátok hárítani a hibákat, fontos hogy az alapjaitól értsétek a weboldalak működését. Ha kérdésetek van, tegyétek fel bátran itt, vagy a Facebook oldalunkon! Ha szeretnétek, csatlakozhattok a tanulócsoportunkhoz is, amit <!DOCTYPE html> néven találtok meg a Facebookon. Ha tetszett a cikk, osszátok meg bátran – segítsétek vele a mi munkánkat – és reméljük mi is segíthetünk vele nektek. Ha véletlen hibát találtok azt is jelezzétek, igyekszünk minél hamarabb kijavítani.

Webprogramozás, a 0. óra

A XXI. században az életünk nagy részét az Interneten töltjük. Híreket olvasunk, magazinokat nézegetünk, bújjuk a közösségi oldalakat, képeket és videókat töltünk fel és zenét hallgatunk az internetről. De vajon hogy lehetséges ez, mi van a színfalak mögött? Ha érdekelnek a válaszok, vagy esetleg szeretnél egy saját weboldalt, akkor ez a tanfolyam neked szól.

html kód

Egy olyan témában szeretnénk a segítségedre lenni, melyre nem csak hobbiként, hanem akár pénzkereseti lehetőségként is tekinthetsz a jövőben. Ez a téma pedig  a webprogramozás. Nagyon sok tanfolyam van az interneten, és egyre divatosabb az online tanulás. Egyre többen csinálnak weboldalakat is, de sajnos egyre több a mekmester-képző, ahol jó pénzért rövid idő alatt hihetetlen tudást ígérnek. Hát van egy jó hírünk és egy rossz is. A mi első két tananyagsorozatunk a HTML5 és a CSS3 teljesen ingyen hozzáférhető lesz a honlapon. Ha végigköveted velünk ezeket a leckéket képes leszel arra, hogy rendezett formában elhelyezz tartalmakat egy weboldalon, és azt is megtanulhatod, hogyan módosítsd ennek a tartalomnak a megjelenítést, beleértve a mai világban elengedhetetlen reszponzív (képernyőmérethez illeszkedő) weboldal készítését is.

Mi mindent megteszünk azért hogy segítsünk, és elmélyíthesd a tudásodat, mert hisszük azt, hogy ez a tudás mindenkié. Bármekkora munkát is fektetünk bele, kevesek vagyunk, ahhoz hogy megértsd hogy működik ez az egész, hogy sikeres legyél, kell még hozzá egy nagyon fontos tényező! Ez pedig te vagy. A te munkád, a szorgalmad az egyik legfontosabb. Hosszú lesz az út, és sok gyakorlás kell a sikerhez, de nem leszel egyedül, mert mi ott leszünk neked, ha elakadtál segíteni tudunk. És ott lesz még veled az élmény, ahogy lassan lépésről lépésre kialakul a saját weboldalad, melynek minden egyes centimétere, vagy pixelje a te kezed műve lesz.

 „Saját weboldalt szeretnék, mi kell hozzá?”

Nekem három dolog is eszembe jutott. Mindháromnak van előnye és hátránya is.

  1. Valamilyen weboldal készítő programot használsz. Az előnye, hogy gyorsan elkészítheted a weboldalad, csak a programot kell megtanulni használni. Viszont két hátránya is van; bármennyit is gyakorolsz vele csak annyit fogsz tudni, mint amennyit a program. Ahogy fejlődik a technika ez a tudás elavult lehet, és egy új programot kell vásárolnod, és kezdheted elölről a tanulást, ráadásul bonyolultabb dolgokat lehet meg sem tudsz majd valósítani vele.
  2. Valamilyen előre gyártott tartalomkezelő rendszert (CMS) rendszert használsz, ezzel már valószínűleg dinamikus tartalmat is (pl. adatbázisból generált adatokat) feldolgozhatsz, a Dongó PC is egy ilyen rendszerre épül (bár van benne kis szegelgetés), azért ennek is van hátránya. Ha valami egyedi dolgot szeretnél megvalósítani vagy vársz hogy valaki megírja neked a funkciót, vagy megbízol egy webprogramozót aki nem csak a programozáshoz ért, hanem ismeri a te kedvenc CMS-edet is. A másik nagy probléma, hogy ezek a rendszerek egy általános, mindenkinek mindenre jó legyen séma alapján készülnek. Sokszor fölöslegesen bonyolultak, és néha felesleges funkciókat is tartalmaznak. A bonyolult kód több hibalehetőséget és lassabb működést eredményez. Néha a hibák elhárítása komoly webprogramozói tudást is igényelhet.
  3. A végére hagytam a jó hírt meg a rosszat is. Mi a harmadik utat fogjuk bejárni, és talán akkor kezdjük a hátrányokkal. Ez a legnehezebb út, de nem kell megijedni a HTML/CSS-t bárki meg tudja tanulni, könnyebb lesz, mint egy idegen nyelvet elsajátítani. A jó hír pedig az, hogy teljes a szabadság, a weboldaladnak csak a fantáziád szabhat határt. Az itt megszerzett tudást pedig később még tartalomkezelő rendszerek szegelgetésére is felhasználhatod.

Nos, ha még mindig nem menekültél el akkor még egy jó hírem van, ehhez az egészhez nem lesz szükséged semmilyen különleges eszközre, vagy programra, csak egy webböngészőre (Chrome, Firefox), és egy egyszerű szövegszerkesztőre, mint a Notepad (Windows), a TextEdit (MAC) vagy a Gedit (Linux) alatt. És természetesen egy számítógépre billentyűzettel, elektromos feszültségre a konnektorban, és ha van macskád szükséged lesz egy radiátorra vagy legalább egy kartondobozra is, mert a macskák előszeretettel ülnek a monitor elé, vagy a laptop billentyűzetre ha az a legmelegebb pont a lakásban.

Remélem sikerült egy kis kedvet csinálni a tanuláshoz, és ha úgy érzed hasznos volt ez az információ legyen a napi jó cselekedeted hogy megosztod másokkal is.

cica dobozban