|
Читайте также: |
ТЕМА: Створення персонального web-сайту за допомогою мови HTML в системі безкоштовного хостингу narod. ru.
МЕТА: уміти створити персональний web-сайт, використовуючи теги мови HTML в системі безкоштовного хостингу narod. ru.
ЗАВДАННЯ:
1. Ознайомтеся з принципами роботи з викисанням мови HTML.
2. Створіть персональну у текстовому редакторі Блокнот, використовуючи теги мови HTML.
3. Завантажте створені вами HTML-документи в систему безкоштовного хостингу narod.ru.
4. Створіть гіперзв’язки між веб-сторінками використовуючи можливості системи narod.ru та перевірте їх роботу.
5. Проаналізуйте візуальну та змістову складові створеного Вами сайту. Відредагуйте сайт якщо в цьому є необхідність.
6. Зверністься до інших студентів з проханням критично оцінити проведену вами роботу. Ще раз перевірте ефективність роботи сайту та відредагуйте його.
7.Створіть звіт за результатами виконання лабораторної роботи та оформіть його у відповідності до становлених вимог.
ТЕОРЕТИЧНІ ВІДОМОСТІ
Типовий простий wеb-документ складається з текстових блоків, двох-трьох малюнків невеликих розмірів, горизонтальних ліній та гіперпосилань. Складніші wеb-документи містять фрейми (вкладені веб-сторінки), таблиці, елементи керування (кнопки, перемикачі, поля діалогу), динамічні ефекти та графічні об’єкти.
Є три типи текстових блоків: короткі (по 2-3 речення) текстові абзаци, списки, таблиці.
Згідно з прийнятим стандартом абзаци на web-сторінці розмежовуються порожнім рядком і не мають відступів у першому рядку. Абзац може бути вирівняний до одного з країв або до центру екрана. Особлива зручність перегляду інформації зумовлена тим, що в нормальному режимі на web-сторінці немає горизонтальної смуги прокручування, а лише вертикальна. Браузер автоматично масштабує горизонтальне зображення різних елементів сторінки, враховуючи характеристики монітора комп’ютера клієнта і розміри вікна, в якому масштабується документ. Інформація на сторінці автоматично подається на сірому чи білому фоні, але її можна розмістити і на кольоровому фоні чи на фоні картинки з деякого графічного файлу.
Для створення веб-сторінок веб-дизайнери застосовують гіпертекстові веб-редактори, наприклад, HotMetal PRO, Hot Dog Professional, Netscape Editor тощо, де використовується мова HTML. Сучасні редактори FrontPage і MS Word дають змогу створювати веб-сторінки методом конструювання без застосування кодів мови HTML, оскільки коди вони генерують автоматично.
Для підготовки html-файлу можна використати текстовий редактор Note Pad. Після написання файл потрібно зберегти на диску з деякою назвою з розширенням htm чи html. Текст мовою HTML має таку загальну структуру:
<HTML>
<HEAD>
<TITLE> Назва вікна web-сторінки </TITLE>
</HEAD>
<BODY параметри>
Мене звати… Я хочу стати веб-дизайнером.
Це моя перша веб-сторінка. Тут я можу писати будь-який текст, наприклад про себе і мої інтереси. Я розташую свої файли на сервері хостингу Narod.ru і мою сторінку зможуть побачити всі бажаючі.
</ BODY>
</HTML>
Команди мови HTML називають тегами. Теги бувають одинарними і парними. Більшість тегів є парними, наприклад тег означення html-файлу: <HTML>…</HTML>
Парні теги позначають початок і кінець області дії команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Тег може містити параметри (атрибути), які користувач записує у першому тезі через пропуск, наприклад, <BODY TEXT=“red”>.
Між тегами <TITLE> …</TITLE> пишуть заголовок сторінки, а між <BODY параметри>…</ BODY> основний текст, до якого застосовують теги форматування.
Тег <BODY> має такі основні параметри:
BACKGROUND = «шлях до графічного файлу» - задає картинку для фону; BGCOLOR = “white” – задає білий колір фону, якщо не використовується фон-картинка; TEXT = «black» - задає чорний колір тексту на сторінці.
Теги для форматування тексту:
< P > -початок нового абзацу; його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю абзацу без відступу у першому рядку.
< BR > -наступний за цим тегом текст буде наведено у новому рядку без пропуску порожнього рядка.
<HR> - буде проведена горизонтальна лінія.
<B> текст </B> - товстий шрифт тексту, що є між тегами.
<I> текст </I> - шрифт курсив.
<U> текст </U> - підкреслений шрифт.
<BIG> текст </BIG> - великий шрифт.
<SMALL> текст </SMALL> - малий шрифт.
Окремим типом абзацу є заголовок. Є шість видів заголовків, які відрізняються розміром символів.
Теги Результат на екрані
<H1> Заголовок 1 </H1> Заголовок 1
<H2> Заголовок 2 </H2> Заголовок 2
<H3> Заголовок 3 </H3> Заголовок 3
<H4> Заголовок 4 </H4> Заголовок 4
<H5> Заголовок 5 </H5> Заголовок 5
<H6> Заголовок 6 </H6> Заголовок 6
Заголовок за замовчуванням вирівнюють до лівого краю вікна. Якщо вирівнювання деякого елемента на сторінці потрібно задати явно, то використовуються теги вирівнювання:
<CENTER> елемент </ CENTER > - вирівнювання до центру;
<LEFT> елемент </ LEFT > - вирівнювання до лівого краю;
<RIGHT> елемент </ RIGHT > - вирівнювання до правого краю.
Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тегу <PRE>… </ PRE >. Текст в середині цього тегу оформляють засобами табуляції. Браузер такий текст переформатовувати не буде.
Тег задання параметрів шрифту FONT
Щоб задати назву конкретного шрифта, його розмір і колір, використовують парний тег FONT з параметрами FACE, SIZE, та COLOR. Наприклад:
<FONT FACE = “Décor, Arbat, Kudriashov” SIZE = +2 COLOR = “red” > текст </FONT>
Якщо на комп’ютері клієнта встановлений шрифт Décor, то він буде застосований до цього тексту, в іншому випадку браузер застосує шрифт Arbat чи Kudriashov, або стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифту можуть бути від 1 до 7. Розмір 3 є стандартним. Число 2 як значення параметра SIZE означає другий розмір. Число +2 означає, що що розмір шрифту має на бути на дві одиниці більший за стандартний, тобто п’ятий. Число -2 означатиме перший розмір, тобто на дві одиниці менший ніж стандартний. Колір тексту буде червоний.
Фонове зображення web- сторінки.
Зазвичай у вікні браузера текст виводиться на стандартному фоні, наприклад білому (Internet Explorer). Якщо web-сторінка насичена малюнками, то зазвичай цього достатньо. Але якщо вставних малюнків мало рекомендується задати фоновое зображення. Для цього потрібно вказати цей параметр в тезі <BODY>:
<BODY BACKGROUND= ім’я файлу із фоновим зображенням>.
Вибране зображення накладається на екран і розмножується таким чином, щоб зайняти все наявне місце. Тобто перший екземпляр зображення розміщується у лівому верхньому куті вікна браузера. Якщо при цьому зайнята не вся ширина вікна, то справа розміщується ще одна копія зображення.
Фонова музика web- сторінки.
Для того щоб вставити фонову музику можна використати тег<BGSOUND>, наприклад:
<BGSOUND SRC= ім’я звукового файлу LOOP= число повторів>. Ця лінія повинна входити в тіло документа HTML. Звуковий файл заданий параметром
SRC= буде автоматично завантажений після чого почнеться його відтворення. Параметр LOOP= вказує на те, скільки разів цей файл буде відтворено. Для безперервного звучання потрібно вказати параметр LOOP=INFINITE.
Дата добавления: 2015-08-27; просмотров: 54 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Створення сайту по шаблону. | | | Задання малюнка на сайт з допомогою мови HTML |