Файлове към урока
Допълнения към урока
Дискусия към урока
Учебна програма
Учебна програма
HTML5 и CSS3
1. Въведение в HTML и CSS
- 1. Представяне на HTML и CSS
- 2. Основна структура на HTML
- 3. Текст, разстояния и нови редове
- 4. Блокови и инлайн елементи
- 5. Картинки и HTML атрибути
- 6. Моята интернет снимка
- 7. Стилове вместо HTML и атрибути
- 8. Стилове Float и Margin
- 9. Задача: Икона име и длъжност
- 10. Решение: Икона име и длъжност
2. Box моделът в HTML
3. Селектори, позициониране и трансформации
4. Фонови изображения и спрайтове
5. Създаване и модифициране на изображения
6. Линкове, навигация и меню
7. Скрити елементи, прозрачности и responsive дизайн
8. Динамика с транзишъни и анимации
9. Бонус модул: Фото галерия+Кратък приложен CSS наръчник
Блокови и инлайн елементи
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Най-важното за блоковите и inline елементите
Блоковите елементи разделят съдържанието на отделни логически части и започват на нов ред. Inline елементите остават в рамките на текущия ред и не прекъсват потока на текста. Най-важната разлика е, че div създава отделен блок, а span маркира част от текста, без да променя подредбата му. Използвайте блокови елементи за структура, а inline – за фино разграничаване вътре в текста.
Как да тествате разликата сами
- Създайте прост HTML файл с текст на два реда (например име и професия).
- Оградете първия ред с
divи запазете файла – ще видите, че съдържанието се показва на отделен ред. - Премахнете
divи вместо това използвайтеspanоколо част от текста. - Презаредете страницата – текстът ще остане на същия ред, без визуална промяна.
- Сравнете поведението на двата елемента и обърнете внимание как браузърът ги интерпретира.
Използвани HTML елементи
div– блоков елемент, който групира съдържание в отделна логическа секция и започва на нов ред.span– inline елемент, който маркира част от текст без да нарушава подредбата.br– добавя нов ред, но не създава логическа структура (използва се по-рядко за оформление).
Дискусия към урока
Запиши се в Аула
Ако вече имаш регистрация влез оттук