HTML alapok – kötelező címkék és HTML-dokumentum létrehozása – 5.0/5 1 szavazat alapján
Ebben az oktatóanyagban a HTML alapjait ismertetjük.
Mint már tudja, az interneten a legtöbb weboldal html kiterjesztésű fájlok formájában jelenik meg. Nézzük meg egy ilyen dokumentum alapvető címkéit és azok célját.
Abban különböznek a szöveges dokumentumoktól, hogy a html dokumentumok tartalmaznak bizonyos címkéket, amelyek meghatározzák az oldalon lévő szöveg és grafika megjelenését, és rendelkeznek a megfelelő fájlkiterjesztésekkel is.
Hogy a böngésző ezt megértse ez az oldal címkékből áll, és erre való, szükséges, hogy legyen egy bizonyos kiterjesztése. A HTML-dokumentumok kiterjesztése .html vagy .htm.
Most létrehozunk egy egyszerű weboldalt. A html dokumentum, azaz a .html kiterjesztésű fájl létrehozása ugyanolyan egyszerű, mint a körte héja. Azt javaslom, hogy ehhez készíts egy speciális mappát, ahová mindent elhelyezünk, amivel az órákon foglalkozunk.
Egyelőre tanulmányi céllal HTML nyelv nem használunk oldalak létrehozására speciális programok, mint például a széles körben ismert . Célunk ebben a szakaszban a html alapjainak elsajátítása.
Az oldalak létrehozásához szabványos szövegszerkesztőt fogunk használni, amely bármelyikben elérhető Windows verziók. A gyakorlatomból tudom ez a módszer a legtermékenyebb és legérthetőbb egy olyan személy számára, aki most kezdte el megtanulni a HTML alapjait.
A jövőben egy webhely létrehozásához a legjobb, ha valamilyen HTML-szerkesztőt használ, ez leegyszerűsíti a munkáját. Személy szerint én inkább a Dreamweaver szerkesztőt használom.
Egyelőre használjuk a szövegszerkesztő Jegyzettömböt. Ezért lépjen a "Start" >> "Minden program" >> "Kiegészítők" menüpontra, és indítsa el a szövegszerkesztő Jegyzettömböt.
Most másolja ki és illessze be az alábbi kódot a jegyzettömb ablakába, ez minden html fájl alapja:
Az első oldalam Tehát Ön létrehozta az első oldalát honlap!!!
Behelyezted? Most válassza ki a Jegyzettömbben a „Fájl” menüpontot, a legördülő listából pedig a „Mentés másként...” elemet, megnyílik egy ablak a fájl mentésére. Itt érdekelni fog minket a "Fájlnév" mező. Ide kell beírni a fájl nevét, például „Az első oldalam”, és a .txt kiterjesztés helyett a .html kiterjesztést.
Ne feledje, hogy az oldalak interneten való elhelyezéséhez neveket kapnak angol nyelv, itt csak példaként adtuk meg a nevet oroszul. Nézz a képre.
Ezután válassza ki a korábban létrehozott mappát vagy bármely más mappát a számítógépén, és mentse el a fájlt. Magamat Szöveges dokumentum ne zárd be, akkor is dolgozunk vele.
Annak eredményeként, hogy megadta a kódot, és a kiterjesztést .txt-ről .html-re változtatta, a szöveges dokumentumot html dokumentummá „alakítottuk”. Most lépjen abba a mappába, ahová ezt a fájlt mentette, és nyissa meg a böngészővel. Ennek eredményeként a következő szöveg jelenik meg: "Tehát létrehoztad az első weboldaladat!!!"
Ezt követően a böngészőablak bezárása nélkül térjen vissza a jegyzettömbünkhöz, és próbálja meg megváltoztatni a „Tehát létrehozta az első weboldalát!!!” szöveget bármire is. Ezután lépjen a „Fájl” >> „Mentés” menüpontra, és lépjen a megnyitott böngészőablakba ezzel az oldallal, ahol kattintson az oldal frissítése gombra, vagy nyomja meg a kombinációt Ctrl billentyűk+ R, az oldal frissül, és a böngésző megjeleníti a szöveget.
Tegye ezt, ha valamit megváltoztat magában a kódban szöveg szerkesztő jegyzettömböt, és látni szeretné, hogyan fog megjelenni a böngészőjében.
Most nézzük meg, milyen címkéket írtunk a fájlunkba. Valójában ezek a html-dokumentumok legfontosabb címkéi; ezek alkotják HTML alapon fájlban, és minden HTML dokumentumban szerepelnie kell.
A kódunkban szereplő fő címkék közül az első ezek a nyitó és záró címkék, amelyek a html dokumentumot kezdik és zárják, ráadásul egyértelművé teszik a böngésző számára, hogy ezt a fájlt html dokumentumként kell kezelni.
A következő címkék egyfajta fejlécként szolgálnak a html dokumentumban, bennük más címkék találhatók, amelyek bizonyos szolgáltatási információkat tartalmaznak. Másokban fogunk róluk beszélni.
Ebben az esetben címkéket tartalmaznak, ezek a címkék az oldal nevét tartalmazzák, ezt a böngészőablak legtetején láthatjuk, példánkban az „Első oldalam” név lesz. A kódunk utolsó címkéi pedig ezek közé a címkék közé kerülnek a weboldal teljes tartalma közvetlenül, minden szöveg, grafika, táblázat stb. Ez az alapja mindennek HTML fájl.
Ebben a leckében megvizsgáltuk azokat a címkéket, amelyek minden html dokumentumhoz kötelezőek, és azok alapját képezik. A következőkben HTML leckék megnézzük a fennmaradó címkéket, és megtudjuk, hogy az egyes címkék külön-külön miért felelősek, és milyen attribútumok rejlenek egy adott címkében.
A HTML Basics tartalmazza a HTML nyelv alapszabályait, egy HTML oldal szerkezetének leírását, valamint a HTML-dokumentum szerkezetében a HTML elemek közötti kapcsolatokat.
A HTML-dokumentum egy normál szöveges dokumentum, amely akár normál szövegszerkesztőben (Jegyzettömb), akár speciális kódkiemeléssel (Notepad++, Vizuális Stúdió kód stb.) . Egy HTML-dokumentum .html kiterjesztéssel rendelkezik.
A HTML-dokumentum HTML-elemekből és szövegből álló fából áll. A forrásdokumentumban minden elemet egy kezdő (nyitó) és egy záró (záró) címke azonosít (ritka kivételekkel).
A kezdőcímke azt mutatja, hogy hol kezdődik az elem, a végcímke pedig azt, hogy hol végződik. A záró tag úgy jön létre, hogy a címke neve elé egy perjelet adunk: .... A kezdő és záró címkék között van a címke tartalma - a tartalom.
Az egyes címkék nem tárolhatnak közvetlenül tartalmat, hanem attribútumértékként íródnak le, például egy címke létrehoz egy gombot a Button szöveggel.
A címkék egymásba ágyazhatók, pl.
Szöveg
. Befektetéskor kövesse a zárási sorrendet (a „matryoshka” elv), például a következő bejegyzés helytelen lesz:Szöveg
.A HTML elemeknek lehetnek attribútumai (globális, minden HTML elemre alkalmazható és saját). Az attribútumok az elem nyitó címkéjébe íródnak, és egy nevet és értéket tartalmaznak, a name="value" attribútum formátumban. Az attribútumok lehetővé teszik annak az elemnek a tulajdonságainak és viselkedésének megváltoztatását, amelyhez be vannak állítva.
Minden elemhez több osztályérték és csak egy azonosító érték rendelhető. Több osztályértéket szóközzel elválasztva írunk. Az osztály- és azonosítóértékek csak betűkből, számokból, kötőjelekből és aláhúzásjelekből állhatnak, és csak betűkkel vagy számokkal kezdődhetnek.
A böngésző megtekinti (értelmezi) a HTML dokumentumot, felépíti a struktúráját (DOM) és megjeleníti a fájlban található utasítások (stíluslapok, szkriptek) szerint. Ha a jelölés helyes, a böngészőablak egy HTML-oldalt fog megjeleníteni, amely HTML-elemeket tartalmaz - fejléceket, táblázatokat, képeket stb.
Az értelmezési folyamat (elemzés) azelőtt kezdődik, hogy a weboldal teljesen betöltődik a böngészőbe. A böngészők szekvenciálisan dolgozzák fel a HTML dokumentumokat a kezdetektől, miközben feldolgozzák a CSS-t, és a stíluslapokat oldalelemekhez kapcsolják.
Egy HTML dokumentum két részből áll - a fejlécből - a címkék között ... és a tartalom részből - a címkék között ....
Weboldal szerkezete 1. HTML dokumentum szerkezetA HTML követi a dokumentumtípus-deklarációs fájlban foglalt szabályokat (Dokumentumtípus-meghatározás vagy DTD). A DTD egy XML dokumentum, amely meghatározza, hogy mely címkék, attribútumok és azok értékei érvényesek egy adott HTML típus. Az egyes HTML verziók saját DTD-vel rendelkezik.
A DOCTYPE felelős azért, hogy a böngésző helyesen jelenítse meg a weboldalt. A DOCTYPE nem csak a HTML verziót (pl. html) határozza meg, hanem a megfelelő DTD fájlt is az interneten.
...
A címkén belüli elemek egy dokumentumfát alkotnak, az ún tárgymodell dokumentum, DOM (dokumentumobjektum modell). Ebben az esetben az elem a gyökérelem.
Rizs. 1. A legegyszerűbb szerkezet weboldalak A weboldalelemek interakciójának megértéséhez figyelembe kell venni az elemek közötti úgynevezett „családi kapcsolatokat”. A több beágyazott elem közötti kapcsolatok szülő, gyermek és nővér kategóriába sorolhatók.
Az ős olyan elem, amely más elemeket tartalmaz. Az 1. ábrán az összes elem őse . Ugyanakkor az elem az összes benne lévő címke őse: ,
, stb.
A leszármazott olyan elem, amely egy vagy több elemtípuson belül található. Például a , és az elem leszármazottja
Mindkettő leszármazottja.
A szülőelem olyan elem, amely alacsonyabb szinten kapcsolódik más elemekhez, és felettük helyezkedik el a fában. Az 1. ábrán és. Címke
A szülő csak .
Gyermek elem- egy elem közvetlenül alárendelve egy másik elemnek jobban magas szint. Az 1. ábrán csak elemek vannak, ,
És gyermekei .
A testvérelem olyan elem, amelynek a kérdéses elemmel közös szülőeleme van, az úgynevezett azonos szintű elemek. Az 1. ábrán és az azonos szintű elemek, valamint a , és elemek
Testvérei egymásnak.
1.1. 1.2. elem. ElemA ... szakasz tartalmazza technikai információ az oldalról: cím, leírás, kulcsszavakat Mert kereső motorok, kódolás stb. Az ott megadott információk nem jelennek meg a böngészőablakban, de olyan információkat tartalmaznak, amelyek megmondják a böngészőnek, hogyan dolgozza fel az oldalt.
1.2.1. ElemA szükséges szakaszcímke: . A címkén belül elhelyezett szöveg megjelenik a webböngésző címsorában. A cím nem lehet hosszabb 60 karakternél, hogy teljesen beleférjen a címbe. A cím szövegének tartalmaznia kell a lehető legtöbbet Teljes leírás weboldal tartalma.
1.2.2. ElemAz opcionális szakaszcímke a egyetlen címke. Segítségével beállíthatja az oldal tartalmának leírását és a keresőmotorok kulcsszavait, a HTML dokumentum szerzőjét és egyéb metaadat tulajdonságokat. Egy elem több elemet is tartalmazhat, mert a használt attribútumoktól függően különböző információkat hordoznak.
Az oldal tartalmának és kulcsszavainak leírása egyszerre több nyelven is megadható, például oroszul és angolul:
Címke használatával letilthatja vagy engedélyezheti a weboldalak keresőmotorok általi indexelését:
Mert automatikus újraindítás oldal egy meghatározott idő elteltével, akkor a frissítési értéket kell használnia:
Az oldal 30 másodperc múlva újra betöltődik. A látogató másik oldalra való átirányításához meg kell adnia az URL-t az url paraméterben:
Minden program -> Tartozékok -> Jegyzettömb". Hozzunk létre egy oldalt az autókról. Tehát nyissa meg a Jegyzettömböt, és írja be a következő szöveget:
Példa weblapra
Weboldal az autókról.
Üdvözöljük autóipari weboldalunkon. Itt sok érdekes és hasznos cikkeket az autókról. Az oldalon számos import és hazai autó leírása található.
Ezután mentse a létrehozott weboldalt egy index.html nevű fájlba. Ebben az esetben a fájlmentés párbeszédablakban a kódolást UTF-8-ra kell állítani, és a fájl nevét idézőjelbe kell tenni, ellenkező esetben a Jegyzettömb hozzáadja a txt kiterjesztést, és a fájlunk neve index.htm.txt lesz:
Most már csak meg kell nyitni a létrehozott fájlt a böngészőben, és megnézni az eredményt. Ehhez használhatja a mellékelt Windows böngésző Microsoft internet böngésző, vagy bármely más, a számítógépére telepített böngészőben kattintson duplán az index.html fájlra, vagy húzza a fájlt a böngésző ikonjára. Nyisd meg és nézz valami ilyesmit:
Így létrehoztunk egy weblapot a Jegyzettömbben, bár kissé nem leírható, de már tartalmaz egy nagy címsort és egy szöveges bekezdést, amely automatikusan sorokra van bontva, és félkövéren tartalmaz egy töredéket.
Mi az a címke?Most beszéljünk többet az oldal szerkezetéről. Nézzük a töredéket: Weboldal az autókról. Itt az oldalon címként megjelenő szöveget látjuk, bezárva és címkékbe foglalva. Mi az a címke a HTML-ben?
A HTML tag közönséges szavak és karakterek szögletes zárójelbe zárva, pl.
, . Tehát a címke a nyitó címke, a címke a záró címke, a között lévő szöveget pedig a címke tartalmának nevezzük. A címkét és a címkét címkepároknak is nevezik. A nyitó tag, a tartalom és a záró címke együtt egy HTML dokumentumelemet alkot. Vannak olyan elemek is, amelyek egy nyitó címkéből állnak:
A párcímke így határozza meg az első szintű címsorelemet. Összesen hat szintű címsor van, ezek a - .
Az elemek lehetnek blokkok vagy szövegközi (szöveg). A blokkelemek strukturális formázást biztosítanak az oldal számára. A blokkelemek mindig megjelennek az oldalon új sorés a szomszédos elemekből vannak behúzva. A beágyazott elemek közvetlen szövegformázást vagy logikai formázást biztosítanak. Az elem egy blokk elem.
Nekem ennyi!!! Találkozunk a következő bejegyzésekben!
Kezdjük mai leckénket a legegyszerűbb weboldal létrehozásával. Ehhez először elkészítünk egy szöveges dokumentumot, majd konvertálunk htm dokumentummá, majd beszúrunk néhány sornyi kódot, majd megnyitjuk a létrehozott weboldalunkat a böngészőben. Ezt követően megismerkedünk a címkék fogalmával, a kötelező elemekkel és azok fajtáival, amelyeknek minden weboldalon jelen kell lenniük. Nézzük meg különbségeiket és alkalmazásuk jellemzőit. Ezt követően megtanuljuk a kódíráshoz szükséges alapvető szabályokat. Ezek a kötelező elemekre, a címkék írásának szabályaira és a böngészőfunkciókra vonatkoznak a kód észlelésében.
Alapvető HTML-struktúra
Alkossuk meg a maximumot egyszerű HTML dokumentum. Ehhez hozzon létre egy mappát a számítógépén. Nevezd aminek akarod. Bemegyünk, kattintsunk Jobb klikk egérrel üres mezőés válassza a „Létrehozás” > „Szöveges dokumentum” lehetőséget. Nyissa meg a létrehozott szöveges dokumentumot és főmenü válassza a „Fájl” > „Mentés másként...” lehetőséget. A megnyíló párbeszédpanel „Fájlnév” sorába írja be az index.htm-et. A „Kódolás” sorban válassza ki az UTF-8-at, és kattintson a „Mentés” gombra. Lesz egy indexfájlunk, amelybe beírjuk az összes HTML kódot. 
Most másolja ki az alábbi kódot, és illessze be a fájlba index. Fontos! Ezt a fájlt egy speciális szerkesztővel kell megnyitnia. Általában a Jegyzettömböt használom. Ehhez kattintson a jobb gombbal a fájlra indexés válassza a „Megnyitás...” > „Jegyzettömb” lehetőséget. Vannak más speciális szerkesztők a jelölés kiemelésével. Amelyik kényelmesebb az Ön számára. Ezután nyomja meg a Ctrl+S billentyűkombinációt a változtatások mentéséhez, majd kattintson duplán magára az indexfájlra. Az első elkészített weboldalunk megnyílik a böngészőben.
Az első weblapom
Ez az első weboldalam
Annak érdekében, hogy a böngésző egy dokumentum megjelenítésekor megértse, hogy nem egyszerű szöveggel foglalkozik, hanem formázó elemmel és címkékkel. A címkéknek két típusa van – egyedi és párosított (tárolók). Egyetlen címke önállóan használatos, és a párosított címke tartalmazhat más címkéket vagy szöveget is. A párosított címkék két részből állnak - egy nyitó és egy záró címkéből. A nyitó címke egyetlen címke, a záró címke pedig perjel > címkét használ.
Minden HTML-dokumentumnak egy címkével kell kezdődnie, és a megfelelőjével, a címkével kell végződnie. Rajtuk kívül be ez a fájl három további címkét tartalmaz, amelyeknek minden más HTML-dokumentumban jelen kell lenniük. Címke pár
Valamint magára a HTML-dokumentumra vonatkozó bármilyen információ jelölésére szolgálnak. A címkék célja a böngésző címsorában megjelenő cím hozzáadása. A címkék pedig a HTML-oldalon megjelenő bármely szöveg azonosítására szolgálnak.
Szükséges XHTML dokumentumelemek
XHTML-ben több új verzió HTML, még egy elem szükséges a létrehozott weboldalakhoz - egy címke. Az aktuális bizonylat típusát hivatott jelezni - DTD (dokumentumtípus definíció, bizonylattípus leírása). Erre azért van szükség, hogy a böngésző megértse az aktuális weboldal értelmezését. Ez a címke a fájl tetején jelenik meg, és az aktuális HTML-dokumentumot XHTML-kompatibilisként (vagy az XHTML-specifikációval kompatibilisként) azonosítja. Ha XHTML-kompatibilis dokumentumot hoz létre, az valahogy így nézhet ki:
XHTML oldalam Ez az első XHTML oldalam.
A címkének három fajtája van: Strict, Transitional és Frameset. A HTML-dokumentum tetején adja meg, hogy melyiket szeretné használni.
Szigorú Csak akkor használja ezt a típusú címkét, ha teljesen biztos abban, hogy weboldalának minden látogatója olyan új böngészőt használ, amely megfelelően értelmezi a stíluslapokat. A Strict fajta így néz ki:
Átmeneti Használja ezt a fajtát, ha nem tudja pontosan, melyik szoftver a weboldal megtekintésére szolgál majd.
Frameset Használja ezt a változatot, ha keretekkel dolgozik.
Kérjük, vegye figyelembe még egy különbséget az XHTML kódok és a hagyományos kódok között: HTML dokumentumok: A címkének három új attribútuma van: xmlns, xml:lang és lang. Amikor HTML alkalmazása Csak a címkét kell megadni ahhoz, hogy a fájlt HTML-dokumentumként azonosítsuk, de ebben az esetben hozzá kell adni az xmlns attribútumot, amely összeköti a dokumentumot az XHTML W3C-definíciójával, amely még fejlődik. Egyelőre ne felejtse el szerepeltetni a címkét és a teljes címkét az összes weboldal kódjában.
A kódok helyes írása
A címkék önmagukban nem elegendőek egy jó weboldal létrehozásához. Bár néhány hiba továbbra is előfordulhat a HTML kódok írása során, az XHTML kódok szigorú betartását követelik meg a szabályokhoz. Habár aktuális verziók többség modern böngészők képesek helyesen értelmezni a kódokat, még akkor is, ha helytelen címkékből vannak beírva, a böngészők későbbi verziói nem lesznek olyan okosak. Most gondolkodhatsz a jövőn, és megtanulhatsz követni néhányat alapelvek XHTML szabványoknak megfelelő webkódok írása.
Szerelje be az ebben a leckében tárgyalt összes szükséges XHTML-elemet a weboldal kódjaiba. Létrehozhat magának egy XHTML dokumentumsablont, amely kezdetben az összes szükséges címkét tartalmazza.
Használjon kisbetűket minden címkéhez. Felvétel böngészőhöz
És egyenértékűek (bár lehet, hogy nem feltétlenül azok). Használjon kisbetűket az összes parancs begépelésekor, és nem kell módosítania a weboldal kódjait az XHTML szabványok változásával.
Soha ne használjon szóközt a fájlnevekben. Régi számítógépes rendszerek nehézségeik vannak a szóközt tartalmazó fájlnevek olvasásával (például az első oldalam.htm). Szóköz helyett írjon be egy aláhúzást (például my_first_page. htm).
Minden címke attribútumértéket dupla vagy szimpla idézőjelben kell megadni. Az idézőjelek hiánya nem vezet hibához, a böngészők sok esetben teljesen korrektül dolgozzák fel a kódot idézőjelek nélkül, kivéve a szóközt tartalmazó szövegeket. Ekkor a böngésző csak az első szót veszi értékként. Ezért mindig szokjon hozzá a címke attribútumértékeinek idézőjelbe történő megadásához.
Ha bármely címke vagy attribútuma hibásan lett megírva, a böngésző figyelmen kívül hagyja az ilyen címkét, és úgy jeleníti meg a szöveget, mintha a címke nem létezne. Ismételten kerülni kell az ismeretlen címkéket, mivel a HTML-kód nem kerül ellenőrzésre.
A címkebeágyazásnak van egy bizonyos hierarchiája. Például címke
A tartályban kell lennie, és nem máshol. A hibák elkerülése érdekében győződjön meg arról, hogy a címkék megfelelően vannak elhelyezve a kódban. Ha a címkék egyenértékűek egymással a kommunikációs hierarchiában, akkor sorrendjük nem számít. Tehát felcserélheti a címkéket, és ez semmilyen módon nem befolyásolja a végeredményt.
A záró címkéknek három állapota van: kötelező, nem kötelező és nem kötelező. A szükséges záró címkének mindig meg kell jelennie, ellenkező esetben a dokumentum megjelenítésekor hiba lép fel. Egyes címkéknél egyáltalán nincs zárócímke. Az opcionális zárócímke azt jelenti, hogy a fejlesztő hiba nélkül hozzáadhatja vagy kihagyhatja. Azonban ajánlatos mindent bezárni hasonló címkék, beleértve az opcionálisakat is, ez fegyelmet teremt, harmonikusabb és szigorúbb kódot hoz létre, amely könnyen módosítható.