Вступ

1. Основні відомості

1.1 Про мову html

1.2 Створення веб-сайту

1.3 Основні положення

1.4 Структура документа

1.5 Теги тіла документа

1.6 Список базових тегів html

2. Додаткові відомості

2.1 Теги списків

2.3 Графіка усередині документа

2.4 Додавання стилів до документа

2.5 Спеціальні тэги html

2.6 Html форми

2.7 Html кадри

2.8 Html таблиці

2.9 Оптимізація графіки для web

2.10 Основи css

3. Опис створення сайту

3.1 Підготовка

3.2 Створення головної сторінки

3.3 Створення другої сторінки

3.4 Створення сторінки з описом міста

3.5 Сторінка із фотографіями

3.6 Сторінка із програмами

3.7 Сторінка з подяками

Висновок

Список використаної літератури

Вступ

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

До дипломної роботи прикріплений сайт як приклад того, що можна створити за допомогою мови HTML.

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

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

1.1 Про мову HTML

Hyper Text Markup Language (HTML) є стандартною мовою, призначеною для створення гіпертекстових документів у середовищі WEB. HTML-документи можуть переглядатися різними типами WEB-броузерів. Коли документ створено з використанням HTML, WEB-броузер може інтерпретувати HTML для виділення різних елементів документа та їх первинної обробки. Використання HTML дозволяє форматувати документи для їх подання з використанням шрифтів, ліній та інших графічних елементів на будь-якій системі, що їх переглядає.

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

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

HTML-теги можуть бути умовно поділені на дві категорії:

1. Теги, що визначають, як відображатиметься WEB-броузером тіло документа в цілому.

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

Запам'ятайте, що основна перевага HTML полягає в тому, що ваш документ може бути переглянутий на браузерах WEB різних типів і на різних платформах.

1.2 створіння Webсайту

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

Наприклад, HTML редактори, такі як Netscape Navigator Gold компанії Netscape, дозволяють створювати документи графічно з використанням технології WYSIWYG (What You See Is What You Get). З іншого боку, більшість традиційних засобів створення документів мають конвертери, дозволяють перетворювати документи до формату HTML.

Усі теги HTML починаються з "<" (левой угловой скобки) и заканчиваются символом ">(правої кутової дужки). Як правило, існує стартовий тег і завершальний тег. Для прикладу наведемо теги заголовка, що визначають текст, що знаходиться всередині стартового і завершального тега і описує заголовок документа:

Заголовок документа

Завершальний тег виглядає також, як стартовий, і відрізняється від нього прямим слішем перед текстом усередині кутових дужок. У цьому прикладі тег говорить WEB-броузеру про використання формату заголовка, а тег- про завершення тексту заголовка.

Деякі теги, такі, як

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

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

Заголовок документа

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

І

. Докладніше про теги

Буде написано нижче.

Коли WEB-броузер отримує документ, він визначає, як документ має бути інтерпретовано. Найперший тег, який зустрічається в документі, має бути тегом . Цей тег повідомляє WEB-броузеру, що ваш документ написано з використанням HTML. Мінімальний HTML-документ виглядатиме так:

Тіло документа...

Заголовна частина документа . Тег заголовної частини документа повинен бути використаний відразу після тега і більше ніде у тілі документа. Цей тег є загальним описом документа. Уникайте розміщувати будь-який текст усередині тега . Стартовий тэг поміщається безпосередньо перед тегом та іншими тегами, що описують документ, а завершальний тег</HEAD>розміщується одразу після закінчення опису документа. Наприклад: <TITLE>Список співробітників

Увага! Технічно, стартові та завершальні теги типу , і необов'язкові. Але рекомендується їх використовувати, оскільки використання даних тегів дозволяє WEB-броузеру впевнено розділити заголовну частину документа і безпосередньо смислову частину.

Заголовок документа . Більшість WEB-броузерів відображають вміст тега <TITLE>у заголовку вікна, що містить документ та у файлі закладок, якщо він підтримується WEB-броузером. Заголовок, обмежений тэгами <TITLE>і, розміщується всередині -тегів, як показано вище на прикладі Заголовок документа не з'являється при відображенні документа у вікні.

З кожним днем IT-сфера стає дедалі ширшою, і зростає попит на створення сайтів. Це призводить до збільшення кількості фахівців, які готові взятися за розробку сайту та його підтримку. Однак багато таких веб-майстрів користуються безкоштовними конструкторами і мають дуже невиразне уявлення про програмування та технічну складову сайту. Безумовно, юзабіліті, дизайн та контент дуже важливі, але технічно слабкий сайт із помилками в коді не зможе принести його власнику жодної вигоди. Тому за створення сайтів мають братися лише ті фахівці, які володіють мовами програмування та готові розробити сайт з нуля.

Які мови потрібно знати для створення сайтів?

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

серверна платформа;
серверне ПЗ;
наявність досвіду у створенні сайтів;
Вибрана база даних.

Найбільш популярні мови

Сайти	Популярність (Унікальні відвідувачі на місяць)	Back-end (Серверний)	База даних
Google.com	1,600,000,000	C, C++, Go, Java, Python	BigTable, MariaDB
Facebook.com	1,100,000,000	Hack, PHP (HHVM), Python, C++, Java, Erlang, D, Xhp, Haskell	MariaDB, MySQL, HBase Cassandra
YouTube.com	1,100,000,000	C, C++, Python, Java, Go	Vitess, BigTable, MariaDB
Yahoo	750,000,000	PHP	MySQL, PostgreSQL, VB.NET
Amazon.com	500,000,000	Java, C++, Perl	Oracle Database
Wikipedia.org	475,000,000	PHP, Hack	MySQL, MariaDB
Twitter.com	290,000,000	C++, Java, Scala, Ruby	MySQL
Bing	285,000,000	ASP.NET	Microsoft SQL Server
eBay.com	285,000,000	Java, JavaScript, Scala	Oracle Database
MSN.com	280,000,000	ASP.NET	Microsoft SQL Server
Microsoft	270,000,000	ASP.NET	Microsoft SQL Server
Linkedin.com	260,000,000	Java, JavaScript, Scala	Voldemort
Pinterest	250,000,000	Django, Erlang	MySQL, Redis
WordPress.com	240,000,000	PHP, JavaScript (Node.js)	MariaDB, MySQL

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

Python. Російською його часто називають «пітон». Це високорівнева мова, яка використовується для загальних завдань, найчастіше для виконання завдань сервером. Його орієнтир - підвищення продуктивності програміста та читання коду. За допомогою мови можна виконувати резервне копіювання багатьох парадигм програмування. Пітон відмінно працює на серверах Windows та Linux.

Рубі. Російською часто його називають «рубі». Це динамічна, рефлективна та високорівнева мова для ООП (об'єктно-орієнтованого програмування). Він дає можливість реалізувати багатопоточність на будь-якій ОС, відрізняється строгою типізацією динамічного вигляду, і має низку інших опцій. За характеристиками синтаксису Рубі найближче до аналогів Eiffel та Perl. Крім того, окремі деталі запозичені з Python.

ASP. Ця мова розроблена корпорацією Microsoft. За допомогою цієї технології можна розробляти програми для www.asp. Платформи для мови такі: Internet Information Server (IIS) і Windows NT. ASP досить складно назвати безпосередньо мовою, це швидше за технологія для приєднання програми до інтернет-сторінки. Всі переваги ASP - у простій скриптовій мові та можливостях застосування сторонніх СОМ-елементів.

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

Вирішення місцевих завдань; перевірка правильності заповнення форм до їхнього відправлення на сервер.

Великі можливості мови пояснюються її популярністю. Так, за допомогою JavaScript можна:

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

Perl. Спочатку цей мову використовувався для з'єднання програм, які виконували різні завдання, в єдиний сценарій для вирішення цілого комплексу завдань: обробки тексту, адміністрування та ін. Сьогодні ж Перл використовується в основному для розробки додатків CGI. Він допомагає адмініструвати сервери та інші системи. Завдяки простоті та швидкості написання сценарію на Перлі, його адаптували до всіх популярних платформ, включаючи Mac та Windows. Perl має відкритий код, абсолютно безкоштовний.

Чи потрібно багато знань?

Базові знання з програмування все набувають на уроках інформатики в школі. Працювати на початковому рівні з Паскаль та Делфі доводилося практично кожному. Але інші, складніші мови програмування, вимагають іншого, більш комплексного та серйозного підходу. Перше, що потрібно для успішного програміста — математичний, логічний склад розуму та бажання вдосконалюватись у своїй справі. При цьому не варто намагатися вивчити одразу всі мови. Краще добре освоїти один, ніж мати уривчасті знання про п'ять мов. Всі мови мають схожі принципи, всі вони будуються на логіці дій, тому з часом, з кожним новим мовою вчити його все простіше. Копіювати або змінювати чужий код може багато хто, але писати свій код, стати справжнім «художником» здатний далеко не кожен.

Розробка Web-сайтів із використанням мови розмітки гіпертексту HTML

Web-сторінки та Web-сайти

Веб-сторінки. Web-сторінки створюються за допомогою мови розмітки гіпертекстових документів HTML (Hyper Text Markup Language). У стандартний текстовий документ вставляються керуючі символи - HTML-теги, які визначають вид Web-сторінки під час її перегляду в браузері.

Основними перевагами Web-сторінок є:
- Мінімальний інформаційний обсяг;
- можливість перегляду різних операційних системах.

Для створення Web-сторінок використовуються найпростіші текстові редактори, які не включають у документ, що створюється, керуючі символи форматування тексту самого редактора. Як такий редактор у Windows можна використовувати стандартну програму Блокнот.

Створення Web-сторінок з використанням HTML-тегів потребує великих зусиль, часу та знання синтаксису мови. Застосування спеціальних інструментальних програмних засобів (Web-редакторів) робить роботу зі створення Web-сайтів простою та ефективною. Процес створення та редагування сторінок у Web-редакторах дуже наочний, тому що проводиться в режимі WYSIWYG (від англ. "What You See Is What You Get" - "Що бачиш, те й отримаєш").

Web-сайти.Публікації у Всесвітній мережі реалізуються у формі Web-сайтів, які зазвичай містять матеріал з певної теми або проблеми. Державні структури та організації (уряд, дума, школа і т. д.) зазвичай створюють офіційні Web-сайти своїх організацій, на яких розміщують інформацію про свою діяльність. Комерційні фірми на своїх Web-сайтах розміщують рекламу товарів чи послуг та пропонують їх придбати в Інтернет-магазині. Будь-який користувач Інтернету може створити свій тематичний сайт, на якому може розмістити інформацію про свої розробки, захоплення і т.д.

Як журнал складається з друкованих сторінок, і Web-сайт складається з комп'ютерних Web-страниц. Сайт повинен містити систему гіперпосилань, яка дозволяє користувачеві переміщатися Web-сторінками.

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

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

Контрольні питання

1. У чому полягає перевага Web-сторінок перед звичайними текстовими документами?

2. Як Web-сторінки об'єднуються в Web-сайти?

Структура Web-сторінки

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

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

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

Закриваючий тег містить прямий слеш (/) перед позначенням. Теги можуть записуватися як великими, так і малими літерами.

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

Зміст сторінки, що відображається в браузері, поміщається в контейнер (Рис. 6.26):

<ТITLE>Комп'ютер

Комп'ютер та ПЗ

Рис. 6.26. Заготівля Web-сторінки "Комп'ютер"

Створену Web-сторінку необхідно зберегти як файл під ім'ям index.htm. Як розширення файлу Web-сторінки можна також використовувати HTML. Рекомендується створити для розміщення сайту спеціальну папку і зберігати всі файли сайту, що розробляється в цій папці.

Необхідно розрізняти ім'я файлу index.htm, під яким Web-сторінка зберігається у файловій системі, та ім'я Web-сторінки (наприклад, "Комп'ютер"), яке висвічується у верхньому рядку вікна браузера. Ім'я Web-сторінки має відповідати її змісту, тому що воно насамперед аналізується пошуковими системами.

Контрольні питання

1. Які теги (контейнери) повинні бути присутніми у HTML-документі обов'язково? Якою є логічна структура Web-сторінки?

6.10. Практичне завдання. Створити заготівлю Web-сторінки "Комп'ютер" та переглянути її у браузері.

Форматування тексту на Web-сторінці

Поки що наша сторінка виглядає не надто привабливо: дрібний шрифт чорного кольору на білому тлі. За допомогою тегів можна встановити різні параметри форматування тексту.

Заголовки.Розміри шрифтів заголовків задаються парами тегів від<Н1>(найбільший) до<Н6>(найменший).

Шрифт.Деякі теги мають атрибути, які є іменами властивостей і можуть набувати певних значень. За допомогою тега FONT та його атрибутів можна задати параметри форматування шрифту. Атрибут FACE дозволяє встановити гарнітуру шрифту (наприклад, FACE="Arial"), атрибут SIZE - розмір шрифту (наприклад, SIZE=4).

Атрибут COLOR дозволяє встановити колір шрифту (наприклад, C0L0R="blue"). Значення атрибута COLOR можна встановити або назвою кольору (наприклад, "red", "green", "blue" і т. д.), або його шістнадцятковим значенням.

Шістнадцяткове представлення кольору використовує RGB-формат "#RRGGBB", де дві перші шістнадцяткові цифри задають інтенсивність червоного (red), дві наступні – інтенсивність зеленого (green) та дві останні – інтенсивність синього (blue) кольору. Мінімальна інтенсивність кольору визначається шістнадцятковим числом 00, а максимальна - FF. Наприклад, синій колір визначається значенням "#0000FF".

Вирівнювання тексту.Задати спосіб вирівнювання тексту дозволяє атрибут ALIGN. Вирівнювання по лівій межі визначається так: ALlGN="left", вирівнювання по правій межі: ALIGN="right", вирівнювання по центру: ALIGN= "center".

Таким чином, синій колір заголовка, вирівняного по центру, можна задати таким чином:

<Н1 ALIGN="center">Комп'ютер та ПЗ

Горизонтальні лінії.Заголовки доцільно відокремлювати від решти змісту сторінки горизонтальними лініями за допомогою одиночного тега

Абзаци.Поділ тексту на абзаци здійснюється за допомогою контейнера<Р>. Під час перегляду в браузері абзаци відокремлюються між собою інтервалами. Для кожного абзацу можна задати певний тип вирівнювання та параметри форматування шрифту.

Домашня сторінка сайтуНа домашній сторінці сайту зазвичай розміщується текст, який коротко описує його зміст. Помістимо на домашню сторінку сайту "Комп'ютер" текст, розбитий на абзаци з різним вирівнюванням:

<Р ALIGN="left">На цьому сайті ви зможете отримати різну інформацію про комп'ютер, його програмне забезпечення та ціни на комп'ютерні комплектуючі.
<Р ALIGN= "right">Термінологічний словник познайомить вас із комп'ютерними термінами, а також ви зможете заповнити анкету.

Таким чином, домашня сторінка сайту "Комп'ютер" міститиме відцентрований заголовок синього кольору, відокремлений горизонтальною лінією від двох по-різному вирівняних абзаців (рис. 6.27):

<Н1 ALIGN="center">
Комп'ютер та ПЗ

<Р ALIGN="left">На цьому сайті...
<Р ALIGN ="right">Термінологічний словник
...

Рис. 6.27. Web-сторінка "Комп'ютер" з відформатованим текстом

Контрольні питання

1. Які теги (контейнери) використовуються для заголовків? Форматування шрифту? Введення абзаців?

Завдання для самостійного виконання

6.11. Практичне завдання. Створити Web-сторінку "Комп'ютер" з відформатованим текстом та переглянути її у браузері.

Вставка зображень у Web-сторінки

На Web-сторінці можна розміщувати зображення, що зберігаються в графічних файлах трьох форматів - GIF, JPEG і PNG.

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

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

Якщо файл знаходиться на віддаленому сервері в Інтернеті, то має бути вказана веб-адреса цього файлу. Наприклад:

Положення малюнка щодо тексту.Розташувати малюнок щодо тексту по-різному дозволяє атрибут ALIGN, який може приймати п'ять різних значень: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (ліворуч) і RIGHT (праворуч).

На домашній сторінці сайту "Комп'ютер" логічно розмістити зображення комп'ютера. Для того щоб малюнок розташовувався по правому краю тексту, тег вставки зображення повинен набути наступного вигляду (рис. 6.28):

Рис. 6.28. Вставка зображення на Web-сторінку "Комп'ютер"

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

Альтернативний текст виводиться за допомогою атрибута ALT, значенням якого є текст, який пояснює, що мав би побачити користувач на малюнку:

Контрольні питання

1. Який тег та його атрибути використовуються для вставляння зображень у Web-сторінки?

Завдання для самостійного виконання

6.12. Практичне завдання. Вставити в Web-сторінку "Комп'ютер" зображення та переглянути його у браузері.

Гіперпосилання на Web-сторінках

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

Якщо веб-сторінка, що завантажується в браузер, розміщена в Інтернеті, то в якості адреси вказується Інтернет-адреса, наприклад:

<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Покажчик посилання

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

до перегляду зображення у браузері:
<А HREF="picture.jpg">Зображення
до запуску програвача, вбудованого в браузер та відтворення звукового файлу:
<А HREF="sound.wav">Звук
для збереження файлу на локальному комп'ютері з використанням вбудованого в браузер менеджера завантаження файлів:
<А HREF="Apxив.ziр">Завантажити файл

Панель навігації на сайті.Створимо папку сайту "Комп'ютер" та додамо в сайт порожні сторінки "Програми", "Словник", "Комплектуючі" та "Анкета". Збережемо їх у файлах з іменами software.htm, glossary.htm, hardware.htm та anketa.htm у папці сайту. Такі "порожні" сторінки повинні мати заголовки, але можуть поки не мати змісту:

<ТITLЕ>заголовок сторінки

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

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

Вставимо в домашню сторінку сайту HTML-код, який створює панель навігації:

<Р ALIGN="center">
[<А HREF="software . htm">Програми]
[Словник]
[Комплектуючі]
[Анкета]

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

, який визначає стиль абзацу, прийнятий для вказівки адреси:

<А HREF="mailto:[email protected]">E-mail:
[email protected]

Тепер за клацанням за посиланням адреси електронної пошти буде відкриватися поштова програма Outlook Express (або інша поштова програма, що використовується за замовчуванням), де в рядку Комубуде вказана вказана в посиланні адреса.

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

Рис. 6.29. Готова домашня сторінка сайту "Комп'ютер"

Контрольні питання

1. Який тег та його атрибути використовуються для створення гіперпосилань?

Завдання для самостійного виконання

6.13. Практичне завдання. Створити Web-сторінку "Комп'ютер", що містить панель гіперпосилань на інші сторінки сайту, та переглянути її у браузері.

Списки на Web-сторінках

Досить часто при розміщенні тексту на Web-сторінках зручно використовувати списки у різних варіантах:

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

марковані списки, коли елементи списку ідентифікуються за допомогою спеціальних символів (маркерів);

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

Можливе створення і вкладених списків, причому список, що вкладається, може за своїм типом відрізнятися від основного.

Нумеровані списки.Нумерований список розташований усередині контейнера

Марковані списки.Маркований список розташовується всередині контейнера, а кожен елемент списку визначається тэгом< LI >. За допомогою атрибуту TYPE тега

На Web-сторінку "Програми" розмістимо нумерований список, що містить перелік основних типів програмного забезпечення комп'ютера.

У другий елемент основного нумерованого списку вставимо маркований список вкладений (рис. 6.30).

Список визначень.Список визначень розташовується всередині контейнера

та визначень, які йдуть за одинарними тэгами

Web-сторінку "Словник" ми представимо у вигляді словника комп'ютерних термінів (рис. 6.31):

Процесор

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

Пристрій, в якому зберігаються програми та дані.

Контрольні питання

1. Які мітки використовуються для створення нумерованих списків? Маркованих списків?

Завдання для самостійного виконання

6.14. Практичне завдання. Створити Web-сторінку "Програми" з нумерованим списком та вкладеним маркованим списком.

6.15. Практичне завдання. Створити Web-сторінку "Словник" зі списком термінів.

Курс «Створення Web-сторінок засобами мови HTM L »

Тема 1. Початкова інформація про мову HTML

Призначення мови HTML

Web -сторінки– це спеціальні файли, написані мовою HTML ( Hyper Text Markup Language – мова розмітки гіпертексту). Під розміткоюрозуміється вставка до тексту спеціальних кодів (тегів), визначальних те, як підсумковий гіпертекстовий документ повинен відображатися спеціальною програмою - броузером.

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

Мова HTML є комп'ютерна мова, в певному сенсі споріднена з мовами програмування. Він включає досить суворі правила, яких необхідно дотримуватись, щоб отримати правильні результати.

Мова HTML з'явилася одночасно зі службою Worl d Wide Web і розвивалася разом з нею. Він є основою Worl d Wide Web і водночас причиною її найширшої популярності.

HTML - файл

HTML - файл - текстовий файл, що має розширення .htmабо . html Web-сторінка зберігається як HTML - файла. Для створення HTML-файлу можуть використовуватися як прості текстові редактори, такі як Блокнот або Word Pad, і редактори Web.

Структура документа HTML

Документ HTML складається з основного документа та тегів розмітки, які є наборами стандартних знаків.

Усі документи HTML мають чітко задану структуру. Документ повинен починатися з тега і закінчуватися відповідним тегом, що закриває. Ця пара тегів повідомляє броузеру, що перед ним справді документ HTML.

Документ HTML складається з розділу заголовків та тіла документа, що йдуть саме в такому порядку. Розділ заголовків укладений між тегами та містить інформацію про документ в цілому. Зокрема, цей розділ повинен містити в собі теги і між якими розміщують «офіційний» заголовок документа.

Сам текст документа розташовується у тілі документа. Тіло документа розташовується між тегами та BODY >. На практиці визначити місце становища цих основних тегів можна і за їх відсутності. Тому, якщо теги, і , а також відповідні їм закриваючі теги опущені, то програма - броузер може сама визначити місце, де вони повинні були знаходитися. Але все-таки під час створення Web-сторінок опускати ці теги не рекомендується.

Найпростіший правильний документ HTML.

< HEAD >

< TITLE >Заголовок документаTITLE >

HEAD >

< BODY >

BODY >

Теги HTML

Мова HTML складається із спеціальних розмічальних покажчиків – тегів. Їх також можна назвати командами, інструкціями або кодами HTML.

Тег – інструкція броузеру, яка вказує на спосіб відображення тексту. Усі теги починаються з символу «менше» (<) и заканчиваются символом «больше» (>). Пару цих символів іноді називають кутовими дужками.Після відкритої кутової дужки йде ключове слово, Що визначає тег

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

Існує два типи тегів – парні та непарні.

Парні теги– що відкривають та закривають, аналогічні круглим дужкам алгебраїчного виразу. Вони впливають на текст з того місця, де вжито, до того місця, де вказана ознака закінчення їх дії (закривають теги починаються з символу косої риси (/).

Наприклад, < HTML > HTML >, < P > P >, H 3 >

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

Наприклад,
, ,

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

приклад.

Приклад створення таблиці

З прикладу видно, що сторінка використовує кодування W indows-1251 - найбільш поширену на сьогоднішній день, достатньо лише щоразу вставляти цей тег у такому вигляді на свою сторінку; автор сторінки – Іванов Іван; сторінку присвячено тваринам.

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

Атрибути тегів

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

Атрибути – це додаткові ключові слова, відокремлені від ключового слова тега та один від одного пробілами.

Атрибути можуть мати значення записувані після знаку рівності (=). Завжди корисно укладати значення атрибута в лапки (одинарні чи подвійні). Рядок у лапках не повинен містити такі ж лапки всередині себе. Можна опускати лапки для значень атрибутів, які складаються лише з наступних символів:

символи англійського алфавіту;

проміжків часу;
дефісів (-).

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

символів англійського алфавіту ( A - Z, a - z)

цифр ( 0 - 9 )

проміжків часу

дефісів ( - )

Таким чином, WIDTH=80і ALIGN=CENTER- дозволене скорочення для WIDTH="80"і ALIGN="CENTER".
Теги, що закривають, не містять атрибутів.

приклади. FONT >

Коментарі

Подібно до того, як у всіх мовах програмування є можливість внесення до програми коментарів (текстових рядків, що не є частиною програми), є вона й у мові HTML. Починається коментар зі спеціального тегу. Коментар може включати будь-які символи, крім символу “більше” (>), і, таким чином, не може включати теги.

Принцип успадкування тегів

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

<начало 2-го тега>

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<начало 3-го тега>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<Конец 3-го тега>

<Конец 2-го тега>

<Конец 1-го тега>

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

Також слід зауважити, що деякі атрибути вкладених тегів можуть впливати і на "старші" теги. Наприклад, це типово для таблиць, вкладених одна в одну.
Якщо у внутрішньої таблиці розмір заданий 100 , то у зовнішній не може бути розмір менше 100 пікселів + товщина рамки. Таким чином, вкладена таблиця як би "розпірає" ту, в яку вона вкладена. При цьому навіть якщо в неї не заданий розмір, а кількість тексту в ній значно, вона розпиратиме "старшу" таблицю на такий розмір, який необхідний для відображення відповідної кількості рядків тексту. Це називається "зворотній зв'язок".

Практична робота №1

«Створення найпростішої Web -Сторінки»

Ціль:навчитися створювати Web-сторінки в текстовому редакторі Блокнот.

Вказівки до виконання

Наберіть у ньому структуру HTML-документу, яка наведена нижче:

Про братів наших найменших.

Тут буде розміщено зміст Web-сторінки

Збережіть файл, надавши йому ім'я index .htm .

Відкрийте створений файл. Ви побачите, як виглядає створений файл у вікні браузера.

Закрийте браузер.

Поверніться до файлу, збереженого в Блокноті.

Внесіть до нього наступні зміни: замість слів «Тут буде розміщено зміст Web-сторінки», наберіть такі: Це моя перша сторінка .

У рядку < TITLE> вкажіть: «Домашня сторінка (ваше ім'я та прізвище)».

Збережіть файл як page 2.htm.

Перегляньте результат у браузері, за необхідності відредагуйте файл за допомогою Блокнота.

Тема 2. Теги HTML

Теги фізичного та логічного форматування тексту

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

Розглянемо докладніше стандартні елементи мови HTML, що дозволяють форматувати текст.

Шрифт- Це таблиці заміни коду видимим зображенням.
Кожна клавіша клавіатури дає певний код, що розпізнається ОС (операційною системою, в більшості випадків це Windows або Linux/Unix).
Таким чином, вибравши певний шрифт, система замінює отриманий з клавіатури код зіставлене в таблиці символів шрифту зображення літери або значка. Кожен шрифт – це файл. Файл, який містить зображення літер, цифр та символів, які призначаються на кожну кнопку. Встановити шрифт - означає включити файл файл з додатковими таблицями зіставлення. У системах MS Windows зазвичай використовується кілька шрифтів, що поставляються разом із системою - це:

Arial

Аріал

Courier New

Кур'єр Нью

Comic Sans

Комік Санс

Times New Roman

Таймс Нью Роман

Verdana

Вердана

Кожен із цих шрифтів доречний у своєму дизайні та стилі. Найбільш поширений – Аріал. Всі ці шрифти мають 90% всіх відвідувачів вашої майбутньої сторінки. Кожен шрифт – це самостійний файл у папці Windows/fonts/*.ttf. Як у HTML надати шрифту того чи іншого вигляду?
< FONT >… FONT > визначення типу, розміру та кольору шрифту. Всі ці параметри визначаються за допомогою відповідних атрибутів.

Абсолютний розмір шрифту задається атрибутом size (розмір). Цей атрибут може приймати значення від 1 до 7, причому шрифт 1-го розміру - найменший, а 7-го - найбільший.
приклади.

текст розміру 1
текст розміру 2
текст розміру 3
текст розміру 4
текст розміру 5

текст розміру 6
текст розміру 7

Тихіше їдеш - далі будеш ONT>.
У дизайні зазвичай використовуються перші чотири розміри. Все, що вище, поганий тон і ознака дилетантства, бо займає багато місця і важко читається. Правда, і більшим розмірам є застосування. Наприклад, сьомим розміром можна писати буквицю (першу літеру початку розділу): Т екст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
До того ж, ми можемо вибрати і сам шрифт, який використовується для відображення тексту. Робиться це атрибутом face (вигляд).

приклади.Це шрифт arial розміром 3 ONT >
текст FONT >
Як бачимо, ети два атрибути - розмір та вид шрифту, - можна розташувати у будь-якій послідовності у тезі :
Можна також використовувати атрибут color (колір).Назва кольору визначається або числом, написаним у шістнадцятковій системі, наприклад, co lor=”#ff 0000”, або просто його назвою, написаною англійською мовою, наприклад, color =”red”. приклади. Це шрифт синього кольору FONT >
Це шрифт arial розміром 3, колір синій FONT >
Шрифт також може бути: похилий (курсив), жирний, підкреслений, перекреслений, надрядковий, підрядковий, а також поєднує в собі кілька зазначених видів. Досягається це відповідно тегами:
 текстI >
текстB >
 текстU >
< S > текст S >
< SUP > текст SUP >
< SUB > текст SUB >,
а також їх поєднанням, наприклад, текст U>B >
Форматування абзацу. У більшості звичайних документів основними функціональними розділами є заголовкиі абзаци. Web-документи є винятком. Для позначення звичайних абзаців у мові HTML використовують тег

…P > (Paragraph). Причому можна використовувати тільки початковий тег, так як наступний елемент

позначає як початок наступного абзацу, а й кінець попереднього. У тих випадках, коли за змістом необхідно позначити завершення абзацу, можна використати кінцевий тег.
Разом із тегом абзацу можна використати і атрибут align (вирівнювання):
align = "left" - вирівнювання по лівому краю;
align = "right" - вирівнювання по правому краю;
align = "center" - вирівнювання по центру.
приклад.

Розділ 1P >

Анімація >

стор. 3P >

У мові HTML немає засобів для створення абзацного відступу ("червоного рядка"), тому для зручності читання тексту між абзацами броузер зазвичай вводить порожній рядок. Якщо потрібно здійснити перехід на новий рядок без створення абзацу, використовується одиночний тег
. У місці його розміщення рядок закінчується, а текст, що залишився, друкується з нового рядка. Цей тег зручно використовувати, щоб, наприклад, писати вірші у стовпчик:
Впустили ведмедика на підлогу,
Відірвали ведмедику лапу,
Все одно його не кину,
Тому що він добрий.
На екрані браузера ми побачимо стандартним чином написаний чотиривірш.

Важливим засобом створення роздільників у тексті є горизонтальні смужки-лінійки, які візуально відокремлюють різні частини документа один від одного. Горизонтальна лінійка створюється одиночним тегом. З його допомогою дуже зручно ділити сторінку на частини. У тезі допускається ряд атрибутів:

Вирівнювання

align = "left"

align = "center"

align = "right"

align = "justify"

Товщина та довжина лінії у пікселях.

Size = 3 (ширина в пікселях)

width = 300 (довжина в пікселях)

width = 100% (довжина у відсотках)

Колір лінії

color = "red"

Мова HTML підтримує шість рівнів внутрішніх заголовків документа. Вони позначаються тегами від

…

до

…

.
Заголовок першого рівня найбільший, а шостого рівня – найменший. Для заголовків можна використовувати атрибути вирівнювання вліво, в центрі, вправо.
приклад.Найбільший заголовок
Найменший заголовок

Домашні тварини

Логічне форматування тексту . У цьому пункті ми розглянемо теги, які за своїм ефектом дуже нагадують теги, що задають розмір, колір і зображення шрифту. Проте важлива відмінність у тому, що це теги дійсно описують реальні властивості тексту. Це означає, що текст може по-різному відображатись у різних браузерах, але якийсь ефект гарантований навіть у тому випадку, коли з якоїсь причини немає можливості застосувати шрифтові ефекти. Всі ці теги парні і впливають на текст, укладений між тегами, що відкриває і закриває. Закриває тег обов'язковий.
Тег … використовується для цитат, назви книг. Зазвичай зображується курсивом.
Оскільки HTML була створена людьми, пов'язаними з комп'ютерами, ціла група тегів призначена для представлення текстів комп'ютерних програм і результатів взаємодії користувача з ними.
Тег < CODE >… CODE > вказує на вихідний текст комп'ютерної програми, що зазвичай відображається моноширинним шрифтом (найчастіше шрифт Courier), тобто шрифтом з фіксованим розміром.
Тег < KBD >… KBD > оформляє текст, який повинен бути (або був) введений за допомогою клавіатури, що зазвичай відображається моноширинним напівжирним шрифтом. Від англійської keyboard – клавіатура
приклад.

Для запуску Windows наберіть: win.
Код:
Для запуску Windows наберіть: win
Тег … зазначає текст як зразок (sample). Використовується для позначення тексту, який надається програмами. Відображається моноширинним шрифтом.
приклад.
Це звичайний текст
Тег … використовується виділення змінних у лістинге програми. Зазвичай, такий текст відображається курсивом. Від англійської var iable – змінна.
Приклад.
A, B, C
Код:
A , B , C var >

Тег … EM > використовується виділення елементів тексту (зазвичай курсивом).
Тег < STRONG >… STRONG > використовується для сильнішого виділення елементів тексту (напівжирним шрифтом).
приклад.
Це звичайний текст
А це вже текст із використанням тега .
Оскільки тут використовується смислове виділення замість оформлювального, рекомендується використовувати ці теги замість тегів і.

Практична робота №2

“Форматування тексту на Web-сторінці”

Ціль:навчитися форматувати шрифт та текст на Web-сторінці.

Вказівки до виконання

В елементі< TITLE> вкажіть назву сторінки “П/р №2”.

Відформатуйте наступний текст відповідно до вказівок (дані в дужках курсивом), як показано на малюнку.

Домашні тварини

(ЗаголовокH 1)

(Вирівнювання по центру)

Собаки

(ЗаголовокH 2)

(Вирівнювання по центру)

Сторожові

(Вирівнювання зліва, напівжирний шрифт)

Мисливські

(вирівнювання праворуч, напівжирний шрифт)

Дресирування

(Вирівнювання по центру, напівжирний курсив)

Клуби Виставки Майданчики

(вирівнювання по центру, розмір шрифту 10, колір шрифту червоний, шрифтArial )

Вірш

(Колір шрифту синій, розмір шрифту 6, вирівнювання по центру)

За життя я скромний,

Овацій не треба,

Але як же я класно

Дивлюсь у снаряда!

(Вирівнювання по лівому краю, розмір шрифту 6)

Створення списків

Марковані списки. Список відрізняється від звичайного тексту тим, що користувачеві не треба думати про нумерацію його пунктів: це завдання бере на себе. Якщо список доповнюється новими пунктами або коротшає, нумерація коригується автоматично. У разі ненумерованих списків програма ставить перед кожним пунктом маркери: кухлі, прямокутники, ромби або інші зображення. В результаті список набуває зручного вигляду.

Теги створення ненумерованого списку:

< LI > UL >
Тег

є своєрідним обрамленням списку. Він дозволяє відокремлювати один список від іншого. Тег
позначає кожен із пунктів.
приклад.
Вид на екрані:
Теги створення нумерованого списку: < O L>< LI > OL >

Нумеровані списки. Структура нумерованого списку подібна до структури ненумерованого списку. Тільки для обрамлення використовується тег
1. . Кожен пункт нумерується арабськими чи римськими числами, літерами латинської абетки.
приклад.

Вступ

1.1 Про мову HTML

1.2 створіння Webсайту

Які мови потрібно знати для створення сайтів?

Найбільш популярні мови

Розробка Web-сайтів із використанням мови розмітки гіпертексту HTML

Web-сторінки та Web-сайти

Структура Web-сторінки

Форматування тексту на Web-сторінці

Вставка зображень у Web-сторінки

Гіперпосилання на Web-сторінках

Списки на Web-сторінках

Атрибути тегів

Тема 2. Теги HTML

…

…

Вам також може сподобатися