логотип

фотка 1
Дубровин Иван

Вирусы здесь не живут!

Система образования в информационном обществе

3. Этапы создания сайта на языке HTML

3. 1 Предварительные этапы работы по созданию сайта.

 

  • Определился с тематикой сайта.
  • На альбомном листе создал графический макет моего будущего сайта.
  • Скачал с Интернета картинки и текстуры из свободного доступа для дизайна сайта.
  • Выбрал картинку для логотипа сайта.
  • Придумал слоган для сайта.
  • Зарегистрировал доменное имя для моего будущего сайта http://z-naika.ru/
  • Выбрал хостинг для размещения моего сайта https://www.smartape.ru/
  • Оплатил хостинг и доменное имя.
  • Подобрал литературу по языку HTML

3.2 Тематика моего сайта:

Политология. Курсовая работа по теме: «Система образования в информационном обществе».

 

3. 3 Создание логотипа сайта.

Выбрал картинку. В программе Photoshop CC создал логотип для моего сайта в формате PNG.

Логотип моего сайта:

логотип

3. 4 Слоган моего сайта

Чтобы оценить дорогу, надо ее пройти…

 

3.5 Определился с разделами сайта

  1. Главная
  2. Политология
  3. Курсовая работа
  4. Фотоальбом
  5. Обо мне

 

3.6 В графическом редакторе создал кнопки для разделов сайта:

(опробовал два варианта, в программе фотошоп и на конструкторе создания кнопок в режиме он-лайн, эти способы показались мне самыми быстрыми)

Главная Курсовая Обо мне Политология Фотопльбом

3.7 Выбрал несколько источников литературы для изучения HTML кода

 

  • Гончаров, Алексей Самоучитель HTML / Алексей Гончаров. — М.: Питер, 2000. — 240 c.
  • Джереми, Кит HTML5 для веб-дизайнеров / Кит Джереми. — М.: Манн, Иванов и Фербер, 2012. — 305 c.
  • Дронов, Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. — М.: БХВ-Петербург, 2011. — 416 c.
  • Квинт, Игорь Создаем сайты с помощью HTML, XHTML и CSS на 100% / Игорь Квинт. — М.: Питер, 2012. — 448 c.
  •  Комолова, Н. HTML. Самоучитель / Н. Комолова, Е. Яковлева. — М.: Книга по Требованию, 2011. — 288 c.

 

3.8 На альбомном листе нарисовал макет моего сайта

Шаблон сайта

3.9 Для создание шаблона сайта на языке  HTML можно использовать следующие инструменты:

  1. Текстовые редакторы: блокнот, любой другой текстовый редактор.
  2. Редакторы кода  HTML с установкой на ПК или в режиме он-лайн. Визуальные и без визуализации.
  3. Конструкторы для создания сайтов с установкой на ПК или в режиме он-лайн.

 

4. Редакторы HTML кода:

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

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

 

4.1 Познакомился с редакторами HTML кода Notepad++

         Notepad++ — это легковесный текстовый редактор, разработанный для компьютеров под управлением Windows. Пользователи Linux также могут использовать его через Wine. Notepad ++, выпущенный еще в 2003 году, является проверенным и устоявшимся инструментом многих разработчиков, являясь удобным текстовым редактором для HTML кода. Этот редактор распространяется как бесплатное программное обеспечение и его репозиторий доступен в GitHub. Notepad++ поддерживает сторонние плагины.

Основные достоинства Notepad++

  1. Notepad ++ является простым, не требовательным к ресурсам инструментом.
  2. Есть портативная версия.
  3. Функционал программы легко расширяется множеством плагинов. При желании такой плагин можно создать самому.
  4. Интерфейс программы также легко настраивается.
  5. Поддерживается работа с большим количеством вкладок одновременно.
  6. Notepad ++ является на 100% бесплатной программой.

Редактор

4.2 Редактор HTML кода Visual Studio Code

Редактор 2

   Выпущенный компанией Microsoft на основе кода Atom, Visual Studio Code имеет часть функционала IDE (Integrated development environment) — интегрированной среды разработки – мощной программы, содержащей, кроме текстового редактора кода, еще ряд механизмов, позволяющих проводить анализ кода, запуск его и отладку. Часто именно этот инструмент представляют, когда говорят о том, какой функционал должна иметь IDE для web разработки. Во многих рейтингах бесплатных HTML редакторов именно Visual Studio Code занимает первое место, используясь разработчиками все чаще, и чаще. Так, к примеру, по данным Stack Overflow, этот редактор в 2017 году использовали 24% веб-разработчиков,  а в 2018 году – уже 38,7.

Плюсы Visual Studio Code

  1. Имеет значительную часть функционала IDE.
  2. Встроенный мощный механизм автозаполнения – IntelliSense.
  3. Значительное количество расширений и дополнений.
  4. Интегрирован с Git «из коробки».
  5. Имеется встроенный отладчик для кода JavaScript, TypeScript, Node.js
  6. Открытый исходный код приложения.
  7. Visual Studio Code  распространяется бесплатно.

 

4.3 Визуальный редактор HTML кода Cut Editor

         Данный визуальный HTML редактор многие считают эталоном, так как его панель настройки содержит практически всё, что только может придумать вебмастер – смайлики, youtube видео, даже возможность вставки кода с подсветкой тегов для улучшения восприятия.

В Cut Editor реализовано переключение трех режимов:

  1. Визуальный;
  2. Режим работы с кодом;
  3. Предварительный просмотр результата.
  4. Переключение идет вкладками в нижней части окна редактора.

 

4.4 Визуальный редактор WYSIWYG Web Builder 7.1.0

разработчик: Pablo Software Solutions

размер дистрибутива: 5,5 Мб

распространение: shareware

русский интерфейс: нет

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

 

4.5 Простые HTML онлайн редакторы

         Codepen — это удобный онлайн-редактор с возможностью совместного редактирования. Он состоит из панели для HTML, CSS, JavaScript, а также окна для предварительного просмотра в режиме реального времени. Размеры панелей можно регулировать, растягивая их края. Если вам нужно протестировать верстку или JS-код, то это отличный вариант. Также здесь можно посмотреть работы других верстальщиков.

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

 

4.6 Artisteer – программа для создания веб-сайтов

артистер

        Artisteer – это программа, которая, в первую очередь, направленна на простых пользователей, которые хотели бы самостоятельно создать дизайн своего будущего сайта. Вам не нужно знать языков программирования HTML или CSS, вам даже не нужно уметь работать в Photoshop, чтобы создать профессиональный дизайн для сайта. Artisteer создает дизайн для всех популярных бесплатных СMS (Joomla, Drupal, WordPress). Чтобы вам было проще, в программе уже собраны шаблоны, которые легко редактируются и позволяют вам быстро создать нужный вам дизайн. По сути, весь процесс выглядит простым перетаскиванием столбиков, изменением их размеров и вклеиванием различных графических файлов. Процесс создания дизайна сайта в программе Artisteer очень похож на конструктор, в котором вы добавляете или удаляете различные элементы из уже готовых частей.

Особенности:
Простой процесс создания дизайна сайта без знания программирования.

Оптимизация созданного шаблона под CMS Joomla, Drupal и WordPress.

Простой интерфейс на русском языке со множеством шаблонов.

Создание шаблона для сайта за несколько минут.

 

5. Назовем некоторые он-лайн конструкторы сайтов:

uCoz – топовый универсальный конструктор

Kit – лучший конструктор бизнес-сайтов

Wix – конструктор сайтов №1 в мире

Webasyst – магазинная платформа для профи

 

6. Основные теги HTML кода, которые используются для создания шаблона сайта

Определения

Обозначение html документа

<HTML></HTML>

Определение HTML 3.2

<!DOCTYPEHTML PUBLIC "/W3C//DTD HTML 3.2//EN">

Заголовок

<HEAD></HEAD>

Имя документа

<TITLE></TITLE>

Тело (содержимое страницы)

<BODY></BODY>

URL файла

<BASE HREF="URL">

Имя базового окна

<BASE TARGET=" *">

Метаинформация

<META>

Форматирование текста

Форматированый

<PRE></PRE>

Жирный текст

<B></B>

Курсив

<I></I>

Высота заголовка

<H?></H?>(от 1 до 6)

Размер шрифта

<FONT SIZE=?></FONT>(от 1 до 7)

Изменение размера шрифта

<FONT SIZE="+,-?"></FONT>

Цвет шрифта

<FONT COLOR="#цвет"></FONT>

Выбор шрифта

<FONT FACE="*"></FONT>

Базовый размер шрифта

<BASEFONT SIZE=?>(от 1 до 7)

Верхний индекс (пример 500)

<SUP></SUP> Запись 5<SUP>00</SUP>

Нижний индекс (пример H2SO4)

<SUB></SUB>

Выделение цитат курсивом

<CITE></CITE>

Наклонный текст (выделение)

<EM></EM>

Жирный текст (особо сильное выделение

<STRONG></STRONG>

Стиль печатной машинки (рекомендованный)

<KBD></KBD>

Печатная машинка (нерекомендованный)

<TT></TT>

Ширина

<PRE WIDTH=?></PRE>

Центрировать

<CENTER></CENTER>

Мигающий

<BLINK></BLINK>

Многоколоночный текст

<MULTICOL COLS=?></MULTICOL>

Пробел между колонками

<MULTICOL GUTTER=?></MULTICOL>

Ширина колонки

<MULTICOL WIDTH=?></MULTICOL>

Пустой блок

<SPACER>

Стили

<STYLE></STYLE>

Создает отступы с обеих сторон текста

<BLOCKGUOTE></BLOCKGUOTE>

 

Ссылки

Ссылка на другой сайт

<A HREF="имя"></A>

Ссылка на другую страницу

<A HREF="имя"></A>

На другое окно

<A HREF="имя" TARGET=" *| |_blank|_self|_parent|_top"> </A>

Определить закладку

<A NAME=" *"></A>

 

Графика

Вставка изображения

<IMG SRC="имя изображения">

Выравнивание по горизонтали

< img src="имя" align=top|bottom|middle|left|right>

Выравнивание по вертикали

<IMG SRC="имя" ALIGN=TEXTTOP|ABSMIDDLE| BASELINE ABSBOTTOM>

Текст при наведении на картинку

<IMG SRC="имя" ALT="текст">

Локальная карта

<IMG SRC="имя" USEMAP="URL">

Определение карты

<MAP NAME=" *"></MAP>

Области карты

<AREA SHAPE="RECT"COORDS=",,," HREF="URL"|NOHREF>

Размеры

<IMG SRC="имя" WIDTH=? HEIGHT=?>(в точках)

Рамка

<IMG SRC="имя" BORDER=?>(в точках)

Отступ

<IMG SRC="имя" HSPACE=? VSPACE=?>(в точках)

Замена в низком разрешении

<IMG SRC="имя" LOWSRC="URL">

Обновить

<META HTTP-EQUIV="Refresh"CONTENT="?; URL=URL">

Вставка объекта

<EMBED SRC="имя">

Размер объекта

<EMBED SRC="имя" WIDTH=? HEIGHT=?>

Указывает в каком окне открывать гиперссылку

<ATARGET="?">

 

Разделители

Параграф

<P></P>

Выравнивание

<P ALIGN=LEFT|CENTER|RIGHT></P>

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

<BR>

Убрать выравнивание

<BR CLEAR=LEFT|RIGHT|ALL>

Горизонтальный разделитель

<HR>

Выравнивание

<HR ALIGN=LEFT|RIGHT|CENTER>

Толщина

<HR SIZE=?>

Ширина

<HR WIDTH=?>

Ширина в процентах

<HR WIDTH="%">(в процентах)

Сплошная линия

<HR NOSHADE> (без эффекта)

Нет разбивки

<NOBR></NOBR>

Перенос

<WBR>

 

Фон и цвета

Фоновая картинка

<BODY BACKGROUND="URL">

Цвет фона

<BODY BGCOLOR="#цвет">(порядок: красный/ зеленый/ синий)

Цвет текста

<BODY TEXT="#цвет">

Цвет ссылки

<BODY LINK="#цвет">

Пройденная ссылка

<BODY VLINK="#цвет">

Активная ссылка

<BODY ALINK="#цвет">

 

Структура документа

Секция

<DIV></DIV>

Переменная

<VAR></VAR>

Адрес автора

<ADDRESS></ADDRESS>

Большой шрифт

<BIG></BIG>

Маленький шрифт

<SMALL></SMALL>

 

Специальные символы

Вид

Запись

Название

&lt;

стрелка влево;

&gt;

стрелка вправо;

&

&

Амперсанд

"

quot;

Кавычки

 

&nbsp;

Неразрывный пробел

§

&sect;

Параграф

©

&copy;

Знак copyright

°

&deg;

Градус

±

&plusmn;

Плюс минус

 

7. В ходе выполнения курсовой работы:

 

  • Создал шаблон сайта
  • На хостинге установил движок для сайта WordPress
  • Загрузил шаблон сайта
  • Привязал шаблон сайта к моему доменному имени

 

Скриншоты моего сайта

Боковая колонка Доменное имя Тема моей курсовой работы Футер Шапка сайта

На этом сайте я  помещу курсовую работу.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой:

Июнь 2021
Пн Вт Ср Чт Пт Сб Вс
« Ноя    
 123456
78910111213
14151617181920
21222324252627
282930