1-сабақ. HTML тіліне кіріспе
Мазмұны:•   HTML деген не?•   HTML тілінде уеббет жазу•   HTML тілінде уеббет көрінісі•   Тегтер және олардың құрылымы•   ...
HTML деген не?• HTML (Hypertext Markup Language — “еренмәтін  белгілеу тілі”) - дүниежүзілік ғаламторда еренмәтін мен  бас...
HTML тілінде уеббет жазу      Notepad-те жазылған Salem.txt құжатының ішінетөмендегі HTML кодын жазамыз.             <html...
HTML тілінде уеббет жазу           <html>           <head>           <title>Тақырып</title>           </head>           <b...
HTML тілінде уеббет көрінісі       Notepad-те жазылған .txt кеңейтуіндегі құжатты.html кеңейтуіндегі құжатқа өзгертеміз. С...
Тегтер және олардың құрылымы      <HTML> тегі міндетті тег болып онысыз уеббетболмайды. Ол <HTML> тегімен ашылып, </HTML> ...
Тегтер және олардың құрылымы
HTML тақырыптар <h1></h1> - Бірінші деңгейдегі тақырып <h2></h2> - Екінші деңгейдегі тақырып <h3></h3> - Үшінші деңгейдегі...
HTML тақырыптар<html><head><title>HTML тақырыптар</title></head><body><h1>Бірінші деңгейдегі тақырып</h1><h2>Екінші деңгей...
HTML абзац    <html>    <head>    <title>HTML абзац</title>    </head>    <body>    <p>Бірінші абзац</p>    <p>Екінші абза...
Түсініктеме(комментарий) <html> <head> <title>Түсінік</title> </head> <body> <!--Бұл түсініктеме уеббетте көрінбейді --> <...
<BR> тегі<html><head><title>Сызушы <HR> тегі</title></head><body><p>Бұл<br>бөлінген<br>абзац</p></body></html>       <br> ...
<HR> тегі<html><head><title>Сызушы <HR> тегі</title></head><body><p>Бұл сызылған абзац</p><hr><p>Бұл да сызылған абзац</p>...
Upcoming SlideShare
Loading in...5
×

Html css

1,320

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,320
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html css

  1. 1. 1-сабақ. HTML тіліне кіріспе
  2. 2. Мазмұны:• HTML деген не?• HTML тілінде уеббет жазу• HTML тілінде уеббет көрінісі• Тегтер және олардың құрылымы• Код пен уеббет
  3. 3. HTML деген не?• HTML (Hypertext Markup Language — “еренмәтін белгілеу тілі”) - дүниежүзілік ғаламторда еренмәтін мен басқа ақпараттан тұратын уеббеттерді жасауға арналған белгілеу тілі.• Көпшілік уеббеттер HTML тілі көмегімен жасалады.• HTML тілі әр түрлі уеб браузерлер(Internet Explorer, Mozilla, Opera, Chrome және т.б) арқылы аударылып, жалпы оқырманға түсінікті құжат болып көрінеді.• HTML тілінде уеббет енгізу үшін блокноттан (Notepad) қандай да бір атаумен құжат ашып, оған бағдарлама жасауды бастауға болады. Мысалы: Salem.txt деп сақтайық және оның ішіне код жазуды бастаймыз.
  4. 4. HTML тілінде уеббет жазу Notepad-те жазылған Salem.txt құжатының ішінетөмендегі HTML кодын жазамыз. <html> <head> <title>Тақырып</title> </head> <body> Сәлем, бұл менің бірінші уеббетім! </body> </html> HTML тілінде командаларды тэг(tag) деп атайды.Жоғарыдағы HTML тіліндегі бағдарламада көк түсте –тэгтер, ал қара түсте біз енгізген мәтіндер. Яғни < және >белгілері арасындағы сөздер тегтер болады. Осы екі < >жақшадан тысқары барлық мәтін уеббетте көрінеді.
  5. 5. HTML тілінде уеббет жазу <html> <head> <title>Тақырып</title> </head> <body> Сәлем, бұл менің бірінші уеббетім! </body> </html> Жоғарыдағы кодтың алдына ең бірінші қатардамына жариялау жазылады <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 3.2 Final//EN"> Бұл жариялау уеббраузерге HTML құжатты дұрыс аудару үшін көмектеседі.
  6. 6. HTML тілінде уеббет көрінісі Notepad-те жазылған .txt кеңейтуіндегі құжатты.html кеңейтуіндегі құжатқа өзгертеміз. Сонда біздіңSalem.txt құжаты Salem.html құжатына айналады. СолSalem.html құжатын сізге ыңғайлы уеббраузерлердің(Mozilla, Opera, Google Chrome және т.б.)бірінде ашып көрсеңіз, төмендегі уеббет пайда болады:
  7. 7. Тегтер және олардың құрылымы <HTML> тегі міндетті тег болып онысыз уеббетболмайды. Ол <HTML> тегімен ашылып, </HTML> тегіменжабылады. Осындай ашылып-жабылушы<HEAD></HEAD>, <BODY></BODY> сияқты тегтердіжұпты тегтер деп атайды. Ал <BR>, <HR> сияқты тек ғанаашылатын, бірақ жабылмайтын тегтер жұпсыз тегтер деп
  8. 8. Тегтер және олардың құрылымы
  9. 9. HTML тақырыптар <h1></h1> - Бірінші деңгейдегі тақырып <h2></h2> - Екінші деңгейдегі тақырып <h3></h3> - Үшінші деңгейдегі тақырып <h4></h4> - Төртінші деңгейдегі тақырып <h5></h5> - Бесінші деңгейдегі тақырып <h6></h6> - Алтыншы деңгейдегі тақырып <p></p> - Бұл параграф Бұл жерде деңгей сөзі мәтіннің өлшемін, үлкен-кішілігінбілдіріп тұр. Яғни Бірінші деңгейдегі тақырып <h1></h1> тегіарасына жазылатын мәтін ең үлкен өлшемдегі мәтін болыпесептеледі. Ал <p></p> тегі болса параграфты белгілейді.
  10. 10. HTML тақырыптар<html><head><title>HTML тақырыптар</title></head><body><h1>Бірінші деңгейдегі тақырып</h1><h2>Екінші деңгейдегі тақырып</h2><h3>Үшінші деңгейдегі тақырып</h3><h4>Төртінші деңгейдегі тақырып</h4><h5>Бесінші деңгейдегі тақырып</h5><h6>Алтыншы деңгейдегі тақырып</h6></body></html> Әр қашан өзгеріс енгізген соң, уеббетте F5түймешесін басу арқылы жаңартып тұру керек.
  11. 11. HTML абзац <html> <head> <title>HTML абзац</title> </head> <body> <p>Бірінші абзац</p> <p>Екінші абзац</p> </body> </html> Бірінші <p></p> тегі арасында орналасқан мәтін біріншіабзац болып есептеледі. Ал екінші <p></p> тегі арасындаорналасқан мәтін екінші абзац болып есептеледі. Уеббетте көрінетін әр абзацтардың арасында бір босқатар болады, ол абзацтарды бірден ажыратуға көмек береді.
  12. 12. Түсініктеме(комментарий) <html> <head> <title>Түсінік</title> </head> <body> <!--Бұл түсініктеме уеббетте көрінбейді --> <p>Бұл абзац</p> </body> </html> Бұл түсініктеме(комментарий) басқа бағдарламалықтілдер сияқты HTML тіліне де өте қажет. Себебі кодқатүсініктеме берілуі бағдарламашы HTML тіліндегі кодтыжақсы түсінуі үшін аса қажет. Бірақ түсініктеме уеббетте көрінбейді. Себебі бұл кодқажазылған түсініктеменің оқырманға қажеті де жоқ.
  13. 13. <BR> тегі<html><head><title>Сызушы <HR> тегі</title></head><body><p>Бұл<br>бөлінген<br>абзац</p></body></html> <br> тегі өзінен соң келген сөзді немесе сөйлемдікелесі қатарға түсіреді. <br> тегі бір қатардағы сөздердінемесе сөйлемдерді бірнеше қатарға бөліп тастайды.
  14. 14. <HR> тегі<html><head><title>Сызушы <HR> тегі</title></head><body><p>Бұл сызылған абзац</p><hr><p>Бұл да сызылған абзац</p><hr></body></html> <hr> тегі сөзден немесе сөйлемнен соңжазылып, сол сөзден немесе сөйлемнен соң сызық түсіреді.Яғни кейінгі қатарда бір сызық сызады.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×