Як створити WEB-сторінку або знайомство з HTML
- Мова HTML і його теги
- Що таке тег?
- Структура WEB - сторінки. Основні html теги.
- Метадані html сторінки
- Тип HTML документа (doctype)
Привіт, шановні читачі блогу. З цієї статті ми почнемо вивчати основи мови HTML.
Вам швидше за все вже відомо, що основною мовою Internet-а є мова гіпертекстової розмітки HTML (HyperText Markup Language). У цій статті ми дізнаємося базові поняття HTML і навчимося створювати найпростіші WEB-сторінки.
Почнемо з самого головного, розглянемо як працює сама всесвітня павутина - Internet. Для отримання веб-сторінок, ви створюєте файли, написані на мові HTML, і ставите їх на веб-сервер. Після цього будь-який браузер встановлений на пристрої з доступом в Інтернет, будь то комп'ютер, телефон або планшет, може відшукати ваші веб-сторінки.
Веб-сервер - це звичайний комп'ютер зі спеціальним програмним забезпеченням, що має доступ в Інтернет. Він безперервно очікує запитів від браузерів на веб-сторінки, зображення, аудіо- та відео-файли. Отримавши запит на один з таких ресурсів, сервер шукає його і висилає браузеру.
Браузер - це спеціальна програма, призначена для перегляду веб-сайтів, наприклад Internet Explorer. За допомогою браузера ви ходите по сайтам, клацаючи по посиланнях. Будь-який такий клацання змушує браузер зробити запит на html-сторінку web-серверу, отримати відповідь та відобразити цю сторінку в своєму вікні. Саме при відображенні сторінки починає працювати мову HTML, він повідомляє браузеру все про структуру і вміст web-сторінки. За допомогою команд - тегів, HTML вказує браузеру, де починаються абзаци тексту, яка частина тексту є заголовком і вказує куди вставляти таблиці, і навіть картинки. А теги це слова в кутових дужках, наприклад <p>, <h1>, <table>.
Терміново потрібен інтернет-магазин, а часу на вивчення HTML, CSS, PHP і інших технологій немає. Тоді просто можете орендувати інтернет магазин з повністю реалізованим функціоналом і оптимізацією під пошукові системи.
Мова HTML і його теги
Перша версія мови HTML з'явилася ще в 1992 році. На момент 2013 року розробляється специфікація нової версії HTML під номером 5. Розробкою даної специфікації займається організація World Wide Web Consortium, або скорочено W3C. Організація W3C займається розробкою і інших Web-стандартів. Ознайомитися з цими стандартами ви можете на їх сайті www.w3.org. До речі, Багато Web-браузери вже підтримують деякі можливості HTML 5.
Пропоную почати вивчення мови HTML відразу з прикладу. Тому давайте створимо нашу першу Web-сторінку. Для створення WEB-сторінок підійде будь-який текстовий редактор. Я пропоную для початку скористатися вбудованим в Windows Блокнотом (Notepad) (взагалі в подальшому для редагування html-коду я раджу використовувати безкоштовний текстовий редактор Notepead ++ ). Знайти його можна: «Пуск> Все програми-> Стандартні-> Блокнот». Давайте створимо сторінку про автомобілі. Отже, відкриємо Блокнот і наберемо в ньому текст:
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8">
<Title> Приклад Web-сторінки </ title>
</ Head>
<Body>
<H1 align = "center"> Сайт про автомобілі. </ H1>
<P> Ласкаво просимо на наш автомобільний сайт. Тут Ви знайдете багато цікавих і корисних статей про <strong> автомобілях </ strong>. На сайті є описи багатьох імпортних і вітчизняних автомобілів. </ P>
</ Body>
</ Html>
Далі збережемо створену web-сторінку в файл з ім'ям index.html. При цьому в діалоговому вікні збереження файлу необхідно задати кодування UTF-8 і укласти ім'я файлу в лапки, інакше Блокнот додасть до його назви розширення txt, і наш файл отримає ім'я index.htm.txt:
Тепер залишилося відкрити створений файл в браузері і подивитися на результат. Для цього можна скористатися поставляється в складі Windows браузером Microsoft Internet Explorer, або будь-яким іншим встановленим на вашому комп'ютері браузером, клацнувши два рази мишкою по файлу index.html або перетягуванням файлу на значок браузера. Відкриваємо і бачимо приблизно такий результат:
Таким чином, ми створили Web-сторінку в Блокноті, хоч і трохи непоказну, але вже містить великий заголовок і абзац тексту, який автоматично розбивається на рядки і містить фрагмент, виділений напівжирним шрифтом.
Що таке тег?
Тепер поговоримо докладніше про структуру сторінки. Розглянемо фрагмент: <h1 align = "center"> Сайт про автомобілі </ h1>. Тут ми бачимо текст, який відображається на сторінці як заголовок, укладений в теги <h1> і </ h1>. Що ж таке тег в html мовою?
Тег HTML - це звичайні слова і символи, укладені в кутові дужки, наприклад <h1>, <p>, <body>. Так тег <h1> є відкриває тегом, тег </ h1> закриває тегом, а текст між ними називається вмістом тега. Також тег <h1> і тег </ h1> називаються парними тегами. Разом відкриває тег плюс вміст плюс закриває тег утворюють елемент html-документа. Бувають ще елементи складаються з одного відкриваючого тега:
Так парний тег <h1> визначає елемент заголовка першого рівня. Всього існує шість рівнів заголовків, це елементи <h1> - <h6>.
Елементи бувають блокові і малі (текстові). Блокові елементи здійснюють структурний форматування сторінки. Блокові елементи завжди відображаються на сторінці з нового рядка і мають відступ від сусідніх елементів. Рядкові елементи здійснюють безпосереднє форматування тексту або логічне форматування. Елемент <h1> є блоковим елементом.
далі йде парний тег <p> , Який створює на HTML-сторінці абзац. Вміст даного тега стане текстом цього абзацу. Елемент <p> також є блоковим елементом і як ми бачимо він починається з нового рядка і між заголовком <h1> і абзацом є відступ.
Усередині абзацу зустрічається парний тег <strong> , Який виводить свій вміст напівжирним шрифтом. Даний тег <strong> вкладений всередину вмісту тега <p>. Це означає, що вміст тега <strong> буде відображатися як частина абзацу. Такі вкладені теги називаються дочірніми, а теги в які вкладені інші теги називаються батьківськими. Таким чином, тег <strong> є дочірнім, а тег <p> - батьківським. Така вкладеність тегів зустрічається в HTML часто-густо.
При вкладенні тегів слід дотримуватися одного правила, порядок проходження закривають тегів повинен бути зворотним порядку проходження відкривають тегів. Тобто теги і їх вміст повинні повністю вкладатися в інші теги. Якщо порушити це правило, то WEB-сторінка може відобразитися неправильно.
До речі, елемент <strong> є рядковим елементом. І як ми бачимо ніяких переносів рядків, ні відступів при відображенні цього елемента не здійснюється. І дуже важливо згадати, за правилами мови html рядкові елементи не можуть мати вкладених тегів.
Ви могли помітити, що відкриває тег <h1> крім назви містить ще якийсь текст: align = "center". Це атрибут тега, який задає його параметри. Кожен атрибут має ім'я, після якого йде знак =, і далі йде його значення взяте в лапки:
У наш конкретному випадку, атрибут align тега <h1> задає вирівнювання тексту. Так значення center вказує браузеру, що вміст тега <h1> необхідно вирівняти по центру.
Атрибути бувають обов'язковими і необов'язковими. Обов'язкові атрибути повинні міститися в теги в обов'язковому порядку. А необов'язкові атрибути можуть бути опущені, тоді вони приймають значення за замовчуванням.
Структура WEB - сторінки. Основні html теги.
Для коректного відображення сторінки в браузері, в html-коді обов'язкова наявність наступних парних тегів: <html>, <head> і <body>.
По-перше весь ваш html-код повинен бути укладений в теги <html> і </ html>. Вони повідомляють браузеру, що сторінка містить html-код.
Крім цього в коді сторінки повинні бути розділи заголовка і тіла документа. Розділ заголовка, або його ще називають шапка, складається з парного тега <head> і його вмісту. В цьому розділі поміщають відомості про параметри сторінки, що не відображаються на екрані і потрібні тільки браузеру. У нашому прикладі розділ заголовка такий:
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8">
<Title> Приклад Web-сторінки </ title>
</ Head>
Тіло документа виділяється за допомогою тегів <body> і </ body>. Сюди поміщається весь контент сторінки, то що буде відображатися в браузері.
Підсумовуючи вищевикладене, будь-яка html-сторінка має наступну структуру:
<Html>
<Head>
...службова інформація...
</ Head>
<Body>
... вміст WEB-сторінки ...
</ Body>
</ Html>
Метадані html сторінки
Службова інформація, яка розташовується в шапці сторінки і задає її параметри, називається метаданими. HTML-теги, які задають метадані, називаються метатегами. У нашій невеликій сторінці метаданими є такі рядки коду:
<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8">
і
<Title> Приклад Web-сторінки </ title>
Перш за все, це тег <title>, який задає назву WEB-сторінки. Ця назва відображається в заголовку вікна WEB-браузера. Крім того вміст тега <title> використовується пошуковими системами для вказівки посилання на даний документ в результатах пошуку за ключовими словами. Тому намагайтеся задавати цікавий заголовок, що містить ключові слова, щоб залучити більше відвідувачів.
Наступний метатег <meta> повідомляє браузеру кодування нашого документа. В даному випадку ми створили нашу web-сторінку в кодуванні utf-8. Інформацію про кодування ми передали браузеру за допомогою атрибута content тега <meta>. Дуже важливо задавати кодування, щоб браузер коректно відображав вміст нашої сторінки. Якщо ви помітили, то тег <meta> не має закриваючого тега. Це так званий одиночний тег, або елемент складається з одного відкриваючого тега. Взагалі за допомогою тега <meta> можна задавати безліч параметрів важливих як для браузера, так і для пошукових систем.
Тип HTML документа (doctype)
Залишилося розглянути один тег нашої першої WEB-сторінки, який знаходиться в самому початку html-коду: <! Doctype html>. Даний тег задає версію мови HTML, на якому написана сторінка, і його версію. Він необхідний, щоб браузер розумів згідно яким стандартом відображати веб-сторінку. Метатегов <doctype> існує кілька видів , І вони різняться в залежності від версії мови, на якому написаний html-код. Так, наш тег <! Doctype html> вказує на версію мови HTML5.
Отже, підіб'ємо підсумки:
1. Практично всі WEB-сторінки, вдають із себе текстовий файл. Створити їх можна за допомогою будь-якого текстового редактора. У даній статті ми навчилися створювати WEB-сторінки за допомогою звичайного Блокнота.
2. HTML - це мова, яка використовується для створення web-сторінок. HTML - це абревіатура HyperText Markup Language (мова гіпертекстової розмітки).
3. WEB-сторінки складаються з html-тегів і їх вмісту. Теги складаються з символів <,> і імені всередині них. Імена тегів можна писати як прописними (великими), так і малими (маленькими) буквами. Між символами <,>, / і іменами тегів, а також всередині імен тегів не допускаються пропуски і переноси рядків. Теги бувають парні і одиночні, а також теги можуть бути вкладеними один в одного.
4. Хто відкриває тег + вміст + закриває тег утворюють елемент. Бувають також елементи складаються з одного відкриваючого тега. У HTML є блокові елементи і малі. Блокові елементи завжди виводяться з нового рядка і мають відступ зверху і знизу від сусідніх елементів. Рядкові елементи здійснюють логічне форматування тексту.
5. Відкривають HTML-теги можуть містити атрибути, які містяться між ім'ям тега і символом> і відокремлюються від імені тега прогалиною. Якщо в тезі кілька атрибутів, то вони відокремлюються один від одного пробілами. Атрибути бувають обов'язкові та необов'язкові.
6. Будь-яка WEB-сторінка повинна містити в собі дві секції: секція заголовків <head> і секція тіла <body>. Ці секції повинні знаходитися всередині тега <html>. Це основні теги html, без яких не обходиться жодна html-сторінка.
7. Спочатку HTML-коду повинен йти метатег <doctype>, який вказує версію мови.
На цьому ми закінчимо знайомитися з основами html. Щоб навчиться застосовувати мову HTML на практиці необхідно вивчити конкретні теги, їх особливості та властивості. Для створення найпростіших веб-сторінок необхідно вивчити наступні питання:
Для того, щоб надати вашим сторінкам барвистості і привабливості вам знадобитися зайнятися більш складним питанням - вивченням CSS . Тому читайте інші мої статті з рубрик HTML і CSS і підписуйтесь на оновлення мого блогу .
На цьому у мене все !!! До зустрічі в наступних постах!
Що таке тег?Що ж таке тег в html мовою?