Создание сайта с помощью кода HTML и CSS

· Html не является языком программирования, он предназначен для разметки текстовых документов (т.е. для форматирования тескста). То, как будет выглядеть ваш текст, определяют метки (tags или тэг).

· Интерактивная мультимедийная гипертекстовая среда World Wide Web (WWW) появилась в современном виде благодаря наличию нескольких факторов. Первый из нихплатформенно - независимый способ распространения информации.

· WWW образует технологию обмена гипертекстовыми документами. В ее основу положено использование идеи гипертекста, включающего в себя разнотипные данные, объединенные механизмом гиперссылок, позволяющим интегрировать документы, размещенные на разных компьютерах в разных сетях.

· Проект WWW появился в начале 90-х годов и принадлежит Тиму Бернерс Ли, сотруднику Европейского института физики частиц (CERN).

· Документы WWW называют также Web-страницами, Web-документами, HTML-файлами. Эти документы имеют стандартное расширение html или htm.

· Основная особенность гипертекстовых документов – наличие гиперссылок, которые позволяют преодолеть ограничения на размер документа (hyper - сверх). Таким образом, WWW можно представить в виде гигантской библиотеки гипертекстовых, интерактивных, мультимедийных документов, связанных гиперссылками.

Представление будущего сайта.

· Чтобы создать сайт нужно сначало определить его назначение. Будет ли это личнаястраница — где вы будете выставлять на обозрение свою личную жизнь и делиться опытом прожитых дней, либо информационого характера, представлять ресурс для скачивания или социальную сеть. Дальше нужно представить его, предать ему индивидуальности, расчитать что и где будет расположено. Все это лучше представить на бумаге в виде макета и при работе держаться его.

· Создав макет обдумайте где у вас будут: банеры (реклама других сайтов с специальной направленостью), главное меню или навигатор по вашей странице, новости, подтемы, опросы и т.д.

Создание стиля(темы, «шкурки») сайта.

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

Определение CSS и HTML.

Синтаксис языка HTML (Hyper Text Markup Language) достаточно прост. Кроме обычного текста HTML- файл содержит только один тип управляющих конструкций, так называемые дескрипторы (или теги). Дескрипторы разделяют исходный неформатированный текст на элементы и создают новые элементы, например, графические вставки или Java –аплеты.

Элементы бывают двух видов – парные, охватывающие какой-то фрагмент текста или (и) другие элементы и непарные. Например, парный элемент < h1> используется для создания заголовка первого уровня: <h1>текст заголовка</h1>, непарный элемент < img> используется для размещения на странице графического изображения: <img src="URL">.

· Технология каскадных таблиц стилей (Cascading Style Sheets, CSS) была разработана в качестве дополнения к HTML с целью определения внешнего вида документов и сохранения за HTML только функции структурной разметки документов. Система CSS независима от HTML, имеет иной синтаксис и позволяет задавать параметры графического (также как и текстового, и звукового) представления дескрипторов HTML.

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

Ход работы.

1) Необходим текстовый редактор, подойдет самый простой – блокнот. Он есть на каждом компьютере. Чтобы воспользоваться блокнотом, выполните следующие действия: нажмите правую кнопку мыши, затем выберите пункт СОЗДАТЬ, далее ТЕКСТОВЫЙ ДОКУМЕНТ. Теперь зайдите в созданный файл, использую двойной клик мыши Или второй вариант. Кнопка ПУСК - > пункт программы - > стандартные - > блокнот. Теперь, когда вы находитесь в режиме блокнота, можно продолжить изучать инструкцию создания сайта.

2) В блокнот вписываем следующий код:

<html> (указывает, что начинается html документ)

<head> (Это голова сайта, шапка.)

<title>SevVPUSS and IT</title> (аголовок страницы, название.)

</head>

<body> Содержимое моего сайта.</body> (Между этими тегами пишется все основное содержимое сайта.)

</html>

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

3) В верхнем меню блокнота выбирает пункт ФАЙЛ - > сохранить как… В появившемся окне выбирает место на вашем компьютере, куда будет сохранен документ. Рекомендую заранее создать новую папку на диске С и назвать ее, например, web. После того, как вы выбрали место для сохранения, напишите в строке «Имя файла» - название вашей первой страницы. Например, Index.html. Заметьте, что наличие.html – обязательно, это расширение файла, которое показывает, что документ относится к HTML.

4) Важное отступление. Не используйте в названии файла русские и заглавные буквы, а используйте только маленькие английские буквы, цифры, тире. Теперь жмем кнопку «сохранить». Стоит сделать маленькую оговорку. Наш документ может сохраниться не как index.html, а как index.html.txt. Если это произошло, переименовать файл в index.html.

5) Теперь идем в ту директорию, куда был сохранен файл, и запускаем его, использую двойное нажатие левой кнопки мыши. Документ откроется в браузере и будет отображать содержимое документа index.html. Пока на сайте будет «Содержимое моего сайта.» всех других элементов видно не будет.

6) Переходим к нашему открытому блокноту и в теге <head> прописываем следущее:

<link rel="stylesheet"(обосновывает документ как привязаный) type="text/css"(обосновывает документ как элементы текста и стиля) href="style\style.css"(ссылка на системный фаил стиля)>

<a id="Zagolovok"><img src="img\Электронный методический кабинет СевВПУССиИТ.jpg"><a>(вставка рисунка в заглавии)

7) После ранее написаного создаем каталог в корне где наш сайт ->«style» -> открываем каталог «style» и создаем блокнот, открываем блокнот.

8) В блокноте вводим следуещее:

body {

background-color: #FFCC66;

background-image: url("план.jpg");

background-repeat: no-repeat;

background-attachment: fixed;

} в этом теге задаем общие параметры нашей страницы такие как: цвет фона, рисунок фона, повторение рисунка, закрепление рисунка заднего плана.

Соханяем документ: Фаил → сохранить как. Задаем имя документа как «style.css»

9) Переходим к браузеру где ранее мы открыли наш сайт. Нажимаем F5 и смотрим изменения. Должен появиться фон, рисунок фона.

10) Возвращаемся в текстовый фаил «style.css» и вписываем код после параметров body:

#d {

color: white;

font-size: 12pt;

font-family: arial, sans-serif;

margin-top: 0px;

margin-right: 213px;

margin-bottom: 0px;

margin-left: 250px;

text-align: center;

text-color: #FFCC66;

} эта команда «#d» обозначает индификатор - > который мы задаем в index.html.

color: white; обозначает цвет текста, в данном случае белый.

font-size: 12pt; размер шрифта в пунктах.

font-family: arial, sans-serif; стиль шрифта, если программное обеспечение не подеривает первый стиль, то будет задействован второй.

margin-top: 0px; размер бокса в пиксилях (вверх)

margin-right: 213px; размер бокса в пиксилях (правый)

margin-bottom: 0px; размер бокса в пиксилях (нижний)

margin-left: 250px; размер бокса в пиксилях (левый)

text-align: center; выравнивание текста. В данном случае центр, относительно центра бокса.

text-color: #FFCC66; цвет текста (белый)

11) Далее вводим другие индификаторы но с привязкой:

#raz1 {

position:absolute;

top: 216px;

left: 1062px;

}

position:absolute; команда позиции обьекта (абсолютная)

top: 216px; позиция координат в пиксилях с сверху

left: 1062px; позиция координат в пиксилях с сверху

12) Сохраняем документ: Фаил — Сохранить.

13) Переходим к index.html, вводим:

<body>

<a id="Gerb" href="http://sevvpussit.webhop.org/">

<img src="img\Герб.jpg"> </a>

<p id="raztext">Новости</p>

<div id="d">

<p>

основной текст который будет отображатся в центре под заголовком на сайте.

</p>

</div>

<a id="raz1" href="index.html"><img src="img\img Raz\Новости.jpg"></a>

<a id="raz2" href="index2.html"><img src="img\img Raz\информация.jpg"></a>

<a id="Gerb" href="URL"> ссылка на ресурс в сети с индификатором.

<img src="img\Герб.jpg"> путь к рисунку от корневого каталога где index.html.

<p id="raztext">Новости</p> заголовок с индификатором.

<div id="d"> индификатор div

<p>

основной текст который будет отображатся в центре под заголовком на сайте.

</p>

</div> совокупность этих элементов есть основной текст.

Вывод:

Тоесть с помощью «style.css» и индификаторов, мы задаем параметры на все страницы участвующие в нашем сайте. Таким образом мы меняем параметры не на одной странице сайта — а сразу на все с помощью применения индификаторов, что экономит огромное количество времени при изменении или модернизации стиля сайта более 1 страницы.

Техника безопасности.

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

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

Строго запрещается:

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

· Нарушать порядок включения и выключения устройств компьютера;

· Класть на аппаратуру посторонние предметы;

· Работать на компьютере с влажными руками или во влажной одежде.

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

· Работа на компьютере требует постоянного внимания и самоконтроля своих действий. Поэтому не рекомендуется работать на компьютере при плохом освещении и большом шуме в помещении.

· Во время работы за компьютером необходимо:

· Строго придерживаться положений, изложенных в инструкциипо эксплуатации компьютера;

· Внимательно наблюдать за исправностью компьютера;

· Не загрязнять клавиатуру;

· Избегать ударов и изгибание дискет;

· Не касаться руками окна считывания информации на дискете;

· Не вставлять и не вынимать дискету из дисковода во время обращения системы к дисководу;

· Не выключать компьютер, если работа текущей программы не завершена;

· Не выключать компьютер до тех пор, пока Вы не убедились, что результаты работы программы сохранены на магнитном диске

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

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