Створення Web-сторінок засобами HTML 


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Створення Web-сторінок засобами HTML



Та іншими програмними засобами

 

 

Для створення web-сторінок послуговуються гіпертекстовими редакторами, наприклад, HotMetalPRO, Hot Dog Professional, Netscape Editor, webedit, HTMLWriter, HTML Assistant, HTMLed, де використовується мова HTML -Hyper Text Markup Language (мова для розмічування гіпер-текстових документів). Сучасні редактори, такі як FrontPage, Dream Viewer, MS Word тощо, дають змогу створювати web-сторінки методом конструювання, тобто без застосування кодів мови HTML. Вони генерують цей код автоматично.

Ми вивчатимемо два способи створення web-сторінки: за допомогою мови HTML; методом візуального конструювання засобами програм MS Word і FrontPage.

Розглянемо перший спосіб. Для підготовки html-файлу можна використати текстовий редактор NotePad чи будь-який інший, що дає змогу готувати файли у текстовому форматі. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html.

Приклад 1. Структуру html-файлу продемонструємо за допомогою тексту, де деяка особа розповідає про себе:

<HTML> <!-Це файл filel.htm -->

<HEAD>

<TITLE> Назва вікна web-сторінки </TITLE>

</HEAD>

<BODY параметри>

<!—Далі йде текст, наприклад, такий.->

Мене звати Світлана. Мені 16 років.

Я хочу стати web-дизайнером.

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

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

</BODY>

</HTML>

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

Службові слова, наведені великими літерами, вивчати-мемо далі. їх можна писати також малими літерами.

Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html-файлу: HTML>... </HTML>. Такі теги називаються інакше контейнерами. Контейнер може містити текст та інші теги.

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

Тег може містити параметри, які користувач записує у першому блоці тега через пропуск чи з нового рядка, наприклад, <BODY TEXT="red">...</BODY>. Нечислові значення параметрів прийнято записувати у лапках.

У середині пари тегів <HEAD>...</HEAD> описують за-головок документа. Головна частина заголовка документа - заголовок Windows-вікна, який пишуть у середині пари тегім <TITLE>...</TITLE>. Інші елементи заголовка вивчатимемо пізніше.

Тег <!-- текст --> позначає коментар. Текст у середині цього тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текстовий коментар </COMMENT>.

Зауваження. У багатьох книжках замість слова параметр вживають термін атрибут, а одинарний чи парний теги називають елементом, наприклад, елемент BODY тощо, І

5. Елемент (тег) BODY. У середині пари тегів <BODY па«| paMeTpn>...</BODY> записують увесь текст сторінки. Цей текст відображатиметься у вікні браузера.

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

Розглянемо головні параметри тега BODY:

 

BACKGROUND = "d:\myweb\picturel.ipj" Задає шлях до картинки

для тла

BGCOLOR = "white" Задає білий колір тла, якщо не використовується тло-картинка

BGPROPERTIES = "fixed" Фонове зображення не прокручується

TEXT = "black" Задає колір тексту (тут чорний) на сторінці

Інші параметри, що стосуються способів відображені гіперпосилань (LINK, VLINK, ALINK), вивчатимемо пізніше

6. Форматування тексту для web-сторінок. Розглянемо теги, які використовують для форматування тексту.

Теги форматування символів тексту (вони парні):

 

<В> текст </В> Товстий шрифт тексту

<І> текст </І> Шрифт - курсив

<SUB> текст </SUB> Нижній індекс. Наприклад, щоб отримати вираз Н2О, пишуть H<SUB>2</SUB>0

<SUP> текст </SUP> Верхній індекс, наприклад, Iа вулиця,а2

<BIG> текст </BIG> ВЄЛИКИЙ шрифт

<SMALL> текст </SMALL> Малий шрифт

<EM> текст </ЕМ> Виокремлений курсивом текст (те саме, що тег І)

<B> <I> текст </Іх/В> Товстий курсив. Цей

приклад демонструє застосування принципу вкладення тегів

Теги для розміщення тексту (вони одинарні):

<Р> Цей тег означає початок нового абзацу. Його можна записувати в кінці попереднього. Наступне після тега <Р> речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. Між абзацами буде порожній рядок. Зауважимо, що тег <Р> може викорис-товуватися як парний: <Р> текст абзацу </Р>

<BR> Наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка

<HR> У рядку буде проведена горизонтальна лінія

7. Заголовки і теги вирівнювання. Заголовок - окремий вид абзацу. Є шість видів заголовків, які відрізняються розмірами символів:

 

Теги Результат на екрані

<Н1>Заголовок 1</Н1> Заголовок 1

<Н2>Заголовок 2</Н2> Заголовок 2

<НЗ>Заголовок 3</Н3> Заголовок 3

<Н4>Заголовок 4</Н4> Заголовок 4

<Н5>Заголовок 5</Н5> Заголовок 5

<Н6>Заголовок 6</Н6> Заголовок 6

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

 

<CENTER> елемент </CENTER> Вирівнювання до центру

<LEFT> елемент </LEFT> Вирівнювання до лівого краю

<RIGHT> елемент </RIGHT> Вирівнювання до правого краю

Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту.

Приклад 2. Розгляньте зразок форматування тексту ДЛЯ web-сторінки з розповіддю деякої особи про себе.

<HTML> <!-Це файл file2.htm ->

<HEAD>

<TITLE> My web-page </TITLE>

</HEAD>

<BODY BGCOLOR ="yellow" TEXT = "navy">

<CENTER><H1 >Привіт!</Н1 >

<H2> Мене звуть Світлана </Н2> </CENTER>

<HR>

<H3> Мені 16 років </НЗ>

<Н4> Я хочу стати web-дизайнером </Н4>

<HR>

Це моя <В>друга</В> спроба створити web-сторінку. Я

вже вмію користуватися заголовками, вставляти лінії, форматувати текстові абзаци. Пізніше я навчуся вставляти <1>фотографії, картинки, звук, відеозображення</1> шляхом посилання на відповідні

графічні, звукові чи відео файли.

 

 

Форуми

 

 

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

[ред.]

Веб-форум

 

Веб-форум — це клас веб-застосунків для організації спілкування відвідувачів веб-сайту. Термін відповідає значенню початкового поняття «форум». Форум пропонує набір розділів для обговорення. Робота форуму полягає у створенні користувачами тем у розділах і можливістю обговорення всередині цих тем. Окремо взята тема, по суті, являє собою тематичну гостьову книгу. Найпоширеніше ділення веб-форуму: розділи→теми→повідомлення.

 

Звично повідомлення несуть інформацію «автор-тема-зміст-дата/час». Повідомлення та всі відповіді на нього створює гілку (тему, тред, трєд, топік, топ). Відхилення від початкової теми обговорення часто заборонене правилами поведінки форуму. За дотриманням правил слідкують модератори та адміністратори — учасники, наділені можливістю редагувати, переміщати та видаляти чужі повідомлення у визначеному розділі чи темі, а також контролювати доступ до них інших учасників.

 

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

 

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

 

 

Чати

 

Чат (англ. chat — "балачка") — засіб для швидкого обміну текстовими повідомленнями між користувачами інтернету у режимі реального часу. Зазвичай, під словом «чат» мається на увазі інтернет-ресурс з можливостями чату, чат-програма, рідше - сам процес обміну текстовими повідомленнями.Зміст [сховати]

1 Види

2 Історія виникнення

3 Програмне забезпечення для обміну повідомленнями (чату)

4 Дивіться також

 

Види

За способом реалізації функціоналу чати поділяються на:

Веб-чати або чати на HTTP - розміщені на веб-сторінці, що для виводу інформації оновлюється з певною заданою періодичністю;

Чати на IRC - спеціалізований протокол для чатів;

Чати на сторонніх протоколах - наприклад на протоколі ICQ;

Чат-програми для обміну даними в локальній мережі (Vypress Chat, Network Assistant). Часто мають розширений функціонал - можливість передачі файлів, сповіщень, оголошень.

 

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

all2all — групова комунікація;

p2p — персональні комунікації (наприклад, ICQ, Jabber, Skype, Yahoo! Messenger, AOL Instant Messenger, Hamachi) — для особистого спілкування;

b2b — ділові (робота в групах);

b2c — споживацькі (підтримка клієнтів компанії на корпоративному сайті).

 

 


Автозаміна символів

 

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

Призначення прапорців у верхній частині вікна:

 

Показати кнопки можливостей автозаміни (Show Autocorrect Options buttons) — відображує невелике синє вікно. Після підведення покажчика миші до тексту, введеного в результаті автозаміни, вікно набуває вигляду кнопки, список якої, що розкривається, містить команди, що дозволяють відмовитися від автозаміни або відкрити діалогове вікно Автозаміна (AutoCorrect Options). На мал. 5.2 як приклад показаний список, що розкривається, отриманий після автозаміни символів (R) на ®.

Виправляти Дві Прописні букви на початку слова (Correct TWo INitial CApitals) - автоматично виправляє помилкове введення двох прописних букв підряд на початку слова. Друга прописна буква замінюється на рядкову.

 

Робити перші букви пропозицій прописними (Capitalize first letter of sentences) — автоматично замінює рядкову букву на прописну на початку речення.

Робити перші букви вічок таблиць прописними (Capitalize first letter of table cells) — автоматично замінює першу рядкову букву, введену в елемент таблиці, на прописну.

Писати назви днів з прописної букви (Capitalize names of days) — автоматично замінює рядкову букву на прописну при введенні днів тижня (наприклад, monday замінюється на Monday відповідно до правил, прийнятих в англійській мові).

Виправляти розкладку клавіатури (Correct keyboard setting) — забезпечує автоматичне перемикання розкладки клавіатури.

Усувати наслідки випадкового натиснення cAPS LOCK (Correct accidental usage of'cAPS LOCK key) — дозволяє уникнути появи прописних букв в середині слова унаслідок випадкового натиснення клавіші Caps Lock. Наприклад, на початку речення слово КОМП'ЮТЕР автоматично замінюється на Комп'ютер, а режим введення прописних букв (при клавіші Caps Lock, що натискує) автоматично відключається.

 

 

Мал. 5.2 Кнопка можливостей автозаміни

 

Автозаміна запускається після введення заданих символів і натиснення клавіші Пропуск або Введення.

 

Автоматизація ввода спеціальних символів

 

 

Установка на вкладці Автозаміна (AutoCorrect) прапорця Замінювати при введенні (Replace text as you type) (див. мал. 5.1) дозволяє автоматизувати введення ряду спеціальних символів: ©, ®, ©,<-,-> і тому подібне Для введення символу © досить ввести (с), для введення ® —:(. Ці символи є в таблиці Символів (Symbols) проте використання можливостей вкладки Автозаміна (AutoCorrect) прискорює їх введення.

 

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

 

 

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

Аби автоматизувати вставку тексту або малюнка, виконаєте наступні дії:

 

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

Виділите створений малюнок або введений текст. Для збереження форматування абзацу разом з елементом включите у виділений фрагмент символ абзацу.

Виберіть команду Параметри Автозаміни (AutoCorrect Options) у меню Сервіс (Tools). Відкрийте вкладку Автозаміна.

Переконаєтеся, що встановлений прапорець Замінювати при введенні (Replace text as you type). Виділений елемент буде представлений в полі на (With).

Для збереження тексту без вихідного форматування встановите перемикач в положення звичайний текст (Plain text). Для збереження тексту разом з вихідним форматуванням встановите перемикач в положення форматований текст (Formatted text). Перемикач недоступний, якщо в документі нічого не виділено.

У полі замінити (Replace) введіть ім'я елементу списку автозаміни, яке замінюватиметься автоматично при введенні. Ім'я елементу списку може містити два-три і більш за символи. Не можна використовувати приводи, оскільки вони автоматично замінюватимуться фрагментом тексту або малюнком

Натискуйте кнопки Додати (Add) і ОК.

 

 

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

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

Зручно використовувати абревіатуру фірми або установи для вставки його повної назви. Якщо вам часто доводиться писати Московський автомобільний завод імені І.А. Ліхачева, то можна використовувати абревіатуру ЗІЛ для введення повної назви. Аналогічним чином за допомогою діалогового вікна Автозаміна можна автоматизувати введення складних кореспондентських рахунків в банках або часто використовуваних адрес. Після сканування вашого підпису і створення відповідного нею елементу списку заміна, ви зможете вводити свій підпис з клавіатури комп'ютера. Проте прийміть заходи, аби ваш підпис не зміг поставити сторонній.

 

Білядаление/переименование елементу списку автозаміни

 

 

Для видалення елементу списку автозаміни виділите його ім'я в списку і натискуйте кнопку Видалити (Delete). Аби змінити елемент списку, створіть новий малюнок або набір символів, виділите його, введіть з клавіатури символи, що раніше використалися, які повинні замінюватися на знов створений елемент. На екрані відображуватиметься діалогове вікно Автозаміна. Кнопка внизу списку набере нового вигляду: на ній буде написано Замінити (Replace). Натискуйте цю кнопку, а потім в новому діалоговому вікні підтвердите правильність заміни, натискує кнопку Так (Yes).

 

Відміна змін, виконаних за допомогою аналогового вікна Автозаміна

 

 

Виправлення, вироблені за допомогою діалогового вікна Автозаміна, можна відмінити, натискує клавіші Ctrl+Z або команду Відмінити (Undo) у меню Правка (Edit). Слід враховувати, що Автозаміна автоматично додає в список нові виключення, запам'ятовуючи правки, зроблені користувачем. Якщо ви не згодні з цим, то можете відключити автоматичне додавання в конкретних випадках. Натискуйте кнопку Виключення (Exceptions) на вкладці Автозаміна і зніміть, наприклад, прапорець Автоматично додавати слова в список (Automatically add words to list) на вкладці Перша буква (First letter) або додайте на цій вкладці в список скорочення, що закінчуються крапкою, після якого першу букву наступного слова не потрібно перетворювати в прописну.

 

 



Поделиться:


Последнее изменение этой страницы: 2016-04-20; просмотров: 1350; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.227.48.131 (0.059 с.)