Тази книга ще ви научи как да прилагате на практика HTML 5 и CSS 3 и да се възползвате от богатите възможности, предлагани в новите уеб стандарти.
Първата част на книгата е посветена на HTML 5. Освен синтаксиса и правилата за структуриране на кода, в нея ще намерите и таговете, отнасящи се до различните видове текст – абзаци, заглавия, цитати, адреси, коментари и други. Ще научите как да вмъквате мултимедия в HTML страниците (анимирани изображения, аудио и видео съдържание, както и клипове от интернет и флаш приложения). Отделено е внимание на табличния дизайн и работата с таблици, формите за въвеждане на данни, създаването на менюта, навигационна лента, котви и така наречените „горещи“ клавиши, а също и връзки към e-mail или FTP ресурси. Ще научите как се съединяват в едно цяло отделните страници посредством обикновени връзки, както и връзки на база карта на изображението.
Втората част на книгата е посветена на CSS 3 свойствата за оформяне на отделните параметри на шрифта, фона, абзаца, параметрите на отстъпите, рамките, таблиците и други. Разгледани са комбинаторите, селекторите и псевдокласовете. Обърнато е специално внимание на контейнерния дизайн – основен конкурент на табличното оформление на страниците.
Последните глави са с практически характер. В тях са разгледани различни CSS разширения и полезни трикове в областта на уеб дизайна – създаване на динамично падащо меню, собствени курсори, използването на собствен шрифт, многоколонно оформление, използване на специални рамки, създаване на ефектни бутони и други. Дават се и препоръки как да направите вашия HTML и CSS код по-четим и удобен за последващо редактиране.
Във всяка глава от книгата ще намерите множество практически примери с отделните CSS свойства и HTML тагове.
Съдържание
Въведение…7
Част 1. Езикът HTML 5
Глава 1. Основи на HTML…10
1.1. Какво ще научите от тази глава?…10
1.2. Сървъри, клиенти и адреси на възлите в интернет…10
1.3. Браузъри…17
1.4.1. Избор на текстов редактор…20
1.4.2. Синтаксис на HTML…24
1.5. Особености на HTML 5…38
1.6. Собствен уебсървър…47
1.7. Първи поглед към HTML6…50
1.8. Преди да пристъпим към изучаване на HTML…52
Глава 2. Структуриране на текст…54
2.1. Абзаци (таг <P>)…54
2.2. Заглавия (тагове <H1>-<H6>)…58
2.3. Номерирани и неномерирани списъци…61
2.4. Тагове за показване на форматиран текст…63
2.5. Цитати…65
2.6. Адрес…66
2.7. Коментари в HTML кода…66
Глава 3. Оформяне на текст…68
3.1. Промяна на начертанието на шрифта…68
3.2. Тагове за отделяне на фрагменти от текста…70
3.3. Промяна на гарнитурата на шрифта…71
3.4. Вмъкване на специални символи…73
Глава 4. Вмъкване на мултимедия в HTML страниците…77
4.1. Какво ще слагаме на HTML страницата?…77
4.2. Вмъкване на изображения…79
4.3. Вмъкване на аудио и видеоклипове…85
4.4. Вмъкване на клипове от Youtube и Flash обекти. Таг <OBJECT>…96
4.5. Таг <EMBED>…98
Глава 5. Връзки…99
5.1. Текстови хипервръзки…99
5.2. Връзки към е-mail и FTP ресурси…103
5.3. Графични връзки и карта на изображението…105
5.4. Лента за навигация…110
5.5. Котви…110
5.6. „Горещи“ клавиши…112
5.7. За връзките и SEO оптимизацията…113
Глава 6. Създаване на таблици. Табличен дизайн…115
6.1. За какво се използват таблиците в HTML?…115
6.2. Създаване на прости таблици…116
6.3. Създаване на сложни таблици…128
6.4. Секции на таблицата…131
6.5. Таблично оформяне на HTML страници…132
6.6. Създаване на ефектна таблица…136
Глава 7. Форми за въвеждане на данни. Методи GET и POST…139
7.1. Форма. Таг <form>…139
7.2. Получаване на данни от форма…145
7.3. Елементи за въвеждане на данни…146
7.3.1. Текстови полета за въвеждане на данни…148
7.3.2. Зависими и независими превключватели…150
7.3.3 Таг <TEXTAREA>…153
7.3.4. Списъци…154
7.3.5. Бутони…156
7.4. Защита от спам…157
Част 2. Каскадни стилови набори (CSS)
Глава 8. Въведение в CSS…161
8.1. Запознаване с CSS…161
8.3. Формат на стила. Селектори…164
8.4. Малко практика…166
8.4.1. Неявно свързване на стила…166
8.4.2. Явно свързване на стил…168
8.4.3. Комбинирани стилове…170
8.4.4. Инлайн стилове…172
8.5. Приоритет и отношения на стиловете…173
8.6. Селектори на атрибути…176
Селектори за целия атрибут:…176
За началото на атрибута:…177
За съдържание:…177
За край на атрибута:…177
8.7. Коментари в CSS…177
8.8. Правилата на добрия тон…178
8.9. По образ и подобие…179
8.10. Редактори за редактиране на CSS…179
8.11. Инструменти за разработчици…181
Глава 9. Параметри на шрифта и фона…184
9.1. Задаване на шрифт…184
9.2. Вертикално подравняване на текст…191
9.3. Управление на преноса на нов ред…192
9.4. Свойства, влияещи върху фона…193
9.5. Сянка на текст…197
9.6. Малко практика…198
9.7. Какво да не правите…203
9.7.1. Грешка 1: прекалено дребен шрифт…203
9.7.2. Грешка 2: неконтрастен шрифт…204
9.7.3. Грешка 3: неправилна височина на реда …205
Глава 10. Параметри на абзаците…207
10.1. Подравняване и задаване на отстъп в началото на реда…207
10.2. Параметри на списъците…208
10.3. Показване и скриване на елементи от таблицата…211
10.4. Управление на курсора…213
Глава 11. Контейнери…216
11.1. Блокови контейнери…216
11.2. Концепция за дизайн…217
11.3. Дизайн за нашия сайт…222
11.3.1. Макет на страницата и необходимите css свойства…222
11.3.2. Разполагане на две колони…226
11.3.3. Разполагане в три колони …235
11.4. Още няколко думи за табличния и контейнерния дизайн…238
Глава 12. Отстъпи и рамки…240
12.1. Отстъпи…240
12.2. Параметри на рамките…243
12.3. Параметри на контура…250
Глава 13. Параметри на таблиците…252
13.1. Подравняване на текста в клетките…252
13.2. Отстъпи и рамки…253
13.3. Други свойства за таблици…256
13.4. Пет примера за ефектно оформление на таблици с помощта на CSS…259
13.4.1. Разделяне на редове…259
13.4.2. Таблица със закръглени ъгли…261
13.4.3. Цветна таблица…264
13.4.4. Таблица с разделени клетки и фон със закръглени ъгли…265
13.4.5. Таблица календар…266
Глава 14. Комбинатори, селектори и псевдокласове…269
14.1. Какво е специален селектор?…269
14.2. Комбинатори…269
14.3. Селектор по атрибут на тaг…272
14.4. Псевдоелементи…274
14.5. Псевдокласове…275
Глава 15. CSS разширения и как са повлияли на CSS стандарта…279
15.1. Какво е CSS разширение?…279
15.2. Специални рамки…280
15.2.1. Многоцветни рамки…280
15.2.2. Рамка със закръгления…281
15.3. Многоколонно оформление…284
15.4. CSS трансформации…290
Глава 16. Десет полезни примера…293
16.1. Закръгляне на ъглите на блок…293
16.2. Наслагване на блокове <DIV>…299
16.3. Създаване на динамично падащо меню с помощта на CSS 3…302
16.4. Скриване на броячи и банери…306
16.5. Използване на собствен шрифт…307
16.6. Центриране на таблици…308
16.7. Цвят на контура…308
16.8. Цвят на хоризонталната линия (таг <HR>)…308
16.9. Собствен курсор…309
16.10. Подчертаване на текста с вълнообразна линия…309
Глава 17. Ефектни бутони с CSS…311
17.1. Правоъгълни бутони…311
17.2. Бутони с графични ефекти…313
17.3. Имитиране на популярни бутони…317
17.4. Кръгли бутони с CSS…322
Глава 18. Стил на кода…327
18.1. Стил на HTML кода…327
18.1.1. Общ синтаксис…327
18.1.2. Проверявайте валидността…328
18.1.3. Използвайте DOCTYPE…328
18.1.4. Винаги посочвайте кодировката на символите…329
18.1.5. Правилно включване на стиловете и скриптовете…329
18.1.6. Надписи на полетата за въвеждане…329
18.1.7. Атрибут за езика…330
18.1.8. Правилно задаване на размерите на картинките…330
18.2. Стил на CSS кода…331
18.2.1. Общ синтаксис…331
18.2.2. Ред за писане на свойствата…332
18.2.3. Имена на класовете…333
Приложение 1. Стандартни цветове…334
Приложение 2. MIME типове…340
Приложение 3. Езикови кодове…342
Заключение…344