HTML és CSS Alapok

HTML És Css Alapok

Amit már az elején leszögeznék az az, hogy a HTML és a CSS NEM programozási nyelvek. A HTML egy leírónyelv ami felcimkézi a dokumentumunkat és ezek a cimkék lesznek a böngészők számára az utasítások,amely alapján tudni fogja hogy az oldalunknak SZERKEZETILEG hogyan kell felépülnie. A HTML a HyperText Markup Language (Hiperszöveg Leíró Nyelv) kezdőbetűi. Azt hogy hogyan kell az oldalnak kinéznie azt CSS Szabályokkal adhatjuk meg.

Fejlesztőkörnyezetek közül ha valaki nagyon magyar nyelvűhöz ragaszkodik akkor a Notepad++ legújabb változatát tudom ajánlani ( https://notepad-plus-plus.org/download/ )

Ha nem riadsz meg az angol nyelvtől és kicsit komolyabb webfejlesztő környezetre vágysz ami ingyenes,akkor a Brackets nevű fejlesztő környezetet ajánlom ( http://brackets.io/ )

És végül de nem utolsó sorban ha professzionális fejlesztőkörnyezetre vágysz amivel mindent egy helyről tudsz kezelni, jó sok plugin van hozzá, a lehető legjobban gyorsítja a munkád, és meg is tudod fizetni, akkor a PhpStormot ajánlom ( https://www.jetbrains.com/phpstorm/ 30 napos próbaverzió is van, a teljes kb 6000Ft/hó vagy 60 000Ft/év áron érhető el).

Első körben amivel kezdeném hogy a böngészők az utasításokat fentről lefelé, és balról jobbra haladva, soronként értelmezik.

Mint már említettem a HTML úgynevezett TAG (Ejtsd Teg) magyarul cimke szerű utasításokkal működik. Minden tag-nek van nyitó pl. <p> illetve záró </p> része.

A nyitó és záró tag-ek és a közéjük kerülő tartalom,együtt alkotja a html elem-et.

minden html oldalt .html nevű kiterjesztéssel kell elmenteni,és a főoldalt mindig index.html néven mentsük el,mert ha az oldaladat egy webtárhelyre kirakod és valaki beírja a weboldalad címét,és a főoldal nem index.html-ként lett elmentve akkor a kiszolgáló (server angolul) megbolondul és azt mondja a user (felhasználó magyarul) böngészőjének hogy ilyen oldal nincs,hagyjál békén.

 

Íme egy HTML oldal alap felépítése :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

 

A DOCTYPE és HTML elemek

<!DOCTYPE html>

Ez mondja meg a böngészőnek, melyik HTML verzió szabványt kell alkalmaznia. A HTML és css szabványait (sok más dolog mellett) a W3C ( World Wide Web Consortium) Gondozza,és fogja össze. Bővebb infó róluk (https://www.w3.org/ )

Az a lényeg hogy a HTML5 bevezetése óta elegendő csak ezt a deklarációt beírni a fejlesztőkörnyezetbe, viszont ennek mindig a legelső sorban kell szerepelnie!

Azután következik a <html></html> gyökér angolul root tag-ek. Tapasztalatom szerint a legjobb módszer ha rögtön úgy írunk egy html taget hogy először a nyitó tag pl. <div> ezután üssünk 2 entert majd a záró párja a </div> jön és így nem felejtjük el lezárni az elemet,mostmár nevezzük így. Egyébként gondolom mostanra észrevettétek hogy a nyitó és a záró tag között csupán egy per (/) jel a külömbség.

Megsúgom hogy a jobb fejlesztőkörnyezetek mondjuk a PhpStorm előre megírják nekünk a “vázat” így ezzel nekünk nem kell törődeni,ezzel is gyorsítva a munkánkat.

fontos dolog még a következő amikor is egy elemen belül hozunk létre egy másik elemet,azt mindig kezdjük beljebb egy behúzásnyival melyet a Tab billentyű egyszeri lenyomásával érhetünk el, így amellett hogy szemléltetve van az elemek közötti kapcsolat,a struktúra hogyan épül fel, ezáltal tisztább átláthatóbb kódot is Kapunk.

A Head elem

a <head></head> tagek közötti tartalom nem látható a böngésző azt nem jeleníti meg. Ide kerülnek az olyan beállítási információk mint például hogy a böngésző ismerjen mindenfajta karaktert (ezt pl úgy kell megadni a <head> nyitó alá hogy <meta charset=utf-8” /> ) innentől kezdve például az ékezetes karaktereket is ismerni fogja a böngésző.

<title></title>

Ez a tag szintén a headbe kerül,a közé kerülő tartalom lesz az oldal címe. Böngészőablak tetején vagy a fülre íródik ki,könyvjelző is ez alapján lesz elnevezve a könyvjelző is mikor elmentjük közé az oldalunkat.

<link />

A link tag segítségével például külső css (Cascading Style Shhets – Beágyazott Stíluslapok) fájlokat hivatkozhatunk be. Példa:

<link rel="stylesheet" type="text/css" href="css fájl helye/fájl neve.css" />

Ahol a rel (relationship – kapcsolat) a jelenlegi dokumentum és a linkelt dokumentum közötti kapcsolat,jelen esetben stíluslap, tipus text/css . A href-hez pedig annyit hogy ha a css fájl és az index.html ugyanazon könyvtárban vannak ( inkább tegyük egy css nevű könyvtárba ),akkor értelemszerűen a fájl neve.css kell csak. Kötelező attribútumok! A css-ről részletesen később.

továbbiak a link tag-ről:

http://www.w3schools.com/tags/tag_link.asp

<style>

Ennek a tag-nek a segítségével magába a html head részébe írhatjuk a css-t (csak kevés aloldalból felépülő weboldalaknál ajánlott,vagy ha minden aloldalt máshogyan akarunk felöltözetni ami nem annyira ajánlott). Példa (részletesen később):

<head>
<style>
body {
    background-color: #ffffff;
}

p {
    color: red;
    margin-left: 10px;
} 
</style>
</head>

továbbiak a style tag-ről:

http://www.w3schools.com/tags/tag_style.asp

<script>

Ez a tag külső és belső kliens oldalon a böngészőben futtatot többnyire javascript fájlt/kódot vár, példa mindkettőre (részletesen majd egy külön javascripttel foglalkozó blogban)

külső

<head>
<script src="main.js">
</script>
</head>

belső:

<head>
<script>
  alert('Szia!');
</script>
</head>

továbbiak a script tagről:

http://www.w3schools.com/tags/tag_script.asp

<meta />

Kereső motorok dolgozzák fel, name  content és http-equiv attribútummal rövid leírást tudunk adni az oldalunknak (description a name értéke) melyet pl a google az oldalunk címe alá tesz be leírásként. A keywords pedig kulcsszavak hozzáadására szolgál ezeket egymástól vesszővel elválasztva írjuk be, a description pedig egybefüggő hosszabb leírás, a http-equiv-vel pedig például be tudjuk állítani hogy az oldal megadott időközönként automatikusan ujra töltődjön. Majd a content attribútummal megadjuk a tartalmukat. példa:

<meta name="keywords" content="web,fejlesztés,webfejlesztés,stb" />

<meta name="description" content="az oldal egy hosszabb leírása jön" />

Karakterkódolás beállítása (HTML5-ben):

<meta charset="utf-8" />

Oldal automatikus frissítése megadott időközönként:

<meta http-equiv="refresh" content="3600">

Ezzel oldalunk óránként automatikusan frissül.

Azt is beírhatjuk kódunkba ki tervezte az oldalt (forráskódban látható csak):

<meta name="author" content="Fejlesztő Neve">

Metáról:

http://www.w3schools.com/tags/tag_meta.asp

Nagyjából ezek az elemek mennek/mehetnek egy html oldal fej részébe a head-be. Ne felejtsük el hogy ezeket az információkat a böngésző,látható módon nem jeleníti meg nekünk, kivétel ez alól a style és script tagek közé kerülő dolgok! 

A body tag vagyis a látható dolgok

A böngésző a <body> és </body> tagek közé kerülő tartalmat jeleníti meg! Mielőtt tovább mennénk,említést kell tegyek arról hogy a html-ben a tagek 2 csoportba sorolhatók:

  1. Blokk szintű elemek
  2. Soron belüli elemek

A másik fontos dolog az az hogy amíg a blokk szintű elemek tartalmazhatnak blokk szintű és soron belüli elemeket is, addig a soron belüli elemek kizárólag soron belüli elemeket tartalmazhatnak!

A legfontosabb a blokk szintű elemek:

  • <div></div>
  • <p></p>
  • <h1></h1> (h6-ig megy)
  • <header></header> új
  • <footer></footer> új
  • <section></section> új
  • <article></article> új
  • <canvas></canvas> új
  • <figure></figure> új
  • <audio></audio> új
  • <video></video> új
  • <nav></nav> új
  • <hr />
  • <ul></ul>
  • <li></li>
  • <ol></ol>
  • <dl></dl>
  • <dt></dt>
  • <dd></dd>
  • <table></table>
  • <tr></tr>
  • <td></td>
  • <form></form>

A legfontosabb soron belüli elemek:

  • <span></span>
  • <a></a>
  • <br />
  • <em></em>
  • <strong></strong>
  • <img />

Hogyan építsünk  weboldalt?

Itt kezdjük azzal hogy ne úgy csináljuk hogy gondolok egyet és az asztalon létrehozok egy mappát akármilyen névvel és oda behányok mindent, NEM!

Gondoljuk át mi lesz az oldalunk neve,ez legyen a mappa neve. Ebbe lesznek a .html kiterjesztésű fájlok (a főoldal mindig index.html legyen) továbbá hozzunk létre ezen a mappán belül egy css,egy images,és egy scripts nevű mappát. A css-be a stílusokat tartalmazó .css kiterjesztésű külső  fájlok kerülnek, az images mappába kerülnek az oldalhoz használt képek/logók, a scripts mappába pedig például külső Javascript fájljaink.

Például egy egyszerű de jól felépített oldal minimum 4 részből áll:

  • Fejléc
  • Menü
  • Főtartalom
  • Lábléc

Mielőtt bemutatnám hogyan kell egy alap oldalt felépíteni beszéljünk pár szót az attribútumokról. Minden html elemnek lehet attribútuma, az attribútumok további információkkal látnak el egy html elemet, és általában név/érték párként szerepelnek. Mindig a nyitó részben kell hogy szerepeljen a html tag neve és egy szóköz után.

Nos a két Globális attribútum amelyet minden elem felvehet az id illetve a class. Az id-vel egyedileg tudsz azonosítani html elemeket,ebből kifolyólag 2 db ugyanolyan id értékkel ellátott tag egy html oldalon belül nem lehet!

Továbbá nem kezdődhet számmal speciális karakterrel (.,@-), ha több szóból áll nem lehet szóközzel elválasztani. Vagy a Camel Case nevű formulát alkalmazzuk (minden második szó kezdőbetűje nagy betű), vagy alulvonást teszünk a szavak közé. Például egy p (bekezdés) elemet így látunk el id-vel:

<p id="egyedi_nev">
ide tartalom jön
</p>

<p id="camelCase">
tartalom jön
</p>

 

A class arra való hogy a html elemeket osztályokba sorolhassuk ennél fogva ugyanaz a class érték több html elemhez is hozzáadható és mikor ezekre vonatkozó css szabályokat írunk akkor a szabály minden olyan html elemre érvényesül amelyek ugyanabba a classba tartoznak.

Folytatás ahogy időm engedi…

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.