Создание сайта 9 класс инструкция - Инструкции, руководства, мануалы

Скачать материал

Скачать материал «Презентация по Информатике «Создание сайта. Инструкция и практическое задание» (9 класс)»

Рабочие листы

к вашим урокам

Скачать

Описание презентации по отдельным слайдам:

1 слайд

Создание сайта
(с помощью текстового процессора)
Подготовил: Орлова О.Г.
Учитель Информатики и ИКТ
МКОУ «ЦО № 5» г.Ефремов Тульской области
2 слайд

Прежде чем приступить к работе над собственным веб-сайтом, вспомним:
Какие функции выполняют сервисные службы WWW?
Назначение языка HTML
Теги HTML
Функциональные разделы документа
Форматирование HTML документа
Ссылки на другие документы и файлы
Списки
Графика
Фреймы
Звук
Инструментальные средства создания Web-страниц
3 слайд

Начало работы
Для создания web-страниц, переведём OpenOffice – Writer, в режим создания html документов (html страниц).
Делается это очень просто, кликаем: “Файл” –> “Создать” -> “Документ HTML”:
5 слайд

Сохранить страницу.
Для сохранения Web страницы, левой кнопкой мышки, жмём меню “Файл” — “Сохранить как”.
В появившемся окне, набираем имя файла, например, mypets.html и сохраняем страницу в рабочую папку нашего проекта, имя которой Вы можете задать произвольно, например, OurSite
6 слайд

Файлу Web-страницы присвоить имя page1-1.htm.

Запустить браузер и открыть созданный файл командой [Файл — Открыть]. В заголовке окна браузера высвечивается Первое знакомство с тэгами HTML. Основная часть окна браузера — пуста.
7 слайд

Форматирование страницы
Фон страницы можно задать следующим образом — выбираем в меню программы Writer: “Формат” – “Страница” – “Фон”
Во-первых, если в окне “Фон” выбрать тип фона: “Цвет”, то фон страницы мы можем задать цветом, выбрав его из таблицы цветов.
Во-вторых, если в окне “Фон” выбрать тип фона: “Графический объект”, то фон страницы мы можем задать рисунком.
8 слайд

Если для данной страницы, я хочу задать фон рисунком, то картинку для фона, которую возьмём в галерее установленного пакета OpenOffice.org по адресу
— C:\Program Files\OpenOffice.org 3\Basis\share\gallery\
— “Открыть” и “OK”
Форматирование страницы
9 слайд

http://www.weblabla.ru/examples/html/examples_main.html

Ссылка на вспомогательный материал по работе с сайтом

Форматирование страницы
10 слайд

Основные тэги HTML. Первая страница
Запустить текстовый редактор
ввести HTML-код, задающий структуру Web-страницы:
<HTML>
<HEAD>
<TITLE> Первое знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Ввести команду [Файл — Сохранить]
11 слайд

<html> — Сообщает браузеру что этот документ написан на языке HTML.
<head> — Начало заголовка.(не виден на странице).
<title> — (Для поисковых систем) — Здесь пишется название сайта.
</title> — Здесь пишутся мета — теги.
</head> — Конец заголовка.
<body> — Начало тела документа(для содержимого страницы).
</body> — Конец тела документа.
</html> — Конец HTML.
12 слайд

Контент сайта пишется в теле документа между тегами <body> и </body>
Напишем любой текст к примеру «Создание собственного сайта» и вставим фото
<img src=»com (8).gif» width=213 height=170 border=0> .
Вместо com (8).gif выберите фото на своем компьютере , поместите в ту же папку где находится сайт и замените имя файла com (8).gif на свое.
Расположим текст и фото по центру тегом <center></center> и добавим в тело цвет страницы bgcolor=»#ceceff»
15 слайд

Заголовки
Заголовки различных уровней:
<H1>Заголовок первого уровня</H1>…<H6>Заголовок шестого уровня</H6>
Цифры между 1 и 6 = 2,3,4,5= создают заголовок промежуточных размеров.
При применении тега <H> текст будет выглядеть как абзац и будет начинаться с новой строки а так же с новой строки будет начинаться и следующий за ним текст.
16 слайд

Форматирование шрифта
Ввести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий.
Для изменения размера шрифта надо заключить текст в тег текст, размер устанавливается от малого 1 до большого 7.
17 слайд

Форматирование шрифта
Теги делают текст жирным,а наклонным.
Сильное выделение и жирный шрифт 
Выделение и курсив= . Тег <pre></pre> предназначен для сохранения форматирования,при вставке текста из другого редактора.
18 слайд

Форматирование шрифта
Что бы установить цвет шрифта надо в теге задать цвет шрифта: color=»#?» Цвет шрифта устанавливается в формате цветов HTML, к примеру «#FFFFFF». Можно объединить цвет и размер шрифта в одном теге . Запись этого параметра выглядит так: текст.
19 слайд

Форматирование шрифта
Если вы хотите установить размер шрифта для всей страницы то пишем <BASEFONT SIZE=?> со значениями ?= от 1 до 7; по умолчанию 3. Выбор шрифта=, самые распространенные Arial,Tahoma,Verdana,Times New Roman,Georgia.
20 слайд

Форматирование шрифта
Расположить текст посередине можно с помощью тега
<CENTER></CENTER>
Расположить слева=
<LEFT>
справа=
<RIGHT>
21 слайд

Форматирование шрифта
Параграф =
Выравнивание = значения=
left — слева,
right — справа,
center — по центру,
jastify — по ширине.
22 слайд

Форматирование шрифта
Новая строка =
( перевод строки)
Убрать выравнивание = 

Горизонтальный разделитель = <HR>
23 слайд

Форматирование шрифта
Если вы хотите сделать пробел нужной длины то вставьте в текст символ
  нужное количество раз.
Выделение цитат курсивом = <CITE></CITE>
Выделение текста подчеркиванием =<ins></ins>-предпочтительнее,
и 
Нижний индекс= ,запись=H2SO4
Верхний индекс,запись=m3
24 слайд

Пример написания шрифта
Код:
Пример написания <ins>шрифта</ins>
25 слайд

Списки
Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.
26 слайд

Списки
Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.
<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
</ul>
27 слайд

Таблицы
Пример кода самой простой таблицы:

<table>
<tr>
<td>
Содержание
</td>
</tr>
</table>

Кстати, перевод строки после каждого тега вебмастеры ставят только для удобства редактирования html-кода, этот же код таблицы можно вставить так:
<table><tr><td>Содержание</td></tr></table>
28 слайд

Внесение изменений и дополнений в Web-страницу
В процессе создания web-страницы приходится добавлять новые тэги и просматривать получаемый результат:
Активизировать текстовый редактор с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл — Сохранить].
Активизировать браузер с открытым в нем предыдущим вариантом страницы.
Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница
29 слайд

Т.к. это наш первый сайт и мы не планируем на нем зарабатывать, то разместить его можно на бесплатном хостинге.
Минусы бесплатного хостинга это то ,что сервер вешает на ваш сайт свою рекламу, тем самым изменяя дизайн сайта(почти всегда в худшую сторону), может удалить некоторые страницы(не всегда),изменить переходы по сайту, перенаправляя на свою рекламу, без объяснений вообще заблокировать сайт(редко).Если вы хотите обновить сайт,добавить или убавить страницы(как правило после размещения в Интернете, вы начинаете видеть то, что могли бы сделать сайт и получше) это будет сделать иногда сложно.
30 слайд

Основные подходы к созданию сайта

Необходимо ответить на вопросы:
В чем причина возникновения интереса к Интернет-ресурсам?
Какие возможности предоставляет Интернет в области Web-конструирования?
На кого должна быть ориентирована страница — на создателя или пользователя?
Какие цели чаще всего преследуют создатели различных сайтов?
Попробуйте классифицировать по различным основаниям сайты, расположенные в сети
31 слайд

Практическое задание:
Разделиться на группы (примерно по 3 человека); дать имя группе (исходя из выбранной темы);
ТЕМЫ ЗАДАНИЯ: “Мой город”, “Моя семья”, “Мои интересы”, “Моя малая родина”, “Мои питомцы”, “Мой класс”.
32 слайд

Например, темы проектов:
“Мой город” — история, проблемы, перспективы.
“Мои интересы” — как я смогу реализовать себя.
“Мой класс” – об одноклассниках, успехи, взаимопомощь, досуг, интересы.
33 слайд

Цель задания: подготовить информационно-содержательное наполнение сайта, и определить основные формы представления информации.
Программные средства: текстовый процессор Writer, НТМL, FrontPage (по выбору группы)
34 слайд

Этапы работы:
1. Определить цель создания сайта.
2. Определить предполагаемый контингент посетителей сайта.
3. В соответствии с целью создания сайта и предполагаемым контингентом продумать содержание сайта.
4. Определить возможные формы представления информации на сайте.
5. Сформулировать названия основных рубрик (страниц) сайта.
6. В текстовом процессоре Writer подготовить концепцию создания сайта.
35 слайд

Пояснения к выполнению задания:
1. Сайт может быть создан с различными целями, в связи с этим будет разным и его содержание.
2. Определив цель создания сайта, продумайте, кто может быть его потенциальным посетителем, т.е. кого может заинтересовать информация, размещенная на сайте.
3. Обдумайте содержание. Если это сайт об учащихся школы, или сайт выпускников, то наверное интересно объединить в этом сайте домашние странички школьников.
36 слайд

Пояснения к выполнению задания:
4. В качестве форм предоставления информации можно рассмотреть обычную текстовую информацию, фотографии, телеконференции (продумайте тему), чат, доску объявлений (продумайте тему), фотографии, работы учащихся (например открытки, выполненные во Flash) и др.
5. В соответствии с отобранным материалом продумайте названия страниц (ссылок, пунктов меню) сайта.
6. Откройте текстовый процессор Writer и подготовьте письменную концепцию сайта, кратко описав все этапы работы (цель, контингент посетителей, формы представления информации, названия рубрик).
37 слайд

Источники:
http://sitesaid.ru/siteprost.html
http://www.weblabla.ru/examples/html/examples_main.html
http://festival.1september.ru/articles/514032/
http://webdirect.at.ua/blog/html_kody_samye_chasto_ispolzuemye_html_tegi/2013-04-29-6

Рабочие листы

к вашим урокам

Скачать

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 458 213 материалов в базе

Выберите категорию:
Выберите учебник и тему

Выберите класс:
Тип материала:
- Все материалы
- Статьи
- Научные работы
- Видеоуроки
- Презентации
- Конспекты
- Тесты
- Рабочие программы
- Другие методич. материалы

Найти материалы

Другие материалы

Рейтинг:
3 из 5

03.09.2017
5534
18

03.09.2017
1236
1

03.09.2017
810
4

03.09.2017
272
1

02.09.2017
1792
10

02.09.2017
1754
12

02.09.2017
992
1

02.09.2017
1849
13

Вам будут интересны эти курсы:

Курс повышения квалификации «Облачные технологии в образовании»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Введение в программирование на языке С (СИ)»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Специфика преподавания дисциплины «Информационные технологии» в условиях реализации ФГОС СПО по ТОП-50»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»

Скачать материал
- 03.09.2017
  
  12071
- PPTX
  277.1 кбайт
- 425
  скачиваний
- Рейтинг:
  4 из 5
- Оцените материал:
Настоящий материал опубликован пользователем Ефимова О Г. Инфоурок является
информационным посредником и предоставляет пользователям возможность размещать на сайте
методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них
сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с
сайта, Вы можете оставить жалобу на материал.

Удалить материал
- На сайте: 6 лет и 7 месяцев
- Подписчики: 2
- Всего просмотров: 23481
- Всего материалов:
  
  7

Курс профессиональной переподготовки

Копирайтер

1000 ч.

Источник

Рассмотрите главную страницу сайтов и найдите их адреса. Поставьте адрес под картинкой.

http://www.darwinmuseum.ru/

http://lectoriy.mipt.ru/

http://www.rus-ballet.ru/

Сбросить
ПроверитьПоказать ответ

Источник

Оглавление:

1 Урок: Создание веб-сайта: технология, структура, содержание, оформление
- 1.1 Технологии создания сайта
- 1.2 Оформление сайта
- 1.3 Размещение сайта в Интернете
- 1.4 Рекомендованный список литературы

Урок: Создание веб-сайта: технология, структура, содержание, оформление

Технологии создания сайта

Существуют несколько способов создания сайтов.

Cайт можно создать, воспользовавшись языком разметки гипертекста HTML.

В этом случае в текстовом редакторе (например, в Блокноте) текст, который хотят разместить на страницах сайта, размечают специальными метками, называемыми тегами.

Теги содержат указания о том, как должен выглядеть текст.

Чтобы отличать теги от текста, их заключают в угловые скобки.

Можно документ, подготовленный в текстовом процессоре (Microsoft Word, Writer), сохранить как веб-страницу (в формате HTML).

Можно воспользоваться специальным программным обеспечением — визуальными HTML-редакторами (Adobe Dreamweaver, Microsoft FrontPage, Nvu) или конструкторами сайтов (uCoz).

Веб-дизайнер — специалист, проектирующий структуру веб-сайта, а также подбирающий способы подачи информации и выполняющий художественное оформление веб-проекта.

Веб-дизайнер должен знать современные веб-технологии и иметь художественное образование.

Содержание и структура сайта

Независимо от того, каким инструментарием ты будешь пользоваться для создания сайта, первоначально следует продумать его содержание и структуру.

Предположим, ты посещаешь кружок компьютерной графики и решил создать сайт этого творческого объединения.

Содержание сайта должно быть таким, чтобы отражать творческую жизнь участников объединения, привлекать внимание единомышленников.

Теперь необходимо определить структуру (план) сайта — разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними.

Очевидно, сайт может включать в себя общую информацию (программу и расписание занятий, место проведения занятий, фамилию, имя, отчество руководителя и т. д.), страницу новостей и объявлений, личные страницы руководителя и участников объединения, галерею работ участников объединения, полезные ссылки на другие ресурсы сети Интернет и многое другое.

Изобразим структуру сайта в виде графа:

Представление структуры сайта в виде графа обеспечивает наглядное представление содержания сайта и помогает организовать навигацию — переходы с одной страницы сайта на другую.

Оформление сайта

Любой сайт загружается с главной (домашней) страницы (home page), которая, прежде всего, должна давать ответ на вопрос: «О чём этот сайт?». Для этого на главной странице размещают:

название сайта,
тематическое графическое изображение,
короткий текст с описанием содержания сайта,
главное меню — ссылки на основные разделы сайта.

Также на главной странице могут быть размещены имя автора сайта и его контактная информация, счётчик посетителей, новости и т. д. Каждая страница сайта, как правило, имеет несколько постоянных элементов, которые всегда находятся на одних и тех же местах. Это:

заголовок сайта, расположенный в самом верху страницы;
главное меню, как правило, размещаемое в левой части страницы (количество пунктов меню, их названия и порядок неизменны на всех страницах сайта).

Желательно, чтобы страницы сайта были выполнены в едином стиле. Чтобы выдержать стиль, проще вначале разработать шаблон страницы сайта, на котором представить элементы, имеющиеся на всех страницах сайта.

При наполнении страниц сайта информационными материалами следует придерживаться следующих рекомендаций:

Не ставьте точку в названиях сайта и страниц, если они состоят из одного предложения.
Названия пунктов меню делайте краткими; недопустимо растягивание названия пункта на несколько строк.
Не выбирайте для страниц пёстрый фон, на таком фоне текст читается с трудом.
Не размещайте на странице слишком много информационных и художественных блоков.
Не пишите слишком длинных текстов. Текст разбивайте на небольшие абзацы, отделяя их друг от друга пустыми строками.
В каждом абзаце используйте одни и те же приёмы форматирования.

Размещение сайта в Интернете

Перед размещением сайта в сети Интернет следует провести его тестирование, т.е. убедиться в том, что он правильно отображается разными браузерами:

тексты хорошо читаются на выбранном фоне,
рисунки расположены на своих местах,
гиперссылки обеспечивают правильные переходы и т. д.

Хостинг — услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет.

Хостинг может быть как платным, так и бесплатным.

Платным хостингом для размещения своих сайтов обычно пользуются крупные компании. При этом они получают удобное для прочтения и запоминания доменное имя второго уровня, которое может совпадать с названием компании. Частные лица для своих сайтов могут воспользоваться бесплатным хостингом, возможности которого ограничены по сравнению с платными вариантами (небольшое дисковое пространство, ограничение размера отдельного файла, доменное имя только третьего уровня и т. д.), но их вполне достаточно для домашних страниц пользователей и некоммерческих сайтов.

Главным недостатком бесплатных хостингов является то, что при размещении вашего сайта компания самостоятельно добавляет на его страницы коммерческую рекламу.

Список серверов, предоставляющих бесплатный хостинг, можно получить поиском по запросу «бесплатный хостинг».

Рекомендованный список литературы

Босова Л.Л. Информатика — Учебник для 8 класса. – М.: БИНОМ. Лаборатория знаний

Did you find apk for android? You can find new Free Android Games and apps.

Источник

Вопросы:

· Как
менялись веб-сайты в последние десятилетия?

· Технологии
и инструменты создания сайтов, для чего они (сайты или технологии?) нужны?

· Язык
разметки гипертекста HTML.

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

Позже, с появлением различных интернет-ресурсов и
сервисов требования к сайтам стали меняться, как и их содержание. Сайты стали
взаимодействовать с пользователями при помощи различных инструментов, полей
ввода, кнопок и других. А их структура становилась всё сложнее. На смену
веб-страницам со статичным содержимым пришли веб-страницы, содержащие
интерактивную структуру и динамичную анимацию.

Такое качественное изменение сайтов не могло не
отразится на инструментах и технологиях для их создания. Рассмотрим некоторые
из них:

Большинство веб-сайтов в сети «Интернет» содержат
разметку, созданную при помощи языка разметки гипертекста HTML,
сокращённо от «HyperText Markup
Language». Именно при помощи этого языка разметки выделяются различные
блоки на веб-страницах, в которых размещается информация, помимо этого
информация может оформляться каким-либо образом. Изначально для создания сайтов
этого языка было достаточно.

Для создания современных сайтов используется множество
различных технологий, рассмотрим основные. Начнём с каскадных таблиц стилей или
CSS, их использование
расширяет возможности оформления отдельных элементов сайта. А также упрощает
работу со стилями. Теперь информация об оформлении различных элементов
веб-страниц хранится в отдельных файлах и не загромождает
исходный код страницы на HTML.

Сделать веб-страницу динамичной позволяет Java-Скрипт.
С
помощью
этого сценарного языка программирования можно создавать различные выплывающие
окна, передвигающиеся блоки и другие динамические элементы веб-страниц.

Хранить пользовательскую и другую информацию на сайтах
позволяют различные базы данных. В качестве системы управления базами данных
чаще всего используют «MySQL».

Связать все эти технологии воедино и задать логику
работы сайта помогают различные языки программирования. Из них самым популярным
в плане программирования сайтов считается язык PHP.

Посмотрим, какими же программами и технологиями можно
пользоваться для создания простых сайтов. Для этого можно использовать
визуальные HTML-редакторы, например «Adobe
Dreamweaver» или «Microsoft Frontpage». Также
простую веб-страницу можно создать с помощью некоторых программ, входящих в
пакет «Microsoft office»,
сохранив документ в формате веб-страницы. Простыми и понятными инструментами
для создания сайтов являются различные онлайн конструкторы сайтов. Самыми
распространёнными в русскоязычном сегменте интернета являются «Ucoz»
и «Wix.com», однако возможности
большинства онлайн-конструкторов ограничены выбором деталей оформления из
предложенных. Если же вы хотите детально разработать свой сайт, но ни одного из
визуальных редакторов у вас нет, можно воспользоваться обычным текстовым
редактором «Блокнот», записав в нем код разметки на языке HTML.

Рассмотрим язык разметки гипертекста подробнее. В нём указания
для разметки задаются при помощи тегов и атрибутов. Теги – это указания
для разметки страницы и её отображения, они записываются в угловых скобках.

<тег>

Большинство из тегов парные, то есть состоят из открывающегося
тега и закрывающегося. Закрывающийся тег начинается со знака «/». Так абзац
текста в языке HTML размещается между
тегами:

…

Для некоторых тегов указываются параметры, которые
называются атрибутами. Так, при размещении картинки указывается
одиночный тег «img», его параметрами
могут быть ссылка на файл с изображением, ширина и высота изображения на
странице.

Рассмотрим структуру простой HTML-страницы.
В начале записывается тег «DOCTYPE
HTML», который указывает, что тип данного
документа – HTML-страница. Весь код
разметки страницы записывается между тегами «HTML»
и «/HTML». Любая HTML-страница
состоит из заголовка и тела страницы. Заголовок
может содержать название страницы, а так же указания к браузеру для её
отображения. Он размещается между тегами «head»
и «/head».
Тело страницы содержит все указания по её разметке, оно размещается между
тегами «body»
и
«/body».

<!DOCTYPE
HTML>

<HTML>

<head>

Заголовок страницы

</head>

<body>

Тело страницы

</body>

</HTML>

Пример
структуры простой HTML-страницы

Название страницы записывается между
тегами «title»
и «/title» .

Создадим простую веб-страницу с текстом при помощи
текстового редактора «Блокнот».

Сохраним нашу веб-страницу в документе с именем
“Моя первая веб-страница” и расширением “HTML”.

Свернем рабочее окно блокнота и найдём
нашу веб-страницу. Откроем её с помощью одного из браузеров, например Интернет
Эксплорера. Мы видим, что наша веб-страница содержит записанный нами текст.

Вернемся к коду нашей веб-страницы.
Добавим на неё еще три абзаца текста. Первый абзац будет содержать текст,
который записан жирным шрифтом. Для этого его содержимое заключается между
тегами “b” и “/b”.
Запишем в нём поясняющее сообщение что этот текст записан жирным шрифтом.

Второй абзац запишем курсивом. Для этого
его содержимое запишем между тегами “i”
и “/i”.
Запишем в нём соответствующее поясняющее сообщение. Сделаем третий абзац подчёркнутым.
Для этого его содержимое нужно заключить между тегами “u”
и “/u”.
Запишем в нем соответствующее поясняющее сообщение.

Сохраним наш документ и перейдем к окну
браузера. Нажмем на кнопку “Обновить страницу”. Теперь наша веб-страница
содержит четыре абзаца текста, которые мы записали.

Добавим картинку на нашу страницу. Для
этого добавим ещё один абзац, внутри которого будет содержаться одиночный тег “img”.
Для одиночного тега закрывающийся тег не требуется. Нам нужно указать адрес
картинки. Для этого нужно дописать к этому тегу атрибут “irc”,
после которого поставить знак равенства и в кавычках записать адрес картинки.
Пусть наша картинка находится в одной папке с веб-страницей, тогда нам остаётся
записать лишь имя файла с расширением «png». Таким
образом, картинка будет добавлена в оригинальном размере на нашу веб-страницу.

Итак, сохраним наш документ. Перейдём к
окну браузера и нажмём на кнопку “Обновить страницу”. Мы видим,
что теперь внизу страницы появилась картинка.

Важно запомнить:

Простые
сайты можно создавать при помощи:

· визуальных
HTML-редакторов;

· некоторых
офисных программ;

· онлайн-конструкторов;

· текстового
редактора «Блокнот», записывая в нём код веб-страницы на языке разметки
гипертекста.

Для
создания современных сайтов могут применятся следующие инструменты:

· Для
разметки веб-страниц – язык разметки гипертекста HTML.

· Для
оформления веб-страниц используют каскадные таблицы стилей или “CSS”.

· Для
создания динамичных элементов веб-страницы используют сценарный язык
программирования “Java-Скрипт”.

· Для
хранения информации используют базы данных ”MySQL”.

· Для
того,
чтобы связать эти технологии воедино,
используют различные языки программирования, например “PHP”.

Научились создавать простые веб-страницы
при помощи языка HTML
в
текстовом редакторе «Блокнот».

Источник

Выполнил учитель информатики Самусенко Е. С.
Тема урока:
«Создание
web-сайта»

Цели урока:
Обучающие:

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

Что такое сайт?
Сайт — это ресурс, состоящий из веб-страниц (документов), объединенных общей темой и взаимосвязанных между собой с помощью ссылок. Сайт регистрируется на одно физическое, либо юридическое лицо и обязательно привязывается к конкретному домену, который также является его адресом.

Что такое сайт?
Сайт также представляет собой информационную единицу в сети Интернет. Один сайт может иметь как одну единственную страницу, так и огромное их количество.
Каждая страница сайта — это текстовый файл или их набор, который написан на языке разметки или программирования (html, css и т.д.). После загрузки на наш компьютер, все файлы такого формата проходят обработку браузером, и в конечном итоге перед нами предстает готовая страница сайта.

Достоинства web-сайтов
Малый информационный объём («лёгкие»).
1
Пригодны для просмотра в разных Операционных Системах (ОС).
2
3
4
Динамичные.
Интерактивные.

Технологии создания сайта

Существует несколько способ создания сайтов:
Сайт можно создать, воспользовавшись языком разметки гипертекста HTML (Hyper Text Markup Language). В этом случае в текстовом редакторе (например, в Блокноте) текст, который хотят разместить на страницах сайта, размечают специальными метками, называемыми , тегами. Теги содержат указания о том, как должен выглядеть текст.
1
Можно документ, подготовленный в текстовом процессоре (Microsoft Word, Writer), сохранить как web-страницу (в формате HTML).
2
Можно воспользоваться специальным программным обеспечением – визуальными HTML – редакторами (Adobe Dreamwearver, Microsoft FrontPage) или конструкторами сайтов (uCoz, Сайткрафт, Конструктор школьных сайтов).
3

Кто такой Web-дизайнер?

Web-дизайнер – это специалист, проектирующий структуру web-сайта, а также подбирающий способы подачи информации и выполняющий художественное оформление web-проекта.
Web-дизайнер должен знать современные web-технологии; желательно, чтобы он имел художественное образование.

Содержание и структура сайта

Содержание сайта должно быть таким, чтобы отражать творческую жизнь участников объединения, привлекать внимание единомышленников.
Структура (план) сайта – это разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними. Сайт может включать в себя общую информацию (программу расписания занятий, фамилию, имя, отчество руководителя и т.д.), страницу новостей и многое другое.

Язык разметки гипертекста HTML

HTML (Hyper Text Markup Language) — язык гипертекстовой разметки.
Описательный язык разметки HTML имеет свои команды, которые называются тегами.
Тег – это элемент HTML, представляющий из себя текст, заключённый в угловые скобки <>. Тег является активным элементом, изменяющим представление следующей за ним информации.
Теги пишутся английскими буквами (прописными, строчными).
Обычно используются два тега – открывающий (<тэг>) и закрывающий (</тэг>).

Основные теги для создания web-страниц

Тег

Название тега

Определяет формат документа.

Содержит название страницы и справочную информацию о ней.

Содержит название страницы, которое отображается в верхней строке браузера.

Отображает в браузере содержимое страницы.

Перевод строки

Жирный шрифт

Курсив

=«x»

Размер шрифта от 1 до 7

Цвет шрифта

Структура web-страницы

Любая страница имеет
следующую структуру:

<html>
<head>
<title> Компьютер </title>
</head>
<body>
Всё про компьютеры
</body>
</html>
При просмотре в браузере
файла, получим следующий
вид:

Атрибут

Тег может иметь несколько количество атрибутов.
Атрибут — это компонент тега, содержащий указания, как браузер должен воспринять и обработать тег.
Синтаксис тега с атрибутом:
<тег атрибут = “значение”>

Гипертекст

Термин «гипертекст» впервые был введён Тедом Нельсоном в 1969 году.
Гипертекст – это текст, который с помощью своей структуры позволяет переходить от одного текста к другому.
На языке «компьютера» гипертекст – это текст, который содержит в себе ссылки.

Источник

1.

СОЗДАНИЕ Web-сайта
КОММУНИКАЦИОННЫЕ
ТЕХНОЛОГИИ

2.

Ключевые слова
структура сайта
навигация
оформление сайта
шаблон страницы сайта
хостинг

3.

Технология создания сайта
Способы создания сайта
Язык разметки
гипертекста HTML
(Hyper Text Markup Language)
Текст размечают
специальными
метками – тегами
Текстовый
редактор
Визуальный
HTML-редактор,
конструктор сайтов
Документ
сохраняют как
Web-страницу
Microsoft FrontPage
uCoz, Сайткрафт
и др.

4.

Создание сайта
Web-дизайнер — специалист,
проектирующий
структуру
Web-сайта,
подбирающий
способы подачи информации и
выполняющий художественное
оформление Web-проекта.
Создадим сайт школьного
«Компьютерная графика».
творческого
объединения

5.

Содержание и структура сайта
Содержание сайта должно отражать творческую жизнь
участников
объединения,
привлекать
внимание
единомышленников.
Структура (план) сайта — разбиение общего содержания
на смысловые разделы и отдельные страницы с указанием
связей между ними.
Иерархическая структура сайта
Главная страница
Новости и
объявления
Галерея
Личные
страницы
Полезные
ссылки
Растровая
графика
Руководитель
Векторная
графика
Ученик 1
Сканография
Ученик 2

6.

Оформление сайта
На главной странице размещают название сайта,
тематическое графическое изображение, короткий текст с
описанием содержания сайта, главное меню — ссылки на
основные разделы сайта.

7.

Оформление сайта
Каждая страница сайта, как правило, имеет несколько
постоянных элементов, которые всегда находятся на одних и
тех же местах. Это:
• заголовок сайта, расположенный в самом верху
страницы;
• главное меню, как правило, размещаемое в левой части
страницы.
Графика
Меню
Название сайта
Название страницы
Фон
Поле ввода информации
Координаты
Примерный шаблон страниц сайта

8.

Оформление сайта
Рекомендации при наполнении страниц сайта
информационными материалами
Не ставьте точку в названиях сайта и страниц,
если они состоят из одного предложения
Названия пунктов меню делайте краткими
Не выбирайте для страниц пёстрый фон
Не размещайте на странице слишком много
информационных и художественных блоков
Не пишите слишком длинных текстов
В каждом абзаце используйте
одни и те же приёмы форматирования

9.

Тестирование сайта
Тестирование сайта – проверка того, что сайт правильно
отображается разными браузерами:
• тексты хорошо читаются на выбранном фоне,
• рисунки расположены на своих местах,
• гиперссылки обеспечивают правильные переходы.
Тестирование проводят перед размещением сайта в сети
Интернет.

10.

Размещение сайта в Интернет
Хостинг — услуга по размещению сайта на сервере,
постоянно находящемся в сети Интернет; хостинг может быть
как платным, так и бесплатным.

11.

Размещение сайта в Интернете
http://www.70mb.ru/ — бесплатный хостинг

12.

Размещение сайта в Интернете
http://www.1gb.ru/ — платный хостинг

13.

Размещение сайта в Интернете
http://guru-host.ru/free_hosting.php — бесплатный хостинг

14.

Размещение сайта в Интернете
http://www.ascont.ru/constructor-and-hosting — платный
хостинг

15.

Что выбрать?
Платным хостингом пользуются крупные компании. Они
получают удобное для прочтения и запоминания доменное
имя второго уровня, которое может совпадать с названием
компании.
Частные лица и небольшие компании пользуются
бесплатным хостингом. Ограничения: небольшое дисковое
пространство, ограничение размера отдельного файла,
доменное имя только третьего уровня и т. д. Главный
недостаток — на страницы вашего сайта без вашего согласия
добавляется коммерческая реклама.
Список серверов,
предоставляющих бесплатный
хостинг, можно получить поиском
по запросу «бесплатный хостинг».

16.

Самое главное
Структура (план) сайта — разбиение общего содержания на
смысловые разделы и отдельные страницы с указанием связей между
ними.
Представление структуры сайта в виде графа обеспечивает
наглядное представление содержания сайта и помогает организовать
навигацию — переходы с одной страницы сайта на другую.
Шаблон страницы — это схема страницы, на которой
представлены элементы, имеющиеся на страницах сайта.
Использование шаблонов страниц помогает выдержать единый стиль
оформления сайта.
Хостинг — услуга по размещению сайта на сервере, постоянно
находящемся в сети Интернет; хостинг может быть как платным, так и
бесплатным.

17.

Вопросы и задания
С
Какие
Продумайте
помощью
Перечислите
Что
С Назовите
рекомендации
какой
является
каких
целью
и Что
изобразите
основные
известный
основным
инструментов
такое
проводится
следует
структура
элементы,
ввам
недостатком
виде
учитывать
тестирование
сервер
можно
графа
сайта?
размещаемые
Интернета,
создавать
структуру
при
бесплатного
наполнении
сайта?
сайты?
одного
на
обеспечивающий
страниц сайта информационными
страницах
пользователям
хостинга?
сайта.
бесплатный
материалами?
хостинг
из следующих сайтов:
сайтов.
а) «Наш класс»;
б) «Моя семья»;
в) «Информатика».

18.

Опорный конспект
Язык разметки
гипертекста HTML
Способы создания сайта
Текстовый редактор
Microsoft Word
HTML-редактор,
конструктор сайтов
Первоначально следует продумать содержание и структуру
сайта
При наполнении страниц сайта информационными
материалами
следует
придерживаться
определённых
рекомендаций
Перед размещением сайта в сети Интернет следует
провести его тестирование.

Источник

Описание презентации по отдельным слайдам:

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

Другие материалы

Вам будут интересны эти курсы:

Копирайтер

Урок: Создание веб-сайта: технология, структура, содержание, оформление

Технологии создания сайта

Оформление сайта

Размещение сайта в Интернете

Рекомендованный список литературы

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

Это тоже интересно: