Дарс №1. HTML, CSS

HTML - гиперматн тили, CSS - каскадли стиллар жадвали. Шундай таъриф берилади интернетда бу икки тушунчага, лекин, бу таъриф урганувчига бирор нарсани англатишига шубхам бор. Хусусан, мен хеч нарсани тушунмаганман.

Дарсликлар узи шунака, хар битта сузни излаб википедияга карайсан, уни ичидан хам уч-туртта википедиялик гап чикади. Бизнинг сайтда бунаканги мураккаб тушунтиришлар булмайди деб умид киламан.

"Одамчасига" тушунтириш

HTML - дастурлаш тили эмас, чунки купол килиб айтганда, унинг имкониятлари билан мураккаб операциялар килолмайсиз, масалан, маълумотлар базасини кура олиш, учириш, яратиш, анимация, цикллар, объектлар ва хоказо.

CSS - хам тил, аммо дастурлаш тили эмас. CSS HTMLни чиройли куринишга келтиришни осонлаштирувчи тил. CSS сиз хам буни килса булади, лекин CSS бу ишни тизимли бажаради, яъни масалан бутун сайт буйича барча сарлавхаларни рангини бир сатр дастур билан созлаш мумкин.

Энди мисоллар курсак булар.

Мисол. HTML

HTML код теглардан иборат, тег бу коднинг кисмлари, хар бир тег уз урнида аттрибутлардан иборат. Аттрибут - тегни хусусиятидир.

<html>
<head>
</head>
<body>
</body>
</html>

Бу ерда html, head, body - теглардир. Хозирча уларнинг аттрибутлари йук. html тегини ичига head ва body элементи кирган.

Асосан, head га сахифа буйича асосий маълумотлар ёзилади, улар сахифада куринмайди, куринадиган кисми body га ёзилади. Текшириш учун "блокнот" да файл яратиб, уни номини index.html килиб узгартириб куринг, ва ичига юкоридаги кодни ёзинг.

Кушимча сифатида title тегини хам кушамиз:

<html>
<head>
</head>
<body>
<title> Менинг сайтим </title>
</body>
</html>

Энди браузерда index.htmlни очиб "вкладкасига" карасангиз сайт номи куриниши керак. Бирор матн ёзиб курамиз:

<html>
<head>
</head>
<body>
<title> Менинг сайтим </title>
<p> Матн1 </p>
<p> Матн2 </p>
</body>
</html>

Ёзган матнимиз сатр сифатида чикди, энди уни бирор аттрибутини бериб курайлик, масалан:

<html>
<head>
</head>
<body>
<title> Менинг сайтим </title>
<p align="center"> Матн1 </p>
<p> Матн2 </p>
</body>
</html>

Натижада биринчи матн уртага сурилади.

CSS га утамиз...

CSS га утишни икки усули бор:

  • Сахифа ичида style тегига CSS кодини ёзиш
  • Сахифадан ташкарида *.css форматли файл яратиб, уни ичида код ёзиш.
  • 2-усул маъкулрок, чунки 1-усулда айни сахифадаги сатрлар хажми купайиб, кейин тушунишда кийинчилик яратади, лекин келинг 1-усулдан фойдаланайлик бошланишига:

    <html>
    <head>
    </head>
    <body>
    <title> Менинг сайтим </title>
    <style>
    p{*/ шу ерга p теги учун CSS код ёзиш керак*/;}
    </style>
    <p align="center"> Матн1 </p>
    <p> Матн2 </p>
    </body>
    </html>

    Масалан p теглик хамма мантлар Times New Roman шрифтида булсин:

    <html>
    <head>
    </head>
    <body>
    <title> Менинг сайтим </title>
    <style>
    p{*/ шу ерга p теги учун CSS код ёзиш керак*/
    font-family: "Times New Roman"; }
    </style>
    <p align="center"> Матн1 </p>
    <p> Матн2 </p>
    </body>
    </html>

    Чукурлашамиз, дейлик, биз хамма p тегларга бир хил хусусият хохламаймиз, масалан, баъзилари times, 14 шрифтли булсин, баъзилари эса Bookman Old Style 24 шрифтда булсин. Худди нормал сайтлардагидек, рекламалар, янгиликлар, ссылкалар, хаммасини узига яраша стили бор. Бу нарсани амалга ошириш учун class ёки id керак булади. class дан бошлаймиз ишни.

    CSS мавзусини давоми, class аттрибути

    Класс аттрибути деярли барча тегларга кулланиши мумкин. Мантик бунака, исталган тегга класс номи берасиз, кейин бу номга CSS стилларини, яъни матн хусусиятларини боглайсиз. Натижада, матн сиз исталган шаклда пайдо булади сайтда. Кодимиздаги иккинчи p тегга yangilik деган class номи берамиз:

    <html>
    <head>
    </head>
    <body>
    <title> Менинг сайтим </title>
    <style>
    p{*/ шу ерга p теги учун CSS код ёзиш керак*/
    font-family: "Times New Roman"; }
    </style>
    <p align="center"> Матн1 </p>
    <p class="yangilik"> Матн2 </p>
    </body>
    </html>

    Энди CSS да бу матннни хусусиятларини курсатамиз. Эътибор беринг class учун стилни нуктадан кейин класс исмини ёзиб берилади:

    <html>
    <head>
    </head>
    <body>
    <title> Менинг сайтим </title>
    <style>
    p{*/ шу ерга p теги учун CSS код ёзиш керак*/
    font-family: "Times New Roman"; }

    .yangilik{
    font-family: "Arial";
    font-size: 24px;
    background-color: grey;
    }
    </style>
    <p align="center"> Матн1 </p>
    <p class="yangilik"> Матн2 </p>
    </body>
    </html>

    Бу хусусиятларни CSS яратмасдан HTML ни узида хам бериш мумкин эди, факат у холда, хусусиятларни хар битта тегга ёзиб чикишга тугри келади, ахир бу анимациялар хар хил булиши мумкин, хусусан

  • ранг буйича
  • шрифт стили буйича
  • Шрифт хажми буйича
  • Шрифт огирлиги буйича (жирный, курсив)
  • Фон буйича
  • Анимация буйича
  • Ва хоказо.
  • Хамма теглар хакида тушунтириб, майдалашиб утирмайман, кейинги дарсга бошка манбалардан, title, span, div, table, td, tr, br теглари, ва class, id, onclick, src, href аттрибутлари, ва CSS буйича, color, background-color, font-size, font-family ва бошка хусусиятлар хакида укиб тайёр булиш керак. Бу нарсалар буйича интернетда маълумот куп, улар хартугул осон тушунтирилган.

    Русийзабон манбалардан http://htmlbook.ru/ ни маслахат бераман.