Перед вами курс зі створення власних сайтів. Ми дізнаємося, як сайти виглядають зсередини, як використовувати теги у HTML, навчимося створювати свої сторінки й наповнювати їх цікавими статтями, відео і картинками. Все, що вам знадобиться, це редактор для написання коду (в курсі ми будемо використовувати replit.com або Sublime, доступ в internet і трохи творчості. Про те, як налаштувати прогруму дивись тут.
Теорія – Теорія … без неї лижі не їдуть
Що за звір цей браузер?
Браузер, або вебоглядач (від англ. Web browser) – програмне забезпечення для перегляду вебсторінок, змісту вебдокументів, комп’ютерних файлів і їх каталогів; управління вебдодатками; а також для вирішення інших завдань.
Знайомі значки? Тобто браузером вже ви користувалися, але можливо не замислювалися, про те, що він так називається.
Не припиняються суперечки на тему: який браузер крутіше. Хтось використовує тільки Chrome, хтось голосує за лисичку з FireFox, а комусь і Opera подавай, хоча є також і прихильники Safari. Кожен вибирає на свій смак і потреби.
А який браузер найкращий на вашу думку? А який найпопулярніший?
За останніми опитуваннями найпопулярнішим є Google Chrome. Але це не означає, що інші чимось гірші. На колір і смак товариш не всяк, як то кажуть.
Нам же браузер знадобиться для перегляду сайту.
Що таке контент і з чим його їдять
Контент – це вся інформація на сайті: все, що може прочитати, почути або побачити користувач. Чому він такий важливий? Все дуже просто: сайт пишуть, щоб його прочитало якомога більше людей, а значить контент повинен бути:
- Цікавим і креативним
- грамотно написаним
- стильним
і тоді на твоєму сайті буде багато відвідувачів!!!
А тепер докладніше
1) А що, не цікаві сайти хтось читає? 😅
2) Ні, це не на випадок, якщо на сторінку загляне ваш учитель української мови. Історія в тему:
Одного разу одна маленька дівчинка написала своєму дідусеві листа. А через деякий час отримала його назад весь перекреслений червоною ручкою. Дідусь виправив помилки в листі, яких виявилося дуже і дуже багато. Навіть в слові “ще” дівчинка примудрилася зробити 3 помилки (і це в слові з 2-х букв !!!))) Дідусь написав, що дуже зрадів листу та був зворушений, але не зміг насолоджуватися читанням через помилки. Цей випадок дуже запам’ятався дівчинці, і відтоді вона намагалася писати без помилок. А пізніше, коли вона виросла – стала вчителькою з мови. Моєю вчителькою з мови.
Ось така історія … Реальна, між іншим. Висновки робіть самі. До слова, багато людей навіть не почнуть читати ваш сайт, якщо він буде неграмотно написаний.
3) Стильно, модно, молодіжно – це про нас! Зробіть гарні меню і стильні кнопочки, розфарбуйте сайт, наповніть його картинками, відео в тему.
А ось і кілька сайтів на пробу. Які враження?
http://stallman.org/ подивились на сайти? Скільки ви на них пробули? А раптом там цікаві статті? А ви так швидко закрили сторінку)) А тепер гляньте сюди : http://popel.agency/ або https://studio.code.org/projects/public. Ось і різниця. Красиві сторінки притягують погляд, змушують затриматися і почитати.
Саме той HTML
HTML, давай знайомитися!
Ну, це зрозуміло, а сайт-то як робити?
Уявіть акторів на знімальному майданчику. У них є певний сценарій, в якому написано хто що повинен робити і говорити. І коли йде зйомка, актори діють строго за сценарієм.
У нас дуже схоже: програма – це сценарій, а актори – це HTML і CSS (грим). JavaScript, HTML і CSS працюють у зв’язці, але є різними мовами кодування:
– JavaScript потрібен для написання програм (сценаріїв).
– HTML потрібен для створення візуальних елементів і підключення програми.
– CSS потрібен для кодування зовнішнього вигляду візуальних елементів.
Як виглядають сайти в Інтернеті всі ми вже бачили, але як вони влаштовані всередині? Сьогодні вивчимо – Анатомію сайту (анатомію? – так, так це слово тут не випадково, ось побачите).
“Структура магії” або три кити сайтобудування
Все в HTML знаходиться в середині тегів. Вони як цеглини будують наш сайт.
Все починається і закінчується тегом <html>. І весь наш сайт буде знаходитися всередині нього. Голова сайту, або тег <head> потрібна для того, щоб зберігати інформацію про назву сторінки і описувати загальні правила, за якими будується сайт. Тег <body> – тіло сайту. Ось тут-то і пишеться вся інформація, яка є на сайті: статті, картинки, фотки, відео, кнопочки і ще купа всього цікавого, що є на сайті. Так от найважливіше: не буває сайту без голови, не буває і без тіла. Ці важливі теги HTML не можна видаляти, інакше комп’ютер не зрозуміє як правильно показати сайт.
Мова, якою пишуть сайти називається html. А всередині сайт складається з тегів – спеціальних цеглинок, з яких будується сайт. Пам’ятаєте конструктор Lego? Ось тут та сама технологія.
Більшість тегів, як дверцята, повинні відкриватися <html> і закриватися </ html>. Слідкуйте за тим, щоб в кінці був закриваючий тег !!!
Від слів до справи! Пишемо перші теги HTML!
Ваша перша сторінка буде про вас. На сторінці буде пару слів про вас, 2 правдивих факти про вас і 1 неправдивий.
0: Створюємо проєкт.
Зайдіть на replit.com і створіть новий проєкт, натиснувши на кнопку зліва Create Repl. Для Template оберіть HTML, CSS, JS. Для Title задайте назву. Можете написати lesson1. Запам’ятайте, як створювати проєкти, бо цю процедуру ми будемо повторювати на кожному уроці. Натисніть на Create Repl і відкриється новий проєкт.
Новий проєкт міститиме три файли : index.html (для структури наших сайтів), style.css (для стилів) script.js (для кодування). Поки що нас цікавить тільки перший файл. В index.html очистіть всі рядки в середині тега body. Вони нам не знадобляться.
1: О! replit вже створив основні теги HTML для нас. Давайте подивимося, що тут є.
Знайдіть тег <html> і такий же закриваючий. А де тег голови сайту? А тіла?
В середині тега голови сайту head знайдіть такі рядки:
<meta charset="utf-8">
<title>replit</title>
<meta charset=”utf-8″> – це кодування, без нього в деяких браузерах можна побачити лише так звані кракозябри замість літер.
А в title давайте напишемо назву нашого сайту “Про мене”
2: Додаємо заголовки.
Давайте зробимо в тексті головний заголовок (назва статті). І на початку і в кінці цієї назви поставимо тег, наприклад так:
<h1> Про мене </ h1>Цей рядок додайте одразу після тегу body.
Коли щось змінюєте, то щоб запустити, вгорі є зелена кнопочка Run.
Всього в HTML існує 6 заголовків:
Різні види заголовків використовуються для довгих статей, як на сторінці цього уроку 🫠
3: Додаємо абзаци.
Давайте додамо текст на сторінку. Напишіть трохи про себе. Потім додайте 3 факти про себе: 2 правди та 1 брехню. Можете розташувати їх в будь-якому порядку. Будьте обережні, редагуючи текст!
Розділити текст на абзаци вам допоможе тег <p>. Для цього на початку абзацу треба додати тег <p>, а в кінці – </ p>.
Наприклад:
<p>Я літала в космос</p>
<p>Я люблю собак, особливо хаскі</p>
<p>Люблю стрибати на батуті</p>Додайте за прикладом факти про себе. Не забувайте закривати теги абзаців, коли абзац закінчено.
Додаткове завдання
4: Розфарбовуємо текст
Для того, щоб розфарбувати текст, треба трохи змінити наші теги у файлі HTML. Нижче наведено приклад, як можна розфарбувати абзац або заголовок (жирним виділено те, що треба додати)
<h1 style="color:green">Мій кольоровий заголовок</h1>
<p style="color:#ffFF00">А це - кольоровий текст.. </p>Кольори можна задавати англійською назвою або # і 6-ма символами (цифрами, буквами A, B, C, D, E, F)
Розфарбуйте заголовок й пару абзаців на своїй сторінці
Level UP (Ускладнені завдання)
1: На цьому сайті ми використовували тільки один вид заголовка <h1>. Але таких заголовків всього 6: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Додайте ще 3 заголовки різних видів.
2: Додайте розділ “Про мене в трьох словах”. У цьому розділі має бути назва розділу і три слова, які вас характеризують.
3: Додай розділ “Про мене в трьох картинках”. У цьому розділі має бути назва розділу і три картинки, які вас характеризують. Картинки завантажте з інтернету та додайте посилання на них. Ось тег, який додає картинку:
<img src="https://image.jpg" alt="альтернативний текст">Теги у HTML – як цеглинки, з ними можна побудувати дуже різні сайті і додати все, що забажаєте! Цікаво? Тисніть тут, щоб подивитися список уроків.
