Редактируем странички сайта

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

Вы уже, видимо, пытались почитать о языках программирования, однако учить их - дело достаточно долгое. А сайт хочется преобразить сейчас. Здесь мы попытаемся дать несколько простых советов, как это сделать. Ну а когда вы достигнете желаемого результата, то наверняка заинтересуетесь теорией, да и изучать вам будет её проще.

Итак - входим в мастерскую и нажимаем кнопку справа "Управление файлами и HTML-редактор". Видимо, для начала вы захотите изменить свою главную страничку. Поэтому, напротив главной страницы (которая именуется index.html) нажимаем кнопочку "Свойства". Во вновь появившемся окне нажимаем "Текстовой редактор". С правой стороны в открывшемся окошке вы увидете свою страничку так, как её "читает компьютер". Именно здесь нам предстоит вносить свои изменения.

ГЛАВНОЕ ПРЕДУПРЕЖДЕНИЕ! После того, когда вы внесли какие-либо изменения в ваш текст через текстовой редактор, и нажали кнопочку "Сохранить" НИКОГДА БОЛЬШЕ НЕ РЕДАКТИРУЙТЕ ЭТУ СТРАНИЧКУ ЧЕРЕЗ РЕДАКТОР ПО ШАБЛОНУ! Дело в том, что все вашии изменения будут безвозвратно утрачены! Совет такой - для начала редактируйте в текстовом редакторе только главную страницу. А когда немного освоитесь - переходите к другим своим страничкам. В этом случае вы сможете редактировать главную - в текстовом редакторе, а остальные страницы некоторое время - по шаблону.

Итак, если мы посмотрим на нашу главную страницу в текстовом редакторе, то увидим, что открывается она значком <html>. Что это означает? То что наша страничка написана на HTML - Hyper Text Markup Language. Перевести это можно примерно так: Язык разметки гипертекста. Основой этого языка послужил английский язык, поэтому для тех, кто его знает, работать будет несколько проще.

Кстати говоря, страничка наша и закрывается значком </html>. Это означает, что язык, на котором написана страница заканчивается.
Такие значки называются "тэги", именно они управляют текстом внутри нашей страницы. Как вы поняли, тэги бывают открывающие - <> и закрывающие </>. Текстом, заключённым между двумя этими значками, можно управлять - менять цвет, размер шрифта, расположение его на странице и т.д.

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

Если мы внимательно посмотрим на нашу страничку, то увидим, что она состоит из двух больших частей (разделов)- "головы" (HEAD) и "тела" (BODY) нашего документа.

1 раздел - HEAD ("голова", заголовок страницы). Этот тег парный, то есть он открывается значком <HEAD> и закрывается значком </HEAD>.
Всё, что содержится внутри этих двух тегов - "голова" страницы. А что именно сюда входит? В основном вся служебная информация о нашем документе, информация для поисковых машин в интернете, а также заголовок (или название) окна страницы. Например: <TITLE>Мой сатик</TITLE>.

2 раздел - BODY - "тело" или основная часть документа. Он тоже парный. Практически весь наш текст будет расположен между тегами <BODY> и </BODY>.

Если мы с вами просто набъём текст между этими тегами, то он будет выглядеть как обычный машинописный текст на листе бумаги, причём без абзацев и переноса строк. Чтобы текст "структурировать" надо в нём расставить абзацы (парный тег) и символы переноса строк . Собственно, об этом мы уже с вами говорили.

Теперь поговорим о том, как изменить цвет текста. Цвет можно задать как для всего документа в целом, так и для отдельных его частей. Одновременно с цветом задаётся и размер шрифта.
Итак. Начинаем с заголовка:

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

Цвет можно задаать на английском, однако чаще всего пользуются таблицами цветов (их можно легко найти в интернете с помощью того же Яндекса, наппример, по адресу: http://www.artlebedev.ru/tools/colors/). Каждый цвет имеет шестизначный код и заключается в кавычки. Вот как будет выглядеть обозначение для красного полужирного шрифта (bold, italic) размером 18 пунктов
ВАШ ТЕКСТ

Если Вы хотите, чтобы ваш заголовок находился в центре страницы, то перед обозначением размера и цвета шрифта поставьте
<div align=center>, а если слева - <div align=left>

Все эти правила применяются не только при редактировании заголовков, но и всего текста документа.

Ссылка с главной на любую страницу вашего сайта выглядит так:
<a href="page.html">ВАШ ТЕКСТ на главной</a>
Вместо слова page вы должны вставить имя вашей странички (которая есть в мастерской). Цвет и размер шрифта задаёте сами.

Если Вы хотите сделать "Бегущую строку", которая очень "оживляет" сайт то вставьте следуйщий скрипт туда, где вы хотите эту строку увидеть:
<div align=center>

<marquee height="20" width="1000" bgcolor="#00008B">
ВАШ ТЕКСТ</marquee>

Ну а у как изменить цвет фона странички? Давайте найдём с вами вверху странички слова "цвет фона", сокращённо на английском он обозначается bgcolor. Итак, если мы хотим сделать цвет фона синим, вставляем тег
<bgcolor="#00008B">. Ну а себе вы подберите тот цвет фона, который вам больше нравится из таблицы цветов.

А если вы хотите иметь кнопочку на своём сайте, чтобы в любой момент можно было вернуться на этот сайтик, вставьте в любое место тела (body) документа скрипт нашего баннера.

Скрипт баннера "МОЙ САЙТИК"

<a href="http://www.moisitik.narod.ru/index.html">
<IMG src="http://www.moisitik.narod.ru/sss.jpg"
width=88 height=31 border=0
alt="МОЙ САЙТИК – Азбука для новичков интернета"></a>

Спасибо!

Итак, вы уже кое-чему научились в редактировании страницы, и можете переходить к разделам о музыке и изображении.