Уеб сайт. Видове.
Основни етапи в разработката на уеб сайт
Теоретични материали - основни елементи
Етапи при разработката на уебсайт
Въведение в 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 документа.
Интерактивни упражнения - 20 т.
Задача 1 : Създаване на уеб страница - 40 т.
Следвайте указанията по-долу:
1. Създайте HTML файл:
Отворете текстов редактор, например Notepad. Запишете следния код в текстовия редактор:
2. Запазете файла с разширение .html.
3. Отворете HTML файла в браузър:
Щракнете два пъти върху файла, за да го отворите в браузъра по подразбиране. Ще видите визуализация на вашата уеб страница.
Задача 2 : Добавяне на изображение и хиперлинк в уебстраница - 40 т.
- Намерете подходяща картинка в интернет, която да отговаря на темата на вашата уебстраница.
- Намерете сайт в интернет, който да има връзка с темата на вашата страница.
- Добавете следният код във вашия HTML документ, като го поставите някъде меду двата тага <body> и </body> и замените червените текстове с вашите картинки и вашите линкове, след което запазете документа и отново го отворете в браузър.
За картинката:
<img src="тук сложете линка към вашата картинка" alt="алтернативен текст">
За връзката:
<a href="" > тук напишете как искате да се вижда връзката </a>
Примерен вид на кода вижте по-долу:
