Home-theater-designers
Annak ellenére, hogy a modern webhelyek általában felhasználóbarát felületekkel készülnek, hasznos tudni néhány alapvető HTML-t. Ha ismeri a következő 17 HTML -példacímkét (és néhány extrát), akkor létrehozhat egy alap weboldalt a semmiből, vagy módosíthatja a WordPresshez hasonló alkalmazás által létrehozott kódot.
A legtöbb címkéhez HTML -példákat mutatunk be kimenettel. Ha látni szeretné őket működés közben, töltse le a minta HTML -fájlt a cikk végén. Játszhatsz vele egy szövegszerkesztőben, és betöltheted egy böngészőbe, hogy lássad, mit tesznek a változtatások.
1.
Erre a címkére minden létrehozott HTML dokumentum elején szüksége lesz. Ez biztosítja, hogy a böngésző tudja, hogy HTML -t olvas, és hogy elvárja a legújabb verziót, a HTML5 -öt.
Annak ellenére, hogy ez valójában nem HTML -címke, jó tudni.
2.
Ez egy másik címke, amely jelzi a böngészőnek, hogy HTML -t olvas. A címke közvetlenül a DOCTYPE címke után megy, és közvetlenül a fájl végén zárja be. A dokumentumban minden más e címkék közé kerül.
3.
A címke elindítja a fájl fejlécrészét. Az itt található tartalom nem jelenik meg a weboldalon. Ehelyett a keresőmotorok metaadatait és a böngészője adatait tartalmazza.
Az alapoldalak esetében a címke tartalmazza a címét, és ennyi. De van még néhány dolog, amelyeket felvehet, amelyeket egy pillanat alatt áttekintünk.
Négy.
Ez a címke határozza meg az oldal címét. Mindössze annyit kell tennie, hogy beírja a címét a címkébe, és így bezárja (a fejléccímkéket is beillesztettem a kontextus megjelenítésére):
My Website
Ez a név jelenik meg lapcímként, amikor megnyitja a böngészőben.
5.
A címcímkéhez hasonlóan a metaadatok az oldal fejlécébe kerülnek. A metaadatokat elsősorban a keresőmotorok használják, és információkat tartalmaznak az oldalon található tartalmakról. Számos metamező létezik, de ezek a leggyakrabban használt:
- leírás : Az oldal alapvető leírása.
- kulcsszavak : Az oldalára alkalmazható kulcsszavak választéka.
- szerző : Az oldalad szerzője.
- nézetablak : Címke annak biztosítására, hogy oldala minden eszközön jól nézzen ki.
Íme egy példa erre az oldalra:
A „viewport” címke tartalmának mindig a „width = device-width, initial-scale = 1.0” tartalomnak kell lennie, hogy oldala jól jelenjen meg mobil- és asztali eszközökön.
6.
Miután bezárta a fejléc részt, a törzshez jut. Ezt a címkével nyitja meg, és a címkével zárja. Ez közvetlenül a fájl végén található, közvetlenül a címke előtt.
A weboldal teljes tartalma e címkék közé kerül. Olyan egyszerű, mint amilyennek hangzik:
Everything you want displayed on your page.
7.
Kicsit kevesebb nagy fejléc
Alfejléc
Eredmény:
Mint látható, minden szinten kisebbek lesznek.
8.
A bekezdéscímke új bekezdést kezd. Ez általában két sortörést szúr be.
Nézze meg például az előző sor és a sor közötti szünetet. Ez az, amit a
címke megteszi.
Your first paragraph.
Your second paragraph.
Eredmény:
Az első bekezdésed.
A második bekezdésed.
Te is használjon CSS stílusokat a bekezdéscímkékben, mint ez, amely megváltoztatja a szöveg méretét:
This is 50% larger text.
Eredmény:
9.
A sortörés címke egyetlen sortörést illeszt be:
The first line.
The second line (close to the first one).
Eredmény:
Hasonló módon dolgozik a
címke. Ez vízszintes vonalat húz az oldalra, és jól elválasztja a szövegrészeket.
10.
Ez a címke határozza meg a fontos szöveget. Általában ez azt jelenti, hogy merész lesz. Lehetséges azonban a CSS használata a szöveg másképp jelenik meg.
mi a nyomtatóm IP -címe
Azonban biztonságosan használhatja félkövér szövegre.
Very important things you want to say. Eredmény:
Nagyon fontos dolgokat szeretne elmondani.
Ha ismeri a címkét a félkövér szöveghez, akkor is használhatja. Nincs garancia arra, hogy a HTML jövőbeni verzióiban is működni fog, de egyelőre működik.
tizenegy.
Mint és , és rokonok. Az címke a kiemelt szöveget azonosítja, ami általában azt jelenti, hogy dőlt betűs lesz. Ismét fennáll annak a lehetősége, hogy a CSS másként jeleníti meg a kiemelt szöveget.
An emphasized line. Eredmény:
Kiemelt vonal.
Az címke továbbra is működik, de ismét lehetséges, hogy a HTML későbbi verzióiban megszűnik.
12.
Az , vagy horgony, címke lehetővé teszi hivatkozások létrehozását. Egy egyszerű link így néz ki:
Menjen a MUO -hoz A „href” attribútum azonosítja a hivatkozás célját. Sok esetben ez egy másik webhely lesz. Ez lehet fájl is, például kép vagy PDF.
További hasznos attribútumok a „target” és a „title”. A target attribútumot szinte kizárólag egy link megnyitására használják új lapon vagy ablakban, például:
Go to MUO in a new tab Eredmény:
A 'title' attribútum egy eszköztippet hoz létre. Mutasson az egérrel az alábbi linkre, és nézze meg, hogyan működik:
Hover over this to see the tool tip Eredmény:
Mutasson erre az egérrel az eszköz tippjének megtekintéséhez
13. ![]()
Ha képet szeretne beágyazni az oldalára, akkor a képcímkét kell használnia. Általában az „src” attribútummal együtt fogja használni. Ez adja meg a kép forrását, például:
Eredmény:
hogyan kell fejleszteni egy alkalmazást az iPhone számára
Egyéb attribútumok is rendelkezésre állnak, például „magasság”, „szélesség” és „alt”. Így nézhet ki:
Ahogy várható volt, a „height” és a „width” attribútumok határozzák meg a kép magasságát és szélességét. Általában érdemes csak egyet beállítani, hogy a kép méretezése megfelelő legyen. Ha mindkettőt használja, akkor kifeszített vagy összehúzott képet kaphat.
Az „alt” címke megmondja a böngészőnek, hogy milyen szöveget jelenítsen meg, ha a kép nem jeleníthető meg, és célszerű bármilyen képhez mellékelni. Ha valakinek különösen lassú a kapcsolata vagy régi böngészője van, akkor is képet kaphat arról, hogy mi legyen az oldalon.
14.
A rendezett listacímke lehetővé teszi a rendezett lista létrehozását. Általában ez azt jelenti, hogy számozott listát kap. A lista minden eleméhez szükség van egy listaelem címkére (
), így a listája így fog kinézni:
- First thing
- Second thing
- Third thing
Eredmény:
- Első dolog
- Második dolog
- Harmadik dolog
A HTML5 -ben használhatja
hogy megfordítsuk a számok sorrendjét. A start értéket pedig a start attribútummal állíthatja be. A „type” attribútum segítségével megmondhatja a böngészőnek, hogy milyen típusú szimbólumot kell használni a listaelemekhez. Beállítható „1”, „A”, „a”, „I” vagy „i” értékre, így a lista a jelzett szimbólummal jelenik meg:
tizenöt.
A rendezetlen lista sokkal egyszerűbb, mint a rendelt társa. Ez egyszerűen egy felsorolásos lista.
- First item
- Second item
- Third item
Eredmény:
- Első tétel
- Második tétel
- Harmadik tétel
A rendezetlen listák „type” attribútumokkal is rendelkeznek, és beállíthatja „disc”, „circle” vagy „square” értékre.
16.
Míg a táblázatok formázáshoz való használata rosszalló, rengeteg alkalommal érdemes sorokat és oszlopokat használni az oldalon található információk szegmentálására. A táblázat működéséhez több címke szükséges. Íme a minta HTML kód:
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
Az
és
címkék határozzák meg a táblázat kezdetét és végét. Azcímke tartalmazza a táblázat összes tartalmát. A táblázat minden sora a
címke. Minden soron belül minden cella be van csomagolvacímkék oszlopfejlécekhez, vagy címkék az oszlopadatokhoz. Szüksége van egy ilyenre minden sor minden oszlopához. Eredmény:
1. oszlop 2. oszlop 1. sor, 1. oszlop 1. sor, 2. oszlop 2. sor, 1. oszlop 2. sor, 2. oszlop
17.
Ha egy másik webhelyet vagy személyt idéz, és meg szeretné különböztetni az idézetet a dokumentum többi részétől, használja a blockquote címkét. Mindössze annyit kell tennie, hogy az idézetet csatolja a blokquote címkék nyitó és záró címkéihez:
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
Eredmény:
A weben, ahogy elképzeltem, még nem láttuk. A jövő még mindig sokkal nagyobb, mint a múlt.
A használt pontos formázás függhet a használt böngészőtől vagy a webhely CSS -től. De a címke ugyanaz marad.
HTML kódminták
Ezzel a 17 HTML -példával képesnek kell lennie egy egyszerű webhely létrehozására. Az összeset most tesztelheti egy online szövegszerkesztőben, hogy megtapasztalhassa működésüket.
Ha többet szeretne kapni a HTML leckékből, próbáljon ki néhány mikrotanuló alkalmazást a kódoláshoz. Segítenek gyorsan felgyorsítani a tempót.
Részvény Részvény Csipog Email Szeretnéd megtanulni az alapvető kódolást? Próbáljon ki 5 harapás méretű kódolási alkalmazást szabadidejében Szeretnéd megtanulni az alapvető kódolást, de kevés időd van? Ezek a harapás méretű kódoló alkalmazások mindössze néhány percet vesznek igénybe a forgalmas napból.
Olvassa tovább Kapcsolódó témák - Programozás
- Wordpress
- HTML
- Webfejlesztés
- Kódolási oktatóanyagok
A szerzőről Andy Betts(221 megjelent cikk) Andy egy korábbi nyomtatott újságíró és folyóirat -szerkesztő, aki 15 éve ír a technológiáról. Ez idő alatt számtalan publikációban közreműködött, és szövegírási munkákat készített nagy technológiai cégeknek. Szakértő megjegyzéseket is adott a médiának, és paneleket vezetett az ipari rendezvényeken.
Továbbiak Andy Betts -tőlIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide