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

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

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

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

Информация во Всемирной паутине хранится в форме Web-сайтов.

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

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

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

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

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

Чтобы добраться до нужной информации расположенной на Вэб-сайте, мы, как правило, пользуемся мышью.

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

Обычно в качестве гиперссылок используют часть текста (слово или несколько слов) и графические изображения (рисунки или фотографии).

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

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

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

Вэб-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language).

Выделяют две основные группы методов разработки веб-сайтов: визуальные и ручные (программные).

Визуальные методы позволяют производить разработку веб-страниц с высокой степенью автоматизации и не требуют знание языка разметки HTML. Процесс создания очень нагляден, т.к. производится в таком режиме - от английского What You See Is What You Get, что означает «Что видишь, то и получишь».

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

Наиболее известными такими редакторами являются Microsoft FrontPage, Macromedia Dreamweaver.

Конечно, трудно создать хороший сайт, не зная основ языка разметки HTML.

Для создания веб-страниц ручными методами используют простейшие текстовые редакторы. В качестве такого редактора может служить стандартное приложение Блокнот. А просматривать результаты работы можно с помощью браузера.

Рассмотрим этапы создания вэб-сайта:

• определение тематики сайта, его целей и задач;

• разработка дизайна, проектирование структуры сайта, определение разделов и связей между страницами;

• подготовка материалов (текста и графики) для размещения на веб-страницах;

• конструирование страниц сайта, т.е. создание HTML-кода;

• протестировать, т.е. проверить правильность работы;

• размещение в сети Интернет.

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

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

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

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

Теги и составляют основу языка разметки гипертекста HTML. Тег всегда начинается со знака < «меньше» и заканчивается знаком > «больше». Теги набирают латинскими буквами. Заглавные и строчные буквы при написании тегов не различаются.

Существует два типа тегов - парные и непарные. Парные теги содержат открывающий и закрывающий тэги.

Открывающим тегом описывается команда и начинается её действие. Закрывающим тегом, который повторяет открывающий, но содержит / слэш перед обозначением, это действие прекращает.

Такая пара тегов называется контейнером.

Например, тег <b> задаёт жирное начертание. Размеченный текст:

Обратите внимание, этот тег парный.

А теперь рассмотрим структуру простейшего HTML-документа.

<html>

<head>

<title>текст</title>

</head>

<body>

</body>

</html>

HTML-документ начинается открывающимся тегом html, а заканчивается - закрывающимся тегом html. Без этих тегов браузер не сможет определить формат документа и правильно его интерпретировать.

Внутри этих тегов расположены два контейнера. В контейнере head размещается неотображаемая на странице служебная информация, а так же название страницы, которое отображается в заголовке окна браузера. Название страницы помещается в контейнер <title>.

Вся отображаемая браузером информация: тексты, рисунки, ссылки, звуки, видеофрагменты - помещается в контейнер <body>.

Созданная Веб-страница сохраняется в виде файла с разрешением «*.htm» или «*.html»

Например: «uroki.htm», «planet.html».

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

Источники: https://videouroki.net/

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

1. Структура HTML - документа

<html>….</html> — содержимое HTML – документа

<head>…..</head> — заголовок HTML – документа

<body>…..</body> — тело HTML – документа

<title>….</title> — титульная строка

<!-- ……--> — комментарий

2. Оформление текста

<p>…</p> — абзац

<p align=left>…</p> — выравнивание абзаца по левому краю

<p align=center>…</p> — выравнивание абзаца по центру

<p align=right>…</p> — выравнивание абзаца по правому краю

<p align=justify>…</p> — выравнивание абзаца по ширине

<p> — разрыв строки с межабзацным отступом

<br> — разрыв строки без отступа

<hr> — горизонтальная линия разделитель, имеет размер (size) и цвет (color)

<h[1…6]>…..</h[1…6]> — заголовки и подзаголовки

<h[1…6] align=left [center, right]>…..</h[1…6]> — выравнивание заголовков и подзаголовков

<font>…</font> — вид шрифта

<font face=”Comic Sans MS”>…</font> — вид(гарнитура) шрифта, т.е. название шрифта

<font color=red>…</font> — цвет текста. Параметрами может быть название цвета или его 16-ричный код

<font size=8>…</font> — размер символов, абсолютное (от 1 до 7) или относительное (+/-) числовое значение в условных единицах.

3. Физическое и логическое оформление текста

<em>…</em> — шрифтовое выделение

<strong>…</strong> — особое шрифтовое выделение

<cite>…</cite> — цитата

<code>….</code> — листинг, цифровой код и пр.

<dfn>…</dfn> — оформление

<kbd>…</kbd> — ввод с клавиатуры

<samp>…</samp> — пример

<var>…</var> — имя переменной

<strike>…</strike> — удаленный текст

<tt>…</tt> — пишущая машинка

<adress>…</adress> — адрес

<b>…</b> — полужирный шрифт

<i>…</i> — курсивный шрифт

<b><i> …</b></i> — полужирный курсив

<u>…</u> — подчеркнутый

<s> …. </s> — зачеркнутый

_… — нижний индекс

^… — верхний индекс

<big>…</big> — крупнее на одну условную единицу

<small> …</small> — мельче на одну условную единицу

<pre>…</pre> — сохранение форматирование

<xmp>…</xmp> — сохранение исходного текста (примера)

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

&copy; — знак копирайт ©

&lt; — знак меньше (<)

&gt; — знак больше (>)

&reg; — знак зарегистрированной торговой марки ®

Важную роль в оформлении веб-страниц играют графические объекты: фотографии, картинки. В этом разделе дается вы познакомитесь, как использовать рисунок и гиперссылки для оформления web-страницы.

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

Для размещения на веб-страницах наиболее предпочтительны графические форматы GIF, JPG и PNG. Если рисунок сохранён в другом формате, например, .BMP, то его необходимо заранее преобразовать в один из этих форматов. Так же лучше, если изображения имеют небольшие размеры, это позволяет ускорить процесс загрузки. Все изображения, которые мы видим на веб-странице, хранятся в отдельных файлах, а в HTML-коде имеется лишь ссылка на них.

Для отображения рисунков предназначен непарных тег <img> с атрибутом SRC, который указывает на место хранения файла.

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

Для встраивания изображения в документ используется тег <IMG>, имеющий обязательный параметр src, который определяет адрес файла с картинкой и alt, определяющий альтернативный текст.

<IMG SRC=”dog.jpg”>

1. Атрибут (обязательный): Src= – указывает адрес графического файла с расширением (поддерживаются *.jpg, *.gif, *.png).

2. Атрибут: Width=”” - определяет ширину изображения в пикселях.

3. Атрибут: Height=”” - определяет высоту изображения в пикселях.

4. Атрибут: Hspace=”” - определяет отступ картинки (в пикселах) по горизонтали от других объектов документа.

5. Атрибут: Vspace=”” - определяет отступ картинки (в пикселах) по вертикали от других объектов документа.

6. Атрибут: Align=”” - указывает способ выравнивания изображения в документе. Может принимать следующие значения:

Left - выравнивает изображение по левому краю документа.

Right - выравнивает изображение по правому краю документа.

Top и texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

7. Атрибут: Alt=”” – альтернативный текст (это сообщение, которое выводится, когда курсор мыши находится на рисунке)

8. Атрибут: Border=”” - определяет ширину рамки вокруг изображения в пикселах.

Важно! Чтобы картинка появилась на вашей странице, правильно указывайте путь к ней, а ещё лучше – размещайте картинки в той же папке, что и ваша страничка.

<img src=”foto/dog.jpg” height=”100” width=”100” alt=”моя картинка”>,

картинка имеет имя dog, расширение картинки .jpg, картинка расположена в папке foto. Высота и ширина фотографии 100 пикселей, если картинку не загрузится, то появится надпись "Моя картинка"

Гиперссылки

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

Гиперссылка создаётся с помощью парного тега <A> и его атрибута HREF, значение которого является адрес загружаемой веб-страницы. Т.к. тег парный, после указателя ссылки он закрывается. Указателем ссылки может быть текст или графическое изображение. Гиперссылка в виде теста обычно выделена синим цветом и подчёркиванием. При подведении мыши к гиперссылке её курсор превращается в руку. Щелчок мышью по гиперссылке вызывает переход на веб-страницу, указанную в этой гиперссылке.

Гиперссылки разделяются на внутренние и внешние.

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

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

Гиперссылка может указывать не только на веб-страницу, но и на любой размещённый в сети информационный ресурс: рисунок, презентаций, аудио-видео-фрагментов.

Чтобы создать гиперссылку, активизация которой будет приводить к просмотру изображения, например под именем vaza.jpg в браузере, необходимо записать следующее:

<a href ="vaza.jpg">Изображение </a>