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

Давайте приступимо до практичних дій і прямо зараз створимо свій перший HTML-файл.

Це буде "полігон", який ми будемо наповнювати вмістом, розширювати і експериментувати.

Для тих, хто любить відео:

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

Спосіб 1. Створюємо файл html в програмі «Блокнот».

Відкрийте будь-який текстовий редактор, наприклад, редактор «Блокнот», який входить до складу операційної системи Windows. Знайти цю програму можна через головне меню Пуск -\u003e Всі програми -\u003e Стандартні -\u003e Блокнот.

І зберігаємо текстовий файл з розширенням * .txt.

Тепер потрібно поміняти розширення цього файлу з * .txt на * .html.

Якщо у Вас не відображається розширення файлів, ось замітка:

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

Тільки що ми з вами створили свій перший HTML-файл, який вже можемо заповнювати вмістом.

Аналогічно html-файл створюється за допомогою програми Notepad ++.

Але, користуватися таким способом не завжди буває зручно і, як бачите, це не найшвидший спосіб по створенню html-файлів. Є програми, які дозволяють вирішити цю проблему набагато швидше.

Однією з таких програм є універсальний редактор коду Dreamweaver (я писав про цю програму).

Спосіб 2. Створення файлу HTML в універсальному редакторі коду Dreamweaver.

Після того, як програма завантажитися з'являється наступне вікно вітання:

Все, що потрібно зробити, це вибрати в цьому вікні, в розділі «Створити», файл HTML.

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

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

Тепер, для того, щоб цей файл з'явився на жорсткому диску, його потрібно зберегти. Робиться це через меню «Файл - Зберегти як ...»

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

Аналогічно можна створити файл HTML і в інших програмах, я лише хотів показати загальний зміст, як це робиться.

Домашнє завдання

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

HTML документ - це звичайний текстовий файл c расшіреніем.html, який містить HTML-код. HTML документ інакше ще називають HTML файлом.

Щоб зі звичайного текстового файлу (з расшіреніем.txt) зробити HTML документ, потрібно с.txt на.html.

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

1. Клікнути по ньому два рази лівою кнопкою миші, в цьому випадку HTML документ відкриється в тому браузері, яка була обрана за замовчуванням.
2. Клікнути по ньому ПКМ → навести курсор на відкрити за допомогою ... → вибрати потрібний браузер.

При отриманні HTML документа браузер буде відображати його у вигляді веб-сторінки (веб-сторінка - це те, що відображається у вікні браузера). Розглянемо це на прикладі. Створимо HTML-документ і розташуємо в ньому наступний HTML-код:

Мій перший заголовок

Мій перший абзац

Тепер відкриємо HTML файл браузером. У вікні браузера ми не побачимо відображення самого HTML-коду, тому що він буде інтерпретований для відображення вмісту сторінки в потрібному вигляді. Результат даного коду в вікні браузера:

Щоб відредагувати код HTML документа, натискаємо на нього ПКМ → наводимо курсор на відкрити за допомогою ... → і вибираємо потрібний редактор, якщо в списку немає потрібного редактора, тиснемо Вибрати програму ... і вибираємо потрібний редактор. Деякі редактори (для прикладу візьмемо notepad ++) Можна вибрати прямо в контекстному меню, натиснувши по документу ПКМ і вибравши зверху Edit with Notepad ++ (редагувати за допомогою notepad ++).

Зміна розширення файлу

Windows:

1. У відкритому редакторі (або в звичайному текстовому документі) натискаємо файл → вибираємо зберегти як → внизу в текстовому полі ім'я файлу: напишемо наприклад так: mypage.html → тиснемо зберегти. Все, HTML документ створений.
2. Натискаємо правою кнопкою миші ( ПКМ) На текстовому файлі → вибираємо перейменувати і міняємо розширення с.txt на.html. Щоб скористатися таким способом, нам треба зробити так, щоб за замовчуванням у всіх файлів були доступні їх розширення, робиться це в такий спосіб: відкриваємо Панель управління → вибираємо Параметри папок (в Windows 10 даний пункт називається Параметри провідника) → вкладка Вид → прокручуємо в самий низ і прибираємо галочку на Приховувати розширення для зареєстрованих типів файлів.

І що робити, якщо замість HTML сторінки відображається просто текст?

Дані проблеми найчастіше виникають не через самого користувача, а через операційної системи, що використовується на комп'ютері. При чому тут операційна система? Вся справа в тому, що за замовчуванням операційні системи Windows, зокрема XP і 7, приховують розширення файлів. Звідси і виникають проблеми, при створенні файлів і призначення їм правильного формату.

Я буду пояснювати, на прикладі Windows XP і Windows 7, так як інші не використовував і не знаю, що там, та як.

Отже, для початку включимо відображення розширення файлів.

Якщо використовується Windows XP:

Якщо використовується Windows 7:

Тепер, якщо все зроблено правильно в кінці імені файлів, буде дописано розширення файлу, типу: .txt, .html і т.д. Так буде набагато зручніше орієнтуватися в форматуванні файлів. Переходимо до вирішення поставлених питань.

Як створити html файл?

Тут, все насправді, до неподобства просто. Є кілька варіантів, в залежності, яким інструментом ми користуємося.

Якщо використовується NotePad ++:

Перш за все, хочу зауважити, що це найоптимальніший і зручний варіант, для написання html, css і php.

Таким чином, можна створити html файл, за допомогою текстового редактора NotePad. Якщо використовується блокнот:

Скажу відразу, що це не оптимальний варіант на даний момент. Але все ж, я не можу упустити цей спосіб.

Ось так ми створили файл у форматі html, за допомогою блокнота.

Поле застосування одного з варіантів створення, відкриваємо файл у веб-браузері подвійним кліком миші. І дивимося, що у нас вийшло.

При цьому, якщо все зроблено правильно файл повинен відкритися в веб-браузері, а не в блокноті.

Що робити, якщо замість HTML сторінки відображається текст?

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

Наприклад, може бути ситуація, коли ми написали код в NotePad і зберегли його в форматі HTML, але він наполегливо вдає текстовим документом. Справа в тому, що якщо не зняти галочку, про яку йшла мова на початку статті, ми не побачимо, що у нашого файлу розширення ні (названіе.html), а (названіе.html.txt). Тобто, по суті, файл як і раніше є звичайним текстовим документом, звідси і проблема.

Тобто, як Ви вже здогадалися, для розв'язання якої необхідне перейменувати файл з (файл.html.txt) в (файл.html).

Після даної маніпуляції файл повинен відкритися в браузері, а не в текстовому редакторі у вигляді тексту.

Вітаю вас на сторінках блогу 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 , Тобто image, картинка. Квадратна дужка відкривається, в неї вписується вся основна інформація про зображенні, тільки після цього вона закривається. Треба відзначити, що img - це тег, а всі інші елементи коду, які вписуються всередину, це його атрибути.

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

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

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

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

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

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

---

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

---

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

посилання

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

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

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

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

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

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

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

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