|
|
Главная \ Методичні вказівки \ Web-програмування
Web-програмування« Назад
Web-програмування 24.07.2015 06:13
Міністерство освіти і науки, молоді та спорту України
Національний університет водного господарства та природокористування Кафедра економічної кібернетики
06-11-03 0 5 МЕТОДИЧНІ ВКАЗІВКИ І ЗАВДАННЯ
до виконання лабораторних робіт з дисципліни «Web-програмування» студентами 3 курсу напряму підготовки 6.030502 «Економічна кібернетика»
Рекомендовано до друку методичною комісією НУВГП за напрямом підготовки 6.030502 «Економічна кібернетика»
Протокол №___ від «___» _____ 2013 р.
Рівне – 2013
Методичні вказівки і завдання до виконання лабораторних робіт з дисципліни «Web-програмування» студентами 3 курсу напряму підготовки 6.030502 «Економічна кібернетика». 06-11-03 / Білан Б.С., – Рівне: НУВГП, 2013. – 28 с.
Упорядник: Б.С. Білан, ст. викладач кафедри економічної кібернетики
Відповідальний за випуск: П.М. Грицюк, д.е.н., професор, завідувач кафедри економічної кібернетики НУВГП
Зміст
Мова гіпертекстових розміток HTML.............................3 Основні поняття мови HTML...........................................3 Структура HTML-документа............................................4 Введення і форматування тексту .....................................5 Елементи BODY.................................................................7 Гіпертекстові посилання...................................................7 Формування списків .........................................................8 Використання графіки, картинок, кольору ….................9 Спеціальні теги HTML ....................................................10 Формування і публікація таблиць ..................................11 Створення форм в HTML.................................................12 Використання фреймів….................................................15 Пошукова оптимізація веб-сайту.....................................17 Етапи пошукової оптимізації веб-сайту .........................19 Лабораторні роботи № 1, 2 ..............................................22 Лабораторна робота № 3-5 ..............................................23 Лабораторна робота № 6-9 ..............................................24 Лабораторна робота № 10-12 ..........................................25 Лабораторна робота № 13-15...........................................25 Література..........................................................................26
© Білан Б.С., 2013 © НУВГП, Рівне, 2013
МОВА ГІПЕРТЕКСТОВИХ РОЗМІТОК HTML
Основні поняття мови HTML.
HyperTextMarkupLanguage (HTML) є стандартною мовою, призначеною для створення гіпертекстових документів у середовищі WEB. HTML – це мова гіпертекстової розмітки. HTML-документи можуть проглядатися різними типами броузерів. Використання HTML дозволяє форматувати документи для їхнього представлення з використанням шрифтів, ліній і інших графічних елементів. HTML-файл зазвичай складається з тексту, який необхідно донести до користувача і з допоміжних команд, які визначають структуру документу і його оформлення. Загальні характеристики HTML: розроблений спеціально для Web; має відкритий стандарт; доступний усім; включає гіпертекст; підтримує мільтимедіа. Мистецтво створення високоякісних Web-сторінок полягає в хорошій організації інформації. Користувач повинен мати перед очима структуру сторінки або її короткий зміст, для того щоб вибрати те що його цікавить. Дескриптор (тег) – це основний елемент кодування, який використовується в HTML. Елементи – це текст, зображення, гіперзв’язки, що можна побачити на сторінці. Усі теги HTML починаються із знака < (лівої кутової дужки) і закінчуються символом > (правої кутової дужки). Як правило, існує стартовий тег і завершальний тег, який іноді називають контейнером. Нариклад: <TITLE> Заголовок документа </TITLE> Завершальний тег виглядає також, як стартовий, і відрізняється від нього правим слешем перед текстом усередині кутових дужок. У даному прикладі тег <TITLE> говорить WEB-броузеру про використання формату заголовка, а тег </TITLE> - про завершення тексту заголовка. Деякі теги, такі, як <P> (тег, що визначає абзац), не вимагають завершального тега, але його використання додає вихідному тексту документа додаткові зручності при читанні і структурованні.
Структура HTML-документа.
Структура html-документа дуже схожа на організм людини (див. рис.). <HTML> ...тіло документа... </HTML> Найчастіше html-документ складається з таких частин: заголовок – назва даного документа, тіло документа – його наповнення (зміст) і закінчення – вказується прізвище автора, дата створення документа, номер версії і ін.
Всі HTML-теги можуть бути умовно розділені на дві категорії: службові теги – визначають, як буде відображатися WEB-броузером тіло документа в цілому і текст; неслужбові теги – описують загальні властивості документа, такі як заголовок чи автор документа.
<HTML> <HEAD> … службові теги … </HEAD> <BODY> … текст та інші теги … </BODY> </HTML>
<HTML> … </HTML> – початок-кінець документа; <HEAD> … </HEAD> – подає загальну інформацію про файл; <TITLE> … </TITLE> – визначає назву (заголовок) документа; <META> … </META> – повідомляє броузеру додаткову інформацію; <BASE> … </BASE> – задає базову адресу документу; <STYLE> … </STTYLE> – визначає загальний вигляд документа; <BODY> … </BODY> – визначає основну частину Web-сторінки, вказує на початок і кінець текстової та графічної інформації. Тіло документа може містити посилання на інші документи, текст і іншу інформацію. Більшість WEB-броузерів відображають вміст тега <TITLE> у заголовку вікна, що містить документ. Заголовок документа не з’являється при відображенні самого документа у вікні.
Приклад 1 (найпростіший html-документ): <HTML> <HEAD> <TITLE> Заголовок веб-сторінки </TITLE> </HEAD> <BODY> Зміст Web-сторінки (текст, списки, графіка і т.д.) </BODY> </HTML>
Введення і форматування тексту.
Коментарі.Мова НTML дозволяє вставляти в тіло документа коментарі, що зберігаються при передачі документа по мережі, але не відображаються броузером. Синтаксис коментаря: <!-- Це коментар --> Рівні заголовків <Hx>. Коли пишеться HTML-документ, то текст структурно поділяється на заголовки частин тексту, заголовки більш високого рівня і т.д. Перший рівень заголовків (найбільший) позначається цифрою 1, другий рівень – цифрою 2, і т.д. Більшість броузерів підтримує інтерпретацію шести рівнів заголовків, визначаючи кожному з них власний стиль. Заголовки вище шостого рівня не є стандартом і можуть не підтримуватися броузером. Заголовок найвищого рівня має ознака "1". Синтакс заголовка рівня 1 наступний: <H1> Заголовок першого рівня </H1> Заголовки іншого рівня можуть бути представлені в загальному випадку так: <Hx> заголовок x-го рівня </Hx>, де x - цифра від 1 до 6, що визначає рівень заголовка. HTML дозволяє використовувати різні стилі шрифтів для виділення текстової інформації в документах. Комбінування стилів дає можливість відображати в одному рядку кілька елементів різними стилями. <B>напівжирним шрифтом</B> <I>курсивом</I> <TT>моноширним шрифтом</TT> <U>підкреслити</U> <SUP>надстроковий</SUP> <SUB>підстроковий</SUB> <STRIKE>закреслити</STRIKE> <BIG>великим</BIG> <SMALL>малим</SMALL>
Деякі дескриптори: <P> - дескриптор абзацу, закриваючий відсутній; <P ALING= вираз> - дескриптор абзацу, вирівнювання абзаців та заголовків; параметр вираз може приймати значення: LEFT (по лівому краю), RIGHT (по правому краю), CENTER (по центру). <BR> - відділяє абзаци один від одного порожнім рядком, перехід на наступний рядок, аналог Enter; Додатковий параметр дозволяє розширити можності тега <BR>. <BR CLEAR=left|right|all> Даний параметр дозволяє виконати не просто переклад рядка, а розмістити наступну рядок, починаючи з лівої (left), правої (right) чи обох (all) границь вікна броузера. Наприклад, якщо поруч з текстом ліворуч зустрічається малюнок, то можна використовувати тег <BR> для зсуву тексту нижче малюнка: <HR> - дескриптор горизонтальної лінії. Може мати наступні атрибути: SIZE – товщина лінії в пікселях; WIDTH – довжина лінії в пікселях або відсотках від ширини екрану; ALIGN – вирівнювання лінії; COLOR – колір лінії; NOSHADE – лінія малюється без тіні. <FONT SIZE= значення> - задає розмір шрифту; <NOBR></NOBR> - нерозривний рядок. Рядокне буде переноситись навіть якщо він виходить за межі екрану; замість цього броузер дозволить горизонтально прокручувати вікно. <BLOCKQUOTE> - даний тег призначений для позначення в документі цитати з іншого джерела. Текст, позначений цим тегом відступає від лівого краю документа на 8 пробілів. <PRE></PRE>- контейнер форматування тексту. Елементи BODY.
<BACKGROUND> – задає колір або графічне зображення, яким заповнюється фон документа. Файл повинен мати розширення .GIF. Приклад:<BODY BACKGROUND=”(URL)(шлях) ім’я файла”> <BGCOLOR> – задає колір фону документа. Приклад: <BODY BGCOLOR=#RRGGBB> або <BODY BACKGROUND=”колір”> <TEXT> – задає колір тексту, який не є гіперпосиланням. Синтаксис: <BODY TEXT=”колір”> <LINK> – задає колір гіперпосилання. Синтаксис: <BODY LINK=”колір”> <ALINK> – задає колір активного гіперпосилання Синтаксис: <BODY ALINK=”колір”> <VLINK> – задає колір гіперпосилання, яке було відвідане Синтаксис: <BODY VLINK=”колір”>
Гіпертекстові посилання.
Гіпертекстові посилання є ключовим компонентом, що робить WEB привабливим для користувачів. Гіпертекстові посилання роблять набір документів зв’язаним і структурованим. Посилання мають стандартний формат, що дозволяє броузеру інтерпретувати їх і виконувати необхідні функції у залежності від типу посилання.
Існує три типи гіперпосилань: внутрішні, зовнішні і відносні. Внутрішніпосилання – це посилання на певні об’єкти, які містяться в межах одного документа. Такий тип посилань корисно використовувати на довгих сторінках, щоб користувачу було зручно швидко переміщуватись між розділами. Зовнішніпосилання – це посилання на об’єкти, які розміщені на іншому Web-сервері. Відносніпосилання– це посилання на об’єкти, які знаходиться на іншій Web-сторінці, розміщеній на тому ж сервері, що й сторінка, яка містить це посилання.
Для зовнішніх посилань використовують наступний синтаксис: <A HREF="URL"> текст, який буде підсвічений </A> Тег <A HREF="URL"> відкриває опис посилання, а тег </A> - закриває його. Будь-який текст, розміщений між даними двома тегами підсвічується спеціальним чином Web-броузером. Звичайно цей текст відображається підкресленим і виділеним синім кольором. Текст, що позначає URL, не відображається броузером, а використовується тільки для виконання запропонованих ним дій при активізації посилання. <A HREF="http://i.ua"> Це поштовий сервіс I.UA </A>
При внутрішніх посиланнях ви можете робити посилання на різні розділи того самого документа, використовуючи спеціальний прихований маркер для цих розділів. Це дозволяє швидко переходити від розділу до розділу усередині документа, не використовуючи смуги скролінгу. Для створення внутрішнього посилання необхідно виконати наступні кроки: 1. Створіть посилання на даний маркер (об’єктна прив’язка): <A HREF="#named_anchor"> Текст </A> 2. Створіть маркер. Синтаксис даного маркера наступний: <A NAME="named_anchor"> Текст, який відобразиться в першому рядку броузера </A>- відповідне ім’я об’єкту.
Формування списків.
Існує три види списків у HTML-документі: пронумерований, непронумерований, список описів. Ви можете створювати вкладені списки, використовуючи різні теги чи списки. Для цього просто необхідно розмістити одну пару тегів усередині іншої. OL - упорядкований (нумерований) список, UL - неупорядкований список, DL - список визначення, LI– використовують для визначення одного елемента списку.
В пронумерованому списку броузер автоматично вставляє номери елементів один за одним. Пронумерований список починається стартовим тегом <OL> і завершується тегом </OL>. Кожен елемент списку починається з тега <LI>. Тег <OL> може мати параметри: <OL TYPE=A|a|I|i|1 START=n>, де: TYPE - вид лічильника: A - великі латинські букви (A,B,C...) a - маленькі латинські букви (a,b,c...) I - великі римські цифри (I,II,III...) i - маленькі римські цифри (i,ii,iii...) 1 - звичайні цифри (1,2,3...) START=n - число, з якого починається відлік
Для непронумерованих списків броузер звичайно використовує маркери для позначки елемента списку. Вид маркера, як правило, набудовує користувач броузера. Пронумерований список починається стартовим тегом <UL> і завершується тегом </UL>. Кожен елемент списку починається з тега <LI>.
Використання графіки, картинок і кольору.
<IMG SRC=зображення> - використовують для вставки графічного зображення. <IMG SRC=bat.gifALIGN=LEFT> - використовують для плаваючих зображень. Атрибут VSPACE призначений для визначення простору над і під зображенням, а атрибут HSPACE – для визначення простору справа і зліва від зображення. Величини HEIGHT та WIDTH визначають розмір прямокутника, в який буде завантажений малюнок. Приклад (вставка графічних малюнків):<HTML> <HEAD> <TITLE>Приклад_3</TITLE> </HEAD> <BODY> <BODY BGCOLOR=#110000 TEXT=#ffffff> <H2 ALIGN=CENTER>Зображення</H2> Зображення <IMG SRC=al1.jpg ALIGN=TOP> для якого текст вирівнюється по верхньому краю.<BR> Зображення <IMG SRC=al2.jpg ALIGN=BOTTOM> для якого текст вирівнюється по нижньому краю.<BR> Зображення <IMG SRC=al3.jpg ALIGN=MIDDLE> для якого текст вирівнюється по центру.<BR> </BODY></HTML> Спеціальнітеги HTML
Наступні теги дозволять зробити HTML-документ більш функціональним. Існує велика кількість послідовностей для позначення спеціальних символів, деякі символи є керуючими символами в HTML і не можуть прямо використовуватися в документі: < - ліва кутова дужка <; > - права кутова дужка >; &amр; - pамперсанд &; " - подвійні лапки "; © - ©(copyright) – авторські права; &red; - ®(registered trademark) – товарний знак. Примітка: послідовності чуттєві до регістра: НЕ МОЖНА використовувати < замість <.
Створення і публікація таблиць.
<TABLE>...</TABLE> - тег, який описує таблицю у веб-документі. За замовчуванням таблиця не має обрамлення, воно добавляється атрибутом BORDER. <TR>...</TR> - кількість рядків таблиці. <TD>...</TD> - клітинки таблиці. <TH>...</TH> - заголовок таблиці. <CAPTION>...</CAPTION> - назва таблиці (підпис). <THEAD>...</THEAD>, <TBODY>...</TBODY>, <TFOOT>...</TFOOT> - це контейнери, які дозволяють додатково структурувати таблицю; з їх допомогою можна визначити групу рядків або стовпців і використати цю групу всередині таблиці. Основні атрибути таблиці: BORDER – відображає всі рамки таблиці; VALIGN – визначає вертикальне розміщення даних в клітинці; COLSPAN – вказує, яка кількість клітинок буде об’єднана по горизонталі; ROWSPAN - вказує, яка кількість клітинок буде об’єднана по вертикалі; COLSPEC - дозволяє задавати фіксовану ширину стовпчиків або в символах, або в процентах; BGCOLOR – зафарбовує таблицю; BORDERCOLOR – змінює колір рамки таблиці. Приклад (формування таблиць):
<HTML> <HEAD> <TITLE> Формування таблиць в HTML </TITLE> </HEAD> <BODY> <BODY TEXT=#000055> <!--Таблиця буде займати 70% ширини вікна.--> <p> <TABLE BORDER=5 BORDERCOLOR=blue WIDTH=70% ALIGH=CENTER> <CAPTION> Таблица _1 </CAPTION> <TR> <TH BGCOLOR=770000 ALIGN=CENTER ROWSPAN=2>Товар <TH BGCOLOR=yellow ALIGN=CENTER COLSPAN=2>Ціна </TR> <TR BGCOLOR=009900> <TD ALIGN=CENTER>1-9 шт. <TD ALIGN=RIGHT>Опт. </TR> <TR> <TD ALIGN=CENTER> Товар 1. <TD ALIGN=RIGHT> 1,99 <TD ALIGN=RIGHT> 255 </TR> <TR> <TD ALIGN=CENTER> Товар 2. <TD ALIGN=RIGHT> 2,00 <TD ALIGN=RIGHT> 235 </TR> <TR> <TD ALIGN=CENTER> Товар 3. <TD ALIGN=RIGHT> 3,69 <TD ALIGN=RIGHT> 155 </TR> </TABLE> </BODY> </HTML> Cворення форм в HTML.
Важливою складовою розробки Web-сторінок є використання форм. Замовлення книги через Internet-магазин, реєстрація на поштовому сервері, запит на пошук інформації – все це потребує заповнення різного роду форм. Форма – це спеціальна структура, яка дозволяє організувати на сторінці діалог з її користувачем. Розробник веб-сторінки створює форми за допомогою спеціальних елементів. Форми передають інформацію програмі обробки у вигляді пар: <sм'я поля> - <значення поля>. <FORM> структура форми </FORM> Синтаксис цієї структури має два основних параметра: ACTION і METHOD. Параметр ACTION є обов'язковим. Він вказує адресу обробника форми (наприклад, поштова адреса або просто адреса URL для переходу).Параметр METHOD не є обов'язковим. Він приймає одне з двох значень: GET або POST, пов'язаних з методом протоколу передачі інформації з анкети. За замовчуванням параметр METHOD= GET. Наприклад: <FORM ACTION = «http://www.google.com/» METHOD= POST>. Для задання керуючої кнопки запуску передачі даних треба записати наступну команду: <INPUT TYPE = submit NAME = «botton1» VALUE = «Довільний текст»> де: INPUT – команда створення керуючого елемента; TYPE – параметр, що визначає керуючий елемент; submit – значення цього параметра; NAME – параметр, що задає ім'я змінної; botton1 – ім'я змінної; VALUE – параметр, що відображає текст на елементі.
Основні типи керуючих елементів INPUT:
1. Один текстовий рядок TYPE=text визначає вікно для введення одного рядка тексту. Приклад: <INPUT TYPE = text NAME= «text1» SIZE = 30 VALUE = «Введіть текст»>. 2.Текстове поле для введення пароля: TYPE=password. Синтаксис аналогічний типу поля text, але при введенні кожний символ замінюється символом *. Приклад. якщо потрібно ввести пароль довжиною не більше 12 символів, то структура запису виглядатиме так. <INPUT TYPE = password NAME = pass SIZE = 20 maxlength = 12>. 3.Текстове вікно TEXTAREA. Задається в такому вигляді: <TEXTAREA NAME = text3 COLS = 30 ROWS = 5 WRAP = VIRTUAL> Спочатку заданий текст </TEXTAREA>. Параметр COLS задає кількість символів в рядку, параметр ROWS задає кількість рядків у вікні, необов'язковий параметр WRAP=VIRTUAL задає лінійку прокрутки. 4.Радіокнопка TYPE=radio. Може бути задано декілька радіокнопок з однаковим ім'ям (тобто з однаковим значенням параметра NAME), але вони будуть взаємно виключаючими, тобто може бути натиснена тільки одна з них. Приклад: <INPUT TYPE = radio NAME = color VALUE = «Червона» CHECKED> . 5.Прихований текст TYPE=hidden. При відображенні не видний користувачеві. Служить для прямої передачі службової інформації від домашньої сторінки обробнику форми, прозоро для користувача. 6.Меню вибору SELECT надає користувачеві можливість вибрати одну із пунктів списку. Команда SELECT може містити атрибут MULTIPLE, при якому можна вибрати декілька елементів меню одночасно. Якщо в рядку OPTION заданий атрибут checked, то даний елемент задається по замовчанню. 7.Кнопка введення TYPE=submit. Це і є та сама кнопка, про яку ми так часто згадували. Приклад: <INPUT TYPE = submit VALUE = «Введення даних»> 8.Кнопка скасування TYPE = reset виконує ініціалізацію початковими значеннями всіх полів. Приклад: <INPUT TYPE = reset VALUE = «Очистити поля»>. 9. Команди META Основне призначення команд META – інструкції для пошукових машин про тематику Вашої сторінки. Для цих цілей використовуються наступні параметри: - title – опис заголовків кожної веб-сторінки сайту; - description – короткий опис кожної веб-сторінки; - keyword – список ключових слів веб-сторінки.
<META HTTP-EQUIV = «Content-type» CONTENT = «text/html; charset=windows-1251»> для правильного кодування і відображення в системі Windows-1251. <META HTTP-EQUIV = «Content-type» CONTENT = «text/html; charset=koi8-r»> для правильного кодування і відображення інформації в KOI-8.
Приклад (створення форм в HTML): <HTML> <FORM method="post" action="http://vino.com/zakaz.asp" name="primer"> <P> ПІП <INPUT type="text" name="fio" zise="20"> Повнолітній <INPUT type="checkbox" name="SovershLetn" value="ON" checked></P> <P> Заказ <SELECT size="1" name="zakaz"> <OPTION value="Мінеральна"> Острозька </OPTION> <OPTION value="Мінеральна" selected> Трускавецька </OPTION> <OPTION value="Мінеральна"> Моршинська </OPTION> </SELECT></P> <P> Форма оплати <SELECT size="3" name="Raschet" multiple> <OPTION selected> За готівку </OPTION> <OPTION> Безготівковий розрахунок </OPTION> <OPTION> Бартерний розрахунок </OPTION> </SELECT></P> Особливі умови замовлення <TEXTAREA rows="2" name="Yslovia" cols="24"> Швидко!</TEXTAREA> <P> <INPUT type="submit" value="Замовити" name="OKbutton"></P> </FORM> </HTML>
Використання фреймів.
Фрейми – це ще один із способів створення унікального інтерфейсу Web-сервера. Він дозволяє розділити сторінку на частини, в кожній з яких можна створити окремий інтерфейс. Якщо матеріали web-сайту структуровані логічно за темами і мають базуватися на декількох сторінках з навігацією за допомогою гіперпосилань, то такий сайт реалізовують із застосуванням фреймів. Фрейм у перекладі з англійської означає кадр, рамка, прямокутна область. Фрейми поділяють вікно браузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логічний заголовок. Наприклад, типовим є сайт, де вікно браузера поділене на дві вертикальні області. У вужчій (до 25% від ширини вікна браузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій — вибрану користувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. Зміст чи у цьому випадку увесь лівий фрейм називають навігаційною панеллю. Навігаційну панель можна створити у верхній частині вікна браузера, справа чи де завгодно. Часто у верхній частині створюють третій вузький фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо. Важливо на етапі створення веб-сайту заздалегідь продумати фреймову структуру, визначитися з кількістю фреймів, їхніми розмірами, розташуванням і стартовим виглядом. Для створення сайту із застосуванням фреймів потрібно скласти як мінімум три html-файли: один основний і два чи більше допоміжні. Один допоміжний файл потрібний для заповнення стартовою інформацією лівого фрейму, інший - правого. <FRAMESET>...</FRAMESET> - тег, який використовується для створення фреймів. У фреймах можуть використовуватися такі параметри ROWS – розділяє сторінку по горизонталі; SCROLLING – приймає значення yes, no та auto. Дозволяє визначити будуть присутні лінії прокрутки чині.; NORESIZE – використовують для закріплення меж; COLS – розділяє сторінку по вертикалі; MARGINWIDTH, MARGINHEIGHT – використовують для визначення правого/лівого та верхнього/нижнього полів. Приклади фреймів:<HTML> <HEAD> <TITLE>Приклад фрейма</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME SRC="pr2.html" MARGINWIDTH=15 MARGINHEIGHT=15> <FRAME SRC="pr13.html"> </FRAMESET> </HTML>
<HTML> <!-- Це випадок, коли тег <body> може бути відсутнім --!> <frameset cols="20%, 80%" border=0> <!-- Опис фреймів. Вони будуть розташовані вертикаль-ними смугами (про це говорить параметр cols, для горизонталь-них смуг треба замість нього використати параметр rows) і займати 20 і 80 процентів робочої області. Параметр border визначає кордон між фрагментами.--!> <FRAME src="menu.htm" name="Menu"> <!-- Визначення документа, що початково завантажується при відкритті цього файла. Тут параметр name (ім'я фрейму) необхідно вказувати.--!> <FRAME src="hello.htm" name="Info"> </FRAMESET> </HTML>
<HTML> <BODY> <br> <а href="about.htm" tagert="Info"> Про мене </а> <br> <а href="books.htm" tagert="Info"> Про сім‘ю </а> <br> <а href="link.htm" tagert="Info"> Цікаві лінки </а> </BODY> </HTML>
Пошукова оптимізації веб-сайту.
Пошукова оптимізація сайту або SEO (англ. search engine optimization) – це процес коректування HTML-коду, текстового наповнення (контенту), структури веб-сайту і його графічних елементів для відповідності вимогам алгоритмів пошукових систем, з метою підняття позиції сайту в результатах пошуку в цих системах за певними ключовими запитами користувачів. Чим вище позиція сайту в результатах видачі пошукових систем, тим більша ймовірність, що відвідувач перейде на цей веб-ресурс з пошукових систем, оскільки люди зазвичай йдуть за першими посиланнями, що є у видачі пошукової системи. Разом з появою і розвитком пошукових систем в середині 1990-х років минулого століття з'явилася і оптимізація. Перші SEO-технології передбачали коригування контенту та мета-тегів. Внаслідок цього високі місця у пошуку стали займати сайти, котрі не містили корисного змістового навантаження, а лише популярні пошукові запити. З появою технології PageRank більше ваги приділяється зовнішнім чинникам. Це допомогло Google вийти в лідери пошуку у світовому масштабі, усклад-нивши оптимізацію за допомогою одного лише тексту на сайті. Проте оптимізація розвивається разом з пошукачами, і в сучасних результатах пошуку можна бачити все більше і більше комерційних сайтів з штучно роздутою популярністю, особливо по комерційно привабливих запитах. Пошукова система враховує наступні параметри сайту при обчисленні його релевантності (ступені відповідності введеному запиту): частота ключових слів; складні алгоритми сучасних пошукових систем дозволяють проводити семантичний аналіз тексту, щоб відсіяти пошуковий спам, коли ключове слово зустрічається дуже часто (більше 7-8 відсотків від всього вмісту) або дуже рідко (1-3 %) на сторінці. Оптимальна щільність ключових слів: 5-7 % від текстового вмісту веб-сторінки, при цьому ключові слова (фрази) повинні зустрічатися в тексті як мінімум 3-4 рази; індекс цитування сайту (тИЦ), або кількість веб-ресурсів, що посилаються на даний веб-сайт; багатьма пошукачами не враховуються взаємні посилання (один на одного), також важливо, щоб посилання були з сайтів схожої тематики, що і розкручуваний (оптимізовуваний) сайт. Відповідно, всі чинники, що впливають на положення веб-сайту у видачі пошукової системи, можна розбити на зовнішні і внутрішні. Робота по оптимізації включає роботу: з внутрішніми чинниками, які знаходяться під контролем власника веб-сайту) – це приведення тексту і розмітки сторінок у відповідність з вибраними запитами, поліпшення якості і кількості тексту на сайті, стилістичне оформлення тексту (заголовки, шрифти і ін.), поліпшення структури, використання внутрішніх пересилань; зовнішніми чинниками - це обмін посиланнями між сайтами, реєстрація в «білих» каталогах та інші заходи для підвищення і стимулювання кількості і частоти посилання на веб-ресурс. Пошукова SEO-оптимізація може послужити постійним джерелом збільшення кількості відвідувачів (90% користувачів знаходять нові веб-сайти через пошукові системи; 55% онлайн покупок і замовлень здійснюються на сайтах, знайдених через пошукові системи). Високий рівень довіри до пошукових систем дозволяє отримати великий відсоток конвертації відвідувачів. Люди, які потрапляють на сайт через пошукові системи це цілеспрямовані користувачі мережі, які вже сформували свої інтереси і шукають саме ту послугу, яку Ви пропонуєте. І тому пошукова оптимізація є джерелом найякісніших відвідувачів для сайту. Роботи з позиціонування сайту в пошукових системах – це один з важливих заходів щодо залучення цільової аудиторії. До найпопулярніших пошукових систем слід віднести META, Яндекс, Rambler, Yahoo, Google. Основні чинники, що впливають на позицію сайту у видачі пошукової системи є: внутрішня оптимізація сторінки; зовнішні посилання на сайт; вік сайту і наявність ключових слів в URL-адресі сайту. Основні етапи пошукової оптимізації сайту.
Оптимізація сайтів під пошукові системи – дуже важливий і відповідальний процес, від якого дуже залежить коефіцієнт відвідуваності веб-ресурсу, а значить і ефективність сайту як інструменту продажів. Це цілий комплекс заходів, спрямованих на адаптацію сайту під пошукові системи, шляхом збільшення релевантності сторінок за певними запитами користувачів і підтримки сайту тематичним контентом. Зараз єдиним шляхом завоювання високого місця сайту в інтернет-просторі є оптимізація і просування сайту в пошукових системах. З кожним роком число користувачів Інтернету невпинно зростає. А це означає, що пошукова SEO-оптимізація приносить все більше і більше вигоди власникам сайту. Основні етапи оптимізації сайту і пошукового просування: аналіз веб-ресурсу; складання семантичного ядра для пошукової оптимізації; оптимізація сайту (тексти, навігація, код); пошукове просування веб-сайту; реєстрація сайту в каталогах, на дошках оголошень і форумах; робота з зовнішніми посиланнями. Пошукову оптимізацію можна розділити на внутрішню і зовнішню. Внутрішня оптимізація сайту направлена на роботу з самим сайтом. До неї відноситься складання семантичного ядра сайту. Семантичним ядром є сукупність запитів (ключових слів), змісту яких відповідає інтернет-ресурс. Створюється семантичне ядро з урахуванням специфіки сайту з найбільш поширених і відповідних ключових слів. За таким списком ключових слів відстежується просування сайту. Правильно підібрані ключові слова стануть ефективною зброєю в конкурентній боротьбі. Є декілька рекомендацій по використанню ключових слів на сторінках інтернет-ресурсів. Поради з використання ключових слів і словосполучень: завжди використовуйте більш ніж одне слово при формуванні ключових запитів (дослідження показують, що більшість людей вводять в рядок пошуку саме фразу, а не одне слово); уникайте популярних ключових запитів (сайту доведеться конкурувати з мільйоном інших подібних сторінок, серед яких ті, що належать могутнішим компаніям); оптимальна частота ключових слів дорівнює 5% (використання більшої кількості ключових фраз може перетворити ваш документ на спам). Оптимізація сторінок сайту. До неї входять роботи з html-кодом і текстами (контентом) сторінок. При оптимізації коду проводиться правка безпосередньо html-коду, корекція META-тегів, заголовків, описів сторінок сайту, виділення потрібних частин сторінки спеціальними тегами. Всі тексти веб-сторінок аналізуються і коректуються відповідно до ключових слів. Основні чинники ранжування, на які треба звернути увагу: Теги title (заголовки веб-сторінок сайту) – найбільш важливий параметр, на який слід звернути особливу увагу. У заголовки сторінок слід прописувати слова, по яких ви плануєте провести оптимізацію сайту, але не слід забувати про те, що текст, що міститься в заголовку сторінки, видаватиметься в результатах пошуку. Отже, заголовок сторінки повинен бути інформативним і привабливим. Поширена помилка – використання одного заголовка для всіх сторінок веб-сайту. Для кожної сторінки заголовок повинен розроблятися окремо, відповідно до змісту. Тег meta name="description" - практично ніяк не впливає на ранжування сайту, проте опис видається пошуковою системою, якщо ваш сайт буде знайдений, тому все ж таки варто скласти грамотний опис сторінки і включити його в даний тег. Теги заголовків h1-h6 – відіграють дуже велику роль при ранжуванні сайту. Рекомендується включати ключові слова в дані теги. Також можна оформляти дані теги за допомогою стилів CSS, але в межах розумного, тобто заголовок h1 повинен бути основним заголовком сторінки, h2 - підзаголовком і так далі. При спробі включити весь текст на сторінці в даний тег, ваш сайт може бути взагалі виключений з результатів пошуку, так що рекомендуємо вам користуватися даними тегами обережно і не зловживати ними. Тегами акцентування <b> (жирний шрифт) рекомендується виділяти ключові слова на сторінці, це може дати перевагу при ранжуванні сайту. Оптимізація структури сайту. Включає зміну внутрішніх посилань на сторінки і створення карти сайту (щоб пошуковий робот зміг проіндексувати всі сторінки). Після таких робіт пошуковим роботам буде простіше і зручніше працювати із всіма сторінками сайту, а це прискорює їх індексацію. Використовуйте текстові внутрішні гіперпосилання на всі сторінки сайту з ключовими словами і словосполученнями. Пошукові системи дуже добре розпізнають такі посилання. Для зовнішніх гіперпосилань використовуйте прямі гіперпосилання вигляду <а href = http://www.biathlon.com.ua/>. Використання складних скриптів Java, PHP і ін. для формування гіперпосилань краще не використовувати. За наявності великої кількості сторінок на сайті, зробіть карту сайту. Можна навіть розбити її на декілька сторінок так, щоб одна сторінка не містила більше 50 посилань (це ускладнює роботу пошукового робота). Запам’ятайте «правило трьох кліків» і притримуйтеся цього правила: всі сторінки веб-сайту повинні бути доступні користувачеві на відстані не більше трьох переходів від головної сторінки Вашого веб-ресурсу. Намагайтесь не використовувати на сторінках сайту велику кількість flash і графіки, сторінка не має дуже багато «важити». До зовнішньої оптимізації відносяться дії, пов’язані з підвищення «дружності» до інформаційно-пошукових систем і авторитетних інтернет-ресурсів. Уникання «поганих» посилань з «чорних» каталогів. З тих пір, як збільшення посилань стало одним з важливих чинників ранжування, число каталогів сайтів зросло. Пошукові системи негативно відносяться до численних «чорних» каталогів сайтів. Посилання на Ваш веб-сайт з таких каталогів може нашкодити Вашому веб-ресурсу. ЗАВДАННЯ ДЛЯ ЛАБОРАТОРНИХ РОБІТ Лабораторні роботи № 1, 2. Базові поняття мови HTML. Структура документів HTML. Активні і пасивні елементи електронних документів. Введення і форматування тексту.
Мета: навчитися форматувати документи для їхнього представлення у Web з використанням шрифтів, ліній і інших графічних елементів на будь-якій системі, що їх переглядає.
План заняття:
- назва сторінки має бути “Перша сторінка Іванова”; - заголовок 1-го рівня “Привіт! Це моя перша сторінка” розмістити по центру сторінки, жирним та червоним; - провести блакитну горизонтальну лінію на всю ширину екрану; - набрати відомості про себе (ім’я, школа, майбутня професія, захоплення), кожним абзац набрати іншим шрифтом, розміром, кольором; розмістити текст по різному відносно меж сторінки; - збережіть файл з ім’ям pr1.htm. Прогляньте, як працює програма.
Лабораторні роботи № 3-5. Технологія роботи з текстом і зображеннями. Створення списків. Використання графіки, різноманітних шрифтів, стилів, ліній і кольору. Розміщення ілюстрацій. Формування таблиць, Java-скриптів і форм.
Мета: навчитися форматувати документи для їхнього представлення у Web з використанням списків, таблиць, кольору, гіпертекстових посилань і ін.. на будь-якій системі, що їх переглядає.
План заняття:
Відомість заробітної плати працівників
Лабораторні роботи № 6-9. Проектування і розробка власної Web-сторінки. Наповнення сайту змістовними матеріалами.
Мета: навчитися створювати найпростіші web-документи для їхнього представлення в мережі Інтернеті з використанням списків, графічних зображень, кольору, гіпертекстових посилань і ін.
Вимоги до роботи: за допомогою HTML створити власний веб-сайт, який складається не менш, ніж з 5 веб-сторінок (наприклад: головна, про мене, моя школа, моя професія, мої захоплення і ін..).
Робота повинна містити:
Лабораторні роботи № 10-12. Організація гіпертекстових посилань. Розміщення і публікація сайту в мережі Інтернет.
Мета: навчитися створювати документи з використанням внутрішніх і зовнішніх гіпертекстових посилань для їхнього представлення в мережі Інтернеті з використанням списків, графічних зображень, кольору, гіпертекстових посилань і ін. План заняття:
Для довідки. Безкоштовний хостинг передбачає надання провайдером дискового простору для розміщення сайту в Інтернеті. Безкоштовний хостинг, зазвичай, існує за рахунок реклами, що розміщується на сторінках сайтів. Ця реклама може бути у вигляді банерів, текстових посилань, рекламних фреймів, спливаючих вікон, хоча існують безкоштовні хостинги, які не розміщують на сайтах жодної реклами. Основні недоліки безкоштовного хостингу: невеликий об’єм, що надається для сайту; низька надійність і стабільність серверного майданчика; повільне завантаження сайтів; присутність реклами; часто відсутня підтримка PHP, баз даних та інших даних, що необхідні для повноцінного функціонування сайту; відсутність гарантій постійного надання послуг.
Лабораторні роботи № 13-15. Оптимізація коду і структури сайту. Реєстрація сайту в каталогах. Створення карти сайту.
Мета: навчитися проводити внутрішню і зовнішню SEO-оптимізацію сайтів, здійснювати SEO-опис сторінок, реєструвати сайти в «білих» каталогах Інтернету, створювати карту сайту.
План заняття:
ЛІТЕРАТУРА
Методична література
ДЛЯ ЗАМІТОК КомментарииКомментариев пока нет Пожалуйста, авторизуйтесь, чтобы оставить комментарий. |
||||||||||||||||||||