Курсова робота на тему: «ОСНОВИ СТВОРЕННЯ САЙТІВ»

Зміст

Зміст    2

Вступ    3

Розділ І. Теоретичні аспекти створення web-сайтів    4

1.1 Поняття про мову розмітки гіпертексту    4

1.2 Вплив розміру екрану на відображення сторінок    12

1.3 Оптимізація зображень у форматі gif i jpeg    13

1.4. Створення власного стилю сайту    17

РОЗДІЛ ІІ. Інструментарій для створення Web-сторінок    25

2.1 HTML-редактори    25

2.2 Графічні редактори    27

Висновки    29

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

Вступ

З самого початку розвитку Internet, а особливо з появою Web-технологій, мережа орієнтована на інформаційне забезпечення своїй користувачів.

Метою даної курсової роботи є дослідження розвитку сучасних Web-технологій та їх ефективного застосування.

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

В процесі досягнення поставленої мети в курсовій роботі необхідно було вирішити ряд наступних завдань:

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

 

Розділ І. Теоретичні аспекти створення web-сайтів

1.1 Поняття про мову розмітки гіпертексту

Документ HTML можна розглядати як сукупність вказівок (команд) і даних (як безпосередньо розміщених у документів, так і пов’язаних з ним посиланнями), які при інтерпретації програмою-броузером відтворюють вигляд сторінок документу. Документ HTML складається з так званих тегів.

Тег – це одиниця коду HTML, яка складається з “команди”, поміщеної у кутові дужки < >. Теги бувають відкриваючими та закриваючими. Закриваючі теги починаються зі знаку /. Документи починаються і закінчуються тегами, які позначають його початок та кінець: <HTML> та </HTML>

В межах документу виділяються дві області – заголовок та власне “тіло документу”. Заголовок оголошується тегами <HEAD> та </HEAD>

У межах заголовку можуть розміщуватись власне заголовок документу (відображається у верхній стрічці вікна броузера), він створюється тегами <TITLE> та </TITLE>; крім цього у заголовку документу може міститися тег <META>, який використовується для технічного опису документу (інформація для пошукових програм), а також тег <STYLE>, який використовується для опису стилів, які використовуються у документі.

Наступним розділом документу HTML є розділ “тіла документу”. Він починається тегом <BODY>, а закінчується тегом </BODY> . Він має наступні параметри:

BACKGROUND = “*.*” Замість *.* вказується адреса малюнка, який повинен бути фоном даного документу

BGCOLOR= Вказується назва або номер кольору, який повинен бути фоновим для даного документу

TEXT= Вказується колір тексту

LINK= Визначає колір гіперпосилань у документі

ALINK= Визначає колір гіперпосилань у момент натиснення

VLINK= Визначає колір переглянутих гіперпосилань

1.1.1 Форматування символів

Для оформлення документів може використовуватись багато кольорів. З ними можна ознайомитися на цій сторінці .

Для переходу на новий рядок використовується тег <BR> .

Для виділення тексту в абзаци існують теги <P> та </P> .

Текст, розміщений між тегами <B> та </B> буде жирнішим. bold

Текст, розміщений між тегами <I> та </I> буде написаний курсивом. italics

А текст, розміщений між тегами <U> та </U> буде підкресленим. underlined

Текст, розміщений між тегами <S> та </S> буде перекресленим. striken

Текст, розміщений між тегами <SUB> та </SUB> буде написаний як нижній індекс. індекс

Текст, розміщений між тегами <SUP> та </SUP> буде виглядати як верхній індекс. індекс

Тег <HR> вставляє у документ горизонтальну лінію.

Крім цього, можна використовувати різне форматування шрифту за допомогою тегу <FONT> , який має параметри <FACE> – тип шрифту (наприклад: ‘Lucida Sans’, ‘Arial’, ‘Monotype Corsiva’, ‘Times New Roman’), <SIZE> – розмір шрифту (1-7), та <COLOR> – колір шрифту.

1.1.2 Заголовки

Для змістового виділення елементів сторінки використовуються теги-заголовки. Заголовки в HTML бувають шести типів. Текст, розміщений всередині тегу заголовка <H1> </H1> відображатиметься відповідно до типу цього заголовка. Найбільшим є заголовок Н1, найменшим – Н6. Заголовок може розміщуватись на екрані по центру, або вирівняний по правому або лівому краю. <H2 align=center \ right \ left >
</H2>

 

1.1.3 Списки

Списки у HTML бувають трьох видів: марковані, нумеровані та довільної форми.

Можливий вибір маркування списку (circle/disk/square = коло/круг/квадрат)

Також можна вказувати різні типи нумерування: арабські цифри, римські цифри великі й маленькі, латинські букви великі й маленькі. Крім того, можна вказувати номер, з якого починається нумерування (для третього списку це №5, для останнього – №9).

І останній тип списків – довільної форми. Приклад їх складення та вигляду:

У цьому випадку ми вказуємо не лише елементи списку (старости), але й спосіб їх переліку (за групами)

1.1.4 Використання графіки

Для оформлення документів можна використовувати графічні об’єкти. Як вже згадувалось, можна вказати малюнок або колір, які будуть слугувати тлом для документу. Можна також вставляти малюнки прямо в документ. Для цього використовується тег <IMG> . Він має наступні параметри:

src=”*.*” – файлова адреса малюнка, який потрібно вставити

width= – ширина малюнка (в пікселях)

height= – висота малюнка (в пікселях)

align=”center \ right \ left” – спосіб вирівнення малюнка по центру \ по правому \ по лівому краю

alt=”picture” – альтернативний текст для випадків, коли малюнок не завантажується

1.1.5 Гіперпосилання

Інтернет базується на документах, що пов’язані між собою, тобто на гіперпосиланнях між документами. Їх можна створювати за допомогою мови HTML. Між тегами <a href=”index.html”> та </a > вставляється деякий текст, клацнувши на якому можна перейти до вказаного у href документу (в даному випадку – до index.html).

Іноді виникає потреба перейти до підтеми в межах одного документу. Тоді використовується так званий якір. У тому місці документа, куди треба буде перейти, вставляється мітка <a name=”a1″> , а посилання на неї створюється за допомогою тегів <a href=”index.html#a1″> та </a >

1.1.6 Таблиці

Часто для структурованого представлення інформації використовуються таблиці. Вони створюються тегами <TABLE> (таблиця), <TR> (рядки таблиці), <TD> (стовпці таблиці) і виглядають наступним чином:


<table>
<tr >
<td > рядок 1 стовпець 1 </td >
<td > рядок 1 стовпець 2 </td >
<td > рядок 1 стовпець 3 </td >
</tr >
<tr >
<td colspan=2 > рядок займає 2 стовпці </td >
<td rowspan=2 > рядок 2 і 3, стовпець 3 </td >
</tr >
<tr >
<td > рядок 3 стовпець 1 </td >
<td > рядок 3 стовпець 2 </td >
</tr >
</table >
рядок 1 стовпець 1 рядок 1 стовпець 2 рядок 1 стовпець 3
рядок займає 2 стовпці рядок 2 і 3, стовпець 3
рядок 3 стовпець 1 рядок 3 стовпець 2

Як бачимо – мова HTML надає можливість об’єднання комірок таблиці: тег <td colspan= > поєднує стовпці, а тег <td rowspan= > – рядки.

Тег таблиці <TABLE> має наступні параметри:

bgcolor – колір таблиці

border= – ширина рамки таблиці (0-невидима рамка)

width= – ширина таблиці (в пікселях або у відсотках)

height= – висота таблиці (в пікселях або у відсотках)

align=”center \ right \ left” – спосіб вирівнення таблиці по центру \ по правому \ по лівому краю

Схожі параметри мають теги <TD> та <TR> :

bgcolor – колір комірки / всього рядка

background=*.* – колір комірки

width= – ширина комірки (в пікселях або у відсотках)

height= – висота комірки (в пікселях або у відсотках)

align=”center \ right \ left” – спосіб вирівнення вмісту комірок: по центру \ по правому \ по лівому краю

valign=”top \ bottom \ middle” – спосіб вирівнення вмісту комірок по вертикалі: згори \ внизу \ посередині

nowrap – блокує автоматичне перенесення слів в межах комірки

colspan= – кількість стовпців комірки

rowspan= – кількість рядків комірки

ЗАВАНТАЖИТИ

Для скачування файлів необхідно або Зареєструватись

Osnovy Stv Saytiv (227.0 KiB, Завантажень: 7)

Сторінка: 1 2 3 4 5 6
завантаження...
WordPress: 23.66MB | MySQL:26 | 0,332sec