Підручник з HTML (для початківців)

Підручник з HTML для початківцівВи хочете вивчити деякі HTML?


Це звучить як чудова ідея. Звідси і причина, чому ми склали цей підручник HTML для початківців.

Сьогодні у світі є щонайменше 1,7 мільярда веб-сайтів. Практично всі ці веб-сайти так чи інакше використовують HTML.

P.S: Якщо ви не хочете вивчати HTML і почати створювати веб-сайт відразу, не вимагаючи кодування, ознайомтеся з цим посібником: Як зробити веб-сайт БЕЗКОШТОВНО (не вивчаючи HTML).

Contents

Вступ до HTML


Що таке HTML?

Що таке HTMLHTML, абревіатура для мови розмітки HyperText – це комп’ютерна мова для створення веб-сайтів та веб-додатків. В основному складається з серій кодів, зазвичай написаних у текстовому файлі та збережених як HTML, код, написаний мовою HTML, перетворюється на прекрасний, добре відформатований текст або комбінацію тексту та медіа-файлів при перегляді через браузер..

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

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

Версії HTML

По-перше, швидке скасування всіх версій HTML з часу винайдення HTML.

  • HTML 1.0: Це була версія баребонів HTML і найперший випуск мови.
  • HTML 2.0: Ця версія була представлена ​​в 1995 році. Вона поступово розвивалася, забезпечуючи додаткові можливості, включаючи завантаження файлів на основі форми, таблиці, карти зображень на стороні клієнта та інтернаціоналізацію.
  • HTML 3.2: Намагаючись забезпечити розробку стандартів для всесвітньої павутини, в 1994 році Тім Бернерс-Лі був заснований Консорціум всесвітньої павутини (W3C). До 1997 року вони опублікували HTML 3.2.
  • HTML 4.0: Пізніше в 1997 році W3C випустив HTML 4.0 – версію, яка прийняла багато типів та атрибутів, характерних для браузера.
  • Пізніше перевидано HTML 4.0 із незначними змінами у 1998 році.
  • HTML 4.01: У грудні 1999 року було випущено HTML 4.01.
  • XHTML: Технічні характеристики були введені в 2000 році, і її рекомендували використовувати як спільний стандарт з HTML 4.01. Він включав XML для забезпечення правильного написання коду та забезпечення сумісності між мовами програмування.
  • HTML5: W3C опублікував HTML5 як рекомендацію в жовтні 2014 року, а пізніше випустив HTML 5.1 у листопаді 2016 року.

Вибір редактора HTML

Виберіть редактор HTMLЯкщо ви думаєте створити веб-сторінки в HTML, вам потрібен редактор HTML. У використанні редактора HTML є кілька переваг.

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

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

Основні будівельні блоки HTML


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

Вступ до тегів

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

Отже, якщо мова йде про HTML, теги мають різницю між тим, чи ваш документ відображається як звичайний текст або “перетворений текст”, що в основному являє собою код тексту, який, як видається, відображає ряд речей (гіперпосилання, зображення, медіа та ін.) методи форматування) на основі того, що доручено відображати на основі тегів.

Давайте подивимось на приклад слово “Він хлопчик”:

  • У звичайному текстовому форматі ви отримуєте: Він хлопчик.
  • Жирним текстовим форматом ви отримуєте: Він хлопчик

Щоб досягти того, що ми маємо у жирному форматі, ви повинні використовувати тег.

зробити текст жирним шрифтом у HTML

У сирому HTML ми маємо Він хлопчик який браузер потім перекладає на це: Він хлопчик.

“Він хлопчик” також може вийти курсивом.

Це досягається за допомогою тег.

зробити текст курсивом у HTML

Ми маємо: Він хлопчик яка потім виходить як Він хлопчик.

Гіперпосилання досягається за допомогою тег.

робить текст гіперпосиланням у HTML

У сирому HTML, який ми маємо: Він хлопчик, який показує, що Він хлопчик.

Є кілька речей, які слід розуміти про теги:

  • Теги є практично складовою частиною HTML – ви не можете робити HTML без тегів! Якщо ви затримали тег, який слід використовувати, не забудьте ознайомитися з нашою періодичною таблицею HTML.
  • Майже кожен відкритий тег повинен бути закритим. Майте на увазі, що є винятки. Приклад тегу, який не потрібно закривати, – це порожній тег, наприклад розрив рядка:
    .
  • Теги містяться менше ніж (“<”) and greater than (“>”) Кутовий кронштейн. Теги, що закриваються, містять косу рису, яка переходить до назви закритого тегу. Приклад відкритого тегу: . Приклад закритого тегу .
  • Кожен HTML-файл починається з початкового тегу і закінчується закриваючим тегом. Перший рядок файлу HTML повинен оголошувати тип документа, щоб браузер знав, який аромат HTML ви використовуєте. Ось чому ви бачите HTML-сторінки, що починаються з “До початку коду HTML.

Перед додаванням вмісту більшість файлів HTML в основному виглядають так:

HTML--

Розділ, що слідує за Тег зазвичай містить інформацію про документ, такий як його заголовок, метатеги та те, де знайти його файл CSS – вміст, який не відображається безпосередньо на сторінці браузера. Розділ між „ і“(Який ми представляли” ОСНОВНИЙ ЗМІСТ “), де знаходиться основний вміст HTML-файлу, який глядач побачить у браузері. Сюди входить все, починаючи з першого абзацу до гіперпосилання до форматування в мультимедіа та все інше.

Вступ до елементів

вступ до елементів

У HTML, “елемент” складається з тегу відкриття та закриття, а також вмісту між тегами.

В “Він хлопчик“(Напівжирним) прикладом у нас це є в HTML: Він хлопчик. Текст “Він хлопчик” оточений відкритим і закритим тегом. Все, включаючи вступний тег, вміст та тег закриття, є елементом.

Коли тег відкривається, вводиться вміст і тег закривається, у нас є елемент.

Елемент може бути в базовій формі або в складній формі. Чому? Тому що все, що знаходиться між відкритим тегом і тегом, що закривається, а також цими тегами є елементом. Це означає, що ми можемо мати елементи всередині елемента. У нашому теперішньому прикладі “він хлопчик” (Він хлопчик) є елементом.

Ви помітите, що раніше ми говорили, що документи HTML містять до початку вмісту. Вміст може містити сотні різних елементів, але всі ці елементи є частиною елемента “body” (оскільки елемент body відкритий, містить вміст і потім закривається).

Вступ до атрибутів

Хоча HTML-документи в основному використовують теги для всього, ми іноді хочемо передавати додаткову інформацію всередині елемента. У цьому випадку ми використовуємо атрибут. Атрибут використовується для визначення характеристик елемента, він використовується всередині вступного тегу елемента. Атрибути складаються з імені та значення.

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

приклад атрибута

Приклад:

Він хлопчик

У цьому прикладі ми вказуємо, що “Він хлопчик” вирівняний в центрі документа.

Початок роботи з HTML


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

Створення HTML Стихія

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

Деякі елементи в включити заголовок, який створюється за допомогою тег.</p><p><strong>Приклад</strong>:</p><pre><title>Це наша назва сторінки

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

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

Створення заголовків у HTML

створення заголовків у html

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

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

Є шість тегів заголовка в HTML:

до

, з

тег із зазначенням найважливішого заголовка та

тег із зазначенням найменш важливого заголовка.

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

Приклад заголовків HTML:

  • Це ваш перший HTML-заголовок

    (Найбільший)

  • Це ваш другий заголовок HTML

  • Це Ваша третя заголовка HTML

  • Це ваша четверта заголовка HTML

  • Це ваша п’ята заголовка HTML
  • Це Ваша шоста заголовок HTML

Створення абзаців

створення абзаців у HTML

Наступний крок – почати створювати абзаци. Абзаци можна створити за допомогою

тег.

Приклад:

Це ваш перший абзац.

Це ваш другий абзац, і ви будете створювати ще багато абзаців.

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

Приклад:

Це новий параграф. І я хочу використовувати ряд нових рядків. Тож я його порушую.

Це не вийде так:

Це новий параграф.
І я хочу використовувати ряд нових рядків.
Тож я його порушую.

Натомість вийде так:

Це новий параграф. І я хочу використовувати ряд нових рядків. Тож я його порушую.

Отже, як ти розбиваєш тексти на нові рядки, щоб вони виглядали так:

Це новий параграф.
І я хочу використовувати ряд нових рядків.
Тож я його порушую.

За допомогою розривів рядків.

Приклад:

Це новий параграф.
І я хочу використовувати ряд нових рядків.
Тож я його порушую.

З огляду на це, важливо зазначити, що розрив лінії (
) тег – порожній тег, тому не потрібно закривати його.

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

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

Наступним кроком є ​​форматування тексту в HTML. Тут ви можете вказати, чи хочете ви, щоб ваш текст вийшов жирним, курсивом, підкресленим, підписаним, надписом тощо. Це основне керівництво, тому цей розділ не буде кращим для форматування. Натомість ми включимо лише деякі основні теги форматування. Процес використання інших форм форматування простий – просто знайдіть потрібний тег і продовжуйте:

Використання жирного шрифту: Він хлопчик виходить як Він хлопчик

Використання курсиву: Він хлопчик виходить як Він хлопчик

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

Використання індекса: Він хлопчик виходить як Він хлопчик

Використовуючи суперскрипт: Він хлопчик виходить як Він хлопчик

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

Впорядковані та не упорядковані списки

Рано чи пізно вам доведеться створювати списки. Списки можуть бути упорядковані (тобто пронумеровані) або не упорядковані (тобто ненумеровані).

Ось приклад упорядкованого списку:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3

Ось як його створити:

  1. Пункт 1
  2. Пункт 2
  3. Пункт 3

Ось приклад не упорядкованого списку:

  • Пункт 1
  • Пункт 2
  • Пункт 3

Ось як його створити:

  • Пункт 1
  • Пункт 2
  • Пункт 3

Якщо це вже не очевидно. Ось поділка:

The

  • Тег використовується для позначення кожного елемента в списку. Створюючи список, ви можете використовувати
      тег, щоб вказати упорядкований список (“o” = упорядкований та “l” = список) або

        тег, щоб вказати не упорядкований список (“u” = не упорядкований та “l” = список). Здобув суть?

        Вкладені списки

        Ми також можемо мати вкладені списки або список у списку.

        Приклад:

        • Пункт 1
          • Пункт 1 вкладений
          • Пункт 2 вкладений
        • Пункт 2
        • Пункт 3

        Це можна створити за допомогою:

        • Пункт 1
          • Пункт 1 вкладений
          • Пункт 2 вкладений
          • Пункт 3 вкладений
        • Пункт 2
        • Пункт 3

        Як бачите, ви просто відкриєте ще один тег лістингу – упорядковано (

          ) або не упорядкованим (

            ) – залежно від того, що ви хочете, перш ніж закрити елемент, який ви хочете вкласти.

            створення гіперпосилань у HTML

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

            The Тег використовується для визначення посилань у HTML, тоді як атрибут “href” використовується для визначення призначення посилання. Потім посилання ставиться в лапки після знака “рівний” перед тим, як тег закриється.

            Приклад:

            Щоб створити гіперпосилання, це: ВАШ ТЕКСТ ПОСИЛАННЯ ТУТ з’явиться як ВАШ ТЕКСТ ТУТ

            Тепер припустимо, що ви посилаєтесь на локальний файл, у якому всі ваші HTML-сторінки в одній папці. У цьому випадку вам не потрібно включати URL-адресу веб-сайту. Просто додайте шлях до файлу. Наприклад, якщо посилання на файл із заголовком about-page.html, вашим гіперпосиланням стає ТВОЙ ПОСИЛАННЯ ТЕКСТУ ТУТ, яка посилається на файл about-page.html.

            Якщо HTML-файл, до якого ви хочете зв’язатись, локальний, але у папці, що відрізняється від основної папки, просто вкажіть шлях до файлу. Наприклад, якщо файл знаходиться в папці “файли” під основним документом, де знаходиться ваш поточний документ, гіперпосилання має щось подібне ТВОЙ ПОСИЛАННЯ ТЕКСТУ ТУТ

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

            Приклади:

            ВАШ ЛІКСОВИЙ ТЕКСТ ТУТ вказує, що посилання має бути відкрито в новій вкладці.

            ВАШ ЛІКСОВИЙ ТЕКСТ ТУТ вказує, що посилання має бути відкрито в одній вкладці.

            Є й інші атрибути, які можна використовувати для передачі різних способів, щоб відкрити посилання:

            • _blank – відкрийте в новій вкладці.
            • _self – відкрийте в тій самій вкладці.
            • _parent – Відкрити в батьківському кадрі
            • _top – Відкрийте в повному корпусі вікна
            • назва кадру – відкрийте в названому кадрі

            Ви також можете мати точку зображення до посилання.

            Приклад:

            Він хлопчик
            

            Це повідомляє веб-переглядачу відображати зображення, витягнуте з файлу зображень “images / html-tutorial-for-beginners-3.jpg” та пов’язувати його з https://websitesetup.org. Атрибут “alt” позначає, що має бути показано, якщо зображення не вдається відобразити (через налаштування веб-переглядача чи інший матеріал, який не дозволяє відображати зображення).

            Використання зображень

            використовуючи зображення в HTML

            Зображення додаються в документ HTML із тег. The тег – це порожній тег, тому його не потрібно закривати.

            Приклад:

            Він хлопчик

            Це основний приклад того, як браузеру потрібно відображати зображення під назвою “images / html-tutorial-for-beginners-3.jpg”, витягнуте з того самого каталогу, що й документ HTML. Атрибут “alt” повідомляє браузеру показати текст (відомий як “альтернативний текст”) під назвою “Він хлопчик”, якщо з певних причин налаштування веб-переглядача чи Інтернету заважають браузеру відображати зображення. Якщо ви хочете перетягнути зображення в інший каталог або на зовнішній сайт, слід вказати повну адресу / шлях.

            Виходячи за межі основ, ми також могли використовувати інші атрибути для кращого налаштування зображення. Наприклад, атрибут “style” може бути використаний для визначення ширини, висоти або обох.

            Приклад:

            ВАШ АЛЬТЕРНАТИВНИЙ ТЕКСТ

            (курсив “ширина” та “висота” слід замінити фактичними значеннями в “px” (наприклад, “20px”), які потрібно для вашого зображення.)

            Створення таблиць

            створення таблиць у HTML

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

            Таблиці створюються за допомогою

            тег. Кожен заголовок у таблиці вказується з

            (“Рядок таблиці”). Дані таблиці позначаються знаком

            (“Заголовок таблиці”), тоді як кожен рядок вказується із

            тег.

            Приклад:

            Заголовок таблиці 1 Заголовок таблиці 2 Заголовок таблиці 3
            Введення 1 під заголовком 1 Введення 1 під заголовком 2 Введення 1 під заголовком 3
            Введення 2 під заголовком 1 Введення 2 під заголовком 2 Введення 2 під заголовком 3
            Введення 3 під заголовком 1 Введення 3 під заголовком 2 Введення 3 під заголовком 3

            Це дає нам щось подібне:

            Приклад таблиці 1

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

            Заголовок таблиці 1 Заголовок таблиці 2 Заголовок таблиці 3
            Введення 1 під заголовком 1 Введення 1 під заголовком 2 Введення 1 під заголовком 3
            Введення 2 під заголовком 1 Введення 2 під заголовком 2 Введення 2 під заголовком 3
            Введення 3 під заголовком 1 Введення 3 під заголовком 2 Введення 3 під заголовком 3

            Це призводить до чогось більш організованого:

            Приклад таблиці 2

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

            Цитати в HTML

            цитати в HTML

            Існують різні типи цитат, і ці цитати представлені різними елементами.

            Ось основна пропозиція, ось приклад:

            Це зразок. І Ось наша цитата

            Виходить так: Це зразок. І ось наша цитата »

            Коли ви використовуєте тег, лапки автоматично додаються до того, що додається в тег.

            Ви також можете використовувати блок-котирування, що робиться за допомогою

            тег.

            Приклад:

            Це зразок. І

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

            Це буде виглядати приблизно так:

            приклад блокчетування 1

            Використання коментарів у HTML

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

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

            Користувач не буде показувати глядачеві коментарі. Пам’ятайте, що їх можна побачити у вихідному коді.

            Коментарі також можна використовувати в будь-якому місці коду. Вони жодним чином не змінять функцію вашого коду.

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

            Приклад:

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

            Приклад:

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

            Це також можна використовувати таким чином:

            Він хлопчик що показує Він хлопчик. Це тому, що ми прокоментували “є”. Ми просто намагаємось показати вам, що практично будь-що, всередині або поза ним, можна коментувати. Ви можете додати примітку до коментаря для довідки – це не змінює характер відображуваного.

            Використання кольорів у HTML

            використовуючи кольори в HTML

            Рано чи пізно вам потрібно буде використовувати кольори для позначення певних елементів вашого HTML-документа. Це можна зробити трьома основними способами: зі значенням HEX, зі значенням RGB або з назвою кольору.

            Використання кольору в HTML зазвичай виконується за допомогою атрибута стилю.

            Приклад 1:

            Це синій колір

            Використовуючи значення HEX для синього кольору “# 0000FF”, ми повідомляємо браузеру показати ваш текст (у даному випадку “Це синій колір”), використовуючи синій колір.

            Приклад 2:

            Це колір зелений

            Ми доручаємо виділити текст зеленим кольором за допомогою значення RGB.

            Приклад 3:

            Це колір жовтий

            Використовуючи значення HSL, ми попросили, щоб текст був виділений жовтим кольором.

            Приклад 4:

            Це колір помаранчевий

            Ми використовуємо ім’я HTML-кольору (в даному випадку “помаранчевий” – який ми виділили в коді курсивом), щоб попросити текст виділити помаранчевим кольором. Очевидно, що це можливо лише для текстів, для яких ви знаєте назви кольорів, і може бути складним для певних кольорових відтінків, які можна легко зробити за допомогою коду HEX або RGB. Незважаючи на це, ви можете знайти список 140 назв кольорів HTML складений HTML-кодами кольорів.

            Зрозуміло, що у вас немає всієї необхідної інформації – наприклад, HEX-код, значення RGB тощо – для всіх кольорів. Не впадайте в паніку – колір підбирає W3Schools це чудовий інструмент, який дозволяє вибрати будь-який колір і показує всю інформацію про цей колір, включаючи HEX-код, RGB-значення та значення HSL.

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

            У HTML-документі iFrame (вбудований кадр) може бути використаний для вбудовування файлу в поточний документ. По суті, ви можете використовувати його для відображення іншого веб-сайту або вмісту з іншої веб-сторінки всередині поточної.

            Приклад:

            За допомогою наведеного вище коду ми повідомляємо веб-переглядачу відображати вміст https://websitesetup.org у кадрі безпосередньо на цій сторінці.

            Iframes можна використовувати для відображення веб-сайту, відео, зображень або будь-якої іншої форми вмісту.

            Код для цього простий:

            (просто замініть “URL” посиланням на веб-сайт / вміст, який ви хочете відображати.)

            Ви можете додатково налаштувати, щоб вказати певні значення, наприклад, висоту та ширину рамки iframe.

            Приклад:

            Ми повідомляємо веб-переглядачу відображати кадр, використовуючи висоту 350 пікселів і ширину 400 пікселів.

            Шрифти в HTML

            за допомогою шрифтів у HTML

            Розуміння того, як працюють шрифти, є важливим для створення ефективних HTML-документів. Для одного, шрифти дозволяють легко встановити розмір тексту. Це також дозволяє легко встановити колір, а також обличчя (або тип шрифту) вашого вмісту.

            Щоб вказати шрифт, який використовуватиме ваш HTML-документ, вам потрібно буде скористатися тег. Ви можете встановити розмір шрифту, колір шрифту або обличчя шрифту, використовуючи атрибути “size”, “color” або “face”.

            Налаштування розміру – приклад:

            Виведіть цей текст, використовуючи шрифт 6

            У цьому прикладі ми повідомляємо браузеру відображати наш текст із використанням шрифту 6. Важливо зазначити, що діапазон прийнятих розмірів шрифту становить від 1 до 7. Все, що вище 7, автоматично налаштовується на розмір шрифту 7. За замовчуванням розмір шрифту – 3.

            Колір шрифту – приклад:

            Виведіть наш текст у синьому кольорі

            Ми використовуємо тег, щоб попросити браузер відобразити наш текст у синьому кольорі. У цьому випадку ми використовували назву кольору HTML (“синій”). Це можна замінити кодом HEX або значенням RGB, якщо потрібно.

            Обличчя шрифту – приклад:

            Ви віддаєте перевагу Вердані замість Times New Romans? Ось як ви його встановили:

            Будь ласка, покажіть цей текст шрифтом Verdana

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

            Інші обличчя шрифту:

            Важливо зауважити, що люди зможуть бачити ваш текст лише у вказаному вами шрифті, якщо цей шрифт встановлений на їхньому комп’ютері. Якщо ні, то на екрані буде показано обличчя шрифту за замовчуванням – зазвичай Times New Roman. З цієї причини настійно рекомендується використовувати “безпечні для веб-сайтів” шрифти.

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

            Повернутися до нашого прикладу:

            Будь ласка, відображіть цей текст спочатку шрифтом Verdana, або Helvetica, або Arial, або Comic Sans… у тому порядку, якщо основний шрифт недоступний

            Ми доручили браузеру показати текст у Вердані. Якщо Вердана недоступна, замість того, щоб повернутися до стандартних Times New Romans, вона може показати Helvetica, або Arial, якщо Helvetica недоступна, або Comic Sans, якщо Arial недоступний..

            Висновок

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

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

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

            Ресурси HTML

            • Періодична таблиця HTML – тут перераховані всі теги HTML у вигляді періодичної таблиці, що полегшує їх вивчення / використання.
            • W3Schools / Теги – Список усіх тегів HTML, упорядкованих за алфавітом.
            • Віднесено Mozilla / HTML – Список усіх атрибутів HTML, упорядкованих за алфавітом.
            • HTML чіт-лист
            • HTML Коліри кольорів / Назви кольорів – Список 140 назв кольорів HTML, включаючи HEX-код, RGB-значення та значення HSL.

            Jeffrey Wilson Administrator
            Sorry! The Author has not filled his profile.
            follow me
              Adblock
              detector