Зверстати всіх наверх: що таке верстка і html розмітка?
Вона застосовується для верстки веб-документів і є по суті інтернаціональна.
Для того, щоб розміщувати певним чином елементи на веб-сторінці, - або просто верстати, - потрібно володіти мовою розмітки.
Для більш точного уявлення про верстку досить розібрати процес створення будь-якого сайту на складові:
- спочатку розробляється дизайн-макет - промальовувалися елементи майбутнього інтерфейсу;
- для того, щоб сайт почав «жити власним життям» верстальники прописують спеціальний код, використовуючи той самий мову html. З його допомогою браузер розпізнає сторінку, і все кнопочки, іконки та інші елементи дизайн-макету стають розмітки і в повній мірі виконують задані їм функції. За допомогою верстки PSD-файл переводиться в код, з яким далі працюють.
Номінальний середній сайт складається з декількох HTML-сторінок: звичайні сторінки, домашні, контакти і так далі - для кожної буде окремий документ HTML. Будь-яка така сторінка створюється за допомогою набору тегів (їх ще називають блоками). Ці теги формують певну ієрархію, яка розбиває контент за розділами.
На сторінці веб-документа, як і в книзі, можна виділити абзаци, заголовки і інші елементи за допомогою html тегів - спеціальних команд для браузера, які підказують, як повинен відображатися документ.
Принцип побудови тегів приблизно такий: <ім'я тега>.
Як правило, теги в коді HTML становлять парами. Відкривається і закривається тег, і все, що знаходиться між ними, потрапляє під вплив тега.
Приклад відкривається тега: <p>
Приклад закривається тега: </p>
У тегах розміщують і атрибути - це спеціальні команди, які розширюють дію тега.
Приклад атрибута:<Тег атрибут1 = "значення">
Існує два типи верстки веб-документів: таблична і блокова.
таблична:громіздка, масивна за своєю структурою, але є і плюси - вона досить проста у виконанні і відображається практично ідентично в будь-якому браузері. Однак, щоб внести якісь зміни в табличну верстку потрібно витратити значну кількість часу, вивчаючи її структуру. Сьогодні все менше фахівців використовують такий тип розмітки.
Приклад HTML коду табличної верстки:
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr colspan=”2″>
<Td class = "header" colspan = "2"> Шапка </ td>
</tr>
<Td class = "content"> Контент </ td>
<Td class = "sidebar"> Меню </ td>
{{ </tr>}}
{{ <tr colspan=”2″>}}
<Td class = "footer" colspan = "2"> Підвал </ td>
{{ </tr>}}
</table>
блокова:вона вважається більш гнучкою і застосовується в верстці значно частіше. При такого різновиду розмітки для побудови каркаса використовуються теги <div>. Основним плюсом блочного типу є поділ оформлення та вмісту, тобто концепція семантичної верстки.
прикладHTML кодублокової верстки:
<Div id = "header"> Шапка </ div>
<div id=”wrapper”>
<Div id = "content"> Контент </ div>
<Div id = "sidebar"> Меню </ div>
</div>
<Div id = "footer"> Підвал </ div>
Базис успішної роботи фахівця з верстки: адаптивний дизайн, юзабіліті і низькоякісний продукт:
- адаптивний дизайн робить сайт зручним для використання з мобільних додатків;
- юзабіліті на увазі під собою простоту і логічність при створенні інтерфейсу - користувач повинен практично інтуїтивно розуміти, що і де знаходиться на ресурсі;
- низькоякісний продукт добре структурований і оптимізований.
Зазвичай при роботі з масштабними проектами верстальники займаються безпосередньо створенням коду html, а всі інші завдання діляться між іншими членами команди.
По суті, верстальник - головна сполучна ланка між дизайнером і розробником. Від його роботи багато в чому залежить те, як створений дизайн-проект «оживе», коли програміст додасть в нього логіку.
Стати дизайнером: все за, проти і як.
На користь вибору цієї професії сьогодні говорить як мінімум високий попит на фахівців з верстки на ринку праці. Зарплата верстальників варіюється, але її середнє значення по Україні тримається на позначці в 590 $.
Як правило, крім знання мови html верстальщикам потрібно розбиратися і в основах css.
МоваCSS(Каскадні таблиці стилів) розширює можливості html і займається по суті «красою» - з його допомогою задається фон, колір, шрифти сайту і інші візуальні деталі. Мови CSS і HTML діють в єдиній зв'язці при створенні веб-документів.
Наприклад, для того, щоб задати HTML абзацу шрифт, можна написати таке правило:
{{p{}}
font·family: times new roman, arial, helvetica;
{{}}}
Це означає, що ми ставимо команду використовувати для тексту шрифт times new roman, а якщо він з якоїсь причини недоступний, то наступні за списком перераховані шрифти: arial, helvetica.
У професіїверстальникрядвагомих плюсів:
- можливість як працювати віддалено, так і досить швидко знайти роботу в штаті IT-компанії;
- перспективність: інтернет і технології розвиваються, щодня з'являються все нові і нові сайти і веб-продукти, і необхідність в верстці буде тільки зростати;
- можливість масштабувати свою кар'єру в IT і з часом піти у frontend-розробку;
- поріг входження в професію верстальника вважається відносно невисоким, а це значить, що навчитися потрібним навичкам при належному завзятості можливо за досить короткий час.
До мінусів можна віднести тільки те, що робота вимагає посидючості, але це за великим рахунком теж навик, який можна розвинути.
Основи HTML деякі новачки намагаються осягати самостійно, але процес піде набагато швидше, якщо вибрати для навчання спеціалізованікурсиHTML.
Курс "HTML5 + CSS3 + JS"
Бажаєш отримати навчання від Микити Лукашова?
На курсі навчимося:
- Верстати сайти та створювати інтерфейси
- Освоїмо основи Photoshop для перекладу дизайну в код
- Розширимо знання у розробці на HTML, CSS та JavaScript
- Поповнимо ваше портфоліо!
Відмінним варіантом для навчання стануть онлайн-курси. Вони зручні тим, що ви можете вибирати для занять той час, який вам підходить найбільше. Такий формат універсальний для вивчення HTML з нуля:
- все уроки добре структуровані і дозволяють зрозуміти, що таке основа HTML;
- крім мови розмітки студенти також вивчають CSS і знайомляться з Java Script;
- студентам курсу не потрібно володіти якимись спеціальними знаннями - всю необхідну інформацію вони отримують безпосередньо під час занять;
- після завершення онлайн-навчання, у студентів залишається доступ до матеріалів курсу, а це значить, що з часом можна «освіжити» інформацію в пам'яті.
Онлайн-курс HTMLвід WEZOM підійде і тим, хто збирається робити перші кроки в сфері IT, так і тим, хто займається наповненням сайтів текстовим і візуальним контентом.
