HTML мен CSS тің айырмашылығы

Жұмыс түрі: Реферат
Тегін: Антиплагиат
Көлемі: 14 бет
Таңдаулыға:

ЕСЕП БЕРУ
Тақырыбы: CSS- сайт рәсімдеуде қолданылатын негізгі тәсіл

Алматы 2020

Мазмұны
1.Кіріспе ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...3
2.Негізгі бөлім.
2.1. CSS деген не? ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .4
2.2. HTML мен CSS тің айырмашылығы ... ... ... ... ... ... ... ... ... ... ... ... ... ... 6
2.3. СSS пен жұмыс жасау ... ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... .7
Қорытынды ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..13
Пайдаланылған әдебиеттер ... ... ... ... ... ... . ... ... ... ... ... ... ... ... ... ... ... ... ... ...14

Кіріспе

Егер HTMLді үйдің кірпіштерден тұратын қаңқасына теңесек, онда CSS ті сол кірпіштерді үйлесімді түрде қалап, оларды біріктіріп тұрған цемент қоспасына теңеуге болады.Екеуінің бірі болмаса сайт та болмайды.Сонымен, CSS деген не және CSS деген HTML мен қалай байланысады.
CSS дегеніміз ағылшынша Cascading Style Sheets , яғни қазақша стилдік каскад таблицалары деп аталады. Біз HTML ге арналған сабақтан аздап болса да web парақшаны қалай жасауға болатынын көрдік.Ол көрген тәсіліміз тек бер жағы ғана.Бізге ол парақшаның ешкімнің сайт парақшасына ұқсамайтын өзгеше болғанын қалаймыз, яғни оны әрлендіруіміз керек.Міне осы әрлендіруді жасайтын сол CSS.
HTML ді кірпішпен қаланып, төрт қабырғасы тұрғызылып және төбесі жабылған үйге ұқсатуға болады.Ал сол үйдің ішін сырлап, еденін төсеп, мебельдерін қойып дегендей т.б. әрекеттер жасайтын осы CSS.
HTML ге қарағанда CSS тің синтаксисі күрделірек.
Себебі, HTML дің бірнеше тегтерінің қалай пайдалану керектігін ұғып алған соң еш қиналмастан парақша бетін жаза беруіңізге болады.Ал CSS стилді белгілеу деп аталады яғни нюанстары көбірек, оның әр сипаттамасын біліп қана қоймай оны қай жерде қалай қолдануға болатынын да үйреніп алу керек. Бұл стильді белгі тілі екі бөліктен құралады:1. Селектор-меткалардан.2. Осы селекторларға қолданылатын ережелерден.Веб-сайттар суреттер, мәтіндер және түрлі құжаттар қоса алғанда, бірнеше жеке бөліктерден тұрады. Бұл құжаттар тек PDF файлдары сияқты әртүрлі беттерден байланыстырылуы мүмкін беттерді ғана емес, сондай-ақ беттер мен CSS (Cascading Style Sheet) құжаттарының құрылымын анықтау үшін HTML құжаттары сияқты өз беттерін құру үшін пайдаланылатын құжаттарды қамтиды. беттің көрінісін белгілеу. Бұл мақала бүгінгі күнгі веб-сайттарда қолданылатын нәрсені қамтитын CSS-ге кіреді.
CSS алдымен 1997 жылы веб-әзірлеушілерге өздері жасаған веб-беттердің визуалды көрінісін анықтауға мүмкіндік беретін құрал ретінде жасалды. Веб-мамандар веб-сайттың кодының мазмұнын және құрылымын көрнекі дизайннан ажыратуға мүмкіндік берді, бұл осы уақытқа дейін мүмкін болмады. Құрылымның және стилдің бөлінуі HTML-ға бастапқыда негізделген функцияны көбірек орындауға мүмкіндік береді - мазмұнның белгіленуі, беттің өзін дизайны мен сезімі деп аталатын беттің дизайны Жоғарыда айтылғандай, CSS термині Каскадты стиль кестесін білдіреді. Осы фразаны осы құжаттардың немен айналысатындығын толығымен түсіндіру үшін біраз қысқартамыз.Стильдік парақ сөзі құжаттың өзін білдіреді (HTML сияқты, CSS файлдары - әртүрлі бағдарламалармен редакциялауға болатын нақты мәтіндік құжаттар). Стиль кестелері көптеген жылдар бойы құжат жасау үшін пайдаланылды. Олар баспа немесе онлайн режимінде орналасу үшін техникалық сипаттамалар.

2.1. CSS деген не?
Веб-сайттар суреттер, мәтіндер және түрлі құжаттар қоса алғанда, бірнеше жеке бөліктерден тұрады. Бұл құжаттар тек PDF файлдары сияқты әртүрлі беттерден байланыстырылуы мүмкін беттерді ғана емес, сондай-ақ беттер мен CSS (Cascading Style Sheet) құжаттарының құрылымын анықтау үшін HTML құжаттары сияқты өз беттерін құру үшін пайдаланылатын құжаттарды қамтиды. беттің көрінісін белгілеу. Бұл мақала бүгінгі күнгі веб-сайттарда қолданылатын нәрсені қамтитын CSS-ге кіреді.
CSS алдымен 1997 жылы веб-әзірлеушілерге өздері жасаған веб-беттердің визуалды көрінісін анықтауға мүмкіндік беретін құрал ретінде жасалды. Веб-мамандар веб-сайттың кодының мазмұнын және құрылымын көрнекі дизайннан ажыратуға мүмкіндік берді, бұл осы уақытқа дейін мүмкін болмады.
Құрылымның және стилдің бөлінуі HTML-ға бастапқыда негізделген функцияны көбірек орындауға мүмкіндік береді - мазмұнның белгіленуі, беттің өзін дизайны мен сезімі деп аталатын беттің дизайны мен орналасуына алаңдамай, беттің.
Веб-браузерлер осы таңбалау тілінің негізгі қаріптері мен түстік аспектілерінен артық пайдалана бастаған кезде, 2000-ға дейін CSS танымал болмады. Бүгінде барлық заманауи браузерлер CSS-тің барлық деңгейі 1-де, CSS-нің 2-деңгейінің көпшілігін және тіпті CSS-нің 3-деңгейінің көптеген аспектілерін қолдайды. CSS бұрынғыдай дамып келе жатқанда және жаңа стильдер енгізілсе, веб-браузерлер бұл браузерлерге CSS-ді жаңа CSS-ті қолдана алатын модульдерді енгізе бастады және веб-дизайнерлерге жұмыс істеу үшін қуатты жаңа стилі құралдарын береді.Көптеген жылдар өткеннен кейін веб-сайттарды жобалау және дамыту үшін CSS-ні пайдаланудан бас тартқан веб-дизайнерлер таңдалды, бірақ бұл тәжірибе бүгінгі күні саладан кетіп қалды. CSS қазір веб-дизайнда кеңінен қолданылатын стандарттар болып табылады және бүгінгі күні салада жұмыс істейтін кез-келген адамды табу үшін қиындық тудыруы мүмкін, ол кем дегенде осы тіл туралы негізгі түсінікке ие болмады.
Жоғарыда айтылғандай, CSS термині Каскадты стиль кестесін білдіреді. Осы фразаны осы құжаттардың немен айналысатындығын толығымен түсіндіру үшін біраз қысқартамыз.
Стильдік парақ сөзі құжаттың өзін білдіреді (HTML сияқты, CSS файлдары - әртүрлі бағдарламалармен редакциялауға болатын нақты мәтіндік құжаттар). Стиль кестелері көптеген жылдар бойы құжат жасау үшін пайдаланылды. Олар баспа немесе онлайн режимінде орналасу үшін техникалық сипаттамалар. Баспа дизайнерлері өздерінің конструкциялары өз ерекшеліктеріне сәйкес басып шығарылғанын қамтамасыз ету үшін ұзақ уақыт стильдер кестелерін қолданған. Веб-парақ үшін стилистикалық парақ бірдей мақсатқа қызмет етеді, бірақ веб-шолғышты қарауға болатын құжатты қалай жасайтынын айтып беретін функционалдығы бар. Бүгінгі күні CSS стильдерінің парақтары беттердің әртүрлі құрылғылар мен экран өлшемдерін көру әдісін өзгерту үшін медиа сұрауларын пайдалана алады. Бұл өте маңызды, себебі ол бір HTML құжатына қол жеткізу үшін пайдаланылатын экранға сәйкес әр түрлі түрде көрсетіледі.
Каскад - бұл каскадты стиль кесте терминінің ерекше бөлігі. Веб стилі парағы сол парақтағы стильдер сериясынан, мысалы, сарқыраманың үстіндегі өзен секілді каскадталған. Өзендегі су сарқыраманың барлық тастарына шабуылдайды, бірақ төменгі жағында ғана судың ағыны қайда барады. Веб-сайттың стильдер кестесіндегі каскадқа қатысты.
Веб-дизайнер кез-келген стильді қолданбайтын болса да, әрбір веб-бетке ең болмағанда бір стиль парағы әсер етеді. Бұл стиль парағы - пайдаланушы агенттерінің стилі парағы - егер веб-шолғыш басқа нұсқаулар берілмесе, бетті көрсету үшін пайдаланатын әдепкі мәнерлер ретінде де белгілі. Мысалы, әдепкі бойынша гиперсілтемелер көк түспен көрсетілген және олар сызылған. Бұл мәнерлер веб-шолғыштың әдепкі мәнері парағынан келеді. Егер веб-дизайнер басқа нұсқауларды ұсынса, браузер қандай нұсқаулардың басымдықты екенін білуі керек. Барлық браузерлердің өздерінің әдепкі мәнері бар, бірақ олардың көбісі (көк сызылған мәтін сілтемелері сияқты) барлық немесе негізгі браузерлерде және нұсқаларда ортақ пайдаланылады.
Браузердің әдепкі бойынша басқа үлгісі үшін менің веб-браузерімде әдепкі қаріп өлшемі Times New Roman өлшемі 16 өлшемінде көрсетіледі. Мен баратын беттердің ешқайсысы сол қаріп тұқымдасы мен өлшемінде көрсетілмейді. Себебі, каскадтың өзі дизайнерлердің өздері белгілеген екінші стиль кестелерін қаріп өлшемін және отбасын қайта анықтау үшін , менің веб-браузерімнің әдепкі мәндерін басымырақ деп анықтайды. Веб-парақ үшін жасайтын кез-келген стильдер браузердің әдепкі мәнерлеріне қарағанда ерекше сипатқа ие болады, сондықтан бұл мән-жайлар сіздің мәнер кестеңіз оларды алмастырмаса ғана қолданылады. Егер сіз сілтемелердің көк және асты сызылғанын қаласаңыз, онда сіз ештеңе істеудің қажеті жоқ, себебі ол әдепкі болып табылады, бірақ егер сіздің сайтыңыздың CSS файлы сілтемелер жасыл болса, бұл түс әдепкі көк түспен бас тартады. Астыңғы сызба осы мысалда қалады, өйткені сіз басқаша айтқан жоқсыз.
CSS, басқа веб-сайттарда веб-шолғыштан қарағанда, веб-беттердің қалай көрінетінін анықтау үшін де пайдаланылуы мүмкін. Мысалы, веб-беттің қалай басып шығарылатындығын анықтайтын басып шығару мәнерінің парағын жасауға болады. Навигация түймешіктері немесе веб-пішіндер сияқты веб-беттер элементтері басып шығарылған бетте ешқандай мақсатқа ие болмағандықтан, басып шығарылған стиль кестесін бет басып шығарылған кезде сол жерлерді өшіру үшін пайдалануға болады. Көптеген сайттарда әдеттегі тәжірибе болмаса да, басып шығару стилінің парақтарын құру мүмкіндігі қуатты және тартымды (менің тәжірибем - көптеген веб-мамандар мұны жасамайды, себебі сайттың бюджет көлемі осы қосымша жұмыс жасауды талап етпейді) ).

CSS - бұл веб-дизайнер үйренетін ең қуатты құралдардың бірі, себебі сіз веб-сайттың бүкіл көрнекі көрінісіне әсер ете аласыз. Жақсы жазылған стильдердің парақтары жылдам жаңартылып, тораптарға басты HTML-нен түзетуге ешқандай өзгеріс енгізбестен, өз кезегінде, келушілерге құндылық пен фокус көрсететін экранда көрнекі түрде бейнелейтін нәрсені өзгертуге мүмкіндік береді.
CSS-нің басты міндеті - оқып-үйренудің аздығы, ал браузерлер күн сайын өзгеріп отырады, бүгінгі күні жақсы жұмыс істейтіндер жаңа стильдер қолдауға ие болады, ал басқалары бір себеппен немесе басқа себептермен түсірілуде .CSS CSS-ні каскадтауға және біріктіруге және әртүрлі браузерлердің директиваларды әртүрлі түсіндіруге және іске асыруға болатындығын ескере отырып, CSS қарапайым HTML-ке қарағанда күрделі болуы мүмкін. CSS-де браузерлерде HTML шынымен жоқ сияқты өзгереді. Сіз CSS-ні пайдалануды бастағаннан кейін стиль кестелерінің күшін пайдалану сізге веб-беттерді қалай орналастыруға және олардың көрінісі мен сезімін анықтауға керемет икемділік беретіндігін көресіз. Айтпақшы, сіз болашақта сіз үшін жұмыс істеген және сіз болашақта жаңа веб-беттерді құрастырған кезде қайтадан оралуға болатын стильдер мен тәсілдердің қылқаламына айналасыз.

2.2. HTML мен CSS тің айырмашылығы
HTML ретінде кеңінен танымал HyperText таңбалау тілі - веб-беттерді белгілеудің жетекші тілі. HTML - веб-парақтардың негізгі құрылыс блогы. Веб-шолғыш HTML құжатын оқып, оларды көрнекі немесе естілетін веб-парақтарға құрастырады. Стильдердің каскадты кестелері (CSS) - бұл таңбалау тілінің көмегімен жазылған құжаттың көрінісі мен пішімделуін сипаттайтын тіл. HTML тілінде жазылған веб-беттерді стильдеу үшін CSS кеңінен қолданылады.
Жоғарыда айтылғандай HTML - бұл бағдарламалау тілі емес, белгілеу тілі. Белгілеу тілі дегеніміз - белгілеу тегтерінің жиынтығы және HTML веб-беттерді сипаттау үшін HTML тегтері деп аталатын белгілеу тегтерін қолданады. HTML құжаттары веб-беттерді сипаттайды және олар HTML тегтері мен қарапайым мәтіннен тұрады. HTML тегтерін HTML құжатында оңай анықтауға болады, өйткені олар бұрыштық жақшалармен қоршалған (мысалы, ). HTML тегтері әдетте құжатқа жұппен енгізіледі, мұнда бірінші тег бастапқы тег (мысалы, ), ал екінші тег - соңғы тег (мысалы ). Веб-шолғыштың (мысалы, Internet Explorer, Firefox және т.б.) міндеті - HTML құжатын оқып, оны веб-бет ретінде көрсету. Шолғыш HTML тегтерін беттің мазмұнын түсіндіру үшін пайдаланады, ал HTML тегтерін браузер көрсетпейді. HTML беттері JavaScript сияқты тілдерде жазылған суреттерді, нысандарды және сценарийлерді ендіре алады. Әрі қарай, HTML интерактивті формаларды құру үшін қолданыла алады.
Жоғарыда айтылғандай, CSS HTML элементтерін бетте қалай көрсету керектігін анықтайды. Бастапқыда HTML құжатты пішімдеуге арналған тегтермен емес, мазмұнын анықтауға арналды. Бірақ HTML-ге сияқты тегтерді енгізу веб-әзірлеушілердің өмірін қиындатты. Ірі веб-сайттар жасағанда әр параққа қаріп пен түрлі-түсті ақпараттар қосу өте қиын процесс болды. Осы мәселені шешу үшін World Wide Web Consortium (W3C) CSS құрды. HTML 4.0 барлық форматтауды HTML құжатынан алып тастауға және бөлек CSS файлында сақтауға мүмкіндік береді. CSS құжат мазмұнын құжаттың тұсаукесерінен, мысалы, түстер мен қаріптерден ажыратуға мүмкіндік береді. Бұл бірнеше веб-парақтарға бірдей форматтауды бөлісуге және құрылымдық мазмұндағы қайталануды және күрделілікті азайтуға мүмкіндік береді. Сонымен қатар CSS оқырмандарға веб-парақтың авторы белгілеген бетінен бас тартуға мүмкіндік бере отырып, сол түзету парағын әр түрлі стильде ұсынуға мүмкіндік береді. Бүгінгі таңда CSS кеңінен қолданылады және барлық шолушылар қолдайды.
HTML мен CSS-тің негізгі айырмашылығы HTML-бұл веб-беттің мазмұнын анықтау үшін пайдаланылатын белгілеу тілі, ал CSS-бұл веб-беттің пішімін анықтауға қолданылатын стиль кестесінің тілі. HTML сонымен қатар веб-беттің пішімдеуін көрсете алады, бірақ бұл үшін CSS-ті қолдану тиімдірек болады, өйткені ол мазмұнды презентациядан және сайттың жалпы консистенциясынан бөлуге мүмкіндік береді.

2.3. СSS пен жұмыс жасау
Егер HTMLді үйдің кірпіштерден тұратын қаңқасына теңесек, онда CSS ті сол кірпіштерді үйлесімді түрде қалап, оларды біріктіріп тұрған цемент қоспасына теңеуге болады.Екеуінің бірі болмаса сайт та болмайды.Сонымен, CSS деген не және CSS деген HTML мен қалай байланысады.
CSS дегеніміз ағылшынша Cascading Style Sheets , яғни қазақша стилдік каскад таблицалары деп аталады. Біз HTML ге арналған сабақтан аздап болса да web парақшаны қалай жасауға болатынын көрдік.Ол көрген тәсіліміз тек бер жағы ғана.Бізге ол парақшаның ешкімнің сайт парақшасына ұқсамайтын өзгеше болғанын қалаймыз, яғни оны әрлендіруіміз керек.Міне осы әрлендіруді жасайтын сол CSS.
HTML ді кірпішпен қаланып, төрт қабырғасы тұрғызылып және төбесі жабылған үйге ұқсатуға болады.Ал сол үйдің ішін сырлап, еденін төсеп, мебельдерін қойып дегендей т.б. әрекеттер жасайтын осы CSS.
HTML ге қарағанда CSS тің синтаксисі күрделірек.
Себебі, HTML дің бірнеше тегтерінің қалай пайдалану керектігін ұғып ... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.