Уроки сайтостроения «Структура html- документа». Что такое Интернет? Интернет, словно город, состоит из домиков – сайтов, которые, в свою очередь, состоят. - презентация

1 Уроки сайтостроения «Структура html- документа»

2 Что такое Интернет? Интернет, словно город, состоит из домиков – сайтов, которые, в свою очередь, состоят из комнат – страничек.

3 Что такое гиперссылки? В каждой комнате есть двери – гиперссылки, ведущие в другие комнаты.

4 Кто такой Web-мастер? Все это – дело рук сайтостроителей (Web-мастеров) – мастеров Web-дизайна.

5 Задание 1

6 Создание html-файла Для создания нашего сайта нам понадобится папка, в которой будут размещаться все файлы. Создайте (Файл-Создать-Папку) папку «my_site» и откройте её. В папке «my_site» создайте (Файл-Создать-Текстовый документ) текстовый документ и тоже его откройте. Сохраните документ под новым именем. Выполните (Файл-Сохранить как). В окно Сохранение документа в списке Тип файла выберите Все файлы; В поле Имя файла впишите «index.htm» и нажмите кнопку Сохранить.

7 Создание html-файла Должно получиться так: Откроем наш документ с помощью Блокнота, и браузера (просмотрщика web-страниц).

8 Основные теги: Сейчас наша страничка открыта в двух приложениях – в браузере и в Блокноте. В Блокноте мы будем записывать текст, а браузер покажет нам как будет выглядеть наша страничка в Интернете. Итак, начали!

9 Основные теги: Напишем заголовок нашего сайта «Мой первый сайт». Для этого в Блокноте запишите следующие строки: Как видите, код веб-странички состоит из особых слов – тегов, заключенных в угловые скобки .

10 Заготовка для любого файла Ваш заголовок тело страницы

11 Простейшие элементы страницы Абзацы (парный тег!): Текст, помещенный внутрь абзаца Переход на другую строку (не парный тег!): Заголовки (парные теги!): Текст, помещенный внутрь абзаца И т.д. до …

12 Задание: Наберите в файле index.html (внутри тегов вот здесь!!! ) Текст по образцу:

13 Дополнительно: Ориентация текста может устанавливаться принудительно в теге абзаца: align="center" align="left" align="right " Пример: Это третий абзац! Задание: выполните задание по образцу, указанному на рисунке

14 У вас должен получиться следующий код: Ваш заголовок Это первый абзац! Это второй абзац! Внутри этого абзаца перешли на новую строку! Это заголовок 1 типа Это заголовок 2 типа Это заголовок 3 типа Это заголовок 4 типа Это заголовок 5 типа Это заголовок 6 типа Это первый абзац! Это второй абзац! Это третий абзац! - непарный тег – горизонтальная линия

15 Основные теги форматирования текста: - показывает браузеру где начинается абзац. - сообщает браузеру где начинать новую строку, не формируя абзаца. и - выделение полужирным. и - выделение курсивом. и - выделение подчеркиванием. Оформите остальные строки с применением тегов форматирования текста!

16 Задание 2 Создайте новую web-страницу index2.html

17 Новые теги: Это текст синего цвета, размера 14 Это второй абзац зеленого цвета Обратите внимание – тег - парный! Если его закрыть – то для следующих абзацев будет выставлен цвет – по умолчанию Это третий абзац - какого он будет цвета?

18 Вставка картинок Внимание! Файл картинки УЖЕ должен быть размещен в ВАШЕМ каталоге border="0" - нет окантовки картинки – попробуйте поставить значение 1,2… src="mouse.jpg " – собственно само название файла width="200" – ширина картинки – смотреть по свойствам файла height="137" – высота картинки – смотреть по свойствам файла alt="USB-мышка " – альтернативная подпись, которая отображается при наведении на картинку и в пустом окне, если стоит запрет на картинки

19 Применим цвет фона Самостоятельно поэкспериментиру йте с другими цветами

20 Вставка картинок Внимание! Файл картинки УЖЕ должен быть размещен в ВАШЕЙ папке Обратите внимание: вторая картинка – с прозрачным фоном, сохранена в формате *.gif – для того, чтобы не было белого прямоугольника В теге можно вставить hspace=10 vspace=10 – это отступы сверху-снизу рисунка и align= "center" - для размещения самого рисунка относительно страницы

21 Контроль html-кода Ваш заголовок Это первый абзац синего цвета Это второй абзац зеленого цвета Это третий абзац - какого он будет цвета?

22 Задание 3: Оформите страничку по предлагаемому образцу, картинку подберите свою Цвет фона - #9EECED, цвет заголовка - blue

23 Подсказка: В тегах тела страницы разместите вначале тег рисунка, а затем все теги абзацев

24 Задание 4

25 Примеры таблиц Таблица из 1 столбца Одна ячейка

26 Примеры таблиц Таблица из 2 столбцов и 1 строки Первая ячейка Вторая ячейка

27 Примеры таблиц Таблица из 3 столбцов и 1 строки Первая ячейка Вторая ячейка Третья ячейка

28 Примеры таблиц Таблица из 3 столбцов и 2 строк Первая ячейка Вторая ячейка Третья ячейка Четвертая ячейка Пятая ячейка Шестая ячейка

29 Внимание! Тег border="1" - указывает, что границы у таблицы есть, толщина их=1 Указав border=«0" - указывает, что границы у таблицы будут, но на экране не отобразятся Тогда, размещая в ячейках данные, мы увидим, что они будут разделены, но самих границ прописано не будет

30 Ссылки Ссылка на страницу в этом же каталоге: Текст ссылки Например: Моя биография

31 Ссылки Ссылка на внешний ресурс: Текст ссылки Например: Информационный портал Сосновоборской гимназии

32 Ссылки Ссылка, поставленная на картинку: Например:

33 Ссылки Ссылка на электронный адрес: Электронная почта МБОУ «Гимназия 1» Copyright © Copyright 2011 Ваша фамилия и имя

34 Задание 5: Требования к сайту: - Содержит не менее 4 страниц, связанных между собой гиперссылками; - на страницах сайта должны содержаться: таблицы, изображения, ссылки на сайты интернет, адреса электронной почты, на каждой странице – Ваш личный копирайт; - каждая страница должна иметь собственный цвет фона, не менее 3 цветов текста, 3 типов выравнивания, 3 размеров текста, 3 типов начертания (жирный, курсив, подчёркивание).