Создание Web-сайта Тема раздела:Создание Web-сайта Тема раздела: - презентация

1 Создание Web-сайта Тема раздела:

2 Структура Web-сайта Тема урока:

3 Контейнеры Код страницы Заголовок Название Web-страницы Основное содержание страницы

4 Назовем Web-страницу «Компьютер» Компьютер

5 Поместим на страницу текст «Все о компьютерах» Все о компьютерах

6 Текст программы: Компьютер Все о компьютерах

7 Сохранять Web-страницы нужно с расширением.html Например, Мой сайт.html Принято сохранять титульный файл сайта под именем Index.html

8 Форматирование текста: Размер шрифта в заголовках задается тэгами от Н1 до Н6: Все о компьютерах Тип выравнивания заголовка задает атрибут ALIGN Все о компьютерах Тэг FONT задает параметры форматирования любого фрагмента текста. Атрибут FACE задает тип шрифта (FACE=Arial) SIZE – размер (SIZE=10) COLOR – цвет (COLOR=blue) Для отделения заголовка от остального содержания страницы горизонтальной линией используется тэг Задать синий цвет заголовка: Все о компьютерах

9 Абзацы: Разделение текста на абзацы производится контейнером. Для каждого абзаца можно применить свой тип выравнивания. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием: На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

10 Программирование Web-сайта Компьютер Все о компьютерах На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

11 Вставка рисунка Форматы.GIF,.JPG,.PNG. Тэг с атрибутом SRC, который указывает место хранения файла (путь к файлу). Расположение рисунка относительно текста – атрибут ALIGN: 1.TOP 2.MIDDLE 3.BOTTON 4.LEFT 5.RIGHT Вставить рисунок в контейнер перед абзацем текста.

12 Вставка рисунка Или

13 Создание других страниц сайта Заголовок страницы Создайте страницы Программы, Словарь, Комплектующие, Анкета. Сохраните их в файлах с названиями: software.html glossary.html hardware.html anketa.html

14 Гиперссылки Гиперссылки состоят из указателя ссылки и адресной части ссылки. Адресная часть – URL – адрес документа. Принято размещать гиперссылки в нижней части титульной страницы, поэтому разместим их после введенного текста в новом абзаце. В качестве указателя гиперссылок выберем названия страниц нашего сайта: Программы, Словарь, Комплектующие, Анкета. Указатели гиперссылок разделяются пробелами ( ). Для каждой гиперссылки определим адрес перехода, (контейнер ) с атрибутом HREF, значением которого является URL – адрес.

15 Гиперссылки

16 Адрес электронной почты вставляется так: Полезно на странице помещать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта. По щелчку мыши по ссылке на адрес электронной почты будет открываться программа Outlook Express, где в строке Кому будет указан заданный в ссылке адрес

17

18 Создание списка нумерованного Список располагается внутри контейнера, а каждый элемент списка – тэгом. С помощью атрибута TYPE тэга можно задать вид нумерации: арабские цифры по умолчанию, I (римские цифры),а (строчные буквы). Открыть в Блокноте файл Software.html и добавить следующий HTML-код, задающий список: Системные программы Прикладные программы Системы программирования

19 Создание списка маркированного Создадим теперь вложенный маркированный список для одного из элементов основного списка. Список располагается внутри контейнера, а каждый элемент списка определяется также тэгом. С помощью атрибута TYPE тэга можно задать вид маркера списка:disc (диск), Square (квадрат), circle (окружность). Добавить HTML-код, задающий вложенный список для элемента Прикладные программы.

20 Создание нумерованного списка Системные программы Прикладные программы Системы программирования

21 Создание вложенного списка ТЕКСТОВЫЕ РЕДАКТОРЫ ГРАФИЧЕСКИЕ РЕДАКТОРЫ ЭЛЕКТРОННЫЕ ТАБЛИЦЫ СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.

22

23 Словарь компьютерных терминов: Контейнер списка определений, Внутри него термин – тэг определение - Процессор Центральный процессор, производящий вычисления в двоичном коде. Оперативная память Устройство, в котором хранятся программы и данные

24

25 Таблицы 1. Таблица задается контейнером, внутри которого содержится описание структуры таблицы и ее содержимого. 2. Любая таблица состоит из строк, которые задаются контейнером, в который помещается описание ячейки. 3. Формат ячейки и ее содержание помещается в контейнер, а заголовки ячеек в контейнер. 4. Толщина разделительных линий задается атрибутом BORDER, а для выравнивания информации - атрибут ALIGN.

26 Вставить таблицу в файл hardware.html НАИМЕНОВАНИЕ ТИП ИЗГОТОВИТЕЛЬ ЦЕНА ПРОЦЕССОР PENTIUM INTEL 2500 РУБЛЕЙ МАТЕРИНСКАЯ ПЛАТА Abit GIGABAIT 2700 РУБЛЕЙ

27

28 Формы на Web- страницах Формы включают в себя текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д. Формы заключаются в контейнер 1.Текстовые поля задаются тэгом со значением атрибута type=text. 2.Атрибут NAME является обязательным и служит для идентификации полученной информации, Атрибут SIZE задает длину поля ввода данных. 3.Для того, чтобы анкета читалась необходимо разделять строки с помощью тэга перевода строки.

29 Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий текстовые поля для ввода данных. Просмотреть результат в браузере : Пожалуйста, введите ваше имя:

30 Переключатели Пользователю предоставляется возможность отнести себя к одной из групп пользователей: учащийся, студент, учитель. Переключатели создается тэгом со значением атрибута type=radio. Все элементы в группе должны иметь одинаковые значения атрибута Name=Group Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения "schoolboy, "student, "teacher"

31 Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий группу переключателей. Просмотреть результат в браузере : Укажите, к какой группе пользователей вы себя относите: учащийся студент учитель

32 Флажки Флажки задаются тэгом со значением атрибута type=checkbox Флажки, объединенные в группу могут иметь одинаковые значения атрибута Name=Group Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения www, , ftp Добавить HTML-код, задающий флажки для выбора нескольких элементов. Просмотреть результат в браузере:

33 Пример: Какие из сервисов Интернета вы используете наиболее часто: www FTP

34 Поля списков Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Используется контейнер, в котором каждый элемент списка определен тэгом. Выбираемый по умолчанию элемент задается атрибутом SELECTED.

35 Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий раскрывающий список. Просмотреть результат в браузере : Internet Explorer Netscape Navigator Opera Neo Planet

36 Текстовая область Создается с помощью тэга с обязательными атрибутами: NAME, задающим имя области, ROWS – число строк, COLS – число столбцов. добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере : Какую еще информацию вы хотели бы видеть на нашем сайте?

37 Отправка формы Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту TYPE=submit, value=«Отправить». Для создания кн., очищающую инф-ю, атрибуту TYPE=reset, value=«Очистить». добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере:

38 Для того, чтобы при щелчке по кн. «Отправить» данные из формы передавались на сервер и там обрабатывались необходимо указать адрес и программу обработки. Для этого используется атрибут ACTION контейнера.

39