Html: основи для початківців

HTML - мова розмітки гіпертексту, який зробив інтернет таким, яким ми його знаємо і любимо. Саме завдяки цій чудовій інструменту сайти виглядають красиво і сучасно, а також забезпечується зручність їх використання. Мова HTML просто компонує елементи веб-сторінки в зручний для користувача варіант. Його робота можна порівняти з тим, що роблять текстові редактори типу MS Word або OpenOffice. Вони перетворюють безлику масу букв в документ, в якому є абзаци, жирний текст, курсив, таблиці і навіть зображення. Приблизно те ж саме робить мову HTML, з тією лише різницею, що його документи відображаються в браузері, так і можливості цього інструменту набагато ширше, ніж у текстового редактора. Для розмітки використовуються теги - спеціальні команди, що описують структуру веб-сторінки. Вони укладені в кутові дужки - lt; тегgt ;, щоб браузер міг відрізнити їх від загальної маси тексту. Далі ми розглянемо основи HTML для початківців.

візуальні редактори

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

Всі ці програми створюють багато непотрібних тегів, які роблять кінцевий варіант сторінки громіздким і неоптимальним. Звичайно, в наше століття швидкісного інтернету це має менше значення, ніж раніше, але є ряд причин, за якими лаконічний і грамотно написаний сайт виходить більш практичним, ніж його побратим, створений в візуальному редакторі. Веб-сторінка, зроблена в такій програмі, буде погано оброблятися пошуковими роботами, так як для них важливий кожен кілобайт коду, а громіздкий і нелогічний код з купою семантичних помилок чи доведеться їм до смаку. Крім цього, редактори часто відстають від часу, стаючи неактуальними, а витрачати ресурси на їх розвиток недоцільно, так як жоден професіонал не користується цими продуктами. Тому кожен, хто хоче працювати в сфері створення сайтів, повинен знати основи HTML.

Теги

Як згадувалося вище, теги описують браузеру структуру веб-сторінки. Більшість з них мають відкриває і закриває тег, але далеко не все. наприклад, , де замість точок знаходиться вміст. Перший з них показує, де починається тег, а другий закриває його. Всередині можуть перебувати інші елементи розмітки сторінки, вони можуть вкладатися один в одного подібно матрьошці. Тут важливо своєчасно закривати теги, щоб сторінка відображалася коректно.

Зустрічаються також поодинокі теги, які не потрібно закривати. У них вміст знаходиться усередині, так само як і атрибути. Атрибут може бути прописаний для більшості HTML-тегів і задає властивості елемента. Позначається він в відкриваючому тезі і виглядає приблизно так: атрибут = «...», де замість точок знаходиться значення атрибута. Знання тегів є першим і найважливішим кроком для освоєння HTML. Основи цього мистецтва також мають на увазі розуміння структури веб-сторінки.

структура документа

Кожен документ HTML має відповідне розширення, наприклад, Index.html. Так браузер зможе зрозуміти, з чим він має справу, і правильно відобразить сторінку. Всі файли, які використовуються для створення сайту, бажано зберігати в одній директорії, що в подальшому істотно полегшить вам життя. Основи мови розмітки гіпертексту HTML припускають чітке розуміння структури документа. Починається він з тега , звітує браузеру версію HTML, яка використовується в цьому документі. На даний момент актуальна п`ята версія мови, так що тут не потрібно нічого вигадувати, можна сміливо вставляти наведений вище тег в початок будь-якої сторінки.

Відео: HTML для початківців

Потім йдуть основні парні структури, складові «скелет» сайту. Перший тег, в який вкладено всі інші - .... Все, що знаходиться за його межами, що не розпізнається браузером як веб-сторінка, так що він відкриває документ і закриває його. Цей тег є обов`язковим для будь-якого документа. У ньому також містяться ще кілька обов`язкових тегів, які будуть розглянуті нижче.

Head

усередині тега ... міститься інформація технічного характеру, яка не буде відображатися на сторінці, але, тим не менш, є важливою частиною документа HTML. Основи сайту закладаються саме в цьому місці, тут вибирається кодування і вводиться назва сторінки. Воно міститься всередині обов`язкового тега . Показує назви у верхній частині браузера, де також можна розмістити невелику іконку, що характеризує вміст сторінки. Бажано відразу вказати кодування документа для його коректного відображення. Це можна зробити за допомогою тега . Метатеги надають дані про структуру сторінки і зазвичай розташовуються усередині head.

Link

Знання основ HTML також передбачає використання каскадних стилів оформлення, або css. У них задаються властивості елементів, які будуть відображені на сторінці. Сучасний підхід до цього завдання передбачає винесення таких характеристик, як колір, висота і місце розташування елемента, у зовнішній файл для більшої зручності. Для підключення css-файлу використовується тег . У готовому вигляді це виглядає приблизно ось так: , де href вказує на розташування файлу, а type - на його тип.

Body

Саме в цій частині HTML-документа створюється видима частина сторінки. Все, що робиться всередині «тіла», буде показано браузером. В використовується величезна кількість тегів HTML. Основи - це форматування тексту, робота з посиланнями і найпростіші інструменти для структурування веб-сторінки. Щоб приступити до роботи в HTML, досить знати основні теги і вміти ними користуватися. Нижче наведені найпопулярніші з них:

• - застосовується для виділення підрядка, на яку поширюватиметься особливий стиль, описаний в css;
• - створює посилання на веб-страніце- адреса переходу задається атрибутом href;
• - один з найпопулярніших тегів сучасності-кожен, хто вирішив вивчити основи мови HTMLl, повинен приділити йому особливу увагу, оскільки це блоковий елемент, на основі якого зроблена левова частка сучасних сайтів (параметри для блоків
  задаються в css, і всередині цього тега можуть розташовуватися інші блоки);

• - виділяє абзац з тексту-вміст абзацу знаходиться між відкриває і закриває тегами;

• - нумерований список, елементи якого полягають в парний тег
• ;

- маркований список, в якому, так само як і в нумерованому, елементи позначаються тегом
• ;

• -

  - заголовки документа (цифра позначає рівень заголовка, тобто

  - головний заголовок, а наступні варіанти є його підзаголовками, до речі, заголовки рівнів

  ,

  майже неможливо зустріти на просторах інтернету), також важливо пам`ятати, що на сторінці може бути лише один заголовок

  ;

• - жирний текст;
• - курсив;
• - вставка картинки на інтернет сторінку (це одиничний тег, йому не потрібно закриває, але в ньому обов`язково потрібно вказати атрибут alt, в якому вказується текст для зображення);

Це далеко не всі теги, необхідні для створення власної веб-сторінки, але їх цілком достатньо, щоб закласти основи HTML для початківців.

CSS

Розвиток мови HTML призвело до того, що кожен тег обзавівся масою атрибутів, та й вимоги до зовнішнього вигляду веб-сторінок істотно зросли. Код став громіздким і незручним, складно було прочитати його, не те що адаптувати або змінити. До того ж, якщо на вашому сайті десять сторінок, на яких багато заголовків, зазначених зеленим кольором, а вам раптом захотілося зробити їх червоними, то доведеться попітніти, змінюючи кожен вручну. З появою каскадних таблиць стилів цей процес став простим і логічним, та й HTML-код став куди більш читабельним.

застосування CSS

Для створення веб-сторінок необхідно знати основи HTML і CSS, так як зараз без знання каскадних таблиць стилів робити в цій сфері нічого. У них задаються атрибути для будь-якого елемента, що поширюються на весь документ. Таким чином, можна задати колір відразу для всіх елементів

або , написавши лише одне правило. З огляду на сучасні вимоги до зовнішнього вигляду веб-сторінок, використання каскадних таблиць стилів є обов`язковим.

Відео: HTML5 уроки з нуля для початківців!

Для того щоб підключити файл css до документа, існує тег link. Трохи вище був описаний принцип його використання, але він не є єдиним варіантом об`єднання всіх стилів в одному місці. Є ще тег

javascript

Нерідко людина, яка вирішила зайнятися розробкою веб-сторінок, розуміє, що для його завдань недостатньо тих коштів, які пропонує HTML. Основи дозволять створити гарну сторінку, але що робити, якщо раптом знадобилося зробити її інтерактивної? Для цих цілей існує унікальний сценарний мову програмування, який прекрасно взаємодіє з HTML. Називається він javascript, так як замислювався як молодший брат популярного мови Java. Сьогодні ці мови обзавелися істотними відмінностями, і прірва між ними тільки росте.

Відео: Курс HTML і CSS - Як створити ваш перший сайт

javascript може розширити можливості HTML, він дозволяє створювати і редагувати теги. Також за допомогою цього чудового інструменту можна працювати з Cokie, завантажувати дані з сервера без перезавантаження сторінки, зробити сайт більш інтерактивним, ніж дозволяють можливості HTML. Є у цієї мови і обмеження, які пов`язані з безпекою. Якщо javascript використовується не на серверній частині, то він буде виконуватися в умовах, які обмежують його можливості, щоб зловмисники не могли задіяти шкідливий код на будь-якому комп`ютері.

Редактори

Основи HTML для новачка припускають знання про найбільш зручних і практичних програмах для створення веб-сторінок. Як було написано вище, візуальні редактори, такі як Dreamweaver і йому подібні, не підходять для цих цілей. Так що ж, писати теги в звичайному блокноті? Цей варіант також сумнівний, так як стандартний блокнот не має ніякими спеціальними інструментами для верстки. З цим завданням може непогано впоратися Notepad ++. Великий плюс цього продукту в тому, що він має відкритий код і поширюється абсолютно безкоштовно. У ньому є зручна підсвічування синтаксису і автоматичне закривання тегів. Notepad ++ також надає широкий вибір мов інтерфейсу, а його можливості легко розширюються за допомогою численних доповнень.

Sublime Text 3 - програма, схожа на Notepad ++, але поширюється на платній основі. Саме вона підкорила серця більшості розробників. Sublime Text 3 ідеально підходить для javascript, CSS і HTML. Основи роботи з нею доведеться вивчати самостійно, але воно того варте. У ній закладені воістину безмежні можливості для тонкої настройки, що дозволяє максимально підігнати програму під свої потреби.

Основи HTML і CSS для початківців

Як бачите, вивчити мистецтво створення веб-сторінок не так вже й складно, як здається на перший погляд. Всього кілька місяців практичних занять перетворять вас з боязкого користувача в початківця розробника. Навчитися верстці набагато простіше, ніж освоїти якусь мову програмування або Linux. Насправді тегів HTML не так вже й багато, важливо зрозуміти практичний аспект їх застосування.

Не зайвим в цій справі буде навик роботи в Adobe Photoshop. Ця програма дозволяє працювати з фотографіями, картинками і іншими графічними елементами веб-сторінки. На даний момент саме "фотошоп" найкраще справляється з такими завданнями, конкурентів у нього небагато. Для тих, кому цей продукт компанії Adobe припав не до вподоби, є Lightroom, GIMP, Illustrator та інші програми зі схожими функціями.

Що дає знання HTML

Навички створення веб-сторінок дуже актуальні сьогодні, так як інтернет розширюється не по днях, а по годинах. Кожне підприємство, будь-який, навіть самий маленький магазинчик, майстерні та спортивні клуби - все хочуть мати власний сайт. І звичайно ж, для цього їм знадобиться розробник, який володіє CSS і HTML. Основи просто освоїти, після чого справу за практикою. Так як технології верстки постійно розвиваються, то фронтенд-розробники завжди будуть затребувані. Той, хто вирішить присвятити себе цій цікавою галузі, ніколи не залишиться без роботи.