הקדמה צו HTML און CSS פֿאַר דיזיינערז

אַ הקדמה צו HTML און CSS פֿאַר דיזיינערז.

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

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

וואָס איז HTML?

 

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

• <אָנהייב קוויטל> : אויך באקאנט ווי די עפן קוויטל.
•  : אויך גערופן די קלאָוזינג קוויטל און כולל אַ פאָרויס צעהאַקן /

ווען איר אַרומנעמען אינהאַלט צווישן די צוויי טאַגס, די גאנצע זאַך איז גערופן עלעמענט :

• דאָס איז אַ פּאַראַגראַף

ווען די שפּראַך איז איבערגעזעצט אויף דער אינטערנעץ, וויוערז וועלן נישט זען די טאַגס - זיי וועלן בלויז זען די אינהאַלט צווישן זיי.

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

קאַטינג בילדער אין פאָטאָשאָפּ.

הקדמה צו HTML און CSS פֿאַר דיזיינערז

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

איצט מיר דאַרפֿן צו אַרויספירן אונדזער סניפּאַץ - קלייַבן טעקע > היט פֿאַר וועב (Alt + Shift + Ctrl + S). ווען אַ ספּעציפיש סניפּאַט איז אויסגעקליבן, איר קענען שטעלן די עקספּאָרט אָפּציעס אויף די רעכט זייַט פון די פֿענצטער (JPG, PNG, עטק.). אויב איר טאָפּל-גיט אַ ספּעציפיש פראַגמענט, איר וועט זען אַ קנאַל-אַרויף פֿענצטער " פראַגמענט פּאַראַמעטערס" - דעם אַלאַוז איר צו נאָמען ספּעציפיש פראַגמענט טעקעס.

דורך פעליקייַט, אַלע בילדער זענען געשטעלט אין: /images/ סובדירעקטאָרי. אויב איר ווילן צו אַרויספירן בלויז די סניפּאַץ איר מאַכן, סעלעקטירן " אַלע מנהג פראַגמאַנץ" אין די "היט" פֿענצטער. הקדמה צו HTML און CSS פֿאַר דיזיינערז

שאַפֿן אַ יקערדיק HTML דאָקומענט

מיר האָבן אונדזער סלייסיז, לאָזן אונדז מאַכן אַ יקערדיק HTML דאָקומענט. הקדמה צו HTML און CSS פֿאַר דיזיינערז

שורה 1 : דערקלערט אַז דער HTML 5 דיאלעקט איז די שפּראַך פון דעם דאָקומענט.

שורה 2 : עלעמענט רעפּראַזענץ דער וואָרצל פון אַ HTML דאָקומענט. דאָס איז אַ מאַנדאַטאָרי קאַנטיינער וואָס דינאָוץ די באַונדריז פון אונדזער דאָקומענט.

3 : קאַפּיטל כּולל ומזעיק בלאַט עלעמענטן אַזאַ ווי מעטאַ אינפֿאָרמאַציע, טיטל, עטק.

שורה 4 : דאָס איז דער דאָקומענט קאָדירונג דעקלאַראַציע - וטף -8 - זיכער ברירה - איר קענען לייענען מער וועגן HTML כאַראַקטער ענקאָדינגס דאָ .

שורה 5 : מוסטער בלאַט דאָס איז דער בלאַט טיטל וואָס איז געוויזן אין דעם בלעטערער טיטל באַר.

6 : קלאָוזיז די קוויטל פון שורה 3.

שורה 7 : דער גוף עלעמענט וועט אַנטהאַלטן אַלע די קענטיק אינהאַלט פון די בלאַט.

שורה 8 : קלאָוזיז די קוויטל פֿון שורה 2. דעם עלעמענט מאַרקס די סוף פון דעם דאָקומענט. הקדמה צו HTML און CSS פֿאַר דיזיינערז

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

דאָס איז דער אויסלייג איבערגעזעצט אין HTML:

עטלעכע הערות:

שורות 11 און 12 : עלעמענטן זענען די עסאַנס פון די אינטערנעט ווי זיי זענען געניצט צו שאַפֿן כייפּערלינגקס . זיי זענען געבונדן צו די HREF אַטריביוט און מוזן בינדן די ציל URL .

שורות 18-20 : דאס זענען עטלעכע טעקסט פֿאָרמאַטירונג טאַגס: דינאָוץ אַ ערשטער-מדרגה כעדינג; באצייכנט א פאראגראף; מיטל שורה ברעכן.

פאָרמאַטטינג מיט קאַסקאַדינג סטייל שיץ (CSS).

הקדמה צו HTML און CSS פֿאַר דיזיינערז

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

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

זאל ס ברייקדאַון פּשוט CSS הערשן : .

סעלעקטאָר : דאָס איז דער HTML עלעמענט איר ווילן צו סטיל. פֿאַר בייַשפּיל: <אַרטיקל>

אַד : א CSS הערשן קענען האָבן איין אָדער מער דעקלעריישאַנז. יעדער דעקלאַראַציע באשטייט פון אַ פאַרמאָג און אַ ווערט און איז אפגעשיידט דורך אַ האַלבקייַלעך. איר שטעלן דיקלעריישאַנז אין געגרייַזלט ברייסאַז {}. הקדמה צו HTML און CSS פֿאַר דיזיינערז

פאַרמאָג : דאס איז נוסח כאַראַקטעריסטיש, וואָס איר ווילן צו טוישן. פֿאַר בייַשפּיל: הינטערגרונט פֿאַרב, גרייס שריפֿט וכו '.

ווערט : יעדער פאַרמאָג האט אַ ווערט פֿאַרבונדן מיט אים. פֿאַר בייַשפּיל: #ffcc11 (פֿאַר הינטערגרונט פֿאַרב), 16px (פֿאַר שריפֿט גרייס), עטק.

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

זאל ס קוק אין עטלעכע CSS כּללים דארף צו פֿאָרמאַט אונדזער פּשוט פּלאַן.

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

CSS באָקס מאָדעל : דעם מאָדעל איז אַ ראַם וואָס ינקלודז אַלע HTML עלעמענטן, אַרייַנגערעכנט מאַרדזשאַנז, געמארקן, וואַטן און אינהאַלט. דער גרענעץ איז די ומזעיק געגנט אַרום די גרענעץ און די וואַטן צווישן די גרענעץ און די אינהאַלט.

אויב איר טאַקע ווילן צו לערנען מער וועגן קאָדירונג, געב א קוק צו דעם שיין פּלאַץ: קאָדעקאַדעמי .

צי איר וויסן HTML און CSS? ייַנטיילן דיין עצות אין די באַמערקונגען!