Kategóriák

4. nap

Tartalomjegyzék
  1. Jelmagyarázat
  2. Projekt mappa létrehozása
  3. Assetek átmásolása
  4. HTML
    1. Alapvető felépítés elkészítése
    2. Navigáció
    3. Hero
    4. Hero szekció
    5. Blogok
    6. Lábléc
  5. CSS
    1. Navigáció
    2. Hero
    3. Hero szekció
    4. Blogok
    5. Lábléc
  6. 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.
  • footer: Az oldal vagy egy tartalom rész alján található láblécet jelöli.
  • 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.
  • header: Az oldal vagy egy tartalom rész tetején található fejlécet jelöli.
  • 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.
  • label: Egy vezérlőelem címét vagy leírását jelöli, például egy beviteli mező vagy egy jelölőnégyzet mellé.
  • li: Egy lista elemét jelöli, például egy navigációs menüpontot.
  • 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.
  • nav: Az oldal navigációs részét jelöli, például egy menüt.
  • p: A bekezdés elem, amely szöveges tartalmat határoz meg.
  • section: Egy tartalom részét jelöli, amely lehet logikai vagy tematikus egység az oldalon.
  • span: Egy tartományt jelöl, amely lehetővé teszi a CSS stílusok alkalmazását egy adott részletre vagy szövegrészletre egy szöveges tartalomban.
  • title: Az oldal címét határozza meg, amely a böngészőablak tetején jelenik meg.
  • ul: Egy rendezetlen lista elemeit jelöli.

A mai nap elkészítjük a tartalmát a weboldalunknak, ahol a kódban ${VALAMI} szöveget látod, oda kell beírnod a saját tartalmad.

Projekt mappa létrehozása

A folyamat kezdetekor először is létre kell hoznunk egy mappát, ahol tárolni fogjuk a projekt fájljait. Ez a mappa lesz a projekt főmappája, és minden más fájl és alkönyvtár ebben fog elhelyezkedni.

A projekt mappát általában a projekt neve alapján hozzuk létre, hogy könnyen azonosítható legyen. Például, ha a projekt neve “weboldal-projekt”, akkor a mappa neve lehet “weboldal-projekt” vagy egyszerűen csak “weboldal”. Jelen esetben lehet kihívás.

A képeket, ikonokat és egyéb asseteket (források) általában külön mappában tároljuk, például “assets” néven. Ide kerül majd az összes kép és ikon, például a logo.png, profile-image.svg stb.

Assetek átmásolása

Az első lépésben másold át az összes szükséges képet a projekt mappájába. Ezek az assetek tartalmazzák a logót (logo.png), a profilképet (profile-image.svg), és a közösségi média ikonokat (facebook-icon.svg és linkedin-icon.svg).

Ezeket a képeket szabadon meg tudod változtatni ízlésed szerint, lényeg, hogy ha a fájl nevét megváltoztatod, akkor a kódban is meg kell változtatni az útvonalat a fájlhoz.

A képeket itt tudod letölteni.

HTML

Alapvető felépítés elkészítése

Hozzunk létre egy index.html fájlt a projekt főmappájában. Ez az oldal az, amit általában az emberek azonnal látnak, amikor elérnek egy weboldalt, és gyakran a főoldalként szolgál.

Ennek a fájlnak tartalmaznia kell a HTML alapvető felépítését 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.

Ez a kód egy alapvető, üres weboldalt hoz létre, amelynek csak a címe van megadva. Amikor valaki megnyitja ezt az oldalt egy böngészőben, az üres fehér lapot fog látni a böngésző ablakában, és a fülön vagy az ablak címében az “Az oldal címe” szöveg fog megjelenni.

<!DOCTYPE html>
<html>
  <head>
    <!-- Az oldal címe -->
    <title>Az oldal címe</title>
  </head>
  <body></body>
</html>

A navigációs sávot készítjük el, amely tartalmazza a logót, a menüpontokat, valamint egy színtéma váltót.

A képek útvonalának megadása rendkívül fontos a weboldal fejlesztése során, mivel ez határozza meg, hogy a böngésző hogyan tudja elérni és betölteni a képeket. A képek útvonalának megadása során fontos figyelembe venni a következőket:

  • Abszolút útvonalak: Ezek a teljes elérési utat tartalmazzák a képhez, kezdve a gyökérkönyvtártól vagy az URL címtől. Például: /images/logo.png vagy https://example.com/images/logo.png.
  • Relatív útvonalak: Ezek az útvonalak relatívak az aktuális fájlhoz képest. Például, ha a kép és az index.html fájl ugyanabban a mappában van, akkor csak a kép nevét kell megadni, például logo.png. Ha a kép egy alkönyvtárban van, akkor az útvonal tartalmazhat egy vagy több alkönyvtárat is, például images/logo.png.

ez a kód egy egyszerű navigációs menüt hoz létre egy weboldalon, amely tartalmaz egy logót, egy menüpontot ("Blogok") és egy színtéma váltót. Ez a navigációs menü lehetővé teszi a felhasználók számára, hogy könnyen navigáljanak az oldalon és váltani tudjanak a különböző témák között.

<!-- Navigáció -->
<nav>
  <!-- Logó -->
  <h1>
    <a href="/">
      <img src="./assets/logo.png" alt="Logo" />
    </a>
  </h1>

  <!-- Menü -->
  <ul>
    <!-- Menüpont -->
    <li><a href="#blogs">Blogok</a></li>

    <!-- Színtéma váltó -->
    <div>
      <input type="checkbox" id="switch" />
      <label for="switch">
        <span class="icon"></span>
      </label>
    </div>
  </ul>
</nav>

Hero

Az oldal bevezető szekcióját készítjük el, amely tartalmazza a profil képet, a felhasználó nevét és egy rövid leírást róla, valamint lehetőséget a kapcsolatfelvételre.

A mailto link egy speciális link, amelyet arra használunk, hogy egy e-mail üzenetet küldjünk egy előre meghatározott címre, amikor rákattintunk. Ez hasznos lehet például, ha egy weboldalon kapcsolatfelvételi lehetőséget szeretnénk biztosítani a felhasználók számára.

Amikor egy mailto linkre kattintunk, a böngésző megnyitja az alapértelmezett e-mail kliensünket (például Outlook, Gmail stb.), és előkészíti az üzenetet a megadott címre. A felhasználónak csak meg kell írnia az üzenetet, majd elküldheti azt.

Ez a kód egy egyszerű bevezető szekciót hoz létre a weboldalon, ami tartalmaz egy profilképet, üdvözlő szöveget, leírást és egy kapcsolatfelvételi lehetőséget az e-mail címükön keresztül.

<!-- Bevezető szekció -->
<section>
  <!-- Profilkép és név -->
  <img src="assets/profile-image.svg" alt="Profilkép" />
  <h1>Helló, ${Név} vagyok</h1>

  <!-- Rövid leírás -->
  <div>
    <h2>${Fő tevékenység röviden}</h2>

    <p>${Rövid leírás}</p>
  </div>

  <!-- Kapcsolatfelvételi lehetőség -->
  <a href="mailto:${Email cím}">Kapcsolat</a>
</section>

Hero szekció

A fejléc szakaszt készítjük el, amely tartalmazza a navigációt és a bevezető szekciót.

Ez a kód körülöleli a fent említett navigációt és a hero szekciót.

<!-- Fejléc szakasz a navigációval és a bevezetővel -->
<header>${Navigáció} ${Hero}</header>

Blogok

A blogok megjelenítéséhez szükséges struktúrát készítjük el, beleértve a címeket, leírásokat és linkeket.

<!-- Szakasz a blogok megjelenítéséhez -->
<section>
  <!-- A blog címe és leírása -->
  <div>
    <h2>Blogok</h2>
    <p>Blogok leírása</p>
  </div>

  <!-- Egyedi blog -->
  <div>
    <a>
      <!-- Bloginformáció -->
      <div>
        <div>
          <!-- Blog neve és rövid leírása -->
          <h3>Blog címe</h3>
          <p>Blog leírása</p>
        </div>
      </div>
    </a>
  </div>
</section>

Lábléc

Az oldal láblécét készítjük el, amely tartalmazza az elérhetőségeket, a közösségi média linkeket és az aktuális dátumot.

Ez a kód egy egyszerűen felépített szakaszt definiál egy weboldalon a blogok megjelenítéséhez. A szakasz tartalmazza a blogok alcímét és rövid leírását.

<!-- Lábléc elérhetőségekkel -->
<footer>
  <a href="mailto:${Email cím}">${Email cím}</a>

  <!-- Social linkek -->
  <div>
    <a href="${Facebook link}" target="_blank"
      ><img src="./assets/facebook-icon.svg" alt="Facebook"
    /></a>
    <a href="${Linkedin link}" target="_blank"
      ><img src="./assets/linkedin-icon.svg" alt="Linkedin"
    /></a>
  </div>

  <!-- Aktuális dátum -->
  <p>${Név} <span id="date"></span></p>
</footer>

CSS

A classok és az ID-k használata lehetővé teszi számunkra, hogy azonosítsuk és formázzuk az egyes HTML elemeket CSS segítségével. Míg a sima HTML elemek önmagukban is megjeleníthetők és formázhatók, a classok és ID-k hozzáadása lehetővé teszi számunkra, hogy egyedi stílusokat és formázásokat alkalmazzunk az elemekre.

Navigáció

A navigációs sávot formázzuk CSS segítségével, hogy az elrendezés és a stílus megfelelő legyen.

<!-- Navigáció -->
<nav class="navbar container">
  <!-- Logó -->
  <h1 id="logo">
    <a href="/">
      <img src="./assets/logo.png" alt="Logo" />
    </a>
  </h1>

  <!-- Logó -->
  <ul class="nav-menu">
    <!-- Menüpont -->
    <li><a class="nav-link" href="#blogs">Blogok</a></li>

    <!-- Színtéma váltó -->
    <div class="theme-switch">
      <input type="checkbox" id="switch" />
      <label class="toggle-icons" for="switch">
        <span class="icon"></span>
      </label>
    </div>
  </ul>
</nav>

Hero

A bevezető szekciót formázzuk megfelelően, például a kép méretét, a szövegek formázását.

<!-- Bevezető szekció -->
<section class="header-container">
  <!-- Profilkép és név -->
  <img class="profile-image" src="assets/profile-image.svg" alt="Profilkép" />
  <h1>Helló, ${Név} vagyok</h1>

  <!-- Rövid leírás -->
  <div class="content-text">
    <h2>${Fő tevékenység röviden}</h2>

    <p>${Rövid leírás}</p>
  </div>

  <!-- Kapcsolatfelvételi lehetőség -->
  <a class="btn btn-secondary" href="mailto:${Email cím}">Kapcsolat</a>
</section>

Hero szekció

A fejléc szakaszt formázzuk megfelelően, hogy a navigáció és a bevezető szépen illeszkedjen egymáshoz.

<!-- Fejléc szakasz a navigációval és a bevezetővel -->
<header id="hero">${Navigáció} ${Hero}</header>

Blogok

A blogok megjelenítéséhez szükséges elemeket formázzuk, például a címeket, leírásokat és linkeket.

<!-- Szakasz a blogok megjelenítéséhez -->
<section id="blogs" class="container">
  <!-- A blog címe és leírása -->
  <div class="content-text">
    <h2>Blogok</h2>
    <p>Blogok leírása</p>
  </div>

  <!-- Egyedi blogok -->
  <div class="blogs-container">
    <!-- Egyedi blog -->
    <a href="" class="card" id="blog-1">
      <!-- Bloginformáció -->
      <div class="blog-info">
        <div class="blog-bio">
          <!-- Blog neve és rövid leírása -->
          <h3>Blog címe</h3>
          <p>Blog leírása</p>
        </div>
      </div>
    </a>
  </div>
</section>

Lábléc

A láblécet formázzuk, hogy az elérhetőségek és a közösségi média linkek jól elrendezettek legyenek, valamint formázzuk az aktuális dátum megjelenítését.

<!-- Lábléc elérhetőségekkel -->
<footer id="footer">
  <a href="mailto:${Email cím}">${Email cím}</a>

  <!-- Social linkek -->
  <div class="social">
    <a href="${Facebook link}" target="_blank"
      ><img src="./assets/facebook-icon.svg" alt="Facebook"
    /></a>
    <a href="${Linkedin link}" target="_blank"
      ><img src="./assets/linkedin-icon.svg" alt="Linkedin"
    /></a>
  </div>

  <!-- Aktuális dátum -->
  <p>${Név} <span id="date"></span></p>
</footer>

Extra olvasnivaló

A következő quizzel tesztelheted magad az alapokból. 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