HTML & CSS за самостоятелна работа

За справка по време на всички уроци

Най-често ползваните HTML маркери и атрибутите им, друг такъв документ (вариант за преглед от WebCoder), XHTML справочник, CSS2 справочник

Въведение в HTML

Прочетете: Някои основни термини, Въведение, Уеб редактори, Структура на HTML документа, Елементи, етикети и коментари, За HTML и XHTML

Задача: Направете вашата първа HTML страница с помощта на WebCoder и  после още една с  Kompozer

Структура на текста

Прочетете: Добавяне и форматиране на текст, Форматиране на текст - 2 част, Бели полета, Някои насоки

Задача: Изберете един текст (например този за свободния софтуер) или няколко и с помощта на маркери направете така, че да съдържа заглавия, подзаглавия и абзаци и човек да може лесно да се ориентира в него. Решения: Анжелина, Гани, Емил, той, пак той, Илиян, Миро,  Денис,  Поли, пак тя, Радослав, Веси, Виктор

Извеждане на специални символи

Прочетете: Изписване на важни за HTML символи, Други маркери, Таблици със символи

Задача: Направете примерна схема на специалните символи, които можете да изведете в HTML документ. Нека да са достатъчно големи, така че да си личат ясно.

Препратки

Прочетете: Какво е URL, Видове URL, Добавяне на препратки, Препратки - изображиения

Цветове

Прочетете: Цветове, 216-те "безопасни" за Web цвята, Цветове с названия

Задачa: направете по 3 страници с текст и изображения, всяка в различен цвят и чрез цвета да се опитва да внуши определено настроение (повече). Решения: Гани, Емил

Форматиране на текст

Прочетете: Форматиране на текст - 1 част, Шрифтове. Допълнително: Google Web Fonts, Как да ги ползваме в сайт

Задача: Направете HTML документ, който да демонстрира всички възможни форматирания, които може да бъдат направени чрез HTML маркери - във вида наклонен текст, удебелен текст и т.н. Документът да съдържа и всички видове заглавия, както и демонстрация на използването на различни шрифтове - например името на различните шрифтове, изписани всяко със съответния шрифт.

Въведение в CSS

Прочетете: Въведение в CSS, Какво е CSS и за какво служи? 1-ви пример за CSS файл. Правила,  Структура на CSS, Структура и понятия в CSS, Външни стилове. Примерен CSS файл, Вътрешни за HTML документа стилове, Стилове вградени в HTML таговете

Задачи:

1. Променете външният вид на някои от направените HTML страници чрез CSS.
   
2. Направете задачата за структура на текста по-прегледна чрез използване на CSS.
   
3. Направете така, че няколко различни страници да изглеждат еднотипно (заглавията с еднакъв цвят и шрифт, еднакви разстояния отляво и отдясно, изображенията с еднакв рамки, еднакъв фон на страницата, цвят на препратките и т.н.) и да се управляват от един CSS файл.
   

Добавяне на изображения

Прочетете: Добавяне на изображения, Подравняване на изображения, Препоръки при добавяне на изображения

Задачи:

1. Галерия - Изберете снимки които ви харесат и използвайте маркера за изображение за да създадете галерия, съдържаща заглавия на категории и снимки във всяка категория. Решения: Анжелина (и тук, и тук), Денис,  Гани, Илиян, пак той, Миро,  Поли, Радослав, Веси, Виктор
2. Илюстрации - изберете произволна приказка или друг текст и го илюстрирайте с подходящи изображения. Изображенията да са вградени в текста. Решения: Радослав, Илиян, Гани, Виктор, неизвестен, пак той, пак той
3. Любими програми или сайтове - направете страница, която да съдържа: снимка на екрана на ваши любими програми (или сайтове), заглавие на всяко от тях и с няколко думи защо го харесвате. Решения: Радослав, Поли, Гани, Илиян
   

Списъци

Прочетете: Списъци

Задачи:

1. Направете част от заглавията от този документ в HTML страница като план - с точки и подточки.
   
2. Направете друга страница със списък с дефиниции, съдържаща примерно основните термини от въведението в HTML.

Видове селектори в CSS

Прочетете: Видове селектори 1, Видове селектори 2, Структура и понятия в CSS: 2-ра част (Видове селектори), Хипервръзки с използване на псевдо-класове

Задача: Променете външният вид на страниците от задачата за списъци чрез CSS, така че да стане по-красива и прегледна.

Позициониране чрез CSS

Прочетете: Блокови и вградени маркери, Указване на размер на елемент, Указване на позиция на елемент

Задача: Променете външният вид на страниците от задачите за изображения чрез CSS, така че да станат по-красиви и прегледни, HTML кода да е по-изчистен и да са по-лесни за промяна на външния вид - размерът на изображенията, разстоянията между тях, рамките им, по колко са на ред и т.н.

Таблици

Прочетете: Таблици, Атрибути на маркерите за таблици

Задачи: да се направи (с помощта на таблици) страница за различните съставни цветове, и цветовете от които са образувани ( повече). Решения: Гани

Изграждане на сайт

Прочетете: По-специфични маркери, Метамаркери, Примерна HTML страница (да се погледне и като HTML код), Изграждане на сайт с CSS

Задачa: Направете сайт за вас (чрез таблици или чрез кутии и CSS) . Нека да съдържа поне две страници, изображения, препратки и начин за връзка с вас.

Форматиране на съдържанието чрез CSS

Прочетете: Текст и шрифтове, Google Web Fonts, Как да ги ползваме в сайт, Списък на елементи, които не се поддържат от XHTML 1.0 Strict DTD (тоест трябва да се избягват и да се заменят с CSS)

Задача: Направете HTML документ, форматиран с CSS, който да демонстрира възможните форматирания, които може да бъдат направени чрез CSS настройка на кода. Документът да съдържа поне по три елемента от всеки вид (например три заглавия h1), като на две от тях са приложени едни и същи настройки, а на третото - различни. Да се демонстрират различни подходи за решаване на задачата и да се помисли за предимствата на всеки от тях.

Рамки

Прочетете: Frames (рамки), Рамки, Вградени рамки

Задачи:

1. Най-посещавани сайтове - да се направи (с помощта на рамки) страница, която позволява учениците лесно да отворят най-посещаваните от тях сайтове. Решения: Гани, Емил, Виктор
2. Галерия с карета - да се направи (с помощта на рамки) галерия със снимки. повече). Решения: Гани (друг вариант)

Формуляри

Прочетете: Формуляри - 1 част , Формуляри - 2 част, Формуляри

Задача: измислете страница, която да съдържа някакъв забавен и смешен формуляр (анкета, форма за регистрация, тест или каквото друго ви хрумне). Решения: Гани

HTML5 и CSS3

Прочетете: HTML5 и CSS3 - въведение, HTML-5.pptx,  CSS.pptx

Задача: да се направи страница, в която се демонстрират новите възможности на двете технологии

Нашият дългогодишен хостинг e