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

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

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

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

Задание 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задание 4

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

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

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

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

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

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

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

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

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

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