Специализирани софтуерни средства за създаване на уебсайтове. Създаване на списъци и вътрешни страници в уебсайт с HTML
Теоретични материали
HTML (HyperText Markup Language)
HTML е езикът, с който се дефинира структурата и съдържанието на уеб страниците. Той се състои от тагове, които описват различните елементи на страницата, като текст, изображения, заглавия, списъци и др.
CSS (Cascading Style Sheets)
CSS е език за стилизиране, който се използва за контрол на визуалния дизайн на уеб страниците. С CSS можете да зададете шрифтове, цветове, размери, разположение и други аспекти на елементите на страницата.
Основни елементи на HTML и примери за тагове:
<!DOCTYPE html>: Декларация, която показва на браузъра, че документът е HTML.
<html>: Отварящ таг, който дефинира началото на HTML документа.
<head>: Съдържа информация за документа, като заглавие, мета данни и стилове.
<title>: Заглавие на страницата, което се показва в горната част на браузъра.
<body>: Съдържа видимото съдържание на страницата, текст, изображения, таблици, формуляри и др.
<h1> - <h6>: Заглавия с различна големина.
<p>: Параграф.
</html>: Затварящ таг, който дефинира края на HTML документа.
Задача 1 : Създаване уебсайт от отделни страници - 30 т.
Следвайте указанията стъпка по стъпка:
- Създайте в своята папка на учебния компютър нова папка с името site;
- Отворете 3 отделни празни документа в Notepad.
- Копирайте дадените 3 кода в html и ги поставете в отделните документи за index, about и hobby.
Копирайте следния код за index.html:
<!DOCTYPE html>
<html>
<head>
<title>Моят свят</title>
</head>
<body style="background-color: lightyellow; text-align: center;">
<h1>Добре дошли в моя свят!</h1>
<p>
<a href="index.html">Начало</a> |
<a href="about.html">За мен</a> |
<a href="hobby.html">Хоби</a>
</p>
<h2>Какво ще намерите тук?</h2>
<p>Този сайт е за моите интереси и хобита.</p>
<img src="home.jpg" width="250">
</body>
</html>
Копирайте следния код за about.html:
<!DOCTYPE html>
<html>
<head>
<title>За мен</title>
</head>
<body style="background-color: lightblue; text-align: center;">
<h1>За мен</h1>
<p>
<a href="index.html">Начало</a> |
<a href="about.html">За мен</a> |
<a href="hobby.html">Хоби</a>
</p>
<p>Казвам се Иван и съм ученик.</p>
<p>Обичам технологии и спорт.</p>
<img src="about.jpg" width="200">
</body>
</html>
Копирайте следния код за hobby.html:
<!DOCTYPE html>
<html>
<head>
<title>Хоби</title>
</head>
<body style="background-color: lightgreen; text-align: center;">
<h1>Моето хоби</h1>
<p>
<a href="index.html">Начало</a> |
<a href="about.html">За мен</a> |
<a href="hobby.html">Хоби</a>
</p>
<p>Обичам да играя футбол.</p>
<ul>
<li>Тренирам 2 пъти седмично</li>
<li>Играя с приятели</li>
<li>Гледам мачове</li>
</ul>
<img src="hobby.jpg" width="250">
</body>
</html>
4. Запазате 3-те отделни документа в папката site с имена index.html, about.html и hobby.html;
5. Изпробвайте ги в браузър.
Задача 2 : Добавяне на изображения на отделните страници - 30 т.
Следвайте указанията стъпка по стъпка:
- Намерете 3 изображения в интернет, които да използвате за отделните страници.
- Запазете ги в папката с името site;
- Променете имената им съответно на home, about и hobby.
- Ако е необходимо променете разширенията на файловете в index.html, about.html и hobby.html;
- Запазете файловете с File - Save и ги изпробвайте в браузър.
Задача 3 : Промяна на текста в една страница - 10 т.
Следвайте указанията стъпка по стъпка:
- Променете текста в една от 3-те страници по ваш избор, като добавите вашето име, или вашите хобита или друга информация по ваш избор;
- Запазете страницата с File - Save и я изпробвайте в браузър.
Задача 4 : Промяна на фона в една страница - 10 т.
Следвайте указанията стъпка по стъпка:
- Променете цветния фон в една от 3-те страници по ваш избор, като промените background-color, с друг цвят по ваш избор;
- Запазете страницата с File - Save и я изпробвайте в браузър;
- Цветовете се пишат с английските им наименования (Red, Green, Blue и т.н.)
Оценяване:
Максимален брой точки: 80
Оценка = 2 + точки * 0,05
