- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Створення Web-сторінок презентация
Содержание
- 1. Створення Web-сторінок
- 2. Web-сайт – це сукупність Web-сторінок, які об’єднані однією загальною темою
- 3. Шаблони Web-сторінок
- 4. Сайт-візитка
- 5. Інформаційний сайт
- 6. Інтернет-портал
- 7. Інтернет-магазин
- 8. Основи мови HTML: теги, атрибути тегів, коментарі
- 9. Html-документ – це звичайний текстовий документ,
- 10. ТЕГИ Тег – інструкція броузеру, яка вказуює спосіб відображення тексту.
-
11.
Тег завжди починається зі знаку «меньше» ()
Наприклад:
ПРАВИЛО ЗАПИСУ ТЕГІВ - 12. ТЕГИ ТЕГ одинарні парні (контейнер) відкриваючий < > закриваючий
- 13. СТРУКТУРНІ ТЕГИ Весь вміст файла інтернету-сторінки заключається
- 14. СТРУКТУРНІ ТЕГИ Базова структура HTML-документа має такий вигляд:
- 15. КОМЕНТАРІ - напівтег використовується для додавання
- 16. ПРИКЛАД HTML-ДОКУМЕНТУ Моя перша Інтернет-сторінка!
- 17. Практичне завдання
- 18. Перед початком роботи ми створюємо на
- 19. Завантажуємо стандартну програму Блокнот і вводимо
- 20. Створюємо заголовок для нашої Web-сторінки, для
- 21. Зберігаємо документ: Файл → Сохранить
- 22. Заванажуємо броузер – Internet Explorer Відкриємо
- 25. При перегляді Web-сторінки ми бачимо, що вона вже має і’мя
- 26. Переходимо безпосередньо до заповнення нашої сторінки,
- 29. Змінюємо колір шрифту текст
- 32. Створюємо колір тексту для всього документу
- 35. Створення фону
- 38. Створення абзаців, використовуємо тег текст
- 39. Центрувати текст: текст Вирівнювати по лівому
- 42. Також для вирівнюювання тексту можна використовувати
- 45. Створення заголовків тег - текст
- 48. Встановлюємо розмір шрифта тег
- 51. Створення стилю для шрифта Напівжирний текст
- 54. Тип шрифту тег – face атрибут – Arial текст
- 57. Вставлення малюнка
- 58. Якщо картинка лежить в піддиректорії, то
- 60. Розташування тексту поряд з картинкою, використовують атрибут align, який відповідає за вирівнювання.
- 61. Задаємо параметри розташування тексту біля малюнка та розмір малюнка
- 63. Атрибут vspace - задає відстань між текстом і малюнком – по вертикалі
- 64. р
- 66. Атрибут alt - короткий опис картинки
- 69. Картинку можна зробити фоном документа Дана дія прописується у відкриваючому тегі body
- 71. Створення таблиць Таблиця задається тегом Рядок таблиці Стовпець (комірка) таблиці
- 74. Колір фону таблиці задається атрибутом bgcolor="цвет_фона“
- 77. Задати фон для рядка атрибут bgcolor
- 78. Задаємо висоту і ширину таблиці використовуємо відомі
- 80. Вирівнювання тексту в комірках
- 81. Вертикальне вирівнювання задається наступним атрибутом - align="middle“
- 84. Створення рамки для таблиці Рамка вводиться параметром border
- 87. Колір рамки
- 90. Лінія і не вимагає закриваючого
- 92. Створення форм Всі елементи створення поля введення
Слайд 9Html-документ – це звичайний текстовий документ, що містить спеціальні команди для
розмітки тексту (теги).
HTML-файл має розширення
.htm або .html
Слайд 13СТРУКТУРНІ ТЕГИ
Весь вміст файла інтернету-сторінки заключається в контейнер ..., вказуючи броузеру,
що даним текстом є html-документ і, можливо містить в собі теги, які броузер повинен виявити, розпізнати.
Типова інтернет-сторінка складається з двох частин: заголовка (HEAD) і тіла (BODY).
Типова інтернет-сторінка складається з двох частин: заголовка (HEAD) і тіла (BODY).
Слайд 15КОМЕНТАРІ
- напівтег використовується для додавання коментарів
на сторінці, тобто для корисних пояснень, які не показуються в броузері.
Приклад:
Заголовок
Підзаголовок
Слайд 16ПРИКЛАД HTML-ДОКУМЕНТУ
Моя перша Інтернет-сторінка!
Це моя перша спроба роботи в
Web-дизайні.
Можливо, сторінка пока ще вийшла
не дуже красива, але вона працює!!!
Можливо, сторінка пока ще вийшла
не дуже красива, але вона працює!!!
Слайд 18Перед початком роботи ми створюємо
на комп'ютері
окрему папку для майбутньої
сторінки:
Робочий стіл\Папка з власним прізвищем\
Створення сайтів
Робочий стіл\Папка з власним прізвищем\
Створення сайтів
Слайд 19
Завантажуємо стандартну програму Блокнот і вводимо теги для створення
базової структури
HTML сторінки
Слайд 20
Створюємо заголовок для нашої Web-сторінки, для цього необхідно ввести назву між
тегами «Заняття 1»
Слайд 22
Заванажуємо броузер – Internet Explorer
Відкриємо в броузері наш документ:
Файл -
Открыть - кнопка Обзор
вказуємо адрес нашого документа index.html.
Слайд 26Переходимо безпосередньо до
заповнення нашої сторінки,
тобто до тіла документа.
Всі
теги, розташовані між
, - безпосередній зміст документа.
Вводимо текст: та використовуємо тег:
– перенесення тексту на інший рядок.
Деякі теги, наприклад
,
не вимагають закриваючий тег
, - безпосередній зміст документа.
Вводимо текст: та використовуємо тег:
– перенесення тексту на інший рядок.
Деякі теги, наприклад
,
не вимагають закриваючий тег
Слайд 39
Центрувати текст:
текст
Вирівнювати по лівому краю документу:
текст
Вирівнювати текст
по правому краю документу:
текст
По ширині документа:текст
За допомогою даного тега
використовуючи інші атрибути ми зможемо
Слайд 42
Також для вирівнюювання тексту можна використовувати тег .
Всі чотири значення атрибуту
align можна вживати з
:
текст
текст
текст
текст
Слайд 48
Встановлюємо розмір шрифта
тег – атрибут – size
size="+4"> текст
текст
текст
текст
текст
текст
текст
текст
текст
текст
текст
текст
текст
Слайд 51Створення стилю для шрифта
Напівжирний текст
Похилий текст (курсив)
Підкреслений текст
Перекреслений
Слайд 58
Якщо картинка лежить в піддиректорії, то посилання на неї виглядатиме так:
src="/Створення сайтів/1.jpg">
Якщо картинка лежить на рівень вище, а документ знаходиться в піддиректорії, то посилання на неї буде таким:
Якщо картинка лежить на іншому сайті, то шлях прописується повністю:
Якщо картинка лежить на іншому сайті, то шлях прописується повністю:
Слайд 60
Розташування тексту поряд з картинкою, використовують атрибут align, який відповідає за
вирівнювання.
![](“Малюнки/1.jpg")
Слайд 63
Атрибут vspace - задає відстань між текстом і малюнком – по
вертикалі
Атрибут hspace- задає відстань між текстом і малюнком – по горизонталі
Атрибут hspace- задає відстань між текстом і малюнком – по горизонталі
Слайд 74Колір фону таблиці задається атрибутом
bgcolor="цвет_фона“
Фон можна задати для таблиці в цілому,
для ряду, для комірки.
Слайд 77Задати фон для рядка
атрибут bgcolor ми прописуємо для тега –:
tr
bgcolor="#FFCC33">
фон для всієї таблиці – атрибут bgcolor ми прописуємо для тега :
Слайд 78Задаємо висоту і ширину
таблиці
висота і ширина можуть задаватися як в пікселях, так і відсотках
Слайд 81Вертикальне вирівнювання задається наступним атрибутом - align="middle“
Слайд 90Лінія
Слайд 92Створення форм
фон для всієї таблиці – атрибут bgcolor ми прописуємо для тега :
фон для всієї таблиці" alt="">Слайд 78Задаємо висоту і ширину
таблиці
використовуємо відомі нам вже атрибути height і width
висота і ширина можуть задаватися як в пікселях, так і відсотках
Слайд 81Вертикальне вирівнювання задається наступним атрибутом - align="middle“
Top – вгорі
Bottom –
внизу
Горизонтальне вирівнювання вмісту коміркику, а valign - вертикальне, перейдемо до наступної сходинки, щоб дізнатися про інші атрибути, що полегшують наше важке життя.
Горизонтальне вирівнювання вмісту коміркику, а valign - вертикальне, перейдемо до наступної сходинки, щоб дізнатися про інші атрибути, що полегшують наше важке життя.
Слайд 90Лінія
і не вимагає закриваючого тега:
У лінії є багато різних
параметрів:
(center или left)
(ширина лінії в процентах/пікселях)
(толщина линии)
(отмена объемности)
(колір лінії)
(center или left)
(ширина лінії в процентах/пікселях)
(толщина линии)
(отмена объемности)
(колір лінії)
Слайд 92Створення форм
Всі елементи створення поля введення і кнопок, задаються за допомогою
тегів
та
та
Обратная связь
Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:
Email: Нажмите что бы посмотреть
Что такое ThePresentation.ru?
Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.