Hogyan készítsünk HTML -oldalt

Szerző: Florence Bailey
A Teremtés Dátuma: 20 Március 2021
Frissítés Dátuma: 1 Július 2024
Anonim
Hogyan készítsünk HTML -oldalt - Társadalom
Hogyan készítsünk HTML -oldalt - Társadalom

Tartalom

A HTML (Hypertext Markup Language) a weboldalak fejlesztésének elsődleges programozási nyelve. Egyszerű és kényelmes programozási nyelvként készült. Az internetes oldalak többsége ennek a nyelvnek valamelyik formájával készült (ColdFusion, XML, XSLT). A cikk elolvasása után folytathatja képzését az internet más erőforrásainak használatával. Próbáljon az interneten rákeresni a témához kapcsolódó egyéb cikkekre.

Lépések

1. módszer 1 -ből: HTML -oldal írása

  1. 1 Mielőtt elkezdené megismerkedni az itt bemutatott lépések egyikével, olvassa el a „Mire lesz szüksége” részt.
  2. 2 Amit a probléma megértése előtt tudnia kell:
  3. 3 Az alapok. Hallottál már a címkéről? A címkét szögletes zárójelek veszik körül, a szó benne. A zárócímke ugyanabban a formában van írva, de az első szögletes zárójel után perjel hozzáadásával. Az attribútum egy opcionális szó a címkében, amelyet részletek hozzáadására használnak a címkéhez.
  4. 4 A dokumentum eleje. Bármilyen szövegszerkesztőben is használja, illessze be a következőt:
    html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
    A címkét ugyanazzal a címkével kell lezárni, de az első szögletes zárójel után perjelrel kell zárni. Vannak kivételek, például címkék META vagy DOCTYPE.
  5. 5 DOCTYPE
    • Általában a legtöbb weboldal be van állítva DOCTYPE ”. Ez segít meghatározni a kódolást, valamint azt, hogy a böngészők hogyan fogják érzékelni. A legtöbb oldal nélküle is működni fog, „de ez szükséges, ha egyezni szeretne (szabályozzák az interneten található kódolások típusait és használatát)... A DOCTYPE a HTML 4.01-hez az alábbiakban található:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // HU" "http://www.w3.org/TR/html4/strict.dtd"> Ez egy a leggyakoribb A DOCTYPE az egész internet oldalain használatos.Először is a „html” -et leíró oldal típusára mutat, majd kiemeli a kódolás típusát, végül pedig a DOCTYPE helyét, amely ennek eredményeképpen leírja a böngésző oldalát.
    • Különféle HTML -típusok léteznek (az évek során kifejlesztett különböző verziók), például új címkék vagy speciális címkék használatával. Néhány címke elavult (más hasznosabb címkéket használunk helyette).
    • b> és i> - jelenleg ezt írják elő a címkékre, mert azok szövegek átalakítására szolgálnak, de nem specifikációk, ezért más címkék jönnek helyettük. Címke erős> helyettesítője b>, és em>, helyettesítője i>.
    • Fontos, hogy a korábbi címkéket olyan formátumú címkékkel helyettesítsék. Ha a szöveget lefordítják, akkor nemcsak a formázás, hanem a jelentése is ugyanaz marad. Ez szemantikailag helyes.
    • Az XHTML 2.0 verziójában a b> és i> nem használt, csakúgy, mint a HTML 3+ verzióban.
  6. 6 HTML "Encapsulation Rule".
    • Vessünk egy pillantást a jelenleg használt fontosabb címkékre. Az oldal létrehozása során egyszerű szerkezetet használnak. Ha egy címkét megnyitottak, akkor be kell zárni... Ez vonatkozik a teljes szerkezetre. Íme egy érvényes példa az XHTML elrendezési struktúrára:
    • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // HU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • fej>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • title> Hello World! / title>
    • / head>
    • test>
    • h1> Hello World! / h1>
    • / body>
    • / html>
    • Minta kód, amely üzenetet küld Helló Világ... Ezt hívják tesztnek Helló Világ.
  7. 7 Cím
    • A weboldal címe a címke közötti tartalom fej>... Ezt a tartalmat a felhasználó nem tekintheti meg (csak a cím, amely az oldal címében látható). Címkék közötti információ fej>, más címkéket is csatolhat, például:

      • A META címke olyan információkra szolgál, amelyek hasznosak a keresőmotorok és más segédprogramok számára.
      • LINK címke, amely linket hoz létre a dokumentumok között, például a stílusok (CSS) esetében.
      • SCRIPT címke, ez szinte minden webkódolást magában foglal, távoli hozzáféréssel (másik dokumentumból).
      • A STYLE címke, amely lényegében egy oldalra alkalmazható stílus.
      • A TITLE címke az a cím, amely az oldal címeként jelenik meg a böngészőben.
    • Lássunk ezek közül néhányat bemutató példát az ezen a webhelyen vett fejlécben (lerövidítve):
      • fej>
      • cím> ... / cím>
      • meta name = "description" content = "..." />
      • link rel = "stíluslap" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • stílus típus = "text / css" media = "all"> ... / style>
      • script type = "text / javascript" src = "..."> / script>
      • / head>

        Ha nem vette észre, az egyes címkék kiemelésre kerültek, és a tényleges információkat eltávolították. A példa meglehetősen rövid, szinte minden címkét tartalmaz, amely megtalálható fej>kivéve a HTML megjegyzést (erről egyszerű címkékben beszélünk).
  8. 8 Egyszerű címkék mindenhol
    • Lépjünk tovább, és nézzük meg a többi címkét. Legyen óvatos a címkézéssel, és ne feledje a hüvelykujjszabályt: "Kapszulázás".

      • erős> Kiemeli a fontos szöveget.
      • kicsi> Kicsinyíti a szöveget. A betűméretet szabványos egységekben mérik 1 -től 7 -ig, a 3 az alapértelmezett szövegméret. ...
      • pre> A gazdag szöveg blokkját határozza meg. Ahogy helyes, az ilyen szöveget azonos méretű betűtípussal kell beírni, és a szavak között minden szóköz van.
      • em> A szöveget kifejezésként jeleníti meg.
      • del> Kihúzza a szöveget.
      • ins> Meghatározza a dokumentumba beillesztett szöveget.
      • h1> Egy a sok címsorból. Az ilyen típusú címkék „h” betűvel kezdődnek, számbeli különbséggel. Ügyeljen arra, hogy ugyanazzal a számmal zárja be a címkét.
      • p> Meghatároz egy bekezdést.
      • ! --- ... ---> A többi címkével ellentétben a megjegyzésnek magában a címkében kell lennie. Ez az információ csak a kód megtekintése során látható.
      • blockquote> Idézetet mutat, használható a cite> címkével.
      • A fenti néhány példa nem teljes listája a meglévő címkéknek. Ha szeretne többet megtudni másokról, látogasson el a webhelyre.
  9. 9 Világos szerkezet létrehozása
    • Az oldalakat úgy tervezték, hogy egyszerű címkekészletekben tárolják az adatokat, hogy az információkat bekezdésekbe elemezzük. A számítógép felismeri az adatokat, nem ismeri a kontextust vagy a fogalmi kapcsolatot. Számítógép-barát HTML-oldalakat kell létrehoznunk. Ezt a div címke használatával érik el. Segít hatalmas számú oldal létrehozásában. CSS -el stílusosítható, és egyszerűbb, mint nagy kódtáblákat létrehozni az elrendezéshez.
      • div> Ez a címke különleges, mert stílusos és különálló információblokkokat használhat, amelyeket a felhasználó és a számítógép is megért.
    • Nézzünk egy egyszerű HTML elrendezést, amely div címkét használ.
      • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // HU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • fej>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • title> Hello World! / title>
      • / head>
      • test>
      • h1> Hello World! / h1>
      • div id = "contentOne">
      • p> Ez egy szöveg a div # contentOne. / p> mappában
      • div>
      • p> Egy bekezdés a div # contentOne / p> alszakaszában
      • / div>
      • / div>
      • / body>
      • / html>
    • A div> tags használata segít megtalálni és módosítani a stílusokat CSS és Javascript használata közben. A HTML különböző kódolást használ a CSS -stílusok és a Javascript használatához, hogy jobb és érzékenyebb felhasználói élményt nyújtson.

Tippek

  • Miután elolvasta ezt a cikket, ne hagyja abba, és gondolja, hogy mindent megtanult, amit tudnia kell. Mindig van mit tanulni, különösen ebben a technológiában.
  • Tanuljon, értsen és írjon kódot.
  • Vegye figyelembe, hogy egyes címkék csak a> elemet használják. Para és br néhány példa. A> címkével megnyitott többi címkét tovább kell zárni. Például: "div> / div>".
  • Az emberek új felfedezéseket várnak, ezért találják fel újra, tervezzék vagy kódolják.
  • Ha már sokat tanult, próbálja meg megtanulni a szerverprogramozást.
  • Ismerje meg a CSS és a Javascript használatát.

Figyelmeztetések

  • Ne feledje, a HTML a tartalom szerkesztéséről szól. Ez azt jelenti, hogy a HTML -t csak egy elismert formátumú tartalom tárolására használják. Más változtatásokat más technológiák, például CSS használatával kell végrehajtani. Ez azt is jelenti, hogy „szemantikailag helyesmég akkor is, ha mások nem ismerik be. Más programozási nyelvek segítenek a weboldalak létrehozásában (CSS, Javascript és XML). A HTML tartalomkonstruktor.

Mire van szükséged

  • Szövegszerkesztő, amely támogatja az ANSI kódolást
  • Egy webböngésző, például Internet Explorer vagy Mozilla Firefox
  • (Opcionális) wysiwyg vagy wykiwyg HTML -szerkesztő, például Adobe Dreamweaver, Aptana Studio vagy Microsoft Expression Web