Головна HTML Як правильно верстати на HTML
Як правильно верстати на HTML

Будь-яка робота, а тим більше верстка, повинна бути виконана акуратно, тому що переробляти верстку надалі буде важче, тим більше, якщо створюється вона для популярного і корпаративного сайту. Що значить правильно верстати на html і css? І що необхідно робити, щоб стати професійним верстальщиком?

Переглядаючи різні сайти в Інтернеті, ми не дивимося в код HTML. Ну не беремо в розрахунок верстальщиків, яким цікаво подивитися на чужу роботу. Але досить буває тільки поглянути на html код, щоб скласти враження про самих творців сайту. Код HTML сторінок - це як дзеркало вмінь веб-майстра, який займався створенням сайту.

Заглянувши в код можна легко дізнатися про те, як зроблена сама сторінка: програмкою для створення сайтів пачками або руками html-верстальщика. Програма не має людської логіки і не помітить елементарних помилок, до того ж засмічуючи все своїми коментарями, непотрібними тегами і конструкціями. А псевдо "майстру" до цього немає справи, адже в його браузері все виглядає добре, а те, що браузерів існує безліч його не цікавить.

Створення мінімалістичного (чим менше коду в сторінці, тим краще для подальшої розкрутки сайту в пошуковиках), акуратного і працює у всіх браузерах - це своєрідне, але мистецтво. Особливо це помітно, коли ви створюєте сайт не для себе, а для роботодавця, який розбирається в html.

Зустрічаються сайти з дуже складною структурою, в яких робота верстальщика займає найбільше часу за весь період створення сайту. Приміром, складна вкладеність шарів, абсолютна позиціювання спільно з JavaScript кодом робить html верстку одним з найскладніших занять, без досвіду в яких складно нормально працювати і заробляти.

Щоб ваш код сторінки виглядав гідно, акуратно, вам було легко в ньому орієнтуватися, то уважно вивчіть нижчеприведені пункти і дотримуватися їх при написанні HTML:

* Писати html теги великими прописними літерами є неправильним (TABLE, BODY, IMG) - це перша ознака неручной роботи і в такому коді важко орієнтуватися, так як більшість коду в Інтернеті все-таки написано малими літерами (table, body, img) це є стандартом і весь html код, написаний малими літерами визнається html-валідатори невалідним!

* Атрибути завжди записуйте в лапках (напр., align = "right"), що додасть вашому коду акуратність і сумісність з мовою XML.

* Присвоюючи яке-небудь значення (ширини, висоти) в пікселях, не забувайте це вказати, тобто width = "5px". Наприклад, height = 23 буде помилкою, пріавльно писати height = "23%";

* Є теги, в яких немає закриваючого тегу (img, hr, br). У таких випадках треба закривати одиночний тег слешер, напр. <br />

* Зайві коментарі, якими програми засмічують код, не підуть на користь вашого сайту, а от ваші власні коментарі допоможуть розібратися через деякий час набагато швидше. Тим більше, якщо сайтом стане займатися інша людина;

* Намагайтеся не залишати стилі і JavaScript код в сторінці. Виводьте їх в окремі файли - так простіше що-небудь поміняти і код сторінки зменшиться (іноді дуже помітно);

* У будь-якого символу є своя заміна. У кожному довіднику по HTML є список цих підстановок. Бажано використовувати їх, що б не було проблем з переглядом в деяких браузерах.

Найчастіше при створенні сайту найбільше сил і часу приділяється візуальному дизайну сайту, з точки зору дизайнера, це правильно - адже саме його побачать рядові відвідувачі сайту. І часто економія на коді сайту може зіграти ведмежу послугу: збільшуються витрати на розкручування сайту (у тому числі і час), починають зявлятися проблеми з кросбраузерністю (зовнішнім виглядом у різних браузерах) сайту і в кінці-кінців, сайт доводитися переверстувати.

Як бачите, скупий (або ледачий) платить двічі, а то й тричі! Через таке ставлення, в інтернеті безліч сайтів з чудовим зовнішнім дизайном мають жахливий код, зроблений на швидку руку в WYSIWYG - програмі, осовоєнній не повністю. Не повторюйте помилок таких розробників, верстайте акуратно і красиво, виділяйте структуру коду, і завжди пам'ятайте, що мова HTML - основа сайту.

 

Коментарі  

 
0 #22 Dianna 04.05.2018 10:44
I'm extremely inspired with your writing abilities as neatly as with the
layout in your weblog. Is this a paid theme or did you customize it yourself?
Either way stay up the nice high quality writing, it is rare to see a nice weblog like this one these days..


my webpage: chocolate
Цитувати
 
 
0 #21 loveawake.ru 25.03.2018 18:24
https://loveawake.ru/znakomstva/ - Знакомства Дагенхам. Сайт знакомств Дагенхам бесплатно, без регистрации, для серьезных отношений.
Цитувати
 
 
0 #20 Reuben 13.03.2018 13:34
Thankfulness to my father who stated to me on the topic
of this weblog, this blog is actually awesome.

Also visit my webpage: online kasino ilmaiseksi bonus
Цитувати
 
 
0 #19 Johnnyhap 08.03.2018 02:07
Who is your favourite stranger things character? vote here: http://www.qckclk.club/?u=1rMtL :)
Цитувати
 
 
0 #18 Rolandcibia 02.02.2018 09:48
Всем привет! класный у вас сайт!
Нашел интересную базу кино: Лучшие ужасы 2017 бесплатно
Тут: http://kinoserialtv.net/news/9242-premera-novogo-dublirovannogo-treylera-finalnyh-golodnyh-igr.html Премьера нового дублированного трейлера финальных «Голодных игр»
Тут: http://kinoserialtv.net/news/7935-dlya-spin-offa-zvezdnyh-voyn-nashli-horoshego-parnya.html
http://kinoserialtv.net/uzhasy/ 2017 список лучшие ужасы
Лучшие аниме смотреть онлайн
Лучшая фантастика список 2017 Лучшая фантастика список 2017
Цитувати
 
 
0 #17 Kerstin 25.01.2018 17:28
Howdy aare using Wordppress for your blog platform? I'm new to the blog world but I'm tryhing to get started and crreate my own.
Do you require any html coding expertise to maoe your own blog?
Any help would bee greatlky appreciated!

my homepage ... Antalya Escort
Bayan
Цитувати
 
 
0 #16 Octavio 16.01.2018 08:44
Hello would you mind sharing which blog platform you're using?
I'm looking to start my own blog iin the near future but I'm havig a hard time choosing between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask iis because your design and style seems different then most bloogs and I'm looking for something completely unique.

P.S My apologies for being off-topic but I had to ask!

nilai mata kuliah pendas ut

Feel free to visit my webpage ... info beasiswa 2016 untuk mahasiswa
Цитувати
 
 
0 #15 Betsey 31.12.2017 15:37 Цитувати
 
 
0 #14 Vernita 02.12.2017 11:50
Fastidious answer back in return of this query with genuine arguments and telling everything regarding that.


My page - Wesołych świąt
żYczenia bożego narodzenia
Цитувати
 
 
0 #13 Kellye 01.12.2017 08:36
film rano
karno senyummu adalah tangisku

narji cagur keluar
dari inbox

http://tinyurl.com/y8en9lyj dygta karena aku sayang kamu
http://tinyurl.com/ycadlxbs lala karmela film
foto denada
abimana aryasatya keturunan tionghoa

my web-site; dewi lestari agama buddha
Цитувати
 

Додати коментар


Захисний код
Оновити

© 2008-2013 PHPist