Trenutno većina preglednika prikazuje web stranice, samostalno dekodirajući i ispravljajući pogreške webmastera. Međutim, morate biti oprezni pri pisanju HTML-a – morate se pridržavati pravila valjanosti, jer. Ispravan izgled važan je za optimizaciju vaše stranice, a također će pomoći da korisnici ne polude kada otvore vašu stranicu u starijim preglednicima.
Koristiti
Elementnalazi se u prvom retku bilo koje HTML stranice. Definira verziju jezika za označavanje koji se koristi na stranici. Za sada 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 biti ispravno prikazana.
Nije u redu
Pozdrav svijete! Pozdrav svijete!
Pravo
Pozdrav svijete! Pozdrav svijete!
Ispravno definirajte tehničke informacije stranice
Meta oznake i stilovi trebaju biti specificirani u
, ne negdje u tijelu stranice. Skripte bi po mogućnosti trebale biti uključene na dnu stranice prije završne oznake.. Prednost ovog pristupa je što prije nego što se prikaže sadržaj stranice, preglednik učitava samo stilove, a skripte učitava posljednji, što korisniku omogućuje brži pregled sadržaja stranice.
Nije u redu
Pozdrav svijete! Pravo
Pozdrav svijete! Slijedite standarde označavanja
Koristite elemente prema njihovoj semantici
Provjerite valjanost html koda
Koristite zamjenski tekst za slike
Slike uvijek moraju sadržavati atribut alt. Preglednik se oslanja na ovaj atribut za pružanje konteksta za sliku. Atribut alt mora sadržavati tekst koji će se prikazati ako se slika nije učitala.
Nije u redu
Pravo
Nemojte koristiti stilove u HTML označavanju
To stvara stranice koje se predugo učitavaju i koje je teško održavati. Napišite sve stilove u zasebnom CSS dokumentu. Pokušajte svesti oznaku i atribut stila na minimum.
Napišite komentare
Komentirajte kod, ali nemojte pretjerivati. Komentari koji su sažeti i jasni mogu biti od velike pomoći drugim programerima, kao i važan podsjetnik za vas nakon nekog vremena.
Primjer:
Stranica
Koristite prikladne nazive razreda
Imenujte css klase prema sadržaju bloka, na primjer: header - header, footer - footer, menu - menu, content - content. To će kod učiniti mnogo jasnijim i lakšim za održavanje.
loš kod
Stavka izbornika 1 Stavka izbornika 2 Stavka izbornika 3 dobar kod
Pravila pisanja CSS-a
CSS također ima pravila koja se mogu slijediti kako bi kod bio jednostavan, lak za čitanje i dobro organiziran.
Vratite stilove preglednika na zadane
Oni mogu ometati stilove koje zapravo želimo primijeniti. Datoteku za resetiranje zadanih stilova preglednika možete preuzeti ovdje - reset.css.
Koristite kratka svojstva i vrijednosti
loš kod
padding-top: 5px;
dobar kod
padding: 5px 10px 15px 20px;
Navedite selektore i pravila u novom retku
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
Napišite komentare
Odvojite glavne blokove komentarima, to će poboljšati čitljivost koda.
Primjer:
/*ZAGLAVLJE*/
/*GLAVNI*/
/*Podnožja*/
Provjerite valjanost css koda
Zaključak
Ove smjernice i pravila su samo osnove jer se HTML i CSS jezici razvijaju brže i razvijaju se novije metode pisanja ispravnog koda. Slijedeći naše smjernice, osigurat ćete da je vaš kod jednostavan, čitljiv i optimiziran. I također dobiti +100 za karmu i zahvalnost od programera koji će raditi na stranici nakon vas.
Što je HTML
World Wide Web (WWW) se sastoji od web stranica koje su stvorene 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, tekstualni dokument se označava na isti način kao što uređivač radi crvenom olovkom. Ove oznake služe za označavanje oblika prezentacije informacija sadržanih u dokumentu.
Posebni HTML preglednici, koji se često nazivaju preglednicima, koriste se za tumačenje datoteka označenih u skladu s pravilima HTML jezika, formatiranje kao web stranice i prikaz njihovog sadržaja na zaslonu računala korisnika. Postoji veliki broj programa preglednika koje su razvile razne tvrtke, međutim, do danas se iz čitave palete programa izdvajaju dva vodeća programa - Netscape Communicator i Microsoft Internet Explorer.
Netscape Navigator je razvio Netscape Communications Corporation. Poput mnogih softverskih proizvoda, postoji nekoliko verzija ovog programa. Najnovija verzija Netscape Communicatora u vrijeme pisanja je verzija 4.7. Internet Explorer razvija Microsoft. Najnovija verzija ovog programa je 5.0.
Ostali preglednici daleko zaostaju u popularnosti. Prije nekoliko godina, Netscapeov preglednik je dominirao preglednicima, a više od dvije trećine korisnika koristi ovaj preglednik. Izlaskom svog preglednika, Microsoft je uložio velike napore da osvoji ovaj dio tržišta. Često u medijima
bilo je izvješća o ratovima između preglednika zbog korisnika. Sada su ova dva preglednika usporediva po popularnosti. Rast popularnosti preglednika Microsoft je olakšan uključivanjem preglednika u operacijski sustav Windows 98, međutim, na kraju, izbor preglednika ostaje na korisniku.
Moderni preglednici imaju širok raspon mogućnosti, ali glavna stvar za njih je tumačenje dokumenata označenih prema pravilima HTML-a. Ta su pravila glavni fokus ove knjige. U prvom dijelu razmotrit ćemo samo temeljna načela izrade HTML dokumenata.
Da bismo razumjeli što je označni jezik, prisjetimo se dobrih starih vremena kada su mnogi ljudi radili s uređivačima teksta poput WordStara. U njima, da bi se izraz označio, na primjer, podebljanim slovima, posebne oznake su postavljene na njegov početak i kraj (/ B i / b ):
/B Ovaj tekst će biti prikazan podebljanim/b
Prilikom izlaza takvog teksta na uređaj za ispis (još ne govorimo o displejima, u ta daleka vremena oni ili uopće nisu postojali ili su postojali alfanumerički zasloni koji nisu dopuštali promjenu fontova), znakovi / u prisilili su korištenje podebljanog font sve dok ne bude /b znakova.
HTML radi potpuno isto. Ako je potrebno istaknuti tekst na zaslonu 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 to. Takvi znakovi koji kontroliraju prikaz teksta i pritom se sami ne prikazuju na ekranu, u HTML jeziku uobičajeno je nazivati oznake (od engleske riječi tag - oznaka, znak).
Sve HTML oznake razgraničene su znakovima za razgraničenje (< и >), između kojih je upisan identifikator (ime) oznake (u našem primjeru ovo je in), i, eventualno, njeni parametri. Jedina iznimka od ovog pravila su oznake komentara sa složenijim razdjelnicima (). Nazivi oznaka, kao i njihovi parametri, mogu se pisati u svakom slučaju. Radi dosljednosti, većina oznaka u ovoj knjizi napisana je velikim slovima.
Većina HTML oznaka koristi se u paru, odnosno za određenu oznaku, nazovimo je otvaranjem, dokument ima odgovarajuću završnu oznaku. Prema pravilima HTML-a, završna oznaka piše se na isti način kao i početna, ali sa znakom / (kosa crta naprijed) ispred naziva oznake. Jedina temeljna razlika između oznaka za par je ta što završne oznake ne koriste parametre.
Oznake koje trebaju odgovarajuće završne oznake zvat će se oznake kontejnera. Sve što je napisano između odgovarajućih oznaka otvaranja i zatvaranja nazivat će se sadržajem oznake spremnika. Ponekad se završna oznaka može izostaviti. Na primjer, za oznaku koja opisuje podatke za ćeliju tablice
, što odgovara završnoj oznaci uvijek se može ispustiti. Kraj podataka za ćeliju tablice bit će prepoznat po izgledu sljedeće oznake
ili završnu oznaku reda tablice.
Postoji niz oznaka za koje većina autora dokumenata izostavlja završne oznake. Primjer bi bila oznaka stavke popisa
ili oznaka paragrafa Moderni preglednici će u mnogim slučajevima ispravno formatirati dokumente ako su određene završne oznake izostavljene, no ova se praksa ne može preporučiti.
Nekim oznakama u načelu nisu potrebne završne oznake. Primjer bi bila oznaka za ugradnju slike
Postoje opća pravila za tumačenje oznaka od strane preglednika. 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 netočne oznake. Preglednik bi trebao jednostavno zanemariti pogrešno napisanu oznaku ili njezin parametar. Ovo je opće pravilo za sve preglednike, koje ne pokriva samo pogrešno napisane oznake, već i oznake koje ova verzija preglednika ne prepoznaje. Primjer bi bile oznake koje su predložene i implementirane za određeni preglednik i nepoznate drugome. Na primjer, spremnik s oznakama <![CDATA[, koji se koristi za pružanje alternativnih informacija preglednicima koji ne podržavaju strukture okvira, takvi preglednici neće prepoznati. Preglednik koji podržava okvire, nakon što je upoznao oznaku <NOFRAMES>, preskočit će sve informacije sadržane u njemu. A preglednik koji nije upoznat s okvirima, naravno, neće razumjeti ni oznaku. <NOFRAMES>. Međutim, prema gore navedenom pravilu, ova oznaka će se jednostavno preskočiti, ali će se prikazati sve naknadne informacije.</p>
<p>Oznake se mogu pisati s parametrima ili atributima (od engleskog, atribut). U ovoj knjizi najčešće ćemo koristiti pojam parametar. Skupovi dopuštenih parametara su individualni za svaku oznaku. Opća pravila za pisanje parametara su sljedeća. Nakon naziva oznake mogu se nalaziti parametri koji su međusobno odvojeni razmacima. Redoslijed parametara oznake je proizvoljan. Mnogi parametri zahtijevaju da se navedu njihove vrijednosti, međutim, neki parametri nemaju vrijednosti ili se mogu napisati bez njih, uzimajući zadane vrijednosti. Ako parametar zahtijeva vrijednost, tada je označena nakon naziva parametra znakom jednakosti. Vrijednost parametra može se napisati u navodnicima ili bez njih. Jedini slučaj u kojem su navodnici potrebni je kada postoje razmaci u vrijednosti parametra. Vrijednosti parametara (za razliku od naziva oznaka i samih parametara) ponekad su osjetljive na velika i mala slova. Evo primjera unosa oznake s parametrima:</p>
<p><TABLE BORDER ALIGN="left">
</p>
<p>Evo za oznaku <TABLE>data su dva parametra. Prvi parametar BORDER specificiran je bez vrijednosti. Drugi parametar ALIGN postavljen je na lijevo.</p>
<p>U narednim poglavljima prvog dijela knjige bit će opisana svrha HTML oznaka i njihovi parametri. Općenito, oznake mogu imati različite parametre, ali postoji niz parametara koji su zajednički za gotovo sve oznake. Ovdje ćemo spomenuti opće parametre oznaka kako ne bismo ponovno govorili o njima prilikom opisivanja svake oznake.</p>
<p>Sve oznake koje se mogu koristiti u odjeljku <BODY>HTML dokument može imati parametre CLASS, ID, LANG, LANGUAGE, STYLE i TITLE. Korištenje ovih parametara korisno je prije svega kod oblikovanja dokumenata, o čemu će biti riječi u drugom dijelu knjige.</p>
<p>Parametri CLASS, ID, STYLE podržavaju Internet Explorer 3.0 i novije verzije i Netscape 4.0 i novije verzije. Ove su opcije potrebne kada se koriste stilovi.</p>
<p>Parametri LANG, LANGUAGE, TITLE - podržava samo Internet Explorer počevši od verzije 4.0. Ovi parametri označavaju jezik koji se koristi (na primjer, za Rusiju: LANG=ru), jezik za pisanje skripti (na primjer, LANGUAGE=JavaScript), kao i tekst opisa koji se prikazuje kada se pokazivač miša zadrži preko ovog elementa (TITLE).</p>
<p>U modernom HTML-u, osim jezičnih oznaka i njihovog sadržaja, skriptni kodovi (javascript ili VBScript) također su upisani u izvorni HTML kod. U prvom dijelu knjige to se praktički nigdje ne spominje, ali je drugi dio u potpunosti posvećen korištenju skripti.</p>
<p>Zaključujući opći pregled HTML-a, napominjemo da su najjednostavniji HTML dokumenti obične tekstualne datoteke koje se mogu pregledavati i uređivati pomoću bilo kojeg uređivača teksta. Te datoteke obično imaju HTM ili HTML ekstenziju.</p>
<p>HTML specifikacije</p>
<p>HTML je stekao popularnost sredinom 1990-ih s eksponencijalnim rastom Interneta. Do tada se pojavila potreba za standardizacijom jezika, jer su razne tvrtke koje su razvile softver za pristup internetu nudile vlastite</p>
<p>varijante HTML instrukcija, čiji je broj rastao i rastao. Vrijeme je da se postigne neka vrsta zajedničkog dogovora u vezi s korištenjem HTML oznaka.</p>
<p>Posao stvaranja HTML specifikacije poduzela je organizacija pod nazivom World Wide Web Consortium (skraćeno W3C). Njezin zadatak bio je sastaviti specifikaciju koja odražava trenutnu razinu razvoja jezičnih značajki, uzimajući u obzir različite prijedloge tvrtki za preglednike. Tako se u studenom 1995. pojavila specifikacija HTML 2.0, osmišljena da formalizira praksu korištenja HTML-a koja se razvila do kraja 1994. godine.</p>
<p>Shema odobrenja specifikacije je sljedeća. Konzorcij W3C objavljuje nacrt specifikacije, nakon čije rasprave izlazi tzv. nacrt specifikacije i nudi je na raspravu na određeno razdoblje. Nakon razdoblja rasprave, nacrt specifikacije može postati preporuka, tj. službeno priznata verzija HTML specifikacije.</p>
<p>Ubrzo nakon specifikacije 2.0, objavljena je radna verzija specifikacije 3.0, koja je završila razdoblje komentiranja u rujnu 1995. Ova specifikacija nikada nije prihvaćena kao službena preporuka. Namjera je bila uključiti široku paletu oznaka i značajki specifičnih za preglednik, ali W3C nije našao mogućim razviti dobru specifikaciju za tako velik broj uputa.</p>
<p>Nakon dugog razmišljanja, nacrt HTML 3.2 objavljen je u svibnju 1996. godine. Projekt se temeljio na dijelu tagova dostupnih u verziji 3.0, koji su pokazali stabilnost u radu. U rujnu 1996., nakon nekoliko mjeseci rasprave, verzija 3.2 postala je predložena specifikacija, a u siječnju 1997. službena preporuka.</p>
<p>Srpanj 1997. obilježio je objavljivanje predložene specifikacije HTML 4.0, koja je postala službena preporuka u prosincu 1997. godine. Do danas, ovo je posljednja od prihvaćenih specifikacija.</p>
<p>U ovom kratkom pregledu povijesti razvoja HTML jezika teško da je vrijedno detaljno opisivati značajke raznih specifikacija, pogotovo jer u stvarnom životu programeri ne slijede uvijek preporuke Konzorcija. Napomenimo samo neke od ideja koje su u osnovi najnovije specifikacije.</p>
<p>U specifikaciji HTML 4.0 ključna je ideja bila odvojiti opis strukture dokumenta od opisa njegove prezentacije na zaslonu monitora. Iskustvo je pokazalo da odvajanje strukture i prezentacije dokumenta smanjuje troškove podrške širokom rasponu platformi, okruženja itd. te olakšava ispravke dokumenata. U skladu s tom idejom trebalo bi šire koristiti metode opisa prikaza</p>
<p>dokument pomoću stilskih tablica, umjesto da specificira specifične podatke o obliku prezentacije isprepletene sadržajem dokumenta. Za implementaciju ove ideje, u specifikaciji HTML 4.0, odreeni su brojni tagovi koji se koriste za izravno specificiranje oblika prezentacije HTML elemenata. Oznake otkazane iz tog razloga uključuju <CENTER>, <FONT>, <BASEFONT>,
<S>, <STRIKE>, <U>. Među ostalim poništenim oznakama napominjemo <ISINDEX>, <APPLET>, <DIR>, <MENU>. Umjesto zastarjelih oznaka, nude se alternativne implementacije odgovarajućih značajki, kojima u ovoj knjizi posvećujemo posebnu pozornost.</p>
<p>Koncept deprecate oznake je sljedeći. Ako se oznaka u ovoj jezičnoj specifikaciji naziva zastarjelom, to znači da bi preglednici trebali nastaviti podržavati takve oznake za sada, ali je njihova upotreba zastarjela. Ove oznake mogu biti zastarjele u budućim specifikacijama. Preglednici možda više ne podržavaju zastarjele oznake. U specifikaciji HTML 4.0 samo su tri oznake zastarjele:<ХМР>,
<PLAINTEXT>I <LISTING>. Informacije o tome koje su oznake uključene u specifikaciju mogu se dobiti iz tablice dane u Dodatku P1.</p>
<p>Službene informacije o HTML specifikaciji uvijek su dostupne na web stranici W3C na adresi <b>http://www.w3.org/TR/</b>. Specifikacija 4.0 nalazi se na <b>http://www.w3.org/TR/REC-htmI40-971218</b>.
</p>
<p>Imajte na umu da bi, logično, službena specifikacija trebala igrati ulogu vodećih i vodećih sila, osiguravajući da se informacije prezentiraju na isti način u različitim preglednicima. Ovo je ono idealno čemu treba težiti. U stvarnosti stvari ne idu tako dobro. Nove ideje se stalno pojavljuju, implementiraju ih razvojne tvrtke u svojim preglednicima i one promoviraju. Dobre ideje se ukorijene, a zatim ih preuzimaju drugi programeri. Neke od značajki ostaju specifične za jedan preglednik. Uspješan razvoj na kraju ulazi u specifikaciju i postaje općeprihvaćen. Dakle, proces poboljšanja mogućnosti preglednika i pojašnjenja specifikacije je u tijeku, međusobno utječući jedni na druge.</p>
<p>Struktura dokumenta</p>
<p>Prva oznaka koja počinje opisivati HTML dokumente je oznaka <HTML>. Uvijek treba započeti opis dokumenta i završiti opis dokumenta oznakom</HTML>. Ove oznake označavaju da retke između njih predstavljaju jedan HTML dokument. Sam dokument je obična ASCII tekstualna datoteka. Bez ovih oznaka, preglednik ili drugi preglednik možda neće moći identificirati format dokumenta i ispravno ga protumačiti.</p>
<p>Najčešća oznaka <HTML>koristi se bez parametara. Prethodne verzije koristile su parametar VERSION koji je zastario HTML 4.0 specifikacija. Ovaj je parametar zamijenjen oznakom<!
DOCTYPE>.
</p>
<p>Većina modernih preglednika može prepoznati dokument kao neoznačen. <HTML>I</HTML> Međutim, njihova upotreba je vrlo preporučljiva.</p>
<p>Između para oznaka <HTML>I</HTML> nalazi se sam dokument. Dokument se može sastojati od dva odjeljka - odjeljka naslova (koji počinje oznakom <HEAD>) i dio tijela dokumenta (koji počinje oznakom <BODY>). Za dokumente koji opisuju strukture okvira, umjesto odjeljka BODY (s oznakom) koristi se odjeljak FRAMESET <FRAMESET>). Zatim će se razmotriti pravila za sastavljanje odjeljaka GLAVA i TIJELO dokumenta. Građevinski dokumenti koji sadrže okvire obuhvaćeni su u 5. poglavlju.</p>
<p><b> <span>GLAVA dokumenta odjeljak</span>
</b></p>
<p>Odjeljak HEAD dokumenta definira njegov naslov i nije obavezna oznaka, ali dobro napisan naslov može biti od velike pomoći. Svrha zaglavlja je pružiti potrebne informacije za program koji tumači dokument. Oznake smještene unutar odjeljka HEAD (osim naziva dokumenta koji je opisan pomoću oznake <TITLE>) se ne prikazuju na ekranu.</p>
<p>Odjeljak zaglavlja otvara se oznakom <HEAD>. Obično ova oznaka odmah slijedi oznaku <HTML>. Završna oznaka</HEAD> prikazuje kraj ovog odjeljka. Između spomenutih oznaka nalaze se ostale oznake odjeljka zaglavlja.</p>
<p><b> <span>Naziv dokumenta</span>
</b></p>
<p>Spremnik s oznakama <TITLE>je jedina potrebna oznaka zaglavlja i koristi se za davanje naslova dokumentu. Obično se prikazuje u naslovnoj traci prozora preglednika. Označiti <TITLE>ne smije se zamijeniti s nazivom datoteke dokumenta; naprotiv, to je tekstualni niz potpuno neovisan o nazivu datoteke i lokaciji, što ga čini vrlo korisnim. Naziv datoteke strogo je određen operativnim sustavom računala na kojem je pohranjena. Također biste trebali razlikovati naslov dokumenta (s oznakom <TITLE>) iz naslova unutar dokumenta, obično označenih oznakama <Hx>.
</p>
<p><i> <b>Bilješka</b>
</i></p>
<p><i> <span>Obvezna priroda naslova dokumenta, općenito govoreći, u prirodi je jake preporuke. Dokument bez oznake <TITLE>također će biti prikazani u preglednicima. U isto vrijeme, različiti preglednici prikazat će različite informacije kao naslov prozora. Tako su rane verzije preglednika Netscape dale redak "Bez naslova". Drugi preglednici ili ne prikazuju ništa ili prikazuju adresu preuzete datoteke, ponavljajući informacije u traci lokacije preglednika.</span>
</i></p>
<p>Naslov dokumenta ispisan je između oznaka <TITLE>I</TITLE> i predstavlja niz teksta. U principu, naziv može biti neograničene duljine i sadržavati bilo koje znakove, osim nekih rezerviranih. U praksi biste se trebali ograničiti na jedan redak, imajući na umu da se naslov pojavljuje u naslovnoj traci prozora preglednika. Također biste trebali imati na umu što će ostati od naziva dokumenta kada se prozor preglednika minimizira. Možda se preporuča ograničiti duljinu naslova dokumenta na 60 znakova. Možete vidjeti kako se naslov prikazuje u prozoru preglednika na bilo kojoj slici u ovoj knjizi koja prikazuje primjer kako se dokument prikazuje.</p>
<p>Prema zadanim postavkama, tekst sadržan u naslovu dokumenta koristi se pri stvaranju oznake za dokument. Stoga, za više informacija, izbjegavajte bezlične nazive (Home Page, Index, itd.). Riječi poput ove 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 od okvira učita poseban dokument s vlastitim imenom, na ekranu će biti vidljiv samo naziv glavnog dokumenta. Međutim, također se preporučuje navođenje naslova pojedinačnih dokumenata koji će se uokviriti. Ovo pitanje je detaljnije obrađeno u 5. poglavlju.</p>
<p>Važnost naslova dokumenta određena je sljedećom činjenicom. Jer oznaka <TITLE>nalazi se gotovo na samom početku HTML datoteke, a zatim se nakon početka učitavanja dokumenta prvo prikazuje. Zatim se učitava glavni sadržaj dokumenta, dok preglednik počinje formatirati dokument u prozoru. Ovaj proces, općenito govoreći, ovisno o sadržaju i strukturi dokumenta, kao i brzini veze, može biti odgođen. Dovoljno dugo će korisnik promatrati prazan zaslon, čiji će jedini informativni red biti naziv dokumenta. Vrlo često (kada je veza prekinuta ili ako korisnik ne želi čekati preuzimanje dokumenta) sve informacije o dokumentu završavaju tu.</p>
<p><b><span>Odnos prema drugim dokumentima</span>
</b></p>
<p>Često su HTML dokumenti međusobno povezani, odnosno imaju veze međusobno. Veze mogu biti apsolutne ili relativne. I jedni i drugi imaju nedostatke. Apsolutne veze mogu biti preglomazne i prestati raditi ako premjestite dokument na niži nivo u hijerarhiji. Lakše je unijeti i ažurirati relativne veze, ali se ova veza također prekida ako se premjesti viši dokument. Obje vrste poveznica mogu se prekinuti prilikom prijenosa dokumenta s jednog računala na drugo.</p>
<p>Često se događa da korisnik preuzme veliki dokument na svoj stroj i isključi se s mreže kako bi ga detaljno proučio. Sve veze u lokalnoj kopiji dokumenta prestat će raditi. Da biste ih "reanimirali", morat ćete se ponovno okrenuti izvornom dokumentu koji se nalazi na udaljenom računalu.</p>
<p>Srećom, HTML programeri su predvidjeli ovaj problem i dodali dvije oznake, <BASE>I <LINK>, koji su uključeni u zaglavlje kako se odnos između dokumenata ne bi prekinuo.</p>
<p><b>Označiti <BASE>
</b>
</p>
<p>Označiti <BASE>koristi se za određivanje potpunog osnovnog URL-a dokumenta. Uz to, relativna veza nastavlja raditi ako se dokument prenese u drugi imenik ili čak na drugo računalo. Označiti <BASE>radi slično naredbi MS-DOS path, dopuštajući pregledniku da odredi vezu na dokument koji tražite, čak i ako se nalazi u dokumentu višeg hijerarhijskog ranga na drugom računalu.</p>
<p>Označiti <BASE>ima jedan potrebni HREF parametar iza kojeg slijedi puni URL dokumenta. Sljedeći 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>Označiti <BASE>govori pregledniku gdje da traži datoteku. U slučaju da korisnik radi s lokalnom kopijom datoteke i njegov stroj nije isključen s mreže, slika ikone Vijesti će se pronaći i prikazati u prozoru preglednika.</p>
<p><b>Označiti <LINK>
</b></p>
<p>Čak i ako oznaka <BASE>omogućuje vam da pronađete datoteku, pitanje odnosa dokumenata ostaje otvoreno. Važnost ovih odnosa raste proporcionalno složenosti vaših dokumenata. Kako bi se održala logička veza između njih, uvodi se HTML oznaka <LINK>.
</p>
<p>Označiti <LINK>označava odnos između dokumenta koji sadrži danu oznaku i drugog dokumenta ili objekta. Sastoji se od URL-a i parametara koji određuju odnos dokumenta. Naslov dokumenta može sadržavati bilo koji broj oznaka <LINK>. Tab. 1.1 opisuje opcije oznaka <LINK>i njihove funkcije.</p>
<p><i> <span><b>Tablica 1.1.</b> Opcije oznaka <LINK>
</span>
</i></p>
<p>Navedimo primjere oznake <LINK>s parametrima:</p>
<p><LINK REL="contents" HREF ="../toc.html">
</p>
<p><LINK HREF="mailto:sergeev@mail.ifmo.ru"
REV="made">
</p>
<p>Prvi redak označava vezu na datoteku sa sadržajem dokumenta (toc.html - tablica sadržaja) s izravnim odnosom sadržaja. Drugi redak opisuje poveznicu na URL autora dokumenta (s napravljenom inverznom relacijom).</p>
<p>Može postojati mnogo različitih odnosa između dokumenata. Primjeri drugih vrijednosti parametara REL: oznaka, autorska prava, pojmovnik, pomoć, početna stranica, indeks, toc, sljedeći, prethodni. Parametar REV također može imati sljedeće vrijednosti: autor, urednik, izdavač, vlasnik.</p>
<p><b>Označiti <META>
</b></p>
<p>Razvoj novih specifikacija jezika za označavanje hiperteksta traje dugo, a za to vrijeme tvrtke preglednika imaju vremena izdati nekoliko verzija svojih proizvoda. Dakle, u odjeljak zaglavlja može se dodati još jedna oznaka <META>, koji autorima dokumenata omogućuje definiranje informacija koje nisu HTML.</p>
<p>Ove informacije preglednik koristi za radnje koje nisu obuhvaćene trenutnom HTML specifikacijom. Označiti <META>neće vam trebati za izradu svojih prvih HTML dokumenata, ali će vam svakako trebati kako vaše stranice postanu 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 će protumačiti ovaj unos kao uputu za čekanje 60 sekundi i zatim učitavanje novog dokumenta. Ova se uputa često koristi pri promjeni lokacije dokumenata. Mali dokument s gornjim nizom može se ostaviti na starom mjestu dokumenta kako bi se automatski povezao s novom lokacijom.</p>
<p>Sljedeći redak:</p>
<p><МЕТА HTTP-EQUIV="refresh" CONTENT="60">
</p>
<p>nalaže pregledniku da ponovno učita stranicu svakih 60 sekundi. To može biti korisno ako se podaci na stranici često ažuriraju, kao što je praćenje burzovnih kotacija.</p>
<p>Korištenje elementa postalo je vrlo popularno <META>riješiti neke tipične probleme. Primjer je navođenje ključnih riječi koje koriste tražilice. Ova metoda vam omogućuje da u indeks dokumenta uključite dodatne riječi koje možda nisu eksplicitno uključene u njegov sadržaj. Da biste to učinili, u oznaci <META>naziv nekog svojstva navodi se kao vrijednost parametra NAME. A pomoću parametra CONTENT specificira se vrijednost ovog svojstva, na primjer:</p>
<p><МЕТА NAME="author" CONTENT="Александр
Сергеев">
</p>
<p>HTML specifikacija ne definira nikakva specifična imena svojstava koja će biti zapisana u oznaci. <META>. Međutim, postoji nekoliko često korištenih svojstava, kao što su opis, ključne riječi, autor, roboti itd.:</p>
<p><МЕТА NAME="description" CONTENT="Описание
возможностей языка HTML 4.0">
</p>
<p><МЕТА NAME="keywords" CONTENT ="тэг,
гипертекст, HTML, браузер">
</p>
<p>Zadane oznake <META>moglo bi se naznačiti, na primjer, za elektroničku verziju ove knjige.</p>
<p>Označiti <META>može imati parametre navedene u tablici. 1.2.</p>
<p><i> <span><b>Tablica 1.2.</b> Opcije oznaka <META>
</span>
</i></p>
<p>Još jedna važna svrha oznake <META>je pokazatelj kodiranja teksta. Dakle, za tekst na ruskom u Windows kodiranju, trebate napisati sljedeći redak:</p>
<p><МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=UTF-8">
</p>
<p><b><span>Ostali elementi zaglavlja</span>
</b></p>
<p>U zaglavlju 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>Napravite novi redak za svaki blok, tablicu ili element popisa i uvucite svaki podređeni element. <p>Bez obzira na stilove postavljene za element (CSS vam omogućuje promjenu ponašanja elementa pomoću svojstva <b>prikaz</b>), omotajte svaki blok ili element tablice u novi redak.</p><p>Također stavite uvlake za sve elemente ugniježđene u blok ili element tablice.</p><p>(Ako imate problema s razmakom između stavki popisa, možete staviti sve <b>li</b> elemenata na jednoj liniji. Lintu [uslužni program za provjeru kvalitete koda cca. per.] preporuča se u ovom slučaju umjesto greške izdati upozorenje.</p>
</blockquote>
<br><b>Preporučeno:</b> <ul>
<li>Maša <li>Glasha <li>Čeburaš</ul>
<br><b>Preporučeno:</b> <table>
<thead>
<tr>
<th scope="col">Dobit <th scope="col">porezi <tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>
</p><h3>Pravila CSS stiliziranja</h3><h4>Valjanost CSS-a</h4> <b>Koristite važeći CSS kad god je to moguće.</b> <p>Osim u slučajevima kada je potreban kod za preglednik ili pogreške validatora, koristite valjani CSS kod.</p><p>Koristite alate kao što je W3C CSS Validator za provjeru valjanosti koda.</p><p>Valjanost je važna, a opet mjerljiva kvaliteta koda. Pisanje valjanog CSS-a pomaže da se riješite suvišnog koda i osigurava ispravnu upotrebu stilskih tablica...</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 dati generički naziv...</p><p>Zamjenski nazivi jednostavno su varijanta naziva za elemente koji nemaju posebnu svrhu ili se ne razlikuju od svojih braće i sestara. Obično su potrebni kao "pomoćnici".</p><p>Korištenje funkcionalnih naziva ili naziva predložaka smanjuje potrebu za nepotrebnim promjenama dokumenta ili predložaka.</p><p><b><span>Nije preporučeno:</span>
</b>/* Zastarjelo: nema smisla */ #yee-1901 () /* Zastarjelo: opis izgleda */ .button-green () .clear () <br><b>Preporučeno:</b>/* Preporučeno: do točke i do točke */ #gallery () #login () .video () /* Preporučeno: zamjenski naziv */ .aux () .alt ()</p><h4>Nazivi identifikatora i klasa</h4>Za identifikatore i klase koristite što duža imena, ali što kraća. <p>Pokušajte točno formulirati što bi ovaj element trebao činiti, a pritom biti što je moguće sažetiji.</p><p>Ova upotreba klasa i identifikatora doprinosi lakšem razumijevanju i učinkovitosti koda.</p><h4>Selektori tipova</h4> <b>Izbjegavajte korištenje naziva klasa ili identifikatora s selektorima tipa elementa (oznaka).</b> <p>Osim kada je potrebno (npr. s pomoćnim klasama), nemojte koristiti nazive elemenata s nazivima klasa ili identifikatorima.</p><h4>Skraćenice za svojstva</h4> <b>Koristite skraćene unose svojstava gdje je to moguće.</b> <p>CSS nudi mnogo različitih skraćenih oblika (na primjer, <b>font</b>), koje se preporučuje koristiti gdje god je to moguće, čak i ako je navedena samo jedna od vrijednosti.</p><p>Korištenje stenografije svojstva korisno je za veću učinkovitost i bolje razumijevanje koda.</p><p><b><span>Nije preporučeno:</span>
</b>/* Ne preporučuje se */ border-top-style: nema; font-family: palatino, georgia, serif; veličina fonta: 100% visina linije: 1,6; padding-bottom: 2em padding-lijevo: 1em padding-desno: 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 specificirati jedinice za nulte vrijednosti osim ako za to nema razloga.</p><h4>0 u cijelom dijelu razlomka</h4> <b>Nemojte stavljati "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 poveznicama</h4> <b>Nemojte koristiti citate u poveznicama</b> <p>Nemojte koristiti navodnike ( <b>""
</b>
, <b>""
</b>) od <b>url()</b>
. </p><h4>Heksadecimalni nazivi boja</h4> <b>Koristite heksadecimalni zapis od tri znaka gdje je to moguće.</b> <p>Heksadecimalni zapis boja od tri znaka kraći je i zauzima manje prostora.</p><h4>Prefiksi</h4> <b>Selektori prefiksa s prefiksima koji su jedinstveni za trenutnu aplikaciju. <span><b>(nije potrebno)</b>
</span>
</b> <p>U velikim projektima i kodu koji će se koristiti za druge projekte ili druga mjesta, koristite prefikse (kao prostore imena) za identifikatore i nazive klasa. Koristite kratke, jedinstvene nazive nakon kojih slijedi crtica.</p><p>Korištenje prostora imena pomaže u sprječavanju sukoba imena i može olakšati održavanje stranice. Na primjer, prilikom pretraživanja i zamjene.</p><h4>Razdjelnici u klasama i identifikatori</h4> <b>Odvojite riječi u identifikatorima i nazivima klasa crticom.</b> <p>Nemojte koristiti ništa osim crtice za povezivanje riječi i kratica u selektorima radi poboljšanja čitljivosti i lakšeg razumijevanja koda.</p><p><b><span>Nije preporučeno:</span>
</b>/* Zastarjelo: riječi "demo" i "image" nisu odvojene */ .demoimage () /* Zastarjelo: 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 preglednika ili CSS "hakova" - prvo pokušajte na druge načine.</b> <p>Čini se primamljivim baviti se razlikama u načinu na koji različiti preglednici rade s CSS filterima, hakiranjem ili drugim zaobilaznim rješenjima. Sve ove pristupe treba uzeti u obzir samo kao posljednje sredstvo ako želite učinkovitu i lako održavanu bazu koda. Jednostavno rečeno, dopuštanje hakova i detekcije preglednika dugoročno će naštetiti projektu, jer znači da projekt slijedi put najmanjeg otpora. To olakšava korištenje hakova i omogućuje vam da ih koristite sve češće, što će rezultirati da ih koristite prečesto.</p><h3>Pravila CSS formatiranja</h3><h4>Naručivanje oglasa</h4> <b>Poredajte oglase po abecedi.</b> <p>Postavite deklaracije abecednim redom kako biste dobili dosljedan kod s kojim je lako raditi.</p><p>Prilikom razvrstavanja zanemarite prefikse preglednika. Istodobno, ako se za jedno svojstvo koristi nekoliko prefiksa preglednika, oni se također moraju sortirati (npr <b>-moz</b> treba biti prije <b>--webkit</b>
) </p><h4>Uvlake u blokovima.</h4> <b>Uvijek uvuci sadržaj bloka.</b> <p>Uvijek uvucite bilo koji sadržaj bloka, kao što su pravila unutar pravila ili deklaracije, kako biste pokazali hijerarhiju i učinili kod lakšim za razumijevanje.</p><h4>Nakon reklama</h4> <b>Stavite točku i zarez nakon svake deklaracije.</b> <p>Koristite točku-zarez nakon svake deklaracije za dosljednost koda i za lakše dodavanje novih svojstava.</p><h4>Nakon imena svojstava</h4> <b>Koristite razmake nakon dvotočka u deklaracijama.</b> <p>Uvijek koristite jedan razmak iza dvotočke (ali ne prije) u deklaracijama, za red u kodu.</p><h4>Selektor grana i oglasi</h4> <b>Selektore i deklaracije odvojite prijelomom retka.</b> <p>Pokrenite svaki selektor ili deklaraciju u novom retku.</p><h4>Razdvajanje pravila</h4> <b>Odvojite pravila prijelomom retka.</b> <p>Uvijek stavite prijelom između pravila.</p><h3>CSS meta pravila</h3><h4>Pravila grupiranja</h4> <b>Grupirajte pravila i označite grupe s komentarom. <span><b>(nije potrebno)</b>
</span>
</b> <p>Kombinirajte pravila u grupe kad god je to moguće. Označite grupe s komentarima i odvojite ih prijelomima redaka.</p><h3>Zaključak</h3><i>Budite dosljedni</i> <p>Ako uređujete kôd, odvojite nekoliko minuta da shvatite kako je napisan. Ako su matematički operatori odvojeni razmacima, učinite isto. Ako su komentari okruženi zagradama ili crticama, učinite isto sa svojim komentarima.</p><p>Ideja iza ovog vodiča je stvoriti zajednički vokabular koji omogućuje programerima da se usredotoče <b>što</b>žele izraziti, a ne kako <b>kako</b>. </p><p>Nudimo jedinstvena pravila dizajna koja vam omogućuju pisanje koda u istom stilu, ali je također važan 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 to izbjeći.</p><h3>Napomena prevoditelja</h3>Također bih želio napomenuti da se Google prvenstveno fokusira na velike, visoko opterećene projekte, gdje je svaki bajt skup, pa treba imati na umu da ako preporučuje pokretanje svakog selektora u novom retku ili korištenje razmaka umjesto tabulatora, onda to prvenstveno podrazumijeva da će kod nužno biti minimiziran i komprimiran prije korištenja na web mjestu. <p>Hvala svima koji su pročitali do ovog trenutka.</p><p>Oznake: Dodajte oznake</p>
<p>Članak nije posve relevantan.</span><br>U 10.2 i novijim verzijama, dodana je mogućnost preimenovanja stranice s pravilima stranice izravno u administratorskoj ploči motora, uz izravno uređivanje teksta pravila. Međutim, stranica s pravilima stranice ostaje. Postoji i nalazi se na bilo kojoj DLE stranici na http://my_site/rules.html <br>Kako iscijediti sav sok iz ove adrese – čitajte dalje</p>
<h4>Stranica s pravilima stranice u CMS DLE</h4>
<p>Stranica s pravilima web mjesta je statična stranica sustava. Obrađuje ga motor i generira na isti način kao i obična stranica sa statistikom. Samo što ga je nemoguće ukloniti - ne osigurava ga programer motora. Čak i ako su sama pravila web-lokacije isključena za prikaz tijekom registracije, tada je stranica s pravilima web-mjesta uvijek dostupna na http://my_site/rules.html Prva tražilica koja je tamo pronađe počet će povraćati i pljuvati po tekstu i Ime. Nije pametno. Uostalom, na svim stranicama DLE - ista stvar.</p>
<p>Kada stranica s pravilima web-mjesta uđe u mapu web-mjesta, tražilica je smatra "smećem" i ne uzima se u indeks pretraživanja, budući da su pravila stranice ista gotovo svugdje. Stoga je stranici s pravilima web-mjesta u DLE-u prema zadanim postavkama zabranjeno (zatvoreno) indeksiranje pretraživanja u datoteci ( <i>Disallow red: /rules.html</i>).</p>
<h4>Jedinstvenost "Pravila stranice"</h4>
<p>Osobno, moje mišljenje o stranici s pravilima stranice i o njenoj posebnosti je atavizam koji odvlači pažnju korisnika prilikom registracije. Pravila stranice su rudimentarni izdanak čiju su beskorisnost uspješno dokazali organizatori društvenih mreža.</p>
<p>Ne, dobro, je li netko vidio na facebooku ili twitteru neka strašna ili posebna pravila prilikom registracije? Ili su možda na Vkontakte i Odnoklassniki? To je to!</p>
<p><i>I neka web stranica, s posjećenošću od 1000 jedinstvenih - <br>počinje pisati svoja jedinstvena pravila za korisnike. <br>Što se mene tiče, najbolja pravila na stranici su njihova potpuna odsutnost. <br>Ako je korisnik normalan i adekvatan, sve razumije.</i></p>
<h4>Nema stranice - nema problema</h4>
<p>Nije tajna da blokiranje stranica i direktorija iz indeksiranja pretraživanja nije lijek za sve. Na ovaj ili onaj način, tražilica će prije ili kasnije "prožvakati" bilo koju stranicu web-mjesta. Na primjer, uzmite isti Yandex. Njegovi roboti za pretraživanje ispumpati će apsolutno sve što nađu sa stranice, a tek tada će početi sortirati i razmišljati hoće li stranice izdati u pretragu ili ne. To je sasvim očito, unatoč dirljivim uvjeravanjima Yandexa da on i njegovi roboti ne preuzimaju dodatni materijal sa stranice. Na primjer, ako je web stranica zatvorena od indeksiranja, Yandex sprema samo označenu adresu <i>, ili</i>(tko će ga zatvoriti).</p>
<p>Umjesto da kopate i blokirate stranicu "smeće" s pravilima stranice od indeksiranja pretraživanja, puno je bolje prepraviti je za neku drugu korisnu stvar i otvoriti joj pristup tražilicama - neka se smire. Ili, barem samo napišite svoje ponašanje na stranici i, opet, dopustite tražilicama pristup stranici.</p>
<h4>Otvorena pravila web mjesta za tražilice</h4>
<p>Poduzimamo hrabar korak i otvaramo pristup stranici s pravilima stranice za tražilice. Da bismo to učinili, u našoj datoteci nalazimo redak Disallow: /rules.html i izbrišemo njegov nafik. Učinjeno 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!". Kako se to ne bi dogodilo, preinačili smo stranicu "Pravila web-mjesta" - ubacite svoj jedinstveni tekst na bilo koju temu, slike i promijenite naziv (naslov) stranice.</p>
<h4>Uređivanje stranice "Pravila na stranici".</h4>
<p>Uređivanje stranice s pravilima stranice dostupno je na administrativnoj ploči DLE motora, u odjeljku "Popis svih odjeljaka" - "Pravila na web-mjestu". Uređivanje stranice "Pravila na stranici" izvodi se, kao i za svaku drugu statičnu stranicu - u normalnom načinu rada vizualnog uređivača teksta. Ovdje problemi mogu biti samo s pisanjem jedinstvenog teksta i odabirom jedinstvenih slika. Malo više nalazi se poseban prozor za unos naslova (naslova) za ažuriranu stranicu. No, takva se inovacija pojavila, počevši od verzije 10.2.</p>
<p><i>Za preimenovanje stranice s pravilima web-mjesta <br>kod starijih modela motora - <br>Morat ćete proniknuti u njegove sistemske datoteke.</i></p>
<h4>Preimenovanje stranice u "Pravila na stranici" <br>(za CMS DLE 10.1 i starije verzije)</h4>
<p>Izravno preimenovanje same stranice "Pravila na stranici" vrši se u datoteci adminpanel.lng koja se nalazi u mapi language/Russian/adminpanel.lng. Datoteka adminpanel.lng je datoteka sustava DLE motora. Da biste ga uredili, idite na svoj poslužitelj (inače - nema šanse).</p>
<p>Otvorite datoteku adminpanel.lng. <br>Tražimo liniju <br><b>"rules_edit" => "Opća pravila stranice"</b><br>Mijenjamo riječi "Opća pravila na stranici" u naš novi naziv. Zatvaramo. Mi štedimo. (Možete promijeniti samo ćirilicu koja se nalazi između navodnika. U protivnom će potpuno prestati raditi.)</p>
<p><b>Očistite predmemoriju motora i preglednika</b>. Nakon uređivanja i spremanja datoteke adminlogs.lng, potrebno je obrisati predmemoriju motora i predmemoriju preglednika kako bi motor natjerao da ponovno generira stranicu s novim imenom, a preglednik da je preuzme. Ako to ne pomogne, a stari naziv se i dalje prikazuje, trebate otići na admin panel motora, urediti i ponovno spremiti stranicu "Pravila na stranici" s nekim beznačajnim znakom. Na primjer - stavite točku u tekst (onda možete sve popraviti natrag). Takvo maltretiranje i zvjerstva definitivno će očistiti mozak motora i poslužitelja i natjerati ih da generiraju i prikažu novo ime.</p>
<p>Razmišljajući naglas. Osjeća se kao da se poštuje <b>celsoft</b>čitajući ovaj blog. Nešto kasnije, nakon ove objave, u admin panelu CMS DLE 10.2 verzije motora, postalo je moguće preimenovati stranicu s pravilima stranice na normalan civiliziran način, bez zamornog biranja u datotekama sustava skripti. Veliko hvala programerima CMS DLE za njihov rad i pažnju na probleme običnih ljudi.</p>
<p>Što čini <table rules="">čini? Koristio se za određivanje prikaza unutarnjih granica između redaka i stupaca. Ovaj atribut je zastario. Umjesto toga upotrijebite CSS za stiliziranje obruba tablice.</p><p>Atribut Pravila je zastario</span> Ovaj atribut je zastario i ne bi se trebao koristiti. Podrška preglednika za ovaj atribut je ograničena i njegovo korištenje može dovesti do neočekivanih rezultata. Umjesto toga, koristite CSS za stiliziranje tablica.</p><h2>Atribut PRAVILA</h2><p>RULES , HTML 4.0 atribut, označava treba li postojati unutarnji obrub u tablici. Pregledat ćemo svaku od vrijednosti PRAVILA i pokazati kako se koriste. PRAVILA i OKVIR imaju dosadan način da mijenjaju zadane vrijednosti jedno drugom. Kako biste pojednostavili svoj život, evo osnovnog pravila: ako koristite PRAVILA, upotrijebite i OKVIR i GRANICA. Lakše je izbjeći zabunu.</p><h2><span>Vrijednost NONE za atribut RULES</span></h2><p>RULES=NONE znači da nema unutarnjih granica. RULES=NONE je zadano ako ne koristite BORDER ili ga postavite na nulu, ali u suprotnom mora biti izričito navedeno da nema unutarnjih granica. Imajte na umu da trenutno Netscape ne prepoznaje RULES .</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>Zvjezdani cvijet</td><td>miješani tofu</td>
</tr><tr><td>Miko</td><td>juha od povrća od riže</td>
</tr><tr><td>Andy</td><td>humus</td>
</tr><tr><td>Ping</td><td>francuski tost</td>
</tr></table><h2><span>SVE vrijednost za atribut RULES</span></h2><p>RULES=ALL označava da sve unutarnje granice trebaju biti vidljive. RULES=ALL se obično koristi zajedno s FRAME=VOID tako da postoje vanjske granice, ali ne i unutarnje granice.</p><p> <TABLE BORDER=2 FRAME=VOID RULES=ALL>
</p><p>Kada se primijeni na tablicu, ta vrijednost nam daje ovaj rezultat:</p><table border="2" rules="ALL"><tr><th>Ime</th><th>hrana</th>
</tr><tr><td>Zvjezdani cvijet</td><td>miješani tofu</td>
</tr><tr><td>Miko</td><td>juha od povrća od riže</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 bi trebali postojati granice između stupaca, ali ne i između redaka.</p><p> <TABLE BORDER=2 RULES=COLS FRAME=BOX>
</p><p>Kada se primijeni na tablicu, ta vrijednost nam daje ovaj rezultat:</p><table border="2" rules="COLS"><tr><th>Ime</th><th>hrana</th>
</tr><tr><td>Zvjezdani cvijet</td><td>miješani tofu</td>
</tr><tr><td>Miko</td><td>juha od povrća od riže</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>RULES=ROWS označava da bi trebali postojati granice između redaka, ali ne i između stupaca.</p><p> <TABLE BORDER=2 RULES=ROWS FRAME=BOX>
</p><p>Kada se primijeni na tablicu, ta vrijednost nam daje ovaj rezultat:</p><table border="2" rules="ROWS"><tr><th>Ime</th><th>hrana</th>
</tr><tr><td>Zvjezdani cvijet</td><td>miješani tofu</td>
</tr><tr><td>Miko</td><td>juha od povrća od riže</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>RULES=GROUPS omogućuje postavljanje granica između grupa ćelija tablice. Postoje dva načina grupiranja ćelija: po retku i po stupcu. Prijeđimo preko svakog od njih. Imajte na umu da trenutno Netscape ne prepoznaje RULES .</p><h3>Grupiranje po retku</h3><p>Za grupiranje po retku koristite <THEAD ...> , <TBODY ...> , <TFOOT ...>oznake. <THEAD ...>označava redove zaglavlja tablice, <TBODY ...>označava glavni dio tablice, i <TFOOT ...>označava donje redove. Tako, na primjer, ovaj kod stvara tablicu s 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>Zvjezdani cvijet</TD><TD>miješani tofu</TD><TD>5.95</TD></TR> <TR><TD>Miko</TD><TD>juha od povrća od riže</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 tablica prikazuje:</p><table border="2" rules="GROUPS"><tr><th>Ime</th><th>hrana</th><th>cijena</th>
</tr><tbody><tr><td>Zvjezdani cvijet</td><td>miješani tofu</td><td>5.95
</td>
</tr><tr><td>Miko</td><td>juha od povrća od riže</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 stupcu</h3><p>Za grupiranje po stupcu koristite <COLGROUP ...>oznaku i njen atribut SPAN. <COLGROUP ...>treba se malo naviknuti jer zapravo ne obilazi nijednu ćeliju tablice. Nalazi se na vrhu koda tablice gdje postavlja pravila o stupcima tablice uključujući i one koji su grupirani zajedno. <COLGROUP SPAN="...">do označava koliko je stupaca u svakoj grupi. Ako izostavite SPAN onda se pretpostavlja da grupa ima samo jedan stupac. Tako, na primjer, sljedeći kod kaže da je prvi stupac u grupi sam po sebi, a tri nakon toga su zajedno u grupi. Primijeti da <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">Vrhunski povezani članci</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/hr/o-premii-muz-tv-o-premii-muz-tv-golosovanie-za-nominantov-muz.html">
<div class="img_container"><img src="/uploads/0ef01b6c28f8f566857fb20f21ef5345.jpg" border="0" alt="O nagradi mus-tv Glasovanje za kandidate za mus tv" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">O nagradi mus-tv Glasovanje za kandidate za mus tv</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/hr/kto-vruchal-premiyu-muz-tv-priz-za-vklad-v-razvitie-muzykalnoi.html">
<div class="img_container"><img src="/uploads/9763b42bdc7b010bc2e64041cc499d86.jpg" border="0" alt="Nagrada"За вклад в развитие музыкальной индустрии"" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Nagrada "Za doprinos razvoju glazbene industrije"</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/hr/etapy-i-mehanizm-processa-inficirovaniya-i-razmnozhenie-virusov-kak.html">
<div class="img_container"><img src="/uploads/cbe7bd1ce4264b83d3e19553689c6b8b.jpg" border="0" alt="Kako djeluje virus gripe: zašto se razbolimo?" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Kako djeluje virus gripe: zašto se razbolimo?</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/hr/category/programs/">Programi</a></li>
<li class=""><a href="https://bumotors.ru/hr/category/safety/">Sigurnost</a></li>
<li class=""><a href="https://bumotors.ru/hr/category/windows-10/">Windows 10</a></li>
<li class=""><a href="https://bumotors.ru/hr/category/iron/">Željezo</a></li>
<li class=""><a href="https://bumotors.ru/hr/category/windows-8/">Windows 8</a></li>
<li class=""><a href="https://bumotors.ru/hr/category/vkontakte/">U kontaktu s</a></li>
<li class=""><a href="https://bumotors.ru/hr/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">© 2022 bumotors.ru. Kako postaviti pametne telefone i računala. Informativni portal.</span>
</div>
</div>
</div>
</div>
</body>
</html>]]>
