Mapulogalamu a Website: momwe mungapangire maziko mu html

Oyamba ambiri omwe amangofika pamtima popanga webusaiti nthawi zambiri amadzifunsa momwe HTML imapangidwira chithunzi. Ndipo ngati anthu ena amatha kumvetsa vuto ili, pakadalibe mavuto pamene atambasula fano lonselo lonselo. Panthawi yomweyi, ndikufuna kuti malowa awonetsedwe mofanana pamasakatuli onse, kotero kuti zofunikira zogwirizana ndi zofufuzira ziyenera kukwaniritsidwa. Mukhoza kukhazikitsa maziko mu njira ziwiri: kugwiritsa ntchito ma HTML ndi ma CSS kalembedwe. Aliyense amasankha yekha njira yabwino koposa. Inde, njira ya CSS ndi yabwino kwambiri, chifukwa code yake imasungidwa pa fayilo yapadera ndipo sizitenga zilembo zosafunika m'malemba akuluakulu a webusaitiyi, koma tisanayambe kuganizira njira yosavuta yopangira chithunzi pambuyo pa tsambalo.

Malembo akuluakulu a HTML popanga maziko

Kotero, tiyeni tipitirire ku funso la momwe tingapangire chithunzi chakumbuyo ku html pazenera. Kuti malowa awoneka okongola, muyenera kumvetsa mfundo imodzi yofunikira: ndikwanira kuti muzipanga malo ojambulapo kapena kujambula ndi monochrome, koma ngati mukufuna kuyika chithunzi kumbuyo, sichidzatambasula lonse lonselo. Chithunzicho choyamba chiyenera kusankhidwa kapena kupangidwa mwaufulu kupanga kapangidwe kowonjezera, komwe mungapeze tsamba la tsamba lomwe lawonetsedwa. Pambuyo pake chithunzichi chikukonzekera, timachokera ku foda yomwe imatchedwa "Zithunzi". M'menemo tidzasunga zithunzi zonse, zithunzi ndi mafayilo ena owonetsera. Foda iyi iyenera kukhala mubukhulo ndi mafayilo anu onse a html. Tsopano mukhoza kupita ku code. Pali zinthu zambiri zomwe mungachite kuti mulembedwe kachidindo, zomwe maziko anu angasinthe pa chithunzi.

1. Lembani chikhumbo cha tag.
2. Kupyolera mu machitidwe a CSS mu HTML code.
3. Lembani kalembedwe ka CSS mu fayilo yapadera.

Monga mu HTML, kuti mupange chithunzi chithunzi, mumasankha, koma ndikufuna kunena mawu ochepa momwe angakhalire abwino kwambiri. Njira yoyamba ndi kuthandizira kulemba kudzera muzolemba zamatayi nthawi yayitali. Njira yachiwiri imagwiritsidwa ntchito nthawi zambiri, chifukwa chakuti mumapeza code yofanana. Ndipo njira yachitatu ndi yofala komanso yothandiza. Nawa zitsanzo za HTML:

1. Njira yoyamba yolembera kudzera mu thupi mu fayilo ya index.htm. Zalembedwa mwa mawonekedwe awa: (maziko a thupi = "Folder_name / Picture_name.extension") (/ thupi). Izi zikutanthauza kuti ngati tili ndi chithunzi chomwe chimatchedwa "Chithunzi" ndi kufalikira kwa JPG, ndipo tinatcha foda ngati "Zithunzi", ndiye kuti HTML ikhoza kuoneka ngati izi: (thupi lanu = "Images / Picture.jpg") ... (/ thupi) .
2. Njira yachiwiri yolemba imakhudza kalembedwe ka CSS, koma imalembedwa mu fayilo yomweyi yotchedwa index.htm. (Thupi lachiwalo = "maziko: url ('../ Images / Picture.jpg')").
3. Ndipo njira yachitatu yojambulira ikuchitika m'mafayi awiri. Mu chikalata chotchedwa index.htm, chilembo chotsatirachi chalembedwa pamutu wa mutu: (mutu) (link rel = "stylesheet" type = "malemba / css" href = "http: // site / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_file ") (/ mutu). Ndipo m'mawonekedwe apamwamba ndi dzina la style.css ife talemba kale: thupi {maziko: url (Images / Picture.jpg ')}.

Monga mu HTML kuti tipange chithunzi chakumbuyo, tinasokoneza. Tsopano mukufunikira kumvetsetsa momwe mungatambasulire chithunzi kudutsa pazenera lonse.

Njira zowonjezera chithunzi chakumbuyo kwazenera pazenera

Tiyerekeze mawonekedwe athu ngati peresenti. Zidzakhala kuti lonse lonse ndi kutalika kwa chinsalu chidzakhala 100% x 100%. Tiyenera kutambasula chithunzichi m'lifupi. Onjezerani kuwonekedwe kwajambula muzojambula.css yesani chingwe chomwe chidzatambasula chithunzicho mpaka m'lifupi ndi kutalika kwake. Kodi zimalembedwa bwanji mu CSS kalembedwe? Ndi zophweka!

Thupi

{

Chiyambi: url (Images / Picture.jpg ')

Zakale zazing'ono: 100%; / * Izi kulowa ndi abwino kwambiri masiku ano zamasamba *

}}

Kotero ife tinalingalira momwe tingapangire chithunzi chakumbuyo ku html pazenera. Palinso njira yolembera fayilo ya index.htm. Ngakhale njirayi ilibe ntchito, ndi kofunika kuti oyamba kumene adziwe ndikuzimvetsa. Mu chikho (mutu) (kalembedwe) div {msinkhu wa msinkhu: chivundikiro; } / / Mawonekedwe (/ mutu) mawonekedwewa amatanthauza kuti timasankha malo apaderadera, omwe adzalowera pazenera lonse. Tinayang'ana njira ziwiri kuti maziko a sitepe akhale fano la html, kotero kuti chithunzichi chidzatambasulidwa pazenera lonse pazenera.

Momwe mungakhalire maziko osakhazikika

Ngati mwasankha kugwiritsa ntchito chithunzithunzi ngati maziko a tsogolo la intaneti, ndiye kuti mumangophunzira momwe mungakhazikitsire, kuti musatambasule kutalika ndipo musasokoneze maonekedwe abwino. Ndi zokwanira kugwiritsa ntchito code HTML kuti mulembe owonjezera awa. Muyenera kuwonjezera mawu amodzi mu fayilo ya style.css pambuyo pake: url (Images / Picture.jpg ') yokhazikika; Kapena mmalo mowonjezera mzere wosiyana pambuyo pa semicolon - malo: osakhazikika. Mwanjira imeneyo, chithunzi chanu chakumbuyo chidzakhala chete. Pamene mukupukuta zomwe zili pa tsambali, mudzawona kuti malembawo akusunthira, ndipo maziko akukhalabe. Kotero inu mwaphunzira kupanga maziko mu html, mu njira zingapo.

Kugwira ntchito ndi tebulo mu HTML

Otukuka ambiri osadziŵa zamakono, akukumana ndi matebulo ndi zolemba, nthawi zambiri samvetsa momwe angapangire chithunzi mu html maziko a tebulo. Monga malamulo onse a kalembedwe a HTML ndi CSS, chinenero ichi cha pulogalamu ya intaneti ndi chophweka. Ndipo yankho la vuto ili lidzakhala likulemba mizere iwiri ya code. Muyenera kudziwa kale kuti kulembedwa kwa mzere wa miyala ndi ndondomeko kumatchulidwa motsatiridwa monga tags (tr) ndi (td). Kuti mupange maziko a tebulo ngati chithunzi, muyenera kuwonjezera mawu ophweka pa tebulo (table), (tr) kapena (td) ndi kugwirizana kwa fano: background = URL ya fano. Kuti tifotokoze momveka bwino, timapereka zitsanzo zingapo.

Ma tebulo ndi chithunzi m'malo mwa maziko: Zitsanzo za HTML

Tiyeni titenge tebulo la 2x3 ndikulipanga chithunzi chakumbuyo chomwe chili kusungidwa mu fayilo la zithunzi. (Tch) (td) (td) 2 (tsa. (Td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tebulo). Kotero tebulo lathu lidzajambula pansalu pa chithunzichi.

(Jambulani) (tr) (td background = "Images / Picture.jpg") 1 (tsa. 15) (td) 2 (tsa. (Td) 3 (/ td) (/ tr) (tr) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 / Td) (td background = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ tebulo). Pambuyo pakuwona, tikuwona kuti maziko akuwoneka m'maselo omwe talemba, koma osati mu tebulo lonse.

Tsamba lofufuzira pa mtanda

Pano pali chinthu chonga kusandulika kwa osatsegula pamtundu wa intaneti. Izi zikutanthauza kuti masamba a webusaitiyi adzawonetsedwa mofanana ndi mitundu yosiyana siyana ndi maasitomala. Panthawi imodzimodziyo, muyenera kusintha ndondomeko ya HTML ndi CSS kwa osatsegula oyenera. Kuwonjezera apo, mu nthawi yamakono ya chitukuko cha mafilimu, opanga ma webusaiti ambiri akuyesera kupanga malo omwe amasinthidwa pa mawindo onse ndi ma kompyuta.