Види контанту для блогу або веб-сайту
Текстова інформація: Інформаційна стаття; рекламний тест; Інструкція до дії; посібник; рецензія; тематичний
огляд; дайджест; реферат; автореферат; новина;
примітка; інтерв’ю; історія події; кейс; відгук; задача; загадка;
опитувальник; звіт про подію; переклад; тощо.
Фотографія: фото колективу; фото товару; фото офіса;
фотоісторія; фотозвіт; майстер-клас;
процес створення об’єкта; процес виготовлення товару; результат
використання товару; фото події; дошка
пошани; фотопортфоліо; випадкове
фото; фото бренда; фото-обої; тощо.
Відео інформація: відеоісторія; відеозвіт; відео-кейс;
відео-вітання; відео-питання; відео-пропозиція; Репортаж; Фільми; відеоінтерв’ю;
відеопортфоліо; трансляція події; процес
створення товару; відео-звернення; рекламний ролик; відео-кліп; відео-офісу; відео-урок; тощо.
Графічна інформація: ілюстрація; комікси; меми; схеми;
графіка; текст в картинках; плани; інфографіка; слайд-шоу; ментальні карти; тощо.
Аудіо та звукова інформація:
музика; аудіоурок; аудіозвернення; підкаст; аудіорепортаж; аудіоролик; аудфореклама; тощо.
Комплексний контент: конференція; мультимедійний проект; дослідження;
онлайн-вебінар; тощо.
12 правил як оформити пост в блозі, щоб його прочитали користувачі та знайшла пошукова система:
1)
Під час написання уявіть свого ідеального
читача;
2)
Створіть хороший, «позитивний» заголовок;
3)
Створіть цікавий вступ, який викликає емоції в
читача;
4)
4) Підберіть ключові слова. Задійте їх в
заголвку і у вступі;
5)
Зробіть текст легким для прочитання,
використовуючи абзаци, підзаголовки, списки;
6)
Оптимізуйте фотографії для блогу і пошукових
систем.
7)
Додайте посилання на попередні статті;
8)
Підпишіть пост власним іменем та вкажіть
спеціалізацію;
9)
Використайте постскриптума для важливої
інформації;
10)
Напишіть гасло-призив до дії: як діяти
користувачу далі;
11)
Розмістіть форму для невеликого опитування з
даної теми і помістіть під ним свій банер-бренд;
12)
Перевірте текст на помилки і на слова, які часто
повторюються.
10 порад для створення заголовків:
1)
Мова заголовка про вигідні пропозиції або
пропозиції щось зекономити;( Як, коли, по чому, скільки);
2)
Один заголовок – одна зрозуміла думка;(зрозумілість
і ясність)
3)
Заголовок-запитання, на які є безліч правильних
відповідей.(Чи вірно, 2+2=4?)
4)
Заголовок-дієслово! І призив до дії.
5)
Один-текст – один стиль;
6)
5 слів – така довжина найкращого заголовка;
7)
Ключова фраза – емоційна радість;
8)
Виділяйте підзаголовки кольором;
9)
Перед кожним тематичним блоком використовуйте новий
заголовок.
Коди основних елементів
мови HTML
Тег
|
Опис тега
|
Приклад
|
|
<html>
</html>
|
Позначення початку і кінця веб-документа
|
<html>
</html>
|
|
<head> <title>
</title> </head>
|
Позначення назви і заголовка веб-документа
|
<head>
<title>
</title>
</head>
|
|
<body> </body>
|
Позначення розпочата і кінця тексту (тіла)
веб-документа
|
<body>
</body>
|
|
<P> </p>
|
Позначення меж абзацу
|
<р> </р> <р> Це моє рідне місто.
</р>
|
|
<br>
|
Позначення переходу на новий рядок тексту
|
<р> Я дуже люблю поеми Шевченка, особливо: </р>
<р>СОН, <br> Гайдамаки </р>
|
|
<p align = "center"> </p>
|
Позначення абзацу, в якому текст вирівняний по центру
|
<р align = "center"> Київ - столиця
нашої Батьківщини. </р> <р> Це моє рідне місто. Він дуже гарний.
</р>
|
|
<p align = "right">
</p>
|
Позначення абзацу, в якому текст вирівняний по правому
краю
|
<р> Каменяр України, <br> Іван Франко </р>
<р align = "right"> Відомий поет</р>
|
|
<p align = "1eft">
</p>
|
Позначення абзацу, в якому текст вирівняний по лівому
краю
|
<р align = "left"> </р> <р
align = "center"> Довбай цю скалу <br> Коли маєш силу ...
</p>
|
|
<h1>
</h1>
або
<h2>
</h2>
|
Позначення абзацу, в якому знаходиться заголовок тексту
(можливо до шести видів заголовків залежно від рівня заголовка, тобто щодо
зменшення ступеня важливості)
|
<h1>Київ - столиця нашої Батьківщини </h1> <p> Це
історичне місто. </р> <h2> Головні пам'ятки Києва <h2> <p>
Це місто патріотів. </ р>
|
|
"<strong>
</strong>
|
Використовується для виділення фрагмента тексту
напівжирним шрифтом
|
<p> <strong>Київ </strong> - столиця
нашої Батьківщини. </р>
|
|
<em>
</em>
|
Використовується для виділення фрагмента тексту
курсивом
|
<р> <em>Вінниця </em> - перлина
Поділля. </р>
|
|
<u>
</u>
|
Використовується для виділення фрагмента тексту
підкресленням
|
<р> <u> Львів </u> - місто науки.
</р>
|
|
<s>
</s>
|
Використовується для перекреслення тексту
|
<р> У нас знижки! Стара ціна <s> 5000 грн.
</S>, нова ціна 1000 грн! </Р>
|
|
<sup>
</sup>
|
Створює верхній індекс
|
2 <sup> 2 </sup> = 4
|
|
<sub>
</sub>
|
Створює нижній індекс
|
Хімічна формула води: H<sub> 2 </sub> О
|
|
<font size = "+ 2"> </font>
|
Змінює вигляд шрифту, а саме: збільшує розмір букв у
зазначеному тегом фрагменті тексту на дві одиниці в порівнянні зі стандартним
розміром (стандартний розмір шрифту дорівнює 3)
|
<р> У нас знижки! Стара ціна 5000 грн., Нова ціна
<font size = "+ 2"> 1000 </font> грн! </Р>
|
|
<font size = "l">
</font>
|
Змінює вигляд шрифту, а саме: визначає розмір букв у
зазначеному тегом фрагменті тексту (всього можливі сьомій градацій розмірів
шрифту 1, 2, 3, 4, 5, 6, 7)
|
<p> <font size = "l"> ОДЕСА </
font> - південна ПАЛЬМІРА нашої Батьківщини.
|
|
<font color = "red"> </font>
|
Змінює вигляд шрифту, а саме: відмічені тегом фрагменти
тексту будуть червоного кольору (колір задається або RGB-позначенням в
шістнадцятковій системі, або англійською назвою одного з 16 базових кольорів:
BLACK - чорний, BLUE - синій, NAVY - темносиній, LIME - світло- зелений,
GREEN - зелений, SILVER - світло-сірий, AQUA - блакитний, OLIVE - оливковий,
RED - червоний, MAROON - коричневий, GREY - сірий, FUCHSIA - колір фуксії
(рослина), PURPLE - фіолетовий, YELLOW - жовтий, WHITE - білий, TEAL -
зеленувато-блакитний)
|
<p> <font со1ог = "red">ДНІПРО</font>
- місто козаків моєї Батьківщини. </р>
|
|
<body bgcolor = "silver" text =
"green"> </body>
|
Задає колір фону вебсторінки (bgcolor - background color), а
також колір тексту (в даному випадку - червоний) у всьому документі
|
<body bgcolor = "silver" text = "green
''> <p> Це мій Ліцей. Він знаходиться у Вінниці. </p> </body>
|
|
<body background = "fon01. jpg">
|
Дозволяє використовувати файл картинки (в даному
випадку графічний файл з ім'ям fon01.jpg) в якості фону веб-сторінки
|
<body background = "fon01. jpg> <p> Це
моя вулиця. Я живу у Вінниці. </p> </body>
|
|
<font face = '' courier new "> </font>
|
Змінює вигляд шрифту, а саме: задає гарнітуру шрифту
(рекомендується використовувати шрифти сімейства Times New
Roman, A rial, Tahoma, Courier; Courier New, які
найчастіше бувають встановлені на всіх комп'ютерах)
|
<p> <font face = "courier new">
Харків </font> - місто науковців. </р>
|
|
<ul>
<li>
</li>
</ul>
|
Створює невпорядкованості ий список, при цьому
обов'язково позначення кожного з елементів цього списку за допомогою тега
<Н>
|
<р> Столиці країн: <ul>
<li> Молдови- Кишинів, </li>
<li> Польщі - Варшава, </li>
<li> Болгарії - Софія, </li>
<li> Чехії - Прага, </li>
<li> Словаччини - Братислава, </li>
</ul> </р>
|
|
<ol>
<li>
</ li>
</ ol>
|
Створює впорядкований список, при цьому обов'язково
позначення кожного з елементів цього списку за допомогою тега <І>
|
<р> Країни Східної Європи:
<о1>
<li> Болгарія, </li>
<li> Польща, </li>
<li> Сербія</li>
<li> Словаччина </li>
<li> Словенія, </li>
<li> Чехія, </li>
<li> Хорватія </li>
</о1>
</р>
|
|
<a href="kdu.org"> </a>
|
Створить посилання вебсторінку в Інтернеті
|
<а href = "msu.ru"> Це посилання на
веб-сайт до університету.
</ а>
|
|
<а href = "file.htm"> </ а>
|
Створює посилання на інший файл (в даному випадку на
інший файл у форматі lit ml)
|
<а href = "file.htm">
Це посилання на файл з новими матеріалами про
університет. </ А>
|
|
<а href = "mailto: contact @ philol.ukr.net">
</а>
|
Посилання на адресу електронної пошти
|
<а href = "mailto: contact @
philol.msu.ru"> Це посилання на електронну поштову адресу ліцею
|
|
<img src = "kdu.jpg">
|
Вставка малюнка (графічного елементу). У веб документ
можна вставити зображення в форматах: gif, jpg (jpeg), png
|
Це фотографія мого університету. <Р> <iing src
= "mgu, jpg"> </р>
|
|
<img src = "mgu.jpg" width =
"65" height = "59" hspace = "15" vspace =
"15" align = "right">
|
Вставка графічного елементу із завданням параметрів
відображення картинки: ширини малюнка (width), висоти
малюнка (height), відстань від попереднього елемента
веб-документа до малюнка (по горизонталі - hspace - horizontal space), відстань
від інших елементів малюнка по вертикалі (vspace - vertical space)
і спосіб вирівнювання малюнка щодо тексту (обтікання малюнка текстом) -
вирівняного вправо
|
Це фотографія мого ліцею шириною близько 2 см і висотою
близько 1,8 см, вирівняна Bnpaвo. <Img src = "mgu.jpg" width =
"250" height = "250" hspace = "15"
vspace = "15" align = "right">
|
|
Практична
робота.
Мова розмітки HTML для гіпертексту.
Мова розмітки HTML для гіпертексту.
Приклад кодування властивостей
гіпертексту на веб-сторінці
мовою розмітки HTML
Завдання 1. Набрати в текстовому редакторі
Блокнот наступний текст і зберегти його у файл з розширенням html, а саме: Вінниця.html
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01
Transitional // EN" "w3.org/TR/html4/loose.dtd">
<html>
<head> <title> Mій ліцей </ title> </head>
<head> <title> Mій ліцей </ title> </head>
<body bgcolor = "silver" text = "green">
<p> Я вчусь у ліцеї №7. Він знаходиться в Вінниці в районі Єрусалимки. </р>
<p> Я вчусь у ліцеї №7. Він знаходиться в Вінниці в районі Єрусалимки. </р>
<р> Вінниця - це моє рідне місто. </р>
<р> Я дуже люблю вивчати історію Вінниці, особливо: </р>
<р> Я дуже люблю вивчати історію Вінниці, особливо: </р>
<р> Історія міста періоду І-ої світової війни;
<br> Історія міста періоду ІІ-ої світової війни;</p>
<br> Історія міста періоду ІІ-ої світової війни;</p>
<р align = '' center "> Історія міста періоду
відлиги;
<br> Історія міста періоду визвольних змагань</р>
<br> Історія міста періоду визвольних змагань</р>
<р align = "right"> Історія міста кінця
ХХ століття</р>
<р align = "left"> Доренко Максим </р>
<р align = "left"> Доренко Максим </р>
<р>Я вивчаю першоджерела кожного періоду в
державному архіві міста.
<br>Читаю старі
газети, журнали, статистичні довідники. </p>
<p align = '' center "> Вінниця має багату
історію, зокрема: </р>
<р> У місті Вінниці є знаменитий театр ляльок.</р>
<h1> Місто Вінниця має історичний музей.</h1>
<h1> Місто Вінниця має історичний музей.</h1>
<р> У центрі Вінниці є художній музей</р>
<h2> Місто Вінниця має музей літаків </h2>
<h2> Місто Вінниця має музей літаків </h2>
<р> Місто Вінниця має музей Пирогова </Р>
<p> <strong> Вінниця</ strong> - перлина Поділля. </Р>
<p> <strong> Вінниця</ strong> - перлина Поділля. </Р>
<р> <em> Вінниця</ em> - це моя Батьківщина. </Р>
<р> <u>Вінниця </ u> - це місто наукової та творчої інтелегенції </р>
<р> У нас у місті є світло-музичний фонтан.
<s>Сучасний фонтан розташований на річці Південний Буг</ S>, біля центрального мосту.</Р><p> Цікаво, що вздовж цієї річки між центральним та київським мостами розташовані красиві храми. <sup>1</sup> Річкою курсують туристичні катери. </р>
<р> <u>Вінниця </ u> - це місто наукової та творчої інтелегенції </р>
<р> У нас у місті є світло-музичний фонтан.
<s>Сучасний фонтан розташований на річці Південний Буг</ S>, біля центрального мосту.</Р><p> Цікаво, що вздовж цієї річки між центральним та київським мостами розташовані красиві храми. <sup>1</sup> Річкою курсують туристичні катери. </р>
<р> Вінницька формула цілющої вроди: щось на зразок, цілющої формули води:
H <sub> 2 </sub> О. </p>
H <sub> 2 </sub> О. </p>
<р> У місті Вінниці дуже низькі ціни на житло, <font size = +2> приблизно
1000 грн за 1 кв.од. </font> і навіть наймодерновіша архітектура
житлових масивів. </Р>
<p> <font size = '' 6 "> Вінниця </font> - це потужний обласний центр , повз який проходить міжнародна магістраль зі сходу на захід країни</р>
<p> <font size = '' 6 "> Вінниця </font> - це потужний обласний центр , повз який проходить міжнародна магістраль зі сходу на захід країни</р>
<p> <font color = "red">Вінниця </font> - зелене місто, що має аєропорт.
</р>
<p> <font face = "courier new"> Вінниця
</font> - це місто чистої води. </р>
<р>Вінниця має транспортні сполучення з столицями європейських країн:
<ul> <li> Молдови- Кишинів, </li>
<li> Польщі - Варшава, </li>
<р>Вінниця має транспортні сполучення з столицями європейських країн:
<ul> <li> Молдови- Кишинів, </li>
<li> Польщі - Варшава, </li>
<li>Болгарії - Софія, </li>
<li> Чехії - Прага, </li>
<li> Словаччини - Братислава, </li> </ul> </p>
<li> Чехії - Прага, </li>
<li> Словаччини - Братислава, </li> </ul> </p>
<р> У Вінниці є більше сотні підприємств та
заводів:
<ОL> <li>
завод штучних діамантів, </li>
<li> завод холодильних агрегатів, </li>
<li> завод холодильних агрегатів, </li>
<li> швейна фабрика «Вінничанка»,</li>
<li> швейна фабрика «Подолянка»,</li>
<li> швейна фабрика «Подолянка»,</li>
<li> завод «Маяк», </li>
<li> підприємство «ЦКБТ», </li>
<li> кондитерська фабрика «Roshen» </li>
</ОL> </р>
<li> підприємство «ЦКБТ», </li>
<li> кондитерська фабрика «Roshen» </li>
</ОL> </р>
<р> <а href = "https://sch7.edu.vn.ua">
Це посилання на веб-сайт нашого ліцею. </а> </р>
<р> <а href = ''E-mail: lyceum7@i.ua">
</а> </р>
<р> Це фотографія нашого ліцею шириною близько
6,5 см і висотою близько 5 см, вирівняна вправо. </р>
<img src = "Lyceum.png" width = "250" height = "250"
hspace = "15" vspace = "15" align = "right">
</body>
</html>
Завдання 2. Завантажте програму-браузер файл
з текстом завдання 1. Створена веб-сторінка повинна мати напрочуд файний вигляд
Немає коментарів:
Дописати коментар