Чи потрібно маркетологу знати мову розмітки гіпертексту (HyperText Markup Language), тобто HTML? Цією мовою розмовляють між собою верстальники, і крім браузерів певною мірою його можуть розуміти інші програмісти та розробники. І хоча на рівень продажів знання HTML прямо, напевно, і не впливає, все ж таки здатність орієнтуватися в основах цієї мови не буде зайвою навіть для маркетолога.

І перше, що необхідно зробити, це відкинути скептицизм, пов'язаний з думкою, що здолати навіть основи HTML вам не під силу - не переживайте, подібні сумніви рояться в головах багатьох людей. І хоча, можливо, вам і не доведеться постійно перетинатися з цими питаннями у межах ваших посадових обов'язківабо роботи в LPgenerator, проте пропонуємо все ж таки ознайомитися з базовими принципами цієї мови. Принаймні, ви зможете не тільки потоваришувати з HTML, але й стати ближче до тих людей у ​​вашій компанії/команді, для яких ця мова є рідною:)

Що таке HTML?

Як уже згадувалося, HTML - це мова гіпертекстової розмітки, за допомогою якої наші колеги верстальники безпосередньо створюють структуру web-сторінок (одним з різновидів яких є лендинги) та email-листів.

Якщо пояснити суть даного поняття простими і наочними образами, можна сказати, що HTML — це тіло, а CSS (Cascading Style Sheets — каскадні таблиці стилів) — одяг. У той час як CSS визначає зовнішній вигляд web-сторінки, HTML формує її структуру (скелет) у вигляді заголовків, списків та інших подібних елементів, починаючи з початку сторінки — хедера, і по її кінця — футера.

Недарма також сказано, що HTML – це мова розмітки: саме міткиабо як їх ще називають теги (tags), укладені в кутові дужки, формують ті елементи, у тому числі і складається код HTML. Здебільшого елементи даної мовимають тег, що відкриває і закриває. Від правильного (валідного) використання останніх залежить не тільки адекватність структури веб-сторінки, а й правильність відображення інтернет-браузерами.

Основні функціональні поняття HTML

Як показано на прикладі HTML-коду, поміщеного нижче, він завжди починається з. Для браузера поява цього елемента вказує на те, що слід відображати HTML-структуру:

Тут буде розміщено заголовок

А тут буде перший абзац

Представлений невеликий варіант простого HTML-коду містить кілька елементів, що складаються, в свою чергу, з таких тегів як:

• — тег, що відкриває і закриває, що вказує на початок і закінчення тієї частини сторінки, в якій буде міститися її контент. Російською мовою цей тег перекладається словом «тіло»;

• - Знову-таки відкриває і закриває тег, що вказує на початок і закінчення заголовка. Усього таких тегів може бути 6, і вони відрізняються величиною шрифту — чим вище числовий порядок заголовка, тим меншими літерами він відображатиметься. Разом із тегом

  ,

  формує структуру самого контенту: зокрема мітки визначають початок та кінець абзаців тексту.

Таким чином, один за одним формуються різні елементи, які згодом будуть представлені на цільовій сторінці. Як ви, напевно, вже зрозуміли, для того щоб вказати на закриття певного тега, в HTML прийнято ставити слеш "/".

Для закріплення щойно отриманого навички можна дописати ще кілька рядків коду. До цього ми оперували в рамках "тіла" контенту, за яке відповідає тег , але поки що це тіло у нас без «голови». Виправити це прикре непорозуміння можна додавши наступні рядки:

Тут буде назва всієї сторінки

Тут буде заголовок, написаний найбільшим шрифтом

А це – вдосконалений, частково виділений жирним шрифтомабзац.

Тут буде теж заголовок, але не такий помітний, як попередній — він буде виконаний дрібнішим шрифтом

Ще один абзац для повноти картини.

По суті, наведений вище другий фрагмент HTML коду - це розширений варіант першого:

• з'явилося титульненазва сторінки, яка розміщена між тегами , які, своєю чергою формують заголовну, а чи не контентну частиною сторінки, оскільки вони розміщені всередині тега , а не ;
• з'явився ще один заголовок нижчого порядку (він буде менш помітним), який буде розміщено в рамках
  ;
• зміниться частина тексту в першому порядку абзаці: фраза, укладена в тег (російською мовою перекладається «сильна»), буде виділена жирним.

Так швидко відбувається нарощування коду, інтерпретуючи який інтернет-браузер розуміє те, чого від нього хоче добитися дизайнер і маркетолог.

Чи не такий страшний HTML, як його малюють, вірно?

Зрозуміло, що існує досить багато інших тегів, завдяки яким задаються Додаткові параметриструктури веб-сторінки. Однак навіть такого короткого оглядубуде достатньо для того, щоб не розгубитись, якщо вам доведеться зіткнутися з необхідністю вникнути в код.

Існує чимало якісних інтернет-ресурсів, присвячених тематиці HTML та CSS. Говорячи мовою маркетологів, можна сказати, що у цій ніші досить добре розвинений, і за бажання можна збільшити свої знання у цій сфері, знайшовши потрібний ресурс зокрема й у російськомовної частини Мережі.

Побита фраза про те, що знання - це сила, не втрачає своєї актуальності, а уточнений її варіант. застосуваннязнання - це сила» може принести ще ліди та фінансові дивіденди. І хто знає, можливо більш глибоке розуміння того, як на рівні HTML влаштований і функціонує ваш лендинг, допоможе вам повніше використовувати існуючі або навіть впровадити якісь нові прийоми, які можуть сприяти збільшенню продажів.

Якщо все-таки у вас немає бажання або часу - всі ми люди зайняті - вникати в HTML, завжди залишається можливість використовувати для створення якісної цільової сторінки.

Також до ваших послуг відділ верстки нашої компанії ( [email protected]сайт), який із задоволенням виконає будь-яку вашу забаганку в рамках платформи: слайдери, поп-апи, складні лід-форми, галереї тощо. У нашому редакторі можна все!

Високих вам конверсій!

Ігор Кізін,

керівник відділу верстки LPgenerator

Давайте погодимося мати розбіжності.
Роберт Льюїс Стівенсон.

Це урок, у якому ми поговоримо про те, що таке мета-теги, Для чого і як вони використовуються при і як їх правильно заповнити.

Як я вже говорив у , мета-тегирозташовуються в заголовку html-сторінки, між тегами і, і ніяк не відображаються браузером (за винятком вмісту тега "title"). Тим не менш, мета-теги для сайту відіграють важливу роль. Їх додавання та оптимізація можуть суттєво допомогти сайту у його житті.

Рекомендую використовувати тільки ті метатеги, які реальнопотрібні для роботи сайту. Не захаращуйте область «head» зайвими інструкціями, т.к. Будь-яка помилка тут може призвести до сумних наслідків. Якщо знати, що робиш, то мета-теги будуть тільки на користь, якщо ж звалювати сюди все підряд, то можна отримати проблеми, що важко діагностуються.

ервий мета-тегдуже важливий. До того ж цей мета-тег однаково важливий і для пошукових систем, і для відвідувачів. Перші в ранжируванні результатів пошуку надають великого значення ключовим словам, що містяться в тезі «title», другі бачать його вміст у вигляді посилання на сайт у тих же результатах пошуку:

З одержиме цього ж мета-тегу відображається і в заголовку вікна :

У HTML мета-тег «title» додається так:

Вміст мета-тегу «title»

Основний вміст сторінки

Крім того, як я вже сказав раніше, ключові слова, які ти додаси в мета-тег "title", вкрай позитивно сприймуться пошуковими системами. Тому, заповнюючи цей тег, постарайся включити до нього правильні ключові слова. Про них, до речі, і йтиметься далі.

§ 2. Мета-тег "keywords" (ключові слова)

З початку коротко про те, а що, власне, таке ці «ключові слова».

Ті слова, які найповніше характеризують вміст html-сторінки та будуть для неї ключовими. Це може бути як окремі слова, і словосполучення, але вони обов'язковоповинні зустрічатися у тексті на сторінці. По них пошуковики визначають релевантність сторінки тому чи іншому запиту.

Наприклад, на цій сторінці ключовими словами будуть "мета-теги", "мета-тег title", "мета-тег keywords" і т.д.

Більш докладно про ключові слова, зокрема, і про оптимізацію сайту, взагалі, ми поговоримо в .

Щоб полегшити роботу пошукових систем, використовується мета-тег «keywords». У ньому вебмастер прописує ключові слова для сторінки. HTML-код мета-тега «keywords» виглядає так:

Список ключових слів">
Вміст мета-тегу «title»

Основний вміст сторінки

До променевих слів потрібно додавати по одному, через кому, в однині. Наприклад, не "ключові слова", а "ключовий, слово". До того ж, безвідповідальна поведінка вебмайстрів, які з метою отримання більш високих позицій у пошукових системах забивали мета-тег «keywords» не лише ключовими словами, а й численними похідними від них, призвело до того, що пошукові системиМайже перестали звертати увагу на цей тег. В даний час правильнозаповнений мета-тег «keywords» використовується пошуковими системами лише як один із багатьох факторів ранжирування (далеко не головний). Якщо ж вони бачать перед собою «keywords», в який запхали всі можливі варіації ключових слів, то це стає для них першим сигналом про неблагонадійність даної сторінки.

§ 3. Мета-тег "description" (опис сторінки)

З таким важливим мета-тегом є тег «description», в якому має міститися короткий опис сторінки. Саме "короткий" і саме "опис сторінки". Достатньо додати одну-дві невеликі пропозиції, в яких вказати про що і для кого ця сторінка.

Важливою особливістю мета-тегу «description» є та обставина, що у випадку його правильногозаповнення пошукові системи саме на його основі формують сніпет сторінки у видачі (короткий опис під посиланням на сторінку):

Якщо пошукачам не подобається те, як заповнений мета-тег «description», то сніппет формується зі шматочків фраз (насмоктаних з усієї сторінки), які релевантні запиту.

Таким чином, правильний мета-тег "description" обов'язково містить ключове слово (фразу) і коротко і точно описує те, про що і для кого сторінка. "Description" разом з "title" утворюють пару дуже важливих мета-тегів, від яких залежить те, чи перейде користувач з пошукової видачіна сайт чи ні! Тому його, як і «title», потрібно прописувати для кожноюсторінки!

H TML-код для створення мета-тегу "description" буде наступним:

Вміст мета-тегу "description"">
Вміст мета-тегу «title»

Основний вміст сторінки

Тепер перейдемо до опису основних технічних мета-тегів із групи «HTTP-EQUIV» (HTTP-еквіваленти).

§ 4. Технічні мета-теги

Технічні мета-теги для сайту значать дуже багато. З їх допомогою можна керувати відображенням сторінки, параметрами індексування тощо. На цьому уроці ми розглянемо основні технічні мета-теги.

• content-type- тип документа та його кодування. Цей мета-тег потрібний для правильного відображення символів браузером.
  Кодувань існує багато. Більшість із них тобі навіть ніколи не зустрінеться. Не кажучи вже про те, що ти їх використовуватимеш сам. Сучасні браузери визначають тип кодування атоматично, але для більшої впевненості можна вказати його самостійно. Якщо ти створюєш html-документ в операційній системі Windows, мовою якої є російська, то кодування буде «windows-1251», а код для вставки мета-тега такий:

  Вміст мета-тегу «title»

  Основний вміст сторінки
  

• content-language- Вказівка ​​мови документа. Значення цього необов'язкового мета-тегу використовується як пошуковими роботами, і web-серверами. Код для вставки:

  Вміст мета-тегу «title»

  Основний вміст сторінки
  

• refresh- час (в секундах), через який відбудеться автоматичне перезавантаження документа або перехід на іншу html-сторінку із заданою адресою (url). Наприклад, щоб виконувати атоматичне перезавантаження документа кожні 30 секунд, потрібно вставити цей мета-тег так:

  Вміст мета-тегу «title»

  Основний вміст сторінки
  

  А щоб через 5 секунд перейти на сторінку за адресою http://www.сайт/, потрібно записати так:

  Вміст мета-тегу «title»

  Основний вміст сторінки
  

• robots- мета-тег, який відповідає за налаштування індексування сторінки. У мета-тегу «robots» можуть бути такі значення:
  • index- сторінка індексується;
  • noindex- сторінка не індексується;
  • follow- гіперпосилання на сторінці враховуються;
  • nofollow- гіперпосилання на сторінці не враховуються
  • all- Замінює "index" і "follow", тобто. сторінка індексується та гіперпосилання на ній враховуються (діє за замовчуванням);
  • none- замінює "noindex" та "nofollow", тобто. сторінка не індексується та гіперпосилання на ній не враховуються.

  Код для вставки мета-тегу «robots»:

  Вміст мета-тегу «title»

  Основний вміст сторінки
  

authorі copyright- мета-теги, які дозволяють вказати авторство та власника контенту на сторінці. HTML-код для вставки:

Вміст мета-тегу «title»

Основний вміст сторінки

§ 5. Висновок

Це всі метатеги в HTML, які будуть потрібні новачкові. Інші специфічні і можуть знадобитися тобі після того, як наберешся досвіду і точно знатимеш, що робиш. З усіх вищеперелічених мною настійно рекомендую використовувати на кожноюсторінці сайту наступні:

заголовок сторінки

Про сталеві застосовуй при необхідності, але особливо не морочися. Пам'ятай, що мета-теги не зроблять твій сайт цікавим, вони можуть допомогти браузеру і web-серверу правильно відобразити сторінки сайту, а пошуковій системі їх знайти.

На цьому розділ мого сайту остаточно закінчено і далі йтиметься про те, з чого почати розкрутку та просування свого сайту в Інтернеті. Там же парочка моїх порад з особистого досвідуз оптимізації сторінок сайту. Тисні на «Далі».

Функція- це особливим чином написаний та оформлений фрагмент коду JavaScript, який можна викликати з будь-якого Web-сценарію на даній Web-сторінці (повторний код, як його часто називають). Отже, якщо якийсь фрагмент коду зустрічається у кількох місцях нашого Web-сценарію, найкраще оформити його як функції.

Власне код, заради якого і було створено функціяназивається тілом функції. Кожна функція, крім того, повинна мати унікальне ім'я, яким до неї можна буде звернутися. Функція також може приймати один або кілька параметрів та повертати результат, який можна використовувати у виразі.

Оголошення функцій

Перед тим, як функція буде використана десь у Web-сценарії, її потрібно оголосити. Функцію оголошують за допомогою ключового слова function:

function<имя функции>([<список параметров, разделенных запятыми>])
<тело функции>

Ім'я функції, як уже говорилося, має бути унікальним у межах Web-сторінки. Для імен функцій діють самі правила, як і імен змінних.

Список параметрів являє собою набір змінних, які при виклику функції будуть поміщені значення переданих їй параметрів. (Про виклик функцій буде розказано далі.) Ми можемо вигадати для цих змінних будь-які імена - все одно вони будуть використані тільки всередині тіла функції. Це так звані формальні параметрифункції.

Список параметрів функції поміщають у круглі дужки та ставлять після її імені; самі параметри відокремлюють один від одного комами. Якщо функція не потребує параметрів, слід вказати порожні дужки - обов'язково.

У межах тіла функції над прийнятими нею параметрами (якщо вони є) та іншими даними виконуються деякі дії та, можливо, виробляється результат. Оператор повернення return повертає результат з функції у вираз, з якого вона була викликана:

return<переменная или выражение>;

Тут змінна повинна містити значення, що повертається, а вираз повинен його обчислювати.

Приклад оголошення функції:

function divide(a, b) (
var c;
c = a/b;
return c;
}

Дана функціяприймає два параметри - a і b - після чого ділить a на b і повертає приватне від цього поділу.

Цю функцію можна записати компактніше:

function divide(a, b) (
return a/b;
}

Або навіть так, в один рядок:

function divide(a, b) ( return a / b; )

JavaScript дозволяє нам створювати так звані необов'язкові параметри функцій – параметри, які при виклику можна не вказувати, після чого вони набудуть певного значення за замовчуванням. Ось приклад функції з необов'язковим параметром b, що має значення 2:

function divide(a, b) (
if (typeof(b) == "undefined") b = 2;
return a/b;
}

Зрозуміло, що ми повинні якось з'ясувати, чи був виклик функції вказаний параметр b. Для цього ми використовуємо оператор отримання типу типу (він був описаний раніше). Якщо параметр b не було вказано, даний операторповерне рядок "undefined"; тоді ми створимо змінну з ім'ям b, як і в необов'язкового параметра, і надамо їй число 2 - значення цього параметра за замовчуванням, - яке буде використано в тілі функції. Якщо повернене оператором значення інше, то параметр b був вказаний під час виклику, і ми використовуємо значення, яке було передано з ним.

Функції та змінні. Локальні змінні

Оголошені раніше функції утворюють всередині свого тіла власні змінні. Це звані локальні змінні. Такі змінні доступні лише усередині тіла функції, у якому вони оголошені. При завершенні виконання функції, всі оголошені в ній локальні змінні знищуються.

Зрозуміло, будь-яка функція може звертатися до будь-якої змінної, оголошеної поза її тілом (змінною рівня Web-сторінки). При цьому слід пам'ятати про одну річ. Якщо існують дві змінні з однаковими іменами, одна - рівня Web-сторінки, інша - локальна, то при зверненні цього імені буде отриманий доступ до локальної змінної. Однойменна змінна рівня Web-сторінки буде "замаскована" своєю локальною "тезкою".

Виклик функцій

Після оголошення функції її можна викликати з будь-якого Web-сценарію, що є на цій же Web-сторінці. Формат виклику функції:

<имя функции>([<список фактических параметров, разделенных запятыми>])

Тут вказується ім'я потрібної функції та у круглих дужках перераховуються фактичні параметри, з яких потрібно виконати відповідні дії. Функція поверне результат, який можна присвоїти змінній або використовувати у виразі.

УВАГА!

При виклику функції підставляйте фактичні параметри, а не формальні, вказані в оголошенні функції.

Ось приклад виклику оголошеної раніше функції divide:

d = divide(3, 2);

Тут ми підставили вираз виклику функції фактичні параметри - константи 3 і 2.

А тут ми виконуємо виклик функції зі змінними як фактичні параметри:

s = 4 * divide(x, r) + y;

Якщо функція має необов'язкові параметри і задовольняють їх значення за замовчуванням, ми можемо при викликі не вказувати ці параметри, всі або деякі з них. Наприклад, функцію divide з другим необов'язковим параметром можемо викликати так:

s = divide(4);

Тоді змінної s виявиться число 2 - результат розподілу 4 (значення першого параметра) на 2 (значення другого, необов'язкового, параметра за замовчуванням).

Якщо функція не повертає результат, її викликають так:

initVars(1, 2, 3, 6);

Більше того, так можна викликати і функцію, яка повертає результат, який у цьому випадку буде відкинуто. Такий спосіб виклику може бути корисним, якщо результат, який повертається функцією, не потрібен для роботи Web-сценарію.

Якщо функція не приймає параметрів, при її виклику все одно потрібно вказати порожні дужки, інакше виникне помилка виконання Web-сценарію:

s = computeValue();

Функції можуть викликати одне одного. Ось приклад:

function cmp(c, d, e) (
var f;
f = divide(c, d) + e;
return f;
}

Тут ми використовували у функції cmp виклик раніше оголошеної функції divide.

Надання функцій. Функціональний тип даних

JavaScript дозволяє виконувати над функціями один фокус - надавати функції змінним.

Приклад:

var someFunc;
someFunc = cmp;

Тут ми надали змінній деякіFunc оголошену раніше функцію cmp. Зауважимо, що в цьому випадку праворуч від оператора привласнення вказують лише ім'я функції без дужок та параметрів.

Згодом ми можемо викликати цю функцію, Звернувшись до змінної, якою вона була присвоєна:

c = someFunc(1, 2, 3);

Тут ми викликали функцію cmp через змінну деякийFunc.

Змінна, якій присвоєно функція, зберігає дані, що стосуються функціонального типу. Це ще один тип даних, який підтримується JavaScript.

А можна зробити і так:

var someFunc = function(c, d, e) (
var f;
f = divide(c, d) + e;
return f;
}

Тут ми оголосили функцію і одразу ж надали її змінній. Як бачимо, імені оголошеної функції ми не вказали - в даному випадку воно не потрібне.
А ще JavaScript дозволяє нам вказати функцію як параметр іншої функції. Наприклад, розглянемо фрагмент JavaScript-коду нашого другого Web-сценарію:
ceLinks.on("mouseover", function(e, t) (
Ext.get(t).addClass("hovered");
});
Тут другий параметр функції on (загалом, це не функція, а метод об'єкта, але це потім) - інша функція, оголошена там же. Ця функція приймає два параметри та містить один вираз.

У наступних розділах, вивчаючи бібліотеку Ext Core, ми часто зіштовхуватимемося з функціями, які присвоюються змінним і передаються як параметр інших функцій. Настільки часто, що скоро звикнемо до цього.

Використовуються для надання інформації (метаданих) про веб-сторінку, метадані не відображаються на веб-сторінці, а дають або якісь вказівки браузеру, або надають додаткову інформаціюдля пошукових систем:

У нашому прикладі ми використали три елементи : перший вказує браузеру кодування HTML-документа, два інших мета теги призначені для надання інформації про вміст веб-сторінки для пошукових систем. Далі ми розглянемо кожен із них докладніше.

Примітка: теги повинні розташовуватися в елементі .

Кодування

Кодування говорить браузеру, який набір символів використовується на веб-сторінці. Наприклад, сторінки можуть бути написані з використанням кодувань для російської, англійської, арабської, китайської та безлічі інших сімейств символів.

Для вказівки кодування використовується тег з атрибутом charset, який рекомендується розташовувати як перший елемент усередині :

Примітка: UTF-8 є універсальним кодуванням, яке підтримує більшість мов і спецсимволів.

keywords (ключові слова)

Будь-який сайт має набір ключових слів і словосполучень, за якими пошукові системи шукають потрібні ресурси в мережі. Саме ці слова і повинні становити вміст ключових слів.

Найпростіший спосіб підібрати потрібні ключові слова для поточної сторінки - це визначити, за якими словами ви самі стали б шукати матеріал, представлений на ній? Оце і будуть потрібні ключові слова. Приклад:

Ключові слова вказуються через кому або пропуск і можуть бути написані в будь-якому регістрі. Рекомендується вказувати трохи більше 10-15 ключових слів чи словосполучень.

В даний час пошукові системи стали більш просунуті та визначають категорію, до якої належить інформація, за вмістом веб-сторінки, а ключові слова відійшли на другий план або повністю ігноруються.

description (короткий опис)

Значення description використовується для короткого описувмісту, розташованого на поточній сторінці. Рекомендована максимальна довжинатакого опису не має перевищувати 180 символів:

Короткий опис сторінки може бути використана пошуковими системами на сторінці з результатами пошуку під назвою сторінки та URL-адреси:

Також короткий опис використовується на сайтах деяких соцмереж, при додаванні посилання:

При складанні короткого опису слід враховувати такі моменти:

• в описі потрібно вказувати саме ту інформацію, яка відображає вміст, опублікований на цій сторінці;
• опис повинен бути унікальним і не повинен повторюватися для різних сторінок;
• намагайтеся в опис сторінки також включати необхідні ключові слова, які будуть враховуватись у пошукових запитах.

Примітка: короткий опис, розташований під посиланням на сторінці з результатами пошуку, називається сніпетом.

Тег

Всесвітня мережа виткана з WEB-сторінок (WEB-pages), а ці сторінки створюються за допомогою мови розмітки гіпертексту (Hypertext Markup Language, HTML). Хоча багато хто, особливо новачки, говорять сьогодні про "Програмування на HTML", HTML - це мова розмітки. Ви використовуєте HTML для розмітки текстового документа, так само, як це робить редактор за допомогою жирного червоного олівця. Ці позначки служать для визначення формату (або стилю), який буде використаний для виведення тексту на екран монітора.

Основи HTML

Перед вами короткий посібник з написання HTML. Багато хто досі пишуть HTML, а використовуючи засоби схожі на Notepad або SimpleText. Цей посібник допоможе вам отримати початкове уявлення про HTML. Навіть якщо ви не планували редагувати HTML безпосередньо, а використовувати HTML-редактор, такий як Netscape Composer або FrontPage, цей посібник допоможе вам використовувати ці засоби краще, а також робити ваші HTML-документи зрозумілими для більшості браузерів. Відчувши вигоди, які дає вам знання основ написання HTML, ви, можливо, захочете освоїти матеріал, розміщений у розділі Просунутий HTML.

Хороший спосіб навчитися – це подивитися, як інші люди пишуть коди своїх HTML-сторінок. Для цього виберіть у браузері пункт "View" ("Вид"), а потім "Source" ("У вигляді HTML").

Ця сторінка навчить вас як:

• додавати заголовки та параграфи
• виділяти текст курсивом
• змінювати колір та розмір тексту
• вставляти малюнки
• створювати посилання на інші сторінки
• використовувати різні видисписків

Якщо ви шукаєте щось ще, спробуйте Розширений HTML

Додавання заголовків та параграфів

Якщо ви користувалися Microsoft Word, вам має бути добре знайоме використання стилів для виділення заголовків за ступенем важливості. У HTML заголовки за ступенем важливості поділяються на шість рівнів. Н1 - найважливіший, Н2 - трохи менш важливий, і, нарешті, Н6 - найменш значущий.

Приклад того, як додати важливий заголовок:

Важливий заголовок

Результат:

Важливий заголовок

і трохи менш важливий:

Трохи менш важливий

Результат:

Трохи менш важливий

Кожен параграф, який ви напишете, повинен починатися тегом

І закінчуватися тегом

. Наприклад:

Це перший параграф.

А це другий параграф.

Виділення курсивом

Ви можете виділити одне або більше слів, використовуючи тег , приклад:

Це дійсно цікавийпункт!

Результат:

Це дійсно цікавийпункт!

Зміна кольору та розміру тексту

Тег FONT може бути використаний для вказівки кольору та розміру шрифту, яким буде виведено текст. У цьому прикладі встановлюється колір:

У цьому реченні є слово, виділений жовтим кольором.

Результат:

У цій пропозиції є слово, виділене жовтим кольором.

Атрибут sizeслужить для вказівки розміру шрифту в умовних одиницях від 1 до 7. Прийнято вважати, що розмір "нормального" шрифту відповідає числу 3. Розмір може бути вказаний як абсолютною величиною (SIZE=5), так і відносною (SIZE=+2):

Поради ветеринарноголікаря

Результат:

Поради ветеринарного лікаря

Вставка малюнків

Використання малюнків робить ваші сторінки цікавішими. Вставити малюнок дозволяє тег . Припустимо, що файл малюнка "peter.jpeg", шириною 200 пікселів і висотою 150, лежить у тій же папці, що і HTML файл.

Вказівка ​​ширини і висоти не є необхідною, але збільшує швидкість завантаження вашої WEB-сторінки. Слід задати опис зображення для людей, у яких вимкнено завантаження зображень. Ви можете додати короткий опис, використовуючи атрибут alt:

У WWW використовується два формати графічних файлів GIF та JPEG. Формат GIF використовується, коли потрібно прозоре зображення або анімація, а також для:

• чорно-білих малюнків та тексту
• зображень з обмеженою кількістю кольорів
• графіки з різкими контурами (меню, кнопки, діаграми тощо)
• зображень із текстом

Формат JPEG більше підходить у таких випадках:

• скановані зображення
• графіка зі складним поєднанням кольорів та відтінків
• будь-яке зображення з палітрою більш ніж 256 кольорів

Створення посилань на інші сторінки

Текст між івикористовується як опис посилання, що позначається зазвичай синім кольором, і підкреслюється лінією.

Списки

HTML пропонує три види списків. Перший вид називається маркованим (невпорядкованим) Списком. Маркований список відкривається тегом

а кожен його пункт починається стандартним тегом
• , приклад:
  • перший пункт списку
  • другий пункт списку
  • третій пункт списку

  Результат:

  • перший пункт списку
  • другий пункт списку
  • третій пункт списку

  Другий вид - нумерований (упорядкований)список. Він використовує теги

  і
  1. . Приклад:
     1. перший пункт списку
     2. другий пункт списку
     3. третій пункт списку

     Результат:

     1. перший пункт списку
     2. другий пункт списку
     3. третій пункт списку

     І останній – це список визначень (глосарій). Він представляє текст у формі словникової статті, що складається з визначеного терміну та абзацу, що розкриває його значення, відкривається тегом

     . Кожен термін відкривається тегом

     , а визначення тегом

     . Приклад:

     перший термін

     його визначення

     другий термін

     його визначення

     третій термін

     його визначення

     Результат:

     Перший термін його визначення другий термін його визначення третій термін його визначення

     Списки можуть бути вкладеними один в інший. Приклад:

     1. перший пункт списку
     2. другий пункт списку
        • перший пункт вкладеного списку
        • другий пункт вкладеного списку
     3. третій пункт списку

     Результат:

     1. перший пункт списку
     2. другий пункт списку
        • перший пункт вкладеного списку
        • другий пункт вкладеного списку
     3. третій пункт списку

     Визначення кольорів у HTML

     У HTML кольори визначаються цифрами у шістнадцятковому коді. Колірна система базується на трьох основних кольорах - червоному, зеленому та синьому. Для кожного кольору визначається значення від 00 до FF. Потім ці значення поєднуються в одне число, перед яким ставиться символ #. Ця таблиця демонструє різні кольори та їх шістнадцятковий код.

     FFF FFF

     CCC CCC

     999 999

     666 666

     333 333

     000 000

     FFC C00

     FF9 900

     FF6 600

     FF3 300

     99C C00

     CC9 900

     FFC C33

     FFC C66

     FF9 966

     FF6 633

     CC3 300

     CC0 033

     CCF F00

     CCF F33

     333 300

     666 600

     999 900

     CCC C00

     FFF F00

     CC9 933

     CC6 633

     330 000

     660 000

     990 000

     CC0 000

     FF0 000

     FF3 366

     FF0 033

     99F F00

     CCF F66

     99C C33

     666 633

     999 933

     CCC C33

     FFF F33

     996 600

     993 300

     663 333

     993 333

     CC3 333

     FF3 333

     CC3 366

     FF6 699

     FF0 066

     66F F00

     99F F66

     66C C33

     669 900

     999 966

     CCC C66

     FFF F66

     996 633

     663 300

     996 666

     CC6 666

     FF6 666

     990 033

     CC3 399

     FF6 6CC

     FF0 099

     33F F00

     66F F33

     339 900

     66C C00

     99F F33

     CCC C99

     FFF F99

     CC9 966

     CC6 600

     CC9 999

     FF9 999

     FF3 399

     CC0 066

     990 066

     FF3 3CC

     FF0 0CC

     00C C00

     33C C00

     336 600

     669 933

     99C C66

     CCF F99

     FFF FCC

     FFC C99

     FF9 933

     FFC CCC

     FF9 9CC

     CC6 699

     993 366

     660 033

     CC0 099

     330 033

     33C C33

     66C C66

     00F F00

     33F F33

     66F F66

     99F F99

     CCF FCC

     CC9 9CC

     996 699

     993 399

     990 099

     663 366

     660 066

     006 600

     336 633

     009 900

     339 933

     669 966

     99C C99

     FFC CFF

     FF9 9FF

     FF6 6FF

     FF3 3FF

     FF0 0FF

     CC6 6CC

     CC3 3CC

     003 300

     00C C33

     006 633

     339 966

     66C C99

     99F FCC

     CCF FFF

     339 9FF

     99C CFF

     CCC CFF

     CC9 9FF

     996 6CC

     663 399

     330 066

     990 0CC

     CC0 0CC

     00F F33

     33F F66

     009 933

     00C C66

     33F F99

     99F FFF

     99C CCC

     006 6CC

     669 9CC

     999 9FF

     999 9CC

     993 3FF

     660 0CC

     660 099

     CC3 3FF

     CC0 0FF

     00F F66

     66F F99

     33C C66

     009 966

     66F FFF

     66C CCC

     669 999

     003 366

     336 699

     666 6FF

     666 6CC

     666 699

     330 099

     993 3CC

     CC6 6FF

     990 0FF

     00F F99

     66F FCC

     33C C99

     33F FFF

     33C CCC

     339 999

     336 666

     006 699

     003 399

     333 3FF

     333 3CC

     333 399

     333 366

     663 3CC

     996 6FF

     660 0FF

     00F FCC

     33F FCC

     00F FFF

     00C CCC

     009 999

     006 666

     003 333

     339 9CC

     336 6CC

     000 0FF

     000 0CC

     000 099

     000 066

     000 033

     663 3FF

     330 0FF

     00C C99

     009 9CC

     33C CFF

     66C CFF

     669 9FF

     336 6FF

     003 3CC

     330 0CC

     00C CFF

     009 9FF

     006 6FF

     003 3FF

     Для простоти HTML визначено 16 стандартних кольорів, які разом з їх шістнадцятковими кодами наведені нижче.

     black = "#000000"	green = "#008000"
     silver = "#C0C0C0"	lime = "#00FF00"
     gray = "#808080"	olive = "#808000"
     white = "#FFFFFF"	yellow = "#FFFF00"
     maroon = "#800000"	navy = "#000080"
     red = "#FF0000"	blue = "#0000FF"
     purple = "#800080"	teal = "#008080"
     fuchsia = "#FF00FF"	aqua = "#00FFFF"

     Facebook

     Twitter

     Вконтакте

     Google+

     Підключення до інтернету