ווי צו ווראַנגק טעקסט אַרום אַ בילד

קוק בייַ קיין וועבזייטל און איר וועט זען אַ קאָמבינאַציע פון ​​טעקסט אינהאַלט און בילדער. ביידע פון ​​די עלעמענטן זענען יקערדיק ינגרידיאַנץ אין די הצלחה פון אַ וועבזייַטל. טעקסט אינהאַלט איז וואָס פּלאַץ וויזאַטערז וועט לייענען און וואָס זוכן ענדזשאַנז וועלן נוצן ווי טייל פון זייער ראַנגקינג אַלגערידאַמז. בילדער וועט לייגן וויזשאַוואַל אינטערעס צו די פּלאַץ און העלפן צושטימען דעם טעקסט אינהאַלט.

אַדדינג טעקסט און בילדער צו וועבזייטל איז גרינג. טעקסט איז מוסיף מיט נאָרמאַל HTML טאַגס ווי פּאַראַגראַפס, כעדינגז, און רשימות, בשעת בילדער זענען געשטעלט אויף אַ בלאַט מיט די עלעמענט. אַמאָל איר האָבן צו לייגן אַ בילד צו דיין וועב בלאַט, אָבער איר קען ווילן צו האָבן די טעקסט לויפן ווייַטער צו די בילד, אָבער טאָן נישט ויסמעקן ונטער עס (וואָס איז די פעליקייַט וועג אַ בילד צו HTML קאָד וועט געבן אין דעם בלעטערער). טעכניש באדערפענישן זענען צוויי וועגן וואָס איר קענען דערגרייכן דעם קוק, אָדער ניצן CSS (רעקאַמענדיד) אָדער צו לייגן די וויזשאַוואַל ינסטראַקשאַנז גלייַך אין די HTML (ניט רעקאַמענדיד, זינט איר ווילן צו טייַנען די צעשיידונג פון סטיל און סטרוקטור פֿאַר דיין וועבזייַטל).

ניצן CSS

די ריכטיק וועג צו טוישן די וועג ווי אַ וועבזייטל פון טעקסט און בילדער אויסלייג און ווי די וויסואַל סטיילז דערשייַנען אין דעם בלעטערער איז מיט קסס . נאָר געדענקען, ווייַל מיר זענען גערעדט וועגן אַ וויזשאַוואַל ענדערונג אויף דעם בלאַט (מאכן טעקסט לויפן אַרום אַ בילד), דעם מיטל עס איז די פעלד פון קאַסקאַדינג סטייל שיץ.

1. ערשטער, לייגן דיין בילד צו דיין וועב בלאַט. געדענקט צו ויסשליסן קיין וויסואַל קעראַקטעריסטיקס (ווי ברייט און הייך וואַלועס) פון אַז HTML. דעם איז וויכטיק, ספּעציעל פֿאַר אַ אָפּרופיק וועבזייַטל ווו די בילד גרייס וועט בייַטן אויף דעם בלעטערער. זיכער סאָפטווער, ווי אַדאָובי דרעאַמוועאַווער, וועט לייגן ברייט און הייך אינפֿאָרמאַציע צו בילדער וואס זענען ינסערטאַד מיט דעם געצייַג, אַזוי איר דאַרפֿן צו באַזייַטיקן דעם אינפֿאָרמאַציע פון ​​די HTML קאָד! איר קענט אָבער זיכער צו אַרייַננעמען צונעמען אַלט טעקסט . דאָ איז אַ בייַשפּיל פון ווי דיין HTML קאָד קען קוקן:
2. פֿאַר סטילינג צוועקן, איר קענען אויך לייגן אַ קלאַס צו אַ בילד. דעם סאָרט ווערט איז וואָס מיר וועלן נוצן אין אונדזער קסס טעקע. באַמערקונג אַז די ווערט מיר נוצן דאָ איז אַרביטראַריש, כאָטש, פֿאַר דעם באַזונדער סטיל, מיר טענד צו נוצן וואַלועס פון "לינקס" אָדער "רעכט", דיפּענדינג אויף וואָס וועג מיר ווילן אונדזער בילד צו ייַנרייען. מיר געפֿינען אַז פּשוט סינטאַקס צו אַרבעט געזונט און זיין גרינג פֿאַר אנדערע וואָס קען האָבן צו פירן אַ פּלאַץ אין דער צוקונפֿט צו פֿאַרשטיין, אָבער איר קען געבן דעם קיין סאָרט ווערט איר ווילן.
   2. דורך זיך, דעם סאָרט ווערט וועט נישט טאָן עפּעס. דער בילד וועט נישט אויטאָמאַטיש זיין אַליינד צו די לינקס פון די טעקסט. פֿאַר דעם, מיר איצט דאַרפֿן צו ווענדן צו אונדזער קסס טעקע.

1. אין דיין סטיילז, איר קענען איצט לייגן דעם ווייַטערדיק סטיל:
   1. .לעפט {
   2. פלאָוט: לינקס;
   3. וואַטן: 0 20 פּקס 20 פּקס 0;
   4. }
   5. וואָס איר האָט דאָ איז די CSS "לאָזנ שווימען" פאַרמאָג , וואָס וועט ציען די בילד פון נאָרמאַל דאָקומענט לויפן (די וועג אַז בילד וואָלט נאָרמאַלי אַרויסווייַזן, מיט די טעקסט אַדזשאַסטיד ונטער עס) און עס וועט זיין גלייַך צו די לינקס זייַט פון זייַן קאַנטיינער . דער טעקסט וואָס קומט נאָך עס אין די HTML מאַרקאַפּ מיט איצט ייַנוויקלען עס. מיר אויך לייגן עטלעכע וואַטן וואַלועס אַזוי אַז דעם טעקסט וואָלט נישט גלייַך גלייַך קעגן דעם בילד. אַנשטאָט, עס וועט האָבן עטלעכע פייַן ספּייסינג וואָס וועט זיין וויזשוואַלי אַטראַקטיוו אין דעם בלאַט ס פּלאַן. אין די CSS שטענקען פֿאַר וואַטן, מיר צוגעגעבן 0 וואַלועס צו די שפּיץ און לינקס זייַט פון די בילד, און 20 פּיקסעלס צו זייַן לינקס און דנאָ. געדענק, איר דאַרפֿן צו לייגן עטלעכע וואַטן די רעכט זייַט פון אַ לינקס אַליינד בילד. א רעכט אַליינד בילד (וואָס מיר וועלן קוקן אין אין אַ מאָמענט) וואָלט האָבן פּלאַדינג געווענדט צו זייַן לינקס זייַט.
2. אויב איר קוק דיין וועבזייטל אין אַ בלעטערער, ​​איר זאָל איצט זען אַז דיין בילד איז אַליינד צו די לינקס זייַט פון די בלאַט און די טעקסט נייסלי וואַפּס אַרום אים. אן אנדער וועג צו זאָגן דעם איז אַז די בילד איז "פלאָוטאַד צו די לינקס".

1. אויב איר ווילן צו טוישן דעם בילד צו זיין גלייַך צו די ריכטיק (ווי אין די פאָטאָגראַפיע וואָס אַקאַמפּאַניז דעם אַרטיקל), עס וואָלט זיין פּשוט. ערשטער, איר מוזן מאַכן זיכער אַז, אין דערצו צו דעם נוסח מיר נאָר צוגעלייגט צו אונדזער CSS פֿאַר די סאָרט ווערט פון "לינקס", מיר אויך האָבן איין פֿאַר רעכט-אַליינמאַנט. עס וואָלט קוקן ווי דאָס:
   1. .right {
   2. פלאָוט: רעכט;
   3. וואַטן: 0 0 20 פּקס 20 פּקס;
   4. }
   5. איר קענען זען אַז דאָס איז קימאַט יידעניקאַל צו דער ערשטער CSS מיר געשריבן. דער בלויז חילוק איז די ווערט מיר נוצן פֿאַר די "לאָזנ שווימען" פאַרמאָג און די וואַטן וואַלועס מיר נוצן (אַדינג עטלעכע צו די לינקס זייַט פון אונדזער בילד אַנשטאָט פון די רעכט).
2. צום סוף, איר וואָלט טוישן די ווערט פון די בילד ס קלאַס פון "לינקס" צו "רעכט" אין דיין HTML:
3. קוק דיין בלעטער אין דעם בלעטערער איצט און דיין בילד זאָל זיין גלייַך צו די רעכט מיט טעקסט ניטלי ראַפּינג אַרום אים. מיר טענד צו לייגן ביידע פון ​​די סטיילז, "לינקס" און "רעכט" צו אַלע אונדזער סטיילז אַזוי מיר קענען נוצן די וויזשאַוואַל סטיילז ווי דארף ווען איר מאַכן שאפן וועב זייַטלעך. די צוויי סטיילז ווערן פייַן, ריוזאַבאַל פֿעיִקייטן אַז מיר קענען ווענדן צו ווען מיר דאַרפֿן צו סטיל בילדער מיט טעקסט ווראַפּינג אַרום זיי.

ניצן HTML אַנשטאָט CSS (און פארוואס איר זאָלט טאָן 39)

כאָטש עס איז מעגלעך צו טאָן די טעקסט צו HTML מיט HTML סטאַנדאַרדס, וועב סטאַנדאַרדס דיקטירן אַז קסס (און די טריט פּראָסעס) איז די וועג צו גיין אַזוי אַז מיר קענען האַלטן אַ צעשיידונג פון סטרוקטור (HTML) און סטיל (קסס). דאָס איז ספּעציעל וויכטיק אויב איר באַטראַכטן אַז, פֿאַר עטלעכע דעוויסעס און לייאַוץ, דעם טעקסט קען נישט דאַרפֿן צו לויפן אַרום דעם בילד. פֿאַר קלענערער סקרינז, אַ אָפּשפּיגלט וועבזייטל פון דעם וועבזייטל קען דאַרפן אַז דער טעקסט טוט טאַקע ויסמעקן ונטער דעם בילד, און דער בילד סטרעטשיז די פול ברייט פון דעם עקראַן. דעם איז לייכט געטאן מיט מעדיע קוויריז אויב דיין סטיילז זענען באַזונדער פון דיין HTML מאַרקאַפּ. אין הייַנט ס מאַלטי-מיטל וועלט, ווו בילד און טעקסט וועט זיין דערשייַנען אַנדערש פֿאַר פאַרשידענע וויזאַטערז און אויף פאַרשידענע סקרינז, דעם צעשיידונג איז יקערדיק צו די לאַנג-טערמין הצלחה און פאַרוואַלטונג פון אַ וועב בלאַט.