HTML. Алғашқы қадам.
Сайт жасағыңыз келе ме? Онда HTML-ден бастаңыз. Иә, басқалай бастау мүмкін емес. HTML бұл сайт жасаудағы іргетас. Әрине, қазір ештеңе білместен сайт жасауға болады (joomla, drupal, wordpress), бірақ, өз көңіліңдегі нәрсені жасау немесе тапсырысқа сайт жасау үшін іргетасты білместен ешқайда бара алмайсың.
Алғашқы қадамды бірден веб бет жасаудан бастаймыз. Өйткені, үйренудің ең жақсы жолы ол тәжірибе. Веб бет жасау процессін бастамас бұрын, сізде мәтіндік редактор және браузер бар деп үміттенемін )).
1. Алдымен біздің веб беттеріміз тұратын жеке папка құрып қойғанымыз дұрыс болады, мысалыға, «html-begin» деп.
2. Енді өзіңіздің сүйікті мәтіндік редакторыңызды ашыңыз (notepad++, sublime, ..., немесе қарапайым «блокнот» бағдарламасы) және онда жаңа файл құрып оның ішіне мынандай мәтін енгізіңіз:
3. Енді осы файлды сақтаймыз:
мұнда негізгі назар аударатын жағдай, ол файлдың кеңейтілімі ".html" болуы керек.
4. Енді осы файлды табамыз да екі рет шертеміз, сөйтіп біздің веб бетіміз браузерде ашылады.
Құттықтаймын! Бұл сіздің алғашқы веб бетіңіз. Интернеттегі ашатын сайттарыңыз дәл осылай жұмыс жасайды, бір ғана айырмашылық: сіздің веб бетіңіз өзіңіздің компьютеріңізде жатыр.
Ал енді теория. Біздің енгізген сиқыр сөздеріміз не өзі? Оларды қарастырмас бұрын біз «тег» деген ұғыммен таныс болуымыз керек. Тегтер бұл мәтіннің әр бөліктерін белгілеу әдістері. Басқаша айтқанда браузерге мәтінді қалай көрсету керектігін айтатын тіл (сондықтан да, html — белгілеу тілі деп аталады). Мысалыға, мынандай тәжірибе жасайық, біз құрған файлдан, барлық тегтерді өшіріп тастап, содан соң браузерде ашамыз. Тегтерді алып тастап сақтаймыз (ол үшін жаңа файл құрсақ та болады, мысалы мен жаңа файл құрып оны «index2.html» деп атадым):
Енді екі файлды да браузерде ашып қарап, салыстырайық:
Айырмашылығы бірден көзге түседі. Оң жақта браузер мәтінді қалай өңдеуді білместен, сасқанынан қалай болса солай шығара салды, керек десеңіз бос орынды да анықтай алмады. Ал бірінші жағдайда ол барлығын дұрыс істеді: тақырып ерекшеленген, мәтін жаңа жолдан басталған, «Менің алғашқы веб бетім» жазуы беттің атауы болып тұр. Қысқаша айтқанда HTML белгілеу тілі осы тегтердің жиынын анықтайды деуге де болады.
Тегтердің жалпы синтаксисі мынандай:
Тегтердің екі түрі болады, жұпты және жұпсыз.
Жұпты тегтердің басталатын және аяқталатын жері болады, олардың арасындағы мәтінге тегтің билігі жүреді. Және жұпты тегтің ішінде басқа да тегтер орналастыруға болады. Ең бастысы оларды қиылыстырып алмау керек. Яғни, тегтерді былай пайдалану дұрыс емес:
Ал былай дұрыс:
Жұпсыз тег мысалы: "<br />", бұл тег бос орынды анықтайды. Сондықтан да оны жабатын тег қажет емес.
Келесі мақалада тегтерді пайдалану ережелерін қарастырамыз.
Алғашқы қадамды бірден веб бет жасаудан бастаймыз. Өйткені, үйренудің ең жақсы жолы ол тәжірибе. Веб бет жасау процессін бастамас бұрын, сізде мәтіндік редактор және браузер бар деп үміттенемін )).
1. Алдымен біздің веб беттеріміз тұратын жеке папка құрып қойғанымыз дұрыс болады, мысалыға, «html-begin» деп.
2. Енді өзіңіздің сүйікті мәтіндік редакторыңызды ашыңыз (notepad++, sublime, ..., немесе қарапайым «блокнот» бағдарламасы) және онда жаңа файл құрып оның ішіне мынандай мәтін енгізіңіз:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Менің алғашқы веб бетім</title>
</head>
<body>
<h1>Беттің тақырыбы</h1>
<p>Негізгі мәтін.</p>
</body>
</html>
3. Енді осы файлды сақтаймыз:
мұнда негізгі назар аударатын жағдай, ол файлдың кеңейтілімі ".html" болуы керек.
4. Енді осы файлды табамыз да екі рет шертеміз, сөйтіп біздің веб бетіміз браузерде ашылады.
Құттықтаймын! Бұл сіздің алғашқы веб бетіңіз. Интернеттегі ашатын сайттарыңыз дәл осылай жұмыс жасайды, бір ғана айырмашылық: сіздің веб бетіңіз өзіңіздің компьютеріңізде жатыр.
Тегтер ұғымы
Ал енді теория. Біздің енгізген сиқыр сөздеріміз не өзі? Оларды қарастырмас бұрын біз «тег» деген ұғыммен таныс болуымыз керек. Тегтер бұл мәтіннің әр бөліктерін белгілеу әдістері. Басқаша айтқанда браузерге мәтінді қалай көрсету керектігін айтатын тіл (сондықтан да, html — белгілеу тілі деп аталады). Мысалыға, мынандай тәжірибе жасайық, біз құрған файлдан, барлық тегтерді өшіріп тастап, содан соң браузерде ашамыз. Тегтерді алып тастап сақтаймыз (ол үшін жаңа файл құрсақ та болады, мысалы мен жаңа файл құрып оны «index2.html» деп атадым):
Енді екі файлды да браузерде ашып қарап, салыстырайық:
Айырмашылығы бірден көзге түседі. Оң жақта браузер мәтінді қалай өңдеуді білместен, сасқанынан қалай болса солай шығара салды, керек десеңіз бос орынды да анықтай алмады. Ал бірінші жағдайда ол барлығын дұрыс істеді: тақырып ерекшеленген, мәтін жаңа жолдан басталған, «Менің алғашқы веб бетім» жазуы беттің атауы болып тұр. Қысқаша айтқанда HTML белгілеу тілі осы тегтердің жиынын анықтайды деуге де болады.
Тегтердің жалпы синтаксисі мынандай:
Тегтердің екі түрі болады, жұпты және жұпсыз.
Жұпты тегтердің басталатын және аяқталатын жері болады, олардың арасындағы мәтінге тегтің билігі жүреді. Және жұпты тегтің ішінде басқа да тегтер орналастыруға болады. Ең бастысы оларды қиылыстырып алмау керек. Яғни, тегтерді былай пайдалану дұрыс емес:
Атмосфераның төменгі <b>шекарасы <i>жер</b> беті болып</i> табылады.
Ал былай дұрыс:
Атмосфераның төменгі <b>шекарасы <i>жер беті</i> болып</b> табылады.
Жұпсыз тег мысалы: "<br />", бұл тег бос орынды анықтайды. Сондықтан да оны жабатын тег қажет емес.
Келесі мақалада тегтерді пайдалану ережелерін қарастырамыз.
-
+2
Негізі мен мұнда оқырман мәтіндік редакторды пайдалана алады деп алып отырмын, егер солай етіп алынбаса, мақаланы «компьютерді қалай қосу керек» деген сөйлемнен бастау керек болып қалар еді ;-).
Автордың мақсаты қазақша, сапалы статья жазуда деп ойлаймын, қолдаймын да. Қазақшаға не жетсін!