Варна - 2006

Съдържание:

HTML - Въведение
HEAD
BODY - фон, текст, цветове на връзките
FONT - работа с текстове
Форматиране на параграфи
Цветове
Хипервръзки
IMG - Изображения
Таблици
Списъци
Формуляри
Линии
Фреймове
Музикален фон

Партньори:

Click.bg
Brainmasters.org
Живка Жекова-Петрова

Въведение в Web-дизайна

Общи сведения за езика HTML

  • HTML (Hyper Text Markup Language) - език за маркиране на хипертекст.
  • HTML е езикът, на който се казва на браузъра как да покаже страницата.
  • HTML файлът съдържа само букви, цифри и символи, които се четат от кой да е редактор и това прави HTML универсален език.
  • HTML може да се усъвършенства допълнително с JavaScript и други езици за web-програмиране и така страниците да станат динамични.
  • HTML непрекъснато се развива и в него се появяват нововъведения. За да има някакъв ред и всички версии да са съвместими с различните браузъри е създадена организацията World Wide Web Consortium (www.w3.org)
  • Командите в HTML се наричат тагове и в повечето случаи са по двойки - начален и краен таг.

Различия между HTML и новата му версия XHTML

  • ХHTML (Extensible Hyper Text Markup Language) - разширен език за маркиране на хипертекст.
  • XHTML изисква командите да се изписват задължително с малки букви.
  • XHTML изисква всички атрибути да се поставят в кавички.
  • XHTML изисква всички команди (тагове) да се затварят.
  • XHTML изисква всички атрибути да имат някаква стойност.

Работна среда за създаване на HTML кода

  • Обикновен текстов редактор – Noteрad. Когато се използва този редактор задължително при запазване на файла трябва да се посочи освен име и разширение .htm или .html.
  • Специализирани редактори - Еditplus и др.
  • Редактори от типа WYSIWYG (What you see is what you get) - FrontPage, Dreamweaver
  • Сайтбилдери от Интернет – www.street.bg
    • Недостатъци на сайтбилдерите:
      • ограничава свободата ви на действие, няма да можете да построите какъвто си искате сайт, а да се съобразявате само с няколко възможности.
      • безплатните онлайн-сайтбилдери разполагат рекламни банери на страницата.
      • сайтбилдерите изписват много повече код, отколкото в действителност е нужен и така страницата става 2-3 пъти по-тежка и по-трудна за отваряне.

Структура на командите в HTML и основни понятия на езика

Отворете Internet Explorer и влезте в някой сайт. Натиснете върху бутон "View" от най-горното меню на браузъра, а от падащото меню изберете бутон "Source". Отваря се текстовия редактор Notepad, където виждате сорса на страницата, т.е. "суровия" код на HTML-документа.

  • Основните команди (тагове) се изписват между ъглови скоби: <таг >
  • Всеки таг може да има различен брой атрибути, на които се задават стойности.
  • Между текста на командата и ъгловите скоби не трябва да се оставя празен интервал. Такъв се поставя между атрибутите на командите.
  • Тагът, с който започват почти всички html-документи е <html>. Краят на един html-документ е тагът </html>.
  • Когато един таг няма завършващ, например тагът <br> за започване на нов ред, според изискването на XHTML в края на единствения таг се поставя наклонена черта преди дясната скоба, ето така <br />.
  • В документа може да се поставят коментари, които не влияят на съдържанието на страницата, а са само полезна информация за разработчика. За да останат скрити (да не се появят в прозореца на браузъра) те се описват с таг за коментар <!-- Коментарен текст -->.

Основната структура на документа е:

<html>

<head>

<!--Заглавна част - Съдържа описателна информация за сайта - заглавие, автор, ключови думи, кодиране на страницата и др. -->

</head>

<body>

<!-- Същинска част - текста и всичко останало, което се визуализира в прозореца на браузъра -->

</body>

</html>

Упражнение 1:

a) В лявата част на таблицата по-долу въведете следният html-код:

<html>
<body> Здравей, <br />
МИТКО!
</body>
</html>

Натиснете бутона над прозорчето.

б) Променете името МИТКО с вашето име и натиснете бутона отгоре.