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