Въведение в HTML


Определение

HTML документа е обикновен текстов файл, съдържащ текст и специално обозначени команди от езика HTML, които указват на браузера (програмата за визуализиране на HTML документи) как да изобрази съответния текст или обект и какво да бъде поведението му.

История

Организацията за стандартизиране на HTML се нарича World Wide Web Consortium (официален сайт www.w3.org). Към нея се отправят всички предложения за допълване и изменение на HTML. Те подготвиха и следващото поколение на HTML, което се нарича XHTML (Extensible HiperText Markup Language).

Някои основни термини

хипертекст
текст, който съдържа препратка (хипервръзка) към други текстове, намиращи се на същата или на друга машина
хипермедия
документ, който освент тескт и хипервръзки съдържа и изображения, аудио и видео информация, анимации и т.н.
HTML
съкращение от HyperText Markup Language - език за описване на хипертекстови документи. Самия документ е обикновен текстов файл, който съдържа специални маркери, които указват на браузера как да визуализира документа. 
браузер
програма за доставяне и визуализиране на хипертекстови документи
сървер
компютър, доставящ определена услуга на други компютри от същата мрежа
клиент
компютър, който ползва определена услуга, доставяна му от сървера
протокол
набор от стандартни съобщения и правила за реда на обмяната им, даващ възможност два компютъра да обменят информация
www или W3
съкращение от World Wide Web (Световната Мрежа) - общо наименование за множеството от всички сървери в Интернет, предоставящи хипертекстови документи, всички документи и връзките между тях, образуващи една огромна виртуална мрежа или паяжина. Термина се използва също така за обозначаване на услугата на предоставяне на хипертекстови документи
http
съкращение от HyperText Transport Protocol, протокола за прехвърляне на хипертекстови документи
уебсайт
множество от свързани хипертекстови документи по дадена тема, обикновено намиращи се на един сървер

Структура на HTML файла

  1. Маркери - маркера е основния елемент на HTML файла. Представлява команда, която указва на браузера как да визуализира или представи даден текст или друг обект. Много от маркерите са по двойки - начален и краен маркер, като началния указва къде започва действието на командата която маркера обозначава, а крайния указва къде завършва действието и. Между началния и крайния маркер се намират текст и други маркери, върху които се прилага действието на командата. Началния маркер се обозначава с <маркер>, а крайния - с </маркер>. Маркерите, които нямат  съответен краен маркер, се обозначават така: <маркер>. Маркерите могат да се влагат един в друг, но не могат да се пресичат. Например:
  2. Структура на HTML файла - за да може браузера да различава HTML файла от обикновените текстови файлове, той се обозначава с маркерите <html> и </html>. Състои от две основни части – глава (head) и тяло (body), обозначавани съответно с двойките маркери <head> </head> и <body> </body>.
    Типичната структура на един html документ е

    <html>
    <head>
    </head>
    <body>
    </body>
    </html>

     
  3. Заглавна част - съдържа описателна информация, обща за цялата страница - заглавие, автор, ключови думи, кодова таблица на страницата  и др. Разполага се между маркерите <head> и </head>. В заглавната част се разполагат следните маркери:
  4. Същинска част - съдържа всичко онова което се визуализира на страницата. Тук се указват и маркерите за изображения, препратки и т.н. Обикновеният текст не е необходимо да е между някакви други маркери, но може да се постави, за да се форматира.

Редактори за HTML

Тъй като HTML документа е обикновен текстов файл, всеки текстов редактор може да бъде използван за редактирането му. Въпреки това, съществуват множество специализирани редактори за HTML, които предлагат много предимства пред традиционните текстови редактори - оцветяване на синтаксиса на езика, автоматично затваряне на маркерите и автоматично добавяне на такива, улеснен преглед в браузер и т.н. Редакторите се делят най-общо на 2 типа:

Добавяне и форматиране на текст

  1. Правила за писане на текст - при визуализирането на текста браузера игнорира новите редове и допълнителните интервали. Това е с цел по-удобното оформяне на кода на HTML страницата. 
  2. Други маркери за структуриране на текста:
  3. Форматиране на текста - вида на извеждания текст може да бъде управляван чрез следните маркери (всички изброени по-долу са по двойки - начален и краен):
  4. Хоризонтална линия - отбелязва се с маркера <hr>. Няма затварящ маркер. Дължина на линията може да се укаже като брой пиксели или  в % от ширината на страницата чрез добавяне на атрибута width. Може да се подравни в ляво, в центъра или в дясно чрез атрибута align. Дебелината и (в брой пиксели) се указва чрез атрибута size, а ако искаме да няма сянка, трябва да добавим атрибута noshade. Можете да указвате и цвят на линията с атрибута color, но не ви е гарантирано че ще се поддържа от всички браузери. Например линия, широка 80% от широчината на страницата, дебела 10 пиксела, подравнена в средата, без сянка ще се укаже така: <hr width=80% size=10 align=center noshade>
  5. Коментари - служи за добавяне на текст за обяснение и подсещане, както и за временно забраняване на част от HTML кода. Не се изобразява от браузера и по никакъв начин не влияе на останалия HTML код на страницата. Разполага се между символите <!-- и -->.

Препратки и цели

  1. URL (Uniform Resource Locator) - стандартизиран начин да се укаже адреса на даден ресурс в мрежата
  2. Абсолютен URL - указва пълния път до ресурса. Приложим е за достъп до ресурса от всяка точка в мрежата. Има следния общ вид:
    услуга://подобласт.сайт.област:порт/път/файл.разширение#цел
    Какво означава всеки от елементите:
  3. Относителен URL - указва пътя до ресурса спрямо текущия файл. Така сайта може лесно да се премести и URL-ите му да продължат да са валидни.

Препоръки при използване на изображение

  1. да не се използват некомпресирани или нестандартни формати
  2. файловете да са именовани на латиница с малки букви без специални символи
  3. изображенията да се намират в същата папка като html файла или в подпапка
  4. изображенията да са локални файлове , а не файлове от интернет
  5. изображенията да са с размера , с който ще се виждат
  6. изображенията да не са прекалено големи (затруднява се разглеждането)
  7. изображенията да не са прекалено малки
  8. добре е винаги да се указва широчината и височината на изображението

Препоръки при създаването на нов сайт

Логическа структура на сайта

Препоръки за страниците: добре е да са около един екран на височина, на широчина да не стават по-широки от прозореца на браузера (да няма ленти за превъртане), да не са само текст, а да има и свободни пространства ("повече въздух"), добре е да има информация за авторските права на публикуваното съдържание и електронен адрес за контакти

Физическа структура


Автор: Данаил Трайчев  |  Лиценз: CC BY-SA  |   Версия: 1.1   |   Последна промяна: 12.11.2007