1 of 56

Уеб Дизайн

1 част

2 of 56

1. Въведение -history

HTML, което означава HyperText Markup Language , е език за създаване на web страници. Страниците създадени с HTML могат да съдържат графика, текст, музика, анимация, както и връзки към други страници(хиперлинкове). От какво се нуждаете за да създадете такава страница?

Трябват ви две неща - елементарен текстов редактор и интернет браузър.Файлът, който ще създадете с Notepad е текстов файл, който обаче трябва да запишете с разширение .html (или .htm).

3 of 56

2. Структура на HTML документ

4 of 56

5 of 56

Цветове

6 of 56

3. Задаване на цветове

a)цвят на фона

​

​

или чрез стил

<body style="background-color:grey;">

7 of 56

б) на шрифта

​

​

чрез стил

<p style="color:#EEF905"> this is a paragraph </p>

8 of 56

Заглавия <H1>, <H2>.......

Нов ред <br>

Абзац <p></p>

Подравняване <left><center><right>

(или чрез стилове)

​

9 of 56

4. Списъци

а) Подредени списъци - <OL TYPE=”A”>

​

10 of 56

b) Списък със водещ символ(disk,square,circle)

​

11 of 56

c) Описателен списък

​

12 of 56

13 of 56

5. Изображения

​

​

​

​

В задачата със списъка добавете снимката на Джон Атанасов

Подравнете в дясно с

<img src="image.jpg" width="300" heigth="250" style ="float:right">

14 of 56

apple; banana; kiwi; orange

15 of 56

16 of 56

6. Таблици

17 of 56

  1. <table> - създава таблица
  2. <tr> - нов ред
  3. <td>стойност в кл1</td>
  4. <td>стойност в кл3</td>
  5. <td>стойност в кл4</td>

</tr>- затваряме реда преди да започнем нов

​

18 of 56

​

​

<table border="1" style="width:200px ">

Създайте следната таблица

19 of 56

Задача 2

20 of 56

21 of 56

22 of 56

Задача

шаблон за таблица

  1. Въведете примерна таблица
  2. копирайте и съхранете под името tabl.html
  3. копирайте css кода и съхранете под името tabl.css
  4. и двата файла да са в една папка
  5. в tabl.html, в частта head въведете следния ред
  6. <link rel="stylesheet" type="text/css" href=".../tables/tabl.css" media="screen" />

​

23 of 56

24 of 56

Упражнение - css file <link rel="stylesheet" href=".../…/poli.css" />

​

25 of 56

Структура

ЗАДАЧИ

  1. СЪЗДАЙТЕ NAVIGATION BAR. ПОСТАВЕТЕ ЛИНКОВЕ ПО ВАШ ИЗБОР.

ФОРМАТИРАЙТЕ С CSS ФАЙЛА.

​

26 of 56

2. PAGE CONTENT

27 of 56

УКАЗАНИЯ

​

28 of 56

CSS FILE

​

body{

margin: 0px;

padding: 0px;

background-color: #CCCCCC;

}

section{

margin-left: 20px;

}

h1{

font-size: 28px;

}

section article header p{

font-style: italic;

}

section article header h1{

font-size: 28px;

}

p{

font-size: 24px;

}

​

29 of 56

3. SIMPLE WEBSITE

ИЗПОЛЗВАЙТЕ ПРЕДХОДНИТЕ ФАЙЛОВЕ И СЪЗДАЙТЕ СЛЕДНИЯТ САЙТ:

​

30 of 56

4. Задача

31 of 56

Указания

Структура

  1. Заглавие с включена снимка(снимката е в css файла). Ако желаете да я редактирате - отваряте karl.css)
  2. Останалата част от документа е разделена на няколко секции.

Всяка секция включва снимка(потърсете в интернет и кратък текст)

-Национален музей „Васил Левски”

-Исторически музей Карлово

- Мазакова къща

-Даскал -Ботевата къща

32 of 56

4. Други блокове

а) <div> -

​

33 of 56

34 of 56

б) <span>

35 of 56

36 of 56

Звук <audio>

37 of 56

Задача

Създайте сайт:

Моите любими песни

5 песни

38 of 56

Вграждане на видео

39 of 56

Създаване на формуляри

  1. Код

а) елемент <form>....</form> - начало и край на формата.

Желателно е да се поставя в самостоятелен контейнер.

б) елементи на формата

​

40 of 56

  • <input>

41 of 56

Задача

  1. Създайте formupr.html
  2. Създайте следващите елементи

<form>

<input type="text" id="uname" name="uname">

​

​

​

​

</form>

​

​

​

42 of 56

  • Текстово поле и атрибути

Дефинира текстово поле на една линия. Задаваме id на полето и име.

<input type="text" id="fname" name="fname">

Други атрибути:

  • ст-ст по подразбиране: value="John"
  • само за четене - readonly

<input type="text" id="fname" name="fname" value="John" readonly>

  • размер на полето - size=”30”- определя изгледа на полето

<input type="text" id="fname" name="fname" size="50">

  • максимален размер на полето - maxlength - максимален брой символи

<input type="text" id="pin" name="pin" maxlength="4" size="4">

  • минимален размер на полето - minlength=”8”

​

43 of 56

<input type="text" id="text" name="username" placeholder="username">

44 of 56

Задължителен атрибут - required

45 of 56

  • ​

46 of 56

​

Добавете бутон Submit

<input type="submit" value="Submit">

47 of 56

Други контроли

Упражнение:

Login form

Създайте файл login.php

който извежда въведената �във формата информ.

Съхранете всички файлове в папката �xampp/htdocs.

Стартирайте xampp/Apache/Admin

Въвеждаме данните и след потвърждаване�връща въведената информация.

​

48 of 56

login.php

<html>

<body>

Welcome <?php echo $_POST["usname"]; ?><br>

Your pass is: <?php echo $_POST["pass"]; ?>

</body>

</html>

​

49 of 56

Формуляри /упр/

Създайте формуляр “Лексикон”

Изтеглете шаблон и редактирайте(index.html,style.css)

​

50 of 56

Създайте и login.php, style1.css

<style><?php include 'style1.css'; ?></style>

вмъкване на css файл в php

51 of 56

Работа със шаблон

  1. Изтеглете шаблoна planini
  2. Потърсете снимки от нашите планини с по- висока резолюция и ги запишете в папка Images.
  3. Създайте подобен сайт на Българските планини (mypressonline.com)
  4. Качете сайта във free.bg

​

52 of 56

Галерия от снимки

53 of 56

54 of 56

Указания:

​

​

  1. ​

​

55 of 56

56 of 56

Сайт Яворов

Снимка

​