Въведение в HTML. Основни елементи и структура. Създаване на уебстраница
Въведение в 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 : Създаване на уеб страница с текстов редактор
Трябва да създадете уебстраница, която да представя структурата на вашия идеен проект на уебсайт:
За да създайте HTML файл отворете текстов редактор, например Notepad, или използвайте онлайн възуализация, като кликнете на долния бутон: Запишете следния код в текстовия редактор:
<!DOCTYPE html>
<html>
<head>
<title>Тук запишете заглавието на вашия сайт</title>
</head>
<body>
<h1 >Тук запишете заглавието на началната ви страница</h1>
<p>Тук сложете текста на началната ви страница</p>
<h2 >Тук запишете заглавието на втората ви страница</h1>
<p>Тук сложете текста на втората ви страница</p>
<h2 >Тук запишете заглавието на третата ви страница</h1>
<p>Тук сложете текста на третата ви страница</p>
</body>
</html>
Ако сте ползвали Notepad запазете файла с разширение .html и после щракнете два пъти върху него, за да го отворите в браузъра по подразбиране. Ще видите визуализация на вашата уеб страница.
Задача 2 : Добавяне на изображения към уебстраница
Трябва да добавите 3 изображения към вашата уебстраница - по 1 за всяка секция. За целта:
- Потърсете подходящи картинки в интернет и копитайте адреса им:
- Добавете следният код във вашия HTML документ, като го поставите някъде меду двата тага <body> и </body>
- На посочените места сложете реалните адреси за вашите картинки. В Notepad: запазете документа и отново го отворете в браузър.
<img src="Тук сложете адреса на картинката, която сте избрали - без да махате кавичките">
Задача 3 : Добавяне на връзки между секциите
Трябва да добавите 2 линка към вашата начална страница, които да водят към секциите за 2 и 3 страница. За целта:
-
към тагът <h1> добавете вътре в скобите id="стр1"
-
към двата тага <h2> добавете вътре в скобите съответно id="стр2" и id="стр3".
-
под текста на началната страница сложете:
<p> <a href="#стр2">Тук сложете текста за връзка към страница 2</a></p>
<p> <a href="#стр3">Тук сложете текста за връзка към страница 3</a></p>
- под текстовете на втората и третата страница добавете:
<p> <a href="#стр1">Тук сложете текста на линка, който ще ви връща на началната страница</a></p>
Задача 4 : Добавяне на стилове и цветове
Трябва да сложите някакъв различен цвят към всяка от секциите във вашата страница. За да добавите цветове във вашия HTML документ, трябва да поставите в <h> или <р> таговете на секциите дадения код и замените цветовете с други по ваш избор. След това запазете документа и го визуализирайте в браузър. Цветовете се пишат с английските им наименования (Red, Green, Blue и т.н.)
style="background-color:тук пишете цвета, който сте си избрали;"
