Технология создания и публикации сайта «Дети и Интернет»

2019-11-21

250

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 12

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

Посетителями сайта будут родители, которым важна безопасность их детей в сети интернет

Мой сайт состоит из основной страницы и пяти интегрированных фреймов.

Для создания сайта я использовал язык разметки гипертекста HTMLи каскадные таблицы стилей CSS.

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

Сначала я использовал тэг <html> для того чтобы сообщить браузеру что перед ним веб сайт, затем внутри него я поместил тэг <head> и в него добавил тэг метаданных <meta>c параметром charset=”utf-8”, чтобы задать кодировку сайта. Затем тэгом <title>я изменил название вкладки на “Безопасность детей в сети Интернет”.

<!DOCTYPE html>

<html>

<head>

<title>Безопасность детей в сети Интернет</title>

</head>

Далее я начал верстать тело сайта, задав тэг <body> с параметром background, для того чтобы задать фон сайта, далее в тэге <body> я буду помещать основной контент сайта.

Добавление контента:

Задам отцентрированный, благодаря параметру align=center заголовок 2 уровня тэгом <h2> “Безопасность детей в сети Интернет”, затем добавлю список с опасностями в сети интернет тэгом <ul>для задания маркированного списка, и <li> для задания пункта списка. Добавлю небольшое описание списка тэгом <p> впереди списка, в описании я так же использовал тэг <br>для перехода на другую строку.

<bodybackground=background.jpg>

<h2>Безопасность детей в сети Интернет</h2>

<p>Классификация интернет-угроз<br>

<br>

Во Всемирной паутине существует следующие виды опасности юных пользователей: </p>

<ul>

<li>суицид-сайты;</li>

<li>сайты-форумы потенцинальных самоубийц;</li>…

Теперь я добавлю небольшой заголовок для следующего списка, простым текстом, и задам новый список, который в этот раз будет нумерованным при помощи тэга <ol>, и соответственно задам пункты списка тэгом <li>.

Правила работы в сети Интернет:

<ol>

<li>Не входите на незнакомые сайты.</li>

<li> Если к вам по почте пришел файл Word или Excel, даже от знакомого лица, прежде чем открыть, обязательно проверьте его на вирусы.</li>

<li>Если пришло незнакомое вложение, ни в коем случае не запускайте его, а лучше сразу удалите и очистите корзину.</li>

<li>Никогда не посылайте никому свой пароль.</li>

<li>Старайтесь использовать для паролей трудно запоминаемый набор цифр и букв.</li>

<li>При общении в Интернет не указывайте свои личные данные, а используйте псевдоним (ник)</li>

На этом первый раздел главной страницы сайта завершен. Теперь я добавлю горизонтальный разделитель тэгом <hr> и приступлю ко второму разделу.

Добавлю небольшой параграф с текстом тэгом <p> . Добавлю отцентрированный параметром align=center, заголовок 4 уровня <h4> и затем добавлю отцентрированное тэгом <center>, изображение добавленное тэгом <img> в параметре src данного тэга задам название файла изображения.

<hr>

<p>В этом разделе представлены практические рекомендации о том, как помочь юным пользователям оставаться в безопасности в киберпространстве и избежать существующих рисков. </p>

<h4>Как помочь ребенку избежать столкновения с нежелательным контентом: </h4>

После него я добавлю дополнительный текст тэгом <p> и маркированный список тэгами<ul> и <li>.

<p>Тем не менее помните, что невозможно всегда находиться рядом с детьми и постоянно их контролировать…</p>

<ul>

<li>Используйте специальные настройки безопасности (инструменты родительского контроля, настройки безопасного поиска и другое).</li>

<li>Выработайте «семейные правила» использования Интернета…</li>

<li>Будьте в курсе того, что ваш ребенок делает в Интернете…</li>

</ul>

<hr>

Завершу второй раздел главной страницы сайта тэгом горизонтального разделителя <hr>.

В третий раздел я помещу тэг <center> для того чтобы выровнять его содержимое по центру и в нем помещу плавающий фрейм тэгом <iframe> с параметрами: src – задающим файл фрейма width – задающим ширину height - задающим высоту и border задающим границу фрейма.

<ahref="frame_1.htm"target="main"><imgsrc="button_1.png"alt=""width=220px

hspace=3px></a>

<ahref="frame_2.htm"target="main"><imgsrc="button_2.png"alt=""width=220px

hspace=3px></a>

</center>

</body>

</html>

На текущий момент веб-страница выглядит так:

Теперь я приступлю к созданию фреймов и размещению на них добавочного контента.

Над фреймами будет меню, созданное с помощью гиперссылок <a> с параметром href указывающим на файл другого фрейма. В первом фрейме я помещу маркированный список.

<linkrel="stylesheet"href="style.css">

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<body>

<h1>Предупреждение нежелательных контактов</h1>

<hr>

<ul>

<li>Будьте в курсе, с кем контактирует в Интернете ваш ребенок, старайтесь регулярно проверять список контактов своих детей, чтобы убедиться, что они лично знают всех, с кем они общаются;</li>

<li>Объясните ребенку, что нельзя разглашать в Интернете информацию личного характера</li>

</ul>

</body>

Во втором фрейме я размещу заголовок 3 уровня <h3>, один параграф, отцентрированное видео тэгами <center> для отцентровки и <video> с параметрами src для указания видеофайла и autoplay для автоматического запуска видео.

<linkrel="stylesheet"href="style.css">

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<body>

<h1>Кибербуллинг</h1>

<hr>

<h3>Как избежать кибербуллинга</h3>

<p>Кибербуллинг – преследование сообщениями, содержащими оскорбления, агрессию, запугивание, хулиганство,</p>

<h4>Предупреждениекибербуллинга: </h4>

<ul>

<li>Объясните детям, что при общении в Интернете, они должны быть дружелюбными с другими пользователями, ни в коем случае не писать грубых слов – читать грубости так же неприятно, как и слышать;</li>

</ul>

……………..

</body>

В третьем фрейме будет заголовок 3 уровня <h3>, отцентрированное <center> изображение <img> с тэгом src для указания изображения. А также в нем будет параграф <p> заголовок 4 уровня <h4> для макированного списка <ul>. Затем будет видео <video> с параметрами <src> для файла и <controls> для создания управляющих кнопок.

<linkrel="stylesheet"href="style.css">

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<body>

<h1>Инернет-мошенники</h1>

<hr>

<h3>Как научить ребенка быть осторожным в Сети и не стать жертвой интернет-мошенников:</h3>

<p>Кибермошенничество – один из видов киберпреступления, целью которого является причинение материального или иного ущерба путем хищения личной информации пользователя</p>

<h4>Предупреждение кибермошенничества: </h4>

<ul>

<li>Проинформируйте ребенка о самых распространенных методах мошенничества и научите его советоваться со взрослыми перед тем, как воспользоваться теми или иными услугами в Интернете;</li>

…….

</body>

Четвертый фрейм будет содержать в себе заголовок 3 уровня, параграф, заголовок 4 уровня, маркированный список. А также видео с управляющими кнопками, еще один заголовок 4 уровня и маркированный список.

<linkrel="stylesheet"href="style.css">

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<body>

<h1>Как распознать интернет- и игровую зависимость </h1>

<hr>

<p>Сегодня в России все более актуальны проблемы так называемой «интернет-зависимости» и зависимости от компьютерных игр («геймерство»)…</p>

<h4>Как выявить признаки интернет-зависимости у ребенка: </h4>

<ul>

<li>Оцените, сколько времени ребенок проводит в Сети, не пренебрегает ли он из-за работы за компьютером своими домашними обязанностями, выполнением уроков, сном, полноценным питанием, прогулками.</li>

<li>Поговорите с ребенком о том, чем он занимается в Интернете…</li>

<li>Понаблюдайте за сменой настроения и поведением вашего ребенка после выхода из Интернета…</li>

</ul>

<videosrc="Video_3.webm"controls></video>

…………..

</body>

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

Заключение.

Творческий характер создания документов HTML сродни программированию, так что при этом возможны ошибки, которые могут привести к трудностям или даже полной невозможности прочитать созданный документ в Интернете. Кроме того, огромное разнообразие компьютеров, подключенных к Интернету, приводит к тому, что заранее невозможно предсказать, как именно будет выглядеть документ на экране конкретного пользователя.

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

Для создания сайта могут использоваться различные инструментальные средства web-редактирования, прежде всего — специальные редактирующие программы и программные пакеты, реализующие принципы «визуального редактирования» web-страниц и сайтов (Microsoft FrontPage, Macromedia Dreamwaver и пр.). Кроме того, современные версии (2000, ХР, 2003, 2007) офисного пакета Microsoft Office и ряд других прикладных программ позволяют сохранять обрабатываемые в них документы в web-совместимом формате, позволяющем размещать их на web-сайте и просматривать через сети Интернет/Интранет. Однако для понимания принципов web-конструирования и для их создания необходимо знание языка гипертекстовой разметки HTML — как основы основ web-представления текстовых и медиаматериалов. Широкие возможности языка HTML были продемонстрированы и использованы мной при создании информационного сайта «Безопасность детей в сети Интернет».

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

2019-11-21

250

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 12

Обсуждение в статье: Технология создания и публикации сайта «Дети и Интернет»

Обсуждений еще не было, будьте первым... ↓↓↓