Újabb lépés

Lássunk néhány alapvető formázási lehetőséget.

Amikor a HTML szerkesztőben írunk, a sortöréseket, bekezdéseket attribútumok segítségével tudjuk létrehozni. Az előző leckében létrehoztunk egy kezdetleges weboldalt, melyre tetszőlegesen írhatunk különböző hosszúságú szöveget. Ám, ez nem úgy működik, mint egy szövegszerkesztő. Tehát, a sortöréseket, bekezdéseket nem tudjuk simán az enter billentyű lenyomásával létre hozni.

Erre valóak pl. az alábbi tagek:

<p>bekezdés „paragrafus” közé írt szöveg</p>

nyitó tag nélküli sortörés </br>

Bekezdések és sortörés

Megfigyelhető a különbség. Míg a bekezdések közötti távolság akkora, mintha üres sort hagytunk volna, a sortörésnél ez a távolság kisebb. 

Sortöréseket természetesen a bekezdéseken belül is hozhatunk létre

Fejlécek – a szöveg tagolásához elengedhetetlen, címek, fejezetek, bekezdések kiemelésére szolgál

<h1>címsor1</h1>

<h2> címsor 2</h2>

<h3> címsor 3</h3>

<h4> címsor 4</h4>

<h5> címsor 5</h5>

<h6> címsor 6</h6>

Alapbeállítással így néznek ki a címsorok

Megfigyelhetjük, hogy különböző betűnagyságú címsorokat hoztunk létre, melyek mind új sorban és bekezdésben kezdődnek. mégsem kellett bekezdés, vagy sortörés taget alkalmaznunk.

Itt következzék egy rendhagyó tag, mely nem nyitó- és záróelemből tevődik össze:

<hr/>

Egy folyamatos vízszintes vonalat tudunk így létre hozni, ami szintén a tagolásban játszik szerepet.

Ez végigfut az oldal teljes szélességében

Szövegen belüli formázások:

<i>dőlt betűs „italic” szöveg</i>

<b>félkövér „bold” betű</b>

<u>aláhúzott „underline” szöveg</u>

<s>áthúzott „strong” szöveg</s>

készíthetünk ^felső vagy <sub>alsó</sup> indexet.

A sorokon belül, tetszés szerint  <big>nagyíhatunk</big> vagy<small> kicsinyíthetünk</small> egy-egy részletet.

Mindez böngészőben így néz ki

A fenti lehetőségeket tetszés szerint kombinálhatod. Játssz velük bátran, kísérletezz!

Ahogy látom, éppen elég elfoglaltságot ad a ma eddig leírt rész, így legközelebb nézünk meg  néhány, bönészők által is támogatott betűtípust,valamint most már tényleg színezgetünk is. :)

Kezdjük el a tanulást és a munkát

Most, hogy minden egyebet félre tettem, reményeim szerint havonta 2-3 alkalommal jelentkezni fogok újabb bejegyzésekkel. Ezzel elsősorban magamat szeretném ösztönözni és általa Benneteket is.

Lássuk, miről is szól egy weboldal! Amit mi látunk csak a jéghegy csúcsa. Mindennek a hátterében az internet globális és rohamos elterjedése áll.

A történet

1969. végén az Amerikai Védelmi Minisztérium kutatóintézetében kifejlesztett távolsági számítógép-hálózatot az egyetemek és kutatóintézetek rendelkezésére bocsájtották. A számítógépek és a hálózat rohamos fejlődésének köszönhetően az internet robbanásszerű növekedésnek indult.

Az internet hálózatába kötött számítógépek IP-cím alapján kommunikálnak egymással. Ez alapján egy számítógép egyértelműen beazonosítható az interneten. Mivel ezen IP-címek nehezen megjegyezhetők, kialakították az ezekhez rendelhető betűkből álló domain-neveket.

Így a domain-nevek és az URL (Uniform Resource Locator - egységes forrásazonosító) segítségével tudjuk elérni az internetre kapcsolt számítógépek szolgáltatásait. Egy teljes URL: https://www.google.hu/ .

Megfigyelhetitek, hogy a domain-néven (google) kívül tartalmaz még az URL egy "www" azaz w3 rövidítést, valamint "http" illtve "https" elemeket is.

Ezek jelentéséről bővebben tájékozódhattok a wikipédián itt és itt.

HTML

E kis bevezető ismeretanyag után jöhet amiért itt vagyunk.

Nevezetesen, a HTML (Hypertext Markup Language, azaz hiperszöveg leírónyelv). Fordíthatnánk  jelölőnyelvnek is, hiszen úgynevezett "tag"-ekből (ejtsd: teg) épül fel, melynek fordítása talán jelölőcímke lehetne.

Szerencsére a kezdeti szerkesztgetéshez nincs szükség költséges programokra, a sima Jegyzettömb is megteszi. Amennyiben színesben szeretnéd látni amit beírtál, szerezz be Notepad++ néven futó ingyenes forráskód-szerkesztőt mondjuk az Origo Szoftverbázis weblapjáról.

Ha mindezzel megvagy, felhúzhatod az első "weboldalad".

Mint már említettem, a HTML-kód tagekből épül fel, melyeknek rendszerint nyitó és záró eleme is van. Néhány kivétel van ezen szabály alól, de jellemzően <kacsacsőr között indul> és </perjeles kacsacsőr között záródik> egy-egy tag. Nézzük a legegyszerűbb forráskódot!

Másold le a képen láthatóakat

Írd le a Jegyzettömbbe a képen láthatóakat!

Megfigyelheted, hogy a dokumentumot <html> nyitó taggel indítottam és </html> záró taggel fejeztem be. Ez maga a weboldal. Ami közé kerül, az a tartalom. A <body> </body> közé eső rész pedig az oldal törzse. Csak az lesz látható a weboldalon, amit ezek közé írsz. Most ments el amit készítettél egy külön mappába, és ne felejtsd el a név mögé írni a kiterjesztést: .html

Ha ezzel végeztél, meg is nyithatod a böngésződdel.

Elkészült az első weboldalad!

A következő írásomban néhány jelölőcímkével ismertetlek meg. Színezni, alakítgatni is fogunk a HTML-en belül. A bonyolultabb formázás majd jóval később következik. Az új HTML szabvány szigorításai és az egyre nagyobb látványélmény iránti igény miatt létrehozták CSS-t (Cascading Style Sheet, azaz lépcsőzetes stíluslap) amelyre hivatkozva a HTML kódunk új ruhát ölt.