1. Основен език за описание на уеб страници - HTML
Услугата World Wide Web представлява мрежа от свързани онлайн документи, създадени с HTML (англ. HyperText Markup Language - език за маркиране на хипертекст).
Услугата World Wide Web представлява мрежа от свързани онлайн документи, създадени с HTML (англ. HyperText Markup Language - език за маркиране на хипертекст).
2. История.
|
3. Приложения за създаване на HTML страници
а) текстов редактор - Notepad, Notepad++, Visual Studio Code
б) специализирани приложения - BlueGriffon, Dreamweaver и др.
а) текстов редактор - Notepad, Notepad++, Visual Studio Code
б) специализирани приложения - BlueGriffon, Dreamweaver и др.
4. Безплатен редактор за кодиране - Notepad++
а) инсталиране на Notepad++ (изтеглете инсталационният файл от сайта)
Официален сайт! What is Notepad++ notepad-plus-plus.org/
б) създаване на HTML файла
- текстовият файлове се записва с разширение .html или .htm
- текстовият файлове се записва с разширение .html или .htm
Описанието на HTML документ се състои от специални елементи, наречени тагове.
в) HTML таг - етикет, заграден в ъглови скоби (< >).
Таговете указват на браузъра как да интерпретира информацията, описана в HTML документа, като определят началото и края на описанието на HTML елементите, както и тяхното съдържание, вид и атрибути.
Всеки таг има конкретно предназначение. Таблица с всички възможни тагове и тяхното предназначение можете да видите на адрес www.w3schools.com/tags/ или като отворите файла "Web\HTML\HTML Tags.pdf" от приложените файлове на изд. Домино.
в) HTML таг - етикет, заграден в ъглови скоби (< >).
Таговете указват на браузъра как да интерпретира информацията, описана в HTML документа, като определят началото и края на описанието на HTML елементите, както и тяхното съдържание, вид и атрибути.
Всеки таг има конкретно предназначение. Таблица с всички възможни тагове и тяхното предназначение можете да видите на адрес www.w3schools.com/tags/ или като отворите файла "Web\HTML\HTML Tags.pdf" от приложените файлове на изд. Домино.
г) Атрибути
Към много от таговете могат да се добавят атрибути (променливи), които съдържат допълнителна информация за тага.
Към много от таговете могат да се добавят атрибути (променливи), които съдържат допълнителна информация за тага.
Например в тага за изображение <img>
<img src="img_girl.jpg" width="500" height="600">
има атрибути c имена src, width, height, които имат следните стойности:
<img src="img_girl.jpg" width="500" height="600">
има атрибути c имена src, width, height, които имат следните стойности:
- src=”img_girl.jpg" - като src означава source (източник). В самия атрибут се въвежда URL-а на картинката, която искате да покажете.
- width="500"
- height=”600"
- Атрибутите width и height се използват за да се определят широчината и височината на картинката.
5. Структура на HTML документ
а) особености
а) особености
- HTML документите са съставени от две основни части: глава (head) и тяло (body).
- HTML документът трябва да започва с декларацията <!DOCTYPE html>. Това не е HTML таг, а инструкция за уеб браузъра - прилежащите му атрибути определят версията на HTML езика и какъв тип е документът. Ако документът е написан на актуалната версия на езика (HTML5), не се задават аргументи.
б) Основни тагове, които оформят HTML документ:
Освен заглавието на страницата, между таговете head се поставят и специалните метатагове, описващи съдържанието на страницата или указващи някакво поведение на браузъра, търсещите машини, кеширащите системи и други.
- <html>
- <head>
- <title>
Освен заглавието на страницата, между таговете head се поставят и специалните метатагове, описващи съдържанието на страницата или указващи някакво поведение на браузъра, търсещите машини, кеширащите системи и други.
- <body>
д) Пример за най-обща структура на уеб сайт:
Въведение в HTML
https://tutorials.bg/kursove/html-css-uroci |
Тема 2. Тагове за текст
1. Форматиране на текст в HTML
a) заглавие - таговете от <h1> до <h6> определят заглавия в HTML
- <h1> е заглавие от най-високо ниво, с най-голям размер на символите
- <h2> до <h6> определят подзаглавията в низходящ ред
Елементи на страницата:
- Заглавие с размер h1 – Иван Вазов
- Подзаглавие с размер h3 – Биографични бележки
От линка - Български автори - Биографични бележки на авторите включени в матурата | Матури 2018 (zamatura.eu) изтеглете:
- Изображение на Иван Вазов
- Основен текст:
След 1870 г. публикува поезия в периодиката. През 1876 г. излиза първата му стихосбирка "Пряпорец и гусла", следват "Тъгите на България" (1877), "Избавление" (1878), "Гусла" (1881), "Италия" (1884), "Поля и гори" (1884), "Сливница" (1885) и други. В прозата започва с мемоарите "Неотдавна" (1881) и продължава с "Повести и разкази в три тома" (1891-1893), романите "Под игото" (1894) и "Нова земя" (1896).
Автор на първия български роман и на текстове, дали българската мярка за жанр и класичност във всички литературни жанрове - сред тях повестите ("Немили-недраги", "Чичовци"), комедиите ("Службогонци", "Вестникар ли?"), пътеписи ("Великата Рилска пустиня"), поемите ("Грамада")... Пише литературна критика, мемоари, стихове за деца; участва дейно в литературния живот, носейки цялата авторитетност на институцията писател. Част от огромното му творчество не достига качествата на изброените творби, което, както и динамиката на литературните процеси у нас, предизвикват групата на "младите" - около сп. Мисъл - да води литературна битка с народния поет."
- Добавете в края на страницата хипервръзка към използваната информация в Интернет.
б) параграф - за обособяване на блок от текст като отделен параграф се използва HTML тагът <р>.
Пример:
<p>Това е параграф </p>
Пример:
<p>Това е параграф </p>
в) Тагове за форматиране на текст:
|
Примери:
<p><strong> Това е параграф</strong> </p> <p><b>Карлово</b></p> <p><strong>Карлово </strong></p> <p> <i> Карлово</i></p> <p><em>Карлово </em> </p> <p><del>Карлово</del></p> <p>10<sup>a</sup></p> <p>10<sub>a</sub></p> |
- <br> таг за празен ред - Този таг няма затварящ таг
- <blockquote> - използва се за вмъкване на цитати. Браузърите вмъкват разстояние колкото един ред преди и след елемента, както и отстъп отляво и отдясно
- <рге> - показва текста така, както е написан в текстовия редактор - с всички паузи между букви и думи и оставени празни редове (пример: www.w3schools.com/html/tryit.asp?filename=tryhtml_pre)
- <center>
- <p align = "justify"> (<p align = "left"> или <p align = "right">)
- <hr> - Тагът <hr> дефинира тематично прекъсване в HTML страница (напр. смяна на тема). Елементът <hr> най-често се показва като хоризонтална линия, която се използва за разделяне на съдържание (или дефиниране на промяна) в HTML страница.
Изображения при уеб страниците
1. Изображения при уеб страниците
Изображенията могат да подобрят дизайна и външният вид на уеб страницата. В HTML страницата може да се вмъкнат различни формати (gif, jpeg, png) на файлове, представляващи изображения.
Изображенията могат да подобрят дизайна и външният вид на уеб страницата. В HTML страницата може да се вмъкнат различни формати (gif, jpeg, png) на файлове, представляващи изображения.
а) HTML изображения – тага <img>
<img src="Ivan-Vazov.jpg" width="500" height="600"> |
има атрибути c имена src, width, height, които имат следните стойности:
- src=”Ivan-Vazov.jpg" - като src означава source (източник). В самия атрибут се въвежда URL-а на картинката, която искате да покажете.
- width="500"
- height=”600"
- alt="липсва" - aлтернативен текст
<img src=”Ivan-Vazov.jpg" alt="липсва" /> - задава какъв текст да се появи, ако не се вижда изображението. - align="left" - подравняване на снимката спрямо текста
<img src=”Ivan-Vazov.jpg" align="left" /> - подравнява изображението вляво спрямо текста. - top, bottom, middle, left, right - Подравнява изображението по горната линия на текста, долната или в средата. Вляво или вдясно на страницата.
Домашна работа!
Към създадените страници, добавете подходящите снимки (изтеглете ги от сайта: Български автори - Биографични бележки на авторите включени в матурата)
|
Създаване на хипервръзка в уеб страниците
1. Създаване на хипервръзка в HTML
В един HTML документ може да се добавят линкове към други документи или ресурси, които може да се намират на същия сървър или на външен за сайта сървър.
a) таг <а> - за създаване на хипервръзка
Използва се най-често с атрибута href, който задава адреса на документа (файл или интернет адрес), към който трябва да се свърже.
В един HTML документ може да се добавят линкове към други документи или ресурси, които може да се намират на същия сървър или на външен за сайта сървър.
a) таг <а> - за създаване на хипервръзка
Използва се най-често с атрибута href, който задава адреса на документа (файл или интернет адрес), към който трябва да се свърже.
Пример:
<a href="https://mon.bg/"> Връзка към МОН</a> В прозореца на браузъра ще се вижда текста "Връзка към МОН", при кликване върху който ще се отвори началната страница на сайта mon.bg. По подразбиране връзките се показват в браузъра сини на цвят и подчертани, а посетените връзки - виолетови. Цветът им може да бъде променен чрез ползване на езика CSS. |
б) хипервръзка към страници от същия сайт
<a href = "vasov.html"> Предстоящи събития </a>
- на href се задава относителен път
в) хипервръзка към друг уеб сайт или конкретна страница в него.
В този случай на атрибута href се задава пълния абсолютен адрес (URL):
<a href="https://it-study.weebly.com/1048107910751088107210781076107210851077-10901077108910901074107210851077-1080-10871091107310831080108210911074107210851077-10851072-109110771073-1.html"> Изграждане, тестване и публикуване на уеб сайт </a>
<a href = "vasov.html"> Предстоящи събития </a>
- на href се задава относителен път
в) хипервръзка към друг уеб сайт или конкретна страница в него.
В този случай на атрибута href се задава пълния абсолютен адрес (URL):
<a href="https://it-study.weebly.com/1048107910751088107210781076107210851077-10901077108910901074107210851077-1080-10871091107310831080108210911074107210851077-10851072-109110771073-1.html"> Изграждане, тестване и публикуване на уеб сайт </a>
г) хипервръзка към различни части на страницата
Това е подходящо за дълги документи, за да не скролират посетителите в търсене на нужната информация.
Използва се атрибутът id
Това е подходящо за дълги документи, за да не скролират посетителите в търсене на нужната информация.
Използва се атрибутът id
<h3 id="glava3"> Глава III</h3>
<a href="#glava3">Към 3. глава</а> <a href="tom1.html"> Глава III на 1. том</а> |
|
<a href="#end">Към края на страницата</a>
Съдържание <a id = "end"></a> |
|
Атрибутът torget определя къде да се отвори свързаният документ, към който сочи хиперлинкът.
Приема някоя от стойностите: име, _blank, _self, _parent, _top. Най-често се използват:
|
<a href ="https://mon.bg/" target="_blank"> Връзка към МОН</a>
Домашна работа!
- Създайте хипервръзка към края на страницата.
- Добавете раздел: Творчество.
- Създайте хипервръзка към сайта "За матурите" - Български автори - Биографични бележки на авторите включени в матурата | Матури 2018 (zamatura.eu)
- Създайте хипервръзка към началото на страницата.
- Всички хипервръзки да се отварят в нов прозорец.
Линкове с цветови комбинации:
- цветове в WEB страница - HTML поддържа 140 стандартни имена на цветове .
1. Цвят на фона на страницата.
<body bgcolor="#F0F8FF">
<body BACKGROUND="background.jpg"> - фон е използвано изображение с име: background.jpg
<body bgcolor="#F0F8FF">
<body BACKGROUND="background.jpg"> - фон е използвано изображение с име: background.jpg
2. Цвят на фона на заглавие или параграф. (можете да зададете фонов цвят за HTML елементи)
3. Цвят на текста.
Можете да зададете цвета на текста:
Можете да зададете цвета на текста:
<p align = "justify" style="color: #FF6347;"> След 1870 г. публикува поезия в периодиката. През 1876 г. излиза първата му стихосбирка "Пряпорец и гусла", следват "Тъгите на България" (1877), "Избавление" (1878), "Гусла" (1881), "Италия" (1884), "Поля и гори" (1884), "Сливница" (1885) и други. В прозата започва с мемоарите "Неотдавна" (1881) и продължава с "Повести и разкази в три тома" (1891-1893), романите "Под игото" (1894) и "Нова земя" (1896).</p>
4. Цвят на текста и фона на заглавие.
Пример:
<center><font color= "#FFFFFF"> <h1 style="background-color:#1E90FF;"><b>Иван Вазов </b></h1></font></center>
Пример:
<center><font color= "#FFFFFF"> <h1 style="background-color:#1E90FF;"><b>Иван Вазов </b></h1></font></center>
Домашна работа!
Задача.1. Допълнителни изисквания към страницата с име Vasov.html
Задача.1. Допълнителни изисквания към страницата с име Vasov.html
- Фон на страницата: #f7f8e0
- Цвят на буквите в заглавието "Иван Вазов" - (White); цвят на фона на заглавието - #1E90FF
- Цвят на буквите в подзаглавието "Биографични бележки" - #4d4949
- Цвят на фона на разделите "1. Живот" и "2. Творчество" - #1E90FF
- Вторият параграф от основният текст е с цвят - #FF6347
Задача.2. По ваша преценка форматирайте страниците:
- Vapcarov.html
- Yovkov.html
- Bagriana.html
Тема 12. Тагове за таблица, списъци, аудио и видео
1. Тагове за таблица:
<table> - създава таблица
<tr> - създава ред в таблица <td> - създава клетка в ред от таблица <caption> - заглавие на таблица <th> - заглавие на колона в таблица |
Клетките в таблицата имат атрибути:
colspan - определя броя на колоните, които клетката трябва да обхване rowspan - определя броя на редовете, които клетката трябва да обхване |
<table border="10">
<tr> <th>Koлoнa l</th> <th>Koлoнa 2</th> <th>Koлoнa 3</th> </tr> <tr> <td>pед 1, колона 1</td> <td>pед 1, колона 2</td> <td>pед 1, колона 3</td> </tr> <tr> <td>pед 2, колона 1</td> <td>pед 2, колона 2</td> <td>peд 2, колона 3</td> </tr > </table> |
Вместо следващите атрибути в HTML5 се използва CSS:
<table align="center" border="2" width="500" height="400" cellspacing="4" cellpadding="4">
<table align="center" border="2" style="width:100%"> |
Приложете и за останалите страници!
Списъци в HTML
1. Тагове за списъци
Списъците могат да бъдат:
Списъците могат да бъдат:
a) с номерация (подредени)- започват с тага <ol>, а всеки елемент на списъка - с тага <li>
към примера >> |
б) със символи (неподредени)
|
Атрибут type:
type = "1" type = "A" type = “a” type =”I” type = ”i” |
<ol type="I">
<li>Кафе</li> <li>Чай</li> <li>Мляко</li> </ol> |
<ol type="a">
<li>Кафе</li> <li>Чай</li> <li>Мляко</li> </ol> |
<h2>Неподредени списъци</h2>
<ul style="list-style-type:disc;"> <li>Кафе</li> <li>Чай</li> <li>Мляко</li> </ul> <ul style="list-style-type:disc;">
Атрибут type: disc, square, circle, none |
Съхранете под името spisak_produkti.html
Задача 2. Като използвате таговете за списъци, създайте:
- подреден списък с римски цифри
- неподреден списък с плътни точки
HTML аудио и видео
1. Таг за аудио
За да възпроизведете аудио файл в HTML, използвайте <audio> елемента:
Пример:
<!DOCTYPE html> <html> <body> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Вашият браузър не поддържа аудио елемента </audio> </body> </html> |
Основните атрибути, използвани с тага audio:
|
Има три поддържани аудио формата: MP3, WAV и OGG.
M4A към MP3 конвертор - cloudconvert.com/m4a-to-mp3
CloudConvert конвертира вашите аудио файлове онлайн. Сред много други поддържаме MP3, M4A, WAV и WMA. Можете да използвате опциите, за да контролирате качеството на звука и размера на файла.
CloudConvert конвертира вашите аудио файлове онлайн. Сред много други поддържаме MP3, M4A, WAV и WMA. Можете да използвате опциите, за да контролирате качеството на звука и размера на файла.
Аз съм българче - стихотворение от Иван Вазов, българска класика за деца
|
2. Таг за видео
За да покажете видеоклип в HTML, използвайте елемента: <video>
a) HTML видео формати
Има три поддържани видеоформата: MP4, WebM и Ogg |
Основните атрибути, използвани с тага video:
|
Пример 1:
<video controls> < source src="movie.mp4" type="video/mp4"> </video> Пример 2:
<!DOCTYPE html> <html> <body> <video poster="movie.jpg" controls height="640" width="480"> <source src="movie.mp4" type="video/mp4"/> <source src"movie.webm" type="video/webm"/> <source src="movie.ogv" type="video/ogg"/> Вашият браузър не поддържа маркера за видео </video> </body> </html> Пример 3:
<video poster="movie.jpg" controls style="width:100%"> |
|
Използвайте Clip Converter - безплатно приложение за конвертиране на медия, което ви дава възможност безплатно да конвертирате всяка песен, видео или адрес(URL) в познати формати.
Създаване на начална страница
Задача 1. Създайте началната страница на сайта.
Ресурси за страницата Home_page-resursi.zip!
Тема 13. Създаване на форми
1. Предназначение на формите (формуляри).
Потребителските форми дават възможност на потребителите да въвеждат данни в определени полета от уеб страницата. Формите са най-използваното средство за създаване на формуляри за връзка за потребителите, анкетни проучвания и полета за търсене на информация.
Потребителските форми дават възможност на потребителите да въвеждат данни в определени полета от уеб страницата. Формите са най-използваното средство за създаване на формуляри за връзка за потребителите, анкетни проучвания и полета за търсене на информация.
2. Таг за формуляр <form>
б) въвеждане на елементи на формуляра
Повечето елементи на формите се въвеждат чрез тага <input>, който може да съдържа няколко атрибута, най-важният от които е type. Атрибутът type указва вида на елемента в конкретния случай.
в) поле за текст
- <input type="text"> Показва поле за въвеждане на текст
Пример:
<html>
<head>
<meta charset=UTF-8 />
<title> Формуляр в HTML </title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Собствено име</label><br>
<input type="text" size ="40" id="fname" name="fname" value="Въведи името си"><br>
<label for="lname">Фамилия</label><br>
<input type="text" id="lname" name="lname" value="Въведи фамилията си"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<html>
<head>
<meta charset=UTF-8 />
<title> Формуляр в HTML </title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Собствено име</label><br>
<input type="text" size ="40" id="fname" name="fname" value="Въведи името си"><br>
<label for="lname">Фамилия</label><br>
<input type="text" id="lname" name="lname" value="Въведи фамилията си"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
- <input type="submit"> Показва бутон за подаване (за подаване на формуляра)
- <input type="button"> Показва бутон с възможност за кликване
- атрибута name, който приема като стойност името за полето.
- атрибутът size задава дължината на текстовото поле в брой символи (например size="40"). Ако не се използва този атрибут, дължината на текстовото поле по подразбиране ще бъде 20 символа.
- чрез атрибута value може да се зададе текст, който да се вижда в текстовото поле, преди още клиентът да е въвел някаква информация.
- чрез атрибута maxlenght може да въведете ограничение на броя на изписваните в текстовото поле символи. Например ако зададете maxlenght="10", в текстовото поле няма да бъде възможно да се въведат повече от 10 символа (букви, цифри и други).
в) поле за Радио бутон
- <input type="radio"> Радио бутон се използва за избор на един от многото възможности за избор
г) поле за отметка
- <input type="checkbox"> Показва квадратче за отметка (за избор на нула или повече от много избори)
д) създаване на падащ списък
Елементът определя падащ списък: <select>
Тагът <select> загражда нужния брой елементи <option>, които съставят списъка. Техните атрибути value задават стойностите, които ще бъдат върнати, а текстът, затворен между таговете <option> и </option>, ще се визуализира в падащото меню
Елементът определя падащ списък: <select>
Тагът <select> загражда нужния брой елементи <option>, които съставят списъка. Техните атрибути value задават стойностите, които ще бъдат върнати, а текстът, затворен между таговете <option> и </option>, ще се визуализира в падащото меню
Пример:
<label for="cars"> Избери кола:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<label for="cars"> Избери кола:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
- Използвайте атрибута, за да укажете броя на видимите стойности: size
- Използвайте атрибута, за да позволите на потребителя да избере повече от една стойност: multiple
e) текстова област
Ако желаете да предоставите възможност за по-подробно мнение или коментар, трябва да използвате многоредово поле за въвеждане на текст. Многоредовите полета се въвеждат чрез тага <textarea>.
Атрибутите на тага са:
Ако желаете да предоставите възможност за по-подробно мнение или коментар, трябва да използвате многоредово поле за въвеждане на текст. Многоредовите полета се въвеждат чрез тага <textarea>.
Атрибутите на тага са:
- атрибутът name, определящ названието, под което ще се съхранява и обработва тази част от формата.
- атрибутът rows, на който се присвоява като стойност някаква цифра, указваща височина на полето в брой редове.
- атрибутът cols, на който се присвоява като стойност някаква цифра, указваща ширината на полето в брой символи (цифри, букви и др.).
Пример:
<!DOCTYPE html>
<html>
<body>
<h2>Коментар</h2>
<form>
<label for="text1">Baшият коментар:</label>
<textarea name="Comentar" id="textl" cols="40" rows="12">Моят коментар е </textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Коментар</h2>
<form>
<label for="text1">Baшият коментар:</label>
<textarea name="Comentar" id="textl" cols="40" rows="12">Моят коментар е </textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
ж) поле за въвеждане на парола
<input type="password"> определя поле за парола
<input type="password"> определя поле за парола
Пример:
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
з) поле за качване на файл
<input type="file">
<input type="file">
Пример:
<form>
<label for="myfile">Избери файл:</label>
<input type="file" id="myfile" name="myfile">
</form>
<form>
<label for="myfile">Избери файл:</label>
<input type="file" id="myfile" name="myfile">
</form>
и) бутон за изпращане (изтриване) на данни (коментирахме в примерите)
<input type="submit" value="Submit">
<input type="submit" value="Submit">
Аналогично е изработването на бутон "Reset", чрез който формата се изчиства и се изтриват попълнените вече данни. За целта трябва да зададете на атрибута type от тага input стойността reset.
Други атрибути на <form>:
- method - определя метода за изпращане на формата action - задава URL адрес, на който да се изпрати, по подразбиране е адресът на формата пате - определя името на формата Други атрибути на <input>:
- type=image - определя външно изображение като бутон за изпращане
- type=hidden - определя скрито поле
- value - задава начална стойност на полето
- name - определя името на полето при изпращане на данните
Домашна работа!
Създайте файл с име form.html, който да представлява регистрационна форма със следните данни:
Създайте файл с име form.html, който да представлява регистрационна форма със следните данни:
- Име (текстово поле),
- Години (падащо меню),
- Пол (радиобутон),
- Потребител (текстово поле),
- Парола (поле за парола),
- Имейл (текстово поле),
- Бутон за изпращане (Submit).
Практическо изпитване I
Задача!