HTML (від англ. Hypertext Markup Language — «мова розмітки гіпертексту») — стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Мова HTML інтерпретується браузерами й відображається у вигляді документа, у зручній для людини формі. HTML- документ – це звичайний документ у форматі ASCII. В основі мови лежать спеціальні дискриптори – теги, які визначають правила форматування даних. Код документа мовою HTML – це звичайний текстовий файл, який можна написати, наприклад, у програмі Блокнот. Файл створений у програмі Блокнот потрібно зберегти з розширенням.htm (або.html). Тег - елемент HTML (управляючій код), що представляє із себе текст у кутових дужках <>. Тег є активним елементом, що змінює представлення наступної за ним інформації. Тег може мати деяку кількість атрибутів. Звичайно використовуються два теги - відкриваючий і закриваючий. У закриваючих тегах перед іменем тегу ставитися / slash. Регістр уведення символів неважливий. Пару тегів - відкриваючі й закриваючі прийнято називати контейнером. У тег можуть бути властивості, які називають атрибутами, що дають додаткові можливості форматування тексту. Вони записуються у вигляді пари ім'я-значення, причому нечислове значення міститься в лапках. Синтаксис тегу наступний:
<ТЕГ ІМ'Я_АТРИБУТА_1= "ЗНАЧЕННЯ 1"; "ЗНАЧЕННЯ 2"; ЗНАЧЕННЯ 2">
Імена кольорів та sRGB значення Деякі елементи мови HTML можуть мати в якості атрибутів змінні що позначають кольори. Ці змінні застосовуються в основному для визначення кольору фона, тексту або гіперпосилань Html-Документа. Визначити той або інший колір при створенні Web-сторінки можна двома методами: за допомогою завдання спеціальних колірних міток, що позначають назви кольорів словами, або за допомогою шістнадцятирічного цифрового коду, що заміняє ці мітки. Для виводу кольорових зображень на екран монітора застосовується палітра RGB (Red Green Blue). Згідно з даним стандартом, теоретичні основи якого були розроблені ще в XIX столітті вченим-фізиком Г.Гельмгольцем, можна одержати абсолютно будь-який бажаний відтінок шляхом змішання всього лише трьох фарб: червоної, зеленої й синьої. Для відображення кольору шістнадцятирічним цифровим кодом прийнятий наступний синтаксис запису: перед самим кодом ставиться символ #, далі випливає набір із шести знаків у шістнадцятковій системі числення (табл.1).
Таблиця 1. Таблиця HTML кодів кольорів
| Колір
| Символьна мітка
| Цифровий код
|
| White
| #FFFFFF
| Білий
|
| Teal
| #008080
| Бірюзовий
|
| Yellow
| #FFFF00
| Жовтий
|
| Green
| #008000
| Зелений
|
| Lime
| #00FF00
| Ярко-зелений
|
| Coral1
| #FF7256
| Кораловий
|
| Maroon
| #800000
| Темно-бордовий
|
| Purple
| #800080
| Пурпурний
|
| Fuchsia
| #FF00FF
| Рожевий
|
| Gray
| #808080
| Сірий
|
| Silver
| #C0C0C0
| Сірий
|
| Olive
| #808000
| Оливковий
|
| Aqua
| #00FFFF
| Голубий
|
| Blue
| #0000FF
| Синій
|
| Navy
| #000080
| Темно-синій
|
| Chocolate1
| #FF7F24
| Шоколадний
|
| Chocolate4
| #8B4513
| Шоколадний
|
| PaleVioletRed3
| #CD6889
| Фіолетово-червоний
|
| Red
| #FF0000
| Червоний
|
| Black
| #000000
| Чорний
|
Структура найпростішого веб-сайту
<html>
<head>
<title> заголовок сторінки</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Параграф.</p>
<p>Ще один параграф.</p>
</body>
</html>
Таблиця 2. Синтаксис тегів для роботи з текстом і гіперпосиланнями
| Ім’я тегу
| Призначення тегу, атрибути
|
| <HTML>
</HTML>
| Тег <HTML> є контейнером, який містить у собі весь уміст веб- сторінки, включаючи теги <HEAD> і <BODY>. Закриваючий тег повинен завжди стояти в документі останнім
|
| <HEAD>
</HEAD>
| Тег <HEAD> призначений для зберігання інших елементів, ціль яких — допомогти браузеру в роботі з даними. Вміст тегу <HEAD> не відображається прямо на веб-сторінці.
|
| <TITLE>
</TITLE>
| Виводить заголовок документа. Розміщується тег в контейнері <HEAD>
|
| <BODY>
</BODY>
| призначений для зберігання змісту веб-сторінки (контенту), відображуваного у вікні браузера. Тег <BODY> також застосовується для визначення кольорів посилань і тексту на веб- сторінці.
Атрибути
bgcolor - встановлює колір фону веб-сторінки
text - встановлює колір тексту, використовуваного на веб-сторінці за замовчуванням
background – встановлює рисунок фоном сторінки
|
| <P>
</P>
| призначений щоб увести в документі текстовий абзац.
Аргументи align:
left - вирівнює тексту по лівому краю
right - вирівнює тексту по правому краю
center - вирівнює тексту по центру
justify - по ширині
|
| <BR>
| здійснює перехід на новий рядок
|
| <H1>..<H6>
| Для відображення заголовків від 1 до 6 рівня.
Синтаксис
<h1>Заголовок 1-го рівня</h1>
<h2>Заголовок 2-го рівня</h2>
...
<h6>Заголовок 6-го рівня</h6>
|
| <B> </B>
| Установлює жирне накреслення шрифту
|
| <I> </I>
| Установлює курсивне накреслення шрифту.
|
| <SUB>
</SUB>
| Відображає шрифт у вигляді нижнього індексу.
|
| <SUР>
</SUР>
| Відображає шрифт у вигляді верхнього індексу.
|
| <FONT>
</FONT>
| контейнер для зміни характеристик шрифту, таких як розмір, колір і гарнітура.
Атрибути
сolor - колір тексту
face - гарнітури шрифтів, що використовуються для тексту.
size - розмір шрифту в умовних одиницях від 1 до 7.
|
| <BIG>
</BIG>
| збільшує розмір шрифту на одиницю в порівнянні зі звичайним текстом.
|
| <А> </А>
| призначений для створення посилань.
Атрибути
href - задає адресу документа, на яку слід перейти
<A href = lab1tab.htm> New_Page <A>
|
| <LI>
</LI>
| визначає окремий елемент списку. Зовнішній тег <UL> або <OL>
установлює тип списку — маркований або нумерований.
Атрибути
<ul> <li>елемент маркованого списку</li> </ul>
<ol> <li>елемент нумерованого списку</li> </ol>
|
| <OL> </OL>
| створює нумеровані списки
Атрибути
start- визначається початкове значення списку
type - визначає спосіб нумерації елементів списку, може приймати значення:
A – прописні латинські букви A, B, C …;
а - рядкові латинські букви a, b, c …;
I – великі римські цифри I, II, III …;
i – малі римські цифри і, іі, ііі …;
1 – арабські цифри 1, 2, 3 …
|
| <UL>
</UL>
| Встановлює маркований список. Кожний елемент списку повинен починатися з тегу <LI>
|
Таблиця 3. Синтаксис тегів для роботи з таблицею та зображеннями
| Ім’я тегу
| Призначення тегу, атрибути
|
| <TABLE>
...
</TABLE>
| служить контейнером для елементів, що визначають вміст таблиці
Атрибути
align - визначає вирівнювання таблиці
bgcolor - колір тла таблиці
border - товщина рамки в пікселях
bordercolor - колір рамки
width - ширина таблиці (будь-яке ціле значення в пікселях або відсотках від доступного простору)
|
| <TR></TR>
| служить контейнером для створення рядка таблиці
|
| <TD>
</TD>
| призначений для створення однієї комірки таблиці і повинен розміщатися усередині контейнера <TR>, який у свою чергу розташовується усередині тегу <TABLE>.
Атрибути
align - визначає вирівнювання вмісту комірки по горизонталі
bgcolor - колір фону комірки
colspan - поєднує горизонтальні комірки. Встановлює кількість комірок, які повинні бути об'єднані по горизонталі. Цей параметр має сенс для таблиць, що складаються із декількох рядків. (<td colspan="число">...</td>)
rowspan - поєднує вертикальні комірки. Цей параметр має сенс для таблиць, що полягають із декількох рядків. (<td rowspan="число">...</td>)
|
| <IMG>
| призначений для відображення на веб-сторінці зображень у графічному форматі GIF, JPEG або PNG.
Атрибути
src- визначає місце розташування та ім’я файлу (єдиний обов’язковий атрибут)
align - визначає вирівнювання рисунку (left, right, bottom, middle, top)
border - товщина рамки в пікселях
alt- додає коментар
width – ширина зображення
height – висота зображення
|
| <HR>
| ставиться до блокових елементів, лінія завжди починається з нового рядка, а після неї всі елементи відображаються на наступному рядку.
Атрибути
аlign - визначає вирівнювання лінії
color - колір лінії
|
Завдання:
1. Створити web-сайт по темі згідно варіанту (табл.4), який складається з двох сторінок. На першій сторінці повинна бути така інформація:
· назва компанії;
· логотип;
· послуги, що надаються;
· контактна інформація;
· новини;
· гіперпосилання на наступну сторінку.
2. Елементи на сторінці повинні бути оформлені згідно варіанту (табл.4)
3. На другій сторінці повинна бути створена таблиця з інформацією згідно теми індивідуального завдання. Накреслення і оформлення таблиць згідно варіанту (табл.5).
Таблиця 4 Індивідуальні завдання
| № варіанту
| Інтернет-магазин
| Оформлення
|
|
| з продажу дитячого взуття
| 1.встановити колір фону веб-сторінки
2. Зробити вирівнювання тексту по лівому краю
3. Задати заголовок 1-го рівня
4. Встановити жирне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести маркований список
|
|
| з продажу електронної техніки
| 1.встановити колір тексту, використовуваного на веб-сторінці
2. Зробити вирівнювання тексту по правому краю
3. Задати заголовок 2-го рівня
4. Встановити жирне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести нумерований список латинськими буквами
|
|
| туристичної фірми
| 1.встановити рисунок фоном сторінки
2.Зробити вирівнювання тексту по ширині
3. Задати заголовок 3-го рівня
4. Встановити курсивне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести маркований список
|
|
| з продажу автомобілів
| 1 встановити колір фону веб-сторінки
2.Зробити вирівнювання тексту по центру
3. Задати заголовок 4-го рівня
4. Встановити курсивне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести нумерований список римськими цифрами
|
|
| з продажу спортивного одягу
| 1.встановити колір тексту, використовуваного на веб-сторінці
2. Зробити вирівнювання тексту по лівому краю
3. Задати заголовок 5-го рівня
4. Встановити курсивне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести нумерований список арабськими цифрами
|
|
| з продажу книжок
| 1.встановити рисунок фоном сторінки
2. Зробити вирівнювання тексту по правому краю
3. Задати заголовок 6-го рівня
4. Встановити жирне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести маркований список
|
|
| з продажу жіночого одягу
| 1встановити колір фону веб-сторінки
2.Зробити вирівнювання тексту по ширині
3. Задати заголовок 1-го рівня
4. Встановити курсивне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести нумерований список римськими цифрами
|
|
| з продажу косметики
| 1.встановити колір тексту, використовуваного на веб-сторінці
2. Зробити вирівнювання тексту по правому краю
3. Задати заголовок 2-го рівня
4. Встановити курсивне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести маркований список
|
|
| з продажу чоловічого одягу
| 1. встановити рисунок фоном сторінки
2.Зробити вирівнювання тексту по ширині
3. Задати заголовок 3-го рівня
4. Встановити жирне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести нумерований список латинськими буквами
|
|
| з продажу меблів
| 1встановити колір фону веб-сторінки
2. Зробити вирівнювання тексту по лівому краю
3. Задати заголовок 4-го рівня
4. Встановити жирне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести нумерований список римськими цифрами
|
|
| з продажу шкіралантереї
| 1.встановити колір тексту, використовуваного на веб-сторінці
2.Зробити вирівнювання тексту по центру
3. Задати заголовок 5-го рівня
4. Встановити курсивне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести нумерований список арабськими цифрами
|
|
| з продажу посуду
| 1. встановити рисунок фоном сторінки
2.Зробити вирівнювання тексту по ширині
3. Задати заголовок 6-го рівня
4. Встановити курсивне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести нумерований список латинськими буквами
|
|
| з продажу окулярів
| 1встановити колір фону веб-сторінки
2. Зробити вирівнювання тексту по правому краю
3. Задати заголовок 1-го рівня
4. Встановити жирне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести маркований список
|
|
| з продажу ювелірних виробів
| 1.встановити колір тексту, використовуваного на веб-сторінці
2. Зробити вирівнювання тексту по лівому краю
3. Задати заголовок 2-го рівня
4. Встановити жирне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести нумерований список римськими цифрами
|
|
| з продажу побутової техніки
| 1. встановити рисунок фоном сторінки
2.Зробити вирівнювання тексту по ширині
3. Задати заголовок 3-го рівня
4. Встановити курсивне накреслення шрифту
5. Задати текст різним кольором і розміром
6. Навести нумерований список арабськими цифрами
|
Таблиця 5. Індивідуальні завдання
Звіт до лабораторної роботи повинен містити:
1. Титульну сторінку (з зазначеним номером варіанту)
2. Тему, мету та короткі теоретичні відомості
3. Завдання свого варіанту
4. Текст програми на мові HTML
5. Скріншот одержаних веб-сторінок
6. Висновки
Введение
В данной лабораторной работе я рассматривал сервис National Instruments а именно их клиентскиое программное обеспечение LabView. LabVIEW - среда разработки прикладных программ, в которой используется язык графического программирования G и не требуется написания текстов программ. LabVIEW содержит полный набор инструментов для сбора, обработки, отображения и регистрации данных, а также средства, которые помогают отладить разрабатываемую программу.
Выполнение заданий:
Для начала работы с инструментом описанном в разделе «Введение» заходим на официальный сайт ni.com регистрируемся. После успешной регистрации пишем на их почту от своего имени просьбу выдать ссылку или ключ на использования их программного обеспечения. В моем случае я получил ссылку на скачивание лицензионной LabView for students версии. Для операционных систем WinNT они также высылают ключ продукта на 365 дней, после истечения бесплатное продление. После скачивания программы и установки мы увидим результат как показано на рисунке 1:
Рисунок 1 - Установка NI LabView
Меня интересует именно LabView. Открываем и видим окно приветствия, в котором выбираем blank VI как показано на рисунке 2.
Рисунок 2 - Создание нового проекта
После создания нового проекта у нас откроется 2 окна. 1 окно представляет собой лицевую панель, который представляет собой конечный интерактивный интерфейс и блок-диаграмма-панель на которой идет построение самого алгоритма и выстроения логики для конечного приложения. Оконный режим показан на рисунке 3:
Рисунок 3 - Интерфейс программы
Рисунок 4 – Соединение элементов
На рисунке 4 показана простейшая программа с использованием 2 элементов, а именно это knob и thermometr. Далее соберем аналогичным способом относительно более сложную программу, в которой будем работать с числами и математическими выражениями. На рисунке 5 и 6 соответственно показаны 3 независимые друг от дуга схемы.
Рисунок 5 - Блок схема
Рисунок 6 – Изменение значений
Далее изменим цветовую схему окна с помощью набора инструментов shift+ПКМ. Результат показан на рисунке 7
Рисунок 7 – Изменение цвета фона
Контрольные вопросы:
1. Что собой представляет LabVIEW?
2. Что такое виртуальный прибор и из чего он состоит?
3. Как можно запустить ВП?
4. Как можно найти ошибки в программе?
5. Для чего нужна палитра инструментов Controls?
6. Можно ли изменять размер и цвет элементов ВП?
Ответы:
1. LabView представляет из себя графическую среду разработки для языка G. Данный продукт является собстовенностью National Instrumernts, а также являтся их собственностью и распространяется по лицензии. Студенческую лицензию модно получить у офф. представителей компании. Выдается бинарный файл с ключом на 365 дней.
2. Виртуальный прибор, далее по тексту ВП- один или совокупность виртуальных инструментов на панели «блок-схема» для логического построения и структурирования конечной программы. Наличие панели позволяет запустить программу.
3. С помощью контекстного меню в верхней части панели OS X.
4. Отладчик сам выловит ошибки при неправильном построении программ. Стрелка запуска программы изменит свой вид на «разрушенную»
5. Для визуального корректирования конечного продукта.
6. Да, данное действие было описано в данной лабораторной работе.
Заключение
В данной лабораторной работе познакомился с программным обеспечением LabView, а также со стандартным набором интсрументов. Провел несколько эксперементов, самостоятельно разработал несколько простейших готовых решений на основе методических указаний к данной лабраторной работе.
Список литературы:
1. WikiTaxi-LabView основы работы
2. WikiTaxi-LabView примеры
3. WikiTaxi-Основы графического программирования
4. WikiTaxi-LabView графический интерфейс
5. WikiTaxi-LabView фронтовая панель
