Новини освіти і науки:

G+

Тлумачний словник
Авто
Автоматизація
Архітектура
Астрономія
Аудит
Біологія
Будівництво
Бухгалтерія
Винахідництво
Виробництво
Військова справа
Генетика
Географія
Геологія
Господарство
Держава
Дім
Екологія
Економетрика
Економіка
Електроніка
Журналістика та ЗМІ
Зв'язок
Іноземні мови
Інформатика
Історія
Комп'ютери
Креслення
Кулінарія
Культура
Лексикологія
Література
Логіка
Маркетинг
Математика
Машинобудування
Медицина
Менеджмент
Метали і Зварювання
Механіка
Мистецтво
Музика
Населення
Освіта
Охорона безпеки життя
Охорона Праці
Педагогіка
Політика
Право
Програмування
Промисловість
Психологія
Радіо
Регилия
Соціологія
Спорт
Стандартизація
Технології
Торгівля
Туризм
Фізика
Фізіологія
Філософія
Фінанси
Хімія
Юриспунденкция

Поняття HTML

Основи веб - дизайну

Мета: Ознайомити з технологією створення простих веб-сторінок за допомогою мови програмування HTML.Повідомити про основні команди html-мови для створення сайту. Познайомити зі структурою web-сторінки.

Навчити: вставляти текст у веб-сторінку, форматувати абзаци, переносити рядкиНавчити форматувати текстову інформацію на веб-сторінці.

Розглянути поняття списків у мові HTML. Навчити створювати різні види списків: від нумерованих до списків визначень.

Навчити змінювати зовнішній текст за допомогою спеціальних тегів.

Повідомити про горизонтальні лінії і навчити вставляти їх в html-сторінку. Розглянути види горизонтальних ліній і їх властивості.

Навчити вставляти графічні зображення в html-документ. Розповісти про додаткові параметри обробки картинок за допомогою мови HTML.

Навчити змінювати фон веб-сторінки за допомогою як кольору, так і картинки.

Пояснити схему дії гіперпосилань. Навчити створювати посилання і ефективно використовувати їх.

Розглянути процес створення графічних посилань.Навчити створювати таблиці і розміщувати в них вміст веб-сторінки.

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

План

1. Поняття HTML

2. Особливості гіпертексту

3. Питання для самоконтролю

4. Основні теги

5. Структура каркас Web-Сторінки

6. Питання для самоконтролю

7. Абзаци

8. Перенос рядка

9. Заголовки

Поняття HTML

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

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

Ідея всепланетної комп'ютерної мережі стала актуальною тоді, коли обчислювальні машини перестали бути власністю тільки установ і відомств; тобто коли з'явилися персональні комп'ютери.

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

HyperText Markup Language (мова розмітки гіпертексту) давно перестав бути просто мовою програмування. Поняття HTML містить у собі різні способи оформлення гіпертекстових документів, дизайн, браузери і багато чого іншого. Вивчивши цю мову, можна проробляти складні речі простими способами і, головне, швидко – а це у комп'ютерному світі значить дуже багато.

Html-сторінка - документ, створений у вигляді гіпертексту на основі мови HTML, має розширення html (htm) і в гіпертекстових редакторах і браузерах мають загальну назву.

Гіпертекст найбільш зручна мова для включення мультимедійних елементів у документи. Завдяки розвитку саме гіпертексту, більшість людей одержала можливість створювати власні мультимедійні продукти, поширюючи їх на CD і DVD-дисках.

Такі продукти, виконані у вигляді Html-Сторінок, не вимогливі до спеціальних програмних засобів, тому що всі потрібні інструменти (Веб-браузери) для роботи з такими даними стали частиною «джентльменського набору» програмного забезпечення на будь-якому ПК.

У такому випадку, користувач повинен лише підготувати тексти і малюнки, створити Html-Сторінки і зв'язати їх.

Html-мова як основа Веб-сторінок відіграє важливу роль у розвитку нового напрямку в образотворчому мистецтві - Веб-дизайну.

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

Особливості гіпертексту

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

Якщо зрівняти гіпертекстовий документ і документ MS Word, то в таких випадках використовуються ті самі прийоми форматування:

Ü вибір шрифту

Ü колір

Ü окреслення

Ü вирівнювання

Ü вставка таблиць і малюнків

Але в документі Word механізм форматування схований від користувача і працювати з файлом можна лише в текстовому редакторі. У системі гіпертексту закладений інший принцип – такі документи можна відкривати в будь-якому текстовому редакторі і бачити яким чином, наприклад, відформатований текст і т.д.

Зрозуміло, що переглянути документ у відформатованому вигляді можна тільки в браузерах.

Усі елементи мови можна умовно розділити на три групи:

Ü елементи, які створюють структуру гіпертекстового документа. Їхнє використання є необхідним і важливим моментом при побудові сторінки.

Ü елементи, які створюють ефекти форматування. Їх використовують при конкретних вимогах до документу і при наявності фантазії і уміння розробника

Ü елементи, які управляють програмними засобами, встановленими на комп'ютері користувача

Насамперед, потрібно сказати, що створення веб-сторінки відбувається у звичайному блокноті.

Після введення туди певних команд, текстовий документ потрібно зберігати з розширенням.html, а потім сторінка проглядається будь-яким браузером.

Основні теги

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

Теги розділяються на парні і непарні.

Наприклад, тег <p> і </p> є парним, бо перший відкриває, а другий закриває абзац. Разом вони утворюють своєрідний контейнер, де розміщений текстовий фрагмент.

Тег <br> непарний – він є командою до переносу рядка і ставиться там, де необхідно виконати дану команду.

Кожна web-сторінка повинна містити тег <HTML>, розташований на самому початку. Цей тег описує документ як web-сторінку, написану на мові HTML.

Безпосередньо за дескриптором <HTML> зазвичай йде тег <HEAD>, який вказує на наявність тексту, що містить ім'я і додаткові відомості про сторінку.

У цьому розділі зазвичай розміщується тег <TITLE>, який служить для позначення імені сторінки, яке відображається в заголовку вікна браузера. Назва Web-Сторінки може складатися з символи букв, цифр, пробілу.

Далі слідує тег <BODY> – він вказує на початок власне "тіла" html-сторінки. (англ. Body-тіло)

Тут розміщується весь вміст, контент сторінки:

Ü текст

Ü графіка

Ü аудіо і відеоматеріали

Ü таблиці

Ü інші елементи сторінки, які може бачити відвідувач сайту.

Графічна інформація використовується на веб-сторінці за допомогою одинарного тега «img», атрибути якого прописуються поруч і перелічуються через пробіл:

1. src - задає Url-Адресу зображення

2. width - ширину зображення

3. height – висоту зображення

4. align - вирівнювання зображення на сторінці (по лівому, правому, по центру)

<== попередня сторінка	\|	наступна сторінка ==>
	\|	Структура каркас Web-Сторінки

Не знайшли потрібну інформацію? Скористайтесь пошуком google:

Генерація сторінки за: 0.006 сек.