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

Шаг 10

Сайт добавление контента (завершение работы)

  • Копируем файлы фотографий, которые мы выбрали для оформления нашей web страницы и вставляем их в папку my_site, где уже находиться файл нашего сайта basic.htm.
  • Обычно используются файлы изображений в формате JPEG или GIF.
  • Самая большая фотография будет баннером на самом верху страницы. Учитывая ширину нашей страницы (750 px) размер банера: 700 х 80 px.
  • Количество и размеры фотографий определите сами, исходя из концепции вашего сайта.
  • Если не хотите, чтобы Ваша страница долго загружалась, не увлекайтесь слишком большими изображениями.
  • Итак, в отделении контента помещаем курсор сразу после тэга </div>, закрывающего отделение навигации нажимаем на клавишу Enter на клавиатуре компьютера и пишем:
<p>
<img src="banner.jpg" width="700" height="80">
</p>
  • Между тэгами абзаца <p></p> мы поместили фотографию, которая будет баннером сайта.
  • Тэг img используется для вставки файлов фотографий и рисунков. Тэг не имеет пары.
  • После параметра src= в кавычках пишем адрес (название) файла фотографии, в нашем случае: banner, после названия нужно обязательно поставить точку (.) и написать: jpg или gif. в зависимости от формата нашей фотографии, причем расширение файла формата JPEG пишется jpg и никак иначе.
  • После параметра width= в кавычках пишем ширину нашего файла в пикселях и после параметра height= высоту. Если открыть любую папку, в которой находятся файлы рисунков или фотографий и поместить курсор на иконку любого файла, то появиться примерно такой текст:
    Размеры: 700х80
    Тип: Рисунок JPEG
  • Так Вы можете узнать размеры и формат любой фотографии или рисунка.
  • Проходя Шаг 7 мы добавляли в документ текстовую информацию – был создан главный заголовок h1 и текстовый абзац между тэгами <p></p>. Давайте снова вернемся в отделение контента поместим курсор сразу после тэга </p>, закрывающего отделение этого абзаца и нажмем на клавишу Enter.
  • С новой строки напишем:
<h2>h2 Следующий заголовок</h2>
<p>
<img src="f_2.jpg" width="59" height="80" align="left">
Между тэгами p находиться текст абзаца. Достаточно выделить 
курсором и скопировать любой фрагмент текста и поместить его 
между тэгами p Вашей web-страницы. Этот фрагмент текста станет 
доступным для посетителей Вашего сайта.
</p>
<h3>h3 Следующий заголовок</h3>
<p>
<img src="f_3.jpg" width="63" height="50" align="right">
Между тэгами p находиться текст абзаца. Обратите внимание! 
Во избежание различных недоразумений, которые иногда возникают 
в связи с некорректной кодировкой,  возьмите себе за правило 
давать название файлам сайта исключительно на английском языке.
</p>
<hr/>
<p>Мой первый сайт © 2005 Все права защищены</p>
  • Тэг <hr/>- это горизонтальная линия в нижней части нашего документа.

P.S.

  • Нажмите на клавишу F12 на клавиатуре Вашего компьютера и посмотрите на то, что у Вас получилось.

web страница, сайт, баннер, width, banner, height, тэг Скачать файлы сайта в архиве:
my_site.rar


     карта сайтаКарта сайта