Въведение в 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 : Създаване на уеб страница с текстов редактор

 

Следвайте указанията по-долу:

1. Създайте HTML файл:

 Отворете текстов редактор, например Notepad. Запишете следния код в текстовия редактор:

 

2. Запазете файла с разширение .html.
3. Отворете HTML файла в браузър:

Щракнете два пъти върху файла, за да го отворите в браузъра по подразбиране. Ще видите визуализация на вашата уеб страница.

 

Задача 2 : Добавяне на изображение и хиперлинк в уебстраница

Добавете следният код във вашия HTML документ, като го поставите някъде меду двата тага  <body> и </body> и замените червените текстове с вашите картинки и вашите линкове, след което запазете документа и отново го отворете в браузър.

 

Задача 3 : Добавяне на стилове и цветове

Добавете показания код във вашия HTML документ, като го поставите между двата тага <head> и </head> и замените цветовете с други по ваш избор. След това запазете документа и го визуализирайте в браузър.

 

Задача 1 : Създаване на уеб страница - 40 т.

 

Следвайте указанията по-долу:

1. Създайте HTML файл:

Отворете текстов редактор, например Notepad. Запишете следния код в текстовия редактор:

 

2. Запазете файла с разширение .html.
3. Отворете HTML файла в браузър:

Щракнете два пъти върху файла, за да го отворите в браузъра по подразбиране. Ще видите визуализация на вашата уеб страница.

 

Задача 2 : Добавяне на изображение и хиперлинк в уебстраница - 40 т.

  1. Намерете подходяща картинка в интернет, която да отговаря на темата на вашата уебстраница.
  2. Намерете сайт в интернет, който да има връзка с темата на вашата страница.
  3. Добавете следният код във вашия HTML документ, като го поставите някъде меду двата тага  <body> и </body> и замените червените текстове с вашите картинки и вашите линкове, след което запазете документа и отново го отворете в браузър.

 

За картинката:

 <img src="тук сложете линка към вашата картинка" alt="алтернативен текст">

 

За връзката:

<a href="" > тук напишете как искате да се вижда връзката </a>

 

Примерен вид на кода вижте по-долу:

Задача 2 : Добавяне на JavaScript в HTML документ - промяна на цветове

В тази задача трябва да създадете JavaScript, който ще пита потребителя за 3 цвята - цвят на заглавието, цвят на фона, цвят за текста на параграфа.

 

За решаването на задачата ще използвате готов Html документ и ще добавите в него скрипта за решението на задачата, като използвате отварящ и затварящ таг <script></script>.

 

Примерен вид на скрипта за 1 цвят:

<script>
color=prompt("What color?");
const setStyle = (el, rule, val) => (el.style[rule] = val);
setStyle(document.querySelector('h1'), 'color', color);
</script>

 

Примерен вид на решената задача: