CSS és HTML beállítása a weboldaladhoz: Útmutató

Preslav Dobrev2022-10-28 · 4 min read

CSS és HTML beállítása a weboldaladhoz: Útmutató

A weboldalak készítése az első lépés a webfejlesztéssel való ismerkedés során. Az egyik legelső dolog, amit a webfejlesztés iránt érdeklődőknek meg kell tanulniuk, az a CSS és a HTML beállítása egy weboldalhoz. Az alapvető bemutatkozó oldal beállításával a kezdők felkészülhetnek a weboldaltervezés alapjaira, fejleszthetik webfejlesztési készségeiket, és megtanulhatnak együttműködni a fejlesztőkkel.

Ez az útmutató végigvezeti Önt a weboldalához szükséges HTML- és CSS-fájlok beállításának alapjain. Kezdjük el!

Előfeltételek

A HTML és a CSS alapvető ismerete.

1. lépés – Kezdeti beállítások

Kezdetben létrehozunk egy új projektkönyvtárat, és elnevezzük demo-projektnek :

mkdir demo-project

1	mkdir demo-project

Ezután lépjen be a könyvtárba a cd paranccsal:

cd demo-project

1	cd demo-project

A projektmappában adjuk hozzá a következő fájlokat, amelyekre szükségünk lesz az alapvető weboldalunk elindításához:

index.html : Ez a fájl fogja tartalmazni az összes HTML-kódot.
styles.css : Itt fogjuk tárolni az összes CSS-fájlt a weboldalunk stílusának kialakításához.
images : Minden szükséges képet ebben a mappában kell tartani.

Most, hogy létrehoztuk a projektkönyvtárunkat és hozzáadtuk a szükséges fájlokat, lépjünk tovább, és adjuk hozzá a HTML-tartalmat az index.html fájlunkhoz a következő lépésben.

2. lépés – HTML-tartalom hozzáadása az index.html fájlhoz

A index.html fájlban, amelyet az előző lépésben hoztunk létre, hozzáadjuk a bevezető HTML-kódokat. Ezek az alapvető HTML-sorok utasításként szolgálnak majd a böngésző számára, de nem jelennek meg a weboldalon.

Adja hozzá a következő kódblokkot az index.html fájlhoz:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Welcome to CloudSigma!</title>

</head>

<body>

</body>

</html>

Megjegyzés: Győződjön meg arról, hogy az index.html fájl üres, mielőtt hozzáadná ezeket a kódblokkokat. Emellett fontolja meg a cím megváltoztatását is, ahogyan az a <title> részben ki van emelve.

Értsük meg a használt kifejezéseket:

<!DOCTYPE html> : Ez egy deklaráció, amely tájékoztatja a böngészőt a HTML-dokumentumban használt HTML típusáról.
- Mivel a HTML-szabványoknak több verziója is létezik, a DOCTYPE megadása megkönnyíti a böngészők számára a HTML-verzió könnyed azonosítását. Ebben az útmutatóban például a legújabb verziót, a HTML5.
<html> : Ez a címke tájékoztatja a böngészőt, hogy a benne lévő tartalmat HTML-ként kell kezelni. Amikor megnyit egy <html> fájlt, ügyeljen arra, hogy lezárja azt a </html> címkével. Ez a címke támogatja a lang attribútumokat, és megadhatja vele a weboldal nyelvét. Az útmutatónkban a nyelvet angolra állítottuk be az en nyelvi kód használatával.
- Látogasson el az IANA Language Subtag Registry oldalra a többi használható nyelv megtekintéséhez.
<head> : Ez létrehoz egy szakaszt a HTML-dokumentumban, amely a weboldallal kapcsolatos információkat tartalmazza. Itt azonban nincsenek részletes tartalmak, és a böngésző nem jelenít meg semmilyen információt a head szekcióban.
<meta charset="utf-8"> : Meghatározza a dokumentum karakterkészletét. Ennek Unicode formátumban, azaz UTF-8 kódolással kell lennie, amely a legtöbb ismert írott nyelvet támogatja.
<title> : A <title> címke tájékoztatja a böngészőt a weboldal nevéről. A cím a böngésző fülén jelenik meg, amikor a weboldal szerepel a keresési találatok között.
<link rel="stylesheet" href="css/styles.css"> : Arra utasítja a böngészőt, hogy azonosítsa a CSS-stílusokat tartalmazó stíluslapot.
<body> : Ez a címke tartalmazza a weboldal fő tartalmát. Ha a <body> címkét használja, ügyeljen arra, hogy lezárja azt a </body> címkével.

3. lépés – Stílus kialakítása CSS használatával

A styles.css fájlt, adjon hozzá stílust a projekt igényeinek megfelelően. Ebben a példában adja hozzá a következő kódsorokat a styles.css fájlba:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Végre létrehoztuk azokat az alapvető HTML- és CSS-fájlokat, amelyekre szükségünk lesz a weboldalunk elindításához. Ezenkívül képeket is hozzáadhat, és azokat az images mappában tárolhatja. Mentse el és zárja be a fájlt. Ezután nyissa meg az index.html fájlt a kedvenc webböngészőjében, és egy alapvető oldalt fog látni a képernyőjén.

Összegzés

Ebben a bevezető útmutatóban megtanultuk a HTML és a CSS beállításának alapjait, és létrehoztunk egy kezdetleges weboldalt. Most itt az ideje új oldalak létrehozásának, finomhangolásának, tartalom hozzáadásának, és mindennek a navigációs sárból való összekapcsolásának. Következő lépésként próbáljon meg több tartalmat hozzáadni az index.html fájlhoz, és formázza azt CSS segítségével.

Ezenkívül további HTML és CSS útmutatókat találhat a blogunkon:

Kellemes kódolást!

Preslav Dobrev

Szerző · CloudSigma

Preslav Dobrev a CloudSigma kreatív tervezője, aki hagyományos és innovatív marketingcsatornák segítségével következetes vállalati identitás kialakítására összpontosít. Kiemelkedően képes ötvözni a művészi látásmódot a stratégiai marketinggel, hogy hatásos márkatörténeteket hozzon létre.