- Tubelator AI
- >
- Videos
- >
- Education
- >
- Практична № 2. Текстові елементи вебсторінки | Модуль Вебтехнології | 10(11) клас | Речич
Практична № 2. Текстові елементи вебсторінки | Модуль Вебтехнології | 10(11) клас | Речич
Learn how to work with text elements on a web page in this practical session for 10th-11th-grade students. Follow along with creating folders and writing basic HTML structures using Sublime Text3 code editor as part of the Web Technologies module.
Install Tubelator On Chrome
Video Summary & Chapters
No chapters for this video generated yet.
Video Transcript
We will do practical work 2.0 with the Redchitch informatics, web technologies,
mod for learning 10-11 classes, standard level.
Create a folder with the site name.
I will create on the desktop.
And open the code editor.
I will use the Sublime Text3 code editor.
Save the file.
To do this, run the file SaveWithEncoding and here we choose otf8.
Save the site in the folder, only what is created.
The file name will be index.html.
File type html. Save.
We will enter the basic structure of the html page.
Write html and click the tab key.
As you can see, Sublime Text helped us and created the basic HTML page structure.
The only thing we will do is to put a stepback here, select and press the Tab key.
These steps will not be read by the browser, and they are made only to make it easier to read the markup.
In the tag html we will add the attribute lang
with which we can set the language
on which the site will be written
We have Ukrainian language
yuk
In addition, between the tags head
we will add
tag meta
tag starts with a square arrow
we choose from the list with tips
meta
and for locking already charset.tf8
Enter the site name
between the tags title
The site name will be
mysite
Let's save
and load
this HTML page index
I will use the browser
Google Chrome
As you can see, the page overview
on the tab already exists
For convenience, I will place
simultaneously
and the code editor
and a browser for displaying our page.
Between tags of body we will write tag header
for displaying the site header
In addition, we will need tag nav
which sets the navigation on the site
and tag footer for the site's base
In the header we will write tag title of the first level
h1
Video Summary & Chapters
No chapters for this video generated yet.
Video Transcript
Виконуємо практичну роботу 2, запосібником Ratchet, інформатика, веб-технології,
моду для учень 10-11 класів, рівень стандарту.
Створимо папку з іменем Site, я буду створювати на робочому столі,
та відкриємо редактор коду.
Я буду використовувати редактор коду Sublime Text3.
Зразу збережемо файл.
До цього виконуємо файл SaveWithEncoding та ось тут вибираємо OTF-8.
Зберігаємо в папці Site тільки що створений.
Ім'я файлу буде index.html.
Тип файлу html.
Зберегти.
Уведемо базову структуру HTML-сторінки.
Запишемо HTML та натиснемо клавіатуру Tab.
Як бачимо, Sublime Text нам допоміг
і зразу створив базову структуру HTML-сторінки.
Єдине, що зробимо, так це поставимо ось тут відступ,
виділимо та натиснемо клавіатуру Tab.
Дані відступи браузером читатися не будуть,
і вони зроблені тільки для того, щоб було зручніше читати розмітку.
В тег HTML допишемо атрибут lang, з допомогою якого можна задати мову, на якій буде написаний сайт.
У нас мова українська, yuk.
Крім того, між тегами head допишемо тег meta.
Тег розпочинається з квадратної дужки.
Зібраємо зі списка з підказками мета
і за замовченням вже чапсет УТФ-8
Уведемо назву сайта
між тегами title
Назва сайта буде
mysite
Давайте збережемо
і завантажимо до нашої меж сторінки індекс
Я буду використовувати браузер Google Chrome
Як бачите, загалок сторінки на вкладці вже існує
Для зручності я розміщу одночастор і редактор коду,
і браузер для відображення нашої сторінки.
Між тегами боді запишемо тег header для відображення шапки сайту.
Крім цього нам буде потрібно тег nav, який задає навігацію по сайту,
і тег footer для підвалу сайту.
В хедері запишемо тег заголубка першого рівня h1
і в ньому запишемо main header name of site.
Далі запишемо заголовок другого рівня h2, де запишемо Sav header topic of site.
Тепер між тегами nav запишемо маркований список.
Для цього запишемо тег ul.
В середині тегів ul мають бути теги li, тобто елементи списку.
Елементами списку будуть гіперпосилання,
Пишемо TECH A, якому має бути обов'язковий атрибут GREF, значення якого буде, це сторінка, на якому буде.
на яке буде посилання з розширенням HTML.
А сам текст Home.
Ще в нас буде 3 елементи з списку.
Скопіюємо, щоб було швидше, та виправимо.
