Primer lesson: јазик за означување на хипертекст

Лекција: Јазик за означување на хипертекст (HTML)

HTML е кратенка за Hypertext Markup Language (Јазик за означување на хипертекст) . Тоа е посебен јазик што се користи за креирање веб-страници. Кога посетувате веб-страница, компјутерот чита HTML за да ви ги прикаже зборовите, сликите и линковите. Замислете го HTML како градежни блокови на веб-страница. Исто како што користите парчиња Лего за да изградите куќа или автомобил, ние користиме HTML ознаки за да изградиме веб-страница.

Што е HTML?

HTML е кодот што му кажува на компјутерот како да прикаже текст, слики, видеа и врски на веб-страница. Тоа е како да му давате инструкции на пријател кој црта слика за вас. HTML користи зборови во аголни загради, кои се нарекуваат ознаки , за да го означат почетокот и крајот на дел од веб-страницата.

Зошто е важен HTML?

Секоја веб-страница што ја посетувате користи HTML на некаков начин. Без HTML, немаше да има веб-страници што можете да ги видите. HTML помага во организирањето на содржината и му кажува на компјутерот како да ја прикаже страницата. Тоа е првото нешто што се учи во веб-развојот бидејќи го прави интернетот да функционира!

Основна структура на HTML документ

HTML документот има посебна структура. Започнува со декларација наречена <code><!DOCTYPE html></code> што му кажува на компјутерот дека страницата користи HTML. Потоа, документот е поделен на два главни дела: глава и тело.

Еден многу едноставен HTML документ изгледа вака:

<код><!DOCTYPE html>
<html>
<глава>
<title>Мојата прва веб-страница</title>
</head>
<тело>
<p>Здраво, свету!</p>
</body>
</html> </code>

Во овој пример, делот <head> го дава насловот на страницата, а делот <body> е местото каде што ја ставате содржината што се појавува на екранот.

HTML ознаки и елементи

HTML користи ознаки за означување на различни делови од веб-страницата. Ознаката е збор во аглести загради. На пример, <code><p></code> му кажува на компјутерот дека она што следи е пасус. Кога ќе го завршите пасусот, ја користите ознаката за затворање, <code></p></code>, за да го означите крајот.

Еден елемент во HTML се состои од почетна ознака, одредена содржина и завршна ознака. На пример:

<code><p>Ова е пасус.</p></code>

Секоја ознака му дава инструкции на веб-прелистувачот како да ја прикаже содржината.

Вообичаени HTML ознаки

Постојат многу ознаки во HTML. Некои од најчестите се:

<html> - Оваа ознака му кажува на компјутерот дека ова е HTML документ.
<head> - Овој дел складира информации за страницата што не се прикажуваат директно на екранот.
<title> - Оваа ознака го поставува насловот на веб-страницата и се појавува на табулаторот на прелистувачот.
<body> - Оваа ознака ја содржи видливата содржина на веб-страницата.
<p> - Оваа ознака креира пасус, кој е блок од текст.
<h1> до <h6> - Овие ознаки креираат наслови. <h1> е најголемиот наслов, додека <h6> е најмалиот.
<a> - Оваа ознака се користи за креирање врски до други веб-страници.
<img> - Оваа ознака се користи за додавање слики на страница.

HTML атрибути

Атрибутите даваат дополнителни информации за HTML елементот. Тие се додаваат на почетната ознака во аголните загради на ознаката. Најчестите атрибути се src и alt што се користат со ознаката за слика.

На пример, за да додадете слика, можете да напишете:

Тука, src му кажува на прелистувачот каде се наоѓа датотеката со слика, а alt дава опис на сликата ако не може да се прикаже.

Делови од главата и телото

HTML документот е поделен на два дела:

Заглавие: Ова содржи информации како што се насловот на страницата и врски до стилски листови. Тоа е како контролен центар што содржи инструкции за страницата.
Дел од телото: Овој дел е видлив на веб-страницата. Целиот текст, слики и врски што ги гледате на страницата се напишани во телото.

Креирање линкови во HTML

Линковите ви овозможуваат да скокате од една страница на друга. Во HTML, креираме линкови користејќи ја ознаката <a> . Атрибутот href во ознаката му кажува на прелистувачот каде е одредиштето на линкот.

На пример:

<code><a href="https://www.example.com">Посетете ја страницата Example.com</a></code>

Кога ќе кликнете на оваа врска, вашиот прелистувач ќе ја отвори веб-страницата example.com .

Додавање слики на веб-страница

Сликите ја разубавуваат веб-страницата и ја прават поинтересна. За да додадете слика, ја користите ознаката <img> . Запомнете, ознаката <img> нема ознака за затворање.

Еве како додавате слика:

Овој код му кажува на прелистувачот да прикаже слика од сончоглед. Атрибутот src покажува на локацијата на сликата, а атрибутот alt дава опис на сликата.

Користење на листи во HTML

Листите ги организираат информациите во уреден формат. Постојат два главни типа на листи во HTML:

Подредена листа: Оваа листа е нумерирана. Ја користи ознаката <ol> .
Неподреден список: Оваа листа користи точки. Ја користи ознаката <ul> .

Еве еден пример за неподреден список:

<код><ul>
<li>Епл</li>
<li>Банана</li>
<li>Цреша</li>
</ul> </code>

И еве еден пример за подредена листа:

<код><ol>
<li>Прво</li>
<li>Второ</li>
<li>Трето</li>
</ol> </code>

Табели во HTML

Табелите помагаат во прикажувањето на информациите во редови и колони. Тие се корисни кога треба да споредите податоци или ставки на листата во мрежа.

Еве еден едноставен пример за HTML табела:

<code><table border="1">
<tr>
<th>Име</th>
<th>Возраст</th>
</tr>
<tr>
<td>Алис</td>
<td>10</td>
</tr>
</table> </code>

Во оваа табела, <tr> дефинира ред во табелата, <th> се користи за заглавието на табелата (задебелен текст), а <td> се користи за податоците од табелата (ќелиите).

Работа со мултимедија: аудио и видео

HTML исто така ви овозможува да додавате мултимедијални содржини како звук и видео. Со ознаката <audio> , можете да вклучите звучни датотеки. Со ознаката <video> , можете да вградите видео плеери на вашата веб-страница.

Еве еден пример за код за вградување на видео:

Овој код креира видео плеер со копчиња за репродукција, паузирање или менување на јачината на звукот. Атрибутот controls му кажува на прелистувачот да ги прикаже овие копчиња.

HTML во секојдневниот живот

Секоја веб-страница на интернет е изградена со HTML. Замислете дека ја посетувате веб-страницата на вашето училиште, веб-страница за забавни игри или читате онлајн приказна. HTML работи зад сцената за да го организира текстот, сликите и другата содржина за да можете јасно да ги видите.

На пример, кога ќе видите слика од вашиот омилен цртан лик на интернет или ќе кликнете на линк за да прочитате повеќе за некоја забавна тема, HTML е тука за да го овозможи тоа.

Едноставен пример за HTML проект

Да разгледаме еден едноставен проект. Замислете дека сакате да направите мала веб-страница за вашето омилено животно, како мачка. Можете да вклучите наслов, пасус за мачките, слика, па дури и линк до веб-страница со забавни факти за мачките.

Вашиот HTML код може да изгледа вака:

<код><!DOCTYPE html>
<html>
<глава>
<title>Моето омилено животно</title>
</head>
<тело>
<h1>Сè за мачките</h1>
<p>Мачките се разиграни и меки. Обожаваат да спијат и да предат. Многу луѓе сакаат да имаат мачки како домашни миленици.</p>
<img src="cat.jpg" alt="Слатка мачка">
<a href="https://www.catfacts.com">Дознајте повеќе за мачките</a>
</body>
</html> </code>

Овој проект користи наслови, пасуси, слики и врски. Покажува како HTML се користи за изградба на комплетна веб-страница со многу делови.

HTML, CSS и JavaScript

Иако HTML ја гради структурата на веб-страницата, постојат и други алатки што ги прават веб-страниците да изгледаат и да се однесуваат на забавен начин.

CSS (Каскадни стилски листови) се користи за додавање бои, промена на фонтови и прилагодување на распоредот на веб-страницата. Ја прави страницата да изгледа убаво.
JavaScript е програмски јазик кој додава интерактивност на страницата. Може да ги движи работите или да реагира кога ќе кликнете на копче.

Иако денес учиме за HTML, познавањето на CSS и JavaScript ни помага да разбереме како се прават веб-страниците.

Повеќе HTML ознаки и нивната употреба

Додека истражувате HTML, ќе најдете многу други ознаки. Еве уште неколку што треба да ги знаете:

<div> - Оваа ознака се користи за делење на страницата на различни делови. Помага содржината да се одржи организирана.
<span> - Оваа ознака групира мали делови од текст или други елементи. Слична е на <div>, но работи со помали елементи.
<br> - Оваа ознака додава прекин на ред. Тоа е како притискање на копчето Enter во уредник за обработка на текст.
<strong> - Оваа ознака го прави текстот задебелен за да покаже дека е важен.
<em> - Оваа ознака го прави текстот закосен за да се додаде акцент.

Овие ознаки ви даваат поголема контрола врз тоа како вашата содржина се појавува на веб-страницата.

Еволуција на HTML

HTML многу се промени откако беше првпат создаден. Со текот на времето се додадени многу нови ознаки и функции. Секоја нова верзија на HTML го олеснува креирањето сложени и убави веб-страници. Денес, HTML работи заедно со CSS и JavaScript за да изгради модерни веб-страници кои се забавни за користење и изгледаат одлично.

Оваа еволуција значи дека HTML е лесен за учење и доволно моќен за креирање сè, од едноставни веб-страници до сложени веб-апликации.

Безбедност на интернет

Иако учењето HTML е забавно, секогаш е важно да бидете безбедни на интернет. Кога посетувате веб-страници или истражувате онлајн содржина, не заборавајте секогаш да побарате помош од возрасен ако не сте сигурни за нешто. Вашата безбедност е на прво место, а учењето HTML секогаш треба да биде забавно и безбедно искуство.

Преглед: Клучни HTML термини

Да разгледаме некои важни термини што ги научивте денес:

HTML: Јазик за означување на хипертекст, јазикот што се користи за креирање веб-страници.
Ознака: Збор во аглести загради што му кажува на компјутерот кој дел од страницата да го прикаже. На пример, <code><p></code> прави пасус.
Елемент: Комплетен сет што вклучува почетна ознака, содржина и завршна ознака.
Атрибут: Дополнителни информации додадени во ознака, како што се <code>src</code> или <code>alt</code> во ознака за слика.
Врска: Креирана со ознаката <code><a></code> за поврзување на една страница со друга.

Апликации од реалниот свет

HTML се користи во многу реални услови. Еве неколку примери:

Училишни веб-страници: Училиштата користат HTML за да споделуваат распореди, домашни задачи и новости со учениците и родителите.
Онлајн приказни и игри: Веб-страниците со забавни приказни или игри користат HTML за прикажување слики, текст и видеа.
Деловни веб-страници: Многу локални продавници и компании имаат веб-страници изградени со HTML за да ги прикажат своите производи и услуги.
Интерактивно учење: Образовните страници што ви помагаат да научите нови работи се направени со HTML, заедно со други алатки како CSS и JavaScript.

Овие примери покажуваат како HTML е многу корисна алатка во многу делови од секојдневниот живот.

Резиме на клучните точки

Денес научивме дека HTML е кратенка од Hypertext Markup Language . Тоа е основниот јазик што се користи за креирање веб-страници. Еве ги клучните точки што треба да ги запомните:

HTML ја гради структурата на веб-страницата користејќи ознаки.
Основната структура вклучува декларација за тип на документ и ознаките html , head и body .
Ознаките се достапни во парови: почетна ознака и завршна ознака, со содржина помеѓу нив.
Атрибутите како src и alt даваат дополнителни информации за елементите.
Вообичаените ознаки вклучуваат <p> за пасуси, <a> за врски, <img> за слики и ознаки за наслови како <h1> до <h6> .
Листите и табелите помагаат да се организираат информациите на веб-страница.
Современите веб-страници користат HTML заедно со CSS за стил и JavaScript за интерактивност.

HTML е основата на секоја веб-страница што ја гледате на интернет. Со едноставни градежни блокови како ознаки и атрибути, можете да креирате забавни и интерактивни страници. Како што продолжувате да учите, ќе видите како HTML помага да се оживеат веб-страниците, правејќи го интернетот корисно и возбудливо место за истражување.

јазик за означување на хипертекст