Блокнот

Блокнот (ағ ылшынша Notepad) – кез келген Microsoft Windows операциялық жү йесінде орналасқ ан қ арапайым мә тіндік редактор.

Блокнот қ арапайым болғ андық тан, HTML-кодты тү сінетін конструкциясы, оны ө ң дейтін мү мкіндігі жоқ. Бірақ HTML тілімен таныса бастағ анда осы редакторды қ олданғ ан жең іл болады.

Блокнотты қ олдануды ү йренген соң, оның орнын басатын кең қ ызметті тегін бағ дарламалар бар: Bred, AkelPad, BDV Notepad, EditPad Lite, TED Notepad, Notepad++ жә не Notepad2.

Сурет 14. Блокнот

Дә ріс 3. HTML негіздері. Мə тіндерді ө ң деу

Жоспар:

- Тегтер жә не олардың қ ұ рылымы;

- HTML тақ ырыптар;

- HTML азатжол;

- Тү сініктеме (комментарий);

- < BR> тегі;

- < HR> тегі;

- Шрифтер;

- Мә тін тү стері;

- Фон тү стері;

- Кө лемді дə йексө з (цитата);

- Қ ысқ а дə йексө з (цитат);

- Сызушы тегтер;

- Жылжытылғ ан мә тін.

HTML тілінде веб-бет енгізу ү шін блокноттан (Notepad) қ андай да бір атаумен қ ұ жат ашып, онда бағ дарлама жасауғ а болады. Мысалы: Salem.txt деп сақ тайық жә не оның ішіне код жазуды бастаймыз.

Notepad-те жазылғ ан Salem.txt қ ұ жатының ішіне тө мендегі HTML кодын жазамыз.

< html>

< head>

< title> Тақ ырып< /title>

< /head>

< body>

Сә лем, бұ л менің бірінші веб-бетім!

< /body>

< /html>

HTML тілінде командаларды тэг (tag) деп атайды. Жоғ арыдағ ы HTML тіліндегі бағ дарламада кө к тү сте – тэгтер, ал қ ара тү сте біз енгізген мә тіндер. Яғ ни, < жә не > белгілері арасындағ ы сө здер тегтер болады. Осы екі < > жақ шадан тысқ ары барлық мә тін веб-бетте кө рінеді.

Жоғ арыдағ ы кодтың алдына ең бірінші қ атарда мына мә лімдеме жазылады <! DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»>. Бұ л мә лімдеме веб браузерге HTML қ ұ жатты дұ рыс аударуғ а кө мектеседі.

Notepad-те жазылғ ан.txt кең ейтуіндегі қ ұ жатты .html кең ейтуіндегі қ ұ жатқ а ө згертеміз. Сонда біздің Salem.txt қ ұ жаты Salem.html қ ұ жатына айналады. Сол Salem.html қ ұ жатын сізге ың ғ айлы веб браузерлердің (Mozilla, Opera, Google Chrome жә не т.б.) бірінде ашып кө рсең із, тө мендегі веб-бет пайда болады:

Сурет 15. Salem.html қ ұ жаты

Тегтер жә не олардың қ ұ рылымы. < HTML> тегі міндетті тег, онсыз веб-бет болмайды. Ол < HTML> тегімен ашылып, < /HTML> тегімен жабылады. Осындай ашылып- жабылушы < HEAD> < /HEAD>, < BODY> < /BODY> сияқ ты тегтерді жұ пты тегтер деп атайды. Ал < BR>, < HR> сияқ ты тек ашылатын, бірақ жабылмайтын тегтер жұ псыз тегтер деп аталады.

Сурет 16. Тегтердің қ ұ рылымы

HTML тақ ырыптар:

< h1> < /h1> – Бірінші дең гейдегі тақ ырып

< h2> < /h2> – Екінші дең гейдегі тақ ырып

< h3> < /h3> – Ү шінші дең гейдегі тақ ырып

< h4> < /h4> – Тө ртінші дең гейдегі тақ ырып

< h5> < /h5> – Бесінші дең гейдегі тақ ырып

< h6> < /h6> – Алтыншы дең гейдегі тақ ырып

< p> < /p> – Бұ л параграф

Бұ л жерде дең гей сө зі мә тіннің ө лшемін, ү лкен-кішілігін білдіріп тұ р. Яғ ни Бірінші дең гейдегі тақ ырып < h1> < /h1> тегі арасына жазылатын мә тін ең ү лкен ө лшемдегі мә тін болып есептеледі. Ал < p> < /p> тегі болса, параграфты белгілейді.

< html>

< head>

< title> HTML тақ ырыптар< /title>

< /head>

< body>

< h1> Бірінші дең гейдегі тақ ырып< /h1>

< h2> Екінші дең гейдегі тақ ырып< /h2>

< h3> Ү шінші дең гейдегі тақ ырып< /h3>

< h4> Тө ртінші дең гейдегі тақ ырып< /h4>

< h5> Бесінші дең гейдегі тақ ырып< /h5>

< h6> Алтыншы дең гейдегі тақ ырып< /h6>

< /body>

< /html>

Сурет 17. HTML тақ ырыптар

HTML азатжол:

< html>

< head>

< title> HTML азатжол< /title>

< /head>

< body>

< p> Бірінші азатжол< /p>

< p> Екінші азатжол< /p>

< /body>

< /html>

Сурет 18. HTML азатжол

Бірінші < p> < /p> тегі арасында орналасқ ан мә тін бірінші азатжол болып есептеледі. Ал екінші < p> < /p> тегі арасында орналасқ ан мә тін екінші азатжол болып есептеледі. Веб-бетте кө рінетін ә р азатжолдың арасында бір бос қ атар болады, ол азатжолдарды бірден ажыратуғ а кө мек береді.

Тү сініктеме (комментарий):

< html>

< head>

< title> Тү сінік< /title>

< /head> < body>

<! --Бұ л тү сініктеме веб-бетте кө рінбейді -->

< p> Бұ л азатжол< /p>

< /body>

< /html>

Сурет 19. Тү сініктеме

Бұ л тү сініктеме (комментарий) басқ а бағ дарламалық тілдер сияқ ты HTML тілі ү шін де ө те қ ажет. Себебі кодқ а тү сініктеме беру – бағ дарламашы HTML тіліндегі кодты жақ сы тү сінуі ү шін аса қ ажет.

Бірақ тү сініктеме веб-бетте кө рінбейді. Себебі, бұ л кодқ а жазылғ ан тү сініктеменің оқ ырманғ а қ ажеті де жоқ.

< BR> тегі:

< html>

< head>

< title> Сызушы < HR> тегі< /title>

< /head> < body>

< p> Бұ л< br> бө лінген< br> азатжол< /p>

< /body> < /html>

Сурет 20. < BR> тегі

< br> тегі ө зінен соң келген сө зді немесе сө йлемді келесі қ атарғ а тү сіреді. < br> тегі бір қ атардағ ы сө здерді немесе сө йлемдерді бірнеше қ атарғ а бө ліп тастайды.

< HR> тегі

< html>

< head>

< title> Сызушы < HR> тегі< /title>

< /head>

< body>

< p> Бұ л сызылғ ан азатжол< /p> < hr>

< p> Бұ л да сызылғ ан азатжол< /p>

< hr>

< /body>

< /html>

Сурет 21. < HR> тегі

< hr> тегі сө зден немесе сө йлемнен соң жазылып, сол сө зден немесе сө йлемнен соң сызық тү сіреді. Яғ ни, кейінгі қ атарда бір сызық сызады.