Struktura gotovo svake web stranice koju pronađemo i koristimo na webu stvorena je pomoću HTML-a, standardiziranog sustava za kategorizaciju tekstualnih datoteka. Prijelomi stranica, odlomci, jaka slova, kurziv i druge značajke dodaju se pomoću HTML-a. Upotrebom oznaka, koje preglednicima upućuju kako da rukuju sadržajem, HTML pomaže u stvaranju ove strukture.
Na primjer, stavili bismo riječ između oznaka strong>bold/strong> kako bi izgledala podebljano. Oznaka za otvaranje (/) označava gdje želimo da bold završava, dok prva oznaka (/) označava gdje želimo da bold počinje. Služi kao temelj za većinu web stranica. Dakle, ovo je mjesto za početak ako učite kodirati.
Kako dodati prostor u HTML
Osim jednog razmaka između riječi, svi prazni razmaci koje unosimo u HTML tekst za prikaz u pregledniku se zanemaruju. Kao rezultat toga, moramo programirati prazne prostore koje želimo u našem dokumentu. Svaki redak teksta može imati razmak u HTML-u. Na primjer, možemo umetnuti prazna mjesta u sadržaj tablice i odlomka pomoću HTML objekta. Budući da HTML-u nedostaje slovo na tipkovnici za prazan prostor, moramo unijeti entitet da bismo dodali svaki razmak.
Možda se čini jednostavno, ali dodavanje prostora u naš HTML može biti izazovno. Postoji najmanje pet različitih pristupa rješavanju ovoga.
Tijekom ove obuke vidjet ćemo mnoge primjere. Također će pokazati kako iskoristiti složenije oblike prostora.
niz znakova java
Sve je to moguće u običnom HTML-u bez upotrebe CSS-a. Ali imajte na umu da je dodavanje prostora u vaš HTML najbolje učiniti putem CSS-a.
Kako izgleda ASCII razmak?
Razmak je predstavljen ASCII simbolom 20. Ali to je samo prihvaćena praksa.
Postoji pet različitih vrsta prostora koje možete koristiti u HTML-u. Nevještom oku izgledaju identično, iako imaju donekle različite funkcije.
Znak tabulator, koji simulira pritiskanje tipke tab na tipkovnici, još je jedna opcija. A znak za povratak na početak reda, koji simulira pritiskanje tipke enter na tipkovnici, još je jedan primjer.
Neprekidni prostor:
U svemiru:
Em razmak:
Tanak prostor:
Standardni prostor:
Nova linija (povratak):
Tab znak:
Lijeva strana predstavlja lik , a desna strana predstavlja HTML kôd.
Koliko je širok lik u prostoru?
Za razmake postoje četiri standardne širine:
Što znači znak za razmak u HTML-u?
je najrašireniji HTML entitet.
arraylist java
Kako bi ovaj tekst ispunio prostor, pokušajte ga baciti.
Zamislimo, na primjer, da želimo dodati dva razmaka nakon fraze, ali mehanizam za renderiranje web stranice sam uklanja jedan od razmaka. Da dodamo dva razmaka, možda bismo mogli ući
Razmak: što je to?
Znakovi koji nisu vidljivi nazivaju se razmaci. Sastoje se od:
- prostori,
- kartice, i
- prijelomi retka (povratak na novi red, pomak retka ili oboje),
Zašto je ovo ključno?
Ova slova, na primjer, nisu vidljiva u programu za obradu teksta, ali utječu na prostor i oblikovanje teksta. Preglednik sažima brojne razmake u jedan razmak u HTML-u, koji se razlikuje od ostalih jezika za označavanje.
Postoji nekoliko razmaka između riječi u ovom HTML-u, a svaki redak završava znakovima CRLF (povratak na početak, novi redak). Preglednik će smanjiti sve razmake.
Primjer
Za dobre stvari treba više vremena.
Izlaz:
Umetanje razmaka
- Upotrijebite znak neprekinutog razmaka ( ) za dodatni razmak.
- Svojstvo CSS padding može se koristiti za povećanje prostora unutar elementa u različitim okolnostima.
- CSS atribut margine omogućuje dodavanje dodatnog prostora oko elementa.
Iako su neprekinuti razmaci korisni, ne bi se trebali pretjerano koristiti jer bi to moglo ometati način na koji se materijal prikazuje u preglednicima. Osim toga, suzdržite se od korištenja neprekinutih razmaka u stilske svrhe kao što je uvlačenje ili centriranje elementa na web stranici; stilskim zahtjevima umjesto toga treba upravljati putem CSS-a.
Osim entiteta, HTML također podržava sljedeće dodatne entitete za brojne susjedne prazne prostore:
Entitet znaka koristi se za predstavljanje razmaka. En je mjerna jedinica koja je ekvivalentna 8 piksela ili polovini širine em-a (16 piksela).
Sintaksa za en razmak između sadržaja je Evo primjera kako koristiti HTML &ensp entitet:
Ovdje je primjer za entitet en svemir.
Izlaz:
Entitet koristi se u gornjem primjeru za dodavanje razmaka u HTML, a njegova širina je 8 piksela. Mogu se koristiti i na nekoliko susjednih lokacija.
Održavanje oblikovanja i razmaka
Ako želite zadržati formatiranje i razmake koji su navedeni, postoje dvije mogućnosti:
- Dodavanje HTML oblikovanja i prostora
- Korištenje a
tag.
Korištenje oznake 'pre'
Ovi ishodi nastaju zamjenom
oznaka za
tag:
Primjer
pre> Good things take more time
Izlaz:
Da,
tag keeps the formatting as it was originally, but it also switches to a monospaced typeface. All of these can be fixed; however, using the <pre> tag isn't always the best option. HTML spacing is a more popular method.</pre>
Dodavanje HTML oblikovanja i prostora
Kao alternativu, možemo uključiti HTML elemente i simbole kao što su sljedeći:
inurl:.git/head
Dobre stvari hoće
uzeti više vremena.
Izlaz:
Prijelom retka zahtijeva
element.
Neprekidni prostor:
Preglednik ne sažima razmake dodane neprekinutim znakom razmaka ().
Osim toga, kao što ime sugerira, sprječava preglednik da tamo razdvoji dvije riječi.
Za dobre stvari treba više vremena.
Izlaz:
U ovom modelu dodaje se 10 razmaka na početku teksta. Drugi se stavlja između ' uzima ' koji neće biti izoliran kada se rečenica prelomi zbog ograničenja prostora.
Atribut Padding
Unutarnji prostor elementa povećava se s CSS atributom padding.
Uzima vrijednosti u rasponu od jedan do četiri, počevši od gornje, desne, donje i desne strane.
The 'div' element ima ispunu od 20 piksela sa svih strana.
Inner spacing is 20px with a div attribute
Izlaz:
Atribut margine
- S atributom CSS margine dodaje se dodatni prostor oko elementa.
- Uzima vrijednosti u rasponu od jedan do četiri, počevši od gornje, desne, donje i desne strane.
The 'div' element ima marginu od 40 piksela sa svih strana.
kako pristupiti icloud fotografijama
Outer spacing is 20px using the div and margin attribute
Izlaz:
Padding vs Margin
- Ispuna i margina povećavaju prostor elementa.
- Ispuna ostavlja prazninu koja se smatra sastavnim dijelom elementa.
- Prostor stvoren marginom smatra se postojećim izvan granica elementa.
- Ova varijacija utječe na područje klika, boje pozadine i druge atribute web stranice.
Netko bi mogao povjerovati da je dodavanje razmaka u HTML jednako jednostavno kao stalno pritiskanje razmaknice. Ali stvari jednostavno ne funkcioniraju tako. Pritiskom na razmaknicu više od jednom nećete dodati više obližnjih praznina kao što bi to bilo u tekstualnom dokumentu. Preglednik će kombinirati sve obližnje prazne prostore u jedan ako to učinimo u HTML-u. Kako bismo pokazali što se događa kada koristimo nekoliko razmaka u HTML-u, pogledajmo primjer:
Dakle, nakon mnogo puta korištenja razmaknice, ne možemo dodati još praznih mjesta
Izlaz:
Uzastopnim pritiskanjem razmaknice u HTML-u, kao što se vidi u gornjem primjeru, pokušavamo umetnuti brojne uzastopne prazne prostore na web stranicu. Međutim, preglednici prikazuju više susjednih praznih mjesta kao jedan razmak i zanemaruju razmake prije, poslije i izvan komponenti. Fenomen je poznat kao kolaps razmaka. Iako smanjivanje razmaka ponekad može biti neugodno, postoji nekoliko tehnika za dodavanje više razmaka u HTML-u i CSS-u (kaskadni listovi stilova).
&
Entitet znakova koristi se za predstavljanje em prostora. Širina em, koja iznosi 16 piksela, ekvivalentna je emsp.
Sintaksa za em razmake u tekstu je Evo primjera kako koristiti HTML &emsp entitet:
Evo primjera za njihov prostorni entitet.
Izlaz
Entitet se u gornjem primjeru koristi za dodavanje razmaka u HTML, a njegova širina je 16 piksela. Također se mogu koristiti u nekoliko susjednih prostora.
&thinsp
Entitet znakova koristi se za predstavljanje tankog prostora, često poznatog kao uski prostor. Jedna šestina em je širina &
Tanki razmak napisan je kao sadržaj između u sintaksi. Ovdje je primjer kako koristiti HTML entitet ' '
css komentar
Ovo je primjer entiteta tankog prostora.
Izlaz
Entitet se u gornjem primjeru koristi za dodavanje tankih razmaka u HTML, a njegova je širina jedna šestina em. Također se koriste u nekoliko susjednih prostora.
Ispod je ASCII slika 'Bok'. # # ##### # # # ##### # # # # # # # # # # #####
Izlaz:
Prednosti korištenja razmaka
Zašto su razmaci važni?
Praznina je temeljni element dobrog dizajna, po mom mišljenju kao dizajnera. Dizajneri se pozivaju na negativni prostor, ili prostor između dijelova u kompoziciji, kada koriste izraz 'bjelina'. To je prazan prostor između grafika, margina i oluka na stranici koji nije ničim označen. Razmak između stupaca, redaka teksta i slika oku daje prostor za vizualno disanje.
Postoji uvjerljiv razlog zašto je razmak ključna komponenta dizajna. Može revolucionirati dizajn naše web stranice i pružiti mu nekoliko prednosti ako se pravilno primijeni. Moramo proizvoditi i stvarati izglede koji su ugodni oku i potiču čitatelje da nastave. Ključno je stalno imati na umu da je isporuka fantastičnog proizvoda našim klijentima naš prioritet kada dizajniramo za web.
Praznina se može koristiti za vođenje čitatelja od jednog elementa do drugog, stvaranje sklada i ravnoteže i pomoć pri brendiranju dizajna. Naši ključni ciljevi su učiniti web stranicu jednostavnom i jasnom te pružiti sadržaj koji će se našim korisnicima svidjeti i cijeniti. Prazan prostor nije samo 'prazan' prostor; to je značajka dizajna koja omogućuje postojanje stavki na stranici. Područje uspostavlja ravnotežu i služi kao stalni podsjetnik da postoje lijepi dizajni. Da bismo prenijeli jasnu poruku, ne moramo napraviti izgled koji je preopterećen tekstom i grafikom.