Свой первый сайт вы сделаете всего лишь за 5 минут !

Итак. Сначала нам нужен простейший текстовый редактор, например Блокнот или WordPad (не путать с Microsoft Word!).

Для того чтобы запустить Блокнот, жмем кнопку Пуск -> Все программы -> Стандартные -> Блокнот

или Пуск -> Все программы -> Стандартные -> WordPad

Теперь выделите левой кнопкой мышки код, написанный ниже голубым цветом и скопируйте его в буфер обмена (через правую кнопку мышки, или нажав Ctrl и кнопку C, или через меню вашего браузера: Правка -> Копировать).

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

Затем перейдите в Блокнот и вставьте из буфера скопированный код (через правую кнопку мышки, или нажав Ctrl и V, или выбрав в меню Блокнота пункт Правка -> Вставить).

Теперь выбираем в меню Блокнота : Файл - > Сохранить как ...

Выбираем место на диске для сохранения файла, создав, например, для нашего обучения папку site на диске D.
Сохранять файл page.html в "Мои документы" или "Рабочий стол" не надо! Иначе рабочий стол превратится в помойку.
Затем вводим имя файла, под которым мы сохраним нашу страничку. Вводим, например, page.html, в типе файла устанавливаем (если возможно) Все файлы (*.*) , кодировку установить ANSI и жмем кнопку "Сохранить"

Тут такой нюанс, если блокнот сохранил ваш файл как page.html.txt (если нельзя было выбрать опцию тип файла "Все файлы (*.*) - то переименуйте его в page.html

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

Теперь запустите файл page.html, нажав быстро мышкой по файлу 2 раза.

Возможные проблемы:

Если у вас не запускается созданный файл в виде интернет-страницы и вместо интернет-страницы вы видите набранный вами код, то скорей всего файл сохранился как page.html.txt 

Если вдруг у вас на экране "кракозябры" -значит надо установить в браузере кодировку страницы Cyrillic Win-1251,

Если у вас Internet Explorer, то сменить кодировку можно через меню Вид - Кодировка - Кириллица (Windows).

 

Поздравляю ! Вы только что сделали свою первую интернет страницу !

Разве было сложно ? Думаю что нет и можно продолжить.

Как видите - создание интернет-страниц не такое уж непосильное дело. Это ДОСТУПНО КАЖДОМУ.

Теперь разберем подробней что есть что и для чего нужно.

Создание страниц производится с помощью языка гипертекстовой разметки HTML (Hyper Text Marker Language).

Команды, которые пишутся между скобками < > называются тегами.

Теги бывают парные и не парные. Парные теги например и Один тег является открывающим , а другой тег является закрывающим . Как видите закрывающий отличается от открывающего - знаком "/". Какие теги парные, а какие нет следует запоминать.

Пробелы в тегах после < и перед > ставить не надо! Это ошибка! Т.е.

- правильно

< body > < /head > - не правильно.

Теперь о тегах которые мы употребили в нашей страничке.

тег говорит компьютеру, что начитается html-страница. Тег говорит компьютеру что html-страница закончилась. Таким образом тег будет всегда первым тегом на странице, а тег самым последним. ! Запомните это. Все остальное пишется между этими тегами.

....

Далее страница состоит подобно человеку. Имеет голову и тело .

 

 

т.е. голова начинается с тега , а заканчивается тегом
А тело начинается с тега , а заканчивается тегом

(Эта таттушка в виде html-тегов позволит легко вам запомнить этот момент )

Между тегами и вставляются теги . ! Запомните это.

Между тегами пишется название страницы. Текст написанный между этими тегами будет отображаться в названии окна вашего браузера.

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

 

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

 А теперь имея начальные представления о языке HTML, можно двинуться дальше.

Часть 2.

Раскрашиваем страницу

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

Этим мы сейчас и займемся.

 

 

Наш исходный код на данный момент, после прошлого урока такой :

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

- Изменение цвета фона страницы.

Добавьте в тег следующий параметр тега bgcolor="#00CCFF", чтобы в итоге получилось так

bgcolor="#00CCFF">

Внимание! наиболее частая проблема в этом уроке. 00 это цифры ноль, а не буквы ОО.
Также, нельзя писать слитно без пробела .
Кавычки следует писать именно такие " , нажимая 2 и удерживая при этом нажатым SHIFT. Некоторые пишут две вот таких кавычки ` или две вот таких ' , получающиеся при нажатии буквы э в англоязычной раскладке клавиатуры. Это неправильно.
Будьте внимательны!

Сохраните вашу страницу (Файл->Сохранить) и откройте вашу страницу (или нажмите обновить если вы не закрывали страницу).
Должно получиться так.

Для создания цветов на странице используется RGB-модель. Т.е. любой цвет "составляется" из 3 основных цветов - Red Green Blue.

запись из нашего примера #00CCFF расшифровывается так : 00 частей красного, СС частей зеленого, FF частей голубого.
каждый из знаков может быть от 0 до 9, или буквы от А до F. Таким образом вы можете синтезировать любой цвет.

Вот некоторые цвета и их код

	FF0000
	00FF00
	0000FF
	FFFF00
	000000
	FFFFFF
	999999
	009999
	FFFFCC
	CCFFFF

Некоторые стандартные цвета можно указывать соотвествующими английскими словами. Например, написав bgcolor="blue" , или red (красный), green(зеленый), black (черный), white (белый) и т.д. Но как вы понимаете, указание цветов в цифро-буквенном формате позволяет использовать большую палитру цветов.

 

- изменение цвета текста

Для того чтобы изменить цвет текста на всей странице, или иными словами назначить цвет текста по умолчанию, надо в тег добавить еще один параметр. Добавьте text="#FFFF00"

итого у нас тег будет такой :

text="#FFFF00">

Опять же будьте внимательны, отделяя параметры пробелами.

-правильно
- не правильно

Сохраните файл и посмотрите что получилось. Должно получиться ТАК.

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

Добавьте на страницу следующее

Я студент ММУ № 30! 

Код вашей странице теперь будет такой :

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

 Я студент ММУ № 30! 

 тег
 как я писал ранее, служит для принудительного переноса текста на следующую строку.

Часть 3

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

и

Т.е. на примере нашей предыдущей страницы, для выравнивания всего содержимого сайта по центру видоизменяем код страницы так :

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

Я студент ММУ № 30! 

Часть 4

Сначала вам нужно сохранить эту картинку у себя на компьютере. Для этого наведите курсор мышки на картинку и нажмите правую кнопку мышки. Выберите "Сохранить рисунок как..." Укажите место для сохранения картинки (Как я рекомендовал ранее - сделайте отдельную папку site на диске С например и туда сохраняйте все файлы уроков.)

Сохраните картинку там-же, где находится страничка, которую мы делаем - page.html.

Имя файла картинки оставьте тоже самое 1.jpg
Опять же будете внимательны! Имя файла не 1.ipg, не 1.jpq, а 1.jpg

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

В нашем случае для вставки картинки 1.jpg вставляем в код страницы, в то место куда мы хотим вставить картинку, следующий код :

или более грамотно писать вот так  , хотя код выше тоже будет работать. Через параметр src указывается имя файла-картинки.
src от английского слова source - ресурс, источник
img src= можно расшифровать как изображение источник/название файла =

 Таким образом код нашей страницы теперь будет выглядеть вот так

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

Я студент ММУ № 30! 

теги
вставлены чтобы расположить картинку на несколько строк ниже текста.

Желательно в параметрах картинки указать ее размеры. Для этого используется параметр width (ширина картинки) и height (высота картинки).

(также будьте внимательны в написании. Не with, не witdh, не heihgt)

Т.е. например вот так :

width="258" height="146" >

размеры картинки указываются в пикселях.

Если вы хотите, чтобы при наведении мышки на картинку отображался какой-то текст, то это делается с помощью параметра alt

например вот так :

 alt="Знание сила" >

Этот текст также будет виден, если у вас выключено отображение графики в браузере (для экономии трафика например). Но этот параметр работает не во всех браузерах. В Internet Explorer работает.

аналог этой команды - параметр title=

внесите изменения в код и посмотрите что получится.

Таким образом код нашей страницы будет такой:

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

Я студент ММУ № 30! 

 

Если у вас вместо картинки показывается "крестик" или картинки не видно ,

то значит вы допустили одну из распространенных ошибок:

- сохранили файл не в той же папке, где находится html-файл.
- сохранили файл под другим именем, например не верно указали расширение файла. Должно быть jpg
- возможно файл сохранился как 1.jpg.jpg - допустили ошибку в параметре, написав например scr= вместо src=
- не верно указали имя файла или расширение после src=

Часть 5

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

Для того чтобы сделать текст жирными или курсивом используются парные теги

и для того чтобы сделать текст жирным. b- от слова bold, т.е. жирный

и для того чтобы сделать текст курсивом. i- от слова italic, т.е. курсив.

Сделаем текст нашей страницы в одном месте жирным, а в другом курсивом

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

 Я студент ММУ № 30!  

Теперь наша страничка будет выглядеть ТАК.

! Обратите внимание на порядок следования тегов вложенных в другие теги. Теги должны быть вложены как матрешки.

Можно сделать так

 Я студент ММУ № 30! 

или вот так

 Я студент ММУ № 30! 

А вот так  Я студент ММУ № 30!  делать нельзя !

Будьте внимательны при написании кода ! Иначе это вызовет ошибки в отображении страницы.

А можно ли сделать текст одновременно и жирным и курсивом ?
Конечно можно ! Например вот так

 Я студент ММУ № 30! 

или вот так

 Я студент ММУ № 30! 

или вот так

 Я студент ММУ № 30! 

или даже так

 Я студент ММУ № 30! 

Результат будет одинаков.

Надеюсь понятно объяснил как форматировать текст жирным или курсивом и как вкладывать одни теги внутрь других.

Часть 6

Как изменить размер шрифта

Для изменения размера шрифта есть несколько способов.

Через теги

....

или через параметр шрифта size

Например вот так

текст

Выглядеть это будет так

текст

или вот так :

текст

Выглядеть это будет так

текст

Тег как вы поняли является парным. Используется обычно для выделения ЗАГОЛОВКОВ. При этом текст, выделенный тегом будет располагаться как абзац...как будто вы перед текстом и после поставили еще теги
. Т.е. текст заключенный в тег будет написан с новой строки.

Само собой текст можно сделать еще и жирным и курсивом. Например вот так

текст

Выглядеть это будет так

текст

второй способ изменения размера шрифта

использование параметра в теге

Вернемся к нашей страничке.

В коде страницы есть вот такой кусок

Я студент ММУ № 30! 

здесь с помощью тега  и параметра color мы задаем цвет текста.

А с помощью параметра size можно задать размер текста, например вот так

size="4"> Я студент ММУ № 30!  

тогда текст на странице будет выглядеть так
Я студент ММУ № 30!

Добавьте изменение в код страницы из предыдущего урока.

Часть 7.

Как сделать ссылки на другие страницы сайта

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

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

Разберем на примерах.

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

О себе

В параметре href= мы написали адрес страницы, а между тегами и мы должны написать текст, нажав на который произойдет переход по ссылке.

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

Вернемся к нашему предыдущему примеру и добавим ссылки на этот сайт, вот так

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

Я студент ММУ № 30!  

Ищи меня здесь 

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

 border="0">

Если вы хотите чтобы ссылка открывалась в новом окне, то надо дописать еще один параметр в тег

 target="_blank"> 

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

Итого, код нашей страницы будет вот такой

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

Я студент ММУ № 30!  

 border="0">

Ищи меня тут 

 

А как сделать ссылку на файл? Точно так-же как и другие ссылки, только указывая в назначении имя файла. Например

Скачать песню Киркорова

Скачать программу

при условии, что файлы находятся в той-же папке где и html-файл

 

А если в другой папке?

Тоже решаемо. Например так

Скачать программу, если файл arhiv.rar находится в папке soft относительно страницы с главной директории сайта. Т.е. мы "говорим", что надо сначала зайти в директорию soft, а из нее взять файл arhiv.rar

или так

назад в каталог , если надо перейти на страницу, которая находится в вышестоящем каталоге, например если файл katalog.html находится в главной директории вашего сайта, а страница с которой вы делаете на него ссылку находится в папке soft. Запись ../ означает возврат в предыдущий каталог, на уровень выше. Такая запись является стандартом еще со времен появления компьютера. Т.е. назад в каталог означает выйти в директорию уровнем повыше и открыть в нем файл katalog.html

Если у вас есть 2 директории в главной директории вашего сайта, и вам надо сделать ссылку из файла находящегося в одной директории на файл в другой директории, то делается типа так

т.е. сначала даем понять, что надо выйти в вышестояющую директорию (../), а затем войти в папку soft и в ней открыть файл soft.html

Все это примеры относительных ссылок, т.е. ссылки относительно страницы с которой делается ссылка.

Или указывайте полный путь к файлу. Т.е. с http://
Например, Каталог
Ссылки, содержащие полный путь к файлу называются абсолютными.

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

Часть 8

Использование таблиц на странице

Теперь рассмотрим как делать таблицы на странице.

Вообще это ОЧЕНЬ ВАЖНАЯ тема и  пожалуй самая сложная.

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

Таблица описывается парным тегом

и

говорит браузеру , что начинается таблица, а говорит о том, что таблица заканчивается. Запомнили ?

таким образом при создании таблицы пишем сразу 2 тега

Теперь надо описать строку таблицы. Для создания строки в таблице используется парный тег

Если у нас таблица состоит из одной строки, то будет так

 

Если таблица состоит из 3 строк, то делаем так :

Понятно ?

Но это еще не все

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

Столбцы в HTML описываются с помощью тегов  и , которые должны находиться между тегами и

Например. если у нас в таблице 1 строка и 1 столбец, т.е. например вот такая

то таблица будет описана так :

Если таблица состоит из 1 строки и 3 столбцов, т.е. вот такая

то таблица будет описана вот так

Если мы хотим добавить еще одну строку в таблицу из 3 ячеек, т.е. сделать вот такую таблицу

то код таблицы будет такой

А вот содержимое ячеек пишется ТОЛЬКО МЕЖДУ тегами и

Писать контент между и , между и или между и - НЕЛЬЗЯ.

ВАЖНО. Для описания таблицы вы должны использовать именно такой порядок : сначала пишите теги таблицы, затем теги строки, затем теги ячеек.

Заполним нашу таблицу содержимым, расположив покрасивее теги

строка 1 ячейка 1	строка 1 ячейка 2	строка 1 ячейка 3
строка 2 ячейка 1	строка 2 ячейка 2	строка 2 ячейка 3

 

Таблица будет выглядеть так

строка 1 ячейка 1	строка 1 ячейка 2	строка 1 ячейка 3
строка 2 ячейка 1	строка 2 ячейка 2	строка 2 ячейка 3

 

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

Добавим код таблицы в наш учебный файл.

Итого, код нашей страницы будет вот такой

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

 Я студент ММУ № 30!  !

Ищи меня тут

строка 1 ячейка 1	строка                          1                       ячейка 2	строка                           1                           ячейка                        3
строка 2 ячейка 1	строка                          2                        ячейка                        2	строка                          2                        ячейка                        3

А можно ли использовать на странице несколько таблиц ? Можно.

А можно ли использовать таблицу внутри другой таблицы ? Можно. Но осторожно. Чтобы не запутаться и соблюдать вложенность.

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

Сначала создадим таблицу, например 2 х 2

код таблицы будет такой

А теперь вставим в первую ячейку такую же таблицу 2х2, т.е. сделаем вот такую таблицу

Код нашей таблицы будет такой :

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

Да...Несколько сложно . Но вы должны четко понимать структуру таблицы.
Если чего-то не поняли - перечитайте все ЕЩЕ РАЗ, пока не поймете. Дело в том что в процессе работы у вас могут возникнуть ошибки. Где-нибудь забудете закрыть тег ячейки, или тег строки...или нарушите принцип вложенности...в итоге вместо желанной таблицы у вас будет черт знает что на странице. Знание того КАК правильно делать таблицу - позволит вам найти ошибку и исправить код.

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

Важно. Если в таблице нет данных - то вы может и не увидите таблицу.

Для того чтобы увидеть таблицу в которой не введены данные, надо задать параметр таблицы border. По умолчанию он равен 0, поэтому таблицу без данных - не видно. Вставьте в тег таблицы значение border="1"

border="1">

Также часто требуется задать размеры таблицы, для этого служат уже известные параметры WIDTH и HEIGHT. Эти параметры мы применяли в уроке по вставке картинки.

Например вот так

 width="300" height="150"> - это будет таблица шириной 300 пикселей и высотой 150,

вот такая

код таблицы такой

Также можно указать ширину и высоту строк и ячеек, используя параметры WIDTH и HEIGHT.

т.е. использовать эти параметры в тегах и

Вставим в таблицу еще одну ячейку

т.е. получим вот такую таблицу

ячейка 1

ячейка 2

а теперь сделаем ширину первой ячейки = 50

 width="50">

таблица будет выглядеть вот так:

чтобы было видно ячейки надо в них что-нибудь написать

! Заполняя ячейки таблицы текстом не надо вводить набор букв без пробелов типа аозщйцгукйцгкушйгзцшукгйзцгкзйцгкзйцгкзщйзщгк23арайцугоцащ, иначе таблицу "порвет" и она выйдет за указанные вами размеры.

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

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

Для описания цвета фона используется параметр bgcolor. Например вот такой код

bgcolor="#CCCCCC">

bgcolor="#FFFF99">

даст вот такую таблицу

 

Но и это еще не все! В качестве фона в таблицах можно использовать изображения!

Вернемся к файлу с которым мы работаем и в котором прописан вот этот код

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

 Я студент ММУ № 30! 

Ищи меня тут

строка 1 ячейка 1	строка 1 ячейка 2	строка 1 ячейка 3
строка 2 ячейка 1	строка 2 ячейка 2	строка 2 ячейка 3

Сохраните вот это изображение под его "родным" именем sv5.gif в той же директории где находится файл page.html, для этого наведите мышку на изображение, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..". Выберите ту же директорию где находится файл page.html

 

 

Теперь внесем изменения в код нашей таблицы.

Сегодня замечательный день.
Я сделал свою первую интернет страничку.

 Я студент ММУ № 30! 

Ищу меня тут

background="sv5.gif">

строка 1 ячейка 1	строка 1 ячейка 2	строка 1 ячейка 3
строка 2 ячейка 1	строка 2 ячейка 2	строка 2 ячейка 3

В итоге мы получим вот такую таблицу

строка 1 ячейка 1	строка 1 ячейка 2	строка 1 ячейка 3
строка 2 ячейка 1	строка 2 ячейка 2	строка 2 ячейка 3

Возможно вы не увидели того, что требовалось увидеть. Так например Internet Explorer не понимает фоновую картинку в теге . Для того, чтобы не сталкиваться с такой проблемой - лучше писать параметр background в теге .

Если мы хотим сделать фон только для конкретной ячейки, то параметр background="sv5.gif" надо прописать в нужном теге , т.е. вот так например background="sv5.gif">

Замечательным свойством фонового изображения является его повторяемость ! Т.е. если у вас размер ячейки больше чем изображение - то оно будет дублироваться так, чтобы заполнить все пространство ячейки.

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

---

Теперь напишем между тегами название нашей страницы, например вот так

 

Далее разместим теги

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

 

 

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

ячейка 1
ячейка 2	ячейка 3

В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы.

Для того чтобы сделать такую таблицу напишите вот такой код

Т.е. код нашей страницы будет вот такой :

 

Как видите, в такой вот "хитрой" таблице используется лишь 1 пара тегов в первой строке таблицы, а не два, как при построении таблицы 2х2. Но зато появился параметр colspan="2". Этот параметр как бы говорит, какого размера должна быть ячейка. В данном случае ячейка должна быть шириной в 2 ячейки.

Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из рассчета что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет не комфортно.

Высоту таблицы сделаем 600 пикселей

Т.е. код нашей страницы теперь будет вот такой.

 

width="750" height="600">

Здесь у нас будет шапка
Здесь будет меню	Здесь будет содержимое страницы

 

Чтобы стало видно границы частей сайта - "зальем" область меню и область шапки цветом. Например вот так

 

 

bgcolor="#00CC99">Здесь у нас будет шапка
bgcolor="#CCCCCC"> Здесь будет меню	Здесь будет содержимое страницы

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

Возможно возник вопрос. Почему назвали файл страницы именно так ?

Есть правило. Главная страница сайта должна называться index.html, или index.htm . ! Или index.php если страница написана на языке PHP. Запомните это.

Тогда при обращении к сайту, т.е. когда набираешь адрес сайта в браузере, можно не набирать index.html или index.htm, достаточно набрать адрес вашего сайта.

 Теперь вставим шапку нашего сайта.

Сохраните картинку шапки у себя на компьютере в той-же директории где находится файл страницы под ее "родным" именем sitelogo.jpg

(т.е. наведите курсор мышки на картинку, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..." )

Где брать такие шапки ? Рисовать самим. О том как это делать, мы знаем из уроков по работе с Paint? Pwer Point. Теперь вставляем картинку шапки в наш сайт. 

 

Здесь будет меню	Здесь будет содержимое страницы

Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.

 

 

width="750" height="120">
Здесь будет меню	Здесь будет содержимое страницы

 

 

Установим ширину меню равной 200 пикселей, для этого добавим width="200" в соответствующий тег

width="200" > Здесь будет меню	Здесь будет содержимое страницы

Задний план меню "зальем" фоном, для этого найдем фон в интернете, сохраним этот фон с его "родным" именем sv11.jpg в ту же директорию где находится файл страницы.

А теперь прописываем нужный код

 

 

background="sv11.jpg"> Здесь будет меню	Здесь будет содержимое страницы

 

У вас возможно возник вопрос, почему браузер не "отрабатывает" ширину меню 200 ? Меню ведь выглядит шире чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места если начать писать текст в основном разделе страницы. (Или, можно задать жестко ширину ячейки в которой будет писать контент, дописав width="550")

Чтобы подтвердить это, добавим текста на наш сайт.

 

Здесь будет меню	Этот сайт моей внеаудиторной работе в ММУ № 30

Теперь все почти ОК...Почти, потому что на лицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы чтобы текст был расположен вверху ячеек.

Для этого нам надо прописать еще один параметр в теге меню и основного содержимого страницы.

Этот параметр мы не проходили в уроке о таблицах, - это параметр выравнивания по вертикали valign="top".

Значение top означает что содержимое будет располагаться вверху.

 

valign="top" > Здесь будет меню	valign="top"> Этот сайт моей внеаудиторной работе в ММУ № 30

 

 

Далее делаем меню. Пока наш сайт будет 2х-страничный. Главная страница и страница ссылок.

Пусть пункты меню пусть называются Главная и Ссылки. Для того, чтобы "сдвинуть" текст на следующую строчку - используем тег
Два
сдвинут текст на 2 строки и т.д.

 

Главная Ссылки	Этот сайт моей внеаудиторной работе в ММУ № 30

 

 

Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.

 

Главная Ссылки	Этот сайт моей внеаудиторной работе в ММУ № 30

 

 

Осталось сделать вторую страницу сайта. Для того, чтобы упростить работу сделаем так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл.

Выбираем в блокноте команду Файл->Сохранить как... , выбираем ту же директорию где находится файл index.html, пишем имя страницы под которой мы хотим сохранить файл ssilki.html . жмем ОК.

Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html.

Теперь изменим название страницы (между тегами ), и изменим текст страницы, например вот так

 

Главная Ссылки	На этой странице будут размещены ссылки на сайты о моей работе Ищи меня тут

 

И сохраним... (Файл -> Сохранить)

Возможно у кого то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код ?

Можно. Я сделал пропуски чтобы было наглядней видно структуру страницы. А так можно разместить весь код вообще в одну строчку
Но не стоит. Иначе будет трудно искать ошибки если что...

Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.

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