Trenutno većina pretraživača prikazuje web stranice, samostalno dešifrirajući i ispravljajući greške webmastera. Međutim, morate biti oprezni pri pisanju HTML-a – morate se pridržavati pravila valjanosti, jer Ispravan izgled je važan za optimizaciju sajta, a takođe će pomoći da korisnici ne polude kada otvore vašu veb lokaciju u ranijim pretraživačima.
Koristi
Elementpozicioniran na prvom redu bilo koje HTML stranice. Definira verziju jezika za označavanje koji se koristi na stranici. Trenutno se preporučuje korištenje doctype obrasca- univerzalan je za bilo koju verziju jezika.
Koristite ispravnu strukturu dokumenta
Oznake ,
, mora uvijek biti prisutan u kodu, to čini stranicu usklađenom sa standardima i osigurava da će se ispravno prikazati.
Nije kako treba
Zdravo svijete! Zdravo svijete!
U redu
Zdravo svijete! Zdravo svijete!
Ispravno definirajte tehničke informacije stranice
Meta oznake i stilovi trebaju biti specificirani u
a ne negdje u tijelu stranice. Poželjno je uključiti skripte na dnu stranice prije završne oznake... Prednost ovog pristupa je u tome što dok se ne prikaže sadržaj stranice, pretraživač učitava samo stilove, a skripte učitava posljednji, što omogućava korisniku da brže vidi sadržaj stranice.
Nije kako treba
Zdravo svijete! U redu
Zdravo svijete! Slijedite standarde označavanja
Koristite elemente prema njihovoj semantici
Provjerite valjanost html koda
Koristite zamjenski tekst za slike
Slike uvek treba da sadrže atribut alt. Pregledač se oslanja na ovaj atribut da bi pružio kontekst za sliku. Atribut alt bi trebao sadržavati tekst koji će biti prikazan ako se slika nije učitala.
Nije kako treba
U redu
Nemojte koristiti stilove u HTML oznakama
Ovo stvara stranice koje se predugo učitavaju i koje je teško održavati. Zapišite sve stilove u poseban CSS dokument. Pokušajte da oznaku i atribut stila svedete na minimum.
Pišite komentare
Komentirajte kod, ali nemojte pretjerivati. Komentari koji su sažeti i razumljivi mogu poslužiti kao velika pomoć drugim programerima, ali i kao važan podsjetnik za vas nakon nekog vremena.
primjer:
Stranica
Koristite odgovarajuća imena klasa
Imenujte css klase prema sadržaju bloka, na primjer: zaglavlje - zaglavlje, podnožje - podnožje, meni - meni, sadržaj - sadržaj. Ovo će učiniti kod mnogo jasnijim i lakšim za održavanje.
Loš kod
Stavka menija 1 Stavka menija 2 Stavka menija 3 Dobar kod
Pravila pisanja CSS-a
CSS takođe ima pravila koja se pridržavate kako bi vaš kod bio jednostavan, lak za čitanje i dobro organizovan.
Vratite stilove pretraživača na podrazumevane vrednosti
Oni mogu stati na put stilovima koje zapravo želimo primijeniti. Ovde možete preuzeti fajl za resetovanje podrazumevanih stilova pretraživača - reset.css.
Koristite skraćena svojstva i vrijednosti
Loš kod
padding-top: 5px;
Dobar kod
padding: 5px 10px 15px 20px;
Navedite selektore i pravila u novom redu
Loš kod
Element (prikaz: blok; položaj: relativan; padding: 5px 10px 15px 20px;)
Dobar kod
element (
Navedite nulte vrijednosti bez jedinica
Loš kod
padding: 10px 0px;
Dobar kod
padding: 10px 0;
Pišite komentare
Odvojite glavne blokove komentarima, to će poboljšati čitljivost koda.
primjer:
/ * ZAGLAVLJE * /
/ * GLAVNI * /
/ * PODNOŽJE * /
Provjerite valjanost css koda
Zaključak
Ove smjernice i smjernice su samo osnove, jer se HTML i CSS razvijaju bržim tempom i razvijaju se nove metode pisanja ispravnog koda. Slijedeći naše smjernice, možete osigurati da je vaš kod jednostavan, lak za čitanje i pojednostavljen. I također dobijte +100 karme i zahvale od programera koji će raditi na stranici nakon vas.
Šta je HTML
World Wide Web (WWW) se sastoji od web stranica koje su kreirane pomoću takozvanog jezika za označavanje hiperteksta (HTML). Iako mnogi ljudi govore o programiranju na ovom jeziku, HTML uopće nije programski jezik u tradicionalnom smislu. HTML je jezik za označavanje dokumenta. Kada razvijate HTML dokument, označavanje tekstualnog dokumenta se izvodi na isti način kao što to radi uređivač crvenom olovkom. Ove oznake služe za označavanje oblika prezentacije informacija sadržanih u dokumentu.
Specijalizovani preglednici za HTML dokumente, koji se često nazivaju pretraživači, koriste se za tumačenje datoteka označenih u skladu sa pravilima HTML jezika, formatiranje kao Web stranice i prikazivanje njihovog sadržaja na ekranu računara korisnika. Postoji veliki broj programa pretraživača koje su razvile različite kompanije, međutim, danas se od čitavog niza programa jasno izdvajaju dva vodeća programa - Netscape Communicator i Microsoft Internet Explorer.
Netscape Navigator je razvio Netscape Communications Corporation. Kao i kod mnogih softverskih proizvoda, postoji nekoliko verzija ovog programa. Najnovija verzija Netscape Communicatora u vrijeme pisanja ovog teksta je verzija 4.7. Internet Explorer je razvio Microsoft. Najnovija verzija ovog programa je 5.0.
Ostali pretraživači značajno zaostaju u popularnosti. Prije nekoliko godina, Netscapeov pretraživač je bio vodeći pretraživač, sa više od dvije trećine korisnika koji koriste ovaj pretraživač. Sa izdavanjem svog pretraživača, Microsoft se potrudio da osvoji ovaj dio tržišta. Mediji često
bilo je izvještaja o ratu između pretraživača za korisnike. Sada su ova dva pretraživača uporediva po popularnosti. Rastuća popularnost Microsoft pretraživača je olakšana uključivanjem pretraživača u Windows 98 operativni sistem, međutim, na kraju, izbor pretraživača ostaje na korisniku.
Moderni pretraživači su bogati mogućnostima, ali im je glavna stvar interpretacija dokumenata označenih prema pravilima HTML-a. Ova knjiga je uglavnom posvećena opisu ovih pravila. U prvom dijelu ćemo pokriti samo osnovne principe izrade HTML dokumenata.
Da bismo razumjeli šta je jezik za označavanje, prisjetimo se dobrih starih vremena, kada su mnogi ljudi radili sa uređivačima teksta poput WordStara. U njima, da bi se istakla fraza, na primjer, podebljanim slovima, posebne oznake (/ B i / b) stavljene su na njen početak i kraj:
/B Ovaj tekst će biti prikazan podebljanim / b
Prilikom izlaza takvog teksta na uređaj za štampanje (još ne govorimo o displejima, u ta daleka vremena oni ili nisu postojali ili su postojali alfanumerički displeji koji nisu dozvoljavali promenu fontova) karakteri / in su bili primorani da koriste podebljani font dok ne bude / b znakova.
HTML radi na isti način. Ako postoji potreba da se tekst na ekranu istakne podebljanim slovima, to se može učiniti na isti način:
Ovaj tekst će biti prikazan podebljanim slovima.
Simboli uključiti podebljano i znakove ugasi ga. Takvi znakovi, koji kontrolišu prikaz teksta, a pritom se sami ne prikazuju na ekranu, obično se u HTML-u nazivaju tagovima (od engleske riječi tag - oznaka, znak).
Sve HTML oznake su razdvojene graničnicima (< и >), između kojih je upisan identifikator (ime) oznake (u našem primjeru ovo je in), i, eventualno, njeni parametri. Jedini izuzetak od ovog pravila su oznake komentara sa složenijim graničnicima (). Imena oznaka, kao i njihovi parametri, mogu se upisati u bilo koji registar. Radi doslednosti u ovoj knjizi, većina oznaka je napisana velikim slovima.
Većina HTML tagova se koristi u parovima, odnosno za određeni tag, nazovimo ga početnom oznakom, dokument ima odgovarajuću završnu oznaku. Prema HTML pravilima, završna oznaka se piše na isti način kao i početna, ali sa znakom / (kosa crta naprijed) ispred naziva oznake. Jedina fundamentalna razlika između parova oznaka je u tome što krajnje oznake ne koriste parametre.
Oznake koje trebaju odgovarajuće završne oznake zvati će se kontejnerske oznake. Sve što je napisano između odgovarajućih oznaka otvaranja i zatvaranja naziva se sadržajem oznake kontejnera. Ponekad se završna oznaka može izostaviti. Na primjer, za oznaku koja opisuje podatke za ćeliju tabele
, odgovarajuću završnu oznaku uvijek se može izostaviti. Kraj podataka za ćeliju tabele će biti prepoznat po izgledu sledeće oznake
ili završnu oznaku reda tabele.
Postoji niz oznaka za koje većina autora dokumenata izostavlja zadnje oznake. Primjer bi bila oznaka stavke liste
ili oznaka paragrafa Moderni pretraživači će u mnogim slučajevima ispravno formatirati dokumente ako se izostave neke od završnih oznaka, ali ova praksa se ne može preporučiti.
Nekim oznakama, u principu, nisu potrebne prateće oznake. Primjeri uključuju oznaku za umetanje slike
Postoje opšta pravila o tome kako pretraživači tumače oznake. Za razliku od programskih jezika, u kojima pogrešne izjave dovode do izdavanja odgovarajućih poruka u fazi kompilacije programa i zahtijevaju uređivanje, u HTML-u nije uobičajeno odgovarati na pogrešno pisanje oznaka. Pogrešno napisanu oznaku ili njen parametar bi pretraživač jednostavno trebao zanemariti. Ovo je opšte pravilo za sve pretraživače, koje se odnosi ne samo na pogrešno napisane oznake, već i na oznake koje ova verzija pretraživača ne prepoznaje. Primjer bi bile oznake koje su predložene i implementirane za određeni pretraživač i nepoznate drugom. Na primjer kontejner oznaka <![CDATA[, koji služi za pružanje alternativnih informacija pretraživačima koji ne pružaju podršku za strukture okvira, takvi pretraživači neće prepoznati. Preglednik koji podržava okvire kada naiđe na oznaku <NOFRAMES>, će preskočiti sve informacije koje sadrži. A pretraživač koji nije upoznat sa okvirima, naravno, neće razumjeti oznaku <NOFRAMES>... Međutim, prema gore navedenom pravilu, ova oznaka će jednostavno biti preskočena, ali će se prikazati sve naknadne informacije.</p>
<p>Oznake se mogu pisati sa parametrima ili atributima (od engleskog, atribut). U ovoj knjizi najčešće ćemo koristiti termin parametar. Skupovi dozvoljenih parametara su individualni za svaku oznaku. Opća pravila za pisanje parametara su sljedeća. Ime oznake može biti praćeno parametrima, koji su međusobno odvojeni razmacima. Redoslijed parametara oznake je proizvoljan. Mnogi parametri zahtijevaju da se navedu njihove vrijednosti, ali neki parametri nemaju vrijednosti ili se mogu napisati bez njih, uz pretpostavku zadanih vrijednosti. Ako parametar zahtijeva vrijednost, ona se označava nakon naziva parametra znakom jednakosti. Vrijednost parametra se može napisati u navodnicima ili bez njih. Jedini slučaj u kojem ne možete bez navodnika je slučaj kada postoje razmaci u vrijednosti parametra. U vrijednostima parametara (za razliku od naziva oznaka i samih parametara) ponekad je važan registar za upisivanje. Evo primjera pisanja oznake s parametrima:</p>
<p><TABLE BORDER ALIGN="left">
</p>
<p>Evo za oznaku <TABLE>data su dva parametra. Prvi BORDER parametar je specificiran bez vrijednosti. Drugi parametar ALIGN je lijevo.</p>
<p>Naredna poglavlja prvog dijela knjige će opisati svrhu HTML oznaka i njihove parametre. Općenito, oznake mogu imati različite parametre, ali postoji niz parametara koji su isti za gotovo sve oznake. Ovdje ćemo spomenuti opšte parametre tagova, kako ne bismo više pričali o njima prilikom opisivanja svake oznake.</p>
<p>Sve oznake koje se mogu koristiti u sekciji <BODY>HTML dokument može imati parametre CLASS, ID, LANG, LANGUAGE, STYLE i TITLE. Upotreba ovih parametara korisna je, prije svega, pri oblikovanju dokumenata, o čemu će biti riječi u drugom dijelu knjige.</p>
<p>Parametri CLASS, ID, STYLE podržavaju Internet Explorer 3.0 i noviji i Netscape 4.0 i noviji. Ovi parametri su potrebni kada se koriste stilovi.</p>
<p>Parametri LANG, LANGUAGE, TITLE - podržani samo od strane Internet Explorera, počevši od verzije 4.0. Ovi parametri označavaju, respektivno, jezik koji se koristi (na primjer, za Rusiju: LANG = ru), jezik skripte (na primjer, LANGUAGE = JavaScript), kao i tekst opisa alata koji se prikazuje kada kursor miša lebdi iznad ovog element (TITLE).</p>
<p>U modernom HTML-u, pored jezičkih oznaka i njihovog sadržaja, skriptni kodovi (javascript ili VBScript) su takođe napisani u HTML izvornom kodu. U prvom dijelu knjige to se praktično nigdje ne spominje, ali je drugi dio u potpunosti posvećen pitanjima korištenja skripti.</p>
<p>Završavajući opšti pregled HTML-a, napominjemo da su najjednostavniji HTML dokumenti obični tekstualni fajlovi, za pregled i uređivanje kojih možete koristiti bilo koji uređivač teksta. Ove datoteke obično imaju ekstenziju HTM ili HTML.</p>
<p>HTML specifikacije</p>
<p>HTML je stekao popularnost sredinom 90-ih, zahvaljujući eksponencijalnom rastu interneta. Do tada se pojavila potreba za standardizacijom jezika, jer su različite kompanije koje su razvijale softver za pristup Internetu nudile svoje</p>
<p>sve više varijanti HTML instrukcija. Sada je vrijeme da se postigne neka vrsta zajedničkog dogovora u vezi sa upotrebom HTML oznaka.</p>
<p>Organizacija pod nazivom World Wide Web Consortium (skraćeno W3C) preuzela je HTML specifikaciju. Njen zadatak je bio da izradi specifikaciju koja odražava trenutni nivo razvoja jezičkih mogućnosti, uzimajući u obzir različite predloge kompanija koje se bave pretraživačem. Tako se u novembru 1995. pojavila specifikacija HTML 2.0, dizajnirana da formalizira praksu korištenja HTML-a koja se razvila do kraja 1994. godine.</p>
<p>Shema odobrenja specifikacije je sljedeća. Konzorcij W3C izdaje nacrt specifikacije, nakon čije rasprave se izdaje tzv. nacrt specifikacije i predlaže je na raspravu za određeni period. Nakon perioda razmatranja, radni nacrt specifikacije može postati preporuka, odnosno službeno priznata verzija HTML specifikacije.</p>
<p>Ubrzo nakon specifikacije 2.0, objavljena je radna verzija specifikacije 3.0, a njen period rasprave je istekao u septembru 1995. Ova specifikacija nikada nije prihvaćena kao formalna preporuka. Namjera je bila da uključi široku lepezu oznaka i karakteristika specifičnih za pojedinačne pretraživače, ali W3C nije mogao razviti dobru specifikaciju za tako veliki broj instrukcija.</p>
<p>Nakon dugog razmišljanja, nacrt HTML 3.2 je objavljen u maju 1996. godine. Projekat je baziran na nekim od tagova dostupnih u verziji 3.0, što je pokazalo stabilnost u radu. U septembru 1996., nakon mjeseci rasprave, verzija 3.2 postala je predložena specifikacija, au januaru 1997. postala je zvanična preporuka.</p>
<p>U julu 1997. godine objavljena je predložena HTML 4.0 specifikacija, koja je postala zvanična preporuka u decembru 1997. godine. Ovo je posljednja usvojena specifikacija do danas.</p>
<p>U ovom kratkom pregledu istorije razvoja HTML jezika, teško da je vredno detaljnije opisivati karakteristike raznih specifikacija, pogotovo jer u stvarnom životu programeri ne prate uvek preporuke Konzorcijuma. Evo samo nekih ideja iza najnovije specifikacije.</p>
<p>U specifikaciji HTML 4.0, ključna ideja je bila da se odvoji opis strukture dokumenta od opisa njegove prezentacije na ekranu monitora. Iskustvo je pokazalo da razdvajanje strukture i prezentacije dokumenta smanjuje troškove podrške širokom spektru platformi, okruženja i slično, a takođe olakšava ispravljanje dokumenata. U skladu sa ovom idejom, trebalo bi ekstenzivnije koristiti metode opisivanja prezentacije</p>
<p>dokument koristeći stilove, umjesto specificiranja podataka prezentacije isprepletenih sadržajem dokumenta. Da bi se ova ideja implementirala u HTML 4.0 specifikaciju, uklonjen je veliki broj oznaka koje se koriste za direktno specificiranje oblika prezentacije HTML elemenata. Oznake otkazane iz ovog razloga uključuju <CENTER>, <FONT>, <BASEFONT>,
<S>, <STRIKE>, <U>... Među ostalim poništenim oznakama, ističemo <ISINDEX>, <APPLET>, <DIR>, <MENU>... Umjesto poništenih oznaka, predložene su alternativne opcije za implementaciju odgovarajućih mogućnosti, što naglašavamo u ovoj knjizi.</p>
<p>Koncept zastarjele oznake je sljedeći. Ako je oznaka u ovoj jezičkoj specifikaciji proglašena zastarjelom, to znači da bi pretraživači za sada trebali nastaviti podržavati takve oznake, ali se njihova upotreba ne preporučuje. U sljedećim specifikacijama, ove oznake mogu biti zastarjele. Preglednici možda više ne podržavaju zastarjele oznake. Samo tri oznake su zastarjele u HTML 4.0 specifikaciji:<ХМР>,
<PLAINTEXT>I <LISTING>... Informacije o tome koje su oznake uključene u specifikaciju mogu se dobiti iz tabele u Dodatku A1.</p>
<p>Zvanične informacije o HTML specifikaciji uvijek se mogu dobiti na W3C web stranici na adresi <b>http://www.w3.org/TR/</b>... Specifikacija 4.0 je na <b>http://www.w3.org/TR/REC-htmI40-971218</b>.
</p>
<p>Imajte na umu da bi, logično, zvanična specifikacija trebala igrati ulogu vodeće i usmjeravajuće sile, osiguravajući isti oblik prezentacije informacija od strane različitih pretraživača. Ovo je idealna opcija kojoj treba težiti. U stvarnosti, stvari nisu tako dobre. Nove ideje se stalno pojavljuju, implementiraju ih razvojne kompanije u svojim pretraživačima i one promoviraju. Uspješne ideje se ukorjenjuju, a zatim ih preuzimaju drugi programeri. Neke od mogućnosti ostaju specifične za određeni pretraživač. Uspješni dizajni završavaju u specifikaciji i postaju općeprihvaćeni. Dakle, proces poboljšanja mogućnosti pretraživača i usavršavanja specifikacije je stalan proces, koji utiče jedan na drugog.</p>
<p>Struktura dokumenta</p>
<p>Prva oznaka s kojom počinje opis HTML dokumenata je the <HTML>... Uvijek treba započeti opis dokumenta i završiti opis dokumenta oznakom</HTML>... Ove oznake označavaju da linije između njih predstavljaju jedan HTML dokument. Sam dokument je obična ASCII tekstualna datoteka. Bez ovih oznaka, pretraživač ili drugi pregledač možda neće moći da identifikuje format dokumenta i da ga ispravno protumači.</p>
<p>Najčešće oznaka <HTML>koristi se bez parametara. Prethodne verzije su koristile opciju VERSION, koja je zastarjela HTML 4.0 specifikacijom. Ovaj parametar je zamijenjen oznakom<!
DOCTYPE>.
</p>
<p>Većina modernih pretraživača može prepoznati dokument i ne sadrži oznake <HTML>i</HTML>, ali je njihova upotreba vrlo poželjna.</p>
<p>Između para oznaka <HTML>i</HTML> sam dokument se nalazi. Dokument se može sastojati od dva odjeljka - odjeljka zaglavlja (počevši od oznake <HEAD>) i dio sadržaja dokumenta (počevši od oznake <BODY>). Za dokumente koji opisuju strukture okvira, umjesto odjeljka BODY, koristi se odjeljak FRAMESET (sa oznakom <FRAMESET>). Zatim ćemo razmotriti pravila za sastavljanje dijelova dokumenta GLAVA i TIJELO. Konstrukcija dokumenata koji sadrže okvire razmatrana je u Poglavlju 5.</p>
<p><b> <span>Odjeljak GLAVNOG dokumenta</span>
</b></p>
<p>Odjeljak HEAD dokumenta definira njegov naslov i nije obavezna oznaka, međutim dobro napisan naslov može biti vrlo koristan. Svrha zaglavlja je da pruži potrebne informacije za program koji tumači dokument. Oznake koje se nalaze unutar odjeljka HEAD (osim naziva dokumenta opisanog pomoću oznake <TITLE>) se ne prikazuju na ekranu.</p>
<p>Odjeljak naslova otvara se oznakom <HEAD>... Obično ova oznaka slijedi odmah nakon oznake <HTML>... Kraj oznaka</HEAD> prikazuje kraj ovog odeljka. Između pomenutih oznaka nalaze se ostale oznake odjeljka naslova.</p>
<p><b> <span>Ime dokumenta</span>
</b></p>
<p>Tag kontejner <TITLE>je jedina potrebna oznaka naslova i koristi se za davanje naslova dokumentu. Obično se prikazuje u zaglavlju prozora pretraživača. Tag <TITLE>ne treba mešati sa nazivom datoteke dokumenta; naprotiv, to je tekstualni niz potpuno nezavisan od naziva datoteke i lokacije, što ga čini prilično korisnim. Naziv datoteke strogo je određen operativnim sistemom računara na kojem je pohranjena. Također biste trebali razlikovati naziv dokumenta (sa oznakom <TITLE>) iz naslova unutar dokumenta, obično označenih <Hx>.
</p>
<p><i> <b>Bilješka</b>
</i></p>
<p><i> <span>Uopšteno govoreći, obavezni naslov dokumenta ima karakter hitne preporuke. Neoznačeni dokument <TITLE>će također biti prikazan od strane pretraživača. U ovom slučaju, različiti pretraživači će prikazati različite informacije kao naslov prozora. Ovako bi rane verzije Netscape pretraživača prikazivale liniju "Bez naslova". Drugi pretraživači ili ne prikazuju ništa, ili prikazuju URL preuzete datoteke, ponavljajući informacije u traci lokacije pretraživača.</span>
</i></p>
<p>Ime dokumenta je upisano između oznaka <TITLE>i</TITLE> i predstavlja red teksta. U principu, naziv može biti neograničene dužine i sadržavati bilo koje znakove, osim nekih rezerviranih. U praksi, trebali biste se ograničiti na jedan red, imajući na umu da se naslov pojavljuje u naslovnoj traci prozora pretraživača. Također biste trebali zapamtiti šta ostaje od naslova dokumenta kada minimizirate prozor pretraživača. Preporučuje se da se dužina naziva dokumenta ograniči na 60 znakova. Možete vidjeti kako se naslov prikazuje u prozoru pretraživača na bilo kojoj slici u ovoj knjizi, koja pruža primjer prikaza dokumenta.</p>
<p>Podrazumevano, tekst sadržan u naslovu dokumenta koristi se prilikom kreiranja obeleživača za dokument. Stoga, za više informacija, izbjegavajte imena bez lica (Home Page, Index, itd.). Takve riječi koje se koriste kao naziv oznake obično su potpuno beskorisne. Naslov dokumenta treba ukratko opisati njegov sadržaj. Imajte na umu da kada se dokumenti sa strukturom okvira prikazuju na ekranu, kada se u svaki okvir učita poseban dokument sa sopstvenim imenom, na ekranu će biti vidljiv samo naziv glavnog dokumenta. Međutim, također se preporučuje da se imenuju pojedinačni dokumenti koji će se učitati u okvire. Poglavlje 5 razmatra ovo pitanje detaljnije.</p>
<p>Važnost naslova dokumenta određena je sljedećom činjenicom. Od oznake <TITLE>se nalazi skoro na samom početku HTML datoteke, a zatim nakon početka učitavanja dokumenta, upravo se ova datoteka prikazuje prva. Zatim se učitava glavni sadržaj dokumenta, dok pretraživač počinje formatirati dokument u prozoru. Ovaj proces, općenito govoreći, ovisno o sadržaju i strukturi dokumenta, kao i brzini povezivanja, može biti odložen. Prilično dugo će korisnik razmišljati o praznom ekranu, čija će jedina informativna linija biti naziv dokumenta. Vrlo često (kada je veza prekinuta, ili ako korisnik ne želi da čeka da se dokument završi učitavanjem), sve informacije o dokumentu završavaju se tu.</p>
<p><b><span>Odnos sa drugim dokumentima</span>
</b></p>
<p>Često su HTML dokumenti povezani, odnosno imaju veze jedni prema drugima. Veze mogu biti apsolutne ili relativne. Oba imaju nedostatke. Apsolutne veze mogu biti previše glomazne i prestati raditi ako pomjerite dokument niže u hijerarhiji. Relativne veze je lakše unijeti i ažurirati, ali i ova veza se prekida ako se pomjeri najviši dokument u hijerarhiji. Obje vrste veza mogu biti prekinute prilikom prijenosa dokumenta sa jednog računara na drugi.</p>
<p>Često se dešava da korisnik preuzme veliki dokument na svoju mašinu i isključi se sa mreže kako bi ga detaljno proučio. Sve veze u lokalnoj kopiji dokumenta će prestati da rade. Da biste ih "reanimirali", moraćete ponovo da se pozovete na originalni dokument koji se nalazi na udaljenom računaru.</p>
<p>Srećom, HTML programeri su predvidjeli ovaj problem i dodali dvije oznake, <BASE>i <LINK>, koji su uključeni u naslov kako se ne bi prekinula veza između dokumenata.</p>
<p><b>Tag <BASE>
</b>
</p>
<p>Tag <BASE>služi za specificiranje punog osnovnog URL-a dokumenta. Uz njegovu pomoć, relativna veza nastavlja raditi ako se dokument prenese u drugi direktorij ili čak na drugi računar. Tag <BASE>radi na sličan način kao naredba MS-DOS path, koja omogućava gledaocu da odredi vezu do dokumenta koji traži, čak i ako se nalazi u starijem dokumentu koji se nalazi na drugom računaru.</p>
<p>Tag <BASE>ima jedan obavezni parametar, HREF, praćen punim URL-om dokumenta. Ispod je primjer korištenja oznake <BASE>.
</p>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Određivanje osnovne adrese</TITLE>
</p>
<p><BASE HREF="http://www.my_host.ru/~sergeev">
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p><img src='/pravila-postroeniya-html-dokumentov-vlozhennye-pravila.html' loading=lazy loading=lazy>
</p>
<p></BODY>
</p>
<p></HTML>
</p>
<p>Tag <BASE>govori pretraživaču gdje da traži datoteku. Ako korisnik radi s lokalnom kopijom datoteke i njegova mašina nije isključena s mreže, slika ikone vijesti će se pronaći i prikazati u prozoru pretraživača.</p>
<p><b>Tag <LINK>
</b></p>
<p>Čak i ako je oznaka <BASE>omogućava vam da pronađete datoteku, pitanje odnosa dokumenata ostaje otvoreno. Važnost ovih odnosa raste proporcionalno složenosti vaših dokumenata. Da bi održao logičku vezu između njih, HTML je uveo oznaku <LINK>.
</p>
<p>Tag <LINK>označava odnos između dokumenta koji sadrži ovu oznaku i drugog dokumenta ili objekta. Sastoji se od URL-a i parametara koji konkretiziraju odnose dokumenata. Naslov dokumenta može sadržavati bilo koji broj oznaka <LINK>... Tab. 1.1 opisuje parametre oznake <LINK>i njihove funkcije.</p>
<p><i> <span><b>Tabela 1.1.</b> Parametri oznake <LINK>
</span>
</i></p>
<p>Evo nekoliko primjera oznake <LINK>sa parametrima:</p>
<p><LINK REL="contents" HREF ="../toc.html">
</p>
<p><LINK HREF="mailto:sergeev@mail.ifmo.ru"
REV="made">
</p>
<p>Prvi red označava vezu do datoteke sa sadržajem dokumenta (toc.html - sadržaj) u direktnoj vezi sa sadržajem. Drugi red opisuje odnos prema URL-u autora dokumenta (sa obrnutim odnosom).</p>
<p>Mnogo različitih odnosa može postojati između dokumenata. Primjeri drugih vrijednosti za parametar REL: bookmark, copyright, glossary, help, home, index, toc, next, previous. Parametar REV također može imati sljedeće vrijednosti: autor, urednik, izdavač, vlasnik.</p>
<p><b>Tag <META>
</b></p>
<p>Razvoj novih specifikacija za jezik za označavanje hiperteksta traje dugo, a za to vreme kompanije koje proizvode pretraživače uspevaju da izdaju nekoliko verzija svojih proizvoda. Stoga bi se u naslovnu sekciju mogla dodati još jedna oznaka <META>koji dozvoljava autorima dokumenata da definiraju informacije koje nisu HTML.</p>
<p>Ove informacije koristi pretraživač za radnje koje nisu obuhvaćene trenutnom HTML specifikacijom. Tag <META>Neće vam trebati da kreirate svoje prve HTML dokumente, ali će vam svakako trebati kako vaše stranice postaju složenije.</p>
<p>primjer:</p>
<p><МЕТА HTTP-EQUIV="refresh" CONTENT="60"
RL="www.my_host.ru/homepage.html">
</p>
<p>Netscape Navigator i Internet Explorer pretraživači će tumačiti ovaj unos kao instrukciju da se sačeka 60 sekundi i zatim učita novi dokument. Ova instrukcija se često koristi prilikom promjene lokacije dokumenata. Mali dokument sa datim nizom može se ostaviti na staroj lokaciji dokumenta kako bi se automatski povezao na njegovu novu lokaciju.</p>
<p>Sljedeća linija:</p>
<p><МЕТА HTTP-EQUIV="refresh" CONTENT="60">
</p>
<p>nalaže pretraživaču da ponovo učita stranicu svakih 60 sekundi. Ovo može biti korisno ako se podaci na stranici često ažuriraju, na primjer, u slučaju praćenja kotacija dionica.</p>
<p>Upotreba elementa je postala veoma popularna <META>za neke tipične zadatke. Primjer je navođenje ključnih riječi koje koriste pretraživači. Ova metoda omogućava uključivanje dodatnih riječi u indeks dokumenta, koje možda nisu eksplicitno uključene u njegov sadržaj. Da biste to učinili, u oznaci <META>ime nekog svojstva je navedeno kao vrijednost parametra NAME. A koristeći parametar CONTENT, vrijednost ovog svojstva je naznačena, na primjer:</p>
<p><МЕТА NAME="author" CONTENT="Александр
Сергеев">
</p>
<p>HTML specifikacija ne definira nikakva specifična imena svojstava napisana u oznaci <META>... Međutim, postoji nekoliko često korištenih svojstava, na primjer, opis, ključne riječi, autor, roboti i drugi:</p>
<p><МЕТА NAME="description" CONTENT="Описание
возможностей языка HTML 4.0">
</p>
<p><МЕТА NAME="keywords" CONTENT ="тэг,
гипертекст, HTML, браузер">
</p>
<p>Date oznake <META>moglo je biti naznačeno, na primjer, za elektronsku verziju ove knjige.</p>
<p>Tag <META>može imati parametre navedene u tabeli. 1.2.</p>
<p><i> <span><b>Tabela 1.2.</b> Parametri oznake <META>
</span>
</i></p>
<p>Još jedna važna upotreba oznake <META>je indikacija kodiranja teksta. Dakle, za tekst na ruskom u Windows kodiranju, morate napisati sljedeći red:</p>
<p><МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=UTF-8">
</p>
<p><b><span>Ostali elementi zaglavlja</span>
</b></p>
<p>U naslovnom dijelu dokumenta mogu biti prisutne još dvije oznake - <STYLE>i<SCRIPT>. Их назначение связано с использованием
таблиц стилей в документе и записью скриптов. Эти вопросы подробно рассматриваются
во второй части книги.
</p>
<p><b> <span> Раздел документа
</span>
<span>BODY
</span>
</b></p>
<p>В этом разделе документа располагается его содержательная
часть. Большинство тэгов, рассматриваемых далее в этой главе и последующих,
должно располагаться в данном разделе документа. Здесь мы рассмотрим лишь некоторые
общие вопросы.
</p>
<p>Раздел документа BODY должен начинаться тэгом <BODY>
и завершаться тэгом </BODY>, между которыми располагается все содержимое
данного раздела. Строго говоря, наличие этих тегов не является обязательным,
поскольку браузеры могут определить начало содержательной части документа по
контексту. Однако их употребление рекомендуется.
</p>
<p>Тэг <BODY> имеет ряд параметров, ни один из которых
не является обязательным. Перечень параметров приведен в табл. 1.3.
</p>
<p><i> <span><b>Таблица 1.3.
</b> Перечень параметров тега <BODY>
</span>
</i></p>
<table border="1" width="550" height="427"><tr><td width="140" height="33"> <p><b>Параметр
</b></p>
</td>
<td width="400" height="33"> <p><b>Назначение
</b></p>
</td>
</tr><tr><td width="140" height="18" valign="top"> <p>ALINK
</p>
</td>
<td width="400" height="18" valign="top">
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>BACKGROUND
</p>
</td>
<td width="400" height="36" valign="top"> <p>Указывает
на URL-адрес изображения, которое используется в качестве фонового
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>BOTTOMMARGIN
</p>
</td>
<td width="400" height="36" valign="top"> <p>Устанавливает
границу нижнего поля документа в пикселах
</p>
</td>
</tr><tr><td width="140" height="18" valign="top"> <p>BGCOLOR
</p>
</td>
<td width="400" height="18" valign="top"> <p>Определяет
цвет фона документа
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>BGPROPERTIES
</p>
</td>
<td width="400" height="36" valign="top"> <p>Если установлено
значение FIXED, фоновое изображение не прокручивается
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>LEFTMARGIN
</p>
</td>
<td width="400" height="36" valign="top"> <p>Устанавливает
границу левого поля документа в пикселах
</p>
</td>
</tr><tr><td width="140" height="18" valign="top"> <p>LINK
</p>
</td>
<td width="400" height="18" valign="top"> <p>Определяет
цвет еще не просмотренной ссылки
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>RIGHTMARGIN
</p>
</td>
<td width="400" height="36" valign="top"> <p>Устанавливает
границу правого поля документа в пикселах
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>SCROLL
</p>
</td>
<td width="400" height="36" valign="top"> <p>Устанавливает
наличие или отсутствие полос прокрутки окна браузера
</p>
</td>
</tr><tr><td width="140" height="18" valign="top"> <p>TEXT
</p>
</td>
<td width="400" height="18" valign="top"> <p>Определяет
цвет текста
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>TOPMARGIN
</p>
</td>
<td width="400" height="36" valign="top"> <p>Устанавливает
границу верхнего поля документа в пикселах
</p>
</td>
</tr><tr><td width="140" height="18" valign="top"> <p>VLINK
</p>
</td>
<td width="400" height="18" valign="top"> <p>Определяет
цвет уже просмотренной ссылки
</p>
</td>
</tr></table><p>Использование параметров BACKGROUND и BGCOLOR, определяющих
фон документа, подробно рассмотрено в .
</p>
<p>Параметр BGPROPERTIES, принимающий единственное значение
FIXED, поддерживается только браузером Microsoft Internet Explorer.
</p>
<p>Параметры BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN и TOPMARGIN,
задающие расстояния в пикселах между краями текста и соответствующими краями
окна, а также параметр SCROLL, распознаются только браузером Microsoft Internet
Explorer, начиная с версии 4.0.
</p>
<p>Параметры ALINK, LINK, TEXT и VLINK определяют цвета ссылок
и текста документа.
</p>
<p>В языке HTML цвета определяются цифрами в шестнадцатеричном
коде. Цветовая система базируется на трех основных цветах - красном, зеленом
и синем - и обозначается RGB. Для каждого цвета задается шестнадцатеричное значение
в пределах от 00 до FF, что соответствует диапазону 0-255 в десятичном исчислении.
Затем эти значения объединяются в одно число, перед которым ставится символ
#. Например, число #800080 обозначает фиолетовый цвет. Чтобы не запоминать совокупности
цифр, вместо них можно пользоваться названиями цветов, которые приводятся в
приложении П2 . Ранние версии браузеров распознавали
только названия 16 стандартных цветов, отмеченных в приложении звездочками.
Современные версии браузеров распознают все 140 названий цветов.
</p>
<p><b><span> Форматирование текста
</span>
</b></p>
<p>В данном разделе будут рассмотрены возможности форматирования
отдельных символов текста документа.
</p>
<p><b> <span> Тэги уровня блока и последовательные
тэги
</span>
</b></p>
<p>Некоторые HTML-тэги, которые могут появляться в разделе
BODY, называют тэгами уровня блока (block level), в то время как другие последовательными
(inline) тэгами или, называя по-другому, тэгами уровня текста (text level),
хотя такое разделение тегов по уровням в известной степени условно.
</p>
<p>Различие уровней HTML-тэгов заключается в следующем: теги
уровня блока могут содержать последовательные теги и другие теги уровня блока,
тогда как последовательные теги содержат только данные и другие последовательные
тэги. Блоковые теги описывают более крупные структуры документов, по сравнению
с последовательными тэгами.
</p>
<p>По умолчанию теги этих видов размещаются в тексте описания
различным образом: теги уровня блока начинаются с новой строки, в то время как
последовательные - нет.
</p>
<p><b> <span> Логическое и физическое форматирование
</span>
</b></p>
<p>Для форматирования текста HTML-документов предусмотрена
целая группа тэгов, которую можно условно разделить на теги логического и физического
форматирования.
</p>
<p>Тэги логического форматирования обозначают (своими именами)
структурные типы своих текстовых фрагментов, такие, например, как программный
код (тэг <CODE>), цитата (тэг <CITE>), аббревиатура (тэг <ABBR>)
и т. д. (см. описания этих и других подобных тегов в следующем разделе). С помощью
тегов <EM> и <STRONG> можно, например, отметить отдельные фрагменты
как выделенные, или сильно выделенные. Заметим, что речь идет о структурной
разметке, которая не влияет на конкретное экранное представление фрагмента браузером.
Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием
браузеры отображают на экране определенным образом, заданным по умолчанию. Вид
отображения никак не связан со структурным типом фрагмента (т. е. именем тега
логического форматирования), но может быть легко переопределен.
</p>
<p>Тэги физического форматирования определяют формат отображения
указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора
документа). Например, для отображения фрагмента курсивом можно использовать
тег курсива <I>. Этот и другие, часто используемые теги физического форматирования
описаны ниже в разделе "Тэги физического форматирования текста"этой
главы.
</p>
<p>Между разработчиками HTML-документов долгое время шли споры
о преимуществах и недостатках того или иного подхода. С выходом спецификации
HTML 4.0 эти споры завершились в пользу применения логического форматирования,
поскольку был провозглашен принцип отделения структуры документа от его представления.
Действительно, только на базе логического форматирования можно гибко управлять
представлением документа, используя современные методы (основанные на таблицах
стилей, динамически изменяющихся документах и т. д.).
</p>
<p>Тем не менее, на настоящий момент может свободно использоваться
и физическое форматирование. В спецификации HTML 4.0 некоторые теги физического
форматирования не рекомендуются для применения, однако, пока они все еще поддерживаются
всеми браузерами. Заметим, что некоторые теги логического форматирования, призванные
заменить отдельные теги физического форматирования, распознаются не всеми браузерами,
что делает их применение крайне неудобным. Примером может служить логический
тег <DEL>, который рекомендуется использовать вместо физического тега
<STRIKE>.
</p>
<p>Рассматриваемые ниже теги относятся к тэгам уровня текста,
т. е. призваны, в основном, размечать небольшие группы символов. Некоторые теги
могут задавать разметку и на уровне блока.
</p>
<p><b> <span> Тэги логического форматирования текста
</span>
</b></p>
<p><b>Тэг <ABBR>
</b>
</p>
<p>Тэг <ABBR> отмечает свой текст как аббревиатуру (ABBReviation).
Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего
времени не поддерживается ни одним браузером.
</p>
<p><b>Тэг <ACRONYM>
</b>
</p>
<p>Тэг <ACRONYM>. Так же, как и тег <ABBR>, используется
для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы,
т. е. произносимые слова, состоящие из аббревиатур. Тег <ACRONYM> возможно
в будущем станет использоваться для невизуального отображения элементов, например
при речевом синтезе.
</p>
<p>Данный тег удобно использовать в сочетании с параметром
TITLE, в качестве значения которого можно указать полную форму записи аббревиатуры.
Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом
<ACRONYM>, будут выдавать полное наименование в виде появляющейся подсказки.
</p>
<p>Заметим, что тег <ACRONYM> распознается только браузером
Microsoft Internet Explorer. Пример:
</p>
<p><ACRONYM TITLE="Санкт-Петербургский государственный
институт точной механики и оптики"> СПбГИТМО</ACRONYM>
</span><span>
- один из ведущих технических вузов Санкт-Петербурга
</p>
<p><b>Тэг <CITE>
</b>
</p>
<p>Тэг <CITE> используется для отметки цитат или названий
книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно
выводится курсивом. Пример:
</p>
<p><CITE>Невское время</CITE> является
одной из наиболее популярных городских газет Санкт-Петербурга
</p>
<p><b>Тэг <CODE>
</b>
</p>
<p>Тэг <CODE> отмечает свой текст как небольшой фрагмент
программного кода. Как правило, отображается моноширинным шрифтом. Этот тег
не следует путать с тэгом <PRE>Являющимся элементом уровня блока, который
следует использовать для отметки больших фрагментов (листингов) кода.
</p>
<p>Например:
</p>
<p>Пример простейшего оператора языка программирования
C:<BR>
</p>
<p><CODE>puts("Hello, World!");</CODE>
</p>
<p>Есть еще одно различие в использовании тегов <CODE>
и <PRE>В коде программ часто бывает важно наличие нескольких идущих
подряд пробелов. Их отображение будет сохранено только при использовании тега
<PRE>.
</p>
<p><b> Тэг <DEL>
</b></p>
<p>Тэг <DEL> отмечает свой текст как удаленный. Этот
элемент полезно использовать для отметки изменений, вносимых в документ от версии
к версии. Тег <DEL> может использоваться как элемент уровня текста и как
элемент уровня блока.
</p>
<p>Тэг имеет два необязательных параметра: CITE и DATETIME.
Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего
причины удаления данного фрагмента.
</p>
<p>Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD,
определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой
пояс (Time Zone). Например:
</p>
<p>Последней принятой спецификацией языка разметки
HTML является версия <DEL DATETIME=1999-10-29T16:12:53+0.00>3.2</DEL>
4.0
</p>
<p>Текст, помеченный тэгом <DEL> обычно отображается
перечеркнутым текстом. В спецификации HTML 4.0 этому тэгу отдается предпочтение
перед тэгом физического форматирования <STRIKE> или <S>, обозначающих
перечеркнутый текст. Однако тег <DEL> </p>
<p><b>Тэг <DFN>
</b>
</p>
<p>Тэг <DFN> отмечает свой текстовый фрагмент как определение
(DeFinitioN). Например, этим тэгом можно отметить какой-либо термин, когда он
встречается в тексте в первый раз. Пример:
</p>
<p><DFN>Internet Explorer</DFN> - это
популярный Web-браузер
</p>
<p>Тэг <DFN> поддерживается только браузером Microsoft
Internet Explorer. Отображается по умолчанию курсивом.
</p>
<p><b> Тэг <INS>
</b></p>
<p>Тэг <INS> отмечает свой текст как вставку (INSertion).
Этот элемент полезно использовать для отметки изменений, вносимых в документ
от версии к версии. Тег <INS> может использоваться как элемент уровня
текста и как элемент уровня блока.
</p>
<p>Тэг имеет два необязательных параметра: CITE и DATETIME.
Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего
подробности внесенных дополнений.
</p>
<p>Параметр DATETIME указывает дату вставки в формате: YYYY-MM-DDThh:mm:ssTZD,
определяющем год, месяц, число, часы, минуты и секунды вставки, а также часовой
пояс (Time Zone).
</p>
<p>Текст, помеченный тэгом <INS>, обычно отображается
подчеркнутым текстом. Тег <INS> в настоящее время распознается только
браузером Microsoft Internet Explorer.
</p>
<p><b> Тэг <EM>
</b></p>
<p>Тэг <EM> (EMphasis - выделение, подчеркивание) используется
для выделения важных фрагментов текста. Браузеры обычно отображают такой текст
курсивом. Пример:
</p>
<p>Пример выделения <EM>отдельных слов</EM>
текста
</p>
<p> <I>.
</p>
<p><b> Тэг <KBD>
</b></p>
<p>Тэг <KBD> отмечает текст как вводимый пользователем
с клавиатуры. Обычно отображается моноширинным шрифтом, например:
</p>
<p>Чтобы запустить текстовый редактор, напечатайте: <KBD>notepad</KBD>
</p>
<p>Применение данного тега предпочтительнее применения тега
физического форматирования <TT>.
</p>
<p><b> Тэг <Q>
</b></p>
<p>Тэг <Q> отмечает короткие цитаты в строке текста.
В отличие от тега уровня блока <BLOCKQUOTE> при отображении не выполняется
отделение размеченного текста пустыми строками. Обычно отображается курсивом.
Тег <Q> (в отличие от <BLOCKQUOTE>) в настоящее время распознается
только браузером Microsoft Internet Explorer.
</p>
<p>Тэг имеет параметр CITE, в качестве значения которого можно
указать источник цитаты.
</p>
<p><b> Тэг <SAMP>
</b></p>
<p>Тэг <SAMP> отмечает текст как образец (SAMPle). Обычное
использование этого тега - отметка текста, выдаваемого программами (sample output).
Используется также для выделения нескольких символов моноширинным шрифтом.
</p>
<p>Применение данного тега предпочтительнее применения тега
физического форматирования <TT>. Например:
</p>
<p>В результате работы программы будет напечатано:
<SAMP>Hello, World!</SAMP>
</span>.
</p>
<p><b> Тэг <STRONG>
</b></p>
<p>Тэг <STRONG>, как правило, используется для выделения
важных фрагментов текста. Браузеры обычно отображают такой текст полужирным
шрифтом. Пример:
</p>
<p>Санкт-Петербург расположен в самой восточной оконечности
<STRONG>Финского залива</STRONG> в устье реки <STRONG>Невы<
/STRONG>
</p>
<p>Применение данного тега предпочтительнее применения тега
физического форматирования <B>. Тегом <STRONG> обычно размечают
более важные фрагменты текста, чем те, что размечены тэгом <EM>.
</p>
<p><b> Тэг <VAR>
</b></p>
<p>Тэг <VAR> отмечает имена переменных программ. Обычно
такой текст отображается курсивом. Пример:
</p>
<p>Задайте значение переменной <VAR>N</VAR>
</p>
<p>Отображение некоторых из примеров, приведенных при описании
тегов логического форматирования текста, показано на рис. 1.1. На рисунке видно,
как при наведении указателя мыши на текст, отмеченный тэгом <ACRONYM>,
выдается подсказка.
</p>
<p><i><b>Рис. 1.1.
</b>
</i> <i>Примеры форматирования текста
</i>
</p>
<p>Вы, наверное, обратили внимание на то, что некоторые элементы
дают одинаковый результат. Более того, часть элементов может никак не изменять
представление фрагмента текста на экране. Может возникнуть законный вопрос:
для чего создано такое разнообразие элементов форматирования?
</p>
<p>Ответ - в названии этой группы элементов. Они предназначены
для расстановки логических ударений, выделения логических частей и подчеркивания
сути высказываний. Их использование весьма актуально, поскольку, вероятно, в
ближайшем будущем возможности браузеров возрастут, например, станет возможен
поиск цитат на Web-пространстве, а может быть следующее поколение браузеров
научится читать документы вслух. Кроме того, авторам документов ничто не мешает
уже сегодня, применяя таблицы стилей, задать желаемое отображение для любого
из тэгов, переопределив значения по умолчанию.
</p>
<p> <b> <span>Тэги
физического форматирования текста
</span>
</b></p>
<p>Приведем описание тегов физического форматирования. Часть
из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным
выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако
они продолжают поддерживаться браузерами.
</p>
<p><b> Тэг </p>
<p>Тэг <B> отображает текст полужирным шрифтом. В большинстве
случаев рекомендуется вместо тега <B> использовать тег логического форматирования
<STRONG>. Например:
</p>
<p>Это <B>полужирный</B> шрифт.
</p>
<span> <img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/02.gif' height="435" width="401" loading=lazy loading=lazy></span>
<p><i><b>Рис. 1.2.
</b> Примеры физического форматирования
текста (браузером Netscape)
</i>
</p>
<p><b> Тэг <<span>I
>
</span>
</b></p>
<p>Тэг <I> отображает текст курсивом. Для большинства
случаев вместо этого тега рекомендуется использовать теги <EM>, <DFN>,
<VAR> или <CITE>, поскольку последние лучше отражают назначение
выделяемого текста. Например:
</p>
<p>Выделение <I>курсивом</I>
</p>
<p><b> Тэг <TT>
</b></p>
<p>Тэг <TT> отображает текст моноширинным шрифтом. Для
большинства случаев вместо этого тега лучше использовать теги <CODE>,
<SAMP> или <KBD>. Пример:
</p>
<p>Это <TT>моноширинный</TT> шрифт
</span>.
</p>
<p><b> Тэг <U>
</b></p>
<p>Тэг <U> отображает текст подчеркнутым. Отмененный
тэг. Вместо него рекомендуется использовать теги <STRONG> или <CITE>.
Например:
</p>
<p>Пример <U>подчеркивания</U> текста
</span>.
</p>
<p><b>Тэги <STRIKE> и <S>
</b>
</p>
<p>Тэги <STRIKE> и <S> отображают текст, перечеркнутый
горизонтальной линией. Отмененный тэг. Вместо него следует использовать тег
<DEL>. Например:
</p>
<p>Пример <STRIKE>зачеркнутого</STRIKE>
текста
</span>.
</p>
<p>В настоящее время тег <DEL> поддерживается не всеми
браузерами, поэтому пока рекомендуется использовать <DEL> в сочетании
с тэгом <STRIKE>. А именно, внутрь тэга-контейнера <DEL> можно вложить
пару тегов
</p>
<p><STRIKE>...</STRIKE>
.
</p>
<p><b>Тэг <BIG>
</b>
</p>
<p>Тэг <BIG> выводит текст шрифтом большего (чем непомеченная
часть текста) размера. Вместо данного элемента лучше использовать <STRONG>
или теги заголовков, например, <H3> <BIG></p>
<p>Шрифт <BIG>большего</BIG> размера
</span>.
</p>
<p><b> Тэг <SMALL>
</b></p>
<p>Тэг <SMALL> выводит текст шрифтом меньшего размера.
Поскольку в HTML нет тэга, противоположного по действию тэгу <EM>, то
для этих целей можно применять тег <SMALL>. Большинство браузеров поддерживают
вложенные теги <SMALL>, однако использовать такой подход не рекомендуется.
Например:
</p>
<p>Шрифт <SMALL>меньшего</SMALL> размера
</span>.
</p>
<p><b>Тэг <SUB>
</b>
</p>
<p>Тэг <SUB> сдвигает текст ниже уровня строки и выводит
его (если возможно) шрифтом меньшего размера. Удобно использовать для математических
индексов. Например:
</p>
<p>Пример шрифта для <SUB>нижнего</SUB>
индекса
</span>.
</p>
<p><b> Тэг <SUP>
</b></p>
<p>Тэг <SUP> сдвигает текст выше уровня строки и выводит
его (если возможно) шрифтом меньшего размера. Удобно использовать для задания
степеней чисел в математике. Например:
</p>
<p>Пример шрифта для <SUP>верхнего</SUP>
индекса
</span>.
</p>
<p><b> Тэг <BLINK>
</b></p>
<p>Тэг <BLINK> отображает мигающий текст. Этот тег не
входит в спецификацию HTML и поддерживается только браузером Netscape. Опытные
разработчики крайне редко прибегают к использованию этого тэга, поскольку наличие
на странице мигающих символов раздражает многих пользователей.
</p>
<p><b> <span>Тэг
</b></p>
<p>Тэг-контейнер <SPAN> является аналогом тега уровня
блока <DIV>. Может использоваться в тех случаях, когда требуется отметить
фрагмент текста для задания его свойств, и при этом не удается использовать
никакой другой структурный тег форматирования.
</p>
<p>Браузер Microsoft Internet Explorer дополнительно разрешает
использование следующих параметров тэга: DIR, DATAFLD, DATAFORMATAS, DATASRC.
Описание параметров можно найти во второй части книги.
</p>
<span> <img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/03.gif' height="240" width="353" loading=lazy loading=lazy></span>
<p><i><b>Рис. 1.3.
</b> Использование вложенных тегов форматирования
текста
</i>
</p>
<p>Тэги форматирования могут быть вложенными друг в друга.
При этом нужно внимательно следить, чтобы один контейнер находился целиком в
другом контейнере. На рис. 1.3 показан пример использования вложения элемента
курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода:
</p>
<p>Это <B>полужирный</B> шрифт.
</p>
<p>
<p>Это <I>курсив</I>.
</p>
<p>
<p>А здесь текст <B><I>полужирный и курсивный</I></В>
</p>
<p><b> Тэг <FONT>
</b></p>
<p>Тэг <FONT> указывает параметры шрифта. Он относится
к тэгам физического форматирования уровня текста.
</p>
<p>Назначение параметров шрифта непосредственно в тексте документа
нарушает основную идею разделения содержательной части документа и описания
формы представления документа. Поэтому в спецификации HTML 4.0 данный тэг, а
также тег <BASEFONT> отнесены к отмененным. Их дальнейшее применение не
рекомендуется.
</p>
<p>Несмотря на эти грозные предупреждения, видимо, для самых
простых документов физическое форматирование можно считать допустимым. Кроме
того, начинать обучение основам форматирования проще всего именно с правил непосредственного
указания форматов элементов. До стилевого оформления начинающий разработчик
должен еще дорасти.
</p>
<p>Тэг <FONT> относится к последовательным элементам,
поэтому не может включать в себя элементы уровня блока, например, <P>Или <TABLE>.
</p>
<p>Для тега могут задаваться следующие параметры: FACE, SIZE
и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных
параметров: POINT-SIZE и WEIGHT, описание которых опускаем.
</p>
<ul><p>FACE
</p>
<p>Параметр FACE служит для указания типа шрифта, которым
программа просмотра пользователя будет выводить текст (если такой шрифт
имеется на компьютере). Значением данного параметра служит название шрифта,
которое должно в точности совпадать с названием шрифта, имеющего у пользователя.
Если такого шрифта не будет найдено, то данное указание будет проигнорировано
и будет использован шрифт, установленный по умолчанию.
</p>
<p>Можно указать как один, так и несколько названий шрифтов,
разделяя их запятыми. Это весьма полезное свойство, так как в разных системах
могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным
качеством является задание предпочтения использования шрифтов. Список шрифтов
просматривается слева направо. Если на компьютере пользователя нет шрифта,
указанного в списке первым, то делается попытка найти следующий шрифт и
т. д.
</p>
<p>Приведем пример использования параметра FACE:
</p>
<p><HTML> <HEAD>
</p>
<p><TITLE>Назначение шрифтов</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p><BR>
</p>
<p><FONT FACE="Verdana", "Arial",
"Helvetica">
</p>
<p>Пример задания названия шрифта.
</p>
<p></FONT>
</p>
<p></BODY>
</p>
<p></HTML>
</p>
<p>На рис. 1.4 показано отображение примера браузером
Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana,
при его отсутствии будет использован шрифт Arial и т. д.
</p>
</ul><p><img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/04.gif' height="222" width="369" loading=lazy loading=lazy></p>
<p><i><b>Рис. 1.4.
</b> Отображение примера браузером Netscape
</i>
</p>
<ul><p>SIZE
</p>
<p>Этот параметр служит для указания размеров шрифта в
условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой
программы просмотра. Принято считать, что размер "нормального"
шрифта соответствует значению 3.
</p>
</ul><p>Настройки размеров шрифта, используемых по умолчанию, а
также величины абсолютного изменения размеров шрифта, зависят от браузеров.
На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты,
используемые по умолчанию.
</p>
<p>Размер шрифта указывается как абсолютной величиной (SIZE=2),
так и относительной (SIZE=+1). Последний способ часто используется в сочетании
с заданием базового размера шрифта с помощью тега <BASEFONT>.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>При указании размеров шрифтов записи типа "2"
и "+2" (в отличие от большинства языков программирования, в которых
унарный знак "+" можно опускать) дают принципиально разный результат.
</span>
</i></p>
<p>Приведем пример, в котором использованы различные способы
назначения размеров шрифтов. Отображение примера показано на рис. 1.6.
</p>
<p><br><img src='https://i1.wp.com/webnav.ru/books/html4/html_rules/05.gif' width="100%" loading=lazy loading=lazy></p>
<p><i><b>Рис. 1.5.
</b> Окно настройки параметров шрифтов браузера
Netscape
</i>
</p>
<p><br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/06.gif' width="100%" loading=lazy loading=lazy></p>
<p><i><b>Рис. 1.6.
</b> Назначение размеров шрифтов
</i>
</p>
<blockquote>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Назначение размеров шрифтов</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p><FONT SIZE=1>Шрифт размера 1</FONT><BR>
</p>
<p><FONT SIZE=-1>Шрифт размера 2</FONT><BR>
</p>
<p><FONT SIZE=3>Шрифт размера 3</FONT><BR>
</p>
<p><FONT SIZE=4>Шрифт размера 4</FONT><BR>
</p>
<p><FONT SIZE=5>Шрифт размера 5</FONT><BR>
</p>
<p><FONT SIZE=+3>Шрифт размера 6</FONT><BR>
</p>
<p><FONT SIZE=7>Шрифт размера 7</FONT><BR>
</p>
<p></BODY>
</p>
<p></HTML>
</p>
</blockquote>
<ul><p>COLOR
</p>
<p>Этот параметр устанавливает цвет шрифта, который может
задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример
документа с разноцветным текстом.
</p>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Выбор цвета шрифта</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p><FONT COLOR=green>Текст зеленого цвета</FONT><BR>
</p>
<p><FONT COLOR=#FF0000>Текст красного цвета</FONT><BR>
</p>
<p></BODY>
</p>
<p></HTML>
</p>
</ul><p><b> Тэг <BASEFONT>
</b></p>
<p>Тэг <BASEFONT> используется для указания размера,
типа и цвета шрифта, используемого в документе по умолчанию. Эти значения обязательны
для всего документа, однако могут в нужных местах переопределяться с помощью
тега <FONT>. После закрывающего тега </FONT> действие тега <BASEFONT>
восстанавливается. Значения параметров шрифтов, используемых по умолчанию, могут
неоднократно переопределяться в документе, т. е. тег <BASEFONT> может
появляться в документе любое количество раз.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Тэг <BASEFONT> может появляться также и в разделе
<HEAD> документа.
</span>
</i></p>
<p>Заметим, что для тега <BASEFONT> не существует закрывающего
тэга.
</p>
<p>В качестве параметров могут использоваться точно такие
же параметры, что и
для тега <FONT>, а именно:
FACE, SIZE и COLOR. Назначение и правила записи
параметров
аналогичны.
</p>
<p><i> <b><span>Примечание
</b>
</span>
</i></p>
<p><i> <span>Браузер Netscape не допускает применение параметра
FACE тега <BASEFONT>.
</span>
</i></p>
<p>Приведем пример использования тега <BASEFONT>.
</p>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Назначение размеров шрифтов</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p>Текст, записанный шрифтом по умолчанию.
</p>
<p><BASEFONT SIZE=2>
<p>Шрифт размера 2.
</p>
<p><BASEFONT SIZE=4>
</p>
<p>
<p>Шрифт размера 4.
</p>
<p>
<p> <TABLE BORDER=1>
</p>
<p> <TR>
</p>
<p> <TD>Текст внутри ячейки
таблицы</TD>
</p>
<p> </TR>
</p>
<p> </TABLE>
</p>
<p><P>Текст после таблицы
</p>
<p></BODY>
</p>
<p></HTML>
</p>
<p>В приведенном примере дважды переопределяется размер шрифта,
используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается
равным 2, далее - 4. Обратите внимание на отображение данного примера (рис.
1.7). Видно, что для таблиц назначение тега <BASEFONT> не действует. Это
характерно для многих браузеров, хотя формально нарушает идею применения тэга.
</p>
<span> <br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/07.gif' width="100%" loading=lazy loading=lazy></span>
<p><i><b>Рис. 1.7.
</b> Отображение примера С ТЭГОМ <BASEFONT>
(браузером Netscape)
</i>
</p>
<p><b> <span> Форматирование HTML-документа
</span>
</b></p>
<p><b> <span> Разделение на абзацы
</span>
</b></p>
<p>Любые тексты, будь то школьное сочинение, заметка в газете
или техническое описание устройства имеют определенную структуру. Элементами
такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др.
</p>
<p>Одним из первых правил составления практически любых документов
является разбиение его текста на отдельные абзацы, выражающие законченную мысль.
HTML-документы не являются исключением из этого правила. При создании документов
с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа
перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>.
В HTML-документах символы перевода строки не приводят к образованию нового абзаца.
</p>
<p>Язык HTML предполагает, что автор документа ничего не знает
о компьютере своего читателя. Читатель вправе установить любой размер окна и
пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса
в строке определяется только программой просмотра и установками конечного пользователя.
Поскольку символы перевода строки оригинального документа игнорируются, то текст,
отлично смотревшийся в окне редактора автора документа, может превратиться в
сплошной неудобочитаемый текст в окне программы просмотра.
</p>
<p>Избежать этой неприятности позволяет применение специального
тега разделения на абзацы <P>Перед началом каждого абзаца текста следует
поместить тег <P>Закрывающий тег </P> не обязателен. Браузеры
обычно отделяют абзацы друг от друга пустой строкой.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Браузеры обычно интерпретируют несколько стоящих подряд
тегов абзаца <P>Как один. То же самое относится и к тэгу перевода строки
<BR>. Поэтому создать несколько пустых строк при помощи этих тегов не
удается.
</span>
</i></p>
<p>Тэг <P>Может задаваться с параметром горизонтального
выравнивания ALIGN. Возможные значения параметра приведены в табл. 1.4. По умолчанию
выполняется выравнивание по левому краю.
</p>
<p><i> <span><b>Таблица 1.4.
</b>Значения параметра ALIGN
</span>
</i></p>
<table border="1" width="550"><tr><td width="185"> <p><b><span>Значение параметра ALIGN
</span>
</b></p>
</td>
<td width="355"> <p><b>Действие
</b></p>
</td>
</tr><tr><td width="185" valign="top"> <p>LEFT
</p>
</td>
<td width="355" valign="top"> <p>Выравнивание текста по
левой границе окна браузера
</p>
</td>
</tr><tr><td width="185" valign="top"> <p>CENTER
</p>
</td>
<td width="355" valign="top"> <p>Выравнивание по центру
окна браузера
</p>
</td>
</tr><tr><td width="185" valign="top"> <p>RIGHT
</p>
</td>
<td width="355" valign="top"> <p>Выравнивание по правой
границе окна браузера
</p>
</td>
</tr><tr><td width="185" valign="top"> <p>JUSTIFY
</p>
</td>
<td width="355" valign="top"> <p>Выравнивание по ширине
(по двум сторонам)
</p>
</td>
</tr></table><p>Заметим, что выравнивание по ширине (ALIGN = JUSTIFY) долгое
время не поддерживалось браузерами. Во многих описаниях языка HTML для значений
параметра выравнивания указывается только три варианта (LEFT, CENTER и RIGHT).
В настоящее время все популярные браузеры умеют выполнять выравнивание по ширине.
Некоторые проблемы создания документов с выравниванием по ширине рассмотрены
также в главе 8.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Отсутствие выравнивания по ширине в настоящее время
кажется удивительным. Этот режим применяется очень часто для печатных изданий.
Достаточно взять в руки любую газету или внимательно присмотреться к абзацам
данной книги - все они выровнены по ширине. Однако для HTML-документов до последнего
времени выравнивание по ширине не допускалось. Всего лишь пару лет назад ни
один браузер не имел такого режима. Так, читатели, до сих пор использующие браузер
Netscape версии 3.x, не смогут увидеть ровные строчки в документе. Можно попытаться
предугадать, какие же еще возможности появятся в будущем у браузеров, сравнив
возможности мощных текстовых редакторов и современных браузеров. Примером не
реализованных пока возможностей может являться автоматическая расстановка переносов
и пр.
</span>
</i></p>
<p><b> Перевод строки
</b></p>
<p>При отображении текстовых документов в браузере место переноса
строки в пределах абзаца определяется автоматически в зависимости от размера
шрифтов и размера окна просмотра. Перенос строки может осуществляться только
по символам-разделителям слов (например, пробелам). Иногда в документах требуется
задать принудительный перевод строки, реализующийся независимо от параметров
настроек браузера. Для этого служит тег принудительного перевода строки <BR>,
который не имеет соответствующего закрывающего тэга. Включение тега <BR>
в текст документа обеспечит размещение последующего текста с начала новой строки.
Например, такой подход может использоваться для создания структур типа списков
без использования специальных тегов разметки списка. Или, например, без данного
тега не обойтись для отображения стихотворений и т. п.
</p>
<p>Приведем пример использования принудительного перевода
строки (рис. 1.8):
</p>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Использование принудительного перевода
строки</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p>Над омраченным Петроградом<BR>
</p>
<p>Дышал ноябрь осенним хладом.<BR>
</p>
<p>Плеская шумною волной<BR>
</p>
<p>В края своей ограды стройной,<BR>
</p>
<p>Нева металась, как больной<BR>
</p>
<p>В своей постеле беспокойной.
</p>
<p>
<p><CITE>А.С.Пушкин. Медный всадник</CITE>
</p>
<p></BODY>
</p>
<p></HTML>
</p>
<span> <br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/08.gif' width="100%" loading=lazy loading=lazy></span>
<p><i><b>Рис. 1.8.
</b> Тег <BR> можно использовать для
принудительного перевода строки
</i>
</p>
<p>В отличие от тега абзаца <P>При использовании тега
<BR> не будет образована пустая строка.
</p>
<p>Использование тега <BR> требует осторожности - возможна
ситуация, когда браузер уже сделал перевод строки за одно-два слова до того,
как встретил ваш тег <BR>. Это бывает в случае, если ширина окна программы
просмотра читателя меньше, чем тот же параметр программы, с помощью которой
вы тестировали ваш документ. При этом может получиться, что в строке посреди
абзаца останется только одно слово, нарушая тем самым красоту компоновки документа.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>При использовании тега <BR> для разбивки текста,
обтекающего изображения или таблицы, можно задавать параметр CLEAR, прекращающий
обтекание текста. Об этом можно прочитать в главах 3 и 4.
</span>
</i></p>
<p><b> Тэги <NOBR>u <WBR>
</b></p>
<p>Бывают ситуации, когда требуется выполнить операцию противоположного
назначения - запретить перевод строки. Для этого существует тэг-контейнер <NOBR>.
Текст, размеченный этим тэгом, будет гарантированно располагаться в одной строке,
независимо от ее длины. Если при этом получающаяся строка будет выходить за
пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Для обеспечения неразрывности текста, располагаемого
в ячейках таблиц, существует специальный параметр NOWRAP тега <TD>. Об
этом можно узнать в главе 4.
</span>
</i></p>
<p>Размечая текст с помощью тега неразрывной строки <NOBR>
можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру
читателя место возможного перевода строки, что будет выполнено только при необходимости
(так называемый "мягкий" перевод строки). Это можно осуществить, поставив
в нужном месте текста тег <WBR> (Word BReak), который так же, как и тег
<BR>, не нуждается в закрывающем тэге.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Тэг <WBR> вообще не поддерживается браузером
Netscape. Браузер Microsoft Internet Explorer распознает этот тег только в тексте,
размеченном тэгами <NOBR>.
</span>
</i></p>
<p><b> <span> Заголовки внутри HTML-документа
</span>
</b></p>
<p>Наряду с названием всего документа, на Web-странице могут
использоваться заголовки для отдельных частей документа. Эти заголовки могут
иметь шесть различных уровней (размеров) и представляют собой фрагменты текста,
которые выделяются на экране при отображении страницы браузером.
</p>
<p>Для разметки заголовков используются теги <HI>, <H2>,
<H3>, <H4>, <H5> и <H6>. Эти теги требуют соответствующего
закрывающего тэга. Заголовок с номером 1 является самым крупным (заголовок верхнего
уровня), а с номером 6 - самым мелким. Теги заголовка являются элементами уровня
блока, поэтому с помощью них нельзя размечать отдельные слова текста для увеличения
их размера. При использовании тегов заголовков осуществляется вставка пустой
строки до и после заголовка, поэтому тегов абзаца или перевода строки здесь
не требуется.
</p>
<p>Тэги заголовков могут задаваться с параметром горизонтального
выравнивания ALIGN. Возможные значения параметра совпадают с параметрами выравнивания
тега абзаца <P> (см. табл. 1.4).
</p>
<p>Пример использования заголовков разного уровня с различным
выравниванием (рис. 1.9):
</p>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Примеры заголовков</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p><H1>Заголовок размера 1</H1>
</p>
<p><H2>Заголовок размера 2</H2>
</p>
<p><H3 ALIGN=CENTER>Заголовок размера 3</H3>
</p>
<p><H4 ALIGN=RIGHT>Заголовок
размера 4</H4>
</p>
<p><H5>Заголовок размера 5</H5>
</p>
<p><H6>Заголовок размера 6</H6>
</p>
<p>Основной текст документа
</p>
<p></BODY>
</p>
<p></HTML>
</p>
<span> <br><img src='https://i1.wp.com/webnav.ru/books/html4/html_rules/09.gif' width="100%" loading=lazy loading=lazy></span>
<p><i><b>Рис. 1.9.
</b> Отображение заголовков различного размера
</i>
</p>
<p><b> <span> Горизонтальные линии
</span>
</b></p>
<p>Другим методом разделения документа на части является проведение
горизонтальных линий. Они визуально подчеркивают законченность той или иной
области страницы. Сейчас часто используют рельефную, вдавленную линию, чтобы
обозначить "объемность" документа.
</p>
<p>Тэг <HR> позволяет провести рельефную горизонтальную
линию в окне большинства программ просмотра. Этот тег не является контейнером,
поэтому не требует закрывающего тэга. До и после линии автоматически вставляется
пустая строка. Параметры тега <HR> представлены в табл. 1.5.
</p>
<p><i> <span><b>Таблица 1.5.
</b> Параметры тега <HR>
</span>
</i></p>
<p>Пример:
</p>
<p><HR ALIGN=CENTER WIDTH=50% NOSHADE>
</p>
<p>В этом примере задается горизонтальная линия, которая занимает
половину ширину окна просмотра и располагается посередине окна. Заметим, что
параметры выравнивания имеют смысл только тогда, когда линия занимает не всю
ширину окна.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Браузер Netscape не позволяет использовать параметр
COLOR тега <HR>.
</span>
</i></p>
<p>Использование предварительно
отформатированного текста
</p>
<p>Как видно в приведенных выше разделах, для разбивки текста
по абзацам и обеспечения принудительного перевода строки следует пользоваться
специальными тэгами. Однако бывают случаи, когда в HTML-документ необходимо
включить текст, уже имеющий форматирование, выполненное традиционным способом
при помощи символов перевода строки, необходимого количества пробелов, символов
табуляции и т. д. Для решения таких задач предусмотрен специальный тэг-контейнер
<PRE>Определяющий предварительно форматированный (п
реформатированный)
текст.
</p>
<p>Текст, размеченный тэгом <PRE>Будет отображаться
в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения
всегда будет использоваться моноширинный шрифт. При этом вы сможете в большей
степени контролировать вывод документа программой просмотра, правда, за счет
некоторой потери в гибкости.
</p>
<p>Одним из вариантов использования этого тега являются таблицы,
построенные без применения специальных тегов разметки таблиц. Другим важным
</p>
<p>применением является вывод на экран больших блоков программного
кода (Java, C++ и т. п.), не позволяющий браузеру переформатировать их.
</p>
<p>Текст внутри контейнера <PRE>Может содержать элементы
форматирования уровня текста, кроме следующих: <IMG>, <OBJECT>,
<APPLET>, <BIG>, <SMALL>, <SUB>, <SUP>, <FONT>,
<BASEFONT>. Недопустимо внутри преформатированного текста задавать элементы
форматирования уровня блока, например, теги заголовков. Тег абзаца по логике
вещей также не должен встречаться внутри преформатированного текста, однако
если встречается, то будет реализовывать переход на новую строку (без образования
пустой).
</p>
<p><i> <b> Примечание
</b>
</i></p>
<p><i> <span>Тэг <PRE>Имеет необязательный параметр WIDTH,
назначение которого - указывать браузеру максимальную длину строки преформатированного
текста. В зависимости от этого значения браузер мог бы подобрать нужный шрифт
и/или отступ для оптимального отображения преформатированного текста. В качестве
значения по умолчанию предлагалось использовать 80. Другими рекомендованными
значениями являются 40 и 132. Заметим, что читателям, имеющим значительный опыт
работы со средствами вычислительной техники, эти числа говорят о многом. На
деле же современные браузеры игнорируют значение параметра WIDTH.
</span>
</i></p>
<p>Существуют еще несколько тэгов, решающих близкую по смыслу
задачу. К ним относятся теги <ХМР>, <PLAINTEXT>И <LISTING>.Все три упомянутых тега в спецификации HTML 4.0 отмечены как устаревшие.
Это означает, что в будущих версиях браузеры прекратят их поддержку. Вместо
этих тегов рекомендуется использовать тег <PRE>.
</p>
<p><b> Тэг<<span>DIV
>
</span>
</b></p>
<p>Тэг-контейнер <DIV> является элементом уровня блока,
служащим для выделения фрагмента документа. Целью этого выделения является управление
параметрами данного фрагмента, которое обычно выполняется с помощью назначения
стилей. Приведем пример:
</p>
<p><DIV STYLE="color: green">
</p>
<p>(Фрагмент документа)
</p>
<p></DIV>
</p>
<p>В этом примере фрагмент HTML-документа обрамляется тэгами
<DIV> и </DIV> для задания некоторых его свойств. В данном случае
все текстовые элементы выделенного фрагмента будут отображаться зеленым (green)
цветом. Аналогом тега <DIV> уровня текста является элемент .
</p>
<p>Заметим, что непосредственное назначение стилевых свойств
отдельного фрагмента так, как это сделано в примере, использовать не желательно
в соответствии с концепцией разделения структуры документа и его представления.
Следует использовать таблицы стилей, речь о которых пойдет во второй части книги.
</p>
<p><b> Тэг <CENTER>
</b></p>
<p>Тэг-контейнер <CENTER> предназначен для горизонтального
выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень
блока и его полезно использовать для центрирования таких элементов, как, например,
таблиц, так как они не могут быть центрированы назначением
</p>
<p>ALIGN=CENTER тега <TABLE>.
</p>
<p>По существу тег <CENTER> является краткой формой
следующей записи: <DIV ALIGN=CENTER>. Дальнейшее использование тега <CENTER>
по причинам, отмеченным в предыдущем разделе, также нежелательно.
</p>
<p><b> <span> Включение комментариев в документ
</span>
</b></p>
<p>В HTML-документ можно включать комментарии, которые не
будут видны читателю. Они могут состоять из произвольного числа строк и должны
начинаться тэгом <!-- и заканчиваться тэгом -->. Все, что заключено внутри
этих тэгов, при просмотре страницы не будет отображаться на экране.
</p>
<b> По возможности поясняйте свой код, где это необходимо.
</b> <p>Используйте комментарии, чтобы пояснить свой код: что он делает, за что отвечает, и почему используется выбранное решение. </p><p>
(Этот пункт не обязателен, потому что нет смысла ожидать, что код всегда будет хорошо задокументирован. Полезность комментирования зависит от сложности проекта и может различаться для HTML и CSS кода.) </p><h4>Задачи</h4> <b> Отмечайте задачи для списка дел с помощью <b>TODO
</b>
.
</b> <p>Отмечайте задачи с помощью ключевого слова <b>TODO
</b>
. не используйте другие часто встречающиеся форматы, такие как <b>@@
</b>
. </p><p>Заключайте контакты (имя пользователя или список адресатов) в круглые скобки: <b>TODO(контакт)
</b>
. </p><p>Описывайте задачу после двоеточия, например: <b>TODO: Задача
</b>
. </p><p><b>Рекомендуется:
</b> {# TODO(Ivan Ivanov): Разобраться с центровкой #}
<center>Тест</center>
<br><b>Рекомендуется:
</b> <!-- TODO: Убрать необязательные теги -->
<ul>
<li>Огурцы</li>
<li>Помидоры</li>
</ul>
</p><h3>Правила оформления HTML</h3><h4>Тип документа</h4> <b> Используйте HTML5.
</b> <p>
(Рекомендуется использовать HTML с типом контента <b>text/html
</b>
. Не используйте XHTML, так как application/xhtml+xml (англ.) , хуже поддерживается браузерами и ограничивает возможность оптимизации.) </p><h4>Валидность HTML</h4> <b> По возможности используйте валидный HTML.
</b> <p>Используйте валидный HTML код, кроме случаев, когда использование не позволяет достичь размера файла, необходимого для нужного уровня производительности. </p><p> W3C HTML validator (англ.) чтобы проверить валидность кода. </p><p>Валидность - это важное и при этом измеряемое качество кода. Написание валидного HTML способствует изучению технических требований и ограничений и обеспечивает правильное использование HTML. </p><p><b><span>Не рекомендуется:
</span>
</b> <title>Проверка</title>
<article>Просто проверка
<br><b>Рекомендуется:
</b> <!DOCTYPE html>
<meta charset="utf-8">
<title>Проверка</title>
<article>Просто проверка.</article>
</p><h4>Семантика</h4> <b> Используйте HTML так, как это было задумано.
</b> <p>Используйте элементы (Иногда неверно называемые “тегами”) по назначению: заголовки для заголовков, <b>p
</b>
для абзацев, <b>a
</b>
для ссылок и т.д. </p><p>Это облегчает чтение, редактирование и поддержку кода. </p><h4>Альтернатива для мультимедиа</h4> <b> Всегда указывайте альтернативное содержимое для мультимедиа.
</b> <p>Постарайтесь указать альтернативное содержимое для мультимедиа: например для картинок, видео или анимаций, заданных с помощью <b>canvas
</b>
. Для картинок это осмысленный альтернативный текст (<b>alt
</b>
), а для видео и аудио расшифровки текста и подписи если это возможно. </p><p>Альтернативное содержимое может помочь людям с с ограниченными возможностями. Например человеку со слабым зрением сложно понять, что на картинке если для нее не задан <b>@alt
</b>
. Другим людям может быть тяжело понять о чем говорится в видео или аудио записи. </p><p>
(Если для картинки <b>alt
</b>
избыточен, или она используется только в декоративных целях в местах, где нельзя использовать CSS, используйте пустой альтернативный текст <b>alt=""
</b>
) </p><h4>Разделение ответственности</h4> <b> Разделяйте структуру, оформление и поведение.
</b> <p>Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму. </p><p>Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение - в скрипты. </p><p>Старайтесь сократить их пересечения к минимуму, включая в шаблоны минимальное количество файлов стилей и скриптов. </p><p>Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов. </p><p><b><span>Не рекомендуется:
</span>
</b> <!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML Отстой</h1>
<p>Я об этом и раньше где-то читал, но теперь точно все ясно:
<u>HTML - полная фигня!!1</u>
<center>Не могу поверить, что для того чтобы изменить оформление,
нужно каждый раз все переделывать заново. </center>
<br><b>Рекомендуется:
</b> <!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>Мой новый CSS дизайн</h1>
<p>Я читал об этом и раньше, но наконец-то сделал сам:
Использую принцип разделения ответственности и не пихаю оформление в HTML
<p>Как круто!
</p><h4>Ссылки-мнемоники</h4> <b> Не используйте ссылки-мнемоники.
</b> <p>Единственное исключение из этого правила - служебные символы HTML (например <b><
</b>
и <b>&
</b>
) а так же вспомогательные и “невидимые” символы (например неразрывный пробел). </p><h4>Необязательные теги</h4> <b> Не используйте необязательные теги. <span><b> (не обязательно)
</b>
</span>
</b> <p>Для уменьшения размера файлов и лучшей читаемости кода можно опускать необязательные теги. В спецификации HTML5 (англ.) есть список необязательных тегов. </p><p>
(Может потребоваться некоторое время для того, чтобы этот подход начал использоваться повсеместно, потому что это сильно отличается от того, чему обычно учат веб-разработчиков. С точки зрения, согласованности, и простоты кода лучше всего опускать все необязательные теги, а не некоторые из них). </p><p><b><span>Не рекомендуется:
</span>
</b> <!DOCTYPE html>
<html>
<head>
<title>Тратим байты - тратим деньги.</title>
</head>
<body>
</body>
</html>
<br><b>Рекомендуется:
</b> <!DOCTYPE html>
<title>Байты-деньги!</title>
<p>Так-то
</p><h4>Атрибут "type"</h4> <b> Не указывайте атрибут <b>type
</b>
при подключении стилей и скриптов в документ.
</b> <p>Не используйте атрибут <b>type
</b>
при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript). </p><p>Указывать атрибут <b>type
</b>
в данном случае не обязательно потому что HTML5 использует text/css (англ.) и text/javascript (англ.) по умолчанию. Это будет работать даже в старых браузерах. </p><p><b><span>Не рекомендуется:
</span>
</b> <link rel="stylesheet" href="http://www.google.com/css/maia.css"
type="text/css">
<br><b>Рекомендуется:
</b> <link rel="stylesheet" href="http://www.google.com/css/maia.css">
<br><b><span>Не рекомендуется:
</span>
</b> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"
type="text/javascript"></script>
<br><b>Preporučeno:</b> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
</p><h3>Pravila HTML formatiranja</h3><h4>Formatiranje</h4>Dodijelite novi red za svaki blok, tablicu ili element liste i uvucite svaki podređeni element. <p>Bez obzira na stilove specificirane za element (CSS vam omogućava da promijenite ponašanje elementa pomoću svojstva <b>displej</b>), premotajte svaki blok ili element tabele u novi red.</p><p>Također, uvucite sve elemente ugniježđene unutar bloka ili elementa tabele.</p><p>(Ako imate problema sa razmakom između stavki liste, možete staviti sve <b>li</b> elemenata u jednoj liniji. Lintu [uslužni program za provjeru kvaliteta koda cca. per.] u ovom slučaju se preporučuje izdavanje upozorenja umjesto greške.</p>
</blockquote>
<br><b>Preporučeno:</b> <ul>
<li>Maša <li>Glasha <li>Cheburash</ul>
<br><b>Preporučeno:</b> <table>
<thead>
<tr>
<th scope="col">Profit <th scope="col">Porez <tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>
</p><h3>CSS stilska pravila</h3><h4>CSS validnost</h4> <b>Koristite važeći CSS kad god je to moguće.</b> <p>Osim ako vam nije potreban kod zavisan od pretraživača ili greške validatora, koristite važeći CSS.</p><p>Koristite alate kao što je W3C CSS Validator da potvrdite svoj kod.</p><p>Valjanost je važan, ali mjerljiv kvalitet koda. Pisanje važećeg CSS-a pomaže vam da se riješite suvišnog koda i osigurava da se vaši stilovi pravilno koriste...</p><h4>Identifikatori i nazivi klasa</h4> <b>Koristite generička ili smislena imena klasa i identifikatore.</b> <p>Umjesto da koristite šifre, ili opisujete izgled elementa, pokušajte izraziti značenje njegovog stvaranja u nazivu klase ili identifikatora, ili mu dajte ime predloška...</p><p>Imena predložaka su jednostavno varijacija imena za elemente koji nemaju posebnu svrhu ili se ne razlikuju od svojih braće i sestara. Obično su potrebni kao "Pomagači".</p><p>Upotreba funkcionalnih naziva ili naziva predložaka smanjuje potrebu za nepotrebnim promjenama dokumenta ili šablona.</p><p><b><span>Nije preporuceno:</span>
</b>/ * Ne preporučuje se: nema smisla * / # yee-1901 () / * Ne preporučuje se: opis izgleda * / .button-green () .clear () <br><b>Preporučeno:</b>/ * Preporučeno: tačno i tačno * / #gallery () #login () .video () / * Preporučeno: zamjenski naziv * / .aux () .alt ()</p><h4>Imena identifikatora i klasa</h4>Za identifikatore i klase koristite imena koliko god je potrebno, ali što je moguće kraće. <p>Pokušajte da artikulišete tačno šta dati element treba da uradi, a da bude što kraći.</p><p>Ova upotreba klasa i identifikatora doprinosi lakšem razumijevanju i efikasnijem kodu.</p><h4>Selektori tipova</h4> <b>Izbjegavajte korištenje imena klasa ili identifikatora sa selektorima tipa elementa (oznaka).</b> <p>Osim ako je potrebno (na primjer, kod pomoćnih klasa), nemojte koristiti imena elemenata s imenima klasa ili identifikatorima.</p><h4>Skraćena notacija svojstva</h4> <b>Koristite stenografske obrasce za svojstva gdje je to moguće.</b> <p>CSS nudi mnogo različitih stenografskih (engleskih) oblika zapisa (na primjer <b>font</b>), koje se preporučuje da se koriste gdje god je to moguće, čak i ako je navedena samo jedna od vrijednosti.</p><p>Korištenje stenografije svojstva je korisno za efikasnost i bolje razumijevanje vašeg koda.</p><p><b><span>Nije preporuceno:</span>
</b>/ * Ne preporučuje se * / border-top-style: nema; porodica fontova: palatino, georgia, serif; veličina fonta: 100%; visina linije: 1,6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; <br><b>Preporučeno:</b>/ * Preporučeno * / border-top: 0; font: 100% / 1.6 palatino, georgia, serif; padding: 0 1em 2em;</p><h4>0 i jedinice</h4> <b>Nemojte specificirati jedinice za nulte vrijednosti</b> <p>Nemojte navoditi jedinice za nulte vrijednosti osim ako nema razloga za to.</p><h4>Cijeli broj 0</h4> <b>Ne stavljajte "0" u cijeli dio razlomaka.</b> <p>Nemojte ga stavljati <b>0
</b> u cijelom dijelu u vrijednostima između -1 i 1.</p><h4>Citati u linkovima</h4> <b>Nemojte koristiti citate u linkovima</b> <p>Nemojte koristiti navodnike ( <b>""
</b>
, <b>""
</b>) Sa <b>url ()</b>
. </p><h4>Heksadecimalni nazivi boja</h4> <b>Koristite heksadecimalni zapis od 3 znaka gdje je to moguće.</b> <p>Heksadecimalni zapis od 3 znaka za boje je kraći i zauzima manje prostora.</p><h4>Prefiksi</h4> <b>Selektori prefiksa sa prefiksima koji su jedinstveni za trenutnu aplikaciju. <span><b>(nije potrebno)</b>
</span>
</b> <p>U velikim projektima, kao iu kodu koji će se koristiti za druge projekte ili druge stranice, koristite prefikse (kao prostore imena) za identifikatore i imena klasa. Koristite kratka, jedinstvena imena praćena crticom.</p><p>Korištenje prostora imena pomaže u sprječavanju sukoba imena i može olakšati održavanje vaše stranice. Na primjer, prilikom pretraživanja i zamjene.</p><h4>Separatori u klasama i identifikatori</h4> <b>Odvojite riječi u identifikatorima i nazivima klasa crticama.</b> <p>Nemojte koristiti ništa osim crtice za kombiniranje riječi i skraćenica u selektorima kako biste poboljšali čitljivost i lakoću razumijevanja vašeg koda.</p><p><b><span>Nije preporuceno:</span>
</b>/ * Ne preporučuje se: riječi "demo" i "image" nisu odvojene * / .demoimage () / * Ne preporučuje se: koristite donju crtu umjesto crtice * / .error_status () <br><b>Preporučeno:</b>/ * Preporučeno * / # video-id () .ads-sample ()</p><h4>Kaki</h4> <b>Izbjegavajte korištenje informacija o verziji pretraživača ili CSS hakova - prvo isprobajte druge metode.</b> <p>Čini se primamljivim boriti se protiv razlika u tome kako različiti pretraživači rade pomoću CSS filtera, hakova ili drugih rješenja. Svi ovi pristupi mogu se smatrati samo krajnjim sredstvom ako želite efikasnu i lako održavanu bazu koda. Jednostavno rečeno, dozvoljavanje hakova i definicija pretraživača dugoročno će naštetiti projektu, jer to znači da je projekat na putu najmanjeg otpora. To čini hakove lakšim za korištenje i omogućava im da se koriste sve češće, što će rezultirati prečestom upotrebom.</p><h3>Pravila CSS formatiranja</h3><h4>Naručivanje oglasa</h4> <b>Sortirajte oglase po abecedi.</b> <p>Postavite svoje oglase po abecednom redu za dosljedan kod s kojim je lako raditi.</p><p>Zanemarite prefikse pretraživača prilikom sortiranja. Štaviše, ako se za jedno svojstvo koristi nekoliko prefiksa pretraživača, oni također moraju biti sortirani (npr <b>-moz</b> treba da bude ispred <b>--webkit</b>
) </p><h4>Blok uvlačenja.</h4> <b>Uvijek uvucite sadržaj blokova.</b> <p>Uvijek uvucite bilo koji blokovski sadržaj, kao što su pravila unutar pravila ili deklaracije, kako biste prikazali hijerarhiju i učinili kod lakšim za razumijevanje.</p><h4>Nakon najava</h4> <b>Koristite tačku i zarez nakon svakog oglasa.</b> <p>Koristite tačku i zarez nakon svake deklaracije radi dosljednosti u vašem kodu i da biste olakšali dodavanje novih svojstava.</p><h4>Nakon imena svojstava</h4> <b>Koristite razmake nakon dvotočka u vašim deklaracijama.</b> <p>Uvijek koristite jedan razmak iza dvotočke (ali ne prije) u deklaracijama za naručivanje u vašem kodu.</p><h4>Razdvajanje selektora i najava</h4> <b>Selektore i deklaracije odvojite prijelomima reda.</b> <p>Pokreni svaki selektor ili deklaraciju u novom redu.</p><h4>Razdvajanje pravila</h4> <b>Odvojite pravila prijelomima redaka.</b> <p>Uvijek stavljajte prijelome reda između pravila.</p><h3>Meta CSS pravila</h3><h4>Pravila grupisanja</h4> <b>Pravila grupe i označite grupe komentarom. <span><b>(nije potrebno)</b>
</span>
</b> <p>Organizirajte pravila u grupe kad god je to moguće. Označite grupe komentarima i odvojite ih prijelomima redaka.</p><h3>Zaključak</h3><i>Budite dosljedni</i> <p>Ako uređujete kod, odvojite nekoliko minuta da shvatite kako je napisan. Ako su matematički operatori razdvojeni razmacima, učinite isto. Ako su komentari okruženi zagradama ili crticama, učinite isto sa svojim komentarima.</p><p>Ideja iza ovog tutorijala je stvaranje zajedničkog rječnika koji omogućava programerima da se fokusiraju <b>šta</b>žele da se izraze, ne na tome <b>kako</b>. </p><p>Nudimo jedinstvena pravila dizajna koja vam omogućavaju da pišete kod u istom stilu, ali je važan i stil koda koji se već koristi u projektu.</p><p>Ako se vaš kod jako razlikuje od postojećeg, može izbaciti čitač iz ritma i otežati čitanje. Pokušajte ovo izbjeći.</p><h3>Napomena prevodioca</h3>Također bih želio napomenuti da se Google prvenstveno fokusira na velike projekte s velikim opterećenjem, gdje je svaki bajt skup, pa treba imati na umu da ako preporučuje pokretanje svakog selektora u novom redu, ili korištenje razmaka umjesto tabulatora, ovo prvenstveno implicira da će kod nužno biti minimiziran i komprimiran prije nego što se koristi na stranici. <p>Hvala svima koji su čitali do sada.</p><p>Oznake: Dodaj oznake</p>
<p>Članak nije u potpunosti ažuran</span><br>U 10.2 i novijim, dodata je mogućnost preimenovanja stranice sa pravilima sajta direktno u admin panelu motora, uz direktno uređivanje teksta pravila. Ipak, stranica s pravilima stranice je ostala. Postoji i nalazi se na bilo kojoj DLE lokaciji na http: //my_site/rules.html <br>Kako iscijediti sve sokove sa ove adrese - čitajte dalje</p>
<h4>Stranica sa pravilima sajta u CMS DLE</h4>
<p>Stranica pravila stranice c je sistemska statička stranica. Obrađuje se od strane motora i generira se na isti način kao i obična stranica sa statistikom. Samo što ga je nemoguće izbrisati - to nije osigurao programer motora. Čak i ako su sama pravila sajta isključena za prikaz tokom registracije, tada je stranica sa pravilima sajta uvek dostupna na http: //my_site/rules.html Prvi pretraživač koji ga tamo pronađe počeće da povraća i pljuje na tekst i ime. Nije iznenađujuće. Uostalom, na svim DLE stranicama - ista stvar.</p>
<p>Kada se stranica sa pravilima sajta uvrsti u mapu sajta, pretraživač je smatra "smećem" i ne uzima se u indeks pretraživanja, jer su pravila sajta skoro svuda ista. Stoga je stranici s pravilima web mjesta u DLE-u, prema zadanim postavkama, zabranjeno (zatvoreno) indeksiranje pretraživanja u datoteci ( <i>Disallow linija: /rules.html</i>).</p>
<h4>Jedinstvenost "Pravila stranice"</h4>
<p>Lično, moje mišljenje o stranici sa pravilima sajta i o njenoj jedinstvenosti je atavizam koji skreće pažnju korisnika prilikom registracije. Pravila sajta su rudimentarni izdanak za koji su se organizatori društvenih mreža uspešno pokazali nepotrebnim.</p>
<p>Ne, dobro, da li je neko vidio neka strašna ili posebna pravila o registraciji na Facebooku ili Twitteru? Ili su možda na Vkontakte i Odnoklassniki? To je isto!</p>
<p><i>I neki sajt sa 1000 jedinstvenih posetilaca - <br>počinje pisati svoja jedinstvena pravila za korisnike. <br>Što se mene tiče, najbolja pravila na stranici su njihovo potpuno odsustvo. <br>Ako je korisnik normalan i adekvatan, on već sve razumije.</i></p>
<h4>Nema stranice - nema problema</h4>
<p>Nije tajna da blokiranje stranica i kataloga od indeksiranja pretraživanja nije lijek. Na ovaj ili onaj način, bilo koju stranicu stranice će prije ili kasnije "prožvakati" pretraživač. Na primjer, uzmite isti Yandex. Njegovi roboti za pretragu će ispumpati apsolutno sve što nađu sa sajta, a tek tada će početi da sortiraju i razmišljaju da li da daju stranice na pretragu ili ne. To je sasvim očito, uprkos dirljivim uvjeravanjima Yandexa da on i njegovi roboti ne preuzimaju nepotreban materijal sa stranice. Na primjer, ako je web stranica zatvorena od indeksiranja, Yandex čuva samo označenu adresu <i>, ili</i>(ko će kako zatvoriti).</p>
<p>Umjesto da odbacite i blokirate stranicu "smeće" sa pravilima stranice od indeksiranja pretraživanja, mnogo je bolje prepraviti je za neku drugu korisnu stvar i otvoriti joj pristup pretraživačima - neka se smire. Ili, barem samo napišite svoje ponašanje na stranici i, opet, dozvolite pretraživačima da pristupe stranici.</p>
<h4>Otvaranje pravila sajta za pretraživače</h4>
<p>Poduzimamo hrabar korak i otvaramo pretraživačima pristup stranici s pravilima stranice. Da bismo to učinili, u našoj datoteci nalazimo red Disallow: /rules.html i izbrišemo ga nafik. Gotovo je! Sada će svaki robot za pretraživanje moći službeno ući u otvorena "Pravila stranice" i, naravno, reći "Fe-e!" i "Be-e!" Da se to ne bi dogodilo, prepravljamo stranicu "Pravila stranice" - ubacujemo svoj jedinstveni tekst na bilo koju temu, slike i mijenjamo naziv (naslov) stranice.</p>
<h4>Uređivanje stranice "Pravila na stranici".</h4>
<p>Uređivanje stranice sa pravilima sajta je dostupno u admin panelu DLE motora, u odeljku "Lista svih sekcija" - "Pravila sajta". Uređivanje stranice "Pravila na sajtu" vrši se kao i za bilo koju drugu statičnu stranicu - u normalnom režimu vizuelnog uređivača teksta. Ovdje problemi mogu biti samo sa pisanjem jedinstvenog teksta i odabirom unikatnih slika. Malo više nalazi se poseban prozor za unos naslova (naslova) ažurirane stranice. Ali, takva se inovacija pojavila, počevši od verzije 10.2.</p>
<p><i>Da biste preimenovali stranicu pravila stranice <br>kod starijih modela motora - <br>morat ćete kopati u njegove sistemske datoteke.</i></p>
<h4>Preimenovanje stranice Pravila web mjesta <br>(za CMS DLE 10.1 i starije verzije)</h4>
<p>Stvarno preimenovanje same stranice "Pravila na sajtu" vrši se u datoteci adminpanel.lng koja se nalazi u folderu language / Russian / adminpanel.lng. Datoteka adminpanel.lng je sistemska datoteka za DLE mašinu. Da biste ga uredili, idite na svoj server (inače - ništa).</p>
<p>Otvorite datoteku adminpanel.lng. <br>Tražim žicu <br><b>"rules_edit" => "Opšta pravila na sajtu"</b><br>Mijenjamo riječi "Opšta pravila na stranici" u njihov novi naziv. Zatvaramo. Mi štedimo. (Možete promijeniti samo ćirilicu koja se nalazi između navodnika. U suprotnom će potpuno prestati raditi.)</p>
<p><b>Brišemo keš memorije motora i pretraživača</b>... Nakon uređivanja i spremanja datoteke adminlogs.lng, imperativ je da obrišete predmemoriju motora i keš pretraživača kako biste prisilili motor da generiše novu stranicu s novim imenom, a pretraživač da je preuzme. Ako to ne pomogne i stari naziv nastavi da se prikazuje, potrebno je da odete na admin panel motora, uredite i ponovo sačuvate stranicu "Pravila na sajtu" sa nekim beznačajnim znakom. Na primjer - stavite tačku u tekst (onda možete sve ispraviti nazad). Takvo maltretiranje i zvjerstva će sigurno očistiti mozak od motora i servera i natjerati ih da generiraju i prikažu novo ime.</p>
<p>Razmišljam naglas. Osećam se kao draga <b>celsoft</b>čita ovaj blog. Nešto kasnije, nakon ove objave, u admin panelu motora CMS DLE 10.2 verzije, postalo je moguće preimenovati stranicu sa pravilima stranice na normalan civiliziran način, bez dosadnog čačkanja po fajlovima sistemske skripte. Veliko hvala CMS DLE programerima za njihov rad i pažnju na probleme običnih ljudi.</p>
<p>Šta radi <table rules="">učiniti? Koristi se za određivanje prikaza unutrašnjih granica između redova i kolona. Ovaj atribut je zastario. Umjesto toga, koristite CSS za stiliziranje granica tablice.</p><p>Atribut Pravila je zastario</span> Ovaj atribut je zastario i ne bi se trebao koristiti. Podrška pretraživača za ovaj atribut je ograničena i njegovo korištenje može dovesti do neočekivanih rezultata. Umjesto toga, koristite CSS za stiliziranje tabela.</p><h2>Atribut RULES</h2><p>PRAVILA, HTML 4.0 atribut, pokazuje da li treba da postoje unutrašnje granice u tabeli. "Proći ćemo preko svake od vrijednosti PRAVILA i demonstrirati kako se koriste. PRAVILA i OKVIR imaju dosadan način da međusobno mijenjaju zadane postavke. Da biste pojednostavili svoj život, evo "osnovnog pravila: ako koristite PRAVILA, koristite i OKVIR i GRANICU. Lakše je izbjeći zabunu.</p><h2><span>Vrijednost NONE za atribut RULES</span></h2><p>PRAVILA = NIŠTA znači da nema unutrašnjih granica. PRAVILA = NONE je zadana postavka ako "ne koristite BORDER ili ga postavite na nulu, ali u suprotnom mora biti eksplicitno navedeno da nema unutrašnjih granica. Imajte na umu da trenutno Netscape ne prepoznaje PRAVILA.</p><p> <TABLE BORDER=2 RULES=NONE FRAME=BOX>
</p><table border="2" rules="NONE"><tr><th>Ime</th><th>Hrana</th>
</tr><tr><td>Starflower</td><td>promešani tofu</td>
</tr><tr><td>Miko</td><td>supa od pirinča od povrća</td>
</tr><tr><td>Andy</td><td>humus</td>
</tr><tr><td>Ping</td><td>francuski tost</td>
</tr></table><h2><span>Vrijednost ALL za atribut RULES</span></h2><p>PRAVILA = SVE označava da sve unutrašnje granice treba da budu vidljive. RULES = ALL se obično koristi zajedno sa FRAME = VOID tako da postoje vanjske granice, ali ne i unutrašnje granice.</p><p> <TABLE BORDER=2 FRAME=VOID RULES=ALL>
</p><p>Kada se primeni na tabelu, ta vrednost nam daje ovaj rezultat:</p><table border="2" rules="ALL"><tr><th>Ime</th><th>Hrana</th>
</tr><tr><td>Starflower</td><td>promešani tofu</td>
</tr><tr><td>Miko</td><td>supa od pirinča od povrća</td>
</tr><tr><td>Andy</td><td>humus</td>
</tr><tr><td>Ping</td><td>francuski tost</td>
</tr></table><h2><span>Vrijednost COLS za atribut RULES</span></h2><p>COLS označava da treba da postoje granice između kolona, ali ne i između redova.</p><p> <TABLE BORDER=2 RULES=COLS FRAME=BOX>
</p><p>Kada se primeni na tabelu, ta vrednost nam daje ovaj rezultat:</p><table border="2" rules="COLS"><tr><th>Ime</th><th>Hrana</th>
</tr><tr><td>Starflower</td><td>promešani tofu</td>
</tr><tr><td>Miko</td><td>supa od pirinča od povrća</td>
</tr><tr><td>Andy</td><td>humus</td>
</tr><tr><td>Ping</td><td>francuski tost</td>
</tr></table><h2><span>Vrijednost ROWS za atribut RULES</span></h2><p>PRAVILA = REDOVI označava da treba da postoje granice između redova, ali ne i između kolona.</p><p> <TABLE BORDER=2 RULES=ROWS FRAME=BOX>
</p><p>Kada se primeni na tabelu, ta vrednost nam daje ovaj rezultat:</p><table border="2" rules="ROWS"><tr><th>Ime</th><th>Hrana</th>
</tr><tr><td>Starflower</td><td>promešani tofu</td>
</tr><tr><td>Miko</td><td>supa od pirinča od povrća</td>
</tr><tr><td>Andy</td><td>humus</td>
</tr><tr><td>Ping</td><td>francuski tost</td>
</tr></table><h2><span>Vrijednost GROUPS za atribut RULES</span></h2><p>PRAVILA = GROUPS vam omogućava da postavite granice između grupa ćelija tabele. Postoje dva načina da se ćelije grupišu: po redu i po koloni. Idemo preko svakog od njih. Imajte na umu da trenutno Netscape ne prepoznaje PRAVILA.</p><h3>Grupiranje po redu</h3><p>Za grupisanje po redu koristite <THEAD ...> , <TBODY ...> , <TFOOT ...>oznake. <THEAD ...>označava redove zaglavlja tabele, <TBODY ...>označava glavni dio tabele, i <TFOOT ...>označava donje redove. Tako, na primjer, ovaj kod kreira tablicu sa tri grupe. Granice se pojavljuju samo između grupa:</p><p> <TABLE BORDER=2 RULES=GROUPS> <THEAD> <TR><TH>Ime</TH><TH>Hrana</TH><TH>Cijena</TH></TR> </THEAD> <TBODY> <TR><TD>Starflower</TD><TD>promešani tofu</TD><TD>5.95</TD></TR> <TR><TD>Miko</TD><TD>supa od pirinča od povrća</TD><TD>4.95</TD></TR> <TR><TD>Andy</TD><TD>humus</TD><TD>3.95</TD></TR> <TR><TD>Ping</TD><TD>francuski tost</TD><TD>5.95</TD></TR> </TBODY> <TFOOT> <TR><TH COLSPAN=2>Ukupno</TH><TD>20.80</TD></TR> </TFOOT> </TABLE>
</p><p>Evo kako se ta tabela prikazuje:</p><table border="2" rules="GROUPS"><tr><th>Ime</th><th>Hrana</th><th>Cijena</th>
</tr><tbody><tr><td>Starflower</td><td>promešani tofu</td><td>5.95
</td>
</tr><tr><td>Miko</td><td>supa od pirinča od povrća</td><td>4.95
</td>
</tr><tr><td>Andy</td><td>humus</td><td>3.95
</td>
</tr><tr><td>Ping</td><td>francuski tost</td><td>5.95
</td>
</tr></tbody><tr><th colspan="2">Ukupno</th><td>20.80
</td>
</tr></table><h3>Grupiranje po koloni</h3><p>Za grupisanje po koloni koristite <COLGROUP ...>tag i njegov SPAN atribut. <COLGROUP ...>potrebno je malo navikavanja jer zapravo ne obilazi nijednu ćeliju tabele. Nalazi se na vrhu koda tabele gde postavlja pravila o kolonama tabele uključujući i one koje su grupisane zajedno. <COLGROUP SPAN="...">do označava koliko kolona ima u svakoj grupi. Ako izostavite SPAN onda se pretpostavlja da grupa ima samo jednu kolonu. Tako, na primjer, sljedeći kod kaže da je prva kolona u grupi sama, a tri nakon toga su zajedno u grupi. Primetite to <COLGROUP ...>zahtijeva završnu oznaku. Granice će ići samo između grupa.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
<div class="post-social-counters-block">
<div style="margin-top: 12px">
<noindex></noindex>
</div>
</div>
</div>
</div>
<a name="comments"></a>
<h3 class="best-theme-posts-title">Top srodni članci</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/fallout-4-izmenenie-vneshnosti-konsol-otlichaetsya-dvizhenie-myshi-po.html">
<div class="img_container"><img src="/uploads/686669656a5df8de6a6f9d463fe60026.jpg" border="0" alt="Različiti pokreti miša okomito i horizontalno" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Različiti pokreti miša okomito i horizontalno</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/kak-szhat-tekstury-v-fallout-4-ruchnaya-nastroika-grafiki.html">
<div class="img_container"><img src="/uploads/d7c98012600dd0a7e0e0c14fa8d2e1eb.jpg" border="0" alt="Kako komprimirati teksture u Fallout 4" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Kako komprimirati teksture u Fallout 4</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/nizkie-nastroiki-grafiki-fallout-4-ostalos-tolko-ponyat-nuzhnyi-uroven.html">
<div class="img_container"><img src="/uploads/da3d853bd41405e0322c2a1e985df14b.jpg" border="0" alt="Ostaje samo razumjeti potreban nivo" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Ostaje samo razumjeti potreban nivo</span>
</a>
</div>
</div>
</div>
</div>
<a name="comments"></a>
</div>
<div class="right-column col-sm-4 col-md-4">
<div class="write">
<span class="tags-title">Kategorije:</span>
<ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags">
<li class=""><a href="https://bumotors.ru/bs/category/programs/">Programi</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/safety/">Sigurnost</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/windows-10/">Windows 10</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/iron/">Iron</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/windows-8/">Windows 8</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/vkontakte/">U kontaktu sa</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/errors/">Greške</a></li>
</ul>
</div>
<div class="banner">
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="footer">
<div class="subscribe">
<div class="main-wrapper container">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-4">
<div class="social">
<a href="" class="vk social-ico"></a>
<a href="https://facebook.com/" class="fb social-ico"></a>
<a href="https://twitter.com/" class="tw social-ico"></a>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="main-wrapper container">
<div class="row">
<span class="footer-info col-xs-12">© 2021 bumotors.ru. Kako podesiti pametne telefone i računare. Informativni portal.</span>
</div>
</div>
</div>
</div>
</body>
</html>]]>
