Создание сайта

Сайтостроение

Новости сайтостроения

Полезные ссылки

Информация

Медицина

Музыка и Видео

Фотошоп

Интернет-магазин

Программы для создания видео

Статистика посещений сайта

Видео уроки

Календарь

Часы

Новости саЙта

Фильм о городе Никольское 300 лет 4 агуста 2012 г.

Шахматы

Любимые песни

Давай поговорим И.Круг

Белый орел - Одинокая волчица

А.Ведищева - Лесной олень

Чунга Чанга

Вместе весело шагать

Прогноз погоды

Никольское

Серпейск

Бердянск

Уроки

Здравствуйте уважаемый пользователь!

Сейчас Вы находитесь на сайте:http://nikolskoe-2012-net.narod.ru

Что полезного для себя вы можете найти на этом сайте?

Здесь вы найдете информацию по созданию простой HTML страницы, информацию по cозданию простого html сайта, вставку бегущей строки, вставку фонового звука, вставку видео на свой сайт и многое другое.

Слайдер

Создание простой веб-страницы

Для того, чтобы создать свою первую html страницу откройте программу блокнот и сохраните страничку под именем (например: index) с расширением файла .html. Имя index.html - это всегда главная страница и она будет открываться в браузере первой, если есть другие страницы, например page.html и т.д,то на эти страницы будут ссылки с главной страницы, таким образом будет создан сайт. Поэтому вашу главную страницу всегда называйте index.html. Важно: тип файла нужно выбрать "все файлы", а после имени дописать ".html" или ".htm", но лучше придерживаться первого варианта. Должно получиться следующие имя файла: "index.html". Этот документ можно открыть в браузере. Правда это будет чистая страница. Впринципе это можно назвать html документом или веб - страницей, однако в нем ничего нету, поэтому переходим к шагу два.

2) Отрываем созданный файл через программу блокнот и вписываем в него теги:
<html>
<head>
<title>Главная страница </title>
</head>
<body>
Заголовок текста создаем с помощью тега <h1>У меня получилось создать мою первую страницу! </h1>
В теге <body> вставляем текст с помощью тега <p>Текст (контент) </p>.
</body>
</html>

После этого сохраните этот файл. Теперь можете отрыть index.html через любой браузер и Вы увидите надпись "У меня получилось сделать мою первую страницу!", а в загаловке будет написано "Название страницы". Такой документ можно уже выкладывать в интернет.Например на бесплатном хостинге http://www.ucoz.ru/. или http://www.hostinger.ru/.Теперь вкратце расскажу о структуре любого html-документа.

Структура любого html-документа
В начале документа необходимо вставить эту строку:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">.Эта строка будет говорить браузеру, что мы создали документ, который будет соотвествовать стандарту HTML 4.01.

1. Любой html документ должен иметь тэги (это команды языка HTML):
<html>...</html>

<html> - открывающий тэг документа, </html> - закрывающий тэг документа Вообще в html практически все теги состоят из двух элементов: открывающий <ТЕГ> и закрывающий </ТЕГ>.(закрывающий тег косая четра-слэш /).

Тэги можно писать с большой буквы, а можно и с маленькой, поскольку браузеры не воспринимают регистры. То есть, если Вы напишите так:
<HtMl>...</hTMl>

То это будет равносильно тому, что было написано чуть выше.

2. Любой html документ можно разделить на две части:
- заголовок страницы (невидимая для пользователя часть, см. заголовочные тэги):
<head>...заголовочные тэги...</head>

Между <head> и </head> указываются: мета-теги (meta):

Заголовок страницы < title>Заголовок страницы</title>
После тега </head> должно идти тело страницы - тело страницы (видимая для пользователя часть)<body>
Здесь располагается контент и все остальное.

Контент (англ. contents — содержание) - под "контентом" в широком смысле понимают собственно наполнение сайта.В более узком смысле слова 'контент сайта' (site content) - это материалы, размещенные на нем: в основном тексты, а также картинки и музыка, видео.
</body>

<body> - открывающий тег тела страницы. Сразу после него начинается то, что видит пользователь: дизайн, контент. Тело и собственно весь html-документ должны заканчиваться последовательностью: </body> </html>

Вот шаблон html документа.

Поэтому еще раз напоминаю,откройте программу блокнот (меню "Пуск"-все программы-стандартные-блокнот.) В програме блокнот откроется чистая страница,сначала сохраните документ ("Сохранить как") под именем index.html

тип файла-все документы.Скопируйте содержимое этого блока в ваш вновь созданный документ index.html команда Сохранить. Теперь можно открыть в браузере Ваш вновь созданный документ.

Вот что получилось!

Первая веб страница

Скопируйте содержимое этого блока

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Первая веб страница</title>
</head>

<body>
<h1 align="center"><font color="#FF0000">Моя первая веб-страница </font></h1>
<h2 align="center"><font color="#009900">Сайт о моем родном городе</font></h2>
<h3 align="center"><font color="#0000FF">История города Никольское</font> </h3>
<p align="center"><strong><font color="red">Село Никольское (позже поселок, а теперь город), возникло на землях, отвоеванных Петром I у шведов в начале XVIII столетия.</font></strong><br>
<font color="#0000FF">После изгнания шведов сюда были переселены русские люди из внутренних губерний России и преимущественно Московской.(Указ Петра I от 1710 года).<br>
Уже в 1712 году они имели свою оседлость. Они-то и привезли с собой в Никольское икону Николая Чудотворца, давшую название селу - Никольское.</font>
<p><font color="#009900">Ссылка на другой сайт</font>
<br>
<a href="web.html">Создание сйта</a></p>

<p><font color="#0000FF">Вставка избражения на сайт
</font></p>
<p><img src="img/nikolskoe.jpg" alt="Никольское" /></p>
<p>
<font color="#0000FF">Фото Никольское</font>
</p>
</body>
</html>

Для создания профессионального сайта смотри видео уроки
Евгений Попов, Сергей Сукманюк, Михаил Русаков, Алексей Захаренко.

Любой текст мы всегда заключаем в открывающий и закрывающий тег <p>текст</p>.При написании заголовка мы текст размещаем в теге <h1...h6>h1...h6 это размер текста</h1..h6>Если заголоовк необходимо разместить по центру, то тегу <h1> присваиваем атрибут<h1 align="center">(<h1 align="center">Заголовок</h1>).Чтобы изменить цвет текста,необходимо для тега <p> прописать атрибут <font color="red"></font (<p align="center">< font color="red"> текст красного цвета</font></p>) или в режиме RGB (<p align="center">< font color="#FF0000"> текст красного цвета</font></p>).

В этом документе еще используется тег переноса строки <br>,т.е там где стоит это тег, строка прерывется,и написание текста начинается с новой строки как при нажатии клавиши Enter.Для размещения текста по центру необходимо для тега <p>прописпть атрибут align="center" (<p align="center">Для выделения текста жирным шрифтом необходимо текст заключить в тег <strong>текст </strong>.

Можно отдельно подготовить картинку с названием на английском языке (foto)с расширением .jpg (foto.jpg) и поместить эту картинку в отделеную папку с названием img (фото) .Прописать путь к этой картинке.

Например: <img src="img/foto.jpg">Если фотография лежит в тойже папке, где распологается индексный файл index.html то, просто указываем <img src ="foto.jpg">.Кроме того необходимо указать размеры фотографии width="150" height="300".Чтобы расположить фотографию по правому краю необходимо указать атрибут aling="right". но чтобы текст отступал от фотографии необходимо указать еще два атрибута hspace="5" vspace="5">.Это отступы текста сверху,справа,снизу,слева.Полное написание тега бедет выглядеть так: <img src="foto.jpg" width="150" height="300" aling="center" hspace="5" vspace="5" alt="фото" title="Это фотография">. Ссылка на другой сайт создается с помощью тега <a href="page.html">Ссылка</a>.Чтобы создавать профессиональный сайт нужно хорошо знать язык HTML, каскадные таблицы стилей CSS, освоить програму Dremweawer, освоить табличную и блочную верстку, знать программу Photoshop.
Для создания сайта можно использовать специальную программу Dreamweaver , визуальный редактор NVU (скачать), Notepad++. Кроме того, необходимо проверить сайт на наличие ошибок (валидность), вкладка Direct Input в поле поместить содержимое сайта, за тем посмотреть сайт в различных браузерах Opera, Mozilla, Explorer, Chrome (кроссбраузерность), проверить сайт под разными разрешениями (установить в браузер Mozilla Firefox дополнения Firebug, Web Developer (для определения размера сайта и проверки сайта под разными разрешениями). Установить тестовый сервер Denwer. Кроме того, сайт необходимо зарегестрировать в поисковых системах Yandex, Google, создать файлы robots.txt и карту сайта sitemap.txt, для индексации сайта роботами поисковых систем.

Вставка видео на сайт с помощью программы Adobe Dreamweaver CS3

С помощью программы Corel VideoStudio PRO X3 можно переконвертировать файл.avi в формат .flv (флэш видео).

Видеоурок по встаке видео на html страницу

Создание и вставка бегущей сторки в HTML документ

Бегущую строку можно применять, там где мало места. Например на главной странице сайта, для анонсирования новостей или ещё чего подобного.Бегущая строка создаётся с помощью тэгов <marquee> и </marquee>.

<marquee>Здесь текст бегущей строки</marquee>

Вот пример бегущей строки с использованием некоторых атрибутов:

Разместить в теге <body></body>

Создание бегущей строки в HTML документе

Скопируйте пример бегущей строки и вставьте на HTML страницу

<marquee behavior="scroll" height="25" width="100%" bgcolor="#FF2300"
loop="3"><b><i><font face="Arial" size="3" color="#FFFFFF">Создание бегущей строки в HTML документе <br>
</font></i></b> </marquee>

behavior="scroll" – Прокрутка текста (В большинстве случаев можно не указывать, т.к. текст по умолчанию всегда прокручивается).

height="17" – высота бегущей строки. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).

width="200" – ширина бегущей строки в пикселях.

bgcolor="#E9E9D1" – Задаёт фоновый цвет бегущей строки. (Вместо E9E9D1 подставляете свой цвет).

loop="3" – задаёт число проходов бегущей строки. (Если указать "2" то два раза текст проедет и больше показываться не будет, только если ещё раз обновить страницу).

scrollamount="1" – скорость движения строки. (Рекомендуется ставить скорость "1", в этом случае строка выглядит более удобочитаемо и не дёргается)
font face="Arial" - шрифт текста бегущей строки
size="2" - увелчивает размер текста бегущей строки
color="#CC3300" -цвет текста бегущей строки

Изменение текста бегущей строки

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

<b><i><font face="Arial" size="2" color="#CC3300">Бегущая строка</font></i></b></marquee>

Пример разных направлений движения:

direction="right" – движение текста вправо.
direction="up" – движение текста в верх.
direction="down" – движение текста вниз.

При создании бегущей строки движущейся влево, необязательно писать атрибут direction="left" т.к. по умолчанию она всегда движется влево и по этому чтобы место не занимать можно не писать.

loop="2" – задаёт число проходов бегущей строки.

hspace="70" - Этот атрибут задает смещение в пикселах в право бегущей строки.

vspace="70" - Этот атрибут задает пустое пространство выше и ниже бегущей строки.

Атрибут behavior позволяет управлять свойствами движения текста, принимая разные значения:

behavior="slide" – Прокрутка текста с остановкой.

behavior="alternate" – Движение от края к краю.

Вставка фоновой музыки на HTML страницу

Для вставки фонового звука на HTML страницу используется следующая конструкция:

Это аудиоплеер.

autostart="false"- звук включает пользователь

autostart="true" - музка проигрывается сразу при открытии странички

Как вставить звук на HTML страничку

Уроки от дикарки

Никольское видео

Вставка видео осуществляется с помощью программы Dreamweaver. Меню - Вставить - Медиа - Flash видео - Обзор - выбрать flv - файл - выбрать дизайн плеера (skin), указать ширину (width) и высоту (height), указать автовоспроизведение (auto play) и нажать ОК.

С помощью программы Corel VideoStudio PRO X3
можно переконвертировать файл.avi в формат .flv (флэш видео для сайта), а
так же создавать профессиональное видео.

Вальс города Никольское И.Э. Павлов

Включи звук!