ОСМИ РАЗРЕД

Поштовани ученици и родитељи,

Због новонастале ситуације настава на даљину из предмета Информатика и рачунарство одржаваће се у наредном периоду преко садржаја који ће бити постављан на овом сајту.

Ученици осмог разреда радиће до краја школске године на пројекту започетом на часовима - изради странице по изабраној теми у ХТМЛ-у. Сваке недеље у новој лекцији биће објављен материјал са новим ХТМЛ таговима које треба да додате у ваш рад и пошаљете предметном наставнику.

Ваше странице можете креирати у "Notepad-u" (или неком другом текст едитору) или на https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_basic

Сајтови који су коришћени и на коме можете пронаћи најобухватнија објашњења и туторијале су:

за тагове (ознаке) https://www.w3schools.com/html/ и
за теорију на https://sr.wikipedia.org/wiki/.

Сва питања и недоумице као и домаће задатке можете слати на имејл адресе наставника који предаје вашој групи.

Домаћи задаци ће бити вредновани и утицаће на коначну оцену.

При слању мејла у НАСЛОВ мејла упишите ваше презиме име и одељење..

Миленко Пузигаћа - osnikolajvelimirovicinfo@gmail.com

Гмизић Немања - gmizicnemanja@gmail.com

Садржај:

1. Сервиси и презентације на интернету

Интернет

Светска комуникациона мрежа (WWW)

Веб-странице

Униформни локатор ресурса (УРЛ адреса)

2. ХТМЛ (Hyper Text Markup Language, језик за означавање хипертекста)

ХТМЛ

Историја

Дефиниција типа документа

3. ХТМЛ ОЗНАКЕ (ТАГОВИ, ЕТИКЕТЕ, НАЛЕПНИЦЕ...)

ХТМЛ ОЗНАКА - <html> </html>

ЗАГЛАВЉЕ (head) - <head> </head>

ТЕЛО (body) - <body> </body>

НАСЛОВ ДОКУМЕНТА (title) - <title> </title>

НАСЛОВИ (Headings) <h1> </h1> до <h6></h6> .

НОВ РЕД <br>

ПАСУС (ОДЛОМАК) - <p> </p>

БОЈЕ

ПОЗАДИНА СТРАНИЦЕ (БОЈА ИЛИ СЛИКА)

ФОНТОВИ <font>

ФОРМАТИРАЊЕ ТЕКСТА

СМАЈЛИЈИ (Emojis) и СИМБОЛИ (Symbols)

СЛИКЕ (Images)

ЛИНКОВИ (Links - Hyperlinks)

ЛИСТЕ (Lists)

ВИДЕО СНИМЦИ (YouTube Videos)

Ученици осмог разреда радиће до краја школске године на пројекту започетом на часовима - изради странице по изабраној теми у ХТМЛ-у. Сваке недеље у новој лекцији биће објављен материјал са новим ХТМЛ таговима (ознакама) које треба да додате у ваш рад и пошаљете предметном наставнику.

Ваш задатак је да креирате ХТМЛ страницу на тему по избору. Пошто је до сада обрађено доста тагова(ознака) имате период од две недеље да на вашим рачунарима урадите задатак а после ће сваке недеље бити додаван нов садржај на страницу. Страница треба да садржи све тагове које смо до сада урадили. Ускоро ће бити постављени материјали и детаљно објашњење. Као прилог мејлу потребно је послати и фотографије које су коришћене (сачуване у истом фолдеру).

Документ треба сачувати под именом "Презиме Име - Назив изабране теме".

При слању мејла у НАСЛОВ мејла упишите ваше презиме име и одељење..

Рок за предају радова је 29.3.2020. на мејл предметног наставника,

Миленко Пузигаћа - osnikolajvelimirovicinfo@gmail.com

Гмизић Немања - gmizicnemanja@gmail.com

1. Сервиси и презентације на интернету

Интернет

Интернет је светски систем умрежених рачунарских мрежа који је трансформисао начин на који функционишу комуникациони системи. Почеци интернета се вежу за стварање ARPANET-а, 1969. године, мреже рачунара под контролом Министарства одбране САД. Данас, интернет повезује милијарде рачунара широм света. То је "мрежа свих мрежа" која се састоји од милиона кућних, академских, пословних и владиних мрежа које међусобно размјењују информације и услуге као што су електронска пошта, ч е т и пренос датотека те повезане странице и документе World Wide Weba.

Светска комуникациона мрежа (WWW)

Светска комуникациона мрежа (енгл. World Wide Web, W3, WWW), позната и само као веб (енгл. the Web), систем је међусобно повезаних, хипертекстуалних докумената који се налазе на интернету. Уз помоћ веб-прегледача, корисници могу да гледају веб-странице које обично садрже текст, слике, аудио и видео записе. Каткад се назива једноставно мрежа.

Веб-странице

Веб-странице су првенствено текстуелни документи форматирани и обележени језиком за означавање хипертекста (HTML). Осим форматираног текста, веб-странице могу да садрже сликовне, видео, аудио и софтверске компоненте које се приказују у корисничком веб-прегледачу као кохерентне странице мултимедијског контента.

Уграђене хипервезе омогућавају корисницима навигацију између веб-страница. Вишеструке веб-странице са заједничком темом, заједничким интернет доменом, или обоје, сачињавају веб-сајт. Садржај веб-сајта може у највећој мери пружити објављивач, или може бити формиран интерактивно при чему корисници донирају садржај, или садржај зависи од корисника и њихових радњи. Веб-сајтови могу да буду углавном информативни, превасходно намењени забави или да служе углавном за комерцијалне, владине или невладине организационе сврхе

Униформни локатор ресурса (УРЛ адреса)

Униформни локатор ресурса (УРЛ; енгл. Uniform Resource Locator, URL), колоквијално познат и као веб-адреса, односи се на http или https URL шему, тј. на сложен исказ низова карактера који се користи за лоцирање неког ресурса на интернету. Веб-адреса се често наводи као синоним за URI или URL. URL поред тога што указује на локацију, обезбеђује и примарне механизме приступа ресурсу.

2. ХТМЛ (Hyper Text Markup Language, језик за означавање хипертекста)

ХТМЛ

ХТМЛ (енгл. Hyper Text Markup Language, језик за означавање хипертекста) је описни језик специјално намењен опису веб страница. Помоћу њега се једноставно могу одвојити елементи као што су наслови, параграфи, цитати и слично. Поред тога, у HTML стандард су уграђени елементи који детаљније описују сам документ као што су кратак опис документа, кључне речи, подаци о аутору и слично. Ови подаци су општепознати као мета подаци и јасно су одвојени од садржаја документа. Стандард одржава Конзорцијум за Веб (W3C, World Wide Web Consortium).

Историја

HTML је настао упрошћавањем SGML (Standard Generalized Markup Language, стандардизовани уопштени језик за означавање) стандарда са сврхом описа документа који се објављују на вебу.

У почетку је био прилично ограничен што се означавања садржаја тиче и пружао је углавном елементарне ствари за означавање и форматирање текста (параграфи, наслови, цитати итд.). Како је веб растао тако је расла и потреба за богатијим садржајем те је у том смеру развијан и HTML стандард. Тада су стандарду додате елементи за опис табела, слика, слојева, напредно форматирање текста итд.

Дефиниција типа документа

Сви HTML документи би требало да почињу са дефиницијом типа документа DTD, Document Type Definition који прегледачу дефинише по ком стандарду је документ писан.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Овај код говори прегледачу да је документ писан по строгом HTML 4.01 стандарду. Овај конкретан стандард искључује коришћење презентационих елемената да би се што боље одвојила презентација од садржаја.

Синтакса

Основ HTML-а представљају етикете (енгл. tags - етикете, налепнице или ознаке) и атрибути.

Етикете могу бити просте, облика (<Х>), када служе за маркирање и сложене, када се користе као ограђивачи (<X> и </X>) за делове текста између њих. Свака етикета представља посебну команду, којом се одређени део документа одваја од остатка примењујући правила дефинисана самом етикетом.

Атрибути се налазе унутар сложених ознака и садрже додатне информације о начину приказивања и понашању означеног дела документа. Атрибути се смештају између знакова навода. Интернет прегледач игнорише непознате атрибуте и елементе и не прави разлику између великих и малих слова (енгл. case insensitive). Он текст аутоматски прелама према ширини блока или прозора, правећи нове редове ако је потребно.

Структура документа

HTML документи се састоје из два основна дела: оног који описује документ и начин на који треба да буде представљен и дела који представља садржај документа. Информације које описују документ се смештају између ознака за заглавље документа <head>,</head>. У оквиру заглавља поставља се наслов документа између ознака <title>,</title>, док се сам садржај смешта између ознака <body>,</body>. Ова три елемента заједно са ознакам <html>,</html> чине минимилану структуру HTML документа.

Коментари

Коментари у оквиру HTML кода, који се не приказују помоћу интерент прегледача пишу се између ознака .

Пример:

<!-- Ово је коментар -->

ХТМЛ5

ХТМЛ5 је предлог нових стандарда који нам пружају нове могућности, као и да исправе и надоместе неке досадашње недостатке. Ради се о новој верзији ХТМЛ-а, која доноси низ новина и могућности које до сада нису биле доступне користити за израду веб сајтова без додатних додатака (енгл. plugin), као што су Флеш, Јава и Силверлајт. ХТМЛ5 представља еволуцију ХТМЛ 4.01 стандарда, а не замену.

3. ХТМЛ ОЗНАКЕ (ТАГОВИ, ЕТИКЕТЕ, НАЛЕПНИЦЕ...)

Ваше странице можете креирати у Notepad-u (или неком другом текст едитору) или на https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_basic.

Када дајете назив вашој страници креираној у Notepad-u, приликом чувања документа, потребно је на крају додати .html

Тагови су кључне речи у HTML документу и сваки таг почиње називом тага унутар знакова мање и веће, а завршава се са називом тага испред ког стоји “ / ” унутар знакова мање и веће.

<html>ПРИМЕР ОЗНАКЕ</html>

ХТМЛ ОЗНАКА - <html> </html>

Ознака <html> говори прегледачу да је ово ХТМЛ документ.

Унутар HTML морају да постоје два основна дела:

заглавље (head) и
тело (body).

ЗАГЛАВЉЕ (head) - <head> </head>

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

ТЕЛО (body) - <body> </body>

Ознака <body> дефинише телло документа.

Елемент <body> садржи сав садржај ХТМЛ документа, као што су текст, хипервезе, слике, табеле, листе итд.

НАСЛОВ ДОКУМЕНТА (title) - <title> </title>

Ознака <title> је обавезна у свим ХТМЛ документима и она дефинише наслов документа.

Елемент <title >:

дефинише наслов на траци са алаткама прегледача
пружа наслов странице када се дода у фаворите
приказује наслов странице у резултатима претраживача

Пример

<!DOCTYPE html>

<html>

<head>

<title>Наслов странице!</title>

</head>

<body>

</body>

</html>

НАСЛОВИ (Headings) <h1> </h1> до <h6></h6> .

Наслови су дефинисани ознакама <h1> до <h6>.

<h1> дефинише најважнији наслов. <h6> дефинише најмање важан наслов.

<h1>Наслов 1</h1>

<h2>Наслов 2</h2>

<h3>Наслов 3</h3>

<h4>Наслов 4</h4>

<h5>Наслов 5</h5>

<h6>Наслов 6</h6>

У ХТМЛ 4 се за наслове може користити атрибут поравнање (ALIGN) са вредностима лево, десно, централно и обострано (left, center, right и justify). Атрибут „поравнање“ није подржан у ХТМЛ јер се користи CSS за поравнавање елемената.

ПРИМЕР : <h1 align="center">ОВО ЈЕ НАСЛОВ1</h1>

НОВ РЕД <br>

Ознака <br> служи за прелазак у нов ред тј. убацује прелом једне линије.

Ознака <бр> је празна ознака (самозатварајући таг) што значи да нема крајњу ознаку (затварајући таг).

ПРИМЕР : <br>

ПАСУС (ОДЛОМАК) - <p> </p>

Ознака <p > дефинше пасус тј. одломак.

Прегледници аутоматски додају мало простора (маргине) пре и после сваког <p> елемента.

Пасуси могу користити атрибут поравнање (ALIGN) са вредностима лево, десно, централно и обострано (left, center, right и justify). За уређивање маргина се користи CSS.

ПРИМЕР : <p>Текст неког одломка ......</p>

БОЈЕ

ХТМЛ боје су одређене помоћу унапред дефинисаних имена боја или вредности РГБ, ХЕКС, ХСЛ, РГБА, ХСЛА ...

Сви модерни прегледачи подржавају 140 имена боја - https://www.w3schools.com/colors/colors_names.asp
РГБ вредности у боји подржане су у свим прегледачима. Вриедност РГБ боје је наведена са: РГБ - црвена, зелена, плава (RGB - red, greenblue). Сваки параметар (црвена, зелена и плава) дефинише интензитет бје као цели број између 0 и 255. - https://www.w3schools.com/colors/colors_rgb.asp БИРАЧ БОЈА ( colors picker) - https://www.w3schools.com/colors/colors_picker.asp
Боје сортиране према ХЕКС (хексадецималне) вредности - https://www.w3schools.com/colors/colors_hex.asp
ХСЛ означава нијансу, засићеност и светлину (hue, saturation, lightness) - https://www.w3schools.com/colors/colors_hsl.asp

ПРИМЕР : <h1 style="background-color:MediumSeaGreen ИЛИ rgb(255, 0, 0) ;">ТЕКСТ</h1>

ПОЗАДИНА СТРАНИЦЕ (БОЈА ИЛИ СЛИКА)

1. СЛИКА

Да бисте додали позадинску слику на ХТМЛ елемент, можете да употребите атрибут стила body style="background-image:

НАЧИН: <body style="background-image: УРЛ АДРЕСА СЛИК ">
НАЧИН: <body style="background-image: НАЗИВ СЛИКЕ КОЈА ЈЕ САЧУВАНА У ИСТИ ФОЛДЕР ГДЕ ЈЕ ХТМЛ ДОКУМЕНТ .ТИП ДОКУМЕНТА (.png, .jpg, .jpeg)"

2. БОЈА

Атрибут body style="background-color одређује боју позадине документа:

НАЧИН: <body style="background-color: НАЗИВ БОЈЕ">
НАЧИН: <body style="background-color: КОД БОЈЕ">

ФОНТОВИ <font>

Ознака <фонт> коришћена је у ХТМЛ 4 за одређивање избора фонта, величине и боје текста (И КОМБИНАЦИЈОМ).

1. Избор фонта

<p style="font-family:verdana">Текст исписан фонтом Вердана</p>

2. Величина слова

<p style="font-size:30px">Текст исписан величином 30 пиксела.</p>

3. Боја текста

<p style="color:blue">Текст исписан плавом бојом</p>

ФОРМАТИРАЊЕ ТЕКСТА

ХТМЛ такође дефинише посебне елементе за дефинисање текста са посебним значењем.

<b> - Bold text - БОЛДОВАНО
<strong> - Important text - ВАЖАНО
<i> - Italic text - ИСКОШЕНО
<em> - Emphasized text - НАГЛАШЕНО
<mark> - Marked text - МАРКИРАНО
<small> - Small text - МАЛО
<del> - Deleted text - ПРЕЦРТАНО
<ins> - Inserted text - ПОДВУЧЕНО
<sub> - Subscript text - ЕКСПОНЕНТ
<sup> - Superscript text - ИНДЕКС

ПРИМЕРИ:

<b>Болдован текст</b>

<strong>Важан текст</strong>

<i>Искошен текст</i>

<em>Наглашен текст</em>

<h2>ХТМЛ<small>Мало</small> форматирање</h2>

<h2>ХТМЛ<mark>Маркирано</mark> форматирање</h2>

<p>Моја омиљена боја је <del>зелена</del> плава.</p>

<p>Моја омиљена <ins>боја</ins>је плава.</p>

<p>Израчунај колико је Х <sub>5</sub></p>

<p>Ово је одељење VIII <sup>5</sup></p>

СМАЈЛИЈИ (Emojis) и СИМБОЛИ (Symbols)

Ако желите да се било који од ових смајлија прикаже у ХТМЛ-у, можете да користите децималну (дец) или хексадецималну (хексадецималну) референцу која се налази на ЛИНКУ.

ПРИМЕР: <p>СМАЈЛИ: 🎓</p>

Многи математички, технички и валутни симболи нису присутни на нормалној тастатури. Да бисте додали такве симболе на ХТМЛ страницу, можете да користите назив ХТМЛ симбола. Ако не постоји назив, можете користити број, децималну или хексадецималну референцу. На следећим линковима можете погледати списак симбола:

ПРИМЕР: <p>СИМБОЛ: ☼</p>

СЛИКЕ (Images)

Слике могу побољшати дизајн и изглед веб странице. Слику треба сачувати у фолдер у коме се налази ХТМЛ документ или навести тачну локацију слике. ХТМЛ омогућава и анимиране ГИФ-ове.

У ХТМЛ-у су слике дефинисане помоћу <img> ознаке. Ознака <img> је празна, садржи само атрибуте и нема завршну ознаку.

ПРИМЕР: <img src="адреса слике">

Атрибут src одређује назив слике у фолдеру (и тип/.jpg .png . jpeg....) или УРЛ (веб адреса) слике. Можете да приступите сликама са било које веб адресе у свету.

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

ПРИМЕР: <img src="називслике.типслике" alt="Опис слике">

Можете користити style атрибуте да одредите ширину и висину слике.

Атрибути ширине и висине width and height увек дефинишу ширину и висину слике у пикселима.

ПРИМЕР: <img src="називслике.типслике" alt="Опис слике" style="width:500px;height:600px;">

ЛИНКОВИ (Links - Hyperlinks)

Везе (линкови) се налазе на скоро свим веб страницама. Везе омогућавају корисницима да прелазе кликом на линк са странице на страницу. Можете кликнути на везу и прећи на други документ. Када мишем пређете преко везе, стрелица миша претвориће се у симбол мале руке.

1. Хиперлинкови

Хиперлинкови су дефинисани ХТМЛ <а> ознаком:

ПРИМЕР: <a href="http://www.osnvelimirovic.edu.rs/">Посети сајт наше школе</a>

Атрибут href одређује одредишну адресу (http://www.osnvelimirovic.edu.rs/) везе. Текст везе је видљиви део. Кликом на текст везе послаће вас на наведену адресу.

2. Локалне везе

Горњи пример користио је апсолутну УРЛ адресу (пуна веб адреса). Локална веза (веза на исту веб локацију) је одређена са релативним УРЛ-ом (без https://www....). У овом случају отвара се страница која је именована Слике.

ПРИМЕР: <a href="html_images.asp">Слике</a>

3. Циљни атрибут - одредиште

Циљни атрибут (target) одређује где треба отворити повезани документ. Циљни атрибут може имати једну од сљедећих вриједности:

_blank - Отвара повезани документ у новом прозору или картици

_self - отвара повезани документ у истом прозору / картици на који је кликнут (ово је подразумевано)

_parent - Отвара повезани документ у родитељском оквиру

_top - Отвара повезани документ у целом телу прозора назив оквира - Отвара повезани документ у именованом оквиру

Овај пример ће отворити повезани документ у новом прозору / картици прегледача:

ПРИМЕР<a http://www.osnvelimirovic.edu.rs/)" target="_blank">Посети сајт школе!</a>

4. Слика као веза

Уобичајено је да се слике користе као везе:

ПРИМЕР:

</a>

5. Резиме линкова

Употребите елемент <a> да бисте дефинисали везу

Користите атрибут href да одредите адресу везе

Користите target да одредите где отворити повезани документ

Употријебите <img> елемент (унутар <a >) да бисте користили слику као везу

ЛИСТЕ (Lists)

ХТМЛ листе омогућавају веб ауторима да групишу скуп повезаних ставки на списковима - набрајањима.

1. Неуређена ХТМЛ листа

Неуређена листа почиње са ознаком <ul> . Свака ставка на листи почиње са <li> ознаком.Ставке на листи ће се подразумевано означити малим црним круговима (или се може дефинисати неки други облик).

ПРИМЕР:

<ul>

<li>ЧОКОЛАДА</li>

<li>БОМБОНЕ</li>

<li>СЛАДОЛЕД</li>

</ul>

2. Уређена ХТМЛ листа

Наручена листа почиње с ознаком <ol> . Свака ставка на листи почиње са <li> ознаком. Ставке на листи ће се подразумевано означити бројевима (може се променити у римске бројеве или слова).

ПРИМЕР:

<ol>

<li>ПОНЕДЕЉАК</li>

<li>УТОРАК</li>

<li>СРЕДА</li>

</ol>

3. Листе описа ХТМЛ-а

ХТМЛ такође подржава спискове описа. Листа описа је листа термина са описом сваког појма. Ознака <dl> дефинише листу описа, <dt> ознака дефинише термин (име), а ознака <dd> описује сваки термин.

ПРИМЕР:

<dl>

<dt>ПОНЕДЕЉАК</dt>

<dd>-ПОНЕДЕЉАК ЈЕ ПРВИ ДАН У НЕДЕЉИ</dd>

<dt>УТОРАК</dt>

<dd>-УТОРАК ЈЕ ДРУГИ ДАН У НЕДЕЉИ</dd>

</dl>

ВИДЕО СНИМЦИ (YouTube Videos)

YouTube ће приказати ид када сачувате (или репродукујете) видео. Можете да користите овај ид и упутите се на свој видео запис у ХТМЛ коду.

Да бисте репродуковали свој видео на веб страници, урадите следеће (ПОГЛЕДАЈТЕ И СЛИКУ ИСПОД):

одаберите снимак на YouTube који желите да уградите на вашу страницу
кликните на дугме дели
изаберите опцију <угради>
уколико желиш да видео стартује од тачно одређеног времена изабери од које секунде треба да почне репродуковање
кликни на копирај линк
залепи линк на своју ХТМЛ страницу
можете изменити вредности висине прозора видеа, ширине прозора видеа, дебљину оквира видеа, аутоплеј, пун екран...

На сличан начин можете додати и гугл мапе.

ПРИМЕР:

Google Sites

Report abuse