12 модуль
Бұл сабақта үйренетіндеріміз:
• Уеб сайт құру
• Алғашқы бетпен танысу
• Уеб беттің бөліктерімен танысу
Бұл бетте көріп тұрғаныңыз қарапайым сайттың алғашқы беті. Бұл сайт
қандай бөліктерден тұратынын айта кететін болсақ. Ең бірінші жоғарыда
тұратын жоғарғы фрейм (frame). Одан кейін ортаңғы, негізгі фрейм. Оның өзі
үш бөліктен тұрады. Бірінші – меню, екінші – контент, үшінші – related, әр
түрлі жаңалық, хабарландыру тұратын бөлім. Ең төменде футер (footer), онда
компанияның мекен-жайы, телфоны жазылады.
Енді сайттың кодымен, беттерімен танысайық.
Негізгі
index.html бетін қарайық. Бірінші тұрған DOCTYPE HTML PUBLIC –
HTML-дің қай версияда жазылғанын білдіреді. ,
тегтерімен
таныспыз. кодировкасын дұрыстауды білдіреді.
</p>
<p>тегі тақырыпты білдіреді. </p>
<p>
<p>Одан кейін <frameset> жоғары бөлікке 100, ал төменгі бөлікке 80, ал ортаңғы </p>
<br />
<br />бөлікке кішірейіп-үлкейіп, өзгеріп тұрушы өлшемге ие.
</p>
<p>TopNav деген TopNavigation деген жоғарғы бөліктегі фрейм. </p>
<p>Кейін үш бөліктен тұрушы FRAMESET. Екі шетіндегі 200 өлшемге ие, ал
</p>
<p>ортаңғысы соған сәйкес өзгеріп тұрады. </p>
<p>
<p>Frameborder, border – шекараларының нолге тең екенін білдірсе, framespacing </p>
<br />
<br />жан-жағында ашық орын қалмайтыны білдіреді.
</p>
<p>Menu фреймі “menu_1.html” деген уеб беттен тұрады, marginheight, </p>
<p>marginwidth жоғары және шет жағына ешқандай ашық орын болмауын
</p>
<p>білдіреді. </p>
<p>
<p>Сондай-ақ, content, related және Footer деген бөлімдері де сол сияқты. </p>
<br />
<br />Енді басқа уеб беттерді қарайық. Content.html беті мынадай Алматы жайлы
</p>
<p>мәліметтен тұрады. Осы content сияқты уеб беттер ашып, басқа да қалаларды </p>
<p>салуға болады. Мысалы: Астана, Атырау, Шымкент сияқты бұкіл
</p>
<p>Қазақстанның қалаларын салып қоюға болады. Бізде бұл сілтемелер жұмыс </p>
<p>істемейді себебі оларды толықтыру үшін көптеген уеб беттер ашу керек.
</p>
<p>Сабақ күрделі болмауы үшін тек қана бір мысал, Алматы қаласын келтірдік. </p>
<br /></div> <STYLE type="text/css"> </STYLE> <div id="page2-div" >
<br />Ортаңғы бөлікте Астана шығуы үшін Астананы басып, Шымкентті басқанда
<p>ортада Шымкент шығып тұратындай немесе басқа да қалаларды басқанда </p>
<p>солар ауысып шығып тұратындай етіп жасауға болады.
</p>
<p>
<p>Ал оң жақта хабарландыру. Сайтты туристік компанияныкі деп алатын </p>
<br />
<br />болсақ, компанияға қатысты жаңалықтар шығарып қоюға болады.
</p>
<p>Footer компанияның байланыс ақпараттарын қамтиды. Енді content.html ішін </p>
<p>қарасақ, жаңа ғана айтқанымыздай Алматы жайлы ақпарат, кодта бізге таныс
</p>
<p>емес body-ге CSS стилін қосылған. <style type=”text/css”> жазып, CSS-ті </p>
<p>бөлек жазбай, HTML тілдің ішінде қарауға болады. Бұнда:
<br />
<br /><b><span id='Font-family:_Verdana,_Arial,_Sans-Serif'>Font-family: Verdana, Arial, Sans-Serif </span></b>шрифттің түрін білдіреді.
<br />
<br /><b>Font-size </b>шрифттің өлшемін білдіреді.<b> </b>
<br />
<br /><b>Margin </b>мәтіннің жан-жағындағы ашық тұратын орынды білдіреді.<b> </b>
<br />
<br /><b>Background-color</b> фонның түсін білдіреді.
</p>
<p>
<p>Map.jpg деп қойғанымыз, мына map.jpg деп аталушы суретті контент бөліміне </p>
<br />
<br />фон ретінде қойғанбыз. Сондай-ақ, Алматы тақырыбы және оның мәтіні.
</p>
<p>Одан тысқары <b>footer</b> бетінде де алдыңғы CSS код сияқты. Мына жерде екі </p>
<p>абзацта байланыс ақпараттары жазылған.
</p>
<p>Menu_1.html бетін ашсақ, CSS кодты және <b>Қалалар</b> деген тақырыпты </p>
<p>көреміз.
</p>
<p>
<p>Сілтеме жұмыс істету үшін басқа уеб беттерге сілтеме қоюға болады. </p>
<br />
<br />Бұл <b><span id='Related.html'>Related.html</span></b> беті. Әзірге ешқандай хабарландыру, жаңалық жоқ.
</p>
<p>Жаңалық болса, осында салуға болады. </p>
<br />
<br /><b>Top_nav.html</b> бетін ашып, <b>Қазақстан қалалары жайлы</b> мәліметтерді көре
<p>аламыз. </p>
<p>Жалпы, сайтты фреймдермен жасайтын болсақ, осындай бөлімдерден тұрады.
</p>
<p>Дизайнын өзіңіздің талғамыңызға қарай жасап алуыңызға болады. </p>
<p>
<br />
<br /><b>Қорытынды </b>
</p>
<p>Бұл сабақ қорытынды болғандықтан уеб сайт құруды үйрендік. Оның </p>
<p>алғашқы бетіне, оның қандай бөліктерден тұратыны жайлы шолу жасадық.
</p>
<p>Осымен HTML сабағын аяқтаймыз. HTML тілде сайт құрудың негізін </p>
<br />
<br />үйренгеніңізбен құттықтаймыз.
<br />
<br />
<br /></div></frameset>
Поделитесь с Вашими друзьями:
