Embedded Files
Створювати веб-сторінки можна за допомогою звичайного текстового редактора або спеціального HTML-редактора. Усі HTML-редактори можна поділити на дві категорії: текстові й графічні.
Текстові передбачають набір коду вручну, хоча й зі значною автоматизацією цього процесу. Їхні інструменти дають змогу автоматизовано вставляти до документа потрібні теги його розмітки.
У графічних HTML-редакторах веб-сторінки формуються в такий самий спосіб, як і під час створення макетів звичайних документів, коли користувач може обрати потрібний йому шаблон веб-сторінки, а потім поступового його заповнювати контентом.
Сукупність тегів і правил їх використання називається мовою HTML – мова розмітки гіпертексту.
Документи створені мовою HTML називають HTML-документи. Ім’я такого файла звичайно має розширення .htm чи .html. HTML-документ, розміщений на Web-сервері є Web-сторінкою, яка переглядається за допомогою Web-браузера. Тому, навчившись створювати HTML-документи, ми зможемо робити власні Web-сторінки.
Розмітка документів – це опис різних фрагментів документа та їх взаємного розташування. Розмітка здійснюється за допомогою дескрипторів (тегів) мови HTML.
Переглянути розмітку будь-якого HTML-документа можна, якщо відкрити його у простому текстовому редакторі, типу Блокнот. Або, якщо документ відкрити у веб-оглядачі, наприклад, Google Chrome, то достатньо клацнути правою кнопкою миші на документі та обрати команду «Переглянути джерело сторінки».
Свої HTML-файли можна розробляти на локальному диску. При цьому комп`ютер може і не мати доступу до мережі Інтернет. Під час роботи, html-документ може бути одночасно відкритий і в Notepad++ (Блокнот), і у веб-оглядачі.
Етапи роботи:
Відкрити програму Notepad++ (Блокнот).
Відкрити вікно збереження документа.
Вибрати тип файлу Hyper Text Markup Language file (HTML-file).
Ввести ім’я файлу із зазначенням його розширення.
Ввести структуру документа та зберегти.
Закрити документ у програмі Notepad++ (Блокнот)..
Відкрити документ у веб-оглядачі.
Наступного разу, коли потрібно здійснити оновлення HTML-документу, цей файл потрібно відкривати за допомогою програми Notepad++(Блокнот).
Структура HTML-документа
Структура HTML-документа
Сторінка завжди починається з відкриваючого тега <html> та закінчується закриваючим тегом </html> і складається з двох обов’язкових блоків — голови (head) і тіла (body), які записуються послідовно.
У блоці <head> ...</head> зберігається службова інформація, призначена допомогти браузеру в роботі з даними. Тут розташовані мета-теги, які використовуються для зберігання інформації, призначеної для пошукових систем, а саме: опис сайта, ключові слова тощо. Інформація є зазвичай невидимою для пересічного користувача, крім тега <title>, в якому відображається назва сторінки сайта.
Увесь контент, який відображається на сторінці, розміщується між відкриваючим і закриваючим тегами <body>. Кожен абзац починається з тега <p> (від слова «параграф»).
Загальна структура HTML документа:
<html>
<head>
<title>Мій перший HTML-документ</title>
</head>
<body>
Хочу знати як створювати HTML-документ!
</body>
</html>
Основні теги для форматування тексту:
<p> текст </p> (парний тег) - Початок нового абзацу. Абзаци відокремлюються порожніми рядками.
<br> (непарний тег) - Перехід у новий рядок.
<hr> (непарний тег) - У рядку буде проведена горизонтальна лінія
<hr size ="7" width="100" color="#ff0000" align="center" > - горизонтальна лінія розмір 7 pс, шириною 100 pс, червоного кольору, вирівнювання за центром.
Колір тексту можна задати його назвою англійською мовою або кодом з таблиці кодів кольорів.
Теги для форматування тексту (парні):
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - Заголовки від першого до шостого рівня
<h1> текст </h1> - Заголовок першого рівня
Заголовки та абзаци мають атрибут align, який визначає тип вирівнювання на сторінці та може набувати одне з чотирьох значень:
· center — центрування;
· justify — вирівнювання за шириною;
· left — вирівнювання за лівим краєм;
· right — вирівнювання за правим краєм
<b> текст </b> - Напівжирний шрифт
<i> текст </i> - Курсивний шрифт
<u> текст </u> - Підкреслений шрифт
<marquee> текст </marque> - Рухомий текстовий рядок
Розміри символів шрифту можуть бути від 1 до 7 (перелічено від найменшого до найбільшого). Розмір 3 вважають стандартним, він приблизно відповідає 10 пунктам. Значення "+2" атрибута size означає, що розмір шрифту має бути на дві одиниці більший ніж стандартний, тобто п'ятий.
!!!Використовуйте веб-сайт для вивчення веб-технологій в Інтернеті, який містить навчальні посібники для вивчення HTML, CSS, JavaScript тощо:
Приклади опису властивостей тега body:
· bgcolor="white" — задати білий колір тла;
· text="black" — задати чорний колір тексту;
· background="picture.jpg" — задати зображення для тла;
· bgproperties="fixed" — зображення тла не прокручувати;
· style="text-align:justify;" — вирівнювати текст за шириною.
Крім цих атрибутів тега body використовують і такі:
· link — колір невідвіданих гіперпосилань;
· vlink — колір відвіданих гіперпосилань;
· alink — колір гіперпосилань, обраних користувачем;
· contenteditable — дозвіл (значення true) або заборона (значення false для елемента body або inherit для усіх інших елементів) користувачу редагувати HTML-документ у браузері.
Приклад коду сторінки та її відображення в браузері :
Практичне завдання
Практичне завдання
Увага! Під час роботи з комп'ютером дотримуйтеся вимог безпеки життєдіяльності та санітарно-гігієнічних норм.
Завдання 1. Створення простої веб-сторінки
1.Створіть папку Sites для збереження своїх сторінок.
2. Запустіть програму Notepad++ (Блокнот). У вікні редактора наберіть стандартний код HTML-розмітки.
3. Збережіть файл у папці, обов'язково задавши розширення html (Hyper Text Markup Language file). (Якщо не вказати розширення, то це буде звичайний текстовий файл, браузер не відображатиме його).
4. Закрийте програму Notepad++.
5.Відкрийте папку Sites. Піктограма файла, збереженого у цій папці, вказує, який браузер встановлений за замовчуванням. Двічі клацнувши мишкою створений файл відкриємо його в браузері як веб-сторінку.
6. Розташуйте вікна програми Notepad++ і браузера поряд, щоб зручно було бачити, яким чином зміна коду впливає на вигляд веб-сторінки. Внесіть зміни у блокноті (колір, розмір і вирівнювання тексту; колір фону сторінки), і оновіть веб-сторінку, щоб побачити внесені зміни.
Завдання 2. Створити за наведеним зразком гіпертекстовий документ з улюбленим віршем Т.Г.Шевченка:
Page updated
Google Sites
Report abuse