Gyakorlat – Egyszerű HTML-fájl hozzáadása a webalkalmazáshoz

10 perc

Jelenleg a webhely üres HTML-fájllal rendelkezik. Adjunk hozzá egy kódot! A cél a hypertext jelölőnyelv (HTML) használata az ügyfelek böngészői által megjelenítendő weblap leírására. Nem lenne jó, ha van egy kezdő sablon? A szerkesztők kényelmesen kitölthetnek néhány tipikus sablont vagy HTML-struktúrát.

Ebben a leckében alapszintű HTML-tartalmat ad hozzá, megnyithatja a HTML-oldalt egy böngészőben, és első pillantást vehet a fejlesztői eszközökre.

HTML-kód hozzáadása

A Visual Studio Code alapszintű támogatást nyújt a HTML-programozáshoz. Szintaxiskiemelés, intelligens kiegészítések az IntelliSense használatával és testreszabható formázás.

Nyissa meg a webhelymappát a Visual Studio Code-ban, majd nyissa meg a index.html fájlt az Explorerben való kijelöléssel.
Írja be a index.html lapot, majd válassza az html:5. A html5-sablonkód hozzá lesz adva a fájlhoz.

Feljegyzés

Ha a HTML5-sablonkód nincs hozzáadva a index.html fájlhoz, próbálja meg bezárni és újra megnyitni a fájlt.

Szerkessze a sablonkódot úgy, hogy az a következőhöz hasonló legyen. Ezután mentse a fájlt a Control+S billentyűkombinációval Windows rendszeren vagy a Command+S macOS rendszeren.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

A HTML-nek különböző verziói voltak. A doctype<!DOCTYPE html> azt jelzi, hogy ez a HTML-dokumentum HTML5-kódot tartalmaz.

Bár nem ássunk bele mélyen az összes HTML-elem jelentésébe, szeretnénk kiemelni néhány fontos elemet. A meta címke olyan metaadat-információkat jelez, amelyek általában nem láthatók a megtekintő számára, hacsak nem tekintik meg a forráskódot a böngészőben. A metaelemek vagy címkék leíró információkat nyújtanak a weblapról. Például segítenek a keresőmotoroknak feldolgozni, hogy a weblapok mely információi legyenek visszaadva a keresési eredményekben.

Az UTF-8 karakterkészlete (charset) jelentéktelennek tűnhet, de elengedhetetlen annak megállapításához, hogy a számítógépek hogyan értelmezik a karaktereket. Ha a karakterkészlet metaadatai hiányoznak, az veszélyeztetheti a biztonságot. A charset attribútum mögött elég sok előzmény és technikai információ áll, de a gyakorlat fontos tanulsága, hogy a Visual Studio Code-sablon ésszerű alapértékeket biztosít.

A fej szerkesztése

A <head> HTML-kód eleme a böngészőlapon nem látható információkat tartalmaz a webhelyről.

A metaadatok a HTML-dokumentum adatait határozzák meg, például a karakterkészletet, a szkripteket és azt, hogy a weblap melyik böngészőben nyílik meg.

A weblap címe a böngészőablak tetején jelenik meg, és számos szempontból jelentős. A címet például a keresőmotorok használják és jelenítik meg. Adjunk hozzá egy címet.

Fontos

Ettől a ponttól kezdve a három pont (...) azt jelzi, hogy a korábban deklarált kód megelőzi vagy követi azokat. A környezethez elegendő kódnak kell lennie a szükséges módosítások elvégzéséhez vagy a munka frissítéséhez, de ne másolja és illessze be a három pontot a kódba.

A szerkesztőben módosítsa az <title> elemet úgy, hogy az az alábbi példához hasonlítson.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Ha stílusokat szeretne alkalmazni a weblap HTML-elemeire, a CSS-kódot közvetlenül a weblap fejébe írhatja. A CSS HTML-lapon való írását belső CSS-nek nevezzük. Ajánlott azonban elkülöníteni a HTML-struktúrát és a CSS-stílust. A különálló CSS-lapokat külső CSS-nek nevezzük. A kód általában könnyebben olvasható, ha tömör és részre osztott. Egy vagy több külső stíluslap használatával több weblapot is kiszolgálhat. Ahelyett, hogy az egyes HTML-lapokat replikált CSS-kóddal frissítenél, egyetlen CSS-fájlon végezhet módosításokat, és ezeket a frissítéseket az összes függő weblapra alkalmazhatja. Hivatkozzunk egy külső CSS-fájlra.

A Visual Studio Code-szerkesztőben adjon hozzá egy üres sort az <title> elem után, írja be link, majd válassza az Enter billentyűt. A Visual Studio Code-nak hozzá kell adnia a következő sort a index.html fájlhoz.
```
<link rel="stylesheet" href="">
```

Frissítse a href=-t href="main.css"-re, és mentse el a fájlt a Control+S billentyűkombinációval Windows rendszeren vagy Command+S macOS rendszeren.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

A törzs szerkesztése

Most kezdjük el kitölteni az <body> elemet.

Az <body> elem tartalmazza a webhely tartalmát, amely látható az ügyfelek számára a böngészőben.

Az elemen <body> belül adjon hozzá egy címsorelemet<h1> , majd egy bekezdéselemet<p> , majd hozzon létre egy rendezetlen listát<ul> , amely több listaelem-elemet<li> tartalmaz.

Szerkessze a kódot, vagy másolja és illessze be, hogy az a következő példához hasonlóan nézzen ki.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

Egy (az <p> elemben használt) azonosító attribútumot használhat egy elem formázásához, míg az osztályattribútum (az elemben <li> használt) az osztály minden elemének formázására szolgál.

A következő lépés előtt a Control+S vagy a Command+S billentyűkombinációval győződjön meg arról, hogy a fájl mentése megtörtént.

Megnyitás böngészőben

A weblap helyi előnézetét a HTML-fájl böngészőben való megnyitásával tekintheti meg. A kezdő webhelycím https://helyett a böngésző a helyi fájl elérési útjára mutat, amelynek a következőhöz C:/dev/simple-website/index.htmlhasonlónak kell lennie.

A Visual Studio Code előzetes verziójának megtekintéséhez kattintson index.html a jobb gombbal, és válassza a Megnyitás alapértelmezett böngészőben parancsot, vagy válassza ki a index.html fájlt, és használja az Alt+B billentyűparancsot.

Fontos

Ha problémát tapasztal, győződjön meg arról, hogy közvetlenül a jobb gombbal a fájlnév ikonra vagy szövegre kattint. Ha megjelenik egy Visual Studio Code-párbeszédpanel, válassza az Igen, bízom a szerzőkben; ez a munkaterület megbízhatósági funkciója, amellyel eldöntheti, hogy a projektmappái engedélyezik-e vagy korlátozzák-e az automatikus kódvégrehajtást. Most hozta létre a fájlt, így biztonságos.

A weblap az alapértelmezett böngészőben nyílik meg.

A lap megtekintése fejlesztői eszközökkel

A weblapokat a böngésző fejlesztői eszközeivel vizsgálhatja meg. Próbáljuk ki.

A fejlesztői eszközök megnyitásához kattintson a jobb gombbal a weblapra, és válassza a Vizsgálat lehetőséget, vagy próbálkozzon az alábbi billentyűparancsokkal:
- Nyomja le a Developer Tools( F12) billentyűparancsát.
- Nyomja le a Ctrl+Shift+I billentyűkombinációt Windows és Linux rendszeren, illetve Option+Command+I billentyűkombinációt Mac gépen.
Ezek a billentyűparancsok a Microsoft Edge-ben, a Chrome-ban és a Firefoxban is használhatók. Ha Safarit használ, tekintse meg a webfejlesztői eszközöket. Ha telepítve van, válassza a Safari > beállításai, majd a Speciális lehetőséget. A panel alján jelölje be a Fejlesztés menü megjelenítése a menüsávon jelölőnégyzetet. Válassza a > fejlesztése lehetőséget. További információkért tekintse meg a Safari Web Inspector dokumentációját.

A Fejlesztői eszközök megnyitásáról és a fő elérhető funkciókról a DevTools áttekintésében olvashat bővebben.
Válassza az Elemek lapot.
Vigye az egeret az Elemek lapon megjelenő HTML-elemek fölé, és bontsa ki a különböző elemek tartalmát.

A fejlesztői eszközök Elemek lapja a böngészőben renderelt dokumentumobjektum-modellt (DOM) jeleníti meg. Hibakereséskor gyakran fontos látni, hogy a böngésző hogyan értelmezi a forráskódot.

A lap böngészőben való vizsgálata számos hasznos információt tartalmaz, és segítséget nyújt a problémák elhárításában. A CSS részleteit az ellenőrrel is megtekintheti, ahogy a következő szakaszban is látni fogja.

Visszajelzés

Hasznosnak találta ezt az oldalt?