HTML-oldal írása (képekkel) - Tippek

Tartalom

Lépések
1. rész: Hogyan fedeztem fel a HTML-t
Tanács
Figyelem
Amire szükséged van

A HTML (HyperText Markup Language) a weboldalak készítésének alapnyelve. Könnyű és rugalmas kódoló nyelvként jött létre. Az internet szinte minden webhelyét a kód valamilyen formájával fejlesztették (ColdFusion, XML, XSLT). A HTML könnyen felfogható, de sokáig tanulhat róla, ha érdekli az átfogó funkcionalitása. Ha színesebbé és szórakoztatóbbá kívánja tenni webhelyét, megtanulhatja az alapvető CSS-t, amint megszokja az alapvető HTML-oldalt.

Lépések

1/4 rész: Dokumentum készítése

Nyisson meg egy egyszerű szövegszerkesztőt. A NotePad jó lehetőség, és ingyenesen letölthető. A legtöbb szövegszerkesztővel HTML-t írhat, de az automatikus formázási képességekkel bonyolultabb szoftver megnehezítheti a HTML-oldal rendszerezését.
- Ne használja a TextEdit alkalmazást, mivel az általában olyan formátumban menti a fájlt, amelyet a böngésző nem feltétlenül ismer fel HTML-ként.
- Használhat online HTML-szerkesztőt is. Dedikált HTML-szerkesztő programok nem ajánlottak kezdőknek.
Fájl mentése weboldalként. Válassza a Fájl → Mentés másként parancsot a felső menüben. Módosítsa a fájlformátumot "Weboldal", ".html" vagy ".htm" értékre. Mentse el a fájlt, ahol könnyen megtalálja.
- E három lehetőség között nincs különbség.
Nyissa meg a fájlt egy böngészőben. Kattintson duplán a fájlra, és automatikusan üres weboldalként nyílik meg a böngészőben. Alternatív megoldásként megnyithat egy böngészőt, például a Firefox vagy az Internet Explorer böngészőt, majd a Fájl → Fájl megnyitása parancs segítségével válassza ki a dokumentumot.
- Ez a weboldal nem online. Csak a számítógépén tekinthető meg.
Frissítse a weboldalt, és tekintse meg a végrehajtott módosításokat. Írja be a következőket az üres dokumentumába: Helló. Mentse a dokumentumot. Frissítse az üres weboldalt a böngészőjében, és az oldal tetején félkövéren fel kell tüntetni a "Hello" szót. Amikor az oktatóanyag alatt tesztelni szeretné az új HTML-kódot, mentse el a .htm dokumentumot, majd frissítse a böngészőablakot a HTML összeállításának megtekintéséhez.
- Ha látja a ""és"'' Megjelenik a böngészőben, a fájl nem lett megfelelően lefordítva HTML-ben. Próbáljon meg egy másik szövegszerkesztőt vagy egy másik böngészőt.
Tanulja meg a címkéket. A HTML parancsok "címkékben" vannak megírva, amelyek megadják a böngészőnek, hogyan kell lefordítani és megjeleníteni a weboldalt. Mindig egyetlen idézőjelbe vannak írva
, és nem jelennek meg a weboldalon, ahogy a fenti példában használta őket:
- "kezdőkártya" vagy "nyitókártya". A címke után írtakat "félkövér" (félkövér egy weboldalon) fogják definiálni.
- egy "végcímke" vagy "zárócímke", amelyet megkülönböztethet a szimbólum / jel alapján. A félkövér szöveg végét jelöli. A legtöbb (nem az összes) címke működéséhez végcímke szükséges, ezért feltétlenül vegye fel.
Készítse el a dokumentumot. Töröljön mindent a HTML-dokumentumból. Kezdje elölről a következő szöveggel, pontosan úgy, ahogy írták (mínusz a pontok). Ez a HTML-kód megmondja a böngészőnek, hogy milyen típusú HTML-t használ, és hogy az összes HTML-kód a címkékbe kerül. és .
Adja hozzá a fej (fej) és a test címkéket. A HTML dokumentumok két részre oszlanak. A "felső" szakasz speciális információkat tartalmaz, például az oldal címét. A "törzs" szakasz tartalmazza az oldal fő tartalmát. Adja hozzá mindkettőt a dokumentumához, és ne felejtse el megadni a végcímkéket. Az újonnan hozzáadott szöveg félkövér:
Adj címet az oldaladnak. A fejrészben található kártyák többsége nem fontos, hogy kezdővel tanuljanak. A címke címke azonban könnyen használható, és meghatározza, hogy mi jelenik meg a böngészőablak neveként vagy a böngésző lapján. Helyezze a cím kezdő és befejező címkéit a fejcímkékbe, és írja be a tetszőleges fejléceket a címkék közé:
- Az első HTML oldalam.
hirdetés

4. rész: Szöveg formázása

Adjon hozzá szöveget a testéhez. Ebben a szakaszban csak törzscímkékkel fogunk dolgozni. A másik szöveg továbbra is a dokumentumban lesz, de helyet takarítunk meg, ha nem ismételjük meg ebben az oktatóanyagban. Írjon be bármit a kártyák közé és , és az első tartalomként jelenik meg az oldalon. Például:
- HTML oldal írásához követtem a wikiHow utasításait.
Adjon címsorokat a szöveghez. Rendezze oldalát fejléccímkékkel, amelyek arra utasítják a böngészőt, hogy nagyobb betűmérettel jelenítsen meg szöveget közöttük. Ezeket a címkéket a keresőmotorok és más eszközök is használják annak meghatározására, hogy mi a webhelye és hogyan szervezett.

a legnagyobb fejléc, és kisebb fejléceket is létrehozhat

. Próbálja ki őket az oldalán:
- Üdvözöllek az oldalamon.
- Követtem a wikiHow utasításait egy HTML oldal megírásához.
- Mai célom:
- Teljesített célok:
- Ismerje meg a címsorok használatát.
- Befejezetlen célok:
- További információ a szövegformázási címkékről.
További információ a szövegformázási címkékről. Már látta az "erős" címkét, de rengeteg más módon is formázhatja a szöveget. Próbálja ki ezeket a címkéket, vagy egyszerre több címkével ugyanahhoz a szöveges karakterlánchoz. Ne felejtsen el végzõ címkéket adni a hátuljába!
- Fontos szöveg félkövéren jelenik meg a böngészőben.
- Kiemelt szöveg, dőlt betűvel jelenik meg a böngészőben.
- A szokásosnál kicsit kisebb szöveg. Ez a szöveg automatikusan átméretezésre kerül, ha egy címsorban használja.
- ~~A szöveg már nem releváns, törésvonallal jelenik meg.~~
- A szöveg később kerül beillesztésre, mint a többi dokumentum, aláhúzással.
Rendezze a szöveget az oldalán. Talán észrevette, hogy az "enter" gomb megnyomása nem elegendő ahhoz, hogy a szöveg megjelenjen egy másik sorban. Ezek a címkék segíthetnek bekezdések és sortörések létrehozásában, vagy a szöveg más módon történő rendezésében:
- A "bekezdést" rövidítve a (bekezdés) címke a címkék között lévő szöveget megtartja egy bekezdésben, és elválasztja a felette és alatta lévő szövegtől.
- Ez a címke sortöréseket generál. Ne adjon hozzá végcímkét, mivel az nem zavarja más tartalmakat. Használja ezt a címkét versekben vagy címsorokban, ne bekezdésekben.
- ```
Ha nagyon pontosan kell megjelenítenie a szöveget, ez a címke a benne lévő szöveget rögzített szélességű betűkészletre állítja (mindegyik betű azonos szélességű), és lehetővé teszi intervallumok létrehozását Üresek és sortörések tetszés szerint a rendszeres szerkesztéshez címkék helyett.
```
- Ez a címke meghatározza a forrásból idézett szöveg típusát.
  A forrást később leírhatja a idézet kártya.
Adjon hozzá láthatatlan feliratszöveget. A megjegyzéscímkék nem jelennek meg a weboldalon. Lehetővé teszik, hogy a HTML dokumentumba jegyezze fel magát a tartalom befolyásolása nélkül. Ne adjon hozzá végcímkét.
- Azokat a kártyákat, amelyek önmagukban végződő címkék nélkül mennek, "üres címkéknek" nevezzük.
Kombinálja őket együtt. A címkék használatának legjobb módja az, ha felhasználja őket a webhelyén. Itt van egy példa a kártyák használatára az eddig megtanult lépésekben. Próbáld megjósolni, hogyan jelennek meg a böngészőben, majd másold át őket a dokumentumodba, és tudd meg.
- Az első HTML oldalam.
- Üdvözöljük a weboldalamon.
- Remélem, élvezni fogja ezt az oldalt!
  Csak neked készítettem.
- 1. rész: Hogyan fedeztem fel a HTML-t
- Már megtanultam HTML-t ~~egy~~ kétórákig, szóval most szakértő vagyok.
hirdetés

4. rész: Linkek és képek hozzáadása

Tudjon meg többet az attribútumokról. A címkékbe további információk is beleírhatók, az úgynevezett attribútumok. Ezeket az attribútumokat további szavak képviselik magukban a címkékben, formában tulajdonság neve = "specifikus érték". Például bármely HTML-címke rendelkezhet a cím attribútummal:
- Itt van a bevezető bekezdés.
  Címezze a "Bevezetés" bekezdést, amely akkor jelenik meg, amikor az egérmutatót a weboldalon lévő bekezdés fölé viszi.
Linkek más webhelyekre. Kártyák használata hiperhivatkozást létrehozni bármely más weboldalra. Helyezze be annak a weboldalnak az URL-jét, amelyre a href attribútummal hivatkozik. Íme egy példa, amely az Ön által olvasott weboldalra mutat:
- A webhely látogatói erre a szövegre kattintva követhetik a linket.
Adjon hozzá egy id attribútumot a címkéhez. Egy másik attribútum, amelyet bármely HTML-címke használhat, az "id" elem. Bármelyik kártyára írjon id = "vidu" vagy használjon olyan nevet, amely nem tartalmaz szóközt. Nem hoz látható hatást, de a következő lépésben felhasználjuk.
- Például adja hozzá a következőket a dokumentumához:
  Ez a bekezdés példaként szolgál az id attribútum működésének leírására.
Link egy bizonyos azonosítójú elemhez. Most használhatjuk a hiperhivatkozás címkét, , hogy ugyanazon az oldalon egy másik helyre hivatkozhasson. URL helyett a # szimbólumot használjuk, amelyet az azonosító értéke követ, amelyhez linkelni akarunk. Például, Ez a szöveg a "vidu" azonosítójú szöveghez fog kapcsolódni.
- Az összes HTML-érték kis- és nagybetűket különbözteti meg. A "#VIDU" és a "#vidu" ugyanarra a helyre fog hivatkozni.
- Ha az oldala elég rövid ahhoz, hogy a teljes oldalt egyszerre megjelenítse, valószínűleg nem veszi észre, hogy bármi is történne, amikor rákattint a linkre a böngészőben. Átméretezze az ablakot, amíg a gördítősáv meg nem jelenik, majd próbálja újra.
Fotók hozzáadása. Kártya egy üres címke, vagyis nincs szükség végcímkére. Az összes információt, amelyre a böngészőnek szüksége van a kép megjelenítéséhez, attribútumok segítségével adjuk hozzá. Íme egy példa a wikiHow logó megjelenítésére, az egyes attribútumok leírásával:
- Tulajdonságok src = "" megmondja a böngészőnek, hogy hol van a fotó. (Ne feledje, hogy egy fénykép más webhelyről való közzététele nem megfelelő - és a fénykép eltűnik, ha az oldal már nem aktív.)
- Tulajdonságok style = "" Sok mindenre képes, de a legfontosabb, hogy a kép szélességét és magasságát pixelben állítsák be. (Használhatja helyette a width = "" és a height = "" külön attribútumokat is, de ez furcsa átméretezési problémákhoz vezethet, ha CSS-t használ.)
- Tulajdonságok alt = "" a kép rövid leírása, amelyet a felhasználó látni fog, ha a képet nem sikerült betölteni. Ezt követelménynek tekintik, mivel a vak weboldalak látogatóinak képernyőolvasóira használják.
hirdetés

4/4-es rész: További információ a webhely hozzáadásáról és online eléréséről

Erősítse meg a HTML-t. A HTML-ellenőrzés ellenőrzi a kód hibáit. Ha webhelye nem megfelelően jelenik meg, az érvényesítés segíthet megtalálni a hibát okozó hibát. Ezenkívül többet is megtudhat a HTML-ről, ha megállapítja, hogy a kód jól néz ki a kijelzőn, de a HTML-szabvány új frissítései miatt már nem ajánlott. Az érvénytelen HTML használata nem teszi haszontalanná a webhelyét, de problémákat okozhat, vagy instabil lehet a megjelenítés a különböző böngészőkben.
- Próbáljon ki egy ingyenes online érvényesítési szolgáltatást a W3C-től, vagy keressen egy másik HTML 5 ellenőrző eszközt online.
További címkék és attribútumok. Sok más HTML-címke és attribútum található, és sok helyen meg lehet tanulni őket:
- További útmutatókért és a címkék teljes listájáért próbálja ki a w3schools és a HTML Dog programot.
- Keressen egy tetszetős weboldalt, majd nézze meg a böngésző "Oldalforrás megtekintése" funkcióját, hogy saját maga szerezze be a HTML-kódot. Másolja be a dokumentumába, és tanulmányozza, hogyan működik.
- Olvasson el más cikkeket, és tudjon meg többet arról, hogyan lehet táblázatokat HTML-ben létrehozni, metacímkékkel növelni annak esélyét, hogy megtalálják a keresőmotorok, vagy használjon osztást. állítson be egy területet az oldalon) és a span (a szöveg elem stílusának megadására szolgál), hogy a CSS-n keresztül segítse a stílust.
Töltse fel weboldalát online. Válasszon egy szolgáltatást a webhely tárolására, majd annyi HTML-oldalt tölthet fel a személyes webtartományába, ahányszor csak akar. Ehhez FTP feltöltő szoftvert kell használnia, de számos webkölcsönző szolgáltatás is kínálja ezt a szolgáltatást.
- Ha közvetlenül a webhelyén található oldalakra vagy képekre mutat linkeket, akkor a teljes címet kell használnia. Például, ha a domain neve www.chuyengiahtmlsieudang.com, akkor a szöveg ezekben a címkékben található a "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html" linkre mutat
Stílusok hozzáadása a CSS segítségével. Ha HTML-oldala kissé monotonnak tűnik, próbálja meg megtanulni a CSS alapjait, hogy színeket, különböző betűtípusokat adjon hozzá, és jobban ellenőrizhesse az elemek elhelyezését. A CSS-stíluslap és egy HTML-oldal összekapcsolása drasztikus változtatásokat tesz lehetővé menet közben, automatikusan módosítva az adott címkén belüli összes szöveg stílusát. Itt játszhat egy kicsit az alap formázási réteggel, vagy elmélyülhet a HTML Dog CSS oktatóanyagának részletesebb oktatóanyagaiban.
Add hozzá a JavaScript-et a webhelyedhez. A JavaScript egy olyan programozási nyelv, amelyet sok funkció hozzáadásához használnak a HTML-oldalaihoz. A JavaScript parancsok beszúródnak a kezdő és a végcímke közé , és használható interaktív gombok hozzáadására, matematikai feladatok kiszámítására és egyebekre. Tudjon meg többet a w3c példákban. hirdetés

Tanács

Az oktatóanyagban használt doctype deklaráció (használt dokumentumtípus-deklaráció) "laza HTML 4.0.1 átmeneti" (a HTML 4.0.1 nem szoros átmenet), könnyű formátum. kezdők számára használható. Használja () alternatívája annak, hogy a böngésző szigorú HTML 5 formátumban állítsa össze, ami az ajánlott (bár kevésbé használt) szabványos stílus.

Figyelem

A HTML célja a tartalom globális formában tartása. Nem befolyásolja a webhely megjelenítését, például a háttér színét és az elemek pontos elhelyezését. Bár még mindig vannak olyan címkék, amelyek lehetővé teszik ezt, célszerű CSS-t használni egy kontrollálhatóbb és következetesebb webhely létrehozásához.

Amire szükséged van

Egyszerű szövegszerkesztő, például a NotePad vagy a TextEdit
Webböngésző, például Internet Explorer vagy Mozilla Firefox
(Opcionális) HTML-szerkesztő, például Adobe Dreamweaver, Aptana Studio vagy Microsoft Expression Web