Struktura dokumenta HTML: glavne oznake, primer

HTML je jezik označevanja. Mnogi ljudje menijo, da je programiranje, vendar ni. V HTML-u ni nobenih spremenljivk, izračunov, nizov ali drugih elementov v katerikoli programski jezik.

Z uporabo HTML lahko razvijalec ustvari le videz spletnega mesta. Pomembno je razumeti, da nobena stran ne obstaja brez oznake. HTML je osnova za ustvarjanje spletnih strani. Preostali del funkcionalnosti dodajajo različni programski jeziki.

Ustvarjanje html dokumenta

V katerem koli urejevalniku lahko ustvarite preprosto spletno stran. Tudi "Notepad" bo naredil. Priporočamo, da razvijalec novic uporabi druge urednike, ki imajo funkcijo samodejne zamenjave in druge pozive. Zahvaljujoč temu lahko ustvarite že pripravljene tabele, povezave, slike in druge elemente. V "Notepad" je treba vsako črko napisati ročno.

Praviloma se "Notepad" uporablja samo v primerih, ko ni drugih orodij. Najprej je ustvarjen besedilni dokument in nato shranjen v html formatu. Vse strani na spletnem mestu morajo imeti razširitev html.

Jezik html je hierarhičen. To pomeni, da obstaja posebna struktura za html dokument. Kaj je to? V nadaljevanju razjasnimo za jasnost.

Struktura html-dokumenta. Primer:

Struktura je vedno enaka. Če želite nekaj spremeniti, brskalnik ne bo mogel obdelati. Kot rezultat, ne boste dobili, kar ste nameravali.

Zgornja slika prikazuje strukturo katere koli html datoteke. Prvi element označuje vrsto datoteke. Ta oznaka je določena enkrat. Če uporabljate posebne urejevalce, bo celotna struktura ustvarjena samodejno. Prilagoditi morate privzete vrednosti.

Struktura html dokumenta je glavna oznaka:

Od teh treh oznak je okostje celotne strani. Bodite pozorni na sliko. Vse te oznake imajo zapiralno oznako z znakom "/". Če pišete ročno, se navadite tako, da označite obe oznaki hkrati - odpiranje in zapiranje.

Nad njim je bilo rečeno, da imajo strani strani razširitev .html. To pomeni, da če ustvarite besedilni dokument, hkrati pa napišite pravilno kodo, bo brskalnik še vedno prikazal samo besedilo. Ne bo nobene pretvorbe kode.

Glavna sekcija

Na sliki spodaj odstavka 3 je naveden glavi. V tem razdelku so navedeni podatki o storitvi. Na primer, lahko določite kodiranje (točka 4) in naslov strani (korak 5).

Naslov mora biti vedno. Brez njega noben iskalnik ne more določiti imena vsebine (besedila) na spletni strani. In to je slabo za promocijo spletnega mesta. Poleg tega brskalnik na vrhu ne določa naslova strani. To je neprijetnost za uporabnika.

Struktura html-dokumenta je taka, da naslov

Poleg tega so v vzglavja označuje informacije za priključitev skripte, CSS datoteke, navodila za iskalnike ali katere koli druge informacije, ki jih uporabnik ne bi smel videti, vendar so pomembni za brskalnik ali programerji.

Povezovanje slogov

Struktura html-dokumenta vam omogoča povezovanje stilov na različne načine. Poleg tega jih je mogoče posamezno zapisati v vsakem elementu. Toda ta metoda ni priporočljiva, ker koda postane prevelika in neprijetno.

Iskalniki priporočajo, da so vsi slogi prikazani v ločeni datoteki, v elementih pa preprosto uporabite različne razrede.

Datoteka je povezana na naslednji način.

Atribut href določa pot do datoteke. Če je na poti prišlo do napake, se slogi ne bodo naložili. Prav tako je potreben atribut tipa, kar pomeni, da je to datoteka CSS.

Druga možnost je, da določite sloge neposredno v razdelku glave.

Toda ta možnost tudi ni zelo priporočljiva. Te metode so zelo različne, ker je lahko css datoteka ena za celotno spletno mesto, vse spremembe pa bodo takoj uporabljene na vseh straneh. Če uporabite metodo, prikazano na zgornji sliki, boste morali spremeniti vse obstoječe strani na spletnem mestu.

Če bo razred, ki ga ustvarjate, uporabljen samo na eni strani, je ta možnost prava za vas.

Povezovanje skriptov

Skripte so povezani na naslednji način.

Tukaj sta potrebni dve atributi: tip in src. V prvem navedite, da gre za datoteko jаvascript, druga pa, kje se nahaja datoteka. Če naredite pisavo, nič ne bo delovalo.

Telo oddelka

Struktura html-dokumenta je taka, da je treba postaviti vsebino, ki bo uporabniku vidna le v delu telesa. Ime oznake govori zase.

To določa vse glavne kode strani, ki lahko vključujejo neomejeno število elementov. Toda če je dlje, večja bo obdelana.

Upoštevajte najosnovnejše oznake, ki jih lahko uporabite v telesu. Ni veliko osnovnih. Vse ostalo boste odkrili, ko bo vaše znanje in praksa rasla.

Osnovne oznake

Struktura html-dokumenta zahteva obvezen nabor pisalnih elementov. Oznake morajo biti vedno obkrožene z oklepaji po robovih <>. Brez tega brskalnik ne razume, da gre za oznako. Po odprtju oklepajev vedno sledi ime elementa (oznaka). Če dovolite presledek med < in ime, bo brskalnik upošteval to kot besedilo.

Raziščite primer slikovne oznake. Upoštevajte, da se ta oznaka ne zapre, za razliko od povezav, odstavkov in številnih drugih.

Vrstni red atributov ni pomemben. Toda njihovo pisanje je zelo pomembno. Vedno prej pride ime atributa, nato pa enakovredni znak, potem je vrednost atributa napisana v narekovajih. Vrednost je lahko drugačna - digitalna ali besedilna.

Atribut src v vseh oznakah označuje pot datoteke, ki jo želite naložiti. Atribut alt v vseh elementih označuje kratek opis. V tem primeru se naloži slika bird.jpg z opisom fotografije ptice.

Poleg tega, v tag img, lahko določite dimenzije, samo širino ali višino, naslov, poravnavo, razred sloga ali okvir.

Razmislite o drugih glavnih oznakah, ki so navedene v delu telesa.

Tabele

Kako si lahko vse to predstavim v moji glavi

Začetni razvijalci ne morejo vedno zamisliti, da je vse to špekulativno. Oglejte si nekaj primerov strukture spletnih strani, nato pa boste postali jasni.

Obstaja taka možnost:

In to:

Uporaba slogov

Kot je že omenjeno na začetku, lahko sloge povežete z datoteko in določite v poglavju. V vsakem primeru je opis razredov povsem enak.

Na primer, lahko določite slog glave. Potem morate napisati h1 (ker bo slog za glavo drugega nivoja), odprte oklepaje in napišite, katere lastnosti bodo v tem elementu. Če poznate osnovni angleški jezik, potem ne sme biti težav. Vse lastnosti imenujemo človeški jezik.

Če želite ta slog določiti za več elementov hkrati, potem jih ločite z vejicami.

Rezultat je rdeča glava.

Zgoraj navedene metode so primerne za oblikovanje standardnih elementov. Toda lahko ustvarite tudi lastne razrede. Njihovo ime bi se moralo začeti s piko, potem je napisano poljubno ime.

Morate jih uporabiti tako.

Opomba: če ste določili nastavitve sloga za standardni element, vam ni treba napisati besednega razreda. Slog bo privzeto uporabljen. V atributu razreda lahko določite samo tiste sloge, ki jih začnete z obdobjem.