Kategóriák

3. nap

Tartalomjegyzék
  1. Jelmagyarázat
  2. HTML (Hypertext Markup Language)
    1. Mi a HTML?
    2. Oldalak létrehozása
    3. Elemek alapvető felépítése
    4. Alapvető struktúra
    5. Attribútumok
  3. CSS (Cascading Style Sheets)
    1. Mi a CSS?
    2. Selectorok
    3. Reszponzivitás
  4. Extra olvasnivaló

Jelmagyarázat

  • !DOCTYPE html: Egy deklaráció, amely jelzi a böngészőnek, hogy az oldal milyen HTML verziót használ.
  • a: A hivatkozásokat jelöli, vagyis a linkeket más oldalakra vagy az aktuális oldalon belüli más helyekre.
  • body: Az oldal tartalmát tartalmazó elem, amely minden látható tartalmat és elemet tartalmaz.
  • br: Egy sortörés elem, amely egy új sort kezd az oldalon.
  • h1, h2, h3, h4, h5, h6: Címek, amelyek különböző szinteken vannak hierarchizálva, az <h1> a legfontosabb, míg az <h6> a legkevésbé fontos.
  • head: Az oldal fejlécét tartalmazó elem, amely metaadatokat, stílusokat és egyéb információkat tartalmaz.
  • html: A HTML dokumentum gyökéreleme, amely tartalmazza az összes többi elemet.
  • img: Képek megjelenítésére szolgáló elem. Az src attribútum a kép forrását határozza meg, az alt attribútum pedig a kép alternatív szövegét adja meg.
  • input: Beviteli mezőket jelöl, például szövegmezőt, jelölőnégyzetet vagy legördülő menüt.
  • link: A külső stíluslapokhoz való hivatkozásokat jelöli, amelyeket a HTML dokumentumokhoz kapcsolnak a megjelenés testreszabása érdekében.
  • meta: Metaadatokat ad meg az oldal fejlécében, például a karakterkódolást vagy a leírást.
  • p: A bekezdés elem, amely szöveges tartalmat határoz meg.
  • title: Az oldal címét határozza meg, amely a böngészőablak tetején jelenik meg.

Ahhoz, hogy megismerkedjünk a weboldalak készítésének a művészetével, szükséges egy kis elméleti tudás, amivel nagyjából képben lehetünk. A következőkben ezekről lesz szó.

HTML (Hypertext Markup Language)

Mi a HTML?

A HTML (Hypertext Markup Language) egy olyan leíró nyelv, amelyet a weboldalak strukturálására és tartalmának formázására használnak. A HTML kódot “tagek” vagy “címkék” alkotják, amelyek leírják az adott elem funkcióját és megjelenését a böngészőben. A HTML-t a weboldalak alapjának tekintik, mivel definiálja azokat az elemeket és tartalmi részeket, amelyeket a böngésző megjelenít.

Oldalak létrehozása

A HTML használatával weboldalakat lehet létrehozni. Egy weboldal számos különböző HTML elemet tartalmazhat, például címeket, szöveges tartalmat, képeket, hivatkozásokat, űrlapokat stb. Minden elemnek megvan a saját címkéje.

Ahhoz, hogy egy új HTML fájlt hozzunk létre a fájl nevének kiterjesztése .html kell legyen, például index.html.

Elemek alapvető felépítése

A HTML elemeknek általában két része van: a nyitó címke (<tag>) és a záró címke (</tag>). Például, ha egy bekezdést szeretnénk megjeleníteni, akkor a következőképpen tennénk:

<p>Ez egy bekezdés.</p>

Ebben az esetben a <p> a nyitó címke, ami megkezdi a bekezdést, míg a </p> a záró címke, ami befejezi a bekezdést.

Léteznek olyan HTML elemek, amelyeknek nincs szükségük záró elemre vagy tartalomra. Ezek az elemek gyakran úgynevezett “üres” vagy “önzáró” elemek. Néhány példa az ilyen típusú elemekre:

  1. <img>: Az <img> elem képeket jelenít meg az oldalon, és nincs szüksége záró elemre. Példa:
<img src="image.jpg" alt="Kép leírása">
  1. <br>: A <br> elem egy sortörést tesz az oldalon, és szintén nincs szüksége záró elemre. Példa:
Ez egy sor.<br />
Ez a következő sor.
  1. <input>: Az <input> elemek különböző beviteli mezőket jelölnek, például szövegmezőt, jelölőnégyzetet vagy legördülő menüt. Ezeknek az elemeknek általában nincs szükségük záró elemre. Példa:
<input type="text" name="username" />
  1. <meta>: A <meta> elem metaadatokat ad meg az oldal fejlécében, például a karakterkódolást vagy a leírást. Ez jellemzően záróelem nélküli elem. Példa:
<meta charset="UTF-8" />

Fontos megjegyezni, hogy bár ezeknek az elemeknek nincs szükségük záró elemre, az attribútumokat (erről picit később) továbbra is meg kell adni nekik a helyes működéshez és megjelenéshez.

Alapvető struktúra

Egy HTML dokumentumnak tartalmaznia kell egy alapvető strukturát, amely magába foglalja a <!DOCTYPE html> deklarációt, amely jelzi a böngészőnek, hogy az oldal milyen HTML verziót használ, valamint a <html>, <head> és <body> elemeket.

<!DOCTYPE html>
<html>
  <head>
    <title>Oldal címe</title>
  </head>
  <body>
    <p>Üdvözlet!</p>
  </body>
</html>

Attribútumok

Az attribútumok a HTML elemek kulcsfontosságú részei, amelyek segítenek meghatározni az elem tulajdonságait vagy viselkedését.

Attribútumok az összes HTML elemhez hozzárendelhetőek

Minden HTML elemnek lehetnek attribútumai. Az attribútumok hozzáadhatnak további információkat vagy viselkedést az elemekhez. Például az <img> elem attribútumai lehetnek a kép forrása (src), alternatív szöveg (alt), stílusosztályok (class) stb.

Attribútumok definiálása

Az attribútumokat a nyitóelemen belül definiáljuk. Például:

<a href="https://example.com">Ez egy link</a>

Ebben az esetben az <a> elem href attribútuma meghatározza a link útvonalát.

Kulcs és érték formátum

Az attribútumokat kulcs-érték párok formájában adhatjuk meg, ahol a kulcs az attribútum neve, és az érték az attribútum értéke. Például:

<input type="text" name="username" />

Itt az input elemnek két attribútuma van: type, ami a beviteli mező típusát határozza meg, és name, ami az adat elküldésének azonosítóját jelöli.

Idézőjelek

Az attribútumok értékeit idézőjelek között adjuk meg. Ez lehet egyszeres (') vagy dupla (") idézőjel. Például:

<img src="image.jpg" alt="Kép leírása" />

Az attribútumok rendkívül fontosak a HTML-ben, mivel segítenek a tartalom strukturálásában és a weboldalak funkcionalitásának és megjelenésének testreszabásában.

CSS (Cascading Style Sheets)

Mi a CSS?

A CSS (Cascading Style Sheets) egy stílusleíró nyelv, amelyet a weboldalak megjelenésének formázására használnak. A CSS segítségével meghatározhatók az elemek színe, mérete, elrendezése és egyéb vizuális tulajdonságai, míg a HTML-lel az oldal tartalma. A CSS leírja, hogy a HTML-elemek hogyan jelenjenek meg a képernyőn.

Az elemek stílusolására három különböző módszer létezik:

1. Elemeken használt style attribútum által

<h1 style="color: blue; font-size: 24px;">Üdvözlet!</h1>
<p style="font-family: Arial, sans-serif;">Ez egy példa szöveg.</p>

Ebben az esetben az <h1> elem szövegszínét és betűméretét az style attribútumon keresztül állítjuk be, míg a <p> elem betűtípusát.

2. A head elemben használt style elemben definiáltak által

<head>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
    p {
      font-family: Arial, sans-serif;
    }
  </style>
</head>

<body>
  <h1>Üdvözlet!</h1>
  <p>Ez egy példa szöveg.</p>
</body>

Itt a <style> elemen belül definiáljuk a CSS szabályokat az <h1> és <p> elemekre, és ezek a szabályok érvényesek lesznek az egész dokumentumra.

3. Egy külső CSS fájlban definiált stílusok által

Az styles.css külső fájl tartalma:

h1 {
  color: blue;
  font-size: 24px;
}
p {
  font-family: Arial, sans-serif;
}

A HTML fájl:

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <h1>Üdvözlet!</h1>
  <p>Ez egy példa szöveg.</p>
</body>

Ebben az esetben a stílusokat egy külön CSS fájlban definiáljuk (styles.css), majd a HTML fájlban a <link> elem segítségével hivatkozunk erre a külső stílusfájlra. Ez a módszer könnyen skálázható és karbantartható, különösen, ha azonos stílusokat szeretnénk alkalmazni több különböző oldalon.

Selectorok

A CSS-ben a “selectorok” segítségével választhatók ki azok a HTML elemek, amelyekre a stílusokat alkalmazni szeretnénk. A selectorok lehetnek elemek nevei, osztályok, azonosítók vagy akár egyéb tulajdonságok alapján.

/* Példa elem nevére alapuló selectorra */
p {
  color: blue;
}

/* Példa osztály alapú selectorra */
.red-text {
  color: red;
}

/* Példa azonosító alapú selectorra */
#green-text {
  color: green;
}

/* Példa több selectorra */
.red-text,
h1 {
  color: red;
}

Az elemek állapotainak jelölésére szolgáló kiválasztók nagyon fontosak a webfejlesztésben. Ezek segítségével különböző stílusokat és viselkedéseket alkalmazhatunk az elemekre azok aktuális állapotától függően. Néhány gyakran használt állapotkiválasztó:

:hover

A :hover állapotkiválasztó azt jelöli, amikor az egeret az elem fölé visszük. Ez lehetővé teszi számunkra, hogy stílusokat alkalmazzunk az elemre, amikor az egér azon a területen tartózkodik.

Példa:

button:hover {
  background-color: lightblue;
}

Ebben az esetben a gomb háttérszíne világoskékre változik, amikor az egér fölé kerül.

:active

Az :active állapotkiválasztó az elemet jelöli, amikor rákattintunk rá vagy aktív állapotban van. Ez lehetővé teszi számunkra, hogy stílusokat alkalmazzunk az elemre, amikor éppen történik egy interakció vele.

Példa:

button:active {
  transform: translateY(2px);
}

Ebben az esetben a gomb 2 pixellel lefelé elmozdul, amikor rákattintunk.

:focus

Az :focus állapotkiválasztó azt jelöli, amikor az elem éppen fókuszban van, például amikor rákattintunk, vagy a tabulátor segítségével odafókuszálunk. Ez különösen fontos a formákon belül, hogy megjelenítsük, melyik elemre fókuszált éppen a felhasználó.

Példa:

input:focus {
  border-color: blue;
}

Ebben az esetben az input mező kék keretet kap, amikor ráfókuszálunk.

Reszponzivitás

A CSS segítségével a weboldalak reszponzívak lehetnek, azaz alkalmazkodnak a különböző eszközök méretéhez és képernyőfelbontásához. Ehhez a CSS-ben használt mértékegységek (például a százalék, az em, a rem) és a médialekérdezések (media queries) használatával lehet adaptálni az oldal megjelenését kisebb vagy nagyobb képernyőkhöz. A médialekérdezések segítségével megadhatók a különböző méretű eszközöknek megfelelő stílusok.

/* Példa médialekérdezésre, amely a kisebb képernyőméretekhez alkalmazkodik */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

Extra olvasnivaló

Ezeken az oldalakon találhatsz további információkat az itt említettekről. Ez az oldal segítség lehet akkor, ha véletlen nem jut eszedbe valamilyen elem megnevezése, vagy csak fel szeretnél eleveníteni valamit. Készítettem továbbá egy cikket, amely segíthet többet megtudni a programozási nyelvekről, itt találod.

Ezek is értékesek lehetnek