Здравствуйте, уважаемые читатели блога. С этой статьи мы начнем изучать основы языка HTML.
.
Срочно нужен интернет-магазин, а времени на изучение HTML, CSS, PHP и других технологий нет. Тогда просто можете арендовать интернет магазин с полностью реализованным функционалом и оптимизацией под поисковые системы.
Язык HTML и его теги
Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C. Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org
. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.
Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор. Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad)
(вообще в дальнейшем для редактирования html-кода я советую использовать ). Найти его можно: «Пуск->Все программы->Стандартные->Блокнот». Давайте создадим страничку об автомобилях. Итак, откроем Блокнот и наберем в нем текст:
Пример Web-страницы
Сайт об автомобилях.
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях. На сайте есть описания многих импортных и отечественных автомобилей.
Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:
Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:
Таким образом, мы создали Web-страницу в Блокноте, хоть и немного невзрачную, но уже содержащую большой заголовок и абзац текста, который автоматически разбивается на строки и содержит фрагмент, выделенный полужирным шрифтом.
Что такое тег?
Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент: Сайт об автомобилях
.
Здесь мы видим текст, который отображается на странице как заголовок, заключенный в теги
и
. Что же такое тег в html языке?
Тег HTML
- это обычные слова и символы, заключенные в угловые скобки, например
,
,
. Так тег является открывающим тегом, тег
закрывающим тегом, а текст между ними называется содержимым тега. Также тег и тег
называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще элементы состоящие из одного открывающего тега:
Так парный тег
определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы — .
Элементы бывают блочные и строчные (текстовые). Блочные элементы
осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы
осуществляют непосредственное форматирование текста или логическое форматирование. Элемент
является блочным элементом.
На этом у меня все!!! До встречи в следующих постах!
Описание презентации по отдельным слайдам:
1
слайд
Описание слайда:
2
слайд
Описание слайда:
Web-сайты Публикации во всемирной паутине реализуются в форме Web-сайтов Web-сайт содержит информацию, посвященную какой-либо теме или проблеме. Web-сайт состоит из Web-страниц. Обычно сайт имеет титульную страницу, на которой имеются гиперссылки на его разделы (Web-страницы). Гиперссылки имеются также на других Web-страницах сайта. Web-сайты обычно являются мультимедийными, т.е. содержать иллюстрации, анимацию, звуковую- и видеоинформацию. Web-страницы сайта могут содержать динамические объекты (исполнимые модули), созданные с использованием сценариев на языках JavaScript и VBScript или элементов управления ActiveX. Расположенные на сайте управляющие элементы (например, кнопки) позволяют запускать те или иные динамические объекты.
3
слайд
Описание слайда:
Web-страницы Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере. Основные достоинства HTML-документов: малый информационный объем; возможность просмотра на персональных компьютерах, оснащенных различными операционными системами. Для создания Web-страниц используются простейшие текстовые редакторы (например, Блокнот) Для упрощения работы по созданию Web-сайтов можно применять специальные программные средства (Web-редакторы), в которых процесс создания и редактирования страниц нагляден, - производится в режиме WYSIWYG (от англ. «What You See Is What You Get» - «Что видишь, то и получишь»).
4
слайд
Описание слайда:
Проектирование сайта Сначала необходимо разработать проект сайта, то есть определить, сколько Web-страниц будет входить в сайт, какова будет их тематика и как они будут связаны между собой. Пусть наш сайт будет содержать следующие страницы: Компьютер (титульная страница) Программы (содержит классификацию программного обеспечения) Словарь (содержит словарь компьютерных терминов) Комплектующие (содержит цены на устройства компьютера) Анкета (содержит анкеты для посетителей сайта)
5
слайд
Описание слайда:
Структура Web-страницы Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тэги (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги можно записывать как прописными, так и строчными буквами. HTML-код страницы помещается внутрь контейнера … … …
6
слайд
Описание слайда:
Web-страница делится на две части: заголовок и содержание. Заголовок Web-страницы заключается в контейнер
… … … и содержит название страницы и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения. Название страницы помещается в контейнер … … и при просмотре отображается в верхней строке окна браузера.
7
слайд
Описание слайда:
Содержание страницы, отображаемое в браузере, помещается в контейнер
… … … Созданную Web-страницу необходимо сохранить в виде файла под любым именем. (Имя стартовой страницы сайта чаще всего – index). В качестве расширения файла используют.htm или.html (например, index.htm) Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке. Необходимо различать имя файла (index.htm), под которым Web-страница хранится в файловой системе, и название Web-страницы, например «Компьютер», которое описывается тэгом высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, т.к. именно оно анализируется поисковыми системами.</p>
<p><i> Первое, что необходимо сделать
</i>,
прежде чем браться за <b>создание
</b> любого <b>веб сайта
</b>, это подумать
о целях, которые вы ставите перед собой, <b>создавая
</b> <a href="/linux/novye-proekty-kriptovalyuty-kak-kupit-top-kriptovalyutu-iz/">новый проект</a>. От выбора
целей будут зависеть методы их достижения, в том числе и дизайн сайта. От правильной
постановки задач будет зависеть успех всего предприятия. Вы хотите домашнюю
страничку? Замечательно. Возьмите ручку, лист бумаги и прикиньте, какие тематические
разделы должен включать ваш сайт, о чем именно вы хотели бы рассказать
посетителям на его страницах. Вы решили создать некоммерческий
информационный <b>сайт
</b>? Прекрасно. Определитесь, чему он будет посвящен. Если это
развлекательный сайт, после того как вы придумаете перечень соответствующих
рубрик (например, «анекдоты», «карикатуры» или «юмористические
рассказы»), необходимо подобрать для него подходящее <a href="/program/asus-zenfone-3-zoom-sravnenie-apparatnaya-nachinka-i-funkcional/">дизайнерское решение</a>,
более или менее отвечающее содержанию создаваемого <b>сайта
</b>.
Прогуляйтесь по Интернету, посмотрите, что уже создали
ваши «коллеги», какие разделы есть на аналогичные сайтах, оцените,
какой информации на них не хватает, а какой - наоборот, переизбыток, как эта
информация «подается» потребителю, скучно ее читать или, наоборот,
интересно и увлекательно.</p>
<p>У вас возникла необходимость создать
коммерческий сайт? В этом случае и перечень тематических разделов, и окончательное
решение относительно применяемых вами дизайнерских приемов, таких как использование
корпоративных цветов, специальных шрифтов или кнопок, стилизованных под общую
концепцию проекта, будет принимать, скорее всего, заказчик сайта. Однако в любом
случае вам придется предоставить ему несколько пробных вариантов, так называемых
дизайн-проектов, показывающих возможные реализации будущего ресурса. Обратитесь
к сайтам конкурирующих организаций, отечественных и зарубежных, посмотрите,
какие рубрики составляют их веб сайты, какие данные предлагаются в каждом тематическом
разделе.</p>
<p><i>После того как вы определитесь
</i>с
количеством, названиями и содержанием всех разделов своего проекта, можно переходить
к следующему этапу <b>создания сайта
</b> - проектированию его логической и физической
структуры. Необходимо помнить, что и список рубрик, и количество представленных
в них материалов, да и содержимое самих документов будет, скорее всего, неоднократно
изменяться и дополняться. Логическая и физическая структуры вашего проекта должны
отвечать подобным требованиям «мобильности»,
у вас не должно возникать ни малейших проблем с организацией или реорганизацией
гиперсвязей внутри проекта, если какой-либо составляющий его документ вдруг
перестанет существовать. У вас не должно также появляться необходимости переделывать
дизайн всех веб страниц при добавлении в состав проекта новой рубрики только
потому, что существующие гиперссылки не позволяют внести такие изменения, а
<a href="/linux/chto-delat-na-klaviature-slomalas-klavisha-kak-otremontirovat/">новую кнопку</a> навигации уже «некуда впихнуть». Подробно продумайте
все гиперсвязи между страницами ресурса, разработайте структуру директорий и
поддиректорий, в которые вы будете размещать документы. Только после этого можно
обратиться непосредственно к вопросам дизайна сайта.</p>
<p><i> Прикиньте и зарисуйте
</i> компоновку
<b>создаваемых
</b> веб страниц. Карандашом. На бумаге. Учтите, что если логическая
структура вашего сайта подразумевает наличие <a href="/internet/nachalnaya-stranica-yandeks-sdelat-startovoi-stranicei-ustanavlivaem/">стартовых страниц</a> разделов, или,
как их еще называют, индексных файлов, дизайн этих страниц, а также стартового
документа самого <b>сайта
</b> будет, скорее всего, несколько отличаться от дизайна
составляющих рубрику информационных страниц. Индексные файлы содержат обычно
ссылки на документы, составляющие данную рубрику, иногда - краткие анонсы этих
документов. Основное содержание самих информационных страниц составляет информационный
текст и, по мере необходимости, иллюстрации.</p>
<p><i> Представте общую компоновку
</i> веб страниц и
продумайте структуру невидимой таблицы, в которую затем будут включены их компоненты.
Проектируя таблицу, необходимо учитывать, что между ее столбцами, содержащими
<a href="/hosting-and-domains/rasshirennye-nastroiki-obs-strimy---delo-zatratnoe-sceny-istochniki-i/">различные элементы</a> документа, желательно оставлять отступ шириной несколько
пикселов. Делается это с целью избежать эффекта «прилипания» колонок
друг к другу, наблюдающегося, когда между элементами веб страницы отсутствует
горизонтальный отступ, что заметно портит <a href="/creative/kak-pomenyat-yazyk-na-klaviature-xiaomi-4x-kak-rusificirovat-smartfon/">внешний вид</a> документа.</p>
<p><b>Создание
</b> верстальной таблицы - это,
пожалуй, одна из наиболее <a href="/iron/mysql-hranimye-procedury-vyhodnye-parametry-sozdanie/">сложных процедур</a> при разработке <b>сайта
</b>. Начертить
таблицу безошибочно с первой попытки практически невозможно. Навык, благодаря
которому веб мастер за несколько секунд рисует все необходимые строки и столбцы
«на глаз», приходит только с опытом. Здесь трудно дать какие-то
конкретные советы, чтобы помочь начинающему дизайнеру. Научиться быстро проектировать
верстальную таблицу для нового сайта можно только одним способом: загрузите
несколько созданных другими авторами веб страниц, посмотрите в html-редакторе,
какие таблицы применяются ими для отображения данных документов, внимательно
изучите их, после чего попытайтесь создать пару-тройку своих.</p>
<p>Для построения <a href="/creative/js-sortirovka-slozhnoi-tablicy-ustanovkarezhima-obtekaniya-tekstom/">сложных таблиц</a> можно
применять вложение одной таблицы в другую: например, первичная таблица шириной
900 точек задает горизонтальное разбиение страницы, в каждую из ее ячеек вкладывается
еще одна, равная ей по ширине невидимая таблица, обеспечивающая вертикальное
разбиение. Такой подход позволяет дробить различные участки веб страницы независимо
друг от друга, создавая, к примеру, в одном ее поле четыре вертикальные колонки
различной ширины, а в другом - две, оперируя при этом <a href="/web-investment/vkontakte-iskat-lyudei-bez-registracii-kak-naiti-cheloveka-v/">различными параметрами</a>
вложенных таблиц в пределах одного и того же документа - размером пространства
между колонками, толщиной границ и т. д.</p>
<p><i> После того
</i> как будут скомпонованы
основные элементы документа и размечена невидимая таблица, у вас должен получиться
примерный эскиз будущего сайта. Теперь настала очередь подготовки контента.</p>
<p>Сначала рекомендуется набрать в любом текстовом
редакторе все <a href="/keyboard/prostaya-postranichnaya-navigaciya-na-jquery-text-pagination---jquery-auto-pagination-ili/">необходимые тексты</a>, причем сохранять их лучше всего в формате
с расширением.txt. Затем надо нарисовать в векторном
редакторе (например, в Corel-Draw) необходимые <a href="/browsers/razblokirovka-android-esli-graficheskii-parol-zabyt-udalenie-graficheskogo/">графические элементы</a>, после чего
по мере необходимости оптимизировать их размер с помощью специальных компрессоров
или других аналогичных средств.</p>
<p>Только после всех описанных выше
процедур можно приступать непосредственно к сборке страницы: созданию ее макета
в HTML-редакторе, написанию и окончательной отладке кода.</p>
<p>Поскольку дизайн всех документов,
составляющих ваш будущий сайт, скорее всего, будет практически идентичным, в
первую очередь рекомендуется создать так называемый шаблон. Шаблон представляет
собой html-документ, содержащий <a href="/hosting-and-domains/kak-sdelat-granicu-tablicy-nevidimoi/">невидимую таблицу</a>, заголовок, все графические
объекты, элементы навигации - иными словами, практически все, за исключением
непосредственного информационного наполнения. Если впоследствии у вас возникнет
необходимость включить в проект <a href="/iron/sochetanie-klavish-alt-tab-goryachie-klavishi-dlya-raboty-s-tekstom-i/">новый документ</a>, вам будет достаточно открыть
в html-редакторе <a href="/the-content/gotovye-shablony-adminok-shablony-admin-panelei-i-email-pisem/">готовый шаблон</a> и импортировать в него текст и все необходимые
иллюстрации. Рекомендуется разработать и сохранить на диске два различных шаблона:
для <a href="/program/pochemu-fotki-ne-sohranyayutsya-na-kompyuter-kak-sohranit-fotografii-i/">информационной страницы</a> и индексного файла. Когда страница будет готова,
ее следует проверить на идентичность отображения в различных броузерах при различных
экранных разрешениях и цветовых палитрах. Загрузите созданный вами html-документ
в <b>Microsoft Internet Explorer
</b>, установите значение цветовой палитры экрана равным
<b>256
</b> цветов, после чего последовательно измените экранное разрешение на <b>800x600
</b>,
<b>1024x768
</b> и, наконец, на <b>1600x1200
</b> точек. Посмотрите, не меняется ли компоновка
страницы, не «съезжают» ли ее элементы относительно друг друга.
Проделайте ту же процедуру для <b>Opera
</b>, <b>Safari
</b> и <b>Firefox
</b> . Если никаких существенных
изменений вы не заметите, можно быть уверенным, что другие документы, созданные
с использованием того же шаблона, с вероятностью 95 % будут отображаться столь
же корректно.</p>
<p><i> В итоге
</i> последовательность действий
по создании веб сайта сводится к следующему <a href="/hosting-and-domains/universalnyi-spravochnik-enciklopediya-kakov-diametr-pylinki/">несложному алгоритму</a>:</p>
<ul><li>Постановка целей и определение
основных задач для сайта.</li>
<li>Создание списка будущих тематических
разделов веб сайта.</li>
<li>Разработка логической и физической
структуры ресурса.</li>
<li>Подготовка эскиза дизайна, компоновки
сайта, невидимой верстальной таблицы.</li>
<li>Подготовка текстовых материалов для создаваемого сайта.</li>
<li>Подготовка графических материалов
в векторной форме.</li>
<li>Оптимизация размера картинок.</li>
<li>Создание шаблонов веб страниц.</li>
<li>Сборка веб страниц и отладка кода.</li>
<li>Проверка идентичности отображения
веб страниц с различным экранным разрешением, <a href="/security/kak-sdelat-palitru-cvetov-v-fotoshope-plavayushchie-palitry-vosstanovlenie/">цветовой палитрой</a> и в различных
браузерах.</li>
</ul><table width="635" border="0"><tr><td width="200">
</td><td>
</td><td width="200">
</td>
</tr></table>
<h2>Структура веб-сайта</h2><p>Структура сайта - это его основа. Еще на этапе создания сайта необходимо позаботиться об удобном структурировании всей информации. Специалисты по <a href="/internet/elektronnaya-pochta-sluzhby-podderzhki-vk-mozhno-li-pozvonit-v/">технической поддержке</a> сайта могут предложить несколько типов структур, каждая, из которых имеет свои достоинства и недостатки.</p>
<p>Самая <a href="/web-services/struktury-dannyh-obshchee-ponyatie-realizaciya-prosteishie-struktury-dannyh/">простая структура</a> - <i>линейная
</i>. На сайте с таким типом структурирования все страницы идут по очереди. Это значительно затрудняет посетителю поиск интересующей его информации, ведь прежде чем найти <a href="/keyboard/pochemu-vzlamyvayut-stranicy-v-kontakte-dlya-chego-hakeram-nuzhen/">нужную страницу</a> необходимо пролистать все стоящие до нее. Конечно, далеко не у каждого есть столько терпения и времени, по этому, часто, сайты с такой структурой остаются без посетителей. Линейная структура сайта очень примитивна, и, не смотря на свою ценовую доступность, не пользуется спросом у заказчиков. Применение такого типа структурирования оправданно лишь в том случае, когда <a href="/program/pochemu-net-zvuka-v-naushnikah-ne-rabotayut-naushniki-na-kompe-kak-sdelat-chtoby/">речь идет</a> о сайте-визитке с парой страниц.</p>
<p>Для структурирования информации на небольших сайтах, часто применяют модифицированную линейную структуру. От классической структуры она отличается тем, что с <a href="/iron/kak-pronumerovat-stranicy-v-vorde-bez-pervoi-kak-pronumerovat-stranicy-v-microsoft/">определенной страницы</a> имеет несколько ответвлений. Это позволяет посетителям быстрее попасть на интересующую их страницу. И хотя на первый взгляд недостатки такого типа структуры очевидны: ответвлений мало, свобода посетителей ограниченна. Тем не менее, <a href="/browsers/kak-skopirovat-vse-dannye-s-telefona-bystrye-sposoby-perenosa-dannyh/">данный способ</a> структурирования имеет <a href="/keyboard/kak-sdelat-demonstraciyu-osnovnye-problemy-s-demonstraciei/">неоспоримое достоинство</a>, а именно, дает уникальную возможность контролировать поведение пользователей. Например, в интернет-магазине, можно направить посетителя на страничку с рекламным описанием товара, потом дать информацию о бонусах, различных скидках, и только после этого разрешить доступ к страничке с ценами.</p>
<p>Самыми удобными считаются древовидная и решетчатая структуры. Древовидная структура сайта имеет, как бы ствол, стержень сайта от которого расходятся ветви-странички. Такая структура позволяет быстро найти информацию и не заблудиться на сайте. Иногда для структурирования сайта выбирают решетчатый тип расположения информации. На сайте с такой структурой найти <a href="/web-services/kak-pereiti-v-samoe-nachalo-dialoga-vk-kak-naiti-nuzhnuyu-informaciyu-v/">нужную информацию</a> можно мгновенно и с любой странички, однако существует <a href="/browsers/hudway-obzor-otlichnogo-nafigatora-vidoe-foto-i-opisanie/">реальная возможность</a> заблудиться. По этому, выбирая такую структуру, нужно обязательно добавлять понятную карту сайта.</p>
<h2>Структура страницы веб-сайта</h2>
<p>Формирование страницы веб-сайта производится динамически на основе используемого шаблона страницы, данных выводимых компонентами и статической информации, размещенной на странице. Создание шаблонов сайта и размещение на них компонентов осуществляется разработчиками сайтов. Тем не менее, необходимо иметь основное представление о том, как устроена страница сайта. Для всех страниц веб-сайта обычно используется один и тот же внешний шаблон.</p>
<p>Структурно дизайн поделён на три части:</p>
<p>верхняя - <i>header
</i>. Включает в себя, как правило, верхнюю и <a href="/internet/kak-nazyvaetsya-levaya-chast-okna-peremeshchenie-okna-po-ekranu-redaktirovanie-teksta-v-dialogovom-okne/">левую часть</a> дизайна со статической информацией (логотипом, лозунгом и так далее), верхним горизонтальным меню и левым меню (если они есть в дизайне). Может включать в себя информационные динамические материалы.</p>
<p>основная рабочая область - <i>work area
</i>. Рабочая область страницы, в которой размещаются собственно <a href="/iron/kakie-byvayut-ikt-po-vidam-obrabatyvaemoi-informacii-obrazovatelnye/">информационные материалы</a> веб-сайта. В качестве Основной рабочей области может подключаться как физический файл, так и <a href="/windows/kak-sozdat-virtualnyi-kompyuter-s-pomoshchyu-programmy-oracle-vm/">создаваемый системой</a> на основе комплексных компонентов динамический код.</p>
<p>Если в качестве Основной рабочей области подключается физический файл, то такая страница называется статической. Если подключается динамический код, то такая страница называется динамической.</p>
<p>нижняя - <i>footer
</i>. Включает в себя, как правило, статическую информацию (контактная информация, сведения об авторе и владельце веб-сайта и так далее), нижнее <a href="/internet/krasivye-menyu-css3-css-menyu-vypadayushchee-gorizontalnoe-menyu-na/">горизонтальное меню</a> и <a href="/mobile/vyzvat-kontekstnoe-menyu-na-rabochem-stole-mozhno-kak-izmenit-menyu-pravoi/">правое меню</a> (если они есть в дизайне). Может включать в себя информационные материалы.</p>
<p>Эти три части могут занимать разную площадь, иметь <a href="/linux/trendy-veb-dizaina-geometriya-v-raznyh-formah-javascript-seichas-na-kone/">разную форму</a>. Неизменно одно: их порядок.</p>
<p><b>Верхняя
</b>и <b>нижняя
</b>части дизайна формируются на основе шаблона дизайна веб-сайта, т.е. информация, отображаемая в данных областях, определяется параметрами шаблона веб-сайта.</p>
<p>Когда речь заходит о редактировании страниц веб-сайта, в большинстве своем имеется в виду изменение содержимого <b>Основной рабочей области
</b>. Здесь можно разместить любую информацию: текст, список новостей, каталог товаров, форму голосования и т.д.</p>
<p>Так же в шаблоне веб-сайта могут быть предусмотрены дополнительные <b>включаемые области
</b>, в которых также может быть размещена любая информация. Включаемые области могут размещаться как в верхней, так и в нижней частях страницы.</p>
<p>Благодаря правильной компоновке блоков на странице в дальнейшем облегчается сопровождение сайта для его разработчиков. При грамотном распределении информации на странице упрощается перемещение по сайту и поиск интересующей информации для посетителей сайта.</p>
<p><b>Тип урока:
</b> урок усвоения новых знаний</p>
<p><b>Цели:
</b></p>
<ul><li>Познакомиться с понятием Веб 2.0, а также со структурой веб-сайтов, рассмотреть основные этапы создания сайта на хостинге</li>
<li>Вырабатывать навыки по регистрации на хостинге и разработке структуры сайта, используя возможности бесплатного хостинга</li>
<li>Формировать ответственное отношение к представляемой на сайте информации, её достоверности, актуальности, оригинальности.</li>
</ul><p><b>Дидактические материалы
</b>: инструкционные листы с заданиями</p>
<p><b>Программное обеспечение
</b>: браузер, пакет «Denver», СМS «Kandidat»</p>
<p><b>Структура урока
</b></p>
<p>I. <a href="/keyboard/korporativnaya-pochta-arhivaciya-vhodyashchih-i-ishodyashchih-soobshchenii/">Организационный момент</a><br> II. Актуализация опорных знаний<br> <br> V. Закрепление материала учащимися<br> VI. Подведение итогов<br>VII. Домашнее задание</p>
<h3>Ход урока</h3>
<p>I. Организационный момент<br> II. Актуализация.</p>
<ol><li>Что представляет собой сайт и каково его назначение?</li>
<li>Какая служба в Интернет отвечает за веб-сайты?</li>
<li>Что означает <a href="/program/chto-takoe-domen-verhnego-urovnya-primer-domen-chto-eto-takoe-i-kak/">доменное имя</a> сайта?</li>
<li>С чего начать создание собственного сайта и какие технологии использовать?</li>
</ol><p>III. Сообщение темы и целей урока<br> IV. Изучение теоретического материала</p>
<h2>Структура веб-сайтов</h2>
<p><b>Структура веб-сайта
</b> – это его каркас, определяющий порядок навигации.</p>
<p>Базовые структуры веб-сайтов можно разделить на три группы: линейная, древовидная, решетчатая.</p>
<p><b>Линейная структура
</b> представляет собой последовательность веб-страниц, доступ к которым возможен только с предыдущей и последующей. Такая структура может быть применена для имиджевых сайтов, сайтов-презентаций, онлайновых учебных пособи<b>й.
</b></p>
<p><b>Древовидная структура
</b>является иерархической, где <a href="/program/kak-sdelat-etu-stranicu-glavnoi-kak-v-internet-explorer-sdelat-yandeks-startovoi/">главная страница</a> является первым, самым <a href="/mobile/na-chto-ukazyvaet-domen-verhnego-urovnya-vidy-domenov-verhnego-urovnya/">верхним уровнем</a>, страницы категорий – более низким, вторым уровнем, а конечные страницы, соответственно – третьим. В ряде случаев уровней может быть больше, если категории содержат подкатегории, но <a href="/security/chto-daet-bolshoe-kolichestvo-druzei-v-kontakte-kak-formiruetsya-spisok/">большое количество</a> уровней негативно сказывается на индексации страниц сайта. <a href="/configuring-os/stek-funkcii-struktury-dannyh-obshchee-ponyatie-realizaciya-prosteishie-struktury/">Данная структура</a> подходит практически для любого сайта. Это может быть тематический сайт, портал, интернет-магазин.</p>
<p><b>Решетчатая структура
</b>сайта позволяет осуществлять переходы, как по вертикали, так и по горизонтали между ветвями в <a href="/program/spisok-yazykov-programmirovaniya-yazyki-programmirovaniya-nizkogo-i/">разных уровнях</a>. Эта структура применяется, как правило в сайтах-каталогах.</p>
<h2>Разновидности веб-страниц</h2>
<p>Веб-сайты различных структур в основном включают в себя четыре типа страниц:</p>
<ul><li>главная страница,</li>
<li>страницы категорий,</li>
<li>конечные страницы,</li>
<li>служебные страницы.</li>
</ul><p><b>Главная страница
</b> должна давать обобщенные сведения о сайте в целом и указывать направления по основным категориям.</p>
<p><b>Конечные страницы
</b> содержат в себе основные материалы сайта – статьи, изображения, видео. Именно эти страницы представляют наибольший интерес для пользователя.</p>
<p><b>Служебные страницы
</b> предназначены для размещения карты сайта, <a href="/keyboard/kak-obezopasit-smartfon-na-androide-kak-zashchitit-android-smartfon-ot-virusov-kak/">контактной информации</a>, <a href="/creative/kasperskii-licenzionnoe-soglashenie-licenzionnoe-soglashenie-zao/">лицензионного соглашения</a> и других служебных данных.</p>
<h2>Выбор хостинга и доменного имени</h2>
<p><b>Хо?стинг
</b> - это услуга по предоставлению <a href="/hosting-and-domains/zarabotok-na-vychisleniyah-kak-zarabotat-na-vychislitelnoi-moshchnosti/">вычислительных мощностей</a> для физического размещения сайта на сервере, постоянно подключенном к <a href="/creative/parametry-i-harakteristiki-kompyuternyh-setei-osnovnye-harakteristiki/">компьютерной сети</a> (в <a href="/keyboard/kak-zashchitit-lichnye-dannye-v-android-zashchita-lichnyh-dannyh-na-telefone-na-sluchai/">данном случае</a> Интернет).</p>
<p><b>Хостинговая компания
</b> (<i>хостинг-провайдер
</i>) - организация, предоставлением услуг размещения оборудования, данных и web-сайтов на своих серверах.</p>
<p>Для создания и размещения сайта требуется выбрать хостинг (они бывают платные и бесплатные), а также доменное имя, которое чаще всего можно приобрести через хостинг-провайдера. Доменное имя покупается на год (цена в зависимости от <a href="/creative/domennaya-zona-eu-registraciya-domenov-eu-kak-perenosit-k-nam-domennye/">доменной зоны</a>), но ряд <a href="/mobile/kak-razmestit-server-minecraft-na-hostinge-kak-postavit-server-mainkraft-na/">бесплатных хостингов</a> предоставляют бесплатные доменные имена третьего уровня. Для небольшого сайта вполне <a href="/keyboard/kakoi-antivirus-podoidet-dlya-slabogo-noutbuka-besplatnyi-antivirus-dlya/">подойдет бесплатный</a> хостинг, где можно будет отработать основные навыки работы с веб-сайтом. Следует учесть что бесплатный хостинг и домен накладывают <a href="/windows/kak-zablokirovat-ishodyashchii-vyzov-na-opredelennyi-nomer/">определенные ограничения</a> на возможности <a href="/web-services/sozdaem-dizain-proekt-kvartiry-svoimi-rukami/">создаваемого проекта</a>. Когда выбор хостинга сделан, требуется зарегистрироваться на нём и начать работу по созданию сайта.</p>
<h2>Создание сайта с помощью СМС</h2>
<p>В настоящее время сайты, как правило, создаются с помощью <a href="/the-content/parol-na-papku-bez-programm-kak-postavit-parol-na-papku-fail-ili/">специальных программ</a>, именуемых системами управления сайтом (СМS). Часто используется термин «Конструктор сайтов», который по сути является также CMS. Система управления сайтом предназначена для <a href="/web-investment/tehnicheskoe-zadanie-na-razrabotku-informacionnoi-sistemy/">автоматизированного создания</a> сайта, а также для управления контентом (содержимым). Другими словами, СМС позволяет на основе шаблона <a href="/hosting-and-domains/blokirovka-zapuska-opredelennyh-tipov-programm-iz-okna-produkta/">определенного типа</a> создать сайт, задать его структуру и наполнить информацией даже человеку, слабо владеющему HTML. Ряд хостингов имеют встроенные CMS: в частности, популярный ucoz.ru.</p>
<p>Несмотря на многообразие CMS, принципы их работы одинаковы. Для отработки приемов работы с ней целесообразно на свой локальный компьютер установить пакет программ «Denver», который позволяет смоделировать работу сервера. С помощью <a href="/hosting-and-domains/yazyki-programmirovaniya-sistemy-programmirovaniya-lekciya-yazyki-i-sistemy/">данного пакета</a> можно использовать разнообразные СМС, создавая сайты непосредственно на <a href="/browsers/hosting-i-domen-na-svoem-kompyutere-kak-sozdat-ustanovit/">локальном компьютере</a>. Овладев основными приемами работы с сайтом, можно уверенно приступать к регистрации на сервере хостинг-провайдера.</p>
<h2>Технология Веб 2.0</h2>
<p>Следует упомянуть <a href="/internet/sovremennye-napravleniya-razvitiya-neirokompyuternyh/">современное направление</a> в принципах web-разработок, называемое web 2.0</p>
<p><b>Веб 2.0
</b>является методикой проектирования сайтов, которые путём взаимодействия с пользователями становятся тем совершеннее, чем <a href="/web-investment/dolgoigrayushchii-knopochnyi-telefon-kakoi-knopochnyi-telefon-kupit-luchshie/">больше людей</a> ими пользуются. Эта методика подразумевает участие пользователей в развитии web-проекта (примером является «Википедия»), а если точнее, в наполнении информацией. Хотя Веб 2.0 именуется технологией, далеко не все специалисты с этим согласны, поскольку речь не идет о каком-то <a href="/web-investment/kalkulyator-dvoistvennyi-simpleks-metod-reshenie-zlp-simpleks-metodom-osobye-sluchai-primeneniya-simp/">особом методе</a> web-дизайна.</p>
<p>V. <span>Закрепление материала учащимися (Создание сайта на локальном сервере)
</p>
<ol><li>Запустить на выполнение программу «Start Denver»</li>
<li>В <a href="/linux/rasshireniya-dlya-vivaldi-brauzera-chto-takoe-chromium-based-brauzery/">адресную строку</a> браузера ввести доменное имя, указанное в инструкционной карте (например, http://school24.ua). Ознакомиться с шаблоном сайта, предложенного по умолчанию.</li>
<li>Открыть <a href="/web-investment/chto-takoe-administrativnaya-panel-wordpress-administrativnaya-panel/">административную панель</a> сайта: http://school24.ua/admin</li>
<li>Указать логин и пароль (admin, admin)</li>
<li> <b>Настройки
</b>, задать название сайта, выбрать шаблон, соответствующий теме сайта</li>
<li>В разделе “Навигация” выбрать пункт <b>Начало
</b>. Создать нужное количество категорий (Ссылка «Добавить категорию»–Указать название категории–Установить переключатель <b>Включить ссылку страницы в меню
</b>в положение «<b>Да
</b>»–Кнопка <b>Добавить категорию
</b>)</li>
<li>При необходимости откорректировать меню сайта (В разделе “Навигация” выбрать пункт «Редакция меню»)</li>
<li>Проверить созданный сайт (Ссылка «Перейти на сайт»)</li>
</ol><p>VI. Подведение итогов.</p>
<ol><li>Домашнее задание: зарегистрироваться на одном из бесплатных хостингов со встроенной CMS, получить доменное имя сайта, создать сайт (без наполнения контентом).</li>
</ol>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</article>
<ul class="breadcrumbs">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a class="home" href="/" itemprop="url"><span itemprop="title">Главная</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/category/configuring-os/" itemprop="url"><span itemprop="title">Настройка ОС</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/configuring-os/razrabotka-struktury-veb-stranic-nastroika-struktury-dokumenta-html/" itemprop="url"><span itemprop="title">Разработка структуры веб страниц. Настройка структуры документа HTML. Срочно нужен интернет-магазин, а времени на изучение HTML, CSS, PHP и других технологий нет. Тогда просто можете арендовать интернет магазин с полностью реализованным функционалом и опт</span></a></li>
</ul>
<div class='yarpp-related'>
<div class="title">Похожие публикации</div>
<ul class="related">
<li class="related__item">
<div class="related__item-img">
<img src="/uploads/90bf91a6b3978692467c5e20f255e63e.jpg" width="150" height="95" alt="Мощные низковольтные СВЧ транзисторы для подвижных средств связи" / loading=lazy> </div>
<a href="/keyboard/moshchnye-svch-tranzistory-philips-semiconductors-moshchnye-nizkovoltnye-svch-tranzistory/">Мощные низковольтные СВЧ транзисторы для подвижных средств связи</a>
</li>
<li class="related__item">
<div class="related__item-img">
<img src="/uploads/36d21cd536b7404107db9d278f3c77fc.jpg" width="150" height="95" alt="Как удалить Хамачи (Hamachi) из ОС Windows Как удалить хамачи сетевых подключений" / loading=lazy> </div>
<a href="/keyboard/problema-s-tunnelem-hamachi-sposoby-resheniya-nepoladki-kak/">Как удалить Хамачи (Hamachi) из ОС Windows Как удалить хамачи сетевых подключений</a>
</li>
<li class="related__item">
<div class="related__item-img">
<img src="/uploads/2902d1ff7cf7985e1a49391afcea2220.jpg" width="150" height="95" alt="Как устроен моноколесо. Как работает моноколесо. Технические различия между моделями" / loading=lazy> </div>
<a href="/program/kak-ustroen-monokoleso-kak-rabotaet-monokoleso-tehnicheskie-razlichiya-mezhdu-modelyami/">Как устроен моноколесо. Как работает моноколесо. Технические различия между моделями</a>
</li>
<li class="related__item">
<div class="related__item-img">
<img src="/uploads/f85abf856fb08f5997bb3e403daed957.jpg" width="150" height="95" alt="Анонимный доступ по FTP Ftp анонимный доступ" / loading=lazy> </div>
<a href="/windows/chto-takoe-anonimnyi-ftp-dostup-anonimnyi-dostup-po-ftp-ftp/">Анонимный доступ по FTP Ftp анонимный доступ</a>
</li>
</ul>
</div>
</main>
<aside class="sidebar">
<div class="section section_widget widget_categories">
<div class="title">Рубрики</div>
<ul>
<li class="cat-item cat-item-23"><a href="/category/web-investment/" title="Веб-инвестиции">Веб-инвестиции</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/the-content/" title="Контент">Контент</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/creative/" title="Креатив">Креатив</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/keyboard/" title="Клавиатура">Клавиатура</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/program/" title="Программы">Программы</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/hosting-and-domains/" title="Хостинги и домены">Хостинги и домены</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/linux/" title="Linux">Linux</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/configuring-os/" title="Настройка ОС">Настройка ОС</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/browsers/" title="Браузеры">Браузеры</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/iron/" title="Железо">Железо</a>
</li>
<li class="cat-item cat-item-23"><a href="/category/security/" title="Безопасность">Безопасность</a>
</li>
</ul>
</div>
<div class="section section_widget widget_recent_entries">
<div class="title">Популярные записи</div>
<ul>
<li>
<a href="/program/kak-obnaruzhit-nesankcionirovannyi-udalennyi-dostup-k-kompyuteru/">Как обнаружить несанкционированный удаленный доступ к компьютеру</a>
</li>
<li>
<a href="/linux/kak-v-skaipe-otpravit-tekstovoe-soobshchenie-kak-otpravlyat-sms-soobshcheniya-v/">Как отправлять SMS-сообщения в Скайпе для рабочего стола?</a>
</li>
<li>
<a href="/web-investment/obzor-oblachnogo-servisa-skydrive-ot-microsoft-onedrive-kak-polzovatsya/">OneDrive — как пользоваться хранилищем от Microsoft, удаленный доступ и другие возможности бывшего SkyDrive Вход в веб-сервис OneDrive</a>
</li>
<li>
<a href="/internet/bios-ne-vidit-fleshku-v-boot-menu-bios-ne-vidit-zagruzochnuyu-fleshku-kak-reshit/">Биос не видит загрузочную флешку, как решить проблему</a>
</li>
<li>
<a href="/android/v-chem-zaklyuchaetsya-princip-raboty-kompyutera-princip-raboty-kompyutera/">Принцип работы компьютера</a>
</li>
</ul>
</div>
<div class="section section_widget widget_recent_entries">
<div class="title">Свежие записи</div>
<ul>
<li>
<a href="/answers-it/sozdanie-zapolnyaemyh-pdf-form-sozdanie-i-izmenenie-polei-formy-zapolnyaemyi/">Создание и изменение полей формы Заполняемый бланк в pdf</a>
</li>
<li>
<a href="/answers-it/chto-takoe-letyshops-kak-rabotaet-lety-shops-otzyvy-o-letyshops-letyshops-otzyvy-o-samom/">Что такое Letyshops? Как работает Lety shops? Отзывы о Letyshops. Letyshops отзывы о самом мощном кэшбэке Оплачивать покупки можно наличными или с мобильного телефона</a>
</li>
<li>
<a href="/answers-it/kak-otklyuchit-uvedomleniya-megafon-megafonpro-chto-eto-takoe-i-kak/">MegaFonPRO: что это такое и как отключить мобильные подписки</a>
</li>
<li>
<a href="/keyboard/samye-bystrye-fleshki-usb-3-0-drugoi-vzglyad-na-vybor-novoi-fleshki/">Самые быстрые флешки usb 3</a>
</li>
<li>
<a href="/security/kak-nastroit-rabochii-stol-na-xiaomi-rabochii-stol-xiaomi-kak-upravlyat-i/">Рабочий стол Xiaomi: как управлять и пользоваться</a>
</li>
</ul>
</div>
<div class="section section_widget">
<div id="zysypu1" style="height:500px;width:290px;" align="center"></div>
</div>
</aside>
</div>
</div>
<footer class="footer">
<nav class="footer-nav"><ul><li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="/sitemap.xml">Карта сайта</a></li>
</ul></nav> <div class="footer-bottom">
<div class="copy">© 2024. tdelegia.ru Бесплатная помощь IT-специалиста. Полезные статьи. Все права защищены</div>
</div>
</footer>
</div>
<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.4'></script>
<script type='text/javascript' src='/assets/scripts1.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = { "smooth_scroll":"1"} ;
/* ]]> */
</script>
<script type='text/javascript' src='https://tdelegia.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='https://tdelegia.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script>
</div>
</body>
</html>
