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
