Тому, як я сам не є професійним веб дизайнером, а токмо любителем намагаються розібратися в тонкощах веб дизайну, відповідно і допомогу по HTML і CSS писав для таких же, як і я любителів.
З чого почати. послідовність
підготовка
Коли все готово відкрийте блокнот і скопіюйте в нього:
Тепер натисніть у верхньому лівому кутку Фото> ЗБЕРЕГТИ ЯК> впишіть index.html і тисніть на кнопку зберегти. Це буде сторінка на якій Ви можете пробувати все те, що дізнаєтеся на цьому сайті. Потрібний Вам HTML код зберігайте в блокноті і використовуйте, як шпаргалку.
З чого починається HTML
Всі сторінки повинні починатися з DOCTYPE наприклад, такого
Чому так важливий DOCTYPE можна дізнатися тут
скелет сторінки
початок html коду
початок тіла сторінкивміст сторінки
кінець тіла сторінки
кінець html коду
Теги (таблична верстка)
Для більшості сторінок досить зовсім невеликої кількості тегів.
| відкриває тег комірки вміст комірки - table header (заголовок таблиці) текст всередині цих тегів буде виділений напівжирним шрифтом і відцентровано | закриває тег комірки
|---|
| відкриває тег комірки вміст комірки | закриває тег комірки
width - ширина таблиці вказується в "%" або в пікселях "800"
border - товщина рамки
cellspacing - відстань між осередками
cellpadding - відстань між рамкою комірки і текстом
align - вирівнювання по горизонталі (за замовчуванням зліва = "left" центр = "center" справа = "right")
valign - вирівнювання по вертикалі (верх = "top" середина = "middle" низ = "bottom")
colspan = x - кількість осередків по горизонталі
rowspan = x - кількість осередків по вертикалі
приклади таблиць
| навігація | Заголовок |
|---|---|
| меню | контент |
Графіка на веб сторінках
- відкриває тег списку
Для зміни зовнішнього вигляду маркера в тег
- і закінчується
можна включати параметр type зі значеннями disc, circle, square
Для створення заголовка певного розміру текст оточують тегами
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Для створення нового абзацу використовується тег
абзац
закриває тег обов'язковий.Елемент align використовується для вирівнювання тексту
По лівому краю
По центру
По правому краю
По ширині
Для перекладу тексту на новий рядок без створення абзацу використовується - тег
Любити тебе я не втомлюся,
Забути тебе я не зможу,
Писати тобі не перестану,
Поки відповідь не отримаю!
Для виділення тексту використовуються теги - - закриває тег обов'язковий.
жирний текст
курсив
підкреслений
Виділення тексту кольором за допомогою style і тега текст
Світло зелений
жовтий
Світло синій
червоний
зелений
коричневий
- тег горизонтальної лінії
Виділити цитату в тексті можна використовуючи тег
"Цитата"
- відкриває тег
Кожен рядок списку починається з тега
Тег
- може мати наступні параметри:
type - вид лічильника:
A - великі латинські літери
a - маленькі латинські літери
I - великі римські цифри
i - маленькі римські цифри
1 - звичайні цифри
start - встановлює число, з якого буде починатися відлік.