по структуре напоминает журнал по какой-либо теме или проблеме. Как
журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.Веб-страницы связаны гиперссылками.
Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Разработка Web -сайтов с использованием языка разметки гипертекста HTML
Содержание
- 1. Разработка Web -сайтов с использованием языка разметки гипертекста HTML
- 2. Web-страницы и Web-сайты. Структура веб-страницы.
- 3. Понятие веб-сайтаИнформация во Всемирной паутине хранится в
- 4. Программы для создания сайта:1) простейший текстовый редактор
- 5. Структура Web-страницы
- 6. ТэгиВид Web-страницы задается управляющими командами - тэгами,
- 7. Структура Web-страницыВесь HTML-код страницы помещается внутрь главного
- 8. Шаблон веб-страницы Компьютер
- 9. Структура html документа
- 10. Заголовок документа
- 11. Тело документа
- 12. Слайд 12
- 13. Как сохранить веб-страницу1. Cоздать для сайта специальную
- 14. ЗаголовкиЗаголовок 1Заголовок 2Заголовок 3Заголовок 4Заголовок 5Заголовок 6
- 15. Абзац Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать
- 16. Принудительный разрыв строки Мой дядя самых честных
- 17. Атрибуты элементовАтрибутАтрибутТегИмя атрибутаЗначение атрибутаАтрибут
- 18. Используем атрибуты Выровнять по центру Выровнять по
- 19. Коротко о цветеДиапазон: 00 - FF (0
- 20. Раскрашиваем страницу Раскрашиваем страницу Этот
- 21. Непосредственное форматирование текста - курсив - полужирный
- 22. Вставка изображений в Web-страницы
- 23. Вставка изображенийНа Web-страницах могут быть графические файлы
- 24. Поясняющий текст. Расположение рисунка в тексте.Иллюстрации на
- 25. Вид готового сайта
- 26. Код страницы сайта Компьютер Все о
- 27. Гиперссылки на Web-страницах
- 28. Гиперссылки позволяют загружать в браузер другие веб-страницы,
- 29. Виды гиперссылок1) внутренняя: Указатель ссылки2) внешняя: Указатель ссылки
- 30. Указатели гиперссылокУказатель – видимая часть гиперссылки: текст или картинка
- 31. Списки на Web-страницах
- 32. Виды списковНумерованныеМаркированныеСписки терминов (как в словаре)Вложенные списки
- 33. Нумерованный списокСписок – в контейнере Элемент списка
- 34. Маркированный списокСписок – в контейнере Элемент списка
- 35. Понятие интерактивной формыДля общения посетителей сайта
- 36. Текстовое полеОсновной контейнер Текстовое поле – для
- 37. Переключатели (радиокнопки)Круглая кнопка для выбора
- 38. ФлажкиКвадратное окошечко для выбора нескольких ответов из
- 39. Поля списковДля создания раскрывающего списка используют контейнер В нем каждый элемент списка задается тэгом
- 40. Текстовая областьТекстовая область с линейкой прокрутки
- 41. Отправка данных из формыКнопка отправки создается тэгом
- 42. Готовая анкета
- 43. Скачать презентанцию
Web-страницы и Web-сайты. Структура веб-страницы.
Слайды и текст этой презентации
Слайд 3Понятие веб-сайта
Информация во Всемирной паутине хранится в форме Web-сайтов.
Web-сайт
Веб-страницы связаны гиперссылками.
Слайд 4Программы
для создания сайта:
1) простейший текстовый редактор (без форматирования текста):
Visual Studio Code, Sublime text 3, Notepad++, блокнот
2) браузер
для просмотра страниц3) программа обработки изображений:
Photoshop
Слайд 6Тэги
Вид Web-страницы задается управляющими командами - тэгами, которые заключаются в
угловые скобки < >
Тэги бывают одиночные (неповторяющиеся) или парные
(контейнеры): перед закрывающим тэгом контейнера пишут прямой слэш (/) Тэги пишутся английскими буквами (прописными, строчными).
Слайд 7Структура Web-страницы
Весь HTML-код страницы помещается внутрь главного контейнера: .
Web-страница
разделяется на
2 логические части:
заголовок (HEAD) содержание (BODY).
Слайд 11Тело документа
Второй абзац. Для форматирования текста используют разные элементы
языка HTML. 
Комментарий
Слайд 13Как сохранить веб-страницу
1. Cоздать для сайта специальную папку и сохранять
все файлы сайта в этой папке.
2. Web-страницу сохранить в виде
файла с именем index.html - это титульный лист сайта (первым загружается в браузер) Расширения файла Web-страницы – .htm или .html
Слайд 15Абзац
Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если
строка прекращается в месте мягкого переноса, в конце первой строки
должен отображаться символ переноса.
Если строка не прерывается в месте мягкого переноса, символ переноса отображаться не должен. При выполнении таких операций как поиск и сортировка мягкие переносы всегда должны игнорироваться.
Слайд 16Принудительный разрыв строки
Мой дядя самых честных правил,
Когда не
в шутку занемог,
Он уважать себя заставил
И лучше выдумать не
мог. 
Слайд 18Используем атрибуты
Выровнять по центру
Выровнять по правому
краю
Выровнять по ширине
Выровнять по левому краю
size="3"> Толщина разделительной линииРазделительная линия без тени
Ширина в пикселях
Слайд 19Коротко о цвете
Диапазон: 00 - FF (0 - 255)
#00FF00 –
green (зеленый)
#FF0000 – red (красный)
#0000FF – blue (синий)
#FFFFFF
– white (белый)#000000 – black (черный)
#FFFF00 – yellow (жёлтый)
#FFD700 - gold (золотой)
#FFCC00 - tangerine (мандариновый)
#E49B0F - gamboge (гуммигут)
#FDE910 – lemon (лимонный)
Безопасная палитра цветов:
00,33,66,99, CC,FF (216 сочетаний).
Слайд 20Раскрашиваем страницу
Раскрашиваем страницу
Этот текст
синего цвета,
а этот - красного.
Горизонтальная линия тоже
может быть разноцветная. 
Слайд 21Непосредственное форматирование текста
- курсив
- полужирный
- подчеркнутый
- перечеркнутый
- моноширинный
-
увеличить шрифт - уменьшить шрифт
- надиндекс
- подиндекс
Слайд 23Вставка изображений
На Web-страницах могут быть графические файлы 3 форматов —
GIF, JPG и PNG. Если рисунок сохранен в другом формате,
то его необходимо предварительно преобразовать в один из этих форматов.Для вставки изображения используется тэг
1) картинка на локальном компьютере в папке с сайтом:
2) картинка в другой папке на локальном компьютере:
3) картинка находится на удаленном сервере в Интернете:
Слайд 24Поясняющий текст. Расположение рисунка в тексте.
Иллюстрации на Web-страницах стали неотъемлемым
элементом дизайна. Однако пользователи в целях экономии времени иногда отключают
в браузере загрузку графических изображений и читают только тексты.Поэтому, чтобы не терялся смысл страницы, вместо рисунка должен выводиться поясняющий текст с атрибутом ALT
Положение рисунка в тексте – определяет атрибут ALIGN тэга
Слайд 26Код страницы сайта
Компьютер
Все о компьютере
На этом сайта вы сможете получить
различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
Слайд 28Гиперссылки позволяют загружать в браузер другие веб-страницы, связанные с предыдущей.
Гиперссылка
состоит из 2 частей: адрес и указатель ссылки.
Гиперссылка задается универсальным
тегом с атрибутом HREF (он указывает, в каком файле хранится нужная веб-страница):Указатель ссылки
Слайд 33Нумерованный список
Список – в контейнере
Элемент списка – тег
Атрибут
TYPE – тип нумерации (арабские цифры; I – римские; а
– латинские строчные буквы)- Системные программы
- Прикладные программы
- Системы программирования
Слайд 34Маркированный список
Список – в контейнере
Элемент списка – тег
Атрибут
TYPE – тип маркеров (“disc”- диск, “square”- квадрат, “circle”-окружность)
Слайд 35Понятие
интерактивной формы
Для общения посетителей сайта с его создателями на
веб-странице размещают интерактивные формы.
Формы содержат различные элементы управления:
текстовые поля
раскрывающиеся списки
флажки
переключатели…
Слайд 36Текстовое поле
Основной контейнер
Текстовое поле – для ввода текста с
клавиатуры: тэг с атрибутами:
TYPE=“text” – тип содержимого (текст)
NAME=“____” – имя поля
SIZE=“40” – длина поля ввода (в символах)
- разделитель строк (перевод курсора на новую строку)
Слайд 37Переключатели (радиокнопки)
Круглая кнопка для выбора одного из нескольких
вариантов ответов: TYPE=“radio”
Все элементы этой группы должны иметь одинаковое
имя: NAME=“group” Атрибуты VALUE содержат варианты выбора ответов: VALUE=“учащийся”
У каждого VALUE свой вариант ответа.
Слайд 38Флажки
Квадратное окошечко для выбора нескольких ответов из предложенных вариантов: TYPE=“checkbox”
Каждый элемент этой группы должен иметь свое имя: NAME=“box1”, NAME=“box2”,
….. Атрибуты VALUE содержат варианты выбора ответов: VALUE=“WWW”, VALUE=“e-mail”, ….
У каждого VALUE свой вариант ответа.
WWW
Слайд 39Поля списков
Для создания раскрывающего списка используют контейнер
В нем каждый
элемент списка задается тэгом
Слайд 40Текстовая
область
Текстовая область с линейкой прокрутки – для ввода текста
произвольной длины.
Контейнер
Атрибуты: NAME - задает имя области
ROWS - число строкCOLS - число столбцов
Слайд 41Отправка данных из формы
Кнопка отправки создается тэгом
Атрибуты:
TYPE=“submit”
VALUE=“Отправить” (надпись
на кнопке)
Чтобы данные из формы передать по электронной почте, используют
контейнер:
