Напевно, ви стикалися з таким поняттям як HTML-код. Чули від знайомих, бачили в меню свого браузера тощо. Але що це таке? Спробуймо з'ясувати, що це за код і з яких елементів він складається.
Основні відомості
Почнемо з визначення. HTML-код – розмітка будь-якої веб-сторінки, яка виконана за допомогою мови HTML.
Цей код складається з тегів, завдяки яким браузер визначає, як виглядає та чи інша сторінка. Структура його поділяється на дві частини: head - заголовок документа, в якому прописується назва сторінки, а також інформація про сам документ, і body - тіло документа, в якому задаються параметри сторінки.
Щоб створити більш-менш пристойну веб-сторінку, написану з нуля, слід вивчити теги, що використовуються цією мовою, їх параметри, а також знати коди кольорів HTML.
Теги
Тег – елемент мови HTML. З його допомогою можна задавати шрифт, колір, розмір тексту, вставляти в нього таблиці та картинки, форматувати, створювати заголовки, посилання, а також розфарбовувати сторінку.
Теги завжди укладені в кутові дужки.<>і саме це відрізняє їх від основного тексту, який і виводиться на сторінку під час перегляду. Бувають вони двох видів - парні та одиночні.
Парні складаються з тега, що відкриває, і закриває, при цьому в останньому після лівої кутової дужки стоїть прямий сленш. Наприклад: текст.
Між двома тегами знаходиться текст, таблиця, картинка або інший елемент, який відображається на веб-сторінці.
Поодинокі складаються з одного тега і містять у собі прямого слеша. Наприклад:
.
Теги можуть мати параметри, які можна задати, використовуючи спеціальні коди для HTML.
Також зазначимо, що для більшості символів: собачки, дужок, більше чи одно, менше чи одно та багатьох інших – існує спеціальна таблиця, в якій прописані коди даних знаків. Цей код починається з амперсанта, після якого може йти або буквене мнемонічне його позначення, або знак решітки з тризначним кодом символу. Наприкінці обов'язково ставиться крапка з комою.
Основні теги
Ми розібралися, тепер спробуємо перерахувати основні теги, які можуть бути корисні якщо не при створенні власних веб-сторінок, то при оформленні текстів.
- < body>- містить основні параметри документа, такі як посилань, поля та інші;
- < p>- позначає абзац;
- < b>- Виділяє текст жирним;
- < i>- курсив;
- < u>- Наголошує текст;
- < s>- Перекреслює текст;
- < sup>- Задає текст як верхній індекс;
- < sub>- нижній індекс;
- < font>- Задає параметри шрифту: розмір, шрифт, колір;
- < div>- за його допомогою ви можете вирівняти текст;
- < h>- Тег заголовків;
- < a>- за його допомогою задаються посилання;
- < table>- допомагає вставити до документа таблиці, з ним пов'язані теги< tr>(рядок) та< td>(комірка).
Поодинокі:
- одиночний, переносить текст, наступний після нього, на нову сторінку;
- З його допомогою можна вставити в текст горизонтальну межу.
Варто зазначити, що теги зазвичай прописуються з нового рядка. Робиться це для зручності не тільки самого верстальника, а й тих, хто переглядатиме коди HTML.
Параметри тегів
Ми вже розглянули основні теги, які вам бажано знати. Звичайно, ми перерахували далеко не всі, але навіть цього мінімуму може вистачити для створення перших веб-сторінок.
Але мало знати одні теги, ще потрібно вивчити параметри, які можна задати. У цій статті ми зробимо лише їх короткий огляд, опишемо найчастіше вживані. Побачити їх ви зможете, відкривши будь-який HTML-код.
Не будемо також розписувати, для якого тегу цей параметр підходить, оскільки багато з них використовуються в більшості команд веб-розмітки:
- face - задає вигляд шрифту;
- size - задає розмір;
- color – задає колір;
- align – вирівнювання;
- name – ім'я;
- href - за допомогою даного параметра задається адреса посилання;
- alt – альтернативний текст;
- width – ширина;
- height – висота;
- background – фоновий малюнок;
- bgcolor - тло.
Це далеко не всі параметри, ми перерахували лише найбільш уживані та відомі.
Після параметра ставиться знак рівності, а потім у лапках прописується його значення. Радимо вам при розробці сайтів та сторінок використовувати спеціальні підручники або посібники, щоб не тільки знати основні параметри, а й правильно їх задавати.
Таблиця кольорів
Отже, з основними тегами та їх параметрами ми розібралися, тепер розглянемо коди кольорів HTML. Саме з їх допомогою можна задавати забарвлення тексту, сторінки або окремих її елементів.
Початківцям веб-майстрам слід знати, що є спеціальні таблиці кольорів, у яких даються коди кожного відтінку. Є лише 16 базових кольорів, які можна задавати не лише за допомогою таблиці, але й просто вказуючи їхню назву англійською мовою. Також до них можна додавати слова світло-і темно, задаючи потрібний відтінок.
Також є яка налічує 216 різноманітних відтіків.
Зауважимо, що користуватися таблицями набагато зручніше. У них дається шістнадцятковий код кольору. При цьому ви відразу можете побачити даний відтінок. Кожен код починається зі знака решітки, за ним слідує три пари знаків, що характеризують інтенсивність червоного, зеленого та синього.
Даний код достатньо скопіювати і підставити параметри потрібного вам тега.
Як подивитися код сторінки
Якщо ви зацікавилися створенням веб-сторінок, то вам напевно буде цікаво подивитися HTML-код сайту, який вам подобається, або того, який ви відвідуєте досить часто.
Але як це зробити? Є два способи, досить прості та зрозумілі. Перший – відкрити потрібну вам сторінку і натиснути клавіші Ctrl+U. У новому вікні з'явиться вихідний код сторінки, який ви зможете переглянути та вивчити.
Другий спосіб – натиснути ліву кнопку мишки та вибрати в пункт «Вихідний код». Але все ж таки рекомендуємо вам скористатися першим способом, так як застосування гарячих клавіш набагато простіше і зручніше.
Зазначимо, що, читаючи код, ви також зможете переглядати коментарі до нього, що прописуються в тезі «Коментар», який має такий вигляд:. При цьому сам коментар пишеться після знака оклику. У браузері він не відображається. А пишеться, в основному, для того, щоб інші програмісти та веб-дизайнери змогли зрозуміти, що за блок інформації знаходиться нижче, навіщо було вказано той чи інший шматочок коду.
Висновки
Писати коди на HTML не так складно, як здається на перший погляд. Особливо якщо ви невибагливі і хочете створювати простенькі сайти, електронні підручники на основі HTML тощо. Вивчення основних тегів та принципу розмітки не триватиме багато часу. Вам вистачить навіть кілька днів, щоб почати створювати власні проекти.
Зазначимо, що якщо ви вирішили вивчати цю мову розмітки, будьте уважні. Більшість проблем виникає саме через неуважність: незакриті парні теги, неправильно прописані параметри, друкарські помилки - все це загрожує обернутися помилкою, яку ви можете досить довго шукати. Але загалом вивчати HTML-розмітку сторінок досить цікаво.
Чули про html? Або, можливо, чули про html сторінки в Інтернеті? Насправді все просто. HTML – це, спрощено кажучи, одна з мов програмування, і не найскладніша з них.
HTML – скорочення від HyperText Markup Language, що перекладається як мова гіпертекстової розмітки.
Зміст:
Використовується HTML для того, щоб сторінки в Інтернеті виглядали саме такими, якими Ви їх усі знаєте:
- красиво оформлені тексти,
- виділені жирно або курсивом,
- просто чорного кольору або різнокольорові,
- з активними посиланнями на інші сторінки сайту або блогу,
- з , відео, аудіо та ще багатьма іншими цікавими фішечками.
По суті, html - це виворот сторінок багатьох сайтів. Часто їхнє красиве оформлення створюється за допомогою мови розмітки html. Інакше це ще називають створення сторінок за допомогою html верстки.
Сайти можуть створюватися і іншими мовами програмування, наприклад, мовою php.
Вчений із Британії Тім Бернерс Лі розробив мову html у 1986-1991 роках у Швейцарії. Насправді html дозволяє створювати прості, але при цьому красиві документи. Вже пізніше в html були додані мультимедійні можливості (відео тощо) та підтримка роботи з гіпертекстом (для створення гіперпосилань).
Для роботи з html були створені всім відомі програми-браузери, вони ж, такі як:
- Mozilla Firefox (Мозилла Фаєрфокс),
- Internet Explorer (Інтернет Експлорер),
- Google Chrome (Гугл Хром),
- Opera (Опера),
- Яндекс (Yandex) браузер,
- Safari (Сафарі) та
- інші.
Спочатку основна функція браузера полягала саме в інтерпретації коду HTML та виведенні візуального результату на екран монітора користувача.
Що таке html сторінка?
Документи, файли, сторінки, створені мовою html, мають розширення виду.html або.htm. Наприклад, html-сторінка (або html-файл, або html-документ) може мати назву виду:
- тест.html,
- html,
- html або
- назва.html.
Строго кажучи, тест.html це ім'я файлу (або ім'я сторінки), де
- тест – ім'я файлу, а
- .html - розширення імені файлу (або розширення імені сторінки), яке зазвичай просто називають "розширення".
Нині найпоширенішим варіантом замість слова "розширення" стало слово "формат". Тому вираз "формат html" означає, що файл (або сторінка) написаний мовою html і ім'я такого файлу має розширення html. Значить,
файл c іменем тест.html має формат html.
За промовчанням операційна система Windows приховує розширення файлів (тобто формати файлів). Програмісти зробили це "не зі зла", а для того, щоб уберегти користувача від бездумної зміни розширень файлів. Можна зробити так, щоб за промовчанням розширення файлів були відкриті. У Windows 7 для цього:
- клацаємо по кнопці Пуск,
- відкриваємо Панель управління,
- знаходимо Параметри папок,
- відкриваємо вкладку Вид, прокручуємо в самий низ і
- прибираємо галочку навпроти опції «Приховувати розширення для зареєстрованих типів файлів»,
- тиснемо "ОК".
Мал. 1. Відкриваємо всі розширення файлів Якщо зараз Ви піднімете очі вгору і подивіться в адресний рядок свого браузера, то побачите там ім'я сторінки, яку зараз читаєте, а в кінці імені стоїть.html. Це приклад html сторінки блогу, яка розміщена в Інтернеті. Зазвичай у блогу (у сайту) багато html сторінок. Наприклад, кожна стаття на цьому блозі є окремою сторінкою html.
В Інтернеті також зустрічаються сайти-односторінки, що складаються лише з однієї html сторінки. Наприклад, це може бути
- інтернет-візитка людини чи фірми, або
- сторінка, що продає через Інтернет будь-який товар чи послугу.
Мова HTML постійно розвивається і сьогодні існує кілька його версій, починаючи від HTML 2.0 від 22 вересня 1995 року і закінчуючи останньою версією мови HTML 5 від 28 жовтня 2014 року. У вересні 2016 року планується випуск HTML 5.1.
Що таке HTML теги?
HTML – це мова розмітки документів за допомогою тегів. Теги полягають у трикутних дужках.< >”. Теги можуть бути парними та непарними.
- Наприклад, тег "b", укладений у трикутні дужки, робить текст жирним
текст, виділений жирним
В результаті вийде так: текст, виділений жирним
- А тег "i" робить текст курсивним.
текст, виділений курсивом
В результаті отримаємо: текст, виділений курсивом
- Є ще тег для перекладу рядка "br".
- За допомогою тега "a href" виділяють гіперпосилання.
- Тег для заголовка документа . Це тег, який відкриває документ. Він є парним у тому сенсі, що для нього обов'язково потрібен закриваючий тег зі слішем..
- Після заголовка йде основна частина, яка знаходиться між тегом, що відкриває та закриваючим тегом
. Цей тег, як і тег head, є парним: його потрібно відкрити і не забути закрити.
У парних тегах закриваючий тег зі слішем необхідний з тієї причини, що він скасовує (точніше, коректно завершує) дію тега, що відкриває.
Тегів HTML існує багато, в Інтернеті можна легко знайти підручники HTML.
Як створити html файл
Створити самостійно html сторінку (або html файл) на своєму комп'ютері та запустити свій витвір у браузері дуже просто.
1) Відкриваємо Блокнот (простий текстовий редактор, що входить до складу Windows). Його можна знайти на своєму комп'ютері, ввівши в рядок Пошук запит: Блокнот.
2) Копіюємо та вставляємо в Блокнот наступний текст:
Вітання! Це моя перша сторінка HTML.
Другий рядок, ура!
3) Важливий момент, без якого html файл не працюватиме: у Блокноті зберігаємо файл суворо (!) у форматі html, як показано на скріншоті. Файл можна зберегти на Робочому столі на своєму комп'ютері.
Мал. 2. Звертаємо увагу на Тип файлу та зберігаємо файл у форматі html 1 на рис. 2 – Клікаємо «Робочий стіл», щоб зберегти html файл.
2 на рис. 3 – Відкриваємо меню, що випадає, навпроти «Тип файлу».
3 – У цьому меню вибираємо «Всі файли».
4 - вводимо будь-яке ім'я (у мене 001) і після точки обов'язково (!) вводимо html.
5 на рис. 2 - тиснемо "Зберегти".
4) На робочому столі знаходимо файл 001.html:
Мал. 3. Html файл на робочому століУ мене браузер за промовчанням є Google Chrome, тому значок у файлу має вигляд значка цього браузера. Якщо буде інший браузер за промовчанням, файл 001.html матиме інший значок.
Клацаємо по файлу (рис. 3) 2 рази мишкою і в результаті бачимо у браузері свою першу сторінку на html:
Мал. 4. Перевірка, як виглядає html сторінка у браузері Таким чином, у нас вийшла локальна сторінка html у тому сенсі, що вона доступна тільки з вашого локального комп'ютера. Щоб сторінка була доступна іншим, потрібно завантажити її в Інтернет. Точніше, розмістити, який доступний завжди: 24/7/365 (24 години на добу, 7 днів на тиждень, весь рік). Тоді таку сторінку зможе побачити кожний користувач Інтернету.
Так що html досить цікава мова, і якщо в майбутньому Ви думаєте створювати та вести власний сайт чи блог, то бажано знати хоча б мінімальний набір тегів, які використовуються у мові html.
За появу HTML сучасний світ має дякувати одній вченій Європейській раді з ядерних досліджень (Conseil Européen pour la Recherche Nucléaire, CERN). Звати цього вченого Тімоті Джон Бернерс-Лі. Перша версія HTML створювалася з метою форматування наукових документів. Саме структурне форматування без елементів опису колірних схем, параметрів шрифту тощо. Таким чином, спочатку HTML дозволяв виділяти в тексті заголовки, абзаци, списки та подібні до них структурні елементи. Результат обробки або “відтворення” HTML не повинен був залежати від технічних особливостей апаратних засобів його візуалізації, оскільки не містив параметрів цієї візуалізації. Згодом така особливість мови розмітки гіпертексту була частково втрачена.
Отже, поява перших версій HTML відносять до 1986 року, а 1991 року HTML було суттєво доопрацьовано і став використовуватися саме передачі гіпертексту просторами всесвітньої павутини. Говорять, що всесвітньо відома абревіатура HTML, що розшифровується як Hyper Text Markup Language (мова розмітки гіпертексту) з'явилася якраз на початку 90-х років минулого століття. А тепер невеликий екскурс у родовід мов розмітки. Перша версія мови розмітки гіпертексту HTML була створена на основі стандарту узагальненої мови розмітки SGML (Standard Generalized Markup Language), який певною мірою можна вважати прообразом мови розмітки даних, що розширюється (eXtensible Markup Language). Стандарт XML у наш час набув величезної популярності завдяки великій кількості своїх розширень, що використовуються в комп'ютерних технологіях. Щоб зовсім заплутати читача, відразу додам, що згодом на основі XML була розроблена мова розмітки гіпертексту XHTML (Extensible Hypertext Markup Language), що повторює за своєю суттю HTML. В результаті ми маємо абревіатури SGML, HTML, XML і XHTML, і необхідно зрозуміти хто з них хто. Насправді все просто: SGML – це не що інше, як набір правил, на основі яких можна будувати будь-які мови розмітки. HTML і є однією з цих мов - додаток SGML. Іншими словами, SGML визначає те, як мають виглядати елементи розмітки, а HTML - які саме мають бути елементи і як вони повинні інтерпретуватися браузерами. XHTML, своєю чергою, є додатком XML, а сам XML ні що інше, як спрощений варіант SGML. , незважаючи на те, що дуже зовні схожі, мають суттєві приховані відмінності, які, здебільшого, полягають у принципі їх обробки.
Тепер повернемось до історії розвитку HTML. Отже, до 1994 року HTML як і використовувався лише структурної розмітки даних, хоча у його складі вже з'явилися теги виділення тексту жирним чи курсивом. У тому ж 1994 року створюється організація W3C (World Wide Web Consortium) – Консорціум всесвітньої павутини, яку очолює, що цілком логічно, той самий Тім Бернерс-Лі, і 1995 року виходить рекомендація HTML 2.0. Творці HTML вже тоді розуміли, що з часом їх дітище з мови статичної розмітки тексту еволюціонує в основний інструмент створення динамічних інтернет ресурсів. Головним доповненням HTML 2.0 стала поява у складі мови форм з наборами елементів управління, які повинні були використовуватися для введення користувачем параметрів HTTP запитів.
Після виходу другої версії відразу розпочалася робота над наступним поколінням HTML. У 1997 році виходить рекомендація HTML 3.2, яка доповнила мову розмітки таблицями, кадрами, зображеннями та іншими важливими тегами. Але найголовнішим досягненням 3-ї версії є те, що її автори знову повернулися до проблеми візуалізації розмітки в браузері, згадали про те, що HTML повинен розмічати лише структуру документа і не повинен містити в собі параметри графічних стилів відображення елементів у браузері. Результатом їх робіт над HTML 3.2 стала поява самостійної мови CSS (Cascading Style Sheets) - каскадних таблиць стилів, код якого можна тепер підключати до коду розмітки HTML і тим самим налаштовувати зовнішній вигляд сторінки.
До виходу 4-ї версії HTML в 1997 році співробітники W3C позбавили своє дітище тих непотрібних елементів, які з появою CSS стали застарілими і компрометували ідею відділення розмітки структури від параметризації представлення. Але через такі дрібниці ніхто не став би городити нову версію. Основне досягнення рекомендацій HTML 4.0 – поява об'єктної моделі сторінки (Document Object Model, DOM), елементами якої тепер можна було маніпулювати за допомогою скриптових мов програмування, що виконуються браузерами. Найпопулярнішою мовою програмування є JavaScript. HTML плюс DOM плюс JavaScript дорівнює Dynamic HTML або просто DHTML, який ознаменував прорив у веб-дизайні. Тепер елементи завантаженої веб-сторінки могли змінювати свій зовнішній вигляд у відповідь на дії користувача, а також додавати нові та видаляти наявні елементи. У 24.12.1999 виходить остання редакція 4-ї версії мови розмітки гіпертексту - HTML 4.01.
Версія HTML5 досі ще не отримала статусу офіційних рекомендацій W3C, але вже зараз зрозуміло, що автори HTML продовжують працювати у напрямку розробки вимог до підтримки об'єктної моделі документа та інтерпретації JavaScript. Хоча HTML5 і отримає ряд нових тегів, але більшість рекомендацій все ж таки стосується поведінки браузера в контексті роботи DHTML: з'явиться вбудована підтримка функцій перетягування елементів (drag-and-drop), можливість малювати на віртуальному полотні (canvas), керувати переглядом історії, обмінюватися повідомленнями між сторінками, зберігати контекст виконання та багато іншого. Є надія, що з виходом нових рекомендацій HTML проблеми відсутності кросбраузерності, коли один і той же JavaScript код виконується під керуванням різних браузерів по-різному, поступово зникатимуть. Адже тенденція визначати вимоги до роботи з об'єктною моделлю та JavaScript буде зберігатися, а розробники браузерів будуть зобов'язані (якщо хочуть, щоб їх програмними продуктами користувалися) дотримуватись цих вимог.
Вихід HTML5 заплановано на 2014 рік. Можливо, на той час W3C розробить окремі рекомендації щодо програмування на JavaScript, а HTML з часом знову стане виключно мовою розмітки структури документа. Незважаючи на те, що сьогодні ще тільки 2012 рік, багато хто вже зараз підтримується найбільш популярними браузерами. Багато чого, що доводилося веб-дизайнерам раніше робити самостійно (той же drag-and-drop), з виходом HTML5 підтримуватиметься на рівні браузера, і такий перебіг подій не може не радувати. Залишається сподіватися, що тенденція збережеться.
Почну, мабуть, з початку.
HTML мова за своєю суттю не є мовою програмування. вона є мовою розмітки гіпертекстових документів. Іншими словами, він відповідає за розміщення в документі Ваших текстів, малюнків, таблиць.. призначених для життя в мережі Інтернет. Змусити його порахувати, скільки буде двічі по два неможливо, у ньому немає логічних функцій, зате красиво і головне легко викласти інформацію про те, що двічі по два буде чотири - це запросто. Читається ця мова за допомогою знайомих Вам програм, іменованих браузерами (браузерами), які "знають" стандартні команди html мови, і "пережовуючи" їх виводять на монітор комп'ютера документи в тому вигляді, в якому хоче представити їх веб-майстр - упорядник документа.
Тепер про команди – їх називають дескрипторами, але частіше – тегами.
Повернемося до нашої першої сторінки.. Отже ми написали:
Привіт світ!!!
Так ось те, що написано між<…>- називають тегами вони не видно читачеві, який заглянув на Вашу сторінку, зате добре видно браузеру, який натрапив на тег розуміє його як сигнал до того, що далі буде документ, який необхідно прочитати і вивести на монітор у потрібному вигляді. а ось тег говорить про те, що документ закінчився і від нього, тобто браузера, більше нічого не потрібно і він може відпочивати з чистою совістю.
То що ми написали? та як це читає браузер?
Думки браузера:
- початок документа.. знову роботи привалило.- дивимося словничок англійської перекладаємо "голова" …в голові моєї тирси не біда!! ... тут вказується основна службова інформація про документ.. ну і що вони там хочуть від мене?
- ага і в голові крім назви більше ніяких безглуздих думок не тримаємо.
- "тіло" документа все що написано нижче виставляємо на загальний огляд
Привіт світ!!! - як мило! Дістали вже!!!
- переносимо текст на наступний рядок.. я навіть здогадуюсь, що в ній буде...
Мене звуть (тут Ваше ім'я), це моя перша сторінка!- ну так і є.. нічого пооригінальніше придумати не можуть.
- що все що? Більше нічого не відображати?
- ну ось і кінець!! Не будити, не кантувати, при пожежі виносити першою!!
Ось так приблизно і відбувається читання нашої сторінки. Як бачите браузер досить норовливий тип, тому команди йому потрібно подавати чіткі і ясні, інакше він свариться.
1) Необхідно раз і назавжди запам'ятати що якщо є тег, що відкриває <…> то обов'язково має бути і закриваючий
Хоча є і винятки як, наприклад, у нас тег
- він закриття не вимагає тому що говорить лише про те, що слід писати з нового рядка. До речі спробуйте додати ще пару трійку таких же перед рядком "Мене звуть.." і Ви побачите, що в результаті вона помітно опустилася вниз.
2) Усі документи повинні мати такий шаблон коду:
- початок документа- початок голови
- закриття голови
- початок тіла
- закриття тіла
- кінець документа
Ці теги є обов'язковими! Писати їх необхідно завжди для кожної нової сторінки, і лише так! Не намагайтеся перевернути все з ніг на голову.
3) Про порядок:
Відкриваючий та закриваючий тег за типом<…> являє собою свого роду ємність, ящик в який можуть складатися інші теги - менші скриньки.. отже, згідно з логікою документ повинен виглядати так:
<Тег "большой ящик"><Тег "ящик средний">
<Тег "ящик маленький">
зміст
Якщо писати, наприклад, так:
<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
зміст
То вийде біліберда, яка в голові не вкладається, "великий" вже закритий, а з нього "стирчить" "маленький", який замкнений у "середньому", а "зміст" розсипався скрізь. Таке навіть людині важко уявити, що вже там про браузер говорити.. Чітко структуруйте код Вашої сторінки інакше нічого працювати не буде.
Ну ось ми навчилися писати простий текст, початок покладено! у наступному розділі я розповім про те, що з ним можна зробити.
При написанні сайту створіть папку в будь-якому зручному місці на Вашому жорсткому диску, називайте як завгодно, аби зрозуміло було.. в цю папку зберігаєте Ваші сторінки, присвоюючи їм осмислені імена.. варіанти типу ааа.html, 123.html приведуть до безладдя плутанини… На даному етапі ця рада не видасться слушною, але надалі це значно полегшить Вашу працю. Уявіть наприклад хоча б 20-30 таких файлів назви яких потрібно пам'ятати, щоб зв'язати їх перехресними посиланнями. Порядок, перш за все!
При написанні коду раджу дотримуватися "хорошої манери листа", тобто писати теги "драбинкою" у міру вкладеності одного тега в інший. З часом Ви зрозумієте, що читати код написаний ось так:
Привіт світ!!!
Мене звуть Карлсон, це моя перша сторінка!
Значно легше, ніж так:
Привіт світ!!!
Мене звуть Карлсон, це моя перша сторінка!
І вже тим більше, ніж ось так:
Мене звуть Карлсон, це моя перша сторінка!
Хоч це і справа звички .. все ж таки краще звикнути писати "розбірливо".
Всім привіт!. Другий урок ми присвятимо питанню – що таке HTML та як з ним працювати. У ньому ви дізнаєтеся про особливості найпопулярнішої мови веб-програмування та наочно зрозумієте її головну суть.
Від того як ви його засвоїте вам буде легше рухатися вперед і тоді ви зможете легко (хоча ні, попрацювати все-таки доведеться) взятися за підкорення більш складних мов створення веб-сайтів, наприклад того ж PHP. Тож давайте приступимо до справи.
Що таке Html
HTML (hypertext markup language) - у звичайному житті мова гіпертекстової розмітки. Мова стандартної розмітки інтернет документів у Всесвітньому павутинні. Це одна з найпопулярніших мов створення сайтів. Він же вважається найлегшим у плані завантаження у браузерах.
У ньому немає жодних складних «замутів» як у PHP, який перш ніж вивести сторінку в браузері, спочатку робить запит до бази даних MySql, а потім лише виводить вміст користувачеві. Довгі словесні прелюдії про те, як він створювався розповідати не буду, бо довго й не цікаво.
За всіма цими моментами велика Вікіпедія вам на допомогу. Ми хочемо навчитися швидко створювати сайти, адже так? Чудово! Тоді давайте рухатися далі і осягати всі тонкощі цієї веб науки.
Основи мови HTML. Поняття тега
Без знання твердої бази нікуди не дінешся, «мат.часть» («фундамент» будь-якого предмета) ще ніхто не скасовував. І ми не будемо відступати від традицій і правил.
Основи мови HTML складають теги, а якщо бути більш точним, то набір тегів. Вони позначаються таким чином<тег>. Теги завжди парні і зображаються так
<тег>.
< тег> < / тег> . |
Кожен з них виконує певну функцію для відображення в браузерах.
Одні виводять на екран картинку, інші посилання, треті відповідають за абзаци, четверті роблять таблицю тощо. У них ми можемо писати будь-який текст. Я люблю їх називати контейнерами для наочності, так би мовити. Але існують також одинарні, їх ми вивчимо в наступних уроках.
І ще усвідомте собі один важливий момент. У цій мові діє принцип Парето, тобто як і в будь-якій сфері життя, діяльності, та будь-де, існує правило 80/20.
Про що це каже? Це говорить нам, що 20% (у нашому випадку це html) мови роблять 80% основної роботи. Логіка в тому, що всі теги вивчати не обов'язково, оскільки багато з них просто не використовуються або використовуються дуже рідко. Так що в наших уроках ми наголошуємо на найчастіших і найважливіших. І з цим ви справилися чудово!
Структура HTML документа
Структура будь-якого html документа виглядає так
< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" > < title >Документбезназви< / title > < / head > < body > < / body > < / html > |
Тепер давайте детальніше розпишемо кожен пункт:
Що таке Doctype та його значення
Елемент doctype використовується для вказівки типу нашої веб-сторінки. Це так зване оголошення типу документа або Document Type Declaration.
Цей тег повинен завжди знаходитись на першому місці на кожній сторінці. Він є ключовим компонентом веб-сторінок, які претендують на відповідність стандартам: без нього ваш код і не пройдуть перевірку валідатором.
Валідатор веб-документів – це комп'ютерна програма, яка перевіряє відповідність будь-якого документа, потоку даних, або фрагмента коду певному формату, перевіряє синтаксичну коректність документа або файлу (за даними Вікіпедії).
Виділяють кілька значень Doctype:
- Strict (суворий)
- Transitional (перехідний)
- Frameset (з кадрами)
Я використовую другий варіант. З ним найзручніше працювати, оскільки не обмежує розробника. У читача виникає плутанина, то в чому їхня різниця і який найкраще використовувати?
Поясню в чому їхня різниця. Transitional версія не має суворої відповідності стандартам W3C валідації (або російською, перевірки), тобто браузер однаково відображатиме вміст веб документа, навіть якщо в ньому присутні застарілі, не рекомендовані й інші нестандартні варіації коду. А ось Strict версія точно дотримується всіх стандартів, тобто на практиці, якщо ви десь у коді забули поставити відповідний символ (наприклад слеш /), то при перевірці вам буде дано попередження.
Ось як виглядає веб-документ, що використовує strict версію:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml"> < head > < title >Сувора відповідність стандартам мови< / title > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < / head > < body > < p > . . . < / p > < / body > < / html > |
Я ж раджу використовувати другий варіант і не паритися, тому що він найзручніший. Тепер ми розглянемо інші складові нашої сторінки.
— або «головний» тег, у ньому розташовуються найважливіші теги, які пояснюють браузеру, що потрібно проводити на сторінці та які механізми запускати. Він визначає веб-документ та його вміст. У нього часто виносять різні скрипти, які запускають різні фішки на сторінці і там знаходиться важливий «контейнер» для SEO розкрутки – тег
