Шаг 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 на клавиатуре Вашего компьютера и посмотрите на то, что у Вас получилось.
Скачать файлы сайта в архиве:
my_site.rar
