Webhelyek, blogok, weboldalak – korunkban már ismert fogalmak. Az internet fejlődésével hihetetlenül népszerűvé váltak a weboldalak tárolására szolgáló oldalak, és ez nem is meglepő: van, aki számára elengedhetetlen, másoknak kellemes szórakozás a saját weboldal. Az első esetben általában cégekről, társaságokról, egyéni vállalkozókról beszélünk, amikor bármilyen keresett terméket vagy szolgáltatást hirdetnek. A második a bloggerekről szól.
Ezen kívül vannak olyan internetfelhasználók, akik egyszerűen információkat keresnek, blogokat olvasnak, videókat néznek és így tovább.
Minőségi webhely létrehozásához számos lehetőség közül választhat. A webes programozásra fogunk összpontosítani HTML-en keresztül.
Mi az a HTML
A HTML a Hyper Text Mark-Up Language rövidítése. Angolról lefordítva ez "Hiperszöveg jelölőnyelvet" jelent.
Más szóval a HTML egy kódkészlet, amellyel létrehozhatja a webhely fő elemeit, keretét, pl.hogyan épülnek fel a szavak mondatokból.
A HTML kódokat kizárólag latin betűkkel írják, és címkéknek nevezik, és minden kód szögletes zárójelben van. Egyes címkék párosítva vannak, mások nincsenek párosítva.
A párosítva azt jelenti, hogy hibátlanul párban kell használni. Például a nyitó címke jelzi, hol kezdődik a weboldalon, a záró címke pedig azt, hogy hol áll meg. Ez utóbbi abban különbözik az előbbitől, hogy a nyitószögletes zárójel után egy perjel van. Például a a nyitó címke, aa záró címke.
A párosítatlan címkéknek nincs szükségük partnerre.
Sok címkének lehetnek attribútumai – további elemek, amelyek konkrétabb jelentést adnak neki. Például a. címke
Ahol a HTML-t használják
A klasszikus megértése annak, hogy hol van szükség HTML-re, a webhelykészítés.
A gyakorlatban ez elég is lehet, hiszen a HTML lehetővé teszi az oldal fő elemeinek, menük (többszintű is) létrehozását, a háttér beállítását, szöveg, kép, hang, videó beszúrását, betűtípusok szerkesztését és még sok más.
Léteznek azonban más nyelvek is, amelyek lehetővé teszik, hogy érdekesebb és gyakran szükséges elemeket adjon egy weboldalhoz:
- A CSS stílusokat állít be a teljes webhelyhez anélkül, hogy folyamatosan elő kellene írnia az egyes elemek stílusjegyeit címkék segítségével – például a szöveg színét és betűtípusát.
- A szkriptnyelv lehetővé teszi mini programok (szkriptek) fejlesztését és beágyazását a webhelyre,banális esztétikai dolgok (a link színének megváltoztatása, amikor az egérmutatót fölé viszi) és a funkcionálisakkal zárul (ügyfelek e-mail címeinek, telefonszámainak gyűjtése).
- A PHP-vel saját vendégkönyvet vagy kommentelő rendszert fejleszthetsz.
A HTML-t is használják a terjesztésre szánt e-mailek létrehozásához.
Mi az a link
Lehetővé teszik, hogy egy másik weboldalra navigáljon, a webhelyen belül és kívül egyaránt.
A HTML hivatkozásokat gyakran használják:
- Külső webes erőforrás megnyitásához.
- A webhelyen belüli oldalak közötti mozgáshoz.
- A google űrlapok megnyitásához.
A HTML-ben a forrásra mutató hivatkozás is gyakran szerepel, különösen azért, mert egy másik webhelyről származó anyag másolásakor meg kell adni a szerzőt. Ellenkező esetben a forrásmegjelölés nélküli másolás a szerzői jogok megsértése, a tartalomlopás és a visszavágás definíciói alá eshet. Ezenkívül a kölcsönzött, nem egyedi anyagok használata csökkenti a SEO teljesítményét, és a forrásra mutató hivatkozás feltüntetése csökkenti a kockázatokat.
A hivatkozások típusai
A klasszikus értelemben a hivatkozás egy webes erőforrás címe, amelyre kattintva eljuthat.
Ezen kívül vannak hiperhivatkozások: szöveg és képek. Ezekben az esetekben a HTML hivatkozás "el van rejtve" valamilyen mondat (szó) vagy kép alá, és annak követéséhez a szövegre vagy képre kell kattintani.
Más típusú linkek:
- Nem látogatott – egy hivatkozás, amelyre még nem kattintottak egy adott munkamenet során. Például, ha tegnap követte ezt a hivatkozást, majd kikapcsolta a számítógépet, majd ma újra bekapcsolta, akkor a link ismét nem látogatott, mivel új munkamenet kezdődött.
- Aktív - ebben az állapotban a hivatkozás nagyon rövid ideig mentődik: a hivatkozásra kattintás és a követés közötti intervallum.
- Meglátogatott – olyan link, amelyet már legalább egyszer meglátogattak egy munkamenet során.
A normál szöveges hivatkozások esetében a meglátogatott hivatkozások színe általában megváltozik, hacsak másképp nem rendelkezik.
A hiperhivatkozású kép nem változtatja meg a megjelenését, függetlenül attól, hogy meglátogatták-e vagy sem.
Szokásos hivatkozás beszúrása
Sok internetes forrás linkként érzékeli a webhely címét, azonnal kattinthatóvá teszi, és színnel kiemeli. Például, ha a címet messengerben vagy e-mailben küldték el, akkor rákattintva eljuthat az oldalra.
Ha saját maga hoz létre egy webhelyet HTML használatával, egy hivatkozást kell beillesztenie egy speciális címkével. Így fog kinézni: weboldal címe. A HTML-ben található linkszöveget teljes egészében meg kell adni a protokollal.
Szöveges hiperhivatkozás beszúrása
Korábban elhangzott, hogy a szöveges hiperhivatkozás ugyanazt a funkciót tölti be, mint egy normál hivatkozás, de esztétikusabbnak tűnik: a gyakran feleslegesen hosszú webhelycím helyett egy szót vagy kifejezést jeleznek. Például az "Információ keresése itt" mondatban elrejtheti a hivatkozástaz "itt" szó. Ez kiemelve lesz, és rákattintva a felhasználó a kívánt webhelyre jut.
A HTML-hivatkozás létrehozásáról már korábban szó volt. Szöveges hiperhivatkozást is beszúrhat ugyanazzal a címkével. Az egyetlen különbség az, hogy a címkék között meg kell adni azt a szöveget, amely alatt a hivatkozás el lesz rejtve: látható szöveg.
Hogyan kell beszúrni egy kép hiperhivatkozását
Itt egy kicsit bonyolultabb. Ugyanazt a címkét használjuk, de szöveg helyett meg kell adnia a kép elérési útját.
Az elérési út a kép helye. Ha a kép (fotó) egy fájlmegosztó szolgáltatásban található, akkor a kép elérési útjában lévő összes mappát perjellel kell megadnia. Ha lehetséges, csatolhat egy képre mutató hivatkozást is.
Címkézés
Az src mellett más attribútumok is alkalmazhatók, amelyek lehetővé teszik a kép magasságának, szélességének, elhelyezkedésének és még sok más beállítását. Néhány közülük:
- Src - megadja a kép elérési útját.
- Lowsrc – megegyezik az előző attribútummal, de gyenge minőségű képekhez van megadva.
- Magasság – kép magassága.
- Szélesség – a szélessége.
- Alt – képleírás. Ha az egérmutatót egy fénykép vagy kép fölé viszi, az attribútumban megadott szöveg megjelenik.
- Szegély – meghatározza a kép körüli szegély vastagságát.
Az attribútumok a címke után vannak megadva, és benne vannakösszetételét. Az attribútumot az értékének kell követnie. Például a "height" vagy a "width" (magasság, szélesség) attribútumokhoz a weboldalon lévő kép magasságát adja meg. A mértékegység a pixel, hacsak nincs másképp megadva.
Így fog kinézni: <a href="weboldal címe"
. Ezek az attribútumok segítenek beállítani a kép megfelelő méretét. A szegély segít láthatatlan szegély létrehozásában a kép körül.
A fenti attribútumok külön érvényesek a képbeillesztési címkére. Például:.
Mik azok a horgonylinkek
A horgonyhivatkozások létrehozása nagyon hasznos készség. Gyakran szükség van arra, hogy egy webold alt hosszú szövegtömbbel vagy több alszakasztal egy oldalon elhelyezzenek. Ebben az esetben azonnal kezdheti a szöveg vagy weboldal alszakaszaira mutató hivatkozások listáját, és ha rákattint, a felhasználó közvetlenül a kívánt részhez jut.
A horgonyhivatkozások létrehozása több attribútumcímkét igényel, mint más típusú hivatkozások esetében.
Először is be kell állítania a felső attribútum használatával az egyes információs blokkok vagy szövegrészek általános értékét, majd társítania kell a megfelelő hivatkozáshoz.
Jellemzéseik kiterjedtebbek, ezért célszerű először az egyszerűbb linkek létrehozását elsajátítani, majd áttérni a horgonylinkek kialakítására.
Tippek
Tapaszt alt segítségprogramozók:
- Beállíthatja, hogy a hivatkozással kapcsolatos információk HTML-formátumban, lebegve jelenjenek meg. Ehhez jól jöhet az alt attribútum, amelyet grafikus elemeknél is használunk.
- Létrehozhat egy listát a hivatkozásokról HTML használatával. Ez különösen a horgonyhivatkozások esetén lehet hasznos, valamint akkor, ha listát kell készítenie azokról a webes erőforrásokról, amelyeket közvetlenül az aktuális weboldalról lehet linkelni.
- A CSS és a JavaScript, valamint néhány HTML-funkció segítségével a megszokottól eltérő kialakítású szöveges hivatkozásokat és hiperhivatkozásokat hozhat létre. Ha például egy hivatkozás fölé viszi az egérmutatót, az megváltoztathatja a színét, és visszatérhet az előzőhöz, ha a kurzor távol van tőle. Ezt egyéni JavaScript-szkripttel lehet megtenni. Ezenkívül a link színe másra is beállítható, mint a kék a nem látogatott vagy a lila a látogatott. Ez a CSS feladata.
- Ne éljen vissza a hivatkozásokkal. A sok nem megfelelő hivatkozást tartalmazó weboldal hanyagnak és hanyagnak tűnik.
- Győződjön meg arról, hogy a felhasználó megérti, hogy a képet tartalmazó hivatkozás valóban kép, és nem csak egy kép.
Következtetés
Nagyon könnyű linkelni egy old alt HTML-ben. Fontos ennek a nyelvnek az összes fő pontját betartani, mivel egy kis hiba is oda vezethet, hogy nem lesz eredmény, és a kód nem fog működni.
