Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Створення Web - сторінки
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Не вказано
Факультет:
Не вказано
Кафедра:
Кафедра напівпровідникових приладів
Інформація про роботу
Рік:
2010
Тип роботи:
Лабораторна робота
Предмет:
Інші
Група:
МПП - 12
Частина тексту файла (без зображень, графіків і формул):
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ “ ЛЬВІВСЬКА ПОЛІТЕХНІКА “
Кафедра Напівпровідникових приладів
Створення Web - сторінки
Виконав
студент групи МПП – 12
Прийняла
Львів 2010
Завдання 1
Структура Web-документа
<HTML>
<HEAD>
<TITLE>Порядок створення та структура WEB документа </TITLE>
</HEAD>
<body background="pic/crestock-434060-1600x1200.jpg"vlink="maroon" alink="fuchsia" link="maroon">
<font color="red" size="3">
<h3 align="center"><b>Структура Web-документа</b></h3>
<P align="justify">Типовий простий Web-документ складається з текстових блоків, двох-трьох
рисунків невеликих розмірів, горизонтальних ліній та гіперпосилань. Більш складні Web-документи містять фрейми (вкладені Web-сторінки), елементи керування (кнопки, перемикачі, поля діалогу), динамічні ефекти та графічні об'єкти.</P>
<P align="justify">Є три типи текстових блоків: короткі (по два-три речення) текстові абзаци, списки, таблиці.</P>
<P align="justify">Згідно з прийнятим стандартом абзаци на Web-сторінці розмежовуються порожним рядком і не мають відступів у першому рядку. Абзац може бути вирівняний до одного з країв або до центру екрана. Особлива зручність перегляду інформації зумовлена тим, що в нормальному режимі на Web-сторінці немає горизонтальної смуги прокручування (а вертикальна є). Броузер
автоматично масштабує горизонтальне зображення різних елементів сторінки, враховуючи пхарактеристики монітора ком'ютера клієнта та розміри Windows-вікна, в якому демонструється документ.</P>
<P align="justify">Інформація на сторінці традиційно подається на сірому чи білому фоні, але її можна розмістити і на кольоровому фоні чи на фоні картинки з деякого графічного файлу.</P>
<h3 align="center"><b>Мова HTML</b></h3>
<P align="justify"> Для створення Web-сторінок Web-дизайнери використовують гіпертекстові Web-редактори, наприклад, HotMetal PRO, Hot Dog Professional? Netscap Editor та ін., де використовується мова HTML - Hyper Text Markup
Language (мова для розмічування гіпертекстових документів). Сучасні редактори (MS Word та ін.) дають змогу створювати Web-сторінки методом конструювання без застосування HTML кодів, оскільки коди вони генерують автоматично.</P>
<P align="justify">Для підготовки html-файлу можна використовувати текстовий редактор NotePad. Після написання програми файл потрібно зберегти на диску з деякою назвою з розширенням htm чи html. Програма мовою HTML має таку загальну структуру:</P>
<PRE>
<HTML>
<HEAD>
<TITLE>Назва вікна</TITLE>
</HEAD>
<BODY параметри>
<P align="justify"></PRE>
<P align="justify">Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Білішість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML>...</HTML>. Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Тег може містити
параметри, які користувач записує у першому тезі через пропуск, наприклад, <BODY TEXT="red">.</P>
<P align="justify">Між тегами <TITLE>...</TITLE> пишуть заголовок Windows-вікна, а між
<BODY параметри>...</BODY> - основний текст, до якого застосовують теги форматування.</P>
</MARQUEE>
<div align="center">
<strong><a href="index.htm"><font color="yellow" size="5">Головна сторінка</a></font></strong></font></div>
</body>
</html>
Завдання 2
<html>
<HEAD>
<title>Форматування тексту на WEB сторінці</title>
</HEAD>
<body background="pic/0004_space_1600_1200.jpg"vlink="maroon" alink="fuchsia" link="maroon">
<font color="red" size="3">
<H3 align="center">Форматування тексту на WEB сторінці</H3>
<P align="center"><b>Теги для форматування тексту:</b>
<P align="justify"><P> - початок нового абзаца. Наступне речення починатиметься з нового, вирівняного до лівого краю
абзаца без відступу у першому рядку.</P>
<P align="justify"><BR> - наступний за цим тегом текст буде наведено у новому рядку без пропуску порожнього рядка.</P>
<P align="justify"><HR> - буде проведена горизонтальна лінія.</P>
<P align="justify"><B> текст </B> - <B>жирний</B> шрифт тексту, що є між даними тегами.</P>
<P align="justify"><I> текст </I> - шрифт-<I>курсив</I>.</P>
<P align="justify"><U> текст </U> - <U>підкреслений</U> шрифт.</P>
<P align="justify"><SUB> текст </SUB> - нижній індекс, наприклад H<SUB>2</SUB>O.</P>
<P align="justify"><SUP> текст </SUP> - верхній індекс, наприклад a<SUP>2</SUP>.</P>
<P align="justify"><BIG> текст </BIG> - <BIG>великий</BIG> шрифт.</P>
<P align="justify"><SMALL> текст </SMALL> - <SMALL>малий</SMALL> шрифт.</P>
<P align="justify"><EM> текст </EM> - <EM>відокремлений</EM> курсивом текст.</P>
<P align="justify"><B><I> текст </I></B> - <B><I>жирний курсив</I></B>. Це принцип застосування вкладення тегів.</P>
<P align="justify"><abbr> - Помічає текст як абревіатуру
<P align="justify"><acronym> - Помічає текст як акронім
<P align="justify"><cite> - Використовується для відмічення цитат чи назв книжок та статей
<P align="justify"><code> - Помічає як „невеличкий фрагмент програмного коду”
<P align="justify"><del> - Помічає текст як стертий. Відображається перекресленим.
<P align="justify">Заголовок по замовчуванню вирівнюється до лівого краю вікна. Можна використовувати теги вирівнювання
заголовку чи якихось інших елементів на сторінці:</P>
<P><CENTER>елемент</CENTER> - вирівнювання до центру.</P>
<P><LEFT>елемент</LEFT> - вирівнювання до лівого краю.</P>
<P><RIGHT>елемент</RIGHT> - вирівнювання до правого краю.</P>
<P align="justify">Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега
<PRE>...</PRE>. Текст в середені цього тега оформляють засобами табуляції.
<P align="justify">Щоб задати назву конкретного шрифта, його розмір і колір використовують парний тег FONT з параметрами SIZE та COLOR
</P>
<div align="center">
<strong><a href="index.htm">
<font color="yellow" size="5">Головна сторінка</a></font></strong></font></div>
</body>
</html>
Завдання 3
<HTML>
<HEAD>
<TITLE>Створення біжучого рядка</TITLE>
</HEAD>
<body background="pic/1600x1200_10.02.2009_Space_11.jpg"vlink="maroon" alink="fuchsia" link="maroon">
<font color="red" size="3">
<H3 align="center">Створення біжучого рядка</H3>
<P>Для створення
біжучого рядка використовується тег <MARQUEE> і обовязковий закриваючий тег </MARQUEE>
<h4 align=center ><font color="red" size="3"><b>Атрибути тега</b></h4>
<DL>
<h2><b>Створення біжучого рядка на web-сторінці</b></h2>
На web-сторінці біжучий рядок створюється за допомогою тегу (MARQUUE) він має такі атрибути:<br>
<dl>
<dt>HEIGHT
<dd><marquee>висота поля</marquee>
<dt>WIDTH
<dd><marquee direction="right">ширина поля</marquee>
<dt>VSPACE
<dd>відступ знизу і зверху
<dt>HSPACE
<dd>відступ зліва і зправа
<dt>ALIGN
<dd>центрування
<dt>BGCOLOR
<dd>колір фону
<dt>FONT_COLOR
<dd>колір шрифту
<dt>DIRECTION
<dd>напрям руху
<dt>SCROLLAMOUNT
<dd>швидкість прокрутки
<dt>SCROLLDELAY
<dd>затримка
<dt>LOOP
<dd>кількість повторень
<dt>BEHAVIOR
<dd><marquee direction="down">тип руху</marquee>
</dl>
</body>
</html>
</dl>
<b><u>Приклад:</u></b></h5>
<MARQUEE VSPACE=30 BEHAVIOR=ALTERNATE DIRECTION="left"><font color="red" size="5">Створив ст.гр. ЕПП - 11 Степчук В.Г. </MARQUEE>
<div align="center">
<strong><a href="index.htm">
<font color="yellow" size="5">Головна сторінка</a></font></strong></font></div>
</BODY>
</HTML>
Завдання 4
<html>
<head>
<title>Cтворення списків</title>
</head>
<body background="pic/crestock-434060-1600x1200.jpg"vlink="maroon" alink="fuchsia" link="maroon">
<font color="red" size="4">
<H3 align="center">Створення списків</H3>
<P align="justify"> Є три типи списків: ненумерований, нумерований, означення. Список може
мати заголовок, який охоплюють тегами <LH>...</LH>. Встановлюючи атрибут TYPE рівним "А","а","І","і", то номерація буде починатися
з велики або малих літер, великих або малих римських цифр. Атрибут TYPE тега (UL) дозволяє змінювати вигляд маркера.
TYPE=disk - маркер має вигляд диска; TYPE=circle - маркер має вигляд кола; TYPE=sqare - маркер має вигляд квадрата</P>
<P align="justify">Ненумерований список утворюють за допомогою парного тега <UL>...</UL> та одинарних тегів
<LI>, наприклад так:
<PRE>
<LH> СТРУКТУРА HTML ДОКУМЕНТА</LH>
<UL>
<LI>Розділ документа head;
<LI>Розділ документа body;
<LI>Форматування тексту;
<LI>Форматування HTML-документа;
<LI>Посилання на інші документи та файли.
</PRE>
<P align="center"><U>На екрані отримаємо:</U></P>
<LH><B>СТРУКТУРА HTML ДОКУМЕНТА:</B></LH>
<UL>
<LI> Розділ документа head;
<LI> Розділ документа body;
<LI> Форматування тексту;
<LI>Форматування HTML-документа;
<LI>Посилання на інші документи та файли.
</UL>
<P align="justify">Нумерований список утворюють за допомогою парного тега <OL>...</OL>, з необовязковим тегом
TYPE, та одинарних тегів <LI>, наприклад так:
<PRE>
<LH> СТРУКТУРА HTML ДОКУМЕНТА</LH>
<OL TYPE="1">
<LI> Розділ документа head;
<LI>Розділ документа body;
<LI>Форматування тексту;
<LI>Форматування HTML-документа;
<LI>Посилання на інші документи та файли.
</OL>
</PRE>
<LH><B>СТРУКТУРА HTML ДОКУМЕНТА:</B></LH>
<OL TYPE="I">
<LI> Розділ документа head;
<LI> Розділ документа body;
<LI> Форматування тексту;
<LI>Форматування HTML-документа;
<LI>Посилання на інші документи та файли.
</OL>
</PRE>
<div align="center">
<strong><a href="index.htm">
<font color="yellow" size="5">Головна сторінка</a></font></strong></font></div>
</body>
</html>
Завдання 5
<html>
<head>
<title>Вставка звуку, графіки та відео</title>
</head>
<body background="pic/Space-space-584336_1600_1200.jpg"vlink="maroon" alink="fuchsia" link="maroon">
<font color="red" size="3">
<h3 align=center>Вставка малюнків</h3>
<p>Малюнки вставлються за допомогою тега <IMG SRC="шлях до малюнка">
</p>
<h4 align=center><u>Приклад</u></h4>
<center><img src="pic/Wallpapers-room_com___Moment_in_space_XCI_by_Funerium_1600x1200.jpg" width="960" height="600"></center>
<h3 align=center>Вставка фонових зображень</h3>
<p>Фонові зображення вставляються за допомогою тега BACKGROUND="шлях до малюнка" у тегу BODY</p>
<h3 align=center>Вставка аудіо</h3>
<p>Аудіо вставляється за допомогою тега <EMBED SRC="шлях звукового файлу"> </p>
<center><embed src="F:\My WEB small\pic\1.wav" width="600" height="45"></embed></center>
<h3 align=center>Вставка відео</h3>
<p>Відео вставляється за допомогою тега <EMBED SRC="шлях відео файлу">, а з допомогою опцій WIDTH і HEIGHT можна задати розміри вікна, в якому буде програватися відео</p>
<div align="center"> <a href="video.htm">Приклад</a></div><br>
<div align="center">
<font color="yellow" size="5">
<strong><a href="index.htm">Головна сторінка</a></font></strong></font></div>
</body>
</html>
Завдання 6
<html>
<head>
<title>Організація посилань через текст та малюнок </title>
</head>
<body background="pic/Alienware-blue-space-1600x1200.jpg"vlink="maroon" alink="fuchsia" link="maroon">
<font color="red" size="3">
<h3 align=center>Посилання через текст</h3>
<p>Посилання через текст відбувається за допомогою тега
<A HREF="Назва файлу"(на який необхідно перейти)>текст</A> Малюнки вставляються за допомогою тега img src="шлях до малюнка".
За допомогою тега border=N можна зробити рамку навколо малюнка, де N- товщина рамки.
</p>
<h4 align=center><u>Приклад</u></h4>
<div align="center"><a href="mal.htm">Натиснути тут!!!!</a></div></p>
<h3 align=center>Посилання через малюнок</h3>
<p>Посилання через малюнок робиться наступним чином: <A HREF="Назва файлу"><img src="шлях до малюнка></A>
</p>
<h4 align=center><u>Приклад</u></h4>
<a href="mal.htm"><img src="pic/h0005_1600x1200.jpg"></a>
<div align="center"> <font color="aqua" size="3">
<strong><a href="index.htm">
<font color="yellow" size="5">Головна сторінка</a></font></strong></font></div>
</body>
</html>
Завдання 7
<HTML>
<HEAD>
<TITLE>Графічні карти</TITLE>
</HEAD>
<h3 align=center><BODY background="pic/wp_casa_hst_chandra_spitzer_combo_1600.jpg"vlink="maroon" alink="fuchsia" link="maroon"></h3>
<MAP NAME="Map1">
<AREA HREF="pic/1.jpg" ALT="Частина 1" SHAPE="rect" COORDS="0,0,200,200">
<AREA HREF="pic/2.jpg" ALT="Частина 2" SHAPE="rect" COORDS="200,0,400,200">
<AREA HREF="pic/3.jpg" ALT="Частина 3" SHAPE="rect" COORDS="400,0,600,200">
<AREA HREF="pic/4.jpg" ALT="Частина 4" SHAPE="rect" COORDS="0,200,200,400">
<AREA HREF="pic/5.jpg" ALT="Частина 5" SHAPE="rect" COORDS="200,200,400,400">
<AREA HREF="pic/6.jpg" ALT="Частина 6" SHAPE="rect" COORDS="400,200,600,400">
<AREA HREF="pic/7.jpg" ALT="Частина 7" SHAPE="rect" COORDS="0,400,200,600">
<AREA HREF="pic/8.jpg" ALT="Частина 8" SHAPE="rect" COORDS="200,400,400,600">
<AREA HREF="pic/9.jpg" ALT="Частина 9" SHAPE="rect" COORDS="400,400,600,600">
</MAP>
<img src="pic/main.jpg" width=600 height=600 border="2" usemap="#Map1">
<div align="center"><font color="aqua" size="3">
<strong><a href="index.htm">Головна сторінка</a></font></strong></font></div>
</BODY>
</HTML>
Завдання 8
<HTML>
<HEAD>
<TITLE>Створення таблиць</TITLE>
</HEAD><body background="pic/crestock-434060-1600x1200.jpg"vlink="maroon" alink="fuchsia" link="maroon">
<font color="red" size="3">
<H3 align=center>Створення таблиць </H3>
Для створення таблиць використовується тег TABLE<br><br>
<TABLE BORDER=1(товщина лінії рамки)> <!--Початок таблиці--><br>
<CAPTION> <!-- Заголовок таблиці--><br>
Заголовок таблиці<br>
</CAPTION> <br>
<TR> <br>
<TD>
Стрічка1, колонка1
</TD> <br>
<TD>
Стрічка1, колонка2
</TD> <br>
</TR> <br>
<TR> <br>
<TD>
Стрічка2, колонка1
</TD> <br>
<TD>
Стрічка2, колонка2
</TD> <br>
</TR> <br>
</TABLE> <br><br>
<H4 align=center><u>Приклад</u> </H4>
<center>
<TABLE BORDER=4>
<CAPTION>
<H3><font color="red" size="3"> </H3>
</CAPTION>
<TR>
<TD>
<center><b><font color="red" size="3">Параметри тега table</b></center>
</TD>
<TD>
<b><font color="red" size="3">Призначення</b>
</TD>
</TR>
<TR>
<TD>
<font color="red" size="3">border
</TD>
<TD>
<font color="red" size="3">Задає величину рамки навколо всієї таблиці
</TD>
</TR>
<TR>
<TD>
<font color="red" size="3"> cellspacing
</TD>
<TD>
<font color="red" size="3">Задає відстань в пікселях між рамками комірок в таблиці
</TD>
</TR>
<TR>
<TD>
<font color="red" size="3"> width
</TD>
<TD>
<font color="red" size="3"> Задає ширину таблиці чи комірки в пікселях чи відсотках
</TD>
</TR>
<TR>
<TD>
<font color="red" size="3"> height
</TD>
<TD>
<font color="red" size="3"> Задає висоту таблиці чи комірки в пікселях чи відсотках
</TD>
</TR>
<TR>
<TD>
<font color="red" size="3">align
</TD>
<TD>
<font color="red" size="3">Задає горизонтальне вирівнювання таблиц
</TD>
</TR>
<TR>
<TD>
<font color="red" size="3">bgcolor
</TD>
<TD>
<font color="red" size="3"> Задає колір фону таблиці
</TD>
</TR>
<TR>
<TD>
<font color="red" size="3">rowspan
</TD>
<TD>
<font color="red" size="3">Об`єднує кілька комірок, що лежать в різних рядках, в одну
</TD>
</TR>
<TR>
<TD>
<font color="red" size="3">colspan
</TD>
<TD>
<font color="red" size="3">Об`єднує кілька комірок, що лежать в різних стовпцях, в одну
</TD>
</TR>
</TABLE>
</center><br>
<div align="center"><font color="red" size="4">
<strong><a href="index.htm">Головна сторінка</a></font></strong></font></div>
</BODY>
</HTML>
Завдання 9
<HTML>
<HEAD>
<TITLE>Організація фреймів</TITLE>
</HEAD>
<FRAMESET ROWS="48%,*">
<FRAME SRC="fraim.HTM" NAME="VERCH">
<FRAMESET COLS="50%,50%">
<FRAME SRC="3.HTM" NAME="LEFT">
<FRAME SRC="4.HTM" NAME="RIGHT">
</FRAMESET>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Організація фреймів</TITLE>
</HEAD>
<BODY background="pic/gallery_131_7_2084846.jpg"vlink="maroon" alink="fuchsia" link="maroon">
<font color="red" size="3">
<H3 align="center">Створення фреймів</H3>
Для створення фреймів використовуються теги FRAMESET та FRAME<br><br>
<FRAMESET ROWS="30%,70%"> (розбивка простору вікна горизонтально на кадри розміром 30% та 70% від розміру всього вікна)<br>
<FRAME SRC="назва файлу" NAME="main"> (відображення в першому кадрі сторінки "назва файлу" та присвоєння йому імені main)<br>
<FRAMESET COLS="50%,50%"> (розбивка другого кадру вертикально на підкадри розміром 50% та 50%)<br>
<FRAME SRC="назва файлу" NAME="left"> (відображення в першому підкадрі "назва файлу")<br>
<FRAME SRC="назва файлу" NAME="right"> (відображення в другому підкадрі "назва файлу")<br>
</FRAMESET>
</BOBY>
</HTML>
Завдання 10
HTML>
<HEAD>
<TITLE>Організація Internet-магазину на WEB-сторінці</TITLE>
</HEAD>
<BODY background="pic/Alienware-blue-space-1600x1200.jpg"vlink="maroon" alink="fuchsia" link="maroon">
<FORM name="myform">
<font color="red" size="3">
<H3 align=center>Пропунуємо ваші увазі надійний захист ваших побутових пристроїв від аварійних ситуацій в мережі - автоматичний стабілізатор напруги </H3>
<H4 align=center>"Мережик" 9000 </H4>
Однофазні стабілізатор "Мережик" - альтернатива для тих, хто хоче купити гарантовану якість без незрозумілої переплати.
<BR>
<center><IMG SRC="pic/мережик 1.jpg"></center> <p>
<H4 align=center>СНТО-11000 CONSTANTA 12 Prime</H4>
<center><IMG SRC="pic/prime.jpg"width="1024" height="640"></center> <p>
<H4 align=center> СН-7500 сімісторний </H4>
<center><IMG SRC="pic/ДІА-Н.jpg"></center> <p>
<P>Прізвище та ініціали: <INPUT TYPE=text SIZE=20 NAME=t1><BR><BR>
<P>Адреса доставки: <INPUT TYPE=text SIZE=20 NAME=t2><BR><BR>
<P>Телефон: <INPUT TYPE=text SIZE=10 NAME=t3><BR><BR>
Виберіть товар, який ви бажаєте замовити: <BR>
<select name="m" size="3" type=text>
<option selected value="m1">"Мережик" 9000 - 432 $ </option>
<option value="m2">СН-7500 сімісторний - 378 $ .</option>
<option value="m3">СНТО-11000 CONSTANTA 12 Prime - 543 $ за од.</option>
</select>
<P>Кількість: <INPUT TYPE=text SIZE=5 NAME=t4>
<INPUT TYPE="button" VALUE="Сума" name=button1> <BR><BR>
<INPUT TYPE="button" VALUE=" Замовити " name=button2></P>
</FORM>
<script>
function calculation()
{
if (window.document.myform.m.value=="m1") var s=18000*window.document.myform.t4.value;
if (window.document.myform.m.value=="m2") var s=20000*window.document.myform.t4.value;
if (window.document.myform.m.value=="m3") var s=35000*window.document.myform.t4.value;
alert("Ви замовили товар на "+s+" доларів");
}
function my_onclick()
{
alert("Дякуємо за замовлення");
}
window.document.myform.button2.onclick=my_onclick
window.document.myform.button1.onclick=calculation
</script>
<div align="center"><font color="aqua" size="3">
<strong><a href="index.htm">Головна сторінка</a></font></strong></font></div>
</BODY>
</HTML>
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора