Порядок виконання роботи.
1. Зайдіть на сайт http://narod.ru.
2. Зареєструйте Інтернет-сторінку на зазначеному в пункті 1 сайті. В процесі реєстрації виберіть варіант організації сайту - персональний веб-сайт, результати відобразіть у звіті.
3. Увійдіть в конструктор сайту і виберіть: стиль оформлення сторінки, шрифти, макет сторінки й назву. Результати збережіть у звіті.
4. Заповніть всі розділи створеного сайту. Результати збережіть у звіті.
5. Опублікуйте створений сайт натиснувши кнопку «Опубликовать».
6. Дайте посилання на опублікований сайт вашому сусідові зліва і справа. Попрохайте їх зайти на сайт.
7. Зайдыть на Ваш сайт в режимі редагування і виберіть розділ статистика. Проаналізуйте статистику відвідування сайту. Результати відобразіть в звіті.
8. Зайдіть в налаштування сайту та виберіть розміщення блоку реклами від Яндекса.
Практичне заняття № 6 Тема: Створення веб-сайтів за допомогою базових html тегів.
Мета: навчитися створювати власні веб-сторінки використовуючи гіпертекстову мову.
Підготовка до заняття:
Вивчити теоретичний матеріал (теоретична частина цих рекомендацій, Інтернет).
Підготувати звіт по роботі.
Теоретична частина
Базові HTML-теги
Дескриптори (теги) в HTML - це спеціальні елементи розмітки, що визначають, як даний документ HTML має інтерпретуватися програмою перегляду інформації в Internet - броузером. Розглянемо основні дескриптори HTML. Дескриптори HTML бувають одно- і двохкомандні. Однокомандні дескриптори зазвичай використовуються для зміни виду виведеної на екран інформації. Вони задаються в наступному вигляді:
<команда [атрибут = значення [атрибут = значення] ...]> текст Де:
команда - команда HTML; атрибут = значення - завдання конкретних значень параметрів (атрибутів) команди (є не обов'язковими); текст-текст, який виводиться на екран тільки для читання у вигляді, визначеному командою і її атрибутами.
Двохкомандні дескриптори є основним засобом реалізації HTML документів і використовуються для завдання параметрів документа (заголовок, вставка посилань, об'єктів і ін) Вони спарені так, що за відкриваючим тегом слідує відповідний закриваючий тег, а між ними міститься текст або інші теги. Два тега і частина документа, відокремлена ними, утворюють блок, який називається HTML-елементом. Вони мають такий вигляд:
<команда [атрибут = значення [атрибут = значення] ...]>
[Текст] [дескриптор] [[текст] [дескриптор] ...]
</команда>
де / - використовується у випадку, коли тег є закриваючим в блоці тегів;
Якщо тег складається з двох команд, то першою повинна бути визначена команда без косої риси, яка сигналізує про початок виконання тега, а другий – команда з попередньою косою рисою (/), яка інформує про закінчення дії тега.
HTML-документ містить наступні основні теги:
<HTML> ... </HTML> - задає початок і кінець HTML-документа;
<HEAD> ... </HEAD> - заголовна частина документа, тут знаходяться тег заголовка (дивись нижче) і службові теги (мета-теги, призначені для управління сторінкою);
<TITLE> ... </TITLE> - задає заголовок сторінки (виводиться в рядку заголовка броузера).
<BODY> ... </BODY> - тіло документа, тут міститься та інформація, яка буде оброблятися браузером і виводитися на екрані. Всередині стартового тега елемента BODY можна розташувати ряд атрибутів, що забезпечують установки для всієї сторінки цілком;
<! ... > - Коментар.
Обов'язкова структура HTML-документа повинна будуватися за шаблоном: <HTML>
<Head>
<Title> Текст заголовка </Title>
</Head>
<Body>
... Текст документа
...
</Body>
</HTML>
Мова НTML нечутлива до регістру (не розрізняються великі та малі літери в тегах).
2.2. Форматування тексту
У браузері текст документа виводиться з переформатуванням його відповідно до поточних розміром (шириною) основного вікна. Перенесення слів визначаються автоматично.
Розглянемо основні теги для форматування.
<P> </P> - елемент абзацу (paragraph). Елемент Р позначає кінець попереднього і початок наступного абзацу. Кінцевий тег зручно використовувати в тих випадках, коли за змістом необхідно позначити кінець абзацу. Разом з елементом Р можна використовувати атрибут align.
<BR> - елемент, що забезпечує примусовий перехід на новий рядок. Він однокомандний. У місці його розміщення рядок закінчується, а залишив-шийся текст друкується з нового рядка.
<NOBR> </Nobr> - цей елемент за своєю дією є прямою протилежністю попередньому. Текст, укладений між його тегами, буде виведений в один рядок. Довгий рядок не вміститься на екрані, і для його перегляду доведеться використовувати горизонтальну смугу прокручування.
<PRE> </Pre> - позначення тексту, відформатованого заздалегідь (preformatted). Мається на увазі, що текст буде виведений в тому вигляді, в якому він був підготовлений користувачем. Наприклад, враховуються символи кінця рядка, що з'явилося при наборі тексту в редакторі. В усих інших випадках браузер ігнорує ці символи. Цей елемент зручно використовувати для демонстрації лістингів програм або для виведення текстових документів, переформатування яких може призвести до спотворення їх змісту.
<BLOCKQUOTE> </Blockquote> - позначення цитати. Цей елемент вимагає наявність кінцевого тега. Текст не зазнає жодних змін, але абзац розташовується з відступом. До лапок цей елемент теж не має ніякого відношення: якщо в цитаті використовуються лапки, то вони повинні бути проставлені явним чином. В даний час використовують і інше написання цього елемента: BQ.
<CENTER> </Center> - центрування тексту, а точніше, будь-якого вмісту. Не є загальновживаним.
<DIV> </Div> - вирівнювання вмісту по лівому краю, по центру або по правому краю. Для цього стартовий тег повинен містити відповідний атрибут:
align=''left''
align=''center''
align=''right''
<PLAINTEXT> </Plaintext> - цей елемент призначений для створення тексту з конструкціями HTML, які повинні сприйматися саме як текст. Всі теги, укладені в PLAINTEXT, сприймаються броузером тільки як довільні символи. Елемент зручно використовувати для обговорення питань, пов'язаних з використанням HTML.
<CODE> </Code>, <SAMP> </samp> і <VAR> </var> - призначені для виведення фрагментів програм. CODE використовується для форматування тексту програми. SAMP передбачається задіяти при ілюстрації прикладів виведення даних на екран. VAR був створений для виділення змінних. Як правило, всі ці елементи забезпечують виведення інформації з використанням моноширинного шрифту.
<KBD> </Kbd> - цей елемент призначений для вказівки тексту, який користувач повинен ввести з клавіатури. Можна розраховувати, що текст, виділений за допомогою цього елемента, буде виділено моноширинним шрифтом в напівжирному накресленні.
Приклад 1.
<HTML>
<HEAD>
<TITLE> Приклад 1 </TITLE>
</HEAD> <BODY>
У даному тексті <BR> позначено два абзаци.
Це перший з них. <P>
Другий абзац складається з одного рядка. <P>
</BODY> </HTML>
Результат пpи перегляді в бpаузеpі:
У даному тексті
позначено два абзаци. Це перший з них.
Другий абзац складається з одного рядка.
Тег <HR> відображає горизонтальну лінію, що йде через весь екран.
Приклад 2.
<BODY>
Текст1. <P> <HR>
Текст2. <P> <HR>
</BODY>
Результат: Текст1.
Текст2.
2.3. Шрифти.
В Html-документі можна задавати шість рівнів шрифтів заголовків. Загальний синтаксис директиви визначення заголовка такий:
<Hx> Заголовок </ Hx>,
де x - це номеp pівня від 1 до 6. <H1> - самий великий заголовок, <H6> - найменший.
Приклад 3:
<H1> Тема pівня 1 </H1>
<H6> Тема pівня 6 </H6>
Результат: