Структурата на HTML документ, къде започва валиден html код?
Със самите основи на HTML и създаването на прост сайт с тяхна помощ изучаваме в този раздел. И ето – разглеждаме по-подробно различни важни неща.
Опростена схема на HTML документ изглежда така:
Да започнем по ред от най-горния раздел.
Колкото и жалко да звучи, много уебмастъри или пренебрегват този маркер, или изобщо не успяват да наваксат целта му.
Тагът DOCTYPE е задължителен и трябва да се появи на първия ред. Това е ключовият елемент, който определя формата на синтаксиса на документа. Без него е просто невъзможно да се създаде валиден документ.
Защо този режим е толкова лош? Първо, всеки таг ще бъде обработен според спецификацията, избрана от браузъра по негова преценка. Което най-вероятно ще повлияе на получения външен вид. И например при изпълнение на клиентски java скриптове ще възникнат сривове.
Всеки браузър ще обработва документа по свой собствен начин - можете да забравите за една и съща поява на страница в различни програми. Или трябва да окачите куп хардкор CSS фиксатори.
Браузърът ще започне да изобразява страницата според правилата на HTML 4 в режим на обратна съвместимост с IE 6.
Резултатът на екрана: крива страница, половината от скриптовете не се изпълняват.
Като цяло това не е просто добър тон и показател за вашата грамотност. Doctype Definition определя темпото за писане на самия документ.
Нека разгледаме най-подходящите опции за днес.
- 1. строг .dtd">
- 2. Преходен //EN" "http://www.w3.org/TR/html4/loose.dtd">
- 1. HTML 4Стрикт - Строг
- 2. HTML 4Transitonal - Преходен
§1.2 XHTML 1.0 стандарт
- 1. Строг //EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 2. Преходен //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 1. xHTML 1.0Стриктно - строго
- 2. xHTML 1.0Transitonal - Преходен
§1.3 Стандарт HTML 5
- html - за всички документи
Можете да считате Doctype Definition като GOST. Харесвате ли висококачествена яхния, произведена в съответствие с GOST? Освен това браузърите с търсачки обичат страници, написани в съответствие със спецификацията. Вие няма да се отнасяме към гостите bespontovschina?
С необходимото старание можете да научите как да пишете валидно след няколко седмици. Ще трябва да се потите, но ако не страдате от лудост, тогава ще запомните завинаги как трябва да бъде и как не.
Да се заемем с - главата на документа.
Сега нека разгледаме по-отблизо секцията. Също така обикновено се нарича глава (заглавие) на документа.
Спомняме си нашата схема:
§2.1 Глава: обща информация
Главата на документа трябва да започва веднага след тага и да завършва преди тага (началото на тялото на документа). Позицията не е избрана случайно и носи известно семантично натоварване. Разделът обикновено съдържа следната информация:
Заглавие на документа или ;
Език на документа и информация за кодиране: повече за това по-късно;
Информация за включените стилови таблици и скриптове;
Описания на характеристиките на документа за търсещи ботове;
Адреси на rss\rdf\atom потоци, специфични за страницата;
Списъкът далеч не е пълен, но за да започнете да разбирате, това е напълно достатъчно.
Тук си струва да обърнете внимание на няколко точки:
Ред и групиране на етикети;
Опции за свързване на външни Java скриптове и CSS.
§2.2 Позициониране на заглавието спрямо кодирането
Да се заемем с поръчката. Много често има грешка при позиционирането на заглавието на документа.
Не става въпрос само за безопасност. Ако заглавието е на първо място, винаги има шанс браузърът да се опита да определи кодирането на самия документ.
Страхотно, сега браузърът ще може да прочете заглавието на документа и да го покаже правилно в интерфейса си, а нападателите ще получат допълнителна порция хемороиди при опит за XSS-включване (вид атака чрез включване на Java Scripts в кода на страницата; разделена на активна и пасивна).
§2.2.1 Текущи езикови кодировки
Сега относно кодировките. Няма да разглеждаме екзотични опции, в нашия случай са достатъчни две:
UTF-8 е най-често срещаното кодиране в интернет. Внедрява представянето на Unicode. Съвместим с 8-битово кодиране на текст.
Windows-1251 - Поддържа почти всички български типографски знаци. Създаден е на базата на кодировки, използвани в ранните "самоизработени" кракове на Windows през 1990-1991 г.
Тук си струва да се отбележи, че най-добрият вариант е utf-8, което W3C препоръчва. Въпреки това, не трябва да се фокусирате само върху препоръките на консорциума - първоначалното внимание трябва да се обърне на препоръката на вашата CMS. Например Data Life Engine (DLE) упорито използва само Windows кодиране от дълго време. Можете дори да опитате да го смените с друг, но резултатът ще ви разстрои: на екрана ще видите нечетлива бъркотия от въпросителни знаци или диаманти с въпросителни знаци вътре, характерни за грешки при четене.
Защо е така? Всичко е по-интересно, отколкото изглежда на пръв поглед. Всъщност преди браузъраще получи страницата и ще прочете декларираното кодиране в своята „глава“, информацията се прехвърля от базата данни в определено кодиране, обработва се от сървъра в определено кодиране и дори се дава на браузъра в определено кодиране! В идеалния случай всички тези стъпки трябва да са синхронни.
Също така си струва да се отбележи, че размерите на файловете в Windows и Unicode ще се различават. По правило разликата практически не се забелязва при документи на английски език. За български в UTF-8 размера на файла ще е по-голям отколкото за windows-1251.
§2.3 Включване на CSS каскадни стилови таблици и Java скриптове
Редът на свързване на CSS (каскадни стилови таблици, в съвременния уеб дизайн, целият визуален дизайн на сайта се съхранява в css файла) критично влияе върху реда на прилагане на правилата за дизайн на HTML елементи. Това означава, че последният включен CSS файл ще има предимство пред предишните.
T . О. става реално различните страници да прилагат своите правила за дизайн - просто свържете коригиращия файл към желаната страница последен.
Пример за свързване на библиотеката Jquery и плъгин към нея:
След това ще се запознаем с видовете оформление.
§3. Видове оформление - таблично и блоково
Сега нека поговорим за методите на оформление, които са актуални днес. Тук можем да разграничим 2-3 направления:
Табличен – структурата на сайта се определя от таблици, редове и колони: , , , .
Блок - поддръжката на съдържание или wireframe се основава на елементи.
Комбиниран - един вид симбиоза от маси и блокове.
§3.1 Таблично оформление
По правило начинаещите наборчици са първите, които овладяват табличното оформление. Това е отчасти защото те правят сайтове на безплатен хостинг с конструктори, отчасти защотопо-логичен и изисква по-малко познания по CSS. Аз няма да направя изключение - започнах с маси.
Това, което е типично за табличното оформление, е разхвърляният код и практическата липса на стилове, поставени във външен файл. Ще има повече тагове и като се има предвид, че за визуалния дизайн на таблицата всеки таг има около седем прикачени параметъра (ширина, височина, граница, cellpadding, cellpacing, align, valign и т.н.), лесно е да си представим колко време ще отнеме оформлението и какъв огромен размер ще бъде само рамката.
Масите са доста капризни. Като пропуснете един таг или не затворите само една колона, рискувате да прекарате много време в търсене на причината за плаващия дизайн. Допълнително неудобство ще бъде, когато се опитвате да коригирате или промените нещо.
О, обаче, на някои места просто не можете без маси. Намерете поне един форум в мрежата, отворен на блокове. Въпреки че това е реално, но използването на таблици за оформление на форуми е най-рационалният вариант.
§3.2 Оформление на блока
Но днес правенето на блокове е актуално не само в името на модата, това е показател за професионализъм. Сред предимствата може да се отбележи компактният код, относителната простота на влагане, скоростта на разработка и редактиране. Минус - изисква се познаване на CSS.
Когато подреждате блокове, можете да си играете с позиционирането толкова умно, колкото искате. Това ви позволява да преместите важна текстова информация за търсачките по-близо до горната част на страницата.
§3.3 Комбинирано оформление
Това оформление предполага наличието както на таблици, така и на блокове. Правилото тук е просто: "Таблици в divs, възможно най-малко таблици."
§3.4 Същност на оформлението
Не забравяйте, че основната същност на оформлението е, беше и ще бъде максимално отразяване на оформлението на сайта, както е замислено от дизайнера или уеб администратора. Понякога можетепозволете си известна небрежност в полза на красотата или функционалността. Валидността не е панацея - тя е аксиома за качество, която трябва да се спазва. Написано е не с вила по водата и не с „Васка” на оградата.
Тъй като консорциумът W3C определя стандартите и ритъма, нашият бизнес е да следваме спецификацията. Никой няма да бъде по-зле.
Споделете връзка към тази страница в: