Oznake koje definiraju pasus, razmak, HTML blok i pasus
Razmotrimo detaljno HTML blokovi i paragrafi kao elementi web stranice.
- HTML paragraf definisano oznakama.
- HTML paragrafi obično sadrže tekst, oznake za formatiranje, slike.
- HTML paragraf ne može sadržavati blok elemente kao što su zaglavlja
- , blok
i drugi stavovi. - HTML blok definisano oznakama .
- HTML blok može sadržavati bilo koje elemente web stranice, u bilo kojoj količini.
- HTML blokovi odličan za web stranice i lak za manipulaciju.
Razmotrite kod u nastavku:
rezultat:
To možemo vidjeti HTML paragrafi su uvučeni okomito - ovo je karakteristika oznaka. HTML blokovi
Oznake ne smiju sadržavati druge ili
Oznake i, u principu, ista stvar, ali je W3C konzorcij preporučio korištenje malih slova. V nova verzija HTML kao iu modernom XHTML-u, upotreba velikih slova pri pisanju oznaka je zabranjena.
Blokiraj
HTML prostor iz tabele posebnih znakova
HTML prostor omogućava vam da povećate razmak između riječi i znakova.
Što se tiče razmaka između riječi, bez obzira koliko ih ima u Notepadu, odnosno u izvornom kodu, na web stranici će biti prikazana samo jedna. Ako trebate povećati udaljenost, koristite razmak iz tablice simbola. Pitate: Zašto su nam potrebne ove kodirane vrijednosti običnih znakova? - Odgovorit ću: Oni su potrebni za prikaz, na primjer, takvih zagrada< >... Drugim riječima, da bih prikazao oznake, u svom editoru pišem: ... Oznake , kao što se sjećamo, konvertirajte tekst u monospaced (tipografski).
Načini prikaza HTML paragrafa
Primjeri izlaznih paragrafa.
Zdravo! Nastavimo sa osvrtom na osnove programiranja web stranica. Teško je zamisliti bilo koga od njih bez oznake paragrafa u svom kodu. Danas ćemo razmotriti kako to ispravno napisati i opis nekoliko dodatnih radnji uz tekst.
Primjer
Uzmimo primjer kako napraviti paragraf u HTML kodu.
Jedna ili više rečenica.
Preduslov je prisustvo početne i završne oznake. Usput, sve se može uraditi direktno u notepadu, samo tada ćete morati sačuvati datoteku u odgovarajućem formatu.
Formatiranje
Često primjećujem da ljude zanima kako napraviti crvenu liniju. To je vrlo lako učiniti za određeni paragraf.
Omogućavanje ovih opcija će uvući prvi red 15 piksela slijeva. Ako se takve promjene trebaju primijeniti na sve P oznake, onda u CSS fajl, koji se povezuje sa stranicama stranice, možete napisati kod prikazan ispod.
Lično, obično ne pravim crvene linije kada uređujem kod u notepadu ili drugom uređivaču.
Ja samo uključujem padding između tekstualnih blokova. Da biste to učinili, morate napisati u CSS-u specijalni parametri.
p (margin-bottom: 25px;)
Ako koristite ovu konstrukciju, tada će nakon svakog pasusa biti uvlaka od 25 piksela.
U stvari, postoji mnogo opcija za rad sa HTML-om i raznim stilovima. Opisao sam samo neke od njih, jako je teško sve obuhvatiti u jednom članku.
Želite li znati više? Možda će moji prethodni postovi o sljedećim temama biti od pomoći:
Ovdje ću završiti članak i, mislim, sada neće biti teško napraviti pasuse u HTML-u i lijepo ih stilizirati uz pomoć posebnih oznaka.
Želim vam puno uspjeha u savladavanju programiranja. Usput, jeste li ikada razmišljali o zaradi na informativnim nekomercijalnim stranicama? Jednostavno prekrasne informacije pružene posebno za svoje čitaoce u.
Online poslovanje i finansije su ključne teme ovog bloga. Možete se upoznati sa pojedinačnim potencijalnim klijentima na mreži upravo sada iz objavljenih materijala. Nastavljam da pripremam i objavljujem nove, i što je najvažnije, zaista korisne sadržaje. Pretplatite se na Workip ažuriranja na vašem email... Do sljedećeg puta.
- u procesu kreiranja web stranice, moramo puno raditi sa tekstualnim blokovima, odnosno tekstualnim frazama. Jednom sam trebao dodati tekstualnu frazu, tako da je prije ove tekstualne fraze bilo nešto uvuci tekst od html ruba blok u koji je dodan dati tekst.
Dakle, prva metoda je najprirodnija i najjednostavnija. Da biste uvukli ispred teksta, dodajte ispred teksta html kod razmaci - Možete dodati html prostorni kod u bilo koji html uređivač.
Evo primjera radnog koda za postavljanje uvlačenja za tekst, koristeći razmaknicu:
Html uvuci tekst na lijevo, koristite prostorni kod
U ovom primjeru, prije teksta koji smo odabrali, razmak je -& nbsp; dodano četiri puta, kao rezultat, dobijamo uvlaku koja nam je potrebna.
Znamo da kodom za razmak rukuje svaki pretraživač. Stoga, dodavanjem potrebnog broja razmaka ispred teksta, možete dobiti potrebno uvlačenje za tekst.
Dobra stvar u vezi sa ovom metodom je što garantovano radi u bilo kom pretraživaču.
Ali imati ovu metodu postoji značajan nedostatak. Da bi uvlačenje teksta bilo dovoljno veliko, u html kodu, prije teksta, morat ćete dodati veliki broj svemirski likovi, koji možda ne izgledaju lijepo, glomazni i neprofesionalni.
Jedna od opcija za rješavanje ovog problema je sljedeći način postaviti udubljenje.
Uvlačenje HTML teksta, drugi metod - ovaj metod se zasniva na svojstvima oznake blok citata. Ova oznaka postavlja uvlačenje od približno 40 piksela lijevo i desno za tekst koji se nalazi u njoj. Osim toga, podstava je postavljena na vrhu i na dnu. Html primjer kod za korištenje ove metode je dat u nastavku:
na lijevoj strani, koristite oznaku blok citat
Kao što vidite, ovaj način postavljanja uvlačenja teksta je vrlo jednostavan za korištenje, ali ima i značajan nedostatak. Uvlačenje koje postavlja oznaka blok citat, je fiksna i uvijek je ista vrijednost - 40px.
Za popravku situacije i prilikom dodavanja html indent i za tekst biti u mogućnosti postaviti bilo koju vrijednost, koristićemo treću metodu.
Uvlačenje HTML teksta, treći metod.
Ovdje ćemo koristiti svojstvo uvlačenja teksta CSS Cascading Style Sheets.
Ako otvorimo CSS referencu, na stranici sa opisom svojstava text-indent, vidjet ćemo da uz pomoć text-indent možemo podesiti količinu uvlačenja prvog reda ili prvog pasusa bilo kojeg blok teksta.
Razmatramo primjer s kratkim tekstualnim blokom, tako da su svojstva uvlačenja teksta u redu za naš slučaj.
Ispod je html kod koji uvlači tekst koristeći text-indent. Iz primjera možete vidjeti da postavljanjem različitih vrijednosti argumenata za text-indent, možemo promijeniti količinu uvlačenja teksta:
Htmlindenttekst, radi CSS stil - uvlaka teksta
Po mom mišljenju, ovaj način postavljanja uvlačenja za tekst je najoptimalniji, ali, ipak, razmislite o drugom načinu postavljanja uvlačenja, korištenjem slika.
Uvlačenje HTML teksta, četvrti metod - ovdje ćemo koristiti sliku za postavljanje uvlačenja.
Kao radni primjer, pogledajmo html kod koji pokazuje kako ova metoda funkcionira:
na lijevoj strani, koristite sliku
Iz datog primjera se jasno vidi da promjenom širine slike možemo promijeniti poziciju teksta, odnosno postaviti potrebno uvlačenje teksta.
Kao sliku možete koristiti sliku čija su širina i visina jednake jednom pikselu. Kako slika koju koristimo nije vidljiva na stranici, postavite boju za nju potpuno istu kao i pozadina stranice stranice.
Po mom mišljenju, gore navedene metode postavljanja uvlaka teksta sasvim su dovoljne da organizirate uvlačenje koje vam je potrebno u bilo kojoj situaciji kada dodajete sadržaj na stranicu vaših web stranica.
Svaki tekst ima svoju jedinstvenu strukturu: knjige su podijeljene na dijelove, odjeljke i poglavlja, novine i časopisi imaju zasebne naslove i podnaslove, koji, zauzvrat, uključuju fragmente teksta koji također imaju svoju strukturu: pasuse, uvlake itd.
Tekst koji se nalazi na web stranicama nije izuzetak, on mora imati i logičku strukturu koja je razumljiva svakom korisniku. Uostalom, mnogo ovisi o tome koliko će tekst na stranici biti zgodan i jednostavan: prije svega, kakav će utisak posjetitelj imati o vašoj web-lokaciji.
Za kreiranje strukturnih jedinica teksta kao što su paragrafi, HTML dokumenti koriste oznaku
, koji odvaja tekstualne pasuse vertikalnim uvlačenjem (prazan red se dodaje ispred i iza pasusa).
Napomena: podrazumevano je razmak između pasusa 1em (em je jedinica mere jednaka visini fonta), odnosno razmak između pasusa direktno zavisi od veličine fonta.
Da biste promijenili uvlake između pasusa bez promjene veličine fonta, možete koristiti CSS svojstvo margina.
Ne zaboravite završnu oznaku
Većina pretraživača će ispravno prikazati HTML dokumente, čak i ako zaboravite završnu oznaku.
Paragraf
Drugi paragraf
Ovaj kod će raditi u većini pretraživača, ali nemojte se oslanjati na njega. Zaboravljena završna oznaka može dovesti do neočekivanih rezultata ili grešaka.
crvena linija
Šta je crvena linija? Po definiciji, ovo je početni red pasusa koji je prethodno bio označen crvenom bojom (otuda i naslov). Prije nego što je izmišljena tipografija, knjige su se pisale rukom - poglavlje ili dio teksta, prva riječ ili slovo je ispisano crvenom bojom. Tako se pojavio koncept "pisanja od crvene linije" - znači početak nove misli, poglavlja ili dijela.
Međutim, prilikom kreiranja web stranica, dizajn crvene linije se rijetko koristi, unatoč činjenici da vam omogućava da vizualno percipirate tekst s mnogo većom praktičnošću, što je prilično važno za tradicionalnog čitaoca - nije svima ugodno čitati elektroničke verzija teksta.
Da dodate crvenu liniju svojim paragrafima, morate koristiti svojstvo CSS-a za uvlačenje teksta, koje vam omogućava da uvučete prvu rečenicu:
Pokušajte "
U gornjem primjeru, prvi red svakog pasusa na stranici počinje uvlačenjem od 25px. Primjer ispod pokazuje kako možete postaviti crvenu liniju samo za određeni pasus na stranici.
Kao i u svakoj pravoj umjetnosti, u dobrim tekstovima nema sitnica, na koje neki uključuju i crvenu liniju, smatrajući da njihova upotreba nije toliko bitna. Međutim, treba shvatiti da svaki zarez nosi i estetsko i semantičko opterećenje, a ne samo da je počast pravilima gramatike - to se odnosi i na formatiranje.
Pokušajte "Napomena: nije potrebno postaviti padding na 25px, možete izabrati optimalna veličina same indentacije, takođe uz pomoć svojstva text-indent moguće je napraviti liniju koja viri iznad ostatka teksta, za to je potrebno postaviti negativnu vrijednost za svojstvo (na primjer: -30px).
Zadatak
Uvucite prvi red svakog pasusa.
Rješenje
Kada trebate postaviti uvlačenje pasusa, koje se također naziva crvena linija, najbolje je koristiti svojstvo stila uvlaka teksta. Njegova vrijednost određuje koliko treba pomaknuti tekst prvog reda udesno početna pozicija... U ovom slučaju, širina tekstualnog bloka se ne mijenja i ostaje inicijalno postavljena. Količina udubljenja se može specificirati u pikselima, procentima ili drugim dostupnim jedinicama (primjer 1).
Primjer 1. Uvlačenje prvog reda
HTML5 CSS 2.1 IE Cr Op Sa Fx
Babilonski pandemonijum, prema biblijskoj tradiciji, je neuspeli pokušaj kralja Nimroda da u Babilonu sagradi stub do neba. Bog, ljut na ljude zbog njihove nepromišljene želje, odlučio je kazniti graditelje: pomiješao je njihov jezik tako da su prestali razumjeti jedan drugog, bili primorani da obustave gradnju i malo po malo rasuli po svijetu. Otuda je, kako su stari objasnili, nastala razlika u jezicima.
U uobičajenom smislu, vavilonski pandemonijum znači nered, zbrku sa velikom gomilom ljudi.
Rezultat ovog primjera prikazan je na sl. jedan.
