1 of 16

HTML

2 of 16

Абзацтар

Абзацтар үлкен мәтінді шағын логикалық блоктарға бөлудің негізгі тәсілі болып табылады. Бұл блоктар бір-бірінен автоматты түрде шегінеді. Мұндай мәтінді оқу әлдеқайда оңай және пайдаланушыларды қорқытпайды.

Абзацтар жұптық тегтің көмегімен жасалады<p></p>

Мысалы:

<p>Сағындықова Ақтоты</p>

<p>Телефон: 8 (8765) 333-00-00</p>

3 of 16

Мәтін стилі

Кез келген мәтінде оқырманға жеткізгіңіз келетін негізгі бөліктер бар. Бұл анықтамалар, кеңестер, негізгі идея болуы мүмкін. Егер мәтін көп болса, онда мұндай бөліктер жоғалып кетуі немесе мүлдем табылмауы мүмкін. Браузер мен пайдаланушыға беттегі осындай бөліктерді жылдам табуға қалай көмектесуге болады? 

HTML белгілеуінде осы мақсат үшін қалың және көлбеу мәнерлерді пайдалануға болады .

Мәтінді қалың ету үшін екі жұпталған тегтердің бірі пайдаланылады.<b></b>,<strong></strong>, <i></i>,<em></em>.

4 of 16

HTML <del> элементі құжаттан жойылған мәтінді анықтайды. Браузерлер әдетте жойылған мәтін арқылы сызық жасайды:

<p> Менің туған қалам <del>Астана</del> емес Алматы</p>

<p> Менің туған қалам <del> Астана </del> <ins> Алматы </ins>.</p>

<br> - азат жолды бөлмей келесі сөзді жаңа жолға көшіру керек жағдайда қолданылады.

<mark></mark>

<sup></sup>

<sub></sub>

<q></q>

5 of 16

Тақырыптар

Мәтін неғұрлым үлкен болса, соғұрлым ол логикалық бөлімдерге жиі бөлінеді. 

Мысалы, есеп, диплом немесе реферат үш негізгі бөліктен тұрады:

  1. Кіріспе
  2. Негізгі бөлім
  3. Қорытынды

Тақырыптарға мұндай логикалық бөлу құжатты жылдам шарлауға және қажетті бөлікті табуға мүмкіндік береді.

Тақырыптарды құру үшін 6 жұпталған тегтер қолданылады: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Мұндағы <h1> бірінші деңгей тақырыбы, ең маңызды және мәтіннің негізгі тақырыбын сипаттайтын <h6> ең төменгі деңгейдегі тақырып

6 of 16

<!DOCTYPE html>

<html>

<head>

<title> Кіріспе </title>

</head>

<body>

<h1> Дизайндағы алғашқы қадамым </h1>

<h2> Дизайндағы алғашқы қадамым </h2>

<h3>Дизайндағы алғашқы қадамым </h3>

<h4> Дизайндағы алғашқы қадамым</h4>

<h5> Дизайндағы алғашқы қадамым</h5>

<h6> Дизайндағы алғашқы қадамым </h6>

</body>

</html>

7 of 16

Тізімдер

Тізімдер - бетте мазмұнды көрсетудің бір жолы. Олардың көмегімен шағын байланысты фрагменттерді топтастыру оңай.

ul – Бізге тізімдердің нүкте күйінде шығаруға мүмкіндік береді.

ol – Бізге тізімдердің сан күйінде шығаруға мүмкіндік береді.

8 of 16

<ul>

<li> Мен бірінші күні 25 бет кітап оқыдым</li>

<li> Мен бірінші күні 25 кітап бет кітап оқыдым </li>

</ul>

<ul>

<ol>

<li> Мен бірінші күні 25 бет кітап оқыдым</li>

<li> Мен бірінші күні 25 кітап бет кітап оқыдым </li>

</ol>

<ol>

9 of 16

Кесте

Ақпаратты ұсынудың кең таралған түрлерінің бірі кестелер болып табылады. Біз оларды барлық жерде кездестіреміз: өнім туралы ақпарат, көбейту кестесі, құжаттар. Бұл презентация белгілі бір өнімдердің сипаттамаларын салыстыруды жеңілдетеді. Беттерді орналастырған кезде кестелер аздап шатастыратын орналасуы болса да, жиі пайдаланылады.

Кесте - бұл бірден бірнеше кірістірілген тегтерден құралатын құрама элемент. Бұл тізімдердің жасалу жолына ұқсас - оның ішінде контейнер және арнайы элемент тегтері бар.

Белгілеу бірнеше негізгі элементтерді қамтиды:

<table> </table> - Таблица

<tr></tr> - жол

<thead></thead> - кесте атауы

<tbody></tbody> - тақырып ұяшығы

<td></td> - баған

10 of 16

<style>

table, th, td {

border:1px double; black;

}

</style>

<body>

<h2>Жеткізуге қатысты ақпараттар тізімі</h2>

<table style="width:100%">

<tr>

<th>Қойма 1</th>

<th>Қойма 2</th>

<th>Қойма 3</th>

<th>Қойма 4</th>

</tr>

<tr>

<td>Сүт өнімі</td>

<td>Су өнімі</td>

<td>Ыдыстар</td>

<td>Киімдер</td>

</tr>

<tr>

<td>200 дана</td>

<td>25 000 дана</td>

<td>36 адамдық</td>

<td>70 дана</td>

</tr>

</table>

</body>

11 of 16

12 of 16

HTML арнайы таңбалары

Мәтінде арнайы таңбаларды – мнемотехниканы қолдануға болады. Олар математика немесе грек сияқты пернетақтада емес, таңбалар кестесінде бар таңбаларды пайдалануға мүмкіндік береді:

Бұл таңбаларды жазу үшін пайдаланыңыз &символ-атау;

Таңба атауындағы әріптердің тәртіп жағдайын сақтау маңызды.

HTML тіліндегі негізгі типографиялық мнемоника:

  • &nbsp;- үзілмейтін алшақтық. Мәтіннің логикалық құрылымын бұзатын бос орын бар жолды орап алмауға мүмкіндік беретін өте маңызды нәрсе
  • &laquo;және &raquo;- дәстүрлі «Шырша тырнақшалары». Типографияда жиі қолданылады
  • &mdash;- сызықша

Мнемотехника тегтерді браузер өңдемей кірістіру қажет болғанда жиі кездеседі. Бұл жағдайда сәйкесінше < және > белгілеу үшін қажет &lt;және мнемотехникасын қолдануға болады: &gt;

13 of 16

<!DOCTYPE html>

<html>

<head>

<title> Simvoldar </title>

</head>

<body>

Сегодня серия iPhone 14 официально поступила в продажу. Из-за разницы во времени первыми новые смартфоны получили возможность приобрести жители Японии и Китая, но через несколько часов начнутся и продажи в центральной и западной частях России.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Как сообщает MacRumors, первые пользователи могут столкнуться с досадной проблемой. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Согласно служебной записке Apple, на данном этапе в iOS 16 существует известная ошибка, которая может вызвать проблемы с активацией устройств по сети Wi-Fi.&#9749;

</body>

</html>

14 of 16

https://www.w3schools.com/

http://htmlbook.ru/html/%21doctype

15 of 16

Сілтемелер

Беттер арасында жылжу үшін Интернеттегі негізгі элемент - гиперсілтемелер ойлап табылды.

Гиперсілтемелер Интернеттегі басқа ресурсқа сілтеме жасап қана қоймай, сонымен қатар ағымдағы құжат ішінде шарлауға мүмкіндік береді. Сіз де бұл сабаққа гиперсілтеме арқылы келдіңіз.

Сілтеме жасау үшін шертуден кейін көшу орын алатын беттің мекенжайын көрсететін href қажетті атрибутпен <a> жұптық тег пайдаланылады.

<!DOCTYPE html>

<html>

<head>

<title> </title>

</head>

<body>

<a href="https://www.youtube.com/"> жаңа жазбамның орны </a>

</body>

</html

16 of 16

<body style="background-color:powderblue;">

<h1 style="background-color:powderblue;">Алғашқы жазба</h1>

<p style="background-color:tomato;">Бұл абзац.</p>

<h1 style="color:blue;"> Алғашқы жазба </h1>

<p style="color:red;"> Бұл абзац.</p>

<h1 style="font-family:verdana;"> Алғашқы жазба </h1>�<p style="font-family:courier;"> Бұл абзац.</p>

<h1 style="font-size:300%;"> Алғашқы жазба </h1>�<p style="font-size:160%;"> Бұл абзац.</p>

<h1 style="text-align:center;"> Алғашқы жазба </h1>�<p style="text-align:center;"> Абзац.</p>