Yadda za a shafa Rubutun Magana a cikin Hotuna

Dubi kowane shafin yanar gizon kuma za ku ga hadewar rubutun rubutu da halayen. Duk waɗannan abubuwa suna da muhimmancin sinadaran a cikin nasarar yanar gizo. Text abun ciki ne abin da shafin baƙi za su karanta da abin da search injuna za su yi amfani da matsayin wani ɓangare na su ranking algorithms. Hotuna za su kara sha'awar sha'awa ga shafin yanar gizo kuma su taimaka wajen kara rubutu.

Ƙara rubutu da hotuna zuwa shafukan intanet yana da sauki. An ƙara rubutu tare da daidaitattun HTML tags kamar sakin layi, shafuka, da lissafi, yayin da aka sanya hotuna a shafi tare da element. Da zarar kun ƙara hoto zuwa shafin yanar gizonku, duk da haka, kuna so su sami rubutun da ke kusa da hoton, maimakon daidaitawa a ƙasa (wanda shine hanya ta hanyar hanyar da aka kara zuwa lambar HTML za ta sa a browser). Ta hanyar fasaha, akwai hanyoyi guda biyu da zaka iya cimma wannan kalma, ko dai ta amfani da CSS (shawarar) ko ta ƙara umarni na gani a kai tsaye cikin HTML (ba a ba da shawarar ba, tun da yake kana so ka kula da rabuwa da tsarin don shafin yanar gizonka).

Amfani da CSS

Hanyar da za a iya canza hanyar hanyar rubutu ta shafi da kuma hotunan hotunan da yadda yadda suke gani a browser yana tare da CSS . Ka tuna kawai, tun da yake muna magana game da canza canji a kan shafin (yin sautin rubutu a kusa da hoto), wannan yana nufin shi ne yankin Cascading Style Sheets.

1. Na farko, ƙara hoto zuwa shafin yanar gizonku. Ka tuna don ware duk wani siffofi na gani (kamar nisa da tsayin haruffa) daga wannan HTML. Wannan yana da mahimmanci, musamman ga shafin yanar gizon da ya dace da girman girman hotunan. Wasu software, kamar Adobe Dreamweaver, zai ƙara nisa da tsawo bayanai zuwa hotuna da aka saka tare da kayan aiki, don haka tabbatar da cire wannan bayani daga code HTML! Tabbatar, duk da haka, ya haɗa da rubutu da aka dace daidai . Ga wani misalin yadda yadda HTML ɗinku zai iya duba:
2. Don dalilai na salo, zaka iya ƙara aji a hoto. Wannan darajar darajar ita ce abin da za mu yi amfani da shi a cikin fayil na CSS. Ka lura cewa darajar da muka yi amfani da ita shi ne saɓani, ko da yake, saboda irin wannan salon, zamu yi amfani da dabi'un "hagu" ko "dama", dangane da hanyar da muke so image mu daidaita. Mun ga cewa sauƙaƙe sauƙaƙe don aiki da kyau kuma zai sauƙi ga wasu waɗanda zasu iya gudanar da wani shafin a nan gaba don fahimta, amma zaka iya ba da wannan darajar darajar da kake so.
   2. Da kanta, wannan darajar darajar ba zata yi wani abu ba. Hoton ba zai dace da haɗin hagu na rubutu ba. Don haka, yanzu muna bukatar mu juya zuwa fayil na CSS.

1. A cikin tsarin ku, zaku iya ƙara halin da ake biyowa:
   1. .ftar {
   2. taso kan ruwa: hagu;
   3. Samun: 0 20px 20px 0;
   4. }
   5. Abin da kuka yi a nan an yi amfani da dukiyar ' CAT' 'float' , wadda za ta cire hotunan daga kwatsam na al'ada na al'ada (hanyar da hoto ke nunawa, tare da rubutun da ke biye da shi) kuma zai daidaita shi a gefen hagu na akwati . Rubutun da ya zo bayan shi a cikin rubutun HTML tare da yanzu kunsa a kusa da shi. Har ila yau, mun kara wasu dabi'un da za a iya yin amfani da shi don kada wannan rubutun ba zai kai tsaye ba a kan image. Maimakon haka, zai sami wasu wurare masu kyau waɗanda za su kasance masu kyau a cikin zane na shafi. A cikin CSS takaice don padding, mun kara da 0 dabi'u zuwa saman da gefen hagu na hoton, da 20 pixels zuwa hagu da kasa. Ka tuna, kana buƙatar ƙara wasu ƙuƙwalwar dama na gefen hagu na haɗin hagu. Hoto mai dacewa (abin da zamu kalli a wani lokaci) zaiyi amfani da padding a gefen hagu.
2. Idan ka duba shafin yanar gizonku a cikin mai bincike, ya kamata a yanzu ganin cewa hotunanka yana hagu zuwa gefen hagu na shafin kuma rubutun ya dace da shi. Wata hanyar da za ta ce wannan shi ne cewa hoton yana "hawa zuwa hagu".

1. Idan kana so ka canza wannan hoton da za a haɗa kai tsaye (kamar misalin misalin da ke tare da wannan labarin), zai zama mai sauki. Da farko, dole ne ka tabbata cewa, baya ga salon da muka ƙaddara zuwa CSS don darajar "hagu", muna da ɗaya don daidaitawa. Zai yi kama da wannan:
   1. .right {
   2. taso kan ruwa: dama;
   3. Samun: 0 0 20px 20px;
   4. }
   5. Kuna iya ganin cewa wannan kusan abu ne na farko da CSS ta rubuta. Bambanci kawai shine darajar da muke amfani da shi don dukiyar "float" da kuma dabi'un da muka yi amfani da shi (ƙara wasu zuwa gefen hagu na hoton mu maimakon na dama).
2. A ƙarshe, za ku canza darajar hoton hoton daga "hagu" zuwa "dama" a cikin HTML:
3. Dubi shafinku a cikin mai bincike a yanzu kuma hotunanku ya kamata ya dace da dama tare da rubutun da ke kusa da shi. Muna ƙaddara ƙara dukkan waɗannan styles, "hagu" da "dama" ga dukan salon mu don mu iya amfani da wadannan hanyoyi masu kyau kamar yadda muke buƙatar lokacin da muke samar da shafukan intanet. Wadannan hanyoyi guda biyu suna da kyau, siffofin da za a sake sakewa wanda za mu iya juya zuwa duk lokacin da muke buƙatar ɗaukar hotuna tare da rubutun rubutu a kusa da su.

Amfani da HTML A maimakon CSS (da kuma Me ya Sa Ya kamata Ka Yi & # 39; t Yi haka)

Ko da yake yana yiwuwa a yi kunshe da rubutu a cikin hoto tare da HTML, shafukan yanar gizo sun nuna cewa CSS (da kuma matakai da aka gabatar a sama) shine hanyar da za mu je domin mu iya kiyaye rabuwa da tsarin (HTML) da kuma style (CSS). Wannan yana da mahimmanci idan kunyi la'akari da haka, don wasu na'urorin da shimfidu, wannan rubutu bazai buƙatar gudu a kusa da hoton ba. Don žananan fuska, wani shafin yanar gizon yanar gizon yana iya buƙatar cewa rubutu yana nuna alamar da ke ƙasa da hoton kuma hoton yana yada cikakken nuni na allon. Ana iya yin wannan sauƙi tare da tambayoyin kafofin watsa labarun idan nau'ikanku sun bambanta daga samfurin HTML. A cikin yau da yawa na duniya, inda hotuna da rubutu za su bayyana daban-daban ga baƙi daban-daban da kan fuskokin daban-daban, wannan rabuwa yana da muhimmanci ga nasarar da ake gudanarwa na tsawon lokaci.