Embedded Files
HTML (Hypertext Markup Language) - мова розмітки гіпертекстових документів використовується для створення веб-сторінок і веб-додатків.
Наприкінці 1991 року Тім Бернерс-Лі опублікував перший загальнодоступний опис мови розмітки HTML, відомий як документ «HTML-теги». В ньому були описані 20 елементів відносно простої схеми розмітки HTML.
HTML5 — найпоширеніша нині версія мови HTML, яка в 2004 році прийшла на заміну стандартній HTML. https://uk.wikipedia.org/wiki/HTML5
Вона дає можливість полегшити користувачеві навігацію сайтом завдяки розмітці областей веб-сторінки за допомогою певних тегів, які описують основні елементи, що є спільними для всіх веб-сторінок.
Тіло сторінки умовно поділяється на блоки з відповідними назвами (як на картинці).
Теги – службові символи (команди HTML), що вказують браузеру, як слід відображати Web-сторінку. Теги починаються і закінчуються кутовими дужками.
Елементи гіпертекстового документа мають таку структуру:
Основні теги. Теги можуть бути парними і непарними.
Теги для форматування тексту:
<p> текст </p> Початок нового абзацу. Абзаци відокремлюються порожніми рядками. Якщо закриваючого тега немає, вважається, що кінець абзацу збігається з початком наступного абзацу або іншого блочного елемента.
<br> Непарний тег. Перехід у новий рядок. Текст буде наведено у новому рядку без пропуску рядка, як у випадку використання <p>
<hr> Непарний тег. У рядку буде проведена горизонтальна лінія
Для створення HTML-розмітки документа використовують будь-який текстовий редактор.
Для перегляду HTML- документа використовується браузер.
Створення простої веб-сторінки
Створіть папку Web_Design для збереження завдань курсу.
У папці Web_Design створіть папку Урок_2.1, в якій буде зберігатися веб-сторінка
Запустіть Notepade++ (це простий редактор коду).
У вікні редактора наберіть стандартний код HTML-розмітки.
Закрийте Notepade++.
Відкрийте папку Урок_2.1. Піктограма файла, збереженого у цій папці, вказує, який браузер встановлений за замовчуванням. У нас - GoogleCrome.
Після збереження файла автоматично змінюється вигляд коду у вікні Notepade++. Теги, атрибути, текст виділяються різними кольорами, а парні теги підсвічуються при клацанні мишкою на будь-якому з них. Видно структуру.
В голові документа прописується теги, які не відображаються браузером, в тілі - ті, які браузер відображає.
Збережіть файл у папці Урок_2.1, обов'язково задавши розширення html. Наприклад, index.html. (Якщо не вказати розширення, то це буде звичайний текстовий файл, браузер не відображатиме його).
Оберіть кодування, яке прописане в charset (в даному випадку utf-8).
Двічі клацнувши мишкою файл index.html, ми відкриємо його в браузері як веб-сторінку
Розташуйте вікна блокнота Notepad++ і браузера поряд, щоб зручно було бачити, яким чином зміна коду впливає на вигляд веб-сторінки. Вносячи зміни у блокноті, оновлюємо веб-сторінку.
Завдання 2.1.
Змініть заголовок web-сторінки на "Філософія життя".
Скопіюйте текст з файлу Тема2-1-1.txt і вставте його в тіло документа index.html.
ВІдформатуйте текст згідно зразка, скористайтеся тегами <p>,<br>, <hr>.
На зразку немає закриваючого тега </p>. Як ви думаєте, чому?
Щоб продовжити редагувати файл, необхідно клацнути його правою кнопкою мишки та обрати команду Edite with Notepad++.
Page updated
Google Sites
Report abuse