Oznake
Naredbe preglednika koje vam govore kako prikazati tekst, umetnuti tablice, slike i druge objekte nazivaju se oznake ( s engleskogoznačiti- oznaka, znak). Same oznake (naredbe) se ne prikazuju na ekranu.
Naziv oznake napisan je u trokutastim zagradama, na primjer - oznaka koja govori pregledniku da napiše sav sljedeći tekst podebljanim fontom. Naziv oznake može biti napisan u bilo kojem slučaju (velikim ili malim slovima), odnosno preglednik će ga interpretirati na isti način kao .
Oznake mogu biti uparene ili neuparene. Na primjer, oznaka govori pregledniku da napiše sav sljedeći tekst do naredbe podebljano. U ovom slučaju, oznaka koja daje naredbu naziva se otvaranjem, a oznaka koja poništava naredbu naziva se zatvaranjem.
Oznake mogu imati parametre (ili atribute). Na primjer, da biste postavili boju fonta, koristite oznaku fonta s parametrom color: - ovo je početna oznaka koja govori pregledniku da prikaže font zelenom (u ovom primjeru) do završne oznake.
Neki parametri zahtijevaju obveznu specifikaciju svojih vrijednosti. Za neke postavke, preglednik koristi zadane vrijednosti ako druge vrijednosti nisu navedene.
Ako oznaka ima više parametara, oni se pišu odvojeni razmakom bilo kojim redoslijedom. Na primjer: - dva slična unosa početne oznake fonta s parametrima boje i veličine.
Struktura HTML stranica
Svaka HTML stranica mora sadržavati sljedeće potrebne oznake:
html - govori pregledniku da je stranica napisana u HTML-u i da reci do završne oznake čine jedan dokument;
glava - važne informacije koje opisuju ovaj dokument nalaze se između početnih i završnih oznaka;
tijelo - sadržaj stranice nalazi se između početnih i završnih oznaka.
Stoga HTML dokument ima sljedeću strukturu:
Opis dokumenta (nije prikazan na samoj stranici)
Sadržaj (prikazuje se na stranici uzimajući u obzir navedene oznake)
Sama sekcija nije obavezna i služi za opis dokumenta. Ako postoji, tada je jedina potrebna oznaka TITLE, čiji sadržaj specificira naslov dokumenta, obično prikazan u naslovu prozora preglednika.
Na primjer, ovaj redak 1_HTML postavit će naziv dokumenta "1_HTML", koji će se u Mozilla Firefoxu odraziti u naslovu prozora i na oznakama (kada je otvoreno nekoliko stranica):
2. Oblikovanje tekstaFontovi: tip slova, veličina, boja
Dekoracija teksta
Naslovi
Oznake za prijelom retka i oblikovanje odlomka
Poravnanje teksta
Vježbajte
Koristeći HTML označavanje, možete pisati tekst u različitim stilovima (fontovima), veličinama i bojama. Da biste to učinili, upotrijebite oznaku koja ima nekoliko parametara:
lice – za postavljanje slušalica,
veličina – za postavljanje veličine,
boja – za postavljanje boje.
Za postavljanje željenog fonta, veličine ili boje potrebno je dodijeliti željenu vrijednost odgovarajućem parametru:
parametar="vrijednost"
Slušalice
Na primjer, da biste napisali tekst u fontu Times New Roman, morate umetnuti oznaku ispred željenog teksta i dodijeliti parametru njegovog lica vrijednost Times New Roman, a budući da oznaka je par, tada nakon traženog teksta morate umetnuti završnu oznaku:
Tekst u stilu Times New Roman
Tekst u stilu Times New Roman
Parametru lica može se dodijeliti više vrijednosti odvojenih zarezima:
face="Times New Roman, Times, serif"
U tom će slučaju preglednik prvo pokušati prikazati tekst u fontu Times New Roman. Ako takav font nije dostupan na računalu korisnika, preglednik će pokušati prikazati tekst u Times fontu itd.
Veličina
Za pisanje teksta veličine 4 potrebno je umetnuti oznaku ispred željenog teksta i postaviti njegov parametar veličine na 4:
Veličina teksta 4
Kao rezultat toga, preglednik će prikazati ovaj redak ovako:
Veličina teksta 4
Što znači taj misteriozni broj 4? Parametar veličine može uzeti vrijednosti od 1 do 7. Ovo su konvencionalne jedinice. Zadana srednja veličina je size="3" .
Prema tome, veličina teksta 4 je prosječna veličina uvećana za 1 konvencionalnu jedinicu, a veličina teksta 2 je prosječna veličina smanjena za 1 konvencionalnu jedinicu, itd. Ovako određena veličina teksta naziva se apsolutnom.
Ali postoji još jedan način za smanjenje ili povećanje veličine teksta u odnosu na zadanu veličinu. Da biste to učinili, morate parametru veličine dodijeliti vrijednost "-1" odnosno "+1". Ovom metodom postavljanja veličine, veličina teksta se naziva relativnom.
Dakle, da biste dobili veličinu teksta 5, možete koristiti dvije metode:
Veličina teksta 5 ili Veličina teksta 5
Osim navedenih, postoji još nekoliko načina za postavljanje veličine teksta.
Tekst možete povećati pomoću oznake:
Uvećani tekst
Kao rezultat toga, preglednik će prikazati ovaj redak ovako:
Uvećani tekst
Tekst možete smanjiti pomoću oznake:
Manji tekst
Kao rezultat toga, preglednik će prikazati ovaj redak ovako:
Manji tekst
Oznake i mogu se ponoviti nekoliko puta kako bi se poboljšao učinak. Na primjer, ako je rezultat redak:
Veliki tekst
tekst nije dovoljno velik:
Veliki tekst
možete napisati ovako:
Veliki tekst
A rezultat će biti veći tekst:
Veliki tekst
Boja
Sada o postavljanju boje teksta. Da biste tekst napisali crvenom bojom, trebate umetnuti oznaku ispred željenog teksta i postaviti njegov parametar boje na crveno:
Crveni tekst
Kao rezultat toga, preglednik će prikazati ovaj redak ovako:
Crveni tekst
Ali boja se može odrediti ne samo imenom, već i digitalnom vrijednošću u heksadecimalnom formatu, koja izgleda kao znak # i 6 znakova (brojevi 0-9 i slova latinične abecede A-F) iza njega. Na primjer, crvena boja odgovara heksadecimalnoj vrijednosti #FF0000. Oni. Postoje dva načina za pisanje teksta crvenom bojom:
Crveni tekst ili Crveni tekst
Ovdje možete preuzeti tablicu boja koja prikazuje glavne boje, njihove nazive i odgovarajuće heksadecimalne vrijednosti.
Ako otvorite bilo koju web stranicu, ona će sadržavati tipične elemente koji se ne mijenjaju ovisno o vrsti i fokusu stranice. Primjer 4.1 prikazuje kôd za jednostavan dokument koji sadrži osnovne oznake.
Primjer 4.1. Izvorni kod web stranice
Primjer zaglavlja web stranice
Prvi paragraf.
Drugi paragraf.
Kopirajte sadržaj ovog primjera i spremite ga u mapu c:\www\ kao example41.html. Nakon toga pokrenite preglednik i otvorite datoteku kroz stavku izbornika File > Open file (Ctrl+O). U dijaloškom okviru za odabir dokumenta odaberite datoteku example41.html. Web stranica prikazana na slici 1 otvorit će se u pregledniku. 4.1.
Riža. 4.1. Rezultat izvođenja primjera
Element je namijenjen označavanju vrste tekućeg dokumenta - DTD (definicija vrste dokumenta, opis vrste dokumenta). Ovo je potrebno kako bi preglednik razumio kako interpretirati trenutnu web stranicu, jer HTML postoji u nekoliko verzija, osim toga, postoji XHTML (EXtensible HyperText Markup Language), koji je sličan HTML-u, ali se od njega razlikuje u sintaksi. Kako se preglednik ne bi zbunio i shvatio prema kojem standardu prikazati web stranicu, potrebno je postaviti u prvom redu koda.
Postoji nekoliko vrsta, razlikuju se ovisno o verziji HTML-a koju ciljaju. U tablici 4.1. Navedene su glavne vrste dokumenata s njihovim opisima.
| HTML 4.01 | |
| Stroga HTML sintaksa. | |
| Prijelazna HTML sintaksa. | |
| HTML dokument koristi okvire. | |
| HTML 5 | |
| Ova verzija HTML-a ima samo jedan doctype. | |
| XHTML 1.0 | |
| Stroga XHTML sintaksa. | |
| Prijelazna XHTML sintaksa. | |
| Dokument je napisan u XHTML-u i sadrži okvire. | |
| XHTML 1.1 | |
| Programeri XHTML 1.1 očekuju da će postupno zamijeniti HTML. Kao što vidite, ova definicija nema podjelu na vrste, jer je sintaksa ista i poštuje jasna pravila. | |
Razlika između strogog i prijelaznog opisa dokumenta je drugačiji pristup pisanju koda dokumenta. Strogi HTML zahtijeva strogo pridržavanje HTML specifikacije i ne oprašta pogreške. Prijelazni HTML je opušteniji u vezi s nekim nedostacima koda, pa je ovu vrstu poželjno koristiti u određenim slučajevima.
Na primjer, u strogom HTML-u i XHTML-u oznaka je obavezna, ali u prijelaznom HTML-u može se izostaviti i ne navesti. Istodobno, sjećamo se da će preglednik prikazati dokument u svakom slučaju, bez obzira odgovara li sintaksi ili ne. Ova se provjera provodi pomoću validatora i prvenstveno je namijenjena programerima za praćenje pogrešaka u dokumentu.
Ubuduće ćemo koristiti pretežno strict, osim u slučajevima kada je to posebno navedeno. To će nam omogućiti da izbjegnemo uobičajene pogreške i naučiti nas pisati sintaktički ispravan kod.
Često možete pronaći HTML kod bez ikakve upotrebe; u tom će slučaju web stranica i dalje biti prikazana. Međutim, može se dogoditi da se isti dokument prikazuje drugačije u pregledniku kada se koristi i kada se ne koristi. Osim toga, preglednici mogu prikazati takve dokumente na svoj način, kao rezultat stranica se "raspada", tj. bit će prikazan potpuno drugačije od onoga što programer zahtijeva. Kako biste izbjegli ovakve situacije, uvijek dodajte na početak dokumenta.
Oznaka definira početak HTML datoteke i pohranjuje zaglavlje ( ) i tijelo dokumenta ( ) unutar nje.
Zaglavlje dokumenta, kako se blok još naziva, može sadržavati tekst i oznake, ali sadržaj ovog odjeljka nije izravno prikazan na stranici, s izuzetkom spremnika.
Oznaka je univerzalna i dodaje cijelu klasu mogućnosti, posebno uz pomoć meta oznaka, kako se ova oznaka općenito naziva, možete promijeniti kodiranje stranice, dodati ključne riječi, opis dokumenta i još mnogo toga. Kako bi preglednik shvatio da se radi o UTF-8 kodiranju (format transformacije Unicode), i ovaj redak je dodan.
Primjer web stranice
Oznaka definira naslov web stranice, jedan je od važnih elemenata namijenjenih rješavanju mnogih problema. U operacijskom sustavu Windows naslovni tekst se prikazuje u gornjem lijevom kutu prozora preglednika (slika 4.2).
Riža. 4.2. Prikaz zaglavlja u pregledniku
Oznaka je obavezna i svakako mora biti prisutna u šifri dokumenta.
Uvijek biste trebali dodati završnu oznaku koja označava da je blok naslova dokumenta dovršen.
Tijelo dokumenta namijenjeno je sadržavanju oznaka i sadržaja web stranice.
Naslov
HTML nudi šest tekstualnih naslova različitih razina koji pokazuju relativnu važnost odjeljka koji slijedi nakon naslova. Dakle, oznaka predstavlja najvažniji naslov prve razine, a oznaka služi za označavanje naslova šeste razine i najmanje je važna. Prema zadanim postavkama, naslov prve razine prikazan je najvećim podebljanim fontom, a naslovi sljedećih razina manji su. Oznake... odnose se na elemente bloka, uvijek počinju u novom retku i nakon njih se u sljedećem retku pojavljuju drugi elementi. Osim toga, razmak se dodaje prije i iza naslova.
Neki se tekst može sakriti od prikazivanja u pregledniku ako ga dodate u komentar. Iako ovaj tekst korisnik neće vidjeti, on će se ipak prenijeti u dokumentu, pa ako pogledate izvorni kod, možete otkriti skrivene bilješke.
Ako otvorite bilo koju web stranicu, ona će sadržavati tipične elemente koji se ne mijenjaju ovisno o vrsti i fokusu stranice. Primjer 1 prikazuje kôd za jednostavan dokument koji sadrži osnovne elemente.
Primjer 1: Izvorni kod web stranice
Primjer zaglavlja web stranice
Prvi paragraf.
Drugi paragraf.
Kopirajte sadržaj ovog primjera i spremite ga u mapu c:\www\ kao example2.html. Nakon toga pokrenite preglednik i otvorite datoteku kroz stavku izbornika File > Open File (Ctrl+O). U dijaloškom okviru za odabir dokumenta odaberite datoteku example2.html. Web stranica prikazana na slici 1 otvorit će se u pregledniku. 1.
Riža. 1. Rezultat primjera u pregledniku
Element (jarg doctype) je namijenjen za označavanje tipa trenutnog dokumenta - DTD (definicija tipa dokumenta, opis vrste dokumenta). To je potrebno kako bi preglednik razumio kako interpretirati trenutnu web stranicu, jer HTML postoji u nekoliko verzija - moderni HTML5 ili naslijeđeni HTML4 i XHTML. Kako se preglednik ne bi zbunio i shvatio prema kojem standardu prikazati web stranicu, potrebno je postaviti u prvom redu koda.
Budući da ćemo u budućnosti raditi samo s HTML5, trebat će nam samo jedan kratak i moderan doctype.
Spomenuli smo da se nazivi elemenata mogu pisati malim i velikim slovima. Ovo pravilo vrijedi i za ovo i može se pisati na različite načine. Međutim, tradicionalno se naziv ovog elementa piše velikim slovima.
Oznaka otvaranja definira početak HTML dokumenta i sadrži glavu ( ) i tijelo ( ) dokumenta.
Sadržaj ovog odjeljka nije prikazan izravno na stranici, s izuzetkom . Unutar se mogu nalaziti sljedeći elementi: , , , ili .
Element je univerzalan i dodaje cijelu klasu mogućnosti, posebno uz pomoć meta oznake, kako se ovaj element općenito naziva, možete promijeniti kodiranje stranice, dodati ključne riječi, opis dokumenta i još mnogo toga, namijenjenog pregledniku ili tražilice. Konkretno, kako bi preglednik shvatio da se radi o kodiranju UTF-8 (Unicode format transformacije) i dodaje se ovaj redak.
Primjer web stranice
Element definira naslov web stranice. U pregledniku se prikazuje na trenutnoj kartici (slika 2).
Riža. 2. Naslov web stranica u pregledniku
Element je obavezan i svakako mora biti prisutan u šifri dokumenta. Unutra se smije pisati samo tekst i ne smije biti nikakvih drugih elemenata. Ali prihvatljivo je dodati različite tekstualne simbole, na primjer, ovako: Adobe™ Photoshop®.
Završna oznaka označava da je "glava" dokumenta dovršena.
"Tijelo" dokumenta treba sadržavati elemente i sadržaj web stranice.
Naslov
HTML nudi šest tekstualnih naslova različitih razina koji pokazuju relativnu važnost odjeljka koji slijedi nakon naslova. Dakle, element predstavlja najvažniji naslov prve razine, a element služi za označavanje naslova šeste razine i najmanje je značajan. Prema zadanim postavkama, naslov prve razine prikazan je najvećim podebljanim fontom, a naslovi sljedećih razina manji su. ...elementi su blokovi, uvijek počinju u novom retku i nakon njih se u sljedećem retku pojavljuju drugi elementi. Osim toga, preglednik dodaje prazan prostor prije i iza zaglavlja.
Neki se tekst može sakriti od prikazivanja u pregledniku ako ga dodate u komentar. Iako korisnik takav tekst neće vidjeti, on će ipak biti prenesen u dokumentu, pa se uvidom u njegov izvorni kod mogu otkriti skrivene bilješke.
Kad god je moguće, objasnite svoj kod gdje je to potrebno.Koristite komentare da objasnite svoj kod: što radi, što radi i zašto se koristi rješenje koje odaberete.
(Ova točka nije obavezna jer nema smisla očekivati da kod uvijek bude dobro dokumentiran. Korisnost komentiranja ovisi o složenosti projekta i može se razlikovati za HTML i CSS kod.)
Zadaci Označite zadatke za svoj popis obaveza pomoću TODO.Označite zadatke pomoću ključne riječi TODO. Nemojte koristiti druge uobičajene formate kao što je @@ .
Unesite kontakte (korisničko ime ili mailing listu) u zagrade: TODO(kontakt) .
Opišite zadatak nakon dvotočke, na primjer: TODO: Zadatak.
Preporučeno: (# TODO(Ivan Ivanov): Suočiti se s poravnanjem #) Test
Preporučeno:
- krastavci
- rajčice
(Preporuča se korištenje HTML-a s tipom sadržaja text/html. Nemojte koristiti XHTML jer application/xhtml+xml ima lošu podršku preglednika i ograničava mogućnosti optimizacije.)
Valjanost HTML-a Koristite valjani HTML kad god je to moguće.Upotrijebite valjani HTML kôd osim ako vam uporaba ne omogućuje postizanje veličine datoteke potrebne za željenu razinu izvedbe.
W3C HTML validator (engleski) za provjeru valjanosti koda.
Valjanost je važna i mjerljiva kvaliteta koda. Pisanje važećeg HTML-a promiče upoznavanje tehničkih zahtjeva i ograničenja te osigurava pravilnu upotrebu HTML-a.
Ne preporučuje se: Provjerite Samo provjerite
Preporučeno: ček Samo ček.
Koristite elemente (ponekad se netočno nazivaju "oznake") za njihovu namjenu: naslovi za naslove, p za odlomke, a za veze itd.
To čini kod lakšim za čitanje, uređivanje i održavanje.
Alternativni mediji Uvijek uključite alternativne medijske sadržaje.Pokušajte pružiti alternativni sadržaj za medije, kao što su slike, videozapisi ili animacije definirane pomoću platna. Za slike je to smisleni alternativni tekst (alt), a za video i audio zapis, ako je moguće, transkript teksta i natpis.
Alternativni sadržaj može pomoći osobama s invaliditetom. Na primjer, slabovidnoj osobi je teško razumjeti što je na slici ako za nju nije postavljen @alt. Drugi ljudi mogu imati poteškoća u razumijevanju onoga što je rečeno u video ili audio snimci.
(Ako je alt slike suvišan ili se samo koristi u dekorativne svrhe na mjestima gdje se CSS ne može koristiti, upotrijebite prazan alt tekst alt="" )
Razdvajanje odgovornosti Odvojena struktura, dizajn i ponašanje.Držite strukturu (markup), izgled (stilove) i ponašanje (skripte) odvojenima i pokušajte interakciju između njih svesti na minimum.
Pazite da dokumenti i predlošci sadrže samo HTML te da HTML služi samo za definiranje strukture dokumenta. Premjestite sav kod odgovoran za dizajn u stilske datoteke, a kod odgovoran za ponašanje u skripte.
Pokušajte smanjiti njihova sjecišta na minimum uključivanjem minimalnog broja stilskih datoteka i skripti u svoje predloške.
Odvajanje strukture od prezentacije i ponašanja olakšava održavanje koda. Promjena predložaka i HTML dokumenata uvijek traje dulje od promjene stilskih datoteka ili skripti.
Ne preporučuje se: HTML je sranje HTML je sranje
Negdje sam već čitao o ovome, ali sad mi je definitivno sve jasno: HTML je potpuno smeće!!1 Ne mogu vjerovati da za promjenu dizajna morate svaki put sve iznova ponoviti.
Preporučeno: Moj prvi redizajn samo za CSS Moj novi CSS dizajn
Čitao sam o tome prije, ali konačno sam to učinio sam: koristim načelo razdvajanja problema i ne guram dizajn u HTML
Kako cool!
Mnemotehničke veze Nemojte koristiti mnemoničke veze.Jedina iznimka od ovog pravila su HTML servisni znakovi (na primjer< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).
Izborne oznake Nemojte koristiti izborne oznake. (nije potrebno)Da biste smanjili veličinu datoteke i poboljšali čitljivost koda, možete izostaviti izborne oznake. HTML5 specifikacija ima popis izbornih oznaka.
(Možda će trebati neko vrijeme dok ovaj pristup ne postane naširoko korišten jer se jako razlikuje od onoga što se obično podučava web programerima. Sa stajališta dosljednosti, koda i jednostavnosti, najbolje je izostaviti sve neobavezne oznake umjesto nekih).
Ne preporučuje se: Uzalud bacamo bajtove - bacamo novac.
Preporučeno: Bajtovi su novac!
Tako da
atribut "type" Nemojte navoditi atribut type kada dodajete stilove i skripte u dokument.Nemojte koristiti atribut tipa kada povezujete stilove (osim kada koristite nešto što nije CSS) i skripte (osim kada koristite nešto što nije JavaScript).
Navođenje atributa type u ovom slučaju nije potrebno jer HTML5 prema zadanim postavkama koristi text/css (engleski) i text/javascript (engleski). Ovo će raditi čak iu starijim preglednicima.
Ne preporučuje se:
Preporučeno:
Ne preporučuje se:
Preporučeno:
Bez obzira na stilove navedene za element (CSS vam omogućuje promjenu ponašanja elementa pomoću svojstva prikaza), prelomite svaki blok ili element tablice u novi redak.
Također, uvucite sve elemente ugniježđene unutar elementa bloka ili tablice.
(Ako imate problema s razmakom između elemenata popisa, možete staviti sve li elemente u jedan redak. Preporučuje se da Lint izda upozorenje umjesto pogreške u ovom slučaju.
Preporučeno:
- Maša
- Glasha
- Čeburaš
Preporučeno:
| $ 5.00 | $ 4.50 |
Osim u slučajevima kada je potreban kod ovisan o pregledniku ili pogreške validatora, koristite važeći CSS kod.
Koristite alate kao što je W3C CSS Validator za provjeru valjanosti koda.
Valjanost je važna i mjerljiva kvaliteta koda. Pisanje važećeg CSS-a pomaže u uklanjanju suvišnog koda i osigurava pravilnu upotrebu listova stilova...
Identifikatori i imena klasa Koristite zamjenske znakove ili smislene nazive i identifikatore klasa.Umjesto korištenja kodova ili opisivanja izgleda elementa, pokušajte izraziti značenje njegovog stvaranja u imenu klase ili identifikatora, ili mu dajte ime predloška...
Imena sa zamjenskim znakovima jednostavno su varijante imena za elemente koji nemaju posebnu svrhu ili se ne razlikuju od svojih srodnih. Obično su potrebni kao "pomagači".
Korištenje funkcionalnih naziva ili naziva predložaka smanjuje potrebu za nepotrebnim izmjenama dokumenta ili predložaka.
Zastarjelo: /* Zastarjelo: besmisleno */ #yee-1901 () /* Zastarjelo: opis izgleda */ .button-green() .clear()
Preporučeno: /* Preporučeno: precizno i točno */ #gallery () #login () .video () /* Preporučeno: naziv predloška */ .aux () .alt ()
Pokušajte formulirati što bi točno ovaj element trebao činiti, a da budete što kraći.
Ova upotreba klasa i identifikatora doprinosi lakšem razumijevanju i učinkovitosti koda.
Selektori tipa Izbjegavajte korištenje naziva klasa ili identifikatora sa selektorima tipa elementa (oznaka).Osim ako je apsolutno neophodno (na primjer s pomoćnim klasama), nemojte koristiti nazive elemenata s nazivima klasa ili identifikatorima.
Prečaci za svojstva Koristite prečace za svojstva kad god je to moguće.CSS nudi mnogo različitih skraćenih oblika (kao što je font), koji se preporučuju za korištenje gdje god je to moguće, čak i ako je navedena samo jedna od vrijednosti.
Korištenje stenografskog zapisa svojstava korisno je za veću učinkovitost i bolje razumijevanje vašeg koda.
Ne preporučuje se: /* Ne preporučuje se */ border-top-style: ništa; obitelj fontova: palatino, georgia, serif; veličina fonta: 100%; linija-visina: 1,6; podstava-dno: 2em; padding-lijevo: 1em; padding-desno: 1em; padding-top: 0;
Preporučeno: /* Preporučeno */ border-top: 0; font: 100%/1,6 palatino, georgia, serif; podstava: 0 1em 2em;
Nemojte navoditi jedinice za nulte vrijednosti osim ako za to nema razloga.
0 u cijelom dijelu razlomka Ne stavljajte “0” u cijeli dio razlomka.Ne stavljajte 0 u cijeli broj u vrijednostima između -1 i 1.
Navodnici u poveznicama Nemojte koristiti navodnike u poveznicamaNemojte koristiti navodnike ("", "") s url() .
Heksadecimalni nazivi boja Koristite heksadecimalni zapis od tri znaka kad god je to moguće.Heksadecimalni zapis od tri znaka za boje je kraći i zauzima manje prostora.
Prefiksi Selektori prefiksa s prefiksima jedinstvenim za trenutnu aplikaciju. (nije potrebno)U velikim projektima, kao iu kodu koji će se koristiti za druge projekte ili na drugim stranicama, koristite prefikse (kao prostore imena) za identifikatore i nazive klasa. Koristite kratke, jedinstvene naslove iza kojih slijedi crtica.
Korištenje imenskih prostora pomaže u sprječavanju sukoba imena i može olakšati održavanje vaše stranice. Na primjer, kod traženja i zamjene.
Razdjelnici u klasama i identifikatorima Odvojite riječi u identifikatorima i imenima klasa pomoću crtice.Izbjegavajte korištenje bilo čega osim crtice za povezivanje riječi i kratica u selektorima kako biste poboljšali čitljivost i lakše razumijevanje vašeg koda.
Ne preporučuje se: /* Ne preporučuje se: riječi “demo” i “image” nisu odvojene */ .demoimage () /* Ne preporučuje se: umjesto crtice koristi se podvlaka */ .error_status ()
Preporučeno: /* Preporučeno */ #video-id().ads-sample()
Može biti primamljivo boriti se protiv razlika u pregledniku pomoću CSS filtara, hakiranja ili drugih rješenja. Sve ove pristupe treba uzeti u obzir samo kao posljednje sredstvo ako želite učinkovitu bazu koda koju je lako održavati. Jednostavno rečeno, dopuštanje hakiranja i detekcije preglednika dugoročno će naškoditi projektu, jer to znači da projekt ide putem manjeg otpora. Što olakšava korištenje hakova i omogućuje njihovo sve češće korištenje, što će rezultirati prečestim korištenjem.
Pravila CSS formatiranja Redoslijed oglasa Poredaj oglase po abecedi.Definirajte deklaracije abecednim redom kako biste osigurali dosljedan kod s kojim je lako raditi.
Prilikom sortiranja zanemarite prefikse preglednika. Štoviše, ako se nekoliko prefiksa preglednika koristi za jedno svojstvo, oni također moraju biti sortirani (na primjer -moz bi trebao biti ispred --webkit)
Uvlake u blokovima. Uvijek uvucite sadržaj bloka.Uvijek uvucite bilo koji sadržaj bloka, kao što su pravila unutar pravila ili deklaracija, kako biste prikazali hijerarhiju i olakšali razumijevanje koda.
Nakon deklaracija Stavite točku i zarez iza svake deklaracije.Koristite točku i zarez nakon svake deklaracije radi dosljednosti koda i lakšeg dodavanja novih svojstava.
Iza imena svojstava Koristite razmake iza dvotočaka u deklaracijama.Uvijek koristite jedan razmak iza dvotočke (ali ne prije) u deklaracijama, radi reda u kodu.
Odvajanje selektora i deklaracija Odvojite selektore i deklaracije prijelomom retka.Započnite svaki birač ili deklaraciju u novom retku.
Pravila razdvajanja Pravila razdvajanja prijelomima redaka.Uvijek stavite prijelom retka između pravila.
Meta pravila CSSGrouping rules Grupirajte pravila i označite grupe s komentarom. (nije potrebno)Kad god je moguće, grupno vladajte zajedno. Označite grupe komentarima i odvojite ih prijelomom retka.
Zaključak Budite dosljedniAko uređujete kôd, odvojite nekoliko minuta da shvatite kako je napisan. Ako su matematički operatori odvojeni razmacima, učinite isto. Ako su komentari okruženi zagradama ili crticama, učinite isto sa svojim komentarima.
Ideja ovog vodiča je stvoriti zajednički vokabular koji programerima omogućuje da se usredotoče na ono što žele izraziti, a ne na to kako.
Nudimo jedinstvena pravila dizajna koja vam omogućuju pisanje koda u istom stilu, ali stil koda koji se već koristi u projektu također je važan.
Ako se vaš kod jako razlikuje od postojećeg koda, može poremetiti čitateljev ritam i otežati čitanje. Pokušajte to izbjeći.
Napomena prevoditelja Također bih želio napomenuti da se Google primarno fokusira na velike, visokoopterećene projekte, gdje je svaki bajt skup, pa vrijedi uzeti u obzir da ako preporučuju pokretanje svakog selektora u novom retku ili korištenje razmaka umjesto karticama, to prvenstveno znači da će kôd nužno biti umanjen i komprimiran prije upotrebe na stranici.Hvala svima koji su dovde pročitali.
Oznake: Dodajte oznake
- 1. HTML dokumenti su strukturni dokumenti.
- 2. Imena elemenata mogu se pisati u svakom slučaju.
- 3. Imena atributa mogu se pisati u svakom slučaju.
- 4. Vrijednosti atributa ovise o malim i malim slovima, posebno adrese (značajka Unix operativnih sustava je različita interpretacija znakova u različitim registrima, pa datoteke
slika .gif i slika.GIF su različite!).
- 5. Imena elemenata ne smiju sadržavati razmake.
- 6. Ako vrijednosti atributa sadrže razmake, moraju biti pod navodnicima.
- 7. Dodatni razmaci, tabulatori i povratci na novi red zanemaruju se i komprimiraju u jedan razmak.
- 8. Elementi se mogu ugniježditi jedan u drugi. U tom se slučaju mora poštivati pravilo gniježđenja. Unutar ugniježđenog elementa, osim uvodne oznake, mora postojati i zatvarajuća oznaka. Raskrižja su netočna:
9. Nepoznate elemente i atribute preglednici zanemaruju ("tolerancija na pogreške").
Većina dokumenata ima standardne elemente kao što su naslov, paragrafi ili popisi. Pomoću HTML oznaka možete označiti ove elemente, pružajući web preglednicima minimalne informacije za prikaz tih elemenata, dok općenito održavate ukupnu strukturu i informativnu cjelovitost dokumenata. Sve što je potrebno za čitanje HTML dokumenta je web preglednik, koji tumači HTML oznake i prikazuje dokument onako kako je zamislio autor.
Kada web-preglednik primi dokument, on određuje kako dokument treba tumačiti. Prva oznaka koja se pojavljuje u dokumentu mora biti . Ova oznaka govori web pregledniku da je dokument napisan pomoću HTML-a.
Komentari u HTML-u. Kao i svaki drugi jezik, HTML vam omogućuje umetanje komentara u tijelo dokumenta, koji se spremaju kada se dokument prenese preko mreže, ali ih preglednik ne prikazuje. Često su određene oznake ili cijele sintaktičke strukture "skrivene" u komentarima starijih verzija preglednika koji ih ne mogu obraditi. Komentari se mogu pojaviti bilo gdje u dokumentu iu bilo kojoj količini. Treba imati na umu da komentari povećavaju veličinu dokumenta, a time i vrijeme učitavanja.
Dio općeg zaglavlja dokumenta. Oznaku glave dokumenta treba koristiti odmah nakon oznake i nigdje drugdje u tijelu dokumenta. Ova oznaka predstavlja opći opis dokumenta. Početna oznaka se postavlja neposredno ispred oznake i ostalih oznaka koje opisuju dokument, a završna oznaka se postavlja neposredno iza kraja opisa dokumenta.
Naziv dokumenta. Većina web preglednika prikazuje sadržaj oznake u naslovnoj traci prozora koji sadrži dokument i u datoteci s oznakama ako to web preglednik podržava. Zaglavlje, omeđeno oznakama i, nalazi se unutar oznaka. Naslov dokumenta se ne pojavljuje kada je sam dokument prikazan u prozoru.
Oznake tijela dokumenta. Oznake tijela dokumenta identificiraju komponente HTML dokumenta prikazanog u prozoru. Tijelo dokumenta može sadržavati veze na druge dokumente, tekst i druge formatirane informacije.
Tijelo dokumenta. Tijelo dokumenta mora biti između oznaka i . Ovo je dio dokumenta koji se prikazuje kao tekstualna i grafička (semantička) informacija vašeg dokumenta.
Razine naslova. Prva razina naslova (najveća) označena je brojem 1, sljedeća 2, i tako dalje do broja 6. Većina preglednika podržava interpretaciju šest razina naslova, definirajući svaki od njih vlastitim stilom. U većini slučajeva, tekst takvog zaglavlja će postati podebljan, a iza teksta će biti prazan redak. Važno je da te oznake određuju logičku strukturu dokumenta i sudjeluju u indeksiranju internetskih tražilica. Zaglavlja iznad razine šest nisu standardna i možda ih preglednik ne podržava.
Oznaka odlomka. Za razliku od većine programa za obradu teksta, u HTML dokumentu se znakovi vraćanja na prvi redak zanemaruju. Preglednik odvaja odlomke samo ako postoji . Ako odlomke ne odvojite oznakom, dokument će izgledati kao jedan veliki odlomak.
Prethodno formatirana tekstualna oznaka. Oznaka Omogućuje prikaz teksta s određenim oblikovanjem na zaslonu. Prethodno oblikovani tekst završava završnom oznakom. Unutar prethodno formatiranog teksta možete koristiti: novi redak, tab znakove (pomak za osam znakova udesno), neproporcionalni Courier font instaliran od strane preglednika.
Popis oznaka. Postoje tri glavne vrste popisa u HTML dokumentu: popis s brojevima, s grafičkim oznakama i popis s opisom.
Možete stvoriti ugniježđene popise korištenjem različitih oznaka popisa ili ponavljanjem onih unutar drugih. Da biste to učinili, jednostavno trebate postaviti jedan par oznaka (početak i kraj) unutar drugog. Hoće li ugniježđene stavke popisa imati iste oznake koje označavaju stavku popisa ovisi o pregledniku.
Numerirani popisi. Na numeriranom popisu preglednik automatski redom ubacuje brojeve stavki. To znači da ako izbrišete jednu ili više stavki s numeriranog popisa, preostali brojevi će se automatski ponovno izračunati.
a završava oznakom
Popisi s grafičkim oznakama. Za popise s grafičkim oznakama preglednik obično koristi grafičke oznake za stavku popisa. Tip markera obično konfigurira korisnik preglednika.
Numerirani popis počinje početnom oznakom
- a završava oznakom
Oblikovanje fonta. HTML dopušta dva pristupa odabiru fonta fragmenata teksta. S jedne strane, možete izravno naznačiti da font u određenom dijelu teksta treba biti podebljan ili kurziv, tj. promijeniti fizički stil teksta. S druge strane, moguće je označiti da neki dio teksta ima neki nenormalni logički stil, ostavljajući interpretaciju tog stila pregledniku.
Grafika unutar HTML dokumenta. Jedna od najatraktivnijih značajki WEB-a je mogućnost uključivanja grafičkih i drugih vrsta podataka u HTML dokument.
Postoje dva načina korištenja grafike u HTML dokumentima. Prvi je ugrađivanje grafičkih slika u dokument, što korisniku omogućuje da slike vidi izravno u kontekstu drugih elemenata dokumenta. To se radi pomoću oznake . Ova oznaka je točkasta, tj. ne zatvara se. Sintaksa oznake:
Traženi parametar ima istu sintaksu kao standardni URL. Ovaj URL govori pregledniku gdje je
crtanje. Crtež mora biti pohranjen u grafičkom formatu koji preglednik podržava. Danas su to GIF, JPG, PNG formati. Podržava ih većina preglednika.
ALT="tekst"
Ovaj izborni element navodi tekst koji će biti prikazan u pregledniku koji ne podržava grafiku ili s onemogućenom slikovnom grafikom. Obično je to kratak opis slike koju bi korisnik mogao ili će moći vidjeti na ekranu. Ako ovog parametra nema, većina preglednika prikazuje prazan okvir umjesto slike. Oznaka se preporučuje ako korisnici koriste preglednik koji ne podržava grafički način, kao što je Lynx, te za indeksiranje u tražilicama. Tekst je također vidljiv kada držite kursor miša neko vrijeme bez pomicanja preko slike kao sistemski opis ispod kursora.
Većina preglednika dopušta vam da u svoj dokument uključite pozadinsku sliku, koja će se duplicirati poput kupaonskih pločica i pojaviti kao pozadina cijelog dokumenta. Ovo je drugi način. Neki korisnici vole pozadinsku grafiku, neki ne. Nenametljiv proziran uzorak (pozadina) obično dobro izgleda kao pozadina za većinu dokumenata.
Hipertekstualne veze ključna su komponenta koja čini WEB privlačnim korisnicima. Dodavanjem hipertekstualnih poveznica (u daljnjem tekstu poveznice) korisnik skup dokumenata čini povezanim i strukturiranim, što mu omogućuje da što brže i povoljnije dođe do potrebnih informacija.
Linkovi imaju standardni format, koji omogućuje pregledniku da ih interpretira i izvrši potrebne funkcije (metode poziva) ovisno o vrsti linka. Veze mogu upućivati na drugi dokument, određeno mjesto unutar dokumenta ili obavljati druge funkcije kao što je traženje datoteke. Kao hipervezu možete koristiti tekst ili sliku ili oboje.
Struktura veze u HTML dokumentu. Kako bi preglednik prikazao vezu na URL, morate staviti tekst ili sliku unutar oznake hiperveze. HTML sintaksa je sljedeća:
tekst-ili-slika-koja-će-biti-istaknuta-kao-link
Tag otvara opis veze, a tag ga zatvara. Svaki tekst koji se nalazi između ove dvije oznake web preglednik ističe na poseban način. Obično se ovaj tekst pojavljuje podcrtano i istaknuto. Slika je uokvirena pravokutnim okvirom. Tekst koji predstavlja URL ne prikazuje preglednik, već se koristi samo za izvođenje predviđenih radnji kada se poveznica aktivira (obično klikom na istaknuti ili podcrtani tekst).
Veze na oznake unutar dokumenta. Možete se povezati s različitim područjima ili odjeljcima istog dokumenta korištenjem posebnih skrivenih oznaka za te odjeljke. To vam omogućuje brzo kretanje od odjeljka do odjeljka unutar dokumenta bez pomicanja zaslona. Čim korisnik klikne na poveznicu, preglednik će ga premjestiti na navedeni odjeljak dokumenta, a redak koji sadrži oznaku za ovaj odjeljak bit će smješten u prvom redu prozora preglednika (ako je “duljina” dovoljan je dokument u prozoru preglednika).
