9 Грешки, които не трябва да правите, когато създавате уеб страница

реклама

Създаването на уеб страница с HTML и CSS е доста прям Как да си направим уебсайт: за начинаещиДнес ще ви насоча през процеса на изработка на цялостен уебсайт от нулата. Не се притеснявайте, ако това звучи трудно. Ще ви преведа през всяка стъпка от пътя. Прочетете още . Но е лесно да правите грешки и има доста неща, за които може да не мислите. През повечето време тези малки грешки няма да имат голяма полза.

Но в дългосрочен план те могат да направят живота ви по-труден. Тези девет грешки са лесни за правене, но ако ги отстраните по-рано, отколкото по-късно, страницата ви ще изглежда по-добре, ще бъде по-лесна за поддръжка и ще функционира както искате.

1. Inline Styling

Едно от страхотните неща за HTML и CSS е, че можете да форматирате всеки ред текст - всяка една дума, наистина - когато пожелаете. Но това не означава, че трябва да се възползвате от тази способност.

Ето пример за вграден стил, който можете да използвате, за да направите абзац по-голям от околните абзаци и да го подчертаете с различен цвят:

Вашият текст тук.

Това дава абзаца a CSS стил Научете HTML и CSS с тези стъпка по стъпка уроциЛюбопитни ли сте за HTML, CSS и JavaScript? Ако смятате, че имате умение да научите как да създавате уеб сайтове от нулата - ето няколко страхотни ръководства стъпка по стъпка, които си струва да опитате. Прочетете още което завършва със заключението на параграфа. Изглежда доста ефикасно, нали?

Има един голям проблем с него: ако искате да промените много неща в уебсайта си, ще трябва да отидете и да намерите всеки екземпляр от вграден стил и да го промените. Ако имате 100 различни абзаца със 120% размер на текста и син цвят, ще трябва да намерите всички 100 и да ги промените на всичко, което решите, че е по-добър формат.

Вместо това използвайте таблица за стилове CSS. Ето стила, който използвате за горния параграф:

p.важно {размер: 120%; цвят: син; }

Сега, вместо да използвате вградения стил, можете просто да използвате този ред:

Вашият текст тук.

И вашият параграф ще бъде голям и син. И когато направите промяна в „важния“ клас във вашия CSS, те всички ще се променят.

2. Таблици за оформление

Хората използваха таблици за форматиране на оформлението на страниците доста редовно. Използвайки таблица, можете да организирате елементите на страницата си в колони и редове, както и да приложите различни подравнения и стилове. Дори едноклетъчните таблици ще бъдат използвани за правилното подравняване на съдържанието. Но това използване на таблици като цяло е намръщено.

Подобно на стиловете вграждане, използването на CSS вместо HTML таблици за оформление е по-лесно да се поддържа. Отново, ако искате да направите промени в десетки или стотици страници, е много по-лесно да редактирате таблицата си със стилове, отколкото да преглеждате всяка страница и ощипвате таблиците.

В допълнение към по-лесната поддръжка, четенето на CSS оформления обикновено е малко по-лесно от четенето на HTML таблици. Особено ако в крайна сметка влагате много нива на таблици една в друга. Може да не е много лесно да се върнете напред и назад между вашия HTML документ и вашия стилов лист, за да видите какво точно се случва, но съдържанието на вашата страница ще бъде по-ясно и по-лесно за редактиране.

Използването на таблици тук и там за разделяне на страници в колони не е смъртен грях. Понякога е по-лесно и по-бързо, отколкото да се забърквате с CSS. Но ако правите гигантски, многостепенни таблици, трябва да помислите за преформатиране с CSS.

3. Остарял HTML

Както всеки език, HTML се променя редовно. Официално разпознатите тагове се променят, а някои се оттеглят. Дори ако тези маркери все още работят, най-добре е да ги избягвате.

Например, ако сте свикнали да използвате таг за смели и етикет за курсив, изоставате от времената. и (за „акцент“) сега са стандартните тагове.

, , , , а други също са остарели.

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

4. Вграден JavaScript

Някои уеб страници използват JavaScript за добавете допълнителна функционалност JavaScript и уеб разработка: Използване на модела на обект на документТази статия ще ви запознае със скелета на документа, с който работи JavaScript. Имайки познания за работата на този абстрактен модел на обект на документ, можете да напишете JavaScript, който работи на всяка уеб страница. Прочетете още . Той може да направи уеб страниците интерактивни, да валидира текст при въвеждането му, да добавя анимации, да предоставя отговори на действията на потребителя и т.н. Накратко, това може да направи една страница по-полезна чрез предоставяне на добавено поведение.

Подобно на CSS, можете да добавите вграден JavaScript към вашия HTML. Също като CSS, това обикновено е обезкуражено. Освен че са потенциално по-трудни за поддържане, има още няколко причини, които дават основание за това уверение.

Вграденият JavaScript може да използва по-големи количества честотна лента от скрипт, свързан от различен файл. Процес, наречен минимизация, компресира HTML и CSS, преди да го изпрати на потребител, като изисква по-малка честотна лента през широколентови или мобилни връзки. Вграденият JavaScript обаче не може да бъде смесен. Той също няма да бъде кеширан, докато отделен JavaScript файл мога да се кешира.

Всички тези неща правят вградения JavaScript по-интензивен по честотна лента.

Освен това е по-трудно да отстраните грешки, тъй като можете да използвате JavaScript валидатор за JavaScript файл..., но той няма да работи при вграден скрипт. И отново, това прави по-чист и по-лесно поддържан HTML.

5. Множество H1 тагове

Маркерите за заглавие са страхотни. Те правят страниците по-лесни за преливане, могат да ви дадат SEO тласък и могат да се използват за подчертаване на определени моменти.

Но има шест нива на заглавни тагове за причина. На вашата страница наистина трябва да има само един H1 маркер. И това често е заглавието на страницата (особено в блогове и подобни сайтове). Може да мислите, че поставянето на куп ключови думи в H1 тагове ще направи Google по-голяма вероятността да ги вземе и да класира вашия сайт по-високо в резултатите.

Но това, което наистина прави, е да направи вашата страница по-объркваща и по-трудна за четене. Което ще отмени всички SEO ползи, които може да видите все пак.

Използвайте H2, H3 и останалите маркери на заглавия, за да очертаете по-добре страницата си. Нивото на заглавието трябва да даде на читателя ви представа колко важен е следващият раздел. Ако ги подведете, те ще го знаят и те няма да са щастливи.

6. Skip Image Alts

На всяко изображение може да се даде атрибут „alt“, който показва конкретен ред текст, ако изображението не може да бъде показано. Това може да не изглежда като голяма работа, особено при съвременните браузъри (както на настолни, така и на мобилни устройства), които могат да показват почти всичко.

Но добавянето на alt атрибути е голяма грешка, особено в епохата на постоянно мобилно сърфиране. Мобилните връзки не винаги са страхотни и ако браузърът не може да зареди изображение, вашият читател няма представа какво би трябвало да вижда там. Атрибут alt може да поправи това.

И ако някой използва a екранен четец VoiceOver прави устройствата на Apple по-достъпни от всякогаПрезидентът на Американската фондация на слепите счита, че "Apple направи повече за достъпност от всяка друга компания до момента" - и VoiceOver изигра голяма роля в това. Прочетете още или друга функция за достъпност, този атрибут alt може да бъде всичко, което изваждат от изображението.

Разбира се, има и потенциални ползи за SEO. Търсачките могат да индексират кратки, описателни alt атрибути. Но най-голямата полза тук е подпомагането на вашите читатели.

7. Не затварящи тагове

Има някои HTML тагове, с които можете да се измъкнете, като не се затварят, например

и

. Браузърите знаят, че когато стартирате друг параграф или елемент от списъка, предишният е приключил. Но това не означава, че трябва да прескочите на затварящите тагове.

На първо място, въпреки напредъка в технологията на браузъра, определено има възможност браузърът да показва неправилно съдържанието ви, ако не сте затворили маркерите си. И прилагането на стилове може да доведе до някои непредвидими резултати, като Потребителят на Stack Exchange демонстрира robertc.

Това, което се свежда, е, че браузърите очакват затварящи маркери. Те изобщо не се нуждаят от тях... но определено ще се възползват от правилния HTML код, когато се опитват да покажат вашата страница.

За щастие не е нужно много да затворите маркерите си, особено ако използвате добър HTML редактор.

8. Не включва DOCTYPE

В началото на HTML документи обикновено ще видите декларация DOCTYPE, като тази:

Това е нещо, за което не се говори често, но е важен елемент на страницата ви. Декларацията DOCTYPE казва на браузъра какъв тип HTML използвате. Това му позволява правилно да изобрази HTML.

Ако пропуснете декларацията DOCTYPE, страницата ще се изобрази в „режим на странности“. Това е защитата на съвременния браузър срещу старинни уеб страници. И променя начина, по който се показва вашата страница. Бърз поглед Режим на чудеса на Firefox показва, че промените в чувствителността на регистъра, свойствата на шрифта не се наследяват в таблици, размерите на шрифта се изчисляват по различен начин, а изображенията без алт атрибути понякога се показват неправилно.

Повечето от тези неща са относително незначителни. Но ако искате вашата страница да се показва правилно, трябва да сте сигурни, че на браузъра е активиран пълният му режим на стандарти.

И за да направите това, ви е необходим ДОКТИП. (Ако не сте сигурни какво да използвате, просто използвайте .)

9. Пренебрегване на схемата за маркиране

Маркирането на схемата помага на търсачките да придобият по-добра представа за това какво е на страницата ви. По-конкретно, тази маркировка казва на търсачките какво пишете във всеки раздел.

Например в статия можете да използвате схемата за маркиране, за да кажете на търсачката заглавието, автора, датата, издателя и друга полезна информация за дадена статия.

Има схеми за филми, книги, организации, хора, ресторанти, продукти, места, действия, различни видове на данни, музика, скулптура, резервации, услуги, банкомати, пивоварни и почти всичко останало, което можете да се сетите. Това е доста невероятно.

Определено можете да се измъкнете, без да използвате схемата за маркиране. Вашата страница ще се показва правилно без нея. Вашите читатели дори няма да знаят, че е там. Но има какво да спечелим от включването на тази маркировка. Търсачките ще могат да предоставят много по-подробна, полезна информация за вашата страница, включително богати фрагменти.

И с инструмента за маркиране на схемата на Google, процесът всъщност е доста лесен.

Свикнете с най-добрите практики на HTML

Да превърнем тези навици в навик може да отнеме известно време. А понякога може да ви се струва, че отделяте много допълнително време за нещо, което не ви стига много. Но като се уверите, че вашият HTML и CSS Научете HTML и CSS с тези стъпка по стъпка уроциЛюбопитни ли сте за HTML, CSS и JavaScript? Ако смятате, че имате умение да научите как да създавате уеб сайтове от нулата - ето няколко страхотни ръководства стъпка по стъпка, които си струва да опитате. Прочетете още са добре обзаведени, лесни за работа и поддръжката ще ви спестят много време в дългосрочен план.

Какви други добри навици сте намерили за полезни при създаването на уеб страници? Не сте съгласни с някоя от горепосочените практики? Споделете мислите си в коментарите по-долу!