Естен Ербол : HTML5 Тег білімдері - 1

admin 2018-05-11 Қысқаша

элементі ағымдағы құжат типін анықтауға арналған — DTD (document type definition, құжаттың типін ссипаттау). Бұл браузер аталмыш веб-парақшаны қалай түсіндіруі керектігіне негізделген....

Сайттағы барлық жобалар тегін қолданысқа берілген, жоба авторы Естен Ербол

 HTML5 Тег білімдері - 1

 HTML5 Тегтік негізгі құрлымы

 

Code :

XML/HTML CodeEsten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Page Title</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <h1>This is a Heading</h1>  
  10. <p>This is a paragraph.</p>  
  11.   
  12. </body>  
  13. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 HTML5 Бөліктік негізгі құрлымы

website-code-html5-optimized1.jpg

 

 <1> <!DOCTYPE>

 

 Сипаттама

<!DOCTYPE> элементі ағымдағы құжат типін анықтауға арналған — DTD (document type definition, құжаттың типін ссипаттау). Бұл браузер аталмыш веб-парақшаны қалай түсіндіруі керектігіне негізделген. Себебі,HTML бірнеше нұсқада бар. Оның үстіне XHTML (EXtensible HyperText Markup Language, гипермәтінді белгілеудің кеңейтілген тілі) бар. Ол HTML-ге ұқсас. Бірақ синтаксис бойынша айырмашылықтары бар. Браузер шатаспай, веб-парақшаны қандай стандарт бойынша түсінуі үшін кодтың бірінші жолында <!DOCTYPE>-ты жазу керек.  

Параметрлер

Жоғарғы деңгей элементі — құжаттағы жоғарғы деңгейдегі элементті көрсетеді, HTML үшін бұл<html> тегі.

Жариялылық — нысан көпшілікке арналған (PUBLIC мағынасы) немесе жүйелік ресурс (SYSTEM мағынасы), мысалы, жергілікті файл секілді. HTML/XHTML үшін PUBLIC мағынасы көрсетіледі. 

Тіркеу — DTD жасаушы халықаралық стандарттау ұйымында тіркелгенін хабарлайды (International Organization for Standardization, ISO). Ол екі мағынаның бірін таңдайды: плюс (+) – жасаушы ISO-да тіркелген және минус (-) – жасаушы тіркелмеген. W3C үшін (-) мағынасы қойылады. 

Ұйым — DTD ойлап тапқан ұйымның ерекше атауы. Ресми түрде HTML/XHTML-ды W3C жариялайды, <!DOCTYPE>-та сол атау жазылады. 

Тип — сипатталатын құжаттың типі. HTML/XHTMLүшін DTD мағынасы көрсетіледі. 

Атауы — DTD сипаттайтын құжаттың ерекше атауы. 

Тілі — нысанды сипаттайтын мәтін тілі. Екі әріптен тұрады. Жоғарғы регистрде жазылады. HTML/XHTML құжаты үшін ағылшын тілі (EN) көрсетіледі.

URL —DTD-дегі құжаттың атауы.

 

Code :

XML/HTML CodeEsten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.    <title>!DOCTYPE</title>  
  5.    <meta charset="utf-8">  
  6.  </head>  
  7.  <body>  
  8.   <p>Разум — это Будда, а прекращение умозрительного мышления — это путь.   
  9.   Перестав мыслить понятиями и размышлять о путях существования и небытия,   
  10.   о душе и плоти, о пассивном и активном и о других подобных вещах,   
  11.   начинаешь осознавать, что разум — это Будда,   
  12.   что Будда — это сущность разума,   
  13.   и что разум подобен бесконечности.</p>  
  14.  </body>   
  15. </html>  

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

<2> <!-- -->

Сипаттамасы 

Тег – құжаттың кодына комментарий қосады. Комментарий мәтіні парақшада көрінбейді. Комментарийдің  ішіне басқа тег қосуға рұқсат етіледі. Комментарийдің (бір комментарий екіншісінің ішінде орналасқан кезде) ішіне басқа комментарий енгізуге тыйым салынады.

 

Code :

XML/HTML CodeEsten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.    <title>Комментарии</title>  
  5.    <meta charset="utf-8">  
  6.  </head>  
  7.  <body>   
  8.    <!-- Раздел -->  
  9.    <section class="b-lastAdded">  
  10.     <h1 class="b-lastAdded__title">Последние добавленные фотографии</h1>  
  11.     <div class="b-lastAdded__item">...</div>  
  12.    </section>  
  13.  </body>   
  14. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

<3> <a>

Сипаттамасы 

<a> тег HTML элементтерінің бірі болып табылады және сілтемелерді жасауға арналған.

Сілтеме жасалатын құжаттың URLадресін көрсетіңіз. Href төлсипатының мәні көшу орын алатын құжат мекенжайы (URL, Universal Resource Locator) болып табылады. 

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.    <meta charset="utf-8">  
  5.   <title>Тег А</title>  
  6.  </head>  
  7.  <body>  
  8.   <p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>  
  9.   <p><a href="tip.html">Как сделать такое же фото?</a></p>   
  10. </body>  
  11. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

4.<address>

Сипаттамасы

Тег <address> автор немесе сайт туралы ақпаратты сақтау үшін арналған және т.б. сілтемелер, мәтін, жарықтандырылады, сондай-ақ кез келген HTML элементтерін қамтуы мүмкін Іздеу механизмдері сайт авторлары туралы ақпаратты жинау үшін осы тегтің қолданысы беріледі

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2.  <html>  
  3.   <head>  
  4.    <meta charset="utf-8">  
  5.    <title>Тег ADDRESS</title>  
  6.   </head>  
  7.  <body>  
  8.   <footer>  
  9.    <address>Волоколамское шоссе, д. 17, офис 392</address>  
  10.   </footer>  
  11.  </body>  
  12. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 <5> <article>

Сипаттамасы

Тег <article> жаңалықтар, мақалалар, блог, форумға немесе басқада сайттың мазмұнын анықтайды.

 

 Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>article</title>  
  6.  </head>   
  7.  <body>  
  8.   <header>  
  9.     <h1>Следы невиданных зверей</h1>  
  10.   </header>  
  11.   <article>  
  12.     История о том, как возле столовой появились загадочные розовые   
  13.     следы с шестью пальцами, и почему это случилось.   
  14.   </article>  
  15.  </body>   
  16. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз
 

 

 <6> <abbr>

Сипаттамасы

Тег <abbr> Сурет, бейне жазба, тақырып қосылмаған орындарында тінтуірді түртбей ақ, белгіленген орынға тінтуірді апарсаңыз, берілген қосымша тақырып көрінеді.  

Берілген тақырыпқа қосымша сипаттама беруге арналған.

 

Code:

Esten Tech
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.  <head>  
  4.   <title>Тег ABBR</title>  
  5.   <meta charset="utf-8">  
  6.   <style>  
  7.    abbr {  
  8.     border-bottom: 1px dashed red; /* Пунктирное подчеркивание текста */  
  9.     color: #000080; /* Темно-синий цвет текста */  
  10.    }  
  11.   </style>  
  12.  </head>  
  13.  <body>   
  14.   <p><abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI</abbr>   
  15.   обозначается протокол, с помощью которого любые внешние программы взаимодействуют   
  16.   с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом   
  17.   языке программирования и результат их действия выводить в виде веб-страницы.</p>  
  18. </body>   
  19. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

<7> <applet>

Сипаттамасы

Сайттан жаңа терезе ашып көрсетуге арналған, Java да қысқартылып жазылған бағдарлама.

 

Code:

Esten Tech
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
  2.   "http://www.w3.org/TR/html4/strict.dtd">  
  3. <html>  
  4.  <head>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.   <title>Тег APPLET</title>  
  7.  </head>  
  8.  <body>  
  9.   <p>Текущее время: <applet code="Clock.class" width="60" height="10">  
  10.     Ваш браузер не поддерживает Java-апплеты.  
  11.   </applet></p>  
  12.  </body>  
  13. </html>  

 

Мысалға:

tag_applet.png


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 <8> <aside>

Сипаттамасы

Сайттың құрлымын белгілеуге Яғыни бөлікке бөлуге арналған, сайттық мазмұндаманы өз ішінде қамтиды, <aside> тегі HTML5 те маңызды құрлымдағы тегдің бірі.

әдетте, «бүйірлік тақтасы» немесе «боковая панель» деп аталады.

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>aside</title>  
  6.   <script>  
  7.    document.createElement('aside');  
  8.    document.createElement('article');  
  9.   </script>  
  10.   <style>  
  11.    aside {  
  12.     background: #f0f0f0;  
  13.     padding: 10px;  
  14.     width: 200px;  
  15.     float: right;  
  16.    }  
  17.    article {  
  18.     margin-right: 240px;  
  19.     display: block;  
  20.    }  
  21.   </style>  
  22.  </head>   
  23.  <body>  
  24.   <header><h1>Байки</h1></header>  
  25.   <aside>  
  26.    <p>Экономьте электричество</p>  
  27.    <p>Хороший язык</p>  
  28.    <p>Чья палка больше</p>  
  29.   </aside>  
  30.   <article>  
  31.    История о том, как приходилось экономить электричество,   
  32.    какие меры для этого принимались, и куда оно на самом деле уходило.  
  33.   </article>  
  34.  </body>   
  35. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

<9> <area>

Сипаттамасы

Тег <area> Толық берілген бір суреттің белгіленген орнын үлкейтіп көрсету болмаса белгіленген орынды жаңа терезеге өтіп толықтай тұсындыру сияқты ерекшеліктері бар, ол сурет ішінде белгілі орынды нысан ретінде қалыптастырады. 

Бұл тег әрқашан <map> тегінің ішінде орналасады .

 

Code:

Esten Tech
  1. <html>  
  2. <body>  
  3.   
  4. <p>Сурет ішіндегі белгіленген орынды тұртып, үлкейтіп көріңіз</p>  
  5.   
  6. <img  
  7. src="/i/eg_planets.jpg"  
  8. border="0" usemap="#planetmap"  
  9. alt="Planets" />  
  10.   
  11. <map name="planetmap" id="planetmap">  
  12.   
  13. <area  
  14. shape="circle"  
  15. coords="180,139,14"  
  16. href ="/example/html/venus.html"  
  17. target ="_blank"  
  18. alt="Venus" />  
  19.   
  20. <area  
  21. shape="circle"  
  22. coords="129,161,10"  
  23. href ="/example/html/mercur.html"  
  24. target ="_blank"  
  25. alt="Mercury" />  
  26.   
  27. <area  
  28. shape="rect"  
  29. coords="0,0,110,260"  
  30. href ="/example/html/sun.html"  
  31. target ="_blank"  
  32. alt="Sun" />  
  33.   
  34. </map>  
  35.   
  36. </body>  
  37. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

 

 <10> <audio>

Сипаттамасы

Веб-бетке дыбыстық жазбалар мен музыкаларды қосуға арналған, музыка қойғышты басқаруға, меңгерім алып баруға болады.

Дыбыстық жазбаға src төлсипаты кірістірілген,  <source> тегі арқылы көрсетіледі 

 

Code:

Esten Tech
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   <meta charset="utf-8">  
  5.   <title>audio</title>  
  6.  </head>  
  7.  <body>  
  8.   <p>ШАМШЫРАҚ ДУЕТІ - СҮЙЕМІН</p>  
  9.   <audio controls>  
  10.     <source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">  
  11.     <source src="audio/music.mp3" type="audio/mpeg">  
  12.     Тег audio не поддерживается вашим браузером.   
  13.     <a href="http://www.kazmusic.kz/_ld/48/4889__--www.kazmusic.mp3">Скачайте музыку</a>.  
  14.   </audio>  
  15.  </body>  
  16. </html>  

 

Мысалға:


Кодты іске қосуды тұртып Кодтың құбылысын көре аласыз

 

Дайындаған: Естен Ербол

Esten TechЕстен Ербол : HTML5 Тег білімдері - 1

Барлық құқықтар қорғалған

Естен Ербол: HTML5 туралы білуге тиісті бес нәрсе
HTML5-тің біржақты тарихы жөнінде

Ұқсас тақырыптар