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

У наступному уроці ми поговоримо про види тегів і їх написання.

Якщо відкрити будь-яку веб-сторінку, то вона міститиме в собі типові елементи, які не змінюються від виду та спрямованості сайту. У прикладі 1 показаний код простого документа, що містить основні елементи.

Приклад 1. Початковий код веб-сторінки

Заголовок

Перший абзац.

Другий абзац.

Скопіюйте вміст цього прикладу та збережіть його в папці c:\www\ під ім'ям example2.html. Після цього запустіть браузер та відкрийте файл через пункт меню Файл > Відкрити файл(Ctrl+O). У діалоговому вікні вибору документа вкажіть файл example2.html. У браузері відкриється веб-сторінка, показана на мал. 1.

Рис. 1. Результат прикладу у браузері

Елемент(Жарг. Доктайп) призначений для вказівки типу поточного документа - DTD (document type definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, адже HTML існує у кількох версіях – сучасний HTML5 або застарілі HTML4 та XHTML. Щоб браузер «не плутався» і розумів, за яким стандартом відображати веб-сторінку і необхідно в першому рядку коду задавати.

Оскільки ми будемо працювати тільки з HTML5, то нам буде потрібно лише один короткий і сучасний доктайп.

Ми згадували, що імена елементів можна писати маленькими та великими літерами. Доце правило теж відноситься і його можна записувати по-різному. Проте традиційно ім'я цього елемента пишеться у верхньому регістрі.

Відкриваючий тег визначає початок HTML-документа, усередині якого зберігається «голова» ( ) та «тіло» документа ( ).

Вміст цього розділу не відображається безпосередньо на сторінці, за винятком елемента

Елемент .

Закриває тегпоказує, що "голова" документа завершена.

«Тіло» документа призначено для розміщення елементів та вмісту веб-сторінки.

Заголовок

HTML пропонує шість текстових заголовків різного рівня, які показують відносну важливість розділу, розташованого після заголовка. Так, елемент

є найважливішим заголовком першого рівня, а елемент

служить позначення заголовка шостого рівня і є найменш значним. За замовчуванням, заголовок першого рівня відображається найбільшим шрифтом жирного зображення, заголовки наступного рівня за розміром менше. Елементи

...

відносяться до блокових елементів, вони завжди починаються з нового рядка, а після них інші елементи відображаються на наступному рядку. Крім того, перед заголовком та після нього браузер додає порожній простір.

Деякий текст можна заховати від показу у браузері, зробивши його коментарем. Хоча такий текст користувач не побачить, він все одно передаватиметься в документі, так що, подивившись його вихідний код, можна виявити приховані нотатки.

9 голосів

Вітаю вас на сторінках Start-Luck блогу. Сьогодні мені хотілося б показати вам, як використовувати код. Писати сайти – цікаве заняття, яке багатьом може здатися складним. Насправді простеньку сторінку можна створити лише за 5 хвилин.

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

Як створити сторінку

Першу сторінку я пропоную вам зробити у блокноті. Найпростішим, що знаходиться в меню «Пуск», є папка «Стандартні». Поки що не потрібно нічого скачувати. Спробуйте користуватися тим, що маєте.

Відкрийте документ.

Вставте в нього цей код.

Файл слід назвати index.html. Закінчення ".html"вказує на розширення файлу. Якщо ви просто введете назву індекс, документ збережеться як текстовий файл і не відкриється браузером.

Я зберігав документ на робочому столі. Тепер потрібно знайти його, натиснути праву кнопку миші та відкрити за допомогою будь-якого браузера. Я оберу Google Chrome.

Ось так виглядає щойно створена мною сторінка. Ваша нічим не відрізнятиметься. Все так само: з картинками та кольоровим шрифтом.

Зараз я докладніше розповім про теги, а поки що давайте просто приберемо із заголовка « center » і вставимо рядок, в якому міститься слово « Color». До речі, я вже писав. Це дуже просто, рекомендую до прочитання.

Ще раз збережіть документ, цього разу можна просто скористатися поєднанням клавіш Ctrl+S, а потім оновіть сторінку у браузері за допомогою кнопки F5

Пам'ятайте, практично будь-який тег повинен відкриватися та закриватися. Тобто десь повинен розташовуватися код зі слішем. В даному випадку він виглядає так: .

Бачите, заголовок став червоним. Також ви можете надати потрібний відтінок будь-якої частини тексту.

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

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

Теги

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

Вона не єдина і я можу запропонувати вам ще кілька, якщо когось зацікавлять альтернативи. Ми ж перейдемо до теоретичної частини.

Основні

Починається і закінчується сторінка з тегів . Вони показують браузеру, що це веб-документ, створений за допомогою HTML.

Далі йде або заголовок. У ній міститься найважливіша інформація про сторінку, у нашому випадку – . Якщо ви ще не знайшли фразу «Моя перша сторінка», яка є у коді, зверніть увагу на саму вкладку, над пошуковим рядком.

Саме теги відповідають за початок і кінець основної інформації про сторінку.

Тег

свідчить про те, що фраза є заголовком. За замовчуванням вона трохи більше основного тексту і виділяється жирним. Якби ми з вами зараз писали не тільки на html, а й створювали CSS-файл, з яким перекликався наш файл, то могли б керувати розмірами, шрифтом і навіть кольором усіх заголовків на сторінці, не прописуючи font style Як ми це робили в прикладі. Хоча про це теж зарано.

До речі, Title та H1 мають свій вплив під час присвоєння вашому сайту місця у пошуковій видачі. Відноситися до них потрібно з великою увагою і не писати всередині аби що. Вони стосуються . Крім h1, є ще й h2, h3,h4.

У цьому ж рядку є той, що відкривається і закривається

. Завдяки цьому елементу можна вирівнювати текст посередині. Якщо цей тег видалити, текст встане праворуч.

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

Картинка

Далі йде тег img , тобто зображення, картинка. Квадратна дужка відкривається, до неї вписується вся основна інформація про зображення, тільки після цього вона закривається. Слід зазначити, що img – це тег, а решта елементів коду, які вписуються всередину, це його атрибути.

Насамперед йде alt , тобто опис. Це також потрібно для оптимізації. Іноді додається ще й title . При наведенні на зображення мишею поруч із курсором з'являється підказка, коли сторінку вже відкрито у браузері.

Можна було завантажити малюнок у папку сайту та прописати до неї шлях, але я пішов простим шляхом. Серед Pixabay я знайшов картинку, відкрив її в новому вікні і вставив посилання.

У тезі src прописується шлях до картинки. Саме він вказує браузеру, що далі потрібно рухатися, щоб знайти потрібне зображення, а в якому напрямку шукати – ви пишете самі.

Форматування тексту

відповідає за надання частини тексту якогось особливого стилю, наприклад, як у разі іншого кольору. style="color:red" показує, що колір буде червоним. Якщо бажаєте жовтий, напишіть yellow, зелений – green. Можна використовувати коди кольорів з фотошопу.

допомагає виділити текст жирним.

---

малює горизонтальну лінію. Він одиночний і використовується лише у закритому вигляді. Якщо ви напишете

---

кілька разів, то отримайте рівно стільки горизонтальних смуг при відкритті сторінки в браузері.

Посилання

вказує браузеру, що далі буде посилання. Ви хочете перенаправити читача на іншу адресу. Цей тег йде з обов'язковим атрибутом href=”адреса” . У лапки вставляється шлях, куди браузер повинен перенести відвідувача сторінки. Після того, як цей тег прописаний, вставляється опис, слово або кілька, при натисканні на яке читача переноситиме далі. Після того як ці умови виконані, можна вставляти другий тег, що закривається .

Після того, як основну частину сторінки написано, ви закриваєте тег body , Оскільки тіло закінчено. І вказуєте на те, що припиняєте сьогодні використовувати html .

Якщо ви хочете більше дізнатися про теги html і навчитися вставляти не тільки картинки, але й відео, створювати кнопки, різні форми, списки, параграфи, то я можу запропонувати вам безкоштовний курс Основи html ». Усього 33 уроки допоможуть вам вийти на новий рівень.

Ще хочу порекомендувати вам відеокурс, який розповідає, як верстаються сайти. Весь процес показано на реальних прикладах, що особливо добре. Курс призначений як для новачків, які ще навіть HTML не знають, так і для тих, хто вже добре знає і HTML, і CSS, проте верстати сайти добре не вміє. Більш повну інформацію Ви можете отримати, перейшовши за посиланням: www.srs.myrusakov.ru/makeup

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

Сьогодні ви зробили багато, адже перший крок найскладніший.

Підписуйтесь на розсилку та групу ВКонтакте , і дізнавайтеся ще: як і навіщо потрібен движок сайту, що таке блокова верстка і модульна сітка, як правильно писати сайти та багато іншого.

До нових зустрічей та удачі!

Придумано безліч мов, але мова HTML належить до особливих і найбільш затребуваних. З ним пов'язано багато інших ключових починань у програмуванні. Багато чого стає доступним, коли у свідомості розробника є знання мови розмітки - HyperText Markup Language (HTML).

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

Загальний опис

Файл HTML - це одна сторінка сайту, хоча з цим можна посперечатися, але те, що один файл складає одну сторінку, спочатку зрозуміло.

Файл HTML починається із заголовка DOCTYPE, в якому зазначено, що тип файлу - HTML. Усі елементи сторінки (теги) вказуються у кутових дужках. Кожна пара («<» и «>») включає один тег HTML. Зазвичай теги HTML парні, тобто на кожен "tag" є "/tag". Обидва полягають у кутові дужки. Є одиночні теги, з них найпопулярніший «br/» - перехід на наступний рядок.

Найбільший тег у файлі - це сам HTML, до якого входять лише два теги: HEAD і BODY. У першому робляться різні описи, вказуються посилання інші потрібні сторінці файли, можуть бути скрипти PHP і JavaScript. У другому записується контент сторінки. Також у вигляді тегів та скриптів.

Проста HTML-сторінка

Приклад створення такої сторінки наведено нижче у статті. Розглянемо його уважно.

Розділ HEAD

Основне призначення – загальний опис сторінки та загальних скриптів, хоча останнє – досить відносне поняття. Зазвичай тут надають істотне значення лише двом речам:

• ключові слова та опис сторінки;
• посилання на інші файли (*.css та *.js).

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

HTML-сторінка має відображається, коли відвідувач підводить мишку до вкладки, де сторінка відкрита. Це важливий момент, оскільки робить сторінку істотно презентабельнішою, простіше сказати, підписаною читабельним текстом.

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

Якщо до скриптів слід підходити, коли знання про HTML зміцняться, то каскадні таблиці стилів слід звернути увагу негайно. У файлах CSS наводяться, зокрема, правила оформлення тегів HTML.

Розділ BODY

Власне, приклад сторінки HTML - і є розділ BODY. Саме тут міститься вся інформація, весь вміст сторінки сайту. Вся інформація подається у вигляді тегів та скриптів, наприклад, вставки JavaScript-коду або шматочків PHP-програм.

Важливо розуміти, що приклад веб-сторінки HTML у браузері і той же приклад у текстовому редакторі, зокрема notepad, це далеко не одне й те саме. У першому випадку маємо готовий HTML-текст, в якому всі скрипти виконані. Наприклад, PHP відпрацював свою частину та сформував замість свого коду у потрібних місцях потрібні теги. JavaScript теж виконав свою місію, хоча про нього ще належить окрема розмова.

HTML – це теги, а не скрипти. Зрештою, у браузері відображається лише контент сторінки, тільки її теги. Ніякого PHP коду там немає.

JavaScript перебуває в особливому положенні, його турбота - обслуговувати сторінку не тільки в момент завантаження (перевантаження), але і в моменти, коли сторінка знаходиться в браузері відвідувача, а той вивчає її.

Простий приклад (лише розділ BODY) наведено нижче.

А у браузері відвідувача він виглядає так, як показано далі.

У коді не було зазначено, як мають виглядати елементи, які вивів браузер. Все видиме оформлення перебуває у правилах CSS. В даному випадку у файлі Mcss/scPhpWordRW.css, на який було посилання (див. перший приклад сторінки HTML).

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

Тут показано, як просто описаний тег scLogo_vDoc, причому цей опис такий, що в нормальному стані тег відображає картинку vDoc-logo.png, а коли над ним знаходиться мишка – відображається vDoc-logo-h.png.

Структура описів HTML

Мова не передбачає будь-якої структури та поняття синтаксису тут дуже відносне. Тут немає змінних, але є безліч можливостей. Принципова основа гіпертексту в тому, що існує елемент (тег), який обов'язково має ім'я.

Ім'я, у разі парного тега, складається з власне імені (tagName) та кутових дужок («<» + tagName +«>»), якщо йдеться про початок тега, і «», якщо записується його кінець.

Приклад сторінки HTML з описом атрибутів наведено нижче в тексті.

Тег може мати атрибути, тоді вони поміщаються через пробіл після імені тега до кутової дужки «>», що закриває. Атрибути, якщо вони мають тег, записуються тільки на його початку. Змістом тега вважається те, що знаходиться між початком тега та його кінцем.

HTML дозволяє описувати блокові та малі елементи. Перші займають певну область у вікні браузера, можуть позиціонуватися абсолютно, тобто в потрібному місці відображення HTML-сторінки, і мати конкретний розмір.

Рядкові елементи в загальному випадку відображаються одним потоком, тобто так, як вказані у файлі сторінки, так і виводяться на екран. На відображення загального потоку можна впливати, коли відбувається завантаження сторінки. На розміщення, видимість та інші властивості блокових елементів можна впливати будь-коли за допомогою JavaScript-коду.

Крім простих елементів, HTML пропонує описувати таблиці та форми. Ці елементи дуже потрібні в «повсякденному сайтобудуванні».

Опис таблиці: теги TABLE, TR, TD

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

Принципова позиція HTML: робити все, що вказано, але нічого, що не зрозуміло. У деяких випадках не настільки важлива кількість колонок у кожному рядку таблиці, але якщо потрібно виконати об'єднання осередків по вертикалі або по горизонталі, доведеться порахувати все дуже уважно.

Приклад сторінки HTML із описом простої таблиці наочно показано у статті.

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

Опис форми: теги FORM, INPUT

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

Приклад сторінки HTML із описом простої форми:

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

Використання HTML

Знати мову гіпертексту – роботи з будь-якої спеціалізації в галузі інтернет-програмування, але якщо необхідно писати програми на PHP або JavaScript, то знати HTML+CSS потрібно досконало.

Мова PHP була позначена в попередньому прикладі. PHP працює на сервері, тому сторінка з цією формою відлетіла з сервера в браузер із заповненими полями. Зокрема, функція TestOnBlur, згадана в тегу INPUT (обробник події onblur), одержала всі параметри як текстових полів.

У браузері працює JavaScript, і щоб правильно спрацювала кнопка відправки даних назад на сервер, тобто конструкція: onclick=jQuery("#to").val("cart"), необхідно мати уявлення не тільки про те, що таке jQuery, але і що таке #to, val, cart. Якщо точніше, необхідно знати основні теги HTML та загальні правила застосування стилів CSS.

Цього цілком достатньо, щоб швидко підняти свою кваліфікацію з будь-якої спеціалізації в галузі інтернет-програмування.

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

У новому стандарті багато що спростилося і тепер базова частина виглядає так:

...

Нові теги HTML5

У HTML5 для структури коду введено кілька нових тегів:

,

Вам також може сподобатися

Як прибрати рожеві текстури ERROR в Garry's Mod

Кракнутий Bandicam (Бандикам) v

Як зареєструватися в бандикамі та отримати серійний номер Завантажити бенді камп російською повну версію