Pravila HTML jezika. Pravila za izradu HTML dokumenata Pravila html general rules documentary z2

Na ovaj trenutak Većina preglednika prikazuje web stranice, neovisno dekodirajući i ispravljajući pogreške webmastera. Međutim, morate biti oprezni kada pišete HTML - morate slijediti pravila valjanosti, jer ispravan izgled je važan za optimizaciju stranice, a također će pomoći da ne polude korisnici koji otvore vašu stranicu u ranijim verzijama preglednika.

Koristiti

Element se nalazi u prvom redu svake HTML stranice. Određuje verziju označnog jezika koji se koristi na stranici. Trenutačno se preporučuje korištenje doctype obrasca - univerzalan je za bilo koju verziju jezika.

Koristiti ispravna struktura dokument

Oznake , , uvijek bi trebale biti prisutne u kodu; to čini stranicu usklađenom sa standardima i osigurava da će biti ispravno prikazana.

krivo

Pozdrav svijete!

Pravo

Pozdrav svijete!

Definirati tehničke informacije stranice ispravno

Meta oznake i stilovi trebaju biti navedeni u , a ne negdje u tijelu stranice. Poželjno je uključiti skripte na dnu stranice prije završne oznake. Prednost ovakvog pristupa je u tome što preglednik prije prikaza sadržaja stranice samo učitava stilove, a zadnje će učitati skripte, što korisniku omogućuje brži pregled sadržaja stranice.

krivo

Pozdrav svijete!

Pravo

Pozdrav svijete!

Slijedite standarde označavanja Koristite elemente u skladu s njihovom semantikom Provjerite valjanost HTML koda Koristite zamjenski tekst za slike

Slike uvijek moraju sadržavati atribut alt. Preglednik se oslanja na ovaj atribut kako bi pružio kontekst za sliku. Atribut alt mora sadržavati tekst koji će biti prikazan ako se slika nije učitala.

krivo

Pravo

Nemojte koristiti stilove u HTML označavanju

To stvara stranice koje se predugo učitavaju i koje je teško održavati. Napišite sve stilove u poseban CSS dokument. Pokušajte koristiti oznaku i atribut stila u najmanju ruku.

Napišite komentare

Komentirajte kôd, ali nemojte pretjerivati. Komentari koji su napisani sažeto i jasno mogu poslužiti kao velika pomoć drugim programerima, kao i važan podsjetnik vama nakon nekog vremena.

Primjer:

Stranica

Koristite odgovarajuće nazive klasa

Dodijelite imena css klasama u skladu sa sadržajem bloka, na primjer: zaglavlje - zaglavlje, podnožje - podnožje, izbornik - izbornik, sadržaj - sadržaj. To će kod učiniti puno jasnijim i lakšim za održavanje.

Loš kod

Stavka izbornika 1

Stavka izbornika 2

Stavka izbornika 3

Dobar kod

Pravila za pisanje CSS-a

CSS također ima pravila koja možete slijediti kako bi vaš kod bio jednostavan, lak za čitanje i dobro organiziran.

Vrati stilove preglednika na zadane

Mogu smetati stilovima koje zapravo želimo primijeniti. Ovdje možete preuzeti datoteku za resetiranje standardnih stilova preglednika - reset.css.

Koristite skraćena svojstva i vrijednosti

Loš kod

padding-top: 5px;
padding-desno: 10px;
padding-bottom: 15px;
padding-left: 20px;

Dobar kod

ispuna: 5px 10px 15px 20px;

Navedite selektore i pravila u novom retku

Loš kod

Element (display:block;position: relative;padding:5px 10px 15px 20px;)

Dobar kod

element (
prikaz: blok;
položaj: relativan;
ispuna: 5px 10px 15px 20px;
}

Unesite nulte vrijednosti bez jedinica

Loš kod

ispuna: 10px 0px;
margin-lijevo: 0%;

Dobar kod

ispuna: 10px 0;
margina-lijevo: 0;

Napišite komentare

Odvojite glavne blokove komentarima, to će poboljšati čitljivost koda.

Primjer:

/*ZAGLAVLJE*/
Zaglavlje (
}
/*KRAJ ZAGLAVLJA*/

/*GLAVNI*/
glavni(
}
/*GLAVNI KRAJ*/

/*FOOTER*/
podnožje (
}
/*KRAJ PODNOŽJA*/

Provjerite valjanost CSS koda Zaključak

Ove smjernice i pravila samo su osnove jer se jezici HTML i CSS razvijaju sve brže i razvijaju se nove metode pisanja ispravnog koda. Slijedeći naše preporuke, bit ćete sigurni da je vaš kod jednostavan, lak za čitanje i optimiziran. Također ćete dobiti +100 karme i zahvalnost od programera koji će raditi na stranici nakon vas.

Otkrivanje: Vaša podrška pomaže u održavanju stranice! Zarađujemo naknadu za preporuke za neke od usluga koje preporučujemo na ovoj stranici. Saznajte više

Dijeliti je voditi brigu!

Atribut Što čini čini? Korišten je za određivanje prikaza unutarnjih granica između redaka i stupaca. Ovaj atribut je zastario. Umjesto toga koristite CSS za stiliziranje obruba tablice.

Atribut pravila je zastario Ovaj atribut je zastario i ne bi se trebao koristiti. Podrška preglednika za ovaj atribut je ograničena i njegova upotreba može proizvesti neočekivane rezultate. Umjesto toga, koristite CSS za stiliziranje tablica.

Atribut RULES

RULES , atribut HTML 4.0, označava trebaju li postojati unutarnje granice u tablici. Proći ćemo kroz svaku od vrijednosti RULES-a i pokazati kako se koriste. RULES i FRAME imaju dosadan način mijenjanja zadanih vrijednosti. Kako bismo vam pojednostavili život, evo običnog pravila: ako koristite PRAVILA, također koristite OKVIR i OBRUB. Lakše je izbjeći zabunu.

Vrijednost NONE za atribut RULES

RULES=NONE znači da nema unutarnjih granica. RULES=NONE je zadana postavka ako ne koristite BORDER ili ga postavite na nulu, ali u suprotnom mora biti izričito navedeno da nema unutarnjih granica. Imajte na umu da trenutno Netscape ne prepoznaje RULES.

Ime Hrana

Zvjezdani cvijet	promiješani tofu
Miko	rižina juha od povrća
Andy	humus
Ping	francuski tost

Vrijednost ALL za atribut RULES

RULES=ALL označava da sve unutarnje granice trebaju biti vidljive. RULES=ALL se obično koristi u kombinaciji s FRAME=VOID tako da postoje vanjske granice, ali ne i unutarnje.

Kada se primijeni na tablicu, ta nam vrijednost daje ovaj rezultat:

Ime Hrana

Zvjezdani cvijet	promiješani tofu
Miko	rižina juha od povrća
Andy	humus
Ping	francuski tost

Vrijednost COLS za atribut RULES

COLS označava da trebaju postojati granice između stupaca, ali ne i između redaka.

Kada se primijeni na tablicu, ta nam vrijednost daje ovaj rezultat:

Ime Hrana

Zvjezdani cvijet	promiješani tofu
Miko	rižina juha od povrća
Andy	humus
Ping	francuski tost

Vrijednost ROWS za atribut RULES

RULES=ROWS označava da trebaju postojati granice između redaka, ali ne i između stupaca.

Kada se primijeni na tablicu, ta nam vrijednost daje ovaj rezultat:

Ime Hrana

Zvjezdani cvijet	promiješani tofu
Miko	rižina juha od povrća
Andy	humus
Ping	francuski tost

Vrijednost GROUPS za atribut RULES

RULES=GROUPS omogućuje postavljanje granica između grupa ćelija tablice. Postoje dva načina grupiranja ćelija: po retku i po stupcu. Prođimo kroz svaki od njih. Imajte na umu da Netscape trenutno ne prepoznaje PRAVILA.

Grupiranje po redu

Za grupiranje po redu koristite oznake , ,. označava redove zaglavlja tablice, označava glavni dio tablice i označava donje retke. Tako, na primjer, ovaj kod stvara tablicu s tri grupe. Granice se pojavljuju samo između grupa:

ImeFoodPriceUkupno

Zvjezdani cvijet	promiješani tofu	5.95
Miko	rižina juha od povrća	4.95
Andy	humus	3.95
Ping	francuski tost	5.95
20.80

Evo kako se ta tablica prikazuje:

Ime Cijena hraneUkupno

Zvjezdani cvijet	promiješani tofu	5.95
Miko	rižina juha od povrća	4.95
Andy	humus	3.95
Ping	francuski tost	5.95
20.80

Grupiranje po stupcu

Za grupiranje po stupcu koristite oznaku i njen SPAN atribut. potrebno je malo navikavanja jer zapravo ne obilazi nijednu ćeliju tablice. Ide na vrh koda tablice gdje postavlja pravila o stupcima tablice, uključujući koji su grupirani zajedno. za označavanje koliko je stupaca u svakoj grupi .Ako izostavite SPAN tada se pretpostavlja da grupa ima samo jedan stupac. Dakle, na primjer, sljedeći kod kaže da je prvi stupac sam u grupi, a tri nakon toga su zajedno u grupi. Primijetite da zahtijeva završna oznaka. Granice će ići samo između grupa.

Osnove HTML-a sadrži osnovna pravila HTML jezika, opis strukture HTML stranice i odnose u strukturi HTML dokumenta između HTML elemenata.

HTML dokument je običan dokument Tekstualni dokument, može se izraditi kao i obično uređivač teksta(Notepad), au specijaliziranom, s označavanjem koda (Notepad++, Vizualni studio Kod, itd.). HTML dokument ima nastavak .html.

HTML dokument sastoji se od stabla HTML elemenata i teksta. Svaki element identificiran je u izvornom dokumentu početnom (početnom) i završnom (završnom) oznakom (uz rijetke iznimke).

Početna oznaka pokazuje gdje element počinje, a završna oznaka gdje završava. Završna oznaka se formira dodavanjem kose crte / ispred naziva oznake: .... Između početne i završne oznake nalazi se sadržaj oznake – sadržaj.

Pojedinačne oznake ne mogu izravno pohraniti sadržaj; on je napisan kao vrijednost atributa, na primjer, oznaka će stvoriti gumb s tekstom Button unutar.

Oznake se mogu ugniježditi jedna u drugu, na primjer,

Tekst

. Kada ulažete, trebali biste slijediti redoslijed zatvaranja (princip "matrjoške"), na primjer, sljedeći unos neće biti točan:

Tekst

HTML elementi mogu imati atribute (globalne, primijenjene na sve HTML elemente i vlastite). Atributi su zapisani u početnoj oznaci elementa i sadrže naziv i vrijednost, navedene u formatu attribute name="value" . Atributi vam omogućuju promjenu svojstava i ponašanja elementa za koji su postavljeni.

Svakom elementu može se dodijeliti više vrijednosti klase i samo jedna vrijednost ID-a. Višestruke vrijednosti klase pišu se razdvojene razmakom, . Vrijednosti klase i id-a moraju se sastojati samo od slova, brojeva, crtica i podvlaka i moraju počinjati samo slovima ili brojevima.

Preglednik pregledava (tumači) HTML dokument, gradi njegovu strukturu (DOM) i prikazuje ga u skladu s uputama uključenim u ovu datoteku (listovi stilova, skripte). Ako je oznaka ispravna, prozor preglednika će prikazati HTML stranicu koja sadrži HTML elemente - zaglavlja, tablice, slike itd.

Proces tumačenja (raščlanjivanje) počinje prije nego što se web stranica u potpunosti učita u preglednik. Preglednici obrađuju HTML dokumente sekvencijalno, od početka, dok obrađuju CSS i povezuju stilske listove s elementima stranice.

HTML dokument sastoji se od dva odjeljka - zaglavlja - između oznaka ... i dijela sadržaja - između oznaka ....

Struktura web stranice 1. Struktura HTML dokumenta

HTML slijedi pravila sadržana u datoteci deklaracije vrste dokumenta (Definicija vrste dokumenta ili DTD). DTD je XML dokument koji definira koje su oznake, atributi i njihove vrijednosti važeće za određenu vrstu HTML-a. Svaka verzija HTML-a ima svoj vlastiti DTD.

DOCTYPE je odgovoran za ispravan prikaz web stranice od strane preglednika. DOCTYPE navodi ne samo HTML verziju (npr. html) već i odgovarajuću DTD datoteku na Internetu.

...

Elementi unutar oznake tvore stablo dokumenta, tzv. objektni model dokumenta, DOM (document object model). U ovom slučaju, element je korijenski element.

Riža. 1. Najjednostavnija struktura web stranice

Da bismo razumjeli interakciju elemenata web stranice, potrebno je razmotriti takozvane “obiteljske odnose” između elemenata. Odnosi između više ugniježđenih elemenata klasificirani su kao nadređeni, podređeni i sestrinski.

Predak je element koji sadrži druge elemente. Na slici 1, predak za sve elemente je . U isto vrijeme, element je predak svih oznaka koje sadrži: ,

, itd.

Potomak je element koji se nalazi unutar jednog ili više tipova elemenata. Na primjer, je potomak , i elementa

Potomak je oba i .

Roditeljski element je element koji je povezan s drugim elementima na nižoj razini i nalazi se iznad njih u stablu. Na slici 1 i . Označiti

Roditelj je samo za .

Dijete element- element izravno podređen drugom elementu više visoka razina. Na slici 1 postoje samo elementi , ,

I djeca su .

Sestrinski element je element koji ima zajednički nadređeni element s predmetnim, tzv. elementi iste razine. Na slici 1 i su elementi iste razine, kao i elementi , i

One su jedna drugoj sestre.

1.1. Element 1.2. Element

Sekcija ... sadrži tehničke informacije o stranici: naslov, opis, ključne riječi za tražilice, kodiranje itd. Informacije koje tamo unesete ne prikazuju se u prozoru preglednika, ali sadrže informacije koje pregledniku govore kako da obradi stranicu.

1.2.1. Element

Potrebna oznaka odjeljka je . Tekst smješten unutar ove oznake pojavljuje se u naslovnoj traci web preglednika. Naslov ne bi trebao biti duži od 60 znakova kako bi u potpunosti stao u naslov. Naslovni tekst treba sadržavati najcjelovitiji opis sadržaja web stranice.

1.2.2. Element

Neobavezna oznaka odjeljka je jedna oznaka. Uz njegovu pomoć možete postaviti opis sadržaja stranice i ključne riječi za tražilice, autora HTML dokumenta i druga svojstva metapodataka. Element može sadržavati više elemenata jer oni nose različite informacije ovisno o korištenim atributima.

Opis sadržaja stranice i ključne riječi mogu se istovremeno navesti na nekoliko jezika, na primjer, na ruskom i engleskom:

Pomoću oznake možete blokirati ili dopustiti indeksiranje web stranice od strane tražilica:

Za automatsko ponovno pokretanje stranicu nakon određenog vremenskog razdoblja, trebate koristiti vrijednost osvježavanja:

Stranica će se ponovno učitati nakon 30 sekundi. Za preusmjeravanje posjetitelja na drugu stranicu potrebno je navesti URL u parametru url:

Naziv dokumenta: Moj HTML dokument

Datum kreiranja: 10.06.2005

2005 Big Company, Inc.

8. Elementi mogu biti ugniježđeni, ali se ne smiju preklapati. Svaki element koji se otvara unutar teksta zatvorenog unutar drugog elementa mora biti unutar ovog elementa i blizu .

Pravo krivo