Упражнение по "Уеб дизайн"
HTML, което означава HyperText Markup Language , е език за създаване на web страници. Страниците създадени с HTML могат да съдържат графика, текст, музика, анимация, както и връзки към други страници(хиперлинкове).
От какво се нуждаете за да създадете такава страница? Трябват ви две неща - елементарен текстов редактор и интернет браузър. Ако сте потребители на Windows или Linux имате и двете! За текстов редактор използвайте вградения в Windows NOTEPAD или безплатният редактор със синтаксисно оцветяване Notepad++, а за браузър можете на използвате Internet Explorer, Mozilla Firefox или Opera. Файлът, който ще създадете с Notepad е текстов файл, който обаче трябва да запишете с разширение .html (или .htm). Tакъв файл се нарича HTML документ. Сега нека направим една web страница. За целта стартирайте Notepad и напишете следното:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-utf8" />
<title>Упражнение по HTML</title>
</head>
<body>
Текстово съдържание, графики, видео и пр.
</body>
</html>
Първият ред от всеки валиден HTML документ трябва да съдържа декларация на версията нa HTML, която се използва в него.Тази декларация се нарича "дефиниция на типа на документа"(Document Type Definition)обикновенно се означава само с "DTD".
DTD е просто код ,специфициран в стандарта на HTML който може да бъде вмъкнат в горната част на всяка страница ..Той обявява адреса на уеб страницата,която съдържа правилата на езика за тази версия на HTML.Стандартната декалрация се нарича "стриктна" (Strict)и се използва за документи които използват валиден HTML 4 код.Например декларацията на HTML версия 4.01 изглежда така :
<!DOCTYPE HMTL PUBLIC "-//W3C//DTD HMTL 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
Спецификацията предлага също и "преходна (Transitional) декларация за съвместимост с предишни версии.Тя следва да бъде използвана ,когато HTML документа съдържа стари кодове за маркиране ,които са излезли от употреба в стриктния стандарт на HTML 4.
Той изглежда така:
<!DOCTYPE HMTL PUBLIC"-//W3C//DTDHMTL4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
или
<meta http-equiv="content-type" content="text/html; charset=windows-utf8" />
Използването на този таг указва на браузъра азбуката, на която е написана страницата. Атрибута charset може да приема различни стойности в зависимост от езика на който е написан html документа. В случай, че искаме да пишем на кирилица, стойността на charset бива windows-1251 или utf8, което указва html документ написан на кирилица.
Ако се използват и други мета тагове, те също се поставят в head частта на документа.
<title>Упражнение по HTML</title>
Между таговете <title> и </title> въвеждаме заглавието на страницата, което бива произволен текст, който се изписва в titlebar-a на браузъра ни, когато отворим страницата с него.
В <body></body> частта въвеждаме цялото видимо съдържание на документа, това което браузърът ни ще визуализира при отваряне на страницата.
Не забравяйте!!! БРАУЗЪРЪТ е програмата, която „прочита”, обработва и визуализира HTML страници! HTML-а не се обработва от сървъра на сайта, а от браузърът на посетителя!!!
2. Форматиране на текст
Нека преговорим основните HTML тагове, които са ни необходими за да форматираме приличо даден текст в Web страница.
| HTML Tag | Действие |
| <p> …. </p> | Огражда параграф и оставя празно място преди началото на следващият и след края на предишният. |
| <br /> | Разделя текста на мястото, където е поставен и го продължава на нов ред. Действието му е същото, като да натиснем Enter докато пишем текст в Word |
| <b>….</b>, <strong>…</strong> | Удебеляване на текст |
| <i>…</i>, <em>…</em> | Италик текст, наклонен шрифт |
| <u>…</u> | Подчертан текст |
| <sup>…</sup> | Изписва текста като горен индекс (23) |
| <sub>…</sub> | Изписва текста като долен индекс |
A сега да си припомним кои CSS атрибути за стилизиране на текст взехме в предходините 4 теми и да обобщим наученото за тях.
| Атрибут | Приемани стойности | Действие |
| color | Цвят, изписан в шеснадесетичен код (пр. #FF0000 за червено, #000000 за черно, #FFFFFF за бяло) | Променя цвета на текста |
| font-size |
|
Задава размер на използваният шрифт |
| font-family | Приоритезиран списък от шрифтове (пр. Arial, Verdana, Tahoma). Ако първият шрифт не бъде намерен на потребителският компютър, на който се отваря страницата, се използва вторият шрифт. Ако и той не е наличен, се използва третият. |
Избор на шрифт или набор от шрифтове |
| margin | Пиксели (px) | Определя отстъп навън (навън от снимка, параграюф и пр.). Отстъпа се измерва спрямо съседен елемент! |
| padding | Пиксели (px) | Определя отстъп навътре (например отстъп от рамките на клетката на таблица към текста, от границите на параграфа към текста и т.н.) |
| text-decoration | None underline overline line-through blink |
Премахва декорация подчертава текста слага черта над текста зачертава текста кара текста да мига |
Разбира се, с това възможностите за стилизиране не се изчерпват, но е важно по време на курса да се усвои използването първо на този набор атрибути, преди да продължим с останалите.
3. Таблици
HTML таблиците се формират благодарение на няколко тага – table,tr,td и th. Всяка таблица започва с тага table после с tr и накрая с td и завършва със затварящите им тагове.Ето един пример за таблица.
| <table> <tr> <td>число 1</td> <td>число 2</td> <td>число 3</td> </tr> <tr> <td>число 4</td> <td>число 5</td> <td>число 6</td> </tr> <tr> <td>число 7</td> <td>число 8</td> <td>число 9</td> </tr> </table> |
Очертаване на рамки около таблици
Това става с атрибута border в тага table.Задавате стойност на border като числа – 1,2,3,4,5,6 и т.н като ако използвате нула (0) това ще значи,че не няма да има рамка.
Озаглавяване на таблиците
Както споменах по-горе има и таг th които служи за създаване на заглавие и буквите в него са с удебелен шрифт.
Сливане на клетки
Има в атрибута,които вършат цялата работа colspan и rowspan
Rowspan – вертикално сливане на клетки
Colspan – хоризонтално сливане на клетки
Задаване размер на таблиците
По-лесно от това няма прави се с познатите ви до болка атрибути width и height.От урока за начинаещи ниво 0 би трябвало да сте наясно с това как се използват тези атрибути.
Навлизане в дълбочината на форматиране на таблици
Подравняване на таблиците
Това става с два атрибута и техните под-атрибути
Align – премества съдържанието от ляво,дясно и по средата съответно – align=”left”;Align=”right”;Align=”center”
Valign – премества съдържанието от горе от долу и по средата съответно – valign=”top”;Valign=”bottom”;Valign=”middle”
Даване на пространство около таблицата
Пространствата за отделните клетки на таблицата се правят с атрибутите cellspacing и cellpading на тага table.
Cellspacing – добавя пространство между клетките в таблицата без да променя размера на таблиците.
Cellpadding – добавя пространство вътре в самата клетка и нейните стени.
И двата атрибута задават пространството в пиксели!
Използване на таблици за структурно оформление на страници
Таблиците са най-лесния начин да структурирате вашата страница,разбира се може да ви се наложи да не ползвате само една таблица а по няколко.Важното е когато правите своя страница първо да нахвърляте идеята си на лист хартия след това да я изработите таблично с помощта на таблиците и накрая да я разкрасите и да получите желания резултат.
З А Д А Ч И
1. Да се създаде таблица с 5 реда по 1 колонка. Таблицата да има фиксирана широчина 200px, а колонките и да бъдат с височина 25px. Да се зададе цвят на фона, рамката на таблицата и клетките, както и размер, цвят, тип и декорация на текста.
Текста във всяка една клетка да бъде вертикално и хоризонтално центриран.
Таблицата да бъде ляво ориентирана.
2. Разглеждане на някои готови HTML шаблони и вграждане на направеното таблично меню в тях.
3. Разглеждане на непознатите тагове и атрибути в различни готови HTML шаблони и разясняване на тяхното действие.
