28. Въведение в HTML и CSS. Създаване на уеб страница

 

Теоретични материали

HTML (HyperText Markup Language)

HTML е езикът, с който се дефинира структурата и съдържанието на уеб страниците. Той се състои от тагове, които описват различните елементи на страницата, като текст, изображения, заглавия, списъци и др.

 

CSS (Cascading Style Sheets)

CSS е език за стилизиране, който се използва за контрол на визуалния дизайн на уеб страниците. С CSS можете да зададете шрифтове, цветове, размери, разположение и други аспекти на елементите на страницата.

 

Създаване на уеб страница с текстов редактор:

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

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

<!DOCTYPE html>
<html lang="bg">
<head>
  <meta charset="UTF-8">
  <title>Моята първа уеб страница</title>
</head>
<body>
  <h1>Това е заглавието на моята страница</h1>
  <p>Това е параграф с текст.</p>
</body>
</html>

 

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

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

 

Добавяне на стил с CSS:

4. Създайте CSS файл: Запишете следния код в текстов редактор:


h1 {
  color: red;
  font-size: 24px;
}

p {
  font-family: Arial, sans-serif;
  text-align: center;
}

 

5. Запазете файла с разширение .css.
6. Свържете CSS файла с HTML файла: В HTML файла, добавете следния ред в елемента <head>:

<link rel="stylesheet" href="style.css">

 

"style.css" е името на вашия CSS файл.


7. Опреснете страницата в браузъра:

Ще видите, че заглавието е оцветено в червено и е с по-голям размер, а параграфът е с шрифт Arial и е централно подравнен.

 

Работа по проект

Уеб страница с HTML и CSS

Ще си създадете лична уебстраница, като следвате посочените по-горе стъпки, но вместо текстов редактор ще използвате онлайн платформа, която позволява да виждате промените, които правите в реално време.
Примерен вид на кода и финалния резултат:

Допълнителна задача (пожелание)

Импровизирайте с HTML и CSS

Можете да създадете ваш собствен дизайн и стил на уебстраница, ако видоизмените дадения код по ваше желание.

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

 

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

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

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>

 

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