Як створити просту веб сторінку за допомогою html

У цій статті ми розповімо вам, як за допомогою HTML-коду створити найпростішу веб-сторінку. HTML є одним з основних компонентів інтернету, тому що задає структуру веб-сторінок. Веб-сторінку можна створити в текстовому редакторі, який є в Windows або macOS.

кроки

Частина 1 з 6:

Як додати тег «head» (опис веб-сторінки)

1. Відкрийте текстовий редактор. У Windows запустіть Блокнот або Notepad ++, а в macOS - TextEdit:

Windows - відкрийте меню «Пуск»

, в рядку пошуку введіть блокнот або notepad++, а потім клацніть по «Блокнот» або «Notepad ++» вгорі меню «Пуск».

macOS - клацніть по «Spotlight»

, введіть textedit, а потім двічі клацніть по «TextEdit» вгорі результатів пошуку.

2. Введіть та натисніть ↵ Enter. Так ви повідомите веб-браузеру, що це документ HTML.

3. Введіть та натисніть ↵ Enter. Це відкриває тег HTML-коду.

4. Введіть та натисніть ↵ Enter. Цей тег містить опис веб-сторінки і заголовні елементи. Контент цього тега на сторінці, як правило, не відображається. Контентом є опис сторінки, метадані, таблиці стилів CSS і інші мови сценаріїв.

5. Введіть . Цей тег містить ім`я сторінки.

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

7. Введіть та натисніть ↵ Enter. Цей тег закриває тег імені сторінки.

8. Введіть та натисніть ↵ Enter. Цей тег закриває тег опису сторінки. На даному етапі HTML-код повинен виглядати приблизно так.

Моя веб-сторінка

Частина 2 з 6:

Як додати тег «body» (весь контент)

1. Введіть тег під закриває тегом «head». Цей тег містить весь контент HTML-документа. Контент цього тега відображається на веб-сторінці.

2. Введіть . Цей тег містить заголовок сторінки. Тема - це текст великого розміру, який, як правило, розташований у верхній частині сторінки.

3. Введіть назву сторінки. Це може бути назва сторінки або вітання.

4. Введіть після тексту заголовка і натисніть ↵ Enter. Цей тег закриває тег заголовка.

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

Ласкаво просимо на мою сторінку!Мене звати Макс.Сподіваюся, вам не буде нудно.

5. Введіть . Цей тег містить абзац тексту. Такий тег відобразить текст нормального розміру.

6. Введіть текст. Наприклад, введіть опис веб-сторінки або будь-яку іншу інформацію.

7. Введіть після тексту і натисніть ↵ Enter. Цей тег закриває тег абзацу тексту. Нижче наведено приклад абзацу в HTML-документі:

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

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

Змініть колір тексту. На початку тексту введіть тег , а в кінці тег . Замість слова "колір" підставте потрібний колір (англійською мовою), причому лапки не видаляйте. Ці теги дозволять змінити колір будь-якого тексту (наприклад, заголовка). Наприклад, щоб зробити текст синім, введіть наступний код: Кити - величні тварини.

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

 Напівжирний текстНаклонний текстПодчеркнутий текст  підрядковий текст  надрядковий текст

Частина 3 з 6:

Як додати додаткові елементи

1. Додайте картинку на сторінку. Для цього:

Введіть . Цей тег містить картинку.
Скопіюйте та вставте URL-адресу картинки після знака рівності (=) в лапках.
Введіть > після URL-адреси зображення, щоб закрити тег картинки. Наприклад, якщо URL-адресу зображення http: // myimage.com / ocean.jpg, введіть наступний код:

 src = "http: // myimage.com / ocean.jpg ">

2. Додайте посилання на іншу веб-сторінку. Для цього:

Введіть . Цей тег містить посилання на іншу сторінку.

Скопіюйте та вставте URL-адресу після знаку рівності (=) в лапках.

Введіть > після URL-адреси, щоб закрити адреса.

Введіть текст посилання після символу «>».

Введіть після тексту посилання, щоб закрити тег посилання. Нижче наведено приклад посилання на Яндекс.

 href = "https: // ya.ru "> Яндекс.

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

Частина 4 з 6:

Як змінити кольори

1. Зверніться до офіційного списку назв квітів і їх кодів в HTML color. Консорціум Всесвітньої павутини (W3C) веде офіційний список квітів, який можна знайти за адресою https: // w3.org / wiki / CSS / Properties / color / keywords. У кожного кольору є офіційна назва, 6-значний шістнадцятковий код і десяткове значення. Ви можете використовувати будь-який з цих параметрів, щоб задати колір елементів на своїй сторінці. У цьому прикладі ми візьмемо офіційні назви кольорів.

2. Задайте колір фону за допомогою тега . Для цього до тегу потрібно додати атрибут style. Припустимо, ви хочете зробити фон всієї сторінки lavender (Лавандовим):

3. Задайте колір тексту для будь-якого тега. Атрибут style також можна використовувати для вказівки, якого кольору буде весь текст в межах певного тега. Наприклад, ви хочете, щоб текст в межах одного з ваших тегів був midnightblue (Темно-синім):

Зміна кольору торкнеться тільки тексту в межах даного тега . Якщо пізніше ви відкриєте новий тег , де текст також повинен мати колір midnightblue, атрибут «style» потрібно буде задати і для нього.

4. Задайте колір фону для заголовка або абзацу. Подібно до того, як ви задаєте колір фону для тега «body», ви можете вибрати кольору фону для інших тегів. Наприклад, ви хочете, щоб колір фону був lightgrey (Світло-сірим), а колір фону заголовка стилю H1 - lightskyblue (Світло-блакитним):

Частина 5 з 6:

Як закрити HTML-код

1. Введіть , щоб закрити тег «body». Коли ви закінчите додавати текст, зображення та інші елементи, введіть вказаний тег внизу HTML-документа.

2. Введіть , щоб закрити HTML-код. Введіть цей тег під закриває тегом «body». Так ви повідомите веб-браузеру, що після цього тега HTML-коду немає. Весь HTML-код повинен бути приблизно таким:

Фан-сторінка ЯндексаВітаю вас на моїй страніцеЕто фан-сторінка ЯндексаВажние дати1 січня 2000 - День народження ЯндексаСсилкіСсилка на Яндекс: href = "http: // ya.ru "> Яндекс

Частина 6 з 6:

Як зберегти і відкрити веб-сторінку

1. Перетворіть документ в звичайний текст (тільки для користувачів macOS). Натисніть «Формат» (вгорі екрану)> «Створити простий текст» (в випадаючому меню).

Це не можна і не потрібно робити в Windows.

2. натисніть файл. Ця опція знаходиться в рядку меню у верхній частині екрану.

3. клацніть по Зберегти як. Ви знайдете цю опцію в меню «Файл».

Також можна натиснути Ctrl+S (Windows) або ⌘ Command+S (Mac).

4. Введіть ім`я HTML-документа. Введіть його в рядку «Файл» (Windows) або «Ім`я» (Mac).

5. Змініть формат файлу з TXT на HTML. Для цього:

Windows - клацніть по меню «Тип файлу», виберіть «Всі файли», а потім введіть .html в кінці імені файлу.

macOS - в кінці імені файлу замість .txtвведіть .html.

6. клацніть по зберегти. Ця опція знаходиться внизу вікна. Буде створено HTML-файл.

Зазвичай HTML-файли відкриваються у веб-браузері за замовчуванням.

7. Закрийте текстовий редактор. Тепер відкрийте HTML-файл в браузері, в якому можна переглянути створену веб-сторінку.

8. Відкрийте HTML-файл в браузері. Для цього двічі клацніть по HTML-файлу. Якщо відкрилося повідомлення про помилку, зробіть наступне:

Windows - клацніть по файлу правою кнопкою миші, виберіть "Відкрити за допомогою», а потім натисніть на потрібний браузер.

macOS - натисніть на файл, клацніть по «Файл», в меню виберіть «Відкрити за допомогою», а потім виберіть потрібний браузер.

9. Відредагуйте HTML-документ (якщо буде потрібно). Можливо, ви помітили помилку на сторінці. Щоб виправити її, внесіть зміни в вміст HTML-файлу:

У Windows клацніть по файлу правою кнопкою миші і виберіть «Редагувати» (якщо на комп`ютері встановлено Notepad ++, виберіть опцію «Редагувати в Notepad ++»).

У macOS клацніть по файлу, натисніть «Файл», виберіть «Відкрити за допомогою» і натисніть «TextEdit». Тепер перетягніть HTML-файл у вікно TextEdit.

Поради

На сторінку можна додати бічну смугу прокрутки тексту за допомогою тега .Але пам`ятайте, що деякі браузери не розпізнають цей тег.
Багато людей використовують Notepad ++, щоби писати і компілювати код.
Кожен тег потрібно закрити. Наприклад, теги слід закрити так: .
Щоб відцентрувати картинку на сторінці, введіть після імені картинки в тезі «img» (наприклад, ).

попередження

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