Реферати українською » Информатика, программирование » Розробка Web-сайту на основі HTML з використанням JavaScript


Реферат Розробка Web-сайту на основі HTML з використанням JavaScript

Страница 1 из 2 | Следующая страница

>ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОСВІТІ

>ФГОУСПОТАМБОВСКИЙБИЗНЕС-КОЛЛЕДЖ

Курсова робота

по навчальної дисципліни: "Технічна розробка програмного продукту"

Тема: РозробкаWeb-сайта з урахуванням HTML з допомогоюJavaScript

Дата здачі:

Студента 3 курсу 13 групи

Дата захисту:

Спеціальності 230105 ">ПОВТ і АС

Оцінка:

Козлова Олексія

Керівник: ТолмачоваТ.Н.

Тамбов 2008


Зміст

Запровадження

2. Таблиці стилів, РівніCSS

3.JavaScript

3.1 ВикористанняJavaScript

3.2 Важливість вивченняJavaScript

3.3 Програмний код Web сайту

Укладання

Список використовуваної літератури


Запровадження

Термін HTML (>HyperTextMarkupLanguage) означає "мову маркування гіпертекстів". Це ширше, включає у собі Інтернет, і локальні мережі, редактори, браузери, різноманітні програмні продукти, компакт-диски, навчальні курси, дизайн і щодругое.html - своєрідна протилежність складним мовам програмування, відомим тільки фахівців.

HTML давно перестав бути просто мовою програмування. Людина, вивчав цю мову, знаходить можливість робити складних речей простими способами і, швидко, що у комп'ютерному світі непогані мало.Гипертекст адресований включення елементів мультимедіа в традиційні документи. Практично саме розвитку гіпертексту, більшість користувачів має змогу створювати власні мультимедійні продукти та поширювати їх у компакт-дисках. Такі інформаційні системи, виконані вигляді наборуHTML-страниц, не вимагає розробки спеціальних програмних засобів, бо всі необхідні інструменти до роботи з цими (>WEB-браузери) стали частиною стандартного програмного забезпечення більшості персональних комп'ютерів. Від користувача потрібно виконати роботу, що стосується тематиці розроблюваного продукту: підготувати тексти, намалювати малюнки, створитиHTML-страници і продумати зв'язок з-поміж них.

HTML, в якості основи створення WEB-сторінок, причетний безпосередньо і новим напрямом образотворчого мистецтва -WEB-дизайн. Художнику з Інтернету недостатньо просто намалювати гарні картинки, оригінальний логотип, створити новий фірмовий стиль. Вони повинні ще помістити це у Мережі, продумати зв'язок між WEB-сторінками, щоб усе рухалася, відгукувалася дію користувача, просто вражала, викликало бажання створити щось своє, оригінальне у цій галузі.


1. Історія HTML

Перша версія HTML була розроблена 1989 року ТімомБенерс-Ли для популярного у минулому браузери Mosaic. Але час ні на мови, ні на браузери нема гідного застосування. У 1993 року з'явився HTML+, ця версія також залишилася практично непоміченою. Початок використання гіпертексту дала версія 2.0, яка, з'явилася червні 1994 року. То справді був рік зростання популярності WWW у світі. Елементи, включені в версію 2, здебільшого використовуються в сьогодні.

У версії 3.0 HTML, що з'явилася через рік, реалізували можливість промальовування математичних символів (знаків інтервалу, нескінченності, дробу, скобок тощо.) з допомогою елементів мови. Під цієї версії розробили браузерArena. Але виявився тупиковим і отримав подальшого поширення.

У 1996 року з'явився HTML 3.2 Це було новаторський рішення, в специфікацію мови ввели фрейми, котрі почали тепер дуже популярні в розробників WEB-сторінок. Навіть основі цієї специфікації можна реалізувати цікаві дизайнерські рішення. Практично всі сучасні браузери підтримують версію 3.2, тому автори WEB-сторінок впевнений в працездатності всіх елементів.

Поруч із офіційними специфікаціями мови, які розроблялися організацієюW3C (>W3 Консорціум), компанії-виробники браузерів створювали власні елементи (розширення). Згодом, дехто з тих елементів, після отримання загального визнання розпочали специфікацію наступних версій мови. Але новаторський рішення - фрейми, були включені у специфікацію 3.2 Але браузери підтримували фрейми і з книжки, присвячені HTML, містили опис фреймів без нагадування про те, що це нестандартні елементи. Згодом, фрейми стали стандартом де-факто. У версії 4 вони вже було включено на повному підставі.

І навпаки, елементиAPPLET іSCRIPT, необхідних розширення HTML іншими програмними кодами версії 3.2, не зіграли тієї ролі, яке було покликані зіграти. Це тим, що браузери різних версій по-різному інтерпретували програми говорять різними мовамиJAVA,JAVASCKRIPT,VisualBasic (>VBScript). Через війну зірвалася здобути доволі надійний працюючий код, і такі мови використовувалися любителями HTML переважно для експериментів.

Офіційна специфікація HTML 4 (>Dynamic HTML) з'явилася 1997 року. Саме тоді було вже очевидно, подальший розвиток гіпертексту здійснюватиметься з допомогоюскрипт - програмування. Це виявилося трохи більше ефективним, ніж вводити у мову дедалі нові елементи.Появившиеся тоді браузери (NetscapeNavigator 4, Microsoft Internet Explorer 4 та інших.) вже надійно інтерпретували програмний код (було встановлено певний рівень стандартизації). Однак у розробників ще залишилися. Як приклад можна назвати, що чималоскрипти розпочинаються з визначення версії браузери, щоб потім використовувати той чи інший фрагмент коду. Вочевидь, що у програміста лягає обов'язок тестування сторінок усім популярних у ці час браузерах.

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


2. Таблиці стилів, РівніCSS

Вперше каскадні таблиці стилівCSS були реалізовані в браузері Internet Explorer 3.0. Однак те час розвитокCSS перебував у зародковому стані, тому правила складання стильових шаблонів були дуже розрізненими.

З свого виникнення структураCSS була на кілька раз переглянута, у неї було додано нові елементи і зібрано (видозмінені) старі. Існують рівніCSS, визначених наявністю завершеною редакції структури. Це:CSS 1 (перший рівень структури стильових шаблонів, остаточно затверджений 11 січня 1999 року),CSS 2 (другий стильових конструкцій, початок обговорення якого датується травнем 1998 року) іCSS 3 (третій рівень стильового оформлення електронних документів, ухвалений до обговорення 23 травня 2001 року, на даний момент написання книжки був у стадії опрацювання).

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

Саме третій рівень (>CSS 3) позиціонується розробниками як певну єдиної системи уявлення стилів в електронний документ, заснованої на використанні спеціальних модулів.

Способи визначення таблиць стилів. Як було зазначено, будь-яка таблиця стилівCSS мусить бути інтерпретована браузером у тому, щоб правилаCSS, зазначені для конкретних елементів електронного документа, набрали чинності.

Визначення таблиці стилів (стильового шаблону) можливо чотирма способами:

посилання зовнішній файл. Якщо всі стильові шаблони конкретноїHTML-документа в одному текстовому файлі (з розширеннямess), те з допомогою спеціальноготега <>link> з поточного документа можна зробити посилання зовнішнійCSS-файл стильових шаблонів, наприклад:

<>LINKREL="stylesheet"TYPE="text/css"HREF="style.css">

>Браузер, аналізуючиHTML-код, звернеться за вказаною шляху й, виявивши зазначений файл стильового оформлення, відобразить елементи сторінки відповідно до певними правиламиCSS.

Слід пам'ятати, що конструкція вказівки шляху зовнішньогоCSS-файлу повинна перебувати у межах розділуheadHTML-документа;

запровадження у документ. Під впровадженням у документ мається на увазі завдання стильовий конструкції всередині самоїHTML-страници, наприклад:

<>STYLETYPE="text/CS3">

<! - -

>BODY {font-family:Arial,Helvetica; }

>INPUT {background-color:ICECECE; }

>

</>STYLE>

Ця конструкція також має бути присутнім на розділіhead. Для браузерів, які підтримуютьCSS взагалі чи підтримують лише окремі правила стильового оформлення, опис шаблонів полягає між символами коментарів (за відсутності підтримкиCSS браузер пропустить зміст стильових шаблонів, Якщо ж підтримка є, то браузер інтерпретує правилаCSS);

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

<РALIGN="justify"STYLE="color: 1000000;font-family:Verdana; "> Текст параграфа...

І тут поставлено окреме правило конкретної параграфа. Можна присвоювати окремомуHTML-елементу певний клас стильового шаблону:

<>TABLE>

<>TR>

<>TDCLASS="header"X/TD>

<>TDCLASS="text"X/TD>

</>TR>

</>TABLE>

Опис класів має будуватися наступним способом (з прикладу впровадження стильового шаблону до документа):

<>STYLETYPE="text/css">

<! - -

.header {font-weight:bold;color:gray; }

.text {color: black;font-size:llpx; }

>

</>STYLE>

У разі текст табличній осередки класу.header вказуватиметься жирним накресленням і сірим кольором, а осередки класу.text - звичайним накресленням, чорним і розміром шрифту 11 пікселів;

імпортування.Импортирование стильового шаблонуCSS, власне, аналогічно вказівкою посилання зовнішній файл:

<>STYLETYPE-"text/css">

<! - -

@>import:url (>style.ess);

>

</>STYLE>

Усі чотири способу визначення стильового шаблонуCSS можна використовувати одночасно у межахHTML-документа (лістинг 9.1). Така можливість зовсім дозволяє ставити основне правилоCSS, приміром, як зовнішнього файла шаблонів, а виняткових чи рідкіснихHTML-елементов - окремі конструкції або утеге <>style>, або у кодових конструкціях самихтегов.

>Листинг. Поєднання різних способів визначення стильового шаблонуCSS

<HTML> <>HEAD>

<>Т1ТЬЕ>Совмещение різних способів визначенняCSS</TITLE>

<>LINKREL="stylesheet"TYPE="text/css"HREF="style.css"> <>STYLETYPE="text/css"> <! - -

>P {text-align:justify;color: green; }

.title {color:blue;font-weight:bold;font-size:16px; } - >

</>STYLE> </>HEAD>

<>BODYBGCOLOR="#FFFFFF"TEXT="black"LINK="|OOFFOO"ALINK="IOOFFOO"VLINK="blue">

<>FONTCLASS="title">Cnoco6bi визначення шаблонівCSS</FONT>

Нижче перераховані існуючі способи визначення стильових шаблонівCSS, дано характеристики кожного способу, наведено приклади їхнього використання.

<>UL>

<>Ы>Ссилка зовнішній файл

<>Ы>Внедрение до документа

<>Ы>Включение втеговие конструкції

<>Ы>Импортирование

</>UL>

</>BODY>

</HTML>

Також слід зазначити, що використання кожного способу визначення стильових шаблонівCSS пов'язана з декотрими мінусами.

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

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

З використанням способу включення стилю в сам документ наявність надто великої кількості шаблонівCSS помітно збільшить кінцеву величинуHTML-страници, що позначиться часу завантаження документа в браузері.

>CSS іDynamic HTML - це й привабливо! 187

При поєднанні різних способів визначення стильових шаблонів треба враховувати особливості браузерів. Приміром, Netscape "погано належить" для використання символу нижнього підкреслення (_) в вказуванні класів для елементів HTML (.news_titie,. _>about тощо.). Також ряд браузерів (і Netscape зокрема) не підключає стильовий шаблон класу, привласненого осередку таблиці <>то>/<тн>: конструкція <тоCLASS="text">TeKCT</TD> виведе текст за умовчанням, a <>tdxfontCLASS="text">TeKCT</FONT></TD> відобразить текст заданим стилем.


3.JavaScript

>JavaScript - мову підготовки сценаріїв, дозволяє зробити Webсторінки більш інтерактивними і функціональними. Після вивчення ви зможете займатися розробкоюWeb-приложений на якісно новий рівень. Для написання сценаріївJavaScript обов'язково потрібно знання мови HTML. У цьому главі ви отримаєте першу виставу проJavaScript ще до його того, як почнете створювати свій "перший сценарій.

Тут наводиться наступна інформація:

>Q важливість вивченняJavaScript; а історіяJavaScript;

і деякі різницю між мовами підготовки сценаріїв і мовами програмування; а інструменти, необхідних написання сценаріївJavaScript.

3.1 ВикористанняJavaScript

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

Отже, ви можете спостерігатиJavaScript діє, а створити подібні ефекти може кожен людина, знає цю мову. Причому без особливих зусиль.

Рекомендація Слід поспостерігати те, що створюють із допомогоюJavaScript інші розробники. Це спосіб знайти свіже рішення.

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

3.2 Важливість вивченняJavaScript

Корисно вивчитиJavaScript хоча б за його поширення у мережі. Дуже багатоWeb-страниц зроблено з допомогою сценаріїв (з найрізноманітніших причин), і сайти без них здаються блідими і нудними. Хоч би яким цікавим був зміст сайту, деякі відвідувачі відразу захочуть піти. Звісно, немає сенсу оспорювати важливість текстового змісту для будь-який Webсторінки, проте використанняJavaScript як поліпшить подачу матеріалу, а й зробить вашу сторінку більш що запам'ятовується.

Рекомендація Запам'ятайте: єдине, що відрізняє користуються успіхом сайти від невдалих, - їхній зовнішній вигляд. Чим цікавіше оформлений сайт, тим він популярнішими.

Попередження Стережіться використання знайдених мережі сценаріїв, виділені на копіювання і вставки. Зазвичай, вони відрізняються хорошим якістю й, що най, дублюються на тисячах сайтів. ВивченняJavaScript позбавить вас від такої практики і дозволить створювати оригінальні пам'ятні Webсторінки.

Можна познаходити ще багато причин з вивчення та ефективного використанняJavaScript. Сценарій лише кількох рядків допомагає відвідувачам сайту відшукати сторінку, відповідну їх браузеру і настановам, або автоматично підрахувати суму колонок у вигляді замовлення. Такі "дрібниці" не розраховані зовнішній ефект, але де вони свідчить про рівні професіоналізму розробника і знанні їм етики ділових відносин.


3.3 Програмний код Web сайту

<html>

<>head>

<>title>Хостинг. Готові шаблони сайтів. </>title>

<>metaname="robots"content="ALL">

<>metaname="keywords"content="хостинг, безплатний, готовий, шаблон, сайт">

<>metahttp-equiv=Content-Typecontent="text/html;charset=windows-1251">

<>metaname="description"content="Бесплатний хостинг. Готові безкоштовні шаблони сайтів. ">

<! -Хостинг - ->

<>styletype="text/css">

a {>text-decoration:none;font-size:8pt;color: #>E0FDAF; }

a:hover {>text-decoration:underline;font-size:8pt;color: #>E0FDAF; }

>font {font-family:Arial,Tahoma,Helvetica;font-size:8pt;color:white; }

b.yellow {>color: #>FAF294; }

>hr {>color: #>D1D33B; }

>hr.bw {>color: black; }

>font. green {font-family:Arial,Tahoma,Helvetica;font-size:8pt;color: #>B5FC39; }

>font.title {font-family:Arial,Tahoma,Helvetica;font-size:14pt;color: #>ffffff; }

>font.title1 {font-family:Arial,Tahoma,Helvetica;font-size:16pt;color: black; }

>font.title2 {font-family:Arial,Tahoma,Helvetica;font-size:20pt;color: #>D2A801; }

>font.title3 {font-family:Arial,Tahoma,Helvetica;font-size:14pt;color: black; }

>font.title4 {font-family:Arial,Tahoma,Helvetica;font-size:16pt;color:white; }

>font. black {font-family:Arial,Tahoma,Helvetica;font-size:8pt;color: black; }

>font.blackt {font-family:Arial,Tahoma,Helvetica;font-size:14pt;color: #>ffffff; }

>font.blacklm {font-family:Arial,Tahoma,Helvetica;font-size:8pt;color: black; }

>font.blacklm2 {font-family:Arial,Tahoma,Helvetica;font-size:7pt;color: black; }

>font.blacklight {font-family:Arial,Tahoma,Helvetica;font-size:10pt;color:white; }

>font.blacklight2 {font-family:Arial,Tahoma,Helvetica;font-size:10pt;color: black;font-weight:bold }

>font.tse {font-family:Arial,Tahoma,Helvetica;font-size:8pt;color: #>96B495; }

</>style>

</>head>

<>bodybgcolor=whitetext=#ffffffleftMargin=0topMargin=0marginwidth=0marginheight=0>

<! - ->[email protected]><scriptlanguage="JavaScript"><! - -

>d=document; a=''; a+=';r='+escape (>d.referrer)

>js=10 // --></>script><scriptlanguage="JavaScript1.1"><! - -

a+=';j='+navigator.javaEnabled ()

>js=11 // --></>script><scriptlanguage="JavaScript1.2"><! - -

>s=screen; a+=';s='+s.width+'*'+s.height

a+=';d='+ (>s.colorDepth?s.colorDepth:s.pixelDepth)

>js=12 // --></>script><scriptlanguage="JavaScript1.3"><! - -

>js=13 // --></>script><scriptlanguage="JavaScript"><! - -

>d.write ('<>imgsrc="top.list/counter'+

'?id=280923;js='+js+a+';rand='+Math.random () +

'"height=1width=1>')

>if (>js>11)d.write ('<'+'! - ') // --></>script><noscript><img

>src="top.list/counter?js=na;id=280923"

>height=1width=1alt=""></noscript><scriptlanguage="JavaScript"><! - -

>if (>js>11)d.write ('--'+'>') // --></>script><! - -/>COUNTER-->

<>center>

<! - Безкоштовний хостинг - ->

<>tableborder=0cellpadding=0cellspacing=0width=650><! -Хостинг - ->

<>trvalign=top>

<>tdbackground=vb-1. jpgwidth=28height=30></td>

<>tdbackground=vb-2. jpgwidth=592height=30align=center></td>

<>tdbackground=vb-3. jpgwidth=30height=30></td>

</>tr>

</>table>

<>tablebgcolor=whiteborder=0cellpadding=0cellspacing=0width=650><! -Хостинг - ->

<>trvalign=top>

<>tdbackground=vb-4. jpgwidth=15height=5></td><! -Столбец 1 (Вертикальне) - ->

<>tdbackground=vb-5. jpgwidth=621align=center>

<! - БезкоштовнийХостинг - ->

<>imgsrc=title. jpgalt="Хостинг"border=0>

</>td>

<>tdbackground=vb-6. jpgwidth=16height=5></td>

</>tr>

</>table>

<>tablebgcolor=whiteborder=0cellpadding=0cellspacing=0width=650><! - Нижня частина таблиці - ->

<>trvalign=top>

<>tdbackground=vb-7. jpgwidth=28height=30></td>

<>tdbackground=vb-8. jpgwidth=594height=30align=center></td>

<>tdbackground=vb-9. jpgwidth=28height=30></td>

</>tr>

</>table>

<>tableborder=0cellpadding=0cellspacing=0width=650><! - Верх таблиці - ->

<>trvalign=top>

<>tdbackground=vb-1. jpgwidth=28height=30></td>

<>tdbackground=vb-2. jpgwidth=592height=30align=center></td>

<>tdbackground=vb-3. jpgwidth=30height=30></td>

</>tr>

</>table>

<>tablebgcolor=whiteborder=0cellpadding=0cellspacing=0width=650><! - Середня переважна більшість таблиці - ->

<>trvalign=top>

<>tdbackground=vb-4. jpgwidth=15height=5></td><! -Столбец 1 (Вертикальне) - ->

<>tdbackground=vb-5. jpgwidth=621align=center>

<>tablebgcolor=whiteborder=0cellpadding=0cellspacing=0width=560>

<>tr>

<>tdbackground=vb-5. jpg>

<>font><palign=left><br>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=vbcomponent.narod/title="VisualBasic">VB іCOM</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=barbie.oflamerontitle="Барби">Барби</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=themonopoly.narod/title="Игри"><b>Игри</b></a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=gamebuilder.narod/title="Игри">Генераторигр</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=oflameron.com/title="Freetutorials">Tutorials</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=tcp.oflameron.com/title="Winsock">Winsock</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=kyrsovik.oflameron/title="Курсовик">Курсовики</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=guide.oflameron/title="VisualBasic">VisualBasic</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=oflameron.com/title="VBtutorial">FreeTutorials</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=play.oflameron/title="Бесплатниеигри">Игри</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=music.instructions/title="БесплатниеMP3"><b>MP3</b></a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=website.oflameron/title="Шаблонисайтов">Шаблони</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=web.oflameron/title="Шаблонисайтов">Сайт</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=website.oflameron/title="Вебдизайн">Вебдизайн</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=delphi.oflameron.com/title="Delphitutorial">Delphi</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=oflameron/ee/title="Игрискачать">Скачатьигру</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=oflameron/nu/title="Натуризм">Натуризм</a>&nbsp; &>nbsp; <>imgsrc=point. jpg> <ahref=oflameron.narod/title="Карти">Карти</a>&nbsp; &>nbsp; <>imgsrc=point. jpg>

Страница 1 из 2 | Следующая страница

Схожі реферати:

Навігація