Html css

1,965 views

Published on

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

No Downloads
Views
Total views
1,965
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
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> тегі сөзден немесе сөйлемнен соңжазылып, сол сөзден немесе сөйлемнен соң сызық түсіреді.Яғни кейінгі қатарда бір сызық сызады.

×