SlideShare ist ein Scribd-Unternehmen logo
1 von 14
1-сабақ. HTML тіліне кіріспе
Мазмұны:
•   HTML деген не?
•   HTML тілінде уеббет жазу
•   HTML тілінде уеббет көрінісі
•   Тегтер және олардың құрылымы
•   Код пен уеббет
HTML деген не?
• HTML (Hypertext Markup Language — “еренмәтін
  белгілеу тілі”) - дүниежүзілік ғаламторда еренмәтін мен
  басқа ақпараттан тұратын уеббеттерді жасауға арналған
  белгілеу тілі.
• Көпшілік уеббеттер HTML тілі көмегімен жасалады.
• HTML тілі әр түрлі уеб браузерлер(Internet Explorer,
  Mozilla, Opera, Chrome және т.б) арқылы аударылып,
  жалпы оқырманға түсінікті құжат болып көрінеді.
• HTML тілінде уеббет енгізу үшін блокноттан (Notepad)
  қандай да бір атаумен құжат ашып, оған бағдарлама
  жасауды бастауға болады. Мысалы: Salem.txt деп
  сақтайық және оның ішіне код жазуды бастаймыз.
HTML тілінде уеббет жазу
      Notepad-те жазылған Salem.txt құжатының ішіне
төмендегі HTML кодын жазамыз.
             <html>
             <head>
             <title>Тақырып</title>
             </head>
             <body>
             Сәлем, бұл менің бірінші уеббетім!
             </body>
             </html>
       HTML тілінде командаларды тэг(tag) деп атайды.
Жоғарыдағы HTML тіліндегі бағдарламада көк түсте –
тэгтер, ал қара түсте біз енгізген мәтіндер. Яғни < және >
белгілері арасындағы сөздер тегтер болады. Осы екі < >
жақшадан тысқары барлық мәтін уеббетте көрінеді.
HTML тілінде уеббет жазу
           <html>
           <head>
           <title>Тақырып</title>
           </head>
           <body>
           Сәлем, бұл менің бірінші уеббетім!
           </body>
           </html>

      Жоғарыдағы кодтың алдына ең бірінші қатарда
мына жариялау жазылады <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 3.2 Final//EN"> Бұл жариялау уеб
браузерге HTML құжатты дұрыс аудару үшін көмектеседі.
HTML тілінде уеббет көрінісі
       Notepad-те жазылған .txt кеңейтуіндегі құжатты
.html кеңейтуіндегі құжатқа өзгертеміз. Сонда біздің
Salem.txt құжаты Salem.html құжатына айналады. Сол
Salem.html құжатын сізге ыңғайлы уеб
браузерлердің(Mozilla, Opera, Google Chrome және т.б.)
бірінде ашып көрсеңіз, төмендегі уеббет пайда болады:
Тегтер және олардың құрылымы




      <HTML> тегі міндетті тег болып онысыз уеббет
болмайды. Ол <HTML> тегімен ашылып, </HTML> тегімен
жабылады. Осындай ашылып-жабылушы
<HEAD></HEAD>, <BODY></BODY> сияқты тегтерді
жұпты тегтер деп атайды. Ал <BR>, <HR> сияқты тек ғана
ашылатын, бірақ жабылмайтын тегтер жұпсыз тегтер деп
Тегтер және олардың құрылымы
HTML тақырыптар
 <h1></h1> - Бірінші деңгейдегі тақырып
 <h2></h2> - Екінші деңгейдегі тақырып
 <h3></h3> - Үшінші деңгейдегі тақырып
 <h4></h4> - Төртінші деңгейдегі тақырып
 <h5></h5> - Бесінші деңгейдегі тақырып
 <h6></h6> - Алтыншы деңгейдегі тақырып
 <p></p> - Бұл параграф
       Бұл жерде деңгей сөзі мәтіннің өлшемін, үлкен-кішілігін
білдіріп тұр. Яғни Бірінші деңгейдегі тақырып <h1></h1> тегі
арасына жазылатын мәтін ең үлкен өлшемдегі мәтін болып
есептеледі. Ал <p></p> тегі болса параграфты белгілейді.
HTML тақырыптар
<html>
<head>
<title>HTML тақырыптар</title>
</head>
<body>
<h1>Бірінші деңгейдегі тақырып</h1>
<h2>Екінші деңгейдегі тақырып</h2>
<h3>Үшінші деңгейдегі тақырып</h3>
<h4>Төртінші деңгейдегі тақырып</h4>
<h5>Бесінші деңгейдегі тақырып</h5>
<h6>Алтыншы деңгейдегі тақырып</h6>
</body>
</html>

     Әр қашан өзгеріс енгізген соң, уеббетте F5
түймешесін басу арқылы жаңартып тұру керек.
HTML абзац
    <html>
    <head>
    <title>HTML абзац</title>
    </head>
    <body>
    <p>Бірінші абзац</p>
    <p>Екінші абзац</p>
    </body>
    </html>

       Бірінші <p></p> тегі арасында орналасқан мәтін бірінші
абзац болып есептеледі. Ал екінші <p></p> тегі арасында
орналасқан мәтін екінші абзац болып есептеледі.
       Уеббетте көрінетін әр абзацтардың арасында бір бос
қатар болады, ол абзацтарды бірден ажыратуға көмек береді.
Түсініктеме(комментарий)
 <html>
 <head>
 <title>Түсінік</title>
 </head>
 <body>
 <!--Бұл түсініктеме уеббетте көрінбейді -->
 <p>Бұл абзац</p>
 </body>
 </html>

       Бұл түсініктеме(комментарий) басқа бағдарламалық
тілдер сияқты HTML тіліне де өте қажет. Себебі кодқа
түсініктеме берілуі бағдарламашы HTML тіліндегі кодты
жақсы түсінуі үшін аса қажет.
       Бірақ түсініктеме уеббетте көрінбейді. Себебі бұл кодқа
жазылған түсініктеменің оқырманға қажеті де жоқ.
<BR> тегі
<html>
<head>
<title>Сызушы <HR> тегі</title>
</head>
<body>
<p>Бұл<br>бөлінген<br>абзац</p>
</body>
</html>

       <br> тегі өзінен соң келген сөзді немесе сөйлемді
келесі қатарға түсіреді. <br> тегі бір қатардағы сөздерді
немесе сөйлемдерді бірнеше қатарға бөліп тастайды.
<HR> тегі
<html>
<head>
<title>Сызушы <HR> тегі</title>
</head>
<body>
<p>Бұл сызылған абзац</p>
<hr>
<p>Бұл да сызылған абзац</p>
<hr>
</body>
</html>

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

Weitere ähnliche Inhalte

Was ist angesagt?

HTML-(workshop)7557.pptx
HTML-(workshop)7557.pptxHTML-(workshop)7557.pptx
HTML-(workshop)7557.pptxRaja980775
 
gdsc-html-ppt.pptx
gdsc-html-ppt.pptxgdsc-html-ppt.pptx
gdsc-html-ppt.pptxyuvakiran15
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for studentsvethics
 
HTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafHTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafSandhika Galih
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & videoHamza Zahid
 
Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Marjorie Sample
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScriptT11 Sessions
 
Html project
Html projectHtml project
Html projectarsh7511
 
6 клас 23 урок. Вставлення графічних зображень у текстовий документ
6 клас 23 урок. Вставлення графічних зображень у текстовий документ6 клас 23 урок. Вставлення графічних зображень у текстовий документ
6 клас 23 урок. Вставлення графічних зображень у текстовий документStAlKeRoV
 

Was ist angesagt? (20)

Html
HtmlHtml
Html
 
Php Presentation
Php PresentationPhp Presentation
Php Presentation
 
Html hel 10-11 p анги
Html hel 10-11 p ангиHtml hel 10-11 p анги
Html hel 10-11 p анги
 
HTML
HTMLHTML
HTML
 
HTML-(workshop)7557.pptx
HTML-(workshop)7557.pptxHTML-(workshop)7557.pptx
HTML-(workshop)7557.pptx
 
Html
HtmlHtml
Html
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
gdsc-html-ppt.pptx
gdsc-html-ppt.pptxgdsc-html-ppt.pptx
gdsc-html-ppt.pptx
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Програмчлалын хэл
Програмчлалын хэлПрограмчлалын хэл
Програмчлалын хэл
 
Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for students
 
3. Java Script
3. Java Script3. Java Script
3. Java Script
 
HTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafHTML Dasar : #4 Paragraf
HTML Dasar : #4 Paragraf
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & video
 
PHP Tutorials
PHP TutorialsPHP Tutorials
PHP Tutorials
 
Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)Intro to HTML (Kid's Class at TIY)
Intro to HTML (Kid's Class at TIY)
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
 
Css
CssCss
Css
 
Html project
Html projectHtml project
Html project
 
6 клас 23 урок. Вставлення графічних зображень у текстовий документ
6 клас 23 урок. Вставлення графічних зображень у текстовий документ6 клас 23 урок. Вставлення графічних зображень у текстовий документ
6 клас 23 урок. Вставлення графічних зображень у текстовий документ
 

Andere mochten auch

Ағылшын тілі пәнінен құзіреттілікке бағытталған тапсырмалар жинағы /5 сынып/
Ағылшын тілі пәнінен құзіреттілікке бағытталған тапсырмалар жинағы /5 сынып/Ағылшын тілі пәнінен құзіреттілікке бағытталған тапсырмалар жинағы /5 сынып/
Ағылшын тілі пәнінен құзіреттілікке бағытталған тапсырмалар жинағы /5 сынып/Айбек Қуандықұлы
 
Adjective phrases
Adjective phrasesAdjective phrases
Adjective phrasesdariyanto1
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsLinkedIn
 
TEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkTEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkVolker Hirsch
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017Drift
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheLeslie Samuel
 

Andere mochten auch (18)

Present Simple Tense
Present Simple Tense  Present Simple Tense
Present Simple Tense
 
1.Phonetics
1.Phonetics1.Phonetics
1.Phonetics
 
3.to be present & past simple
3.to be present & past simple3.to be present & past simple
3.to be present & past simple
 
2.nouns.articles
2.nouns.articles2.nouns.articles
2.nouns.articles
 
5.pronouns
5.pronouns5.pronouns
5.pronouns
 
1.phonetics
1.phonetics1.phonetics
1.phonetics
 
Ағылшын тілі пәнінен құзіреттілікке бағытталған тапсырмалар жинағы /5 сынып/
Ағылшын тілі пәнінен құзіреттілікке бағытталған тапсырмалар жинағы /5 сынып/Ағылшын тілі пәнінен құзіреттілікке бағытталған тапсырмалар жинағы /5 сынып/
Ағылшын тілі пәнінен құзіреттілікке бағытталған тапсырмалар жинағы /5 сынып/
 
үлгерімі нашар оқушылармен жұмыс
үлгерімі нашар оқушылармен жұмысүлгерімі нашар оқушылармен жұмыс
үлгерімі нашар оқушылармен жұмыс
 
4.present simple tense, havehas
4.present simple tense, havehas4.present simple tense, havehas
4.present simple tense, havehas
 
Die adjective
Die adjectiveDie adjective
Die adjective
 
12027
1202712027
12027
 
Adjective phrases
Adjective phrasesAdjective phrases
Adjective phrases
 
Adjective
AdjectiveAdjective
Adjective
 
adjective phrase
adjective phraseadjective phrase
adjective phrase
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
 
TEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkTEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of Work
 
3 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 20173 Things Every Sales Team Needs to Be Thinking About in 2017
3 Things Every Sales Team Needs to Be Thinking About in 2017
 
How to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your NicheHow to Become a Thought Leader in Your Niche
How to Become a Thought Leader in Your Niche
 

Html css

  • 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> сияқты тек ғана ашылатын, бірақ жабылмайтын тегтер жұпсыз тегтер деп
  • 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> тегі сөзден немесе сөйлемнен соң жазылып, сол сөзден немесе сөйлемнен соң сызық түсіреді. Яғни кейінгі қатарда бір сызық сызады.