Створення Web - сторінки. Лабораторна робота з Інші. Робота № 500902

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

Інформація про навчальний заклад

ВУЗ:

Національний університет Львівська політехніка

Інститут:

Не вказано

Факультет:

Не вказано

Кафедра:

Кафедра напівпровідникових приладів

Інформація про роботу

Рік:

2015

Тип роботи:

Лабораторна робота

Предмет:

Інші

Група:

МПП - 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&gt <HEAD&gt <TITLE>Назва вікна</TITLE> </HEAD&gt <BODY параметри> <P align="justify"></PRE> <P align="justify">Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Білішість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML&gt...</HTML>. Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Тег може містити параметри, які користувач записує у першому тезі через пропуск, наприклад, <BODY TEXT="red">.</P> <P align="justify">Між тегами <TITLE&gt...</TITLE> пишуть заголовок Windows-вікна, а між <BODY параметри&gt...</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&gt...</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&gt...</LH>. Встановлюючи атрибут TYPE рівним "А","а","І","і", то номерація буде починатися з велики або малих літер, великих або малих римських цифр. Атрибут TYPE тега (UL) дозволяє змінювати вигляд маркера. TYPE=disk - маркер має вигляд диска; TYPE=circle - маркер має вигляд кола; TYPE=sqare - маркер має вигляд квадрата</P> <P align="justify">Ненумерований список утворюють за допомогою парного тега <UL>...</UL> та одинарних тегів <LI>, наприклад так: <PRE> <LH> СТРУКТУРА HTML ДОКУМЕНТА</LH&gt <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&gt <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>Малюнки вставлються за допомогою тега &ltIMG SRC="шлях до малюнка"&gt </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>Аудіо вставляється за допомогою тега &ltEMBED SRC="шлях звукового файлу"&gt </p> <center><embed src="F:\My WEB small\pic\1.wav" width="600" height="45"></embed></center> <h3 align=center>Вставка відео</h3> <p>Відео вставляється за допомогою тега &ltEMBED SRC="шлях відео файлу"&gt, а з допомогою опцій 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> &ltTABLE BORDER=1(товщина лінії рамки)&gt <br> &ltCAPTION&gt <br> Заголовок таблиці<br> &lt/CAPTION&gt <br> &ltTR&gt <br> &ltTD&gt Стрічка1, колонка1 &lt/TD&gt <br> &ltTD&gt Стрічка1, колонка2 &lt/TD&gt <br> &lt/TR&gt <br> &ltTR&gt <br> &ltTD&gt Стрічка2, колонка1 &lt/TD&gt <br> &ltTD&gt Стрічка2, колонка2 &lt/TD&gt <br> &lt/TR&gt <br> &lt/TABLE&gt <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> &ltFRAMESET ROWS="30%,70%"&gt (розбивка простору вікна горизонтально на кадри розміром 30% та 70% від розміру всього вікна)<br> &ltFRAME SRC="назва файлу" NAME="main"&gt (відображення в першому кадрі сторінки "назва файлу" та присвоєння йому імені main)<br> &ltFRAMESET COLS="50%,50%"&gt (розбивка другого кадру вертикально на підкадри розміром 50% та 50%)<br> &ltFRAME SRC="назва файлу" NAME="left"&gt (відображення в першому підкадрі "назва файлу")<br> &ltFRAME SRC="назва файлу" NAME="right"&gt (відображення в другому підкадрі "назва файлу")<br> &lt/FRAMESET&gt </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>

Лабораторна робота Інші

2015

Коментарі

Ви не можете залишити коментар. Для цього, будь ласка, або зареєструйтесь.

Ділись своїми роботами та отримуй миттєві бонуси!

поділитись