Рабочие листы
к вашим урокам
Скачать
1 слайд
Создание сайта
«Семь чудес света»
с помощью языка разметки гипертекста HTML
Класс: 8
Предмет: информатика
Необходимое ПО: программа Блокнот, любой браузер (Internet Explorer, Google Chrome, Opera и т.д.)
Учитель Васильева Татьяна Сергеевна
ГБОУ школа 304 Санкт-Петербург
2 слайд
Этапы работы
Основные определения
Создание страниц сайта
Создание меню для сайта
Заголовок сайта
Сборка сайта
Информационная справка
3 слайд
Основные определения
Сайт – набор Web-страниц с единой навигацией, посвященных одной теме, организации, событию и т.д.
Web-страница – это страница, содержащая картинки, текст, видео, ссылки на другие Web-страницы.
Web-страницы создают с помощью специального языка разметки гипертекста (Hyper Text Makup Language – сокращенно HTML)
Гипертекст – документ, содержащий ссылки на другие документы
Web-страницы просматривает специальная программа браузер.
С точки зрения языка HTML гипертекст – это текст, содержащий специальные разметочные указатели, которые еще называют флагами разметки или тегами (от англ. tag – флаг)
Теги – инструкции браузеру, указывающие способ отображения текста, изображений, таблиц и т.д. в окне программы.
4 слайд
Создание страниц сайта
Наш сайт будет описывать всем известные семь чудес света. Попробуем сделать первую страницу, посвященную Александрийскому маяку.
Откройте программу БЛОКНОТ и сохраните через команду «Сохранить как» файл маяк.html
В окне программы наберем HTML-код нашей страницы:
<html>
<head><title>Александрийский маяк</title></head>
<body bgcolor=red>
<h1>Александрийский маяк</h1>
</body>
</html>
5 слайд
Создание страниц сайта
Сохраните файл. Сверните блокнот. Откройте созданный файл.
В окне браузера (в данном случае это Opera) откроется наша страничка.
Теги <html>, <head>, <title>, <body> задают структуру HTML-страницы.
Они имеют открывающий и закрывающий тег: <html> и </html>.
Открывающие и закрывающие теги ставят по принципу скобок в математике при записи сложных примеров.
Между тегами
<body>
размещают теги содержания страницы, которую отобразит браузер
</body>
![Создание страниц сайтаПараметр bgcolor="red" задает цвет страницы. Цвет стра...](https://documents.infourok.ru/09ea2711-f86a-4b80-b9a1-0572cb806f6b/0/slide_06.jpg "Создание страниц сайтаПараметр bgcolor="red" задает цвет страницы. Цвет стра...")
6 слайд
Создание страниц сайта
Параметр bgcolor="red" задает цвет страницы. Цвет страницы (и других элементов) можно задавать английскими названиями, можно с помощью 16-ричного кода цвета.
Не забывайте сохранять изменения в файле маяк.html
В редакторе Paint.NET в палитре выберите цвет и слева отобразиться его 16-ричный код.
Меняем значение параметра bgcolor =#42ffb3 и сохраняем файл.
Цвет нашей страницы изменился:
7 слайд
Создание страниц сайта
На нашей странице есть заголовок, который задают теги <h1> </h1>. Размер заголовка задает цифра от 1 до 7 (1 – самый большой, 7 – самый маленький)
Наполним страницу содержанием, разместим текст и картинку.
Для размещения текста используют тег абзаца <p> </p>.В интернете текст редко набирают с красной строкой (отступом), обычно текст расположен по абзацам.
Откройте файл маяк.html с помощью программы БЛОКНОТ (чтобы работать с html-кодом странички), разместите текст о маяке из файла текст.txt (папка материалы для сайта) и поставьте 2 абзаца.
Внимание! Текст не нужно набирать. Скопировать из файла текст.txt и вставить в html-код после заголовка.
8 слайд
Создание страниц сайта
Не забывайте сохранять изменения в файле маяк.html
9 слайд
Создание страниц сайта
Не забывайте сохранять изменения в файле маяк.html
Получаем страничку с текстом. Текст тоже можно сделать цветным, изменить размер и шрифт.
За шрифт отвечает тег <font> </font>.
Параметры :
size=размер шрифта (1-7)
color=цвет символов
face=название шрифта
После заголовка добавьте тег
<font size=4 color=blue face=Arial>
закрывающий тег </font> поставьте после последнего абзаца.
На Web-страницах можно выравнивать объекты по центру и по правому краю (по левому краю выравнивание по умолчанию) с помощью параметра align=center / right
Выровняем заголовок по центру и если хотите можете изменить цвет с помощь тега font.
10 слайд
Создание страниц сайта
Разместим на нашей страничке картинку.
Тег <img>, данный тег не имеет закрывающего, все данные по размещению картинки указываются через параметры:
src=“путь к картинке”
Внимание! Если картинка находиться в той же папке, что и наша страничка достаточно указать имя файла с картинкой.
width= ширина в точках
height= высота в точках
border= рамка в точках
Переместите из папки материалы для сайта понравившуюся картинку в свою папку с страничкой.
После текста наберите тег картинки
<img src="mayak1.jpg" width=300 height=200>
Внимание! Имя файла состоит из имени и расширения, для графических файлов это jpg, bmp, png. Не допускайте ошибок в имени файла.
Если картинка не отображается при просмотре страницы, проверьте имя файла и что он находится в одной папке со страницей.
11 слайд
Создание страниц сайта
Наш HTML-код
12 слайд
Создание страниц сайта
Мы создали первую страничку будущего сайта.
Теперь по аналогии создадим еще шесть страниц.
Можно копировать HTML-код странички и менять текст и картинку.
Внимание! Не забывайте переносить картинки в свою папку. Иначе они не отобразятся в браузере.
Еще интересные теги:
<center> </center> - размещение картинок по центру
<hr align=… size=… color=… width=…> - горизонтальная линия: выравнивание, размер в точках (1-7), цвет, ширина в процентах.
13 слайд
Создание меню для сайта
Теперь у нас есть страницы, которые нужно соединить в сайт. Обычно у любого сайта есть меню или навигация. Иногда роль ссылок играет текст, иногда картинки или кнопки с текстом. Рассмотрим первый вариант.
Создадим в блокноте HTML-страничку, которую так и назовем меню.html
Код страницы:
<html>
<head><title>Меню</title></head>
<body background="обои.jpg">
<font size=4 color=#21007F face=Arial>
<p>Храм Артемиды в Эфесе</p>
<p>Галикарнасский мавзолей</p>
<p>Колосс Родосский</p>
<p>Александрийский маяк</p>
<p>Статуя Зевса Олимпийского</p>
<p>Пирамида Хеопса</p>
<p>Висячие сады</p>
</body>
</html>
Получаем следующую страницу
В качестве обоев можно самим рисовать или редактировать изображения.
Обратите внимание, для данной странички мы использовали параметр тега <body> background – обои, в качестве обоев используем картинку обои.jpg, она тоже должна находиться в одной папке со страницами
14 слайд
Создание меню для сайта
Основой для меню могут быть и картинки:
меню1.html
<html>
<head><title>Меню1</title></head>
<body background="обои.jpg">
<font size=4 color=#21007F face=Arial>
<p><img src="artemida.jpg" width=70 height=50></p>
<p><img src="mavzoley1.jpg" width=70 height=50></p>
<p><img src="koloss1.jpg" width=70 height=50></p>
<p><img src="mayak1.jpg" width=70 height=50></p>
<p><img src="zevs1.jpg" width=70 height=50></p>
<p><img src="piramida2.jpg" width=70 height=50></p>
<p><img src="sad1.jpg" width=70 height=50></p>
</body>
</html>
15 слайд
Создание меню для сайта
Теперь будем соединять текст (меню.html) или изображения (меню1.html) с созданными страницами.
Для выполнения данной задачи сделаем нужный объект ссылкой на соответствующую ему страницу.
Тег, задающий ссылку, <a href=“адрес страницы”> </a>
Если все страницы находятся в одной папке, указывают имя файла.
меню.html
<p><a href=“артемида.html”>Храм Артемиды в Эфесе</a></p>
Ссылкой будет тест: Храм Артемиды в Эфесе
или
меню1.html
<p><a href=“артемида.html”><img src="artemida.jpg" width=70 height=50></a></p>
Ссылкой будет картинка
Выберите удобный для вас вариант меню и пропишите все ссылки.
Внимание! Проверьте, что все ссылки работают правильно.
16 слайд
Создание меню для сайта
17 слайд
Заголовок сайта
Заголовок сайта – это чаще всего красочный баннер вверху страницы иногда по центру (баннер – анимированная или статичная картинка). Когда происходит сборка сайта, каждый выбирает сам дизайн и расположение основных блоков: заголовок, меню, область отображения страниц.
Для начала мы реализуем стандартную модель сайта:
Заголовок
Меню
Область отображения
страниц
Работа над заголовком – это работа в графическом редакторе. В этот раз воспользуемся готовом изображением – файл заголовок.jpg
18 слайд
Заголовок сайта
HTML-код:
<html>
<head><title>Семь чудес света</title></head>
<body background="заголовок.jpg">
</body>
</html>
19 слайд
Сборка сайта
Все страницы сайта готовы:
заголовок.html
меню.html (или меню1.html)
маяк.html
мавзолей.html
артемида.html
колосс.html
зевс.html
пирамида.html
сады.html
Для сборки сайта нужно создать страницу с блоками или фреймами.
Области задают тегом <frameset> </frameset>
Параметры:
rows – деление на строковые фреймы (горизонтальное деление)
пример: rows=“20%, * ”
Символ “*” указывает, что на последний фрейм отводится вся оставшаяся часть окна. Размер фреймов можно задавать в точках или процентах.
20 слайд
Сборка сайта
cols – деление на столбцы (вертикальное деление)
Можно задавать рамку (border) и цвет фреймов (bgcolor)
Мы реализуем следующую модель сайта:
Заголовок
Меню
Область отображения
страниц
Нам нужно сначала разделить область окна браузера на 2 строчных фрейма, в первый поместим заголовок.html.
Второй фрейм снова разделим на 2 столбца, в первом будет меню, во втором будет область отображения страниц.
Загружаем нужные страницы с помощью тега
<frame name=“имя фрейма” src=“имя файла”>
21 слайд
Сборка сайта
HTML-код нашего сайта
<html>
<head></head>
<frameset rows=“130,*”>
<frame name=“заголовок” src=“заголовок.html”>
<frameset cols=“25%,*”>
<frame name= “меню” src=“меню.html”>
<frame name=“содержание” src=“артемида.html”>
</frameset>
</frameset>
</html>
22 слайд
Сборка сайта
Если вы попробуете выбирать в меню другие страницы, они будут отображаться в фрейме «меню». Чтобы страницы отображались в фрейме «содержание» откроем файл меню.html и укажем, где должны отображаться страницы с помощью параметра тега гиперссылки
<a> target=“имя фрейма”:
…
<p><a target=“содержание” href=“артемида.html”>Храм Артемиды в Эфесе</a></p>
<p><a target=“содержание” href=“мавзолей.html”>Галикарнасский мавзолей</a></p>
<p><a target=“содержание” href=“колосс.html”>Колосс Родосский</a></p>
<p><a target=“содержание” href=“маяк.html”>Александрийский маяк</a></p>
…
Сохраните изменения и проверьте как
работают ссылки.
Наш сайт готов!
Теперь вы можете сделать свой сайт.
23 слайд
Информационная справка
Данный учебный материал рассчитан на знакомство учащихся с языком разметки HTML. Не смотря на то, что в большинстве случаев создание даже бесплатного сайта в сети предполагает хостинг и несложный конструктор сайтов (например в Google-сервисах), основы языка HTML дают представление о процессе составления сайта и основных элементах его содержания (текст, картинки, гиперссылки).
Данная презентация может использоваться для работы с учащимися как на уроке, так и во внеурочной деятельности.
На уроках учащиеся могут работать с презентацией как под руководством преподавателя, так и самостоятельно (индивидуальный маршрут).
Все материалы к презентации находятся в свободном доступе по ссылке.
Учебный материал ориентирован на 5-6 учебных часов и рассчитан на учащихся 8-9 классов, но может быть использован и в 6-7 классах.
Рабочие листы
к вашим урокам
Скачать
Данный учебный материал рассчитан на знакомство учащихся с языком разметки HTML. Не смотря на то, что в большинстве случаев создание даже бесплатного сайта в сети предполагает хостинг и несложный конструктор сайтов (например в Google-сервисах), основы языка HTML дают представление о процессе составления сайта и основных элементах его содержания (текст, картинки, гиперссылки).
Данная презентация может использоваться для работы с учащимися как на уроке, так и во внеурочной деятельности.
На уроках учащиеся могут работать с презентацией как под руководством преподавателя, так и самостоятельно (индивидуальный маршрут).
Все материалы к презентации находятся в свободном доступе по ссылке https://drive.google.com/open?id=0B1w_FPidI6KJfkpvQTNhRVIxSVltM2ZTeEFHRDRpai1HZmRjYmtFeGFJdS16cEdEUnNjSDA
Учебный материал ориентирован на 5-6 учебных часов и рассчитан на учащихся 8-9 классов, но может быть использован и в 6-7 классах.
6 672 079 материалов в базе
«Информатика (изд. "БИНОМ. Лаборатория знаний")», Угринович Н.Д.
Больше материалов по этому УМК
Настоящий материал опубликован пользователем Васильева Татьяна Сергеевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
6 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.