Si të bëni dhëmbëzim nga një skaj në html. Si të futni tekstin dhe imazhet në HTML

Për mendimin tim, kjo mënyrë e vendosjes së dhëmbëzimit për tekstin është më optimale, por, megjithatë, merrni parasysh një mënyrë tjetër të vendosjes së dhëmbëzimit, duke përdorur imazhe.

Indentacioni i tekstit HTML, metoda e katërt - këtu do të përdorim një imazh për të vendosur dhëmbëzimin.

Si shembull pune, le t'i hedhim një sy kodit html që tregon se si funksionon kjo metodë:

Nga shembulli i dhënë shihet qartë se duke ndryshuar gjerësinë e figurës, ne mund të ndryshojmë pozicionin e tekstit, domethënë të vendosim dhëmbëzimin e kërkuar për tekstin.

Si imazh, mund të përdorni një imazh, gjerësia dhe lartësia e të cilit janë të barabarta me një piksel. Në mënyrë që imazhi që po përdorim të mos jetë i dukshëm në faqe, vendosni ngjyrën për të saktësisht të njëjtë me sfondin e faqes së faqes.

Sipas mendimit tim, metodat e mësipërme të vendosjes së dhëmbëve të tekstit janë mjaft të mjaftueshme për të organizuar dhëmbëzimin që ju nevojitet në çdo situatë kur shtoni përmbajtje në faqen e faqeve tuaja.

- në procesin e krijimit të një faqe interneti, duhet të punojmë shumë me blloqe teksti, ose fraza teksti. Një herë, më duhej të shtoja një frazë teksti, në mënyrë që para kësaj fraze teksti të kishte disa indent tekst nga html edge blloku në të cilin është shtuar teksti i dhënë.

Pra, metoda e parë është më e natyrshme dhe e thjeshtë. Për të futur tekstin, shtoni kodin html të një hapësire përpara tekstit - Mund të shtoni kodin html të një hapësire në çdo redaktues html.

Këtu është një shembull i një kodi pune për vendosjen e dhëmbëzimit për tekstin, duke përdorur kodin e hapësirës:

HTML teksti i dhëmbëzimit në të majtë, përdorni kodin e hapësirës

Ne e dimë se kodi i hapësirës së bardhë trajtohet nga çdo shfletues. Prandaj, duke shtuar numrin e kërkuar të hapësirave para tekstit, mund të merrni dhëmbëzimin e kërkuar për tekstin.

E mira e kësaj metode është se është e garantuar të funksionojë në çdo shfletues.

Por kjo metodë ka një pengesë të konsiderueshme. Në mënyrë që shënimi për tekstin të jetë mjaft i madh në gjatësi, në kodin html, duhet të shtoni një numër të madh karakteresh hapësinore para tekstit, të cilat mund të mos duken bukur, të rëndë dhe jo profesionale.

Një nga opsionet për zgjidhjen e këtij problemi është mënyra e mëposhtme për të vendosur dhëmbëzimin.

Indentacioni i tekstit HTML, metoda dy - kjo metodë bazohet në vetitë e etiketës blockquote. Ky etiketë cakton një indent prej afërsisht 40 pikselësh majtas dhe djathtas për tekstin e vendosur në të. Përveç kësaj, mbushja është vendosur në krye dhe në fund. Një shembull i kodit html për përdorimin e kësaj metode është paraqitur më poshtë:

në të majtë, përdorni etiketën kuotën e bllokut

Siç mund ta shihni, kjo metodë e vendosjes së dhëmbëzimit të tekstit është shumë e lehtë për t'u përdorur, por kjo metodë ka gjithashtu një pengesë të konsiderueshme. Dhëmbja që vendos etiketa kuota e bllokut,është fikse dhe është gjithmonë e njëjta vlerë - 40 px.

Për të korrigjuar situatën, dhe kur shtoni html dhëmbëzimi dhe për teksti të jetë në gjendje të vendosë ndonjë vlerë, ne do të përdorim metodën e tretë.

Dhënia e tekstit HTML, metoda e tretë.

Këtu do të përdorim veçorinë indent teksti të fletëve të stilit Cascading CSS.

Nëse hapim referencën CSS, në faqen me përshkrimin e vetive të tekstit-indent, do të shohim se me ndihmën e tekstit-indent, mund të vendosim sasinë e indentacionit të rreshtit të parë ose paragrafit të parë të ndonjë blloku i tekstit.

Ne po shqyrtojmë një shembull me një bllok teksti të shkurtër, kështu që vetitë e indentit të tekstit janë të mira për rastin tonë.

Më poshtë është kodi html që fut tekstin duke përdorur tekstin-indent. Nga shembulli mund të shihni se duke vendosur vlera të ndryshme argumenti për tekstin-indent, ne mund të ndryshojmë sasinë e indentacionit të tekstit:

HTMLdhëmbëzimiteksti funksionon stili CSS - tekst-indent

Për mendimin tim, kjo mënyrë e vendosjes së dhëmbëzimit për tekstin është më optimale, por, megjithatë, merrni parasysh një mënyrë tjetër të vendosjes së dhëmbëzimit, duke përdorur imazhe.

Indentacioni i tekstit HTML, metoda e katërt - këtu do të përdorim një imazh për të vendosur dhëmbëzimin.

Si shembull pune, le t'i hedhim një sy kodit html që tregon se si funksionon kjo metodë:

Nga shembulli i dhënë shihet qartë se duke ndryshuar gjerësinë e figurës, ne mund të ndryshojmë pozicionin e tekstit, domethënë të vendosim dhëmbëzimin e kërkuar për tekstin.

Si imazh, mund të përdorni një imazh, gjerësia dhe lartësia e të cilit janë të barabarta me një piksel. Në mënyrë që imazhi që po përdorim të mos jetë i dukshëm në faqe, vendosni ngjyrën për të saktësisht të njëjtë me sfondin e faqes së faqes.

Sipas mendimit tim, metodat e mësipërme të vendosjes së dhëmbëve të tekstit janë mjaft të mjaftueshme për të organizuar dhëmbëzimin që ju nevojitet në çdo situatë kur shtoni përmbajtje në faqen e faqeve tuaja.

Përshëndetje! Fillimisht doja ta ndaja këtë artikull në 4 të vegjël, por më pas mendova. Per cfare? Në fund të fundit, është më i përshtatshëm kur një informacion i tillë mblidhet brenda kornizës së një materiali.

Prandaj, sot do të mësojmë se si të futim CSS nga e majta dhe nga të gjitha anët e tjera - djathtas, lart dhe poshtë. Ato mund të bëhen për fotografi dhe tekste. Ato janë dy llojesh:

• E jashtme;
• e brendshme.

Për të parën, përdoret marzhi kryesor i pronës, për të dytën, mbushja. Për qartësi, unë bëra një shembull të vogël për ju. Për ta bërë vizualisht të përshtatshëm dallimin midis hapësirës së brendshme dhe të jashtme, shtova një tabelë të dukshme. Le të shohim se çfarë ndodhi?

Mbushje e jashtme

Duke i shkruar ato në fletën e stilit CSS, mund të vendosni orientimin e bllokut të informacionit në faqe. Për shembull, zhvendoseni atë majtas dhe poshtë. Le të tregojmë menjëherë se si do të duket.

Në përgjithësi, mund të përdorni opsionet e mëposhtme për të vendosur dhëmbëzimet.

Majtas (diferencë-majtas).

Djathtas (diferencë-djathtas).

Top (margin-lart).

Poshtë (margjina-poshtë).

Tani do t'ju tregoj një nuancë tjetër interesante.

Siç mund ta shihni, mund të përdorni një nga opsionet - efekti është i njëjtë. Vetëm në rastin e dytë kodi është më kompakt. Vini re gjithashtu se mbushja është në drejtim të akrepave të orës. Gjithçka fillon në krye dhe përfundon në të majtë.

Mbushje e brendshme

Procedura është e ngjashme këtu. Vetëm tani do të shtoj veti të reja jo për të gjithë tabelën, por për përmbajtjen e kolonave.

Le të shohim se çfarë doli prej saj.

Për analogji me kufijtë e brendshëm në CSS, kufijtë e jashtëm mund të shkruhen në kod të shkurtuar ose për anët veç e veç.

Këto ishin pikat kryesore. Më në fund, do t'ju tregoj se si mund ta bëni më të lehtë disa nga puna.

Shtrirja në nivelin e etiketave të zgjedhura

Në rastet që pamë më lart, ato janë vendosur për tekst dhe imazhe në të njëjtën kohë. Në fakt, ju mund të vendosni distancën me elementët në nivelin e një etikete specifike. Unë do t'ju tregoj se si funksionon. Zhbëni ndryshimet e fundit dhe vendosni kodin e personalizuar në fletën e stilit.

Le të hedhim një vështrim se çfarë ndodhi pas ruajtjes së ndryshimeve.

Fotografia mbeti në vend, vetëm teksti i mbyllur në të majtë u zhvendos. Manipulime të ngjashme mund të aplikohen në blloqe të tjera, për shembull, tr, span.

Si informacion shtesë, unë propozoj një botim në lidhje me detyrën për shqyrtim. Aty përshkruhen edhe metoda mjaft interesante. Mund të jetë i dobishëm për të formuar një vijë të kuqe në tekst ose për të kryer veprime të tjera.

Për më tepër, ekziston një abonim për shpërndarjen falas të informacionit në adresat e postës elektronike. Ekziston një formë e veçantë për t'u abonuar në blog. Deri herën tjetër.

Diten e mire! Vendosja e dhëmbëzimeve për tekstin dhe imazhet është tema kryesore e botimit të sotëm. Le të hedhim një vështrim më të afërt se cilat qasje mund të zbatohen në praktikë.

Kur krijon një faqe interneti, një webmaster merret me blloqe teksti dhe fraza të vendosura në faqet e projektit. Zgjidhja e problemeve individuale shoqërohet me përdorimin e etiketave HTML të shtuara në redaktues. Ekzistojnë disa lloje atributesh që ju lejojnë të lëvizni frazat ose të ndryshoni pozicionin e fragmenteve në një faqe elektronike.

Vendosja e dhëmbëzimeve duke futur hapësira

Le të shohim se si të futet teksti në HTML duke përdorur një etiketë të veçantë që gjeneron një hapësirë. Duhet të ngjisni kodin aq herë sa është e nevojshme për të arritur kompensimin e dëshiruar nga skaji i faqes.

Zhvillimi i kodit të dhënë kryhet nga të gjitha llojet e shfletuesve dhe webmaster do të marrë një rezultat të garantuar. Disavantazhi i kësaj metode janë aftësitë e saj të kufizuara, sepse për të rritur distancën, duhet të shtoni më shumë etiketa, dhe kjo rrëmujë dokumentin.

Duke përdorur etiketën e citimit

Ndërsa studioni në detaje se si të futni tekstin në kodin HTML, mund të hasni në një metodë alternative që ju jep më shumë opsione.

Këtu duhet të përdorni blloqe kuotën, e cila ju lejon të zhvendosni fragmentin majtas dhe djathtas me rreth 40 px. Mjafton të shkruani kodin identik me shembullin e mësipërm:

Metoda ju lejon të manipuloni frazat brenda një madhësie fikse prej 40 px. Vlen gjithashtu të përmendet se kjo etiketë zakonisht përfshin një kuotë.

Opsionet alternative

Nëse keni ndërmend të lëvizni në një distancë jo standarde, do t'ju duhet të përdorni parametrin e tekstit-indent në lidhje me fletën e stilit CSS. Metoda e konsideruar siguron krijimin e një devijimi të vijës së parë në distancën e dëshiruar. Ju duhet të bëni ndryshimet e mëposhtme në redaktues:

Kur kërkohet të matet numri i kërkuar i pikselëve nga një foto, ata preferojnë kode të thjeshta por efikase.

Në rastin e parë, vendosen vetëm vlerat e zhvendosjes nga skajet e figurës. Në të dytën, pozicioni i figurës vendoset në të majtë me rrjedhën e tekstit në të djathtë, dhe në të tretën, anasjelltas.

Informacionit i ka ardhur fundi. Më thuaj, a e gjete informacionin që të intereson? Përgjigjen mund ta shkruani në komente.

Së fundi, do të përmend se blogu Workip i kushtohet kryesisht opsioneve të parave për të fituar para në internet. A e dini se cilat metoda janë vërtet premtuese financiarisht? Përshkrimet e disa prej tyre tashmë janë publikuar.

Publikimi i materialeve vazhdon. Regjistrohu në e-mail për përditësimet e projektit. Deri herën tjetër.

Mirësevini në blogun tim. Css (Cascading Style Sheets) ofron shumë opsione për personalizimin e pamjes së faqeve të internetit. Sot do të doja të tregoja shkurtimisht se si të përcaktojmë në css mbushjen në krye ose në çdo anë tjetër për çdo element.

Mbushje e jashtme

Marzhi vendoset duke përdorur veçorinë marzh. Me ndihmën e tij, ju mund të vendosni kufijtë në të katër anët menjëherë, ose të përdorni veçori të tjera: margjina-lart, margjina-majtas, margjina-djathtas, margjina-poshtë, të cilat ju lejojnë ta bëni atë vetëm në njërën anë.

Mbushja përcakton distancën që skaji i zgjedhur i një elementi do të largohet nga elementët e tjerë në faqe. Për shembull, hyrja:

P, div (Margin-lart: 20px;)

Do të thotë që të gjitha blloqet dhe paragrafët do të futen nga lart me 20 pikselë, domethënë, skaji i tyre i sipërm do të largohet nga elementët ngjitur nga kjo distancë.

Indencat mund të shkruhen në secilën anë duke përdorur vetëm një veçori margjine, e cila shkruhet me 4 vlera me radhë:

Div (Margjina: 20px 10px 20px 10px;)

Indencat do të jepen në skajet e sipërme, djathtas, poshtë dhe majtas, përkatësisht. Meqenëse në këtë rast ato janë të barabarta në anët e kundërta, mund të shkruhet edhe kështu:

Div (Margjina: 20px 10px;)

Vlera e parë është mbushja e sipërme dhe e poshtme, dhe e dyta është anët.

Mbushje e brendshme

Mbushja funksionon ndryshe - nuk e largon kutinë nga elementët e tjerë, por e shton këtë distancë brenda elementit, duke e larguar përmbajtjen (përmbajtjen) e kutisë nga skajet e saj. Është komode. Ku keni parë një faqe ku teksti fillon në pjesën e sipërme majtas të dritares?

Unë nuk e kam parë këtë, sepse zhvilluesit e uebit përdorin gjithmonë mbushje dhe mbushje për ta bërë tekstin sa më të lehtë për t'u lexuar. Mbushja e brendshme shkruhet duke përdorur veçorinë e mbushjes, në të cilën mund të renditni 4 vlera njëherësh për të gjitha skajet, të ndara përkatësisht me një hapësirë.

Gjithashtu, në të njëjtën mënyrë me diferencë, mund të shtoni emrin e anës dhe të vendosni distancën vetëm për të. Për shembull, mbushja e sipërme mund të shkruhet duke përdorur padding-top. Në përgjithësi, vetia e mbushjes funksionon tamam si vetia e marzhit.

Për shembull, mund të jepni kodin e mëposhtëm:

Blloku (Gjerësia: 200 px; Mbushja: 20 px;)

Sa mendoni se do të jetë gjerësia aktuale e elementit tonë? Këtu mund të shihni se është 200 piksele, por mbushjet shtojnë 20 të tjera në secilën anë, për një total prej 240 pikselësh. Merreni parasysh këtë kur make up.

Do të doja gjithashtu të vërej se mbushja zakonisht vendoset vetëm në elementët e bllokut, është më mirë të mos i jepet elementëve të linjës. Marzhi funksionon mirë me çdo element.