Въведение в HTML
Определение
HTML документа е обикновен текстов файл, съдържащ текст и
специално обозначени команди от езика HTML, които указват на браузера
(програмата за визуализиране на HTML документи) как да изобрази
съответния текст или обект и какво да бъде поведението му.
История
- 1989 год. - англичанина
Тим Бърнърс-Лий си поставя за задача да изнамери нов метод за
обмяна на
информация с колегите си изследователи от CERN (Европейската
лаборатория по физика на частиците в Женева) . Същността на неговия
метод е създаване
на текстови документи, обвързани помежду си с препратки, които да
могат да се прехвърлят през мрежата до отдалечен потребител посредством
унифициран интегриран интерфейс.
- 1990 год. - създаден е първия работещ в текстов режим
браузер, както и графичен такъв за компютрите от фамилията NExT
- 1991 год. - WWW е предоставен за общо ползване в CERN
- 1992 год. - CERN публикува проекта WWW. Първата
версия на езика HTML.
- 1993 год. - разработени са графични браузери за Unix, Mac
OS и Windows
- 1994 год. - излиза HTML 2.0. WWW е вече най-популярното
средство за достъп до ресурсите на Интернет.
- 1996 год. - представен е HTML версия 3.2
- 1998 год. публикувана е спецификацията на HTML
4.0. Последната версия на езика е HTML
4.01.
Организацията за стандартизиране на 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 файла
- Маркери - маркера е основния елемент на HTML файла.
Представлява команда, която указва на браузера как да визуализира или
представи даден текст или друг обект. Много от маркерите са по двойки -
начален и краен маркер, като началния указва къде започва действието на
командата която маркера обозначава, а крайния указва къде завършва
действието и. Между началния и крайния маркер се намират текст и други
маркери, върху които се прилага действието на командата. Началния
маркер се обозначава с <маркер>, а
крайния - с </маркер>. Маркерите,
които нямат съответен краен маркер, се обозначават така: <маркер>.
Маркерите могат да се влагат един в друг, но не могат да се пресичат.
Например:
- правилно: <p>текст <b>текст</b>
друг текст</p>
- неправилно: <p>текст <b>текст</p>
друг текст</b>
- Структура на HTML файла - за да може браузера да различава
HTML
файла от обикновените текстови файлове, той се обозначава с маркерите <html>
и </html>. Състои от две основни
части – глава (head) и тяло (body), обозначавани
съответно с двойките маркери <head> </head>
и <body> </body>.
Типичната структура на един html документ е
<html>
<head> </head>
<body> </body>
</html>
- Заглавна част - съдържа описателна информация,
обща за цялата страница - заглавие, автор, ключови думи, кодова таблица
на страницата и др. Разполага се между маркерите <head>
и </head>. В заглавната част
се разполагат
следните маркери:
- заглавие - между <title>
и </title> - указва заглавието на
страницата, което се извежда в заглавната лента на
браузера. Трябва да съдържа до
40-50 знака и да описва най-точно съдържанието на
страницата. Важно
е една html страница да има указано заглавие, тъй като
много търсачки възприемат написаното между таговете
<title> и </title> като най-важната
информация за страницата, и то ще определи доколко напред ще
се показва страницата ви в
списъка с резултатите им.
- автор - посочва се чрез маркера <META
NAME="Author" CONTENT="имена на автора">
- кодова таблица - чрез маркера <META
HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1251">. Указва кодовата таблица на
страницата, и от нея зависи правилното визуализиране на текст на
кирилица. Ако не е указана, по подразбиране се използва кодовата
таблица за латиницата. Кодовата таблица е таблица на съответсвия между
символите и цифрова стойност от 0 до 255 за всеки от тях, използвана
при запис на текст във файл и при четенето му. Има множество кодови
таблици за различните езици и писмености. Стандартната за България е
Windows 1251. Има и кодови таблици, съдържащи повече от една
писмености, наречени Unicode.
- Същинска част - съдържа всичко онова което се визуализира
на страницата. Тук се указват и маркерите за изображения, препратки и
т.н. Обикновеният текст не е необходимо да е между някакви други
маркери, но може да се постави, за да се форматира.
Редактори за HTML
Тъй като HTML документа е обикновен текстов
файл, всеки текстов редактор може да бъде използван за редактирането
му. Въпреки това, съществуват множество специализирани редактори за
HTML, които предлагат много предимства пред традиционните текстови
редактори - оцветяване на синтаксиса на езика, автоматично затваряне на
маркерите и автоматично добавяне на такива, улеснен преглед в браузер и
т.н. Редакторите се делят най-общо на 2 типа:
- визуални- предлагат създаване на HTML файла визуално, като
в текстообработваща
програма, и автоматично генериране на съответния HTML код. Предимството
им е че не изискват познания по синтаксиса на езика. Недостатък - често
генерира претрупан и недобре оформен код, с много излишни елементи и
команди, понякога е невъзможно да се постигне желания ефект върху вече
добавен текст. Най-известни:
- Macromedia DreamWeaver - най-известният, и най-добър такъв редактор. Комерсиален.
- Microsoft Frontpage - друг популярен редактор, включен в някои от офис пакетите на Microsoft. Комерсиален, и кода който генерира не е много чист.
- nVU - подобен на горните два, но
с отворен код, и свободен за разпостранение и ползване. Генерира чист
код, и има вграден редактор за каскадни стилове (CSS) и възможност за
публикуване на страниците директно от редактора.
- OpenOffice Writer -
текстообработващата програма от известния свободен офис пакет може
да се ползва и за HTML редактор, както за визуално редактиране, така и
за ръчна корекция на кода. Генерира достатъчно чист код
- Microsoft Word също може да се използва за създаване на HTML страници, но е печално известен с претрупания код който генерира
- невизуални- позволяват директно редактиране на HTML кода и
много улеснено
добавяне на нови маркери. Този тип редактори са за предпочитане, защото
вие напълно контролирате съдържанието и поведението на страницата.
Можете лесно да добавяте нови маркери, да се движите между тях, както и
да визуализирате резултата в браузер.
Добавяне и форматиране на текст
- Правила за писане на текст - при визуализирането на текста
браузера игнорира новите редове и допълнителните интервали. Това е с
цел по-удобното оформяне на кода на HTML страницата.
- За да се раздели текста на абзаци, той трябва да се
разположи между маркерите <p> и </p>.
Ако текста трябва да се подравни, към маркера се указва атрибута align=стойност,
която може да е left, right, center и justify
за подравняване съответно вляво, вдясно, центрирано и двустранно
подравнено. Например: <p align=center>центриран
текст</p>
- за добавяне на нов ред вътре в абзаца се ползва маркера <br>
- за добавяне на заглавия - маркерите <h1>..<h6>
- съответно за заглавия от първо до шесто ниво. Тези маркери извеждат
текста с по-голям размер (съобразно нивото на заглавието) и удебелен.
Също така автоматично се оставя по един празен ред преди и след
заглавието.
- Други маркери за структуриране на текста:
- <blockquote> за вмъкване
на текста навътре </blockquote>
- <address> адрес (не
електронен, а например пощенски адрес) - обикновено се извежда наклонен
</address>
- <cite> за вмъкване на
цитати - обикновено се извежда наклонен </cite>
- <pre> за преформатиран
текст (например за програмен код) - извежда се така както е изписан в
редактора, с всички интервали и нови редове</pre>
- <xmp> за HTML код -
извежда се така както е изписан в редактора, с ъгловите скоби около
маркерите, с всички интервали и нови редове</xmp>
- <nobr> забранява
прекъсването на текста и пренасянето му на по-долен ред - извежда се на
един ред </nobr>
- <div> - общ контейнер за
текст. Може да се използва
например за да се подравни текста вдясно или да се центрира. Ако няма
затварящ маркер, действието му е като на <br>
- Форматиране на текста - вида на извеждания текст може да бъде
управляван чрез следните маркери
(всички изброени по-долу са по двойки - начален и краен):
- <em> - за наблягане на
даден текст - обикновено се извежда като наклонен
- <strong> - за
изпъкване на текста - обикновено се извежда като почернен, но при някои
браузери може да е и наклонен
- <b> - за
удебелен текст
- <i> - за курсивен
(наклонен) текст
- <u> или <ins>
- за подчертан
текст
- <strike> или <s>
или <del> -
за зачертан
текст
- <sup> - горен
индекс (повдига текста спрямо основния и намалява размера му)
- <sub> - долен индекс
(текста става по-долу спрямо основния и с по-малкък размер)
- <dfn> - за дефиниции.
Извежда се с курсивен текст
- <var> - за указване на
променливи в текста. Извежда се с
курсивен текст
- <tt> - изписва текста в
шрифт като на пишеща машина (с шрифт с фиксирана широчина,
например Courier)
- <code>
или <samp> - за програмен код.
Изписва текста в шрифт с фиксирана широчина
- <kbd> - за извеждане на
онова, което потребителя трябва да въведе от клавиатурата (например при
попълване на форми или въвеждане на пароли), Изписва
текста в шрифт с фиксирана широчина
- <big> - увеличава
големината на шрифта с един размер на всяко изписване на маркера
- <small> - намалява
големината на шрифта с един размер на всяко изписване на маркера
- <acronym> и <abbr>
- за изписване съответно на акроними и
абревиатури. Възпроизвежда се от аудио-браузърите,
където указва изговаряне на всяка една буква поотделно. Може да
съдържат
атрибута title, на който се задава като стойност
пълното название на
съкращението. Например <acronym title="World Wide
Web">WWW</acronym>
- Хоризонтална линия - отбелязва се с маркера <hr>.
Няма затварящ маркер. Дължина на линията може да се укаже като брой
пиксели или в % от ширината на страницата чрез добавяне на
атрибута width. Може да се подравни в ляво, в центъра или в дясно чрез атрибута align. Дебелината и (в брой пиксели) се указва чрез атрибута size, а ако искаме да няма сянка, трябва да добавим атрибута noshade. Можете да указвате и цвят на линията с атрибута color, но не ви е гарантирано че ще се поддържа от всички браузери. Например
линия, широка 80% от широчината на страницата, дебела 10 пиксела,
подравнена в средата, без сянка ще се укаже така: <hr width=80% size=10 align=center noshade>
- Коментари - служи за добавяне на текст за обяснение и подсещане,
както и за временно забраняване на част от HTML кода. Не се изобразява
от браузера и по никакъв начин не влияе на останалия HTML код на
страницата. Разполага се между символите <!-- и -->.
Препратки и цели
- URL (Uniform Resource Locator) - стандартизиран начин да се укаже адреса на даден ресурс в мрежата
- Абсолютен URL - указва пълния път до ресурса. Приложим е за достъп до ресурса от всяка точка в мрежата. Има следния общ вид:
услуга://подобласт.сайт.област:порт/път/файл.разширение#цел
Какво означава всеки от елементите:
- услуга - протокола за връзка, който трябва да се ползва за достигане до ресурса
- сайт - име на сайта, на който е разположен ресурса
- област - име на област от първо ниво, в която е регистрирано името на сайта - например .com, .net, .bg
- подобласт - подобластта от същия сайт, в която разположен ресурса - например www., ftp., translate.google.com
- порт - порта, който трябва да се използва за достъп до ресурса
- път - виртуалната папка и подпапка, в която е разположен ресурса на сайта
- файл - име на файла съдържащ дадения ресурс
- тип - типа на файла - формата в който е съхранен ресурса - например .html, .jpeg, .php
- цел - именовано място във същия файл - например #top, #url
- Относителен URL - указва пътя до ресурса
спрямо текущия файл. Така сайта може лесно да се премести и URL-ите му
да продължат да са валидни.
Препоръки при използване
на изображение
- да не се използват
некомпресирани или нестандартни формати
- файловете да са
именовани на латиница с малки букви
без специални символи
- изображенията да се
намират в същата папка като html
файла или в подпапка
- изображенията да са
локални файлове , а не файлове от интернет
- изображенията да са
с размера , с който ще се виждат
- изображенията да не
са прекалено големи (затруднява се
разглеждането)
- изображенията да не
са прекалено малки
- добре е винаги да се
указва широчината и височината на
изображението
Препоръки при създаването на нов сайт
- по-добре нещо, отколкото нищо - започнете от малко, но го
публикувайте веднага, вместо да се опитвате да направите най-прекрасния
и никога непубликуван сайт.
- сайта е за читателите, а не за вас - имайте впредвид, че ще
го четат хора, най-вероятно с вкусове, познания, браузери, монитори и
интернет връзка различни от вашите.
- KISS - колкото по-простичко е направен сайта, толкова
по-малко възможности за объркване и грешки ще има
- предварително проектирайте структурата - това ще
доведе до по-добро структуриране на сайта, по-лесно
поддържане, по-интуитивна навигация и ще ви предпази от
невалидни препратки
- създайте добра навигация за сайта - нека потребителите
никога не се чудят къде се намират или как да преминат към друга
страница
- оптимизирайте зареждането на страниците и прегледа им -
съдържанието да се събира на 1 екран, малко (но подбрани и подхождащи
си) цветове, леки картинки (ако са много - на няколко
страници и с thumbnails)
- обновявайте редовно съдържанието на сайта, за да е актуален
- дайте възможност за обратна връзка, така че посетителите да
се свържат с вас
- учете се от другите - посетете други сайтове и вижте какво
ви и какво не ви харесва там, и защо
Логическа структура на сайта
- начална страница - служи за въвеждане, съдържа препратки
към подстраниците:
- директно от текста
- чрез неномериран списък
- чрез таблица вляво или отгоре
- чрез отделна рамка (фрейм)
- чрез image map
- подстраници - съдържат конкретна информация , препратки
навътре и назад (може някой да попадне първо на тази страница чрез
търсачка, така че трябва да може и оттук да достигне до всякъде
другаде), навигация (указва къде точно в сайта сте)
- карта на сайта
- страница за контакти
- страница за препратки към други подобни ресурси
Препоръки за страниците: добре е да са около един екран на височина, на
широчина да не стават по-широки от прозореца на браузера (да няма ленти
за превъртане), да не са само текст, а да има и свободни пространства
("повече въздух"), добре е да има информация за авторските права на
публикуваното съдържание и електронен адрес за контакти
Физическа структура
- началната страница - index.html
- имената на файловете - с малки букви, на латиница, без
интервали
- разполагат се в същата папка или в нейни подпапки
- изображенията - в отделна подпапка images
- структурата на папките да е добре обмислена
Автор: Данаил Трайчев |
Лиценз: CC BY-SA |
Версия: 1.1 |
Последна промяна: 12.11.2007