Ба саҳифаҳои веб пайвандед ва шумо як омезиши матн ва тасвирро мебинед. Ҳар дуи ин унсурҳо компонентҳо дар муваффақияти вебсайт мебошанд. Мундариҷа матн аст, ки сайти сомона хонда мешавад ва кадом муҳаррикҳои ҷустуҷӯӣ ҳамчун қисми рейтингҳои алгоритми онҳо истифода хоҳанд бурд . Тасвирҳо ба сайт ба манфиати визуалӣ ва муфассал мундариҷаи матнро мефиристанд.
Илова кардани матн ва тасвирҳо ба вебсайтҳо осон аст. Матн бо санадҳои стандартии HTML ба монанди параграфҳо, сарлавҳаҳо ва рӯйхатҳо илова карда шудаанд, дар ҳоле, ки тасвирҳо дар саҳифае бо унсур ҷойгир шудаанд. Бо вуҷуди он, ки шумо ба саҳифаи вебии худ илова кардани тасвирро илова кардед, шумо мехоҳед, ки матнеро, ки дар рӯи тасвир воқеъ аст, дошта бошед, ба ҷои он ки ба поён ҳамроҳи он пайванд шавед (ин тарзи пешфарз ба тасвири коди HTML илова хоҳад шуд). Технологӣ, ду роҳе, ки шумо метавонед ба ин намуди ноил шудан, ба воситаи CSS (тавсия додашуда) ё илова кардани дастурҳои визуалӣ ба HTML (тавсия дода намешавад, зеро шумо мехоҳед, ки ҷудо кардани сабки ва сохторӣ барои вебсайти шумо).
Истифодаи CSS
Роҳи дурусти тағйир додани таркиби матн ва тасвирҳои саҳифа ва тарзи видеоии онҳо дар браузер бо CSS аст . Танҳо дар хотир доред, ки мо дар бораи тағйироти визуалӣ дар саҳифа гап мезанем (иншооти матн дар гирди тасвир), ин маънои онро дорад, ки домейнҳои Cascading Style саҳ.
- Аввал, тасвири худро ба саҳифаи вебии худ илова кунед. Дар хотир доред, ки ҳар гуна хусусиятҳои возеҳ (ба монанди гулҳо ва баландии арзишҳо) аз HTML. Ин муҳим аст, махсусан барои вебсаи ҷавобӣ, ки андозаи тасвир дар асоси браузер фарқ мекунад. Баъзе нармафзор, ба монанди Adobe Dreamweaver, маълумоти васеъ ва баландро ба тасвирҳое, ки бо ин восита гузошта шудаанд, илова мекунанд, то боварӣ ҳосил кунед, ки ин маълумот аз коди HTML! Аммо, боварӣ ҳосил кунед, ки матнҳои матнии мувофиқро дар бар гиред. Ин намунаи коди HTML-и шумо метавонад намунаи ибрат бошад:
-
- Барои мақсадҳои ороиши, шумо метавонед классро ба тасвир илова кунед. Ин арзиши классификатсияшудаи мо дар файли CSS истифода мешавад. Дар хотир доред, ки арзише, ки мо дар ин ҷо истифода мебарем, худсарона аст, ҳарчанд, барои сабки ин хусусият, мо мехоҳем, ки арзишҳои "чап" ё "рост" -ро истифода барем, вобаста ба кадом роҳи мо мехоҳем симои худро мутобиқ созем. Мо мефаҳмем, ки матни оддӣ барои хуб кор кардан ва барои дигар одамоне, ки метавонанд барои фаҳмидани макон дар оянда дар оянда идора шаванд, аммо шумо метавонед ин арзиши синфро, ки шумо мехоҳед, бидиҳед.
-
- Худи худ, ин арзиши классикӣ ҳеҷ коре намекунад. Тасвир ба таври автоматӣ ба тарафи чапи матн мувофиқат намекунад. Барои ин, ҳоло мо бояд ба файли CSS муроҷиат кунем.
-
- Дар варақаи шумо, шумо ҳоло метавонед сабки зеринро илова кунед:
- .lft {
- float: left;
- padding: 0 20px 20px 0;
- }}
- Дар ин ҷо шумо чӣ кор мекардед, моликияти CSS "float" -ро истифода мебарад, ки тасвири расмии оддии ҳуҷҷатро мегирад (роҳи он одатан нишон медиҳад, ки матн дар зери он аст) ва онро ба чапи чапи он пайваст мекунад . Матнест, ки баъд аз он дар HTML қайд карда мешавад, ки ҳоло ҳам дар он гиред. Мо инчунин якчанд арзишҳои шиновариро илова менамоем, ки ин матн бевосита зидди тасвир нест. Ба ҷои ин, он бояд якчанд фароғати хубе дошта бошад, ки дар тарҳрезии саҳифа возеҳтар мегардад. Дар CSS барои портфелӣ, мо ба 0 нуқта ба тарафи боло ва чапи тасвир ва 20 пиксел ба чап ва поёни он илова кардем. Дар хотир доред, ки шумо бояд якчанд паланчиро ба рости тасвири ранга иваз кунед. Объекти мутобиқшудаи тасвири (ки мо дар як лаҳза ба назар хоҳем нигариста) мебуд, ки ба канори чапи он истифода мешуд.
- Агар шумо веб браузери худро дар браузери дидед, акнун мебинед, ки тасвири шумо ба тарафи чапи саҳифа мутобиқат мекунад ва матни оддии гирду атрофи он. Роҳи дигари гуфтани ин аст, ки ин тасвири "чап ба рост" аст.
- Агар шумо хоҳед, ки ин тасвирро тағйир диҳед, ба рост (ба монанди сурати намунавии ин мақола), ин оддӣ хоҳад буд. Аввалан, шумо бояд боварӣ ҳосил кунед, ки илова ба сабки мо ба CSS мо барои арзиши классикии «чап», мо низ барои дурустии мувофиқ ҳастем. Ин чунин маъно дорад:
- .right {
- float: рост;
- padding: 0 0 20px 20px;
- }}
- Шумо мебинед, ки ин қариб ба як CSS якум аст. Танҳо фарқияти арзише, ки мо барои моликияти "float" истифода мебарем ва арзишҳои пулии мо истифода мебаранд (баъзеи онҳо ба канали чапи симои мо бар ивази рост).
- Ниҳоят, шумо арзиши тасвири тасвирро аз "чап" ба "рост" дар HTML тағйир медиҳед:
-
- Ҳоло дар саҳифаи худ дар браузер нигоҳ кунед ва тасвири шумо бояд бо рости матн дар гирад. Мо мехоҳем, ки ҳар ду намуди ин сабкҳоро, "чап" ва "рост" ба ҳамаи сабтҳои мо илова кунанд, то ки мо метавонем ин сабтҳои визуалӣ дар вақти зарурӣ бунёд кардани веб-вебҳоро истифода барем. Ин ду намудҳо хусусиятҳои хуб, бозгаштаро бозмедоранд, ки мо метавонем ҳар вақте, ки мо бояд сабтҳои тасвириро бо матнро дар гирди онҳо гирем.
Истифодаи HTML ба ҷои CSS (ва чаро шумо лозимед & # 39;
Ҳарчанд мумкин аст, ки матнро дар як тасвир бо HTML пайдо кардан мумкин аст, меъёрҳои вебсайт қайд мекунанд, ки CSS (ва қадамҳои дар боло овардашуда) роҳи тараққиётест, ки мо метавонем ҷудо кардани сохтор (HTML) ва сабки (CSS) дошта бошем. Вақте, ки шумо фикр мекунед, ки барои баъзе дастгоҳҳо ва тарҳҳо, ин матн эҳтимолан ба гиреҳи оптималӣ ниёз дорад. Барои браузерҳои хурд, як тарҳбандии вебсафҳаро метавонад талаб кунад, ки матн дар ҳақиқат сигналро ба ҳам мутобиқ мекунад ва тасвири пурраи экранро васеъ мекунад. Ин ба осонӣ бо саволномаҳои ВАО, агар сабтҳои шумо аз аломати HTML ҷудо карда шаванд. Дар ҷаҳони имрӯзи имрӯза, ки дар он ҷойҳо тасвирҳо ва матнҳо барои меҳмонони гуногун ва экранҳои гуногун пайдо мешаванд, ин ҷудокунӣ барои муваффақияти дарозмуддат ва идоракунии веб саҳифа муҳим аст.