Ugrás a fő tartalomhoz

Webes alapok

A Web működése​

A web egy kliens-szerver modellen alapuló hálózat, ahol kliens (például egy böngésző) egy URL megadásakor (pl. kir-dev.hu), a DNS segítségével kideríti a szerver pontos IP-címét. Ezt követően a kliens egy HTTP-kéréssel lekéri tőle a weboldal vázát adó HTML-fájlt. Amint a kliens elkezdi feldolgozni ezt a kódot, automatikusan behívja a többi szükséges elemet is (CSS, JavaScript, képek stb.), amíg végül megjeleníti a teljes weboldalt a felhasználó számára.

HTTP Request

Web működése - videó (angol)

Webes technológiák​

Alapvető technológiák​

  • HTML (HyperText Markup Language): Weboldalak szerkezetének leírásához használt nyelv.
  • CSS (Cascading Style Sheets): Megjelenésért és elrendezésért felelős stíluslapok.
  • JavaScript: Interaktív, dinamikus tartalom létrehozásáért felelős programozási nyelv.

Rövid videók (YouTube: Fireship): HTML, CSS, JavaScript.

Absztrakt technológiák​

  • Node.js: Szerveroldali JavaScript futtatókörnyezet, segítségével JS kódot is futtathatunk a szerveren. Bővebben NodeJS tanfolyam.
  • React: Komponens-alapú JavaScript könyvtár, interaktív felhasználói felületek építésére. Bővebben React tanfolyam.
  • Spring Boot: Java-alapú keretrendszer, amely megkönnyíti a webalkalmazások fejlesztését. Bővebben Spring Boot tanfolyam.

HTML - HyperText Markup Language​

Weboldalak szerkezetének leírására szolgáló nyelv, jellegzetessége a tag-ek (címkék) használata. Általános formátuma: <tag attribútumok>tartalom</tag>.

HTML tag-ek listája

Tag-ek közti tartalom lehet tetszőleges szöveg vagy akár más tag-ek is.

<html>
  <body>
    <h1>Kir-Dev tanfolyam</h1>
    <p>HTML alapok</p>
  </body>
</html>

Továbbá a tag-ek tartalmazhatnak attribútumokat is, melyek további funkcióval látják el az adott sort: <a href="https://kir-dev.hu">Kir-Dev</a>, ahol a href attribútum határozza meg a hivatkozás címét. Egy tag egyszerre több attribútumot is tartalmazhat.

Egyszerű Log In form HTML-ben:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Kir-Dev</title>
  </head>
  <body>
    <div>
      <h1>Log In</h1>
      <p>Enter your credentials</p>
      <form>
        <label for="username">Username</label>
        <input id="username" name="username" type="text" />
        <label for="password">Password</label>
        <input id="password" name="password" type="password" />
        <a href="/forgot-password">Forgot Password?</a>
        <input id="submit" type="submit" value="Log In" />
      </form>
    </div>
  </body>
</html>

CSS - Cascading Style Sheets​

CSS alapok​

A weboldalak megjelenéséért és elrendezéséért felelős stíluslapok. Segítségével a HTML elemek kinézetét és elrendezését szabályozhatjuk.

Minden HTML taghez hozzárendelhetünk különböző stílusokat a következő szintaxis szerint:

selector {
  property1: value;
  property2: value;
}

Előző bekezdésben szereplő HTML kódot kiegészíthetjük CSS-sel:

html {
  background-color: white;
}
h1 {
  color: black;
  font-size: 40px;
}
p {
  color: gray;
  font-size: 20px;
}

Egy selector lehet egy HTML tag neve (h1), egy osztály neve (.class-name), vagy egy azonosító neve (#id). Ezeket akár kombinálhatjuk is, ha szükséges: div.class-name, #id p, stb.

CSS alkalmazása​

CSS használatának 3 formáját különböztetjük meg:

  • Inline: Közvetlenül a HTML tag-en belül írjuk meg a stílust style attribútum segítségével <h1 style="color: green">Kir-Dev tanfolyam</h1>
  • Style element: A <head> konténer tag-en belül egy <style> tag-ben definiáljuk a stílusokat.
<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
  • Külső CSS fájl (preferált): Formázásra készítünk egy külön .css kiterjesztésű fájlt, majd azt a HTML kódunkban egy <link> tag-en belül hivatkoztatjuk. <link rel="stylesheet" href="style.css">

Box Model, pozícionálás és layout​

Minden tartalmat egy úgynevezett Box Model-ben helyezünk el, amely négy fő részből áll:

  1. Content: Tényleges tartalom
  2. Padding: A tartalom és a keret közötti tér
  3. Border: A doboz kerete
  4. Margin: A doboz és a többi elem közötti tér

Box Model

A megírt komponenseket tudjuk pozícionálni a weboldalon a következő tulajdonságok segítségével:

  • static: Alapértelmezett pozíció.
  • relative: Az elem az eredeti pozíciójához képest elmozdulhat.
  • absolute: Az elem a legközelebbi pozícionált őshöz képest helyezkedik el.
  • fixed: Az elem az oldalhoz képest rögzített pozícióban marad, görgetéskor sem mozdul el.
  • sticky: Az elem a görgetés során változtatja a pozícióját, amíg el nem éri a megadott pozíciót.

Positioning

Léteznek különöző layout modellek is, ami abban segít hogy a komponensek hogyan helyezkedjenek el egymáshoz képest:

  • Flexbox: Lehetővé teszi a komponensek rugalmas elrendezését egy sorban vagy oszlopban.
  • Grid: Kétdimenziós elrendezés, lehetővé teszi a komponensek elrendezését sorok és oszlopok mentén.

Layouts

CSS-ben pseudo-osztályok segítségével különböző állapotokat írhatunk le egy elemhez:

  • :hover, focused, first-child, nth-child(n) stb.

Stílusformázásra is kitaláltak különböző keretrendszereket (framework), hogy a fejleszőknek ne kelljen mindig minden stílust újra és újra megírniuk. Ilyen ismert keretrendszerek például a Tailwind CSS vagy a Bootstrap.

Most, hogy minden tudásnak bírtokában vagyunk, egészítsük ki a Log In formunkat CSS-sel:

* {
  box-sizing: border-box;
}

body {
  background-image: url('https://images.pexels.com/photos/547114/pexels-photo-547114.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
  background-size: cover;
  background-position: center;
  margin: 0;
  height: 100vh;
  font-family: Helvetica, serif;
  color: #1b3de5;
}

.panel {
  position: absolute;
  top: 20%;
  left: calc(50% - 200px);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  text-align: center;
  padding: 20px 50px 30px 50px;
  width: 400px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 0;
}

label {
  font-size: 0.85rem;
  align-self: start;
  position: relative;
  top: 5px;
  left: 15px;
}

input {
  font-size: 1rem;
  padding: 12px 20px;
  border: 2px #1b3de5 solid;
  border-radius: 10px;
}

a:any-link {
  font-size: 0.85rem;
  text-decoration: none;
  color: #1b3de5;
  text-align: right;
}

#submit {
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
  padding: 10px 22px;
  font-size: 22px;
  font-weight: 400;
  color: white;
  background: linear-gradient(90deg, #1b3de5 0, #0074e4 100%);
  border-radius: 50px;
}

#submit:hover {
  background: linear-gradient(-90deg, #1b3de5 0, #0074e4 100%);
}

#togglePwBtn {
  background: #1b3de5;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  align-self: flex-start;
}

#togglePwBtn:hover {
  background: #0074e4;
}

JavaScript​

A JavaScript elengedhetetlen ahhoz, hogy valaki egy dinamikus, interaktív weboldalt készítsen. JS egy nagy előnye, hogy a böngésző futtatja, így nincs szükség külön szerveroldali környezetre a kód futtatásához. Ezáltal a weboldal képes gyorsan reagálni különböző felhasználói inputokra, eseményekre.

Kód beágyazása HTML-be​

JS kódok beágyazása HTML kódba a <script> tag-ek között történik, rá is igaz, hogy lehet külső fájlból betölteni kódot vagy közvetlenül a tag-ek közé írni:

<script src="app.js"></script>

VAGY

<script>
  // JS kód helye
</script>

DOM manipuláció​

JavaScript DOM (Document Object Model) manipulációval képesek vagyunk dinamikusan módosítani a weboldalunk szerkezetét, tartalmát vagy stílusát anélkül, hogy az egész oldalt újra kellene tölteni.

Képesek vagyunk:

  • Hivatkozni HTML elemekre - const pwInput = document.getElementById('password');
  • Elemeket szerkeszteni - pwInput.hidden = true;
  • Eseményeket kezelni - <button onclick="buttonPressed()"> Approve <button>;

Ezek ismeretében tegyük interaktívvá a Log In formunkat:

Módosított HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!--<link rel="stylesheet" href="style.css">-->
  </head>
  <body>
    <form>
      <h1>Log In</h1>
      <p>Enter credentials</p>
      <label for="username">Username</label>
      <input id="username" name="username" type="text" />
      <label for="password">Password</label>
      <input id="password" name="password" type="password" />

      <input type="button" value="Submit" onclick="checkLogin()" />
      <script src="app.js"></script>
    </form>
  </body>
</html>

app.js

function checkLogin() {
  const userNameIF = document.getElementById('username');
  const passwordIF = document.getElementById('password');

  const acceptedUsername = 'kir-dev';
  const acceptedPassword = 'asdasd';

  if (userNameIF.value == acceptedUsername && passwordIF.value == acceptedPassword) {
    alert('Sikeres bejelentkezes');
  } else {
    alert('Sikertelen bejelentkezes');
  }
}

Készítette: Iván Domonkos
Demo: Bujdosó Gergő és Mozsár Máté