Linkelés és fájlok betöltése HTML-ben
Egy weboldal nemcsak HTML kódot tartalmaz, hanem gyakran kapcsolódó fájlokat is, például CSS stíluslapokat, JavaScript fájlokat, ikonokat és betűtípusokat. Ezeket külső fájlokként kell betölteni és összekapcsolni a HTML dokumentummal.
🔗 1️⃣ CSS fájlok betöltése a <link> címkével
A CSS fájlok segítenek a weboldal megjelenésének formázásában. Külső stíluslapokat a <link> címkével csatolhatunk a <head> szakaszba.
🔹 Példa: egy külső CSS fájl csatolása
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
✅ rel="stylesheet" – Ez jelzi, hogy egy CSS fájlról van szó.
✅ href="styles.css" – Itt adjuk meg a CSS fájl elérési útvonalát.
📌 Fontos: A CSS fájlokat mindig a <head> szakaszban kell elhelyezni, hogy a böngésző a HTML renderelése előtt betöltse azokat.
📜 2️⃣ JavaScript fájlok betöltése a <script> címkével
A JavaScript fájlok interaktivitást adnak a weboldalhoz. Ezeket a <script> címkével tölthetjük be.
🔹 Alapvető JavaScript csatolás:
📌 Fontos: A CSS fájlokat mindig a <head> szakaszban kell elhelyezni, hogy a böngésző a HTML renderelése előtt betöltse azokat.
<script src=”script.js”></script>
✅ src="script.js" – A JavaScript fájl elérési útvonala.
📌 Hova kell tenni a <script> címkét?
1️⃣ Ha az <head> részbe tesszük, akkor a JavaScript a HTML betöltése előtt lefut.
2️⃣ Ha a </body> zárócímke előtt helyezzük el, akkor az oldal először betöltődik, majd a JavaScript aktiválódik, ami gyakran jobb felhasználói élményt eredményez.
🔹 Példa a helyes elhelyezésre:
<<body>
<h1>Üdvözöllek!</h1>
<script src=”script.js”></script>
</body>
🎨 3️⃣ Külső betűtípusok csatolása
A weboldalak egyedi betűtípusait Google Fonts vagy saját fájlok segítségével adhatjuk hozzá.
🔹 Google Fonts betöltése:
<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap”>
</head>
🔹 Saját betűtípus használata (CSS-ben megadva):
@font-face {
font-family: ‘SajatBetutipus’;
src: url(‘sajat-betutipus.woff2’) format(‘woff2’);
}
body {
font-family: ‘SajatBetutipus’, sans-serif;
}
🎭 4️⃣ Weboldal ikonja (Favicon)
A favicon a böngésző fülén látható kis ikon. Ezt a <link> címkével lehet csatolni.
🔹 Favicon beállítása:
<head>
<link rel=”icon” type=”image/png” href=”favicon.png”>
</head>
📌 Fontos:
- A leggyakoribb formátum a .ico, .png vagy .svg
- Ha nincs favicon, a böngésző hibát dobhat a konzolban.
💡 5️⃣ Hogyan lehet betölteni egy külső JavaScript könyvtárat?
🔹 Példa a Bootstrap csatolására (CDN-ről):
<head>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css”>
</head>
<body>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script>
</body>
✅ CDN (Content Delivery Network) használatával gyorsabb lesz az oldal betöltése.
📌 Összegzés
✅ A <link> címkével CSS fájlokat, betűtípusokat és favicont tölthetünk be.
✅ A <script> segítségével JavaScript fájlokat adhatunk hozzá.
✅ A betűtípusok és ikonok fontosak a design és a felhasználói élmény szempontjából.
✅ A külső könyvtárak (Bootstrap, jQuery) gyorsan és egyszerűen csatlakoztathatók CDN-ről.
🔗 Belső linkek kapcsolódó bejegyzésekhez
Ha további alapvető HTML elemekről szeretnél olvasni, nézd meg a következő cikkeket is:
📌 HTML struktúra és szerkezet – Hogyan épül fel egy HTML dokumentum?
📌 HTML <head> címkék – A keresőmotorok és a böngészők számára fontos információk.