Разработайте эскиз будущей страницы например заголовок текст навигация

Разработайте эскиз будущей страницы, например заголовок текст навигация анимация e-maile: рисунок

Вспомним «основы» Вид WEB – страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (контейнер). html – код страницы помещается внутрь контейнера <html> </html> Заголовок WEB – страницы заключается в контейнер <head> </head> Название WEB – страницы содержится в контейнере <title> </title> Основное содержание страницы помещается в контейнер <body> </body>

Все материалы сайта сохраняйте в папке Мой сайт : Создание WEB сайта 1. На диске С в папке Student создайте папку Мой сайт 2. Откройте окно текстового редактора Блокнот 3. В окне Блокнота введите HTML – код WEB – страницы. 4. Сохраните файл с именем Копм. Сайт. html 5. Откройте этот файл в окне браузера для просмотра. Начинаем с кода <html> «простейшей» страницы. <head> Затем будем его <title> КОМПЬЮТЕР </title> «дорабатывать» </head> <body> ВСЕ О КОМПЬЮТЕРЕ </body> </html>

Блокнот Посмотрим как выглядит в Internet Explorer

Форматирование текста Заголовки задаются тэгами от <h 1> (самый крупный) до <h 6> (самый мелкий). Некоторые тэги имеют атрибуты, которые являются именами свойств и принимают определенные значения. ü align =“ center” – тип выравнивания заголовка С помощью тега можно задать параметры форматирования шрифта заголовка: ü fase=“arial” - гарнитура шрифта fase ü size=4 – размер шрифта size ü color=“blue” – цвет шрифта color

Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией – тэг <hr> Разделение текста на абзацы производится с помощью контейнера

: В Блокноте откорректируем текст «тела» следующим образом: <body> <h 1 align="center"> ВСЕ О КОМПЬЮТЕРЕ </h 1> </body> Получим страницу

«Оценив» результат, продолжим кооректировать текст «тела» страницы: добавим «линию» (подчеркивание) и следующий размеченный текст <hr> <h 2> На этом сайте вы можете получить информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. Терминологический словарь познакомит вас с компьютерными терминами. </h 2>

А вот как это выглядит в браузере

На WEB – страницы обычно помещают изображения трех форматов – GIF, JPG, PNG. Если рисунок сохранен в другом формате, то его преобразовывают в графическом редакторе (например, PHOTO EDITOR). Для вставки изображения используется тэг <img> с атрибутами: ü src=“comp. png”, который указывает место хранения comp. png файла (в примере файл находится в папке сайта). ü alt=“Это компьютер” – поясняющий текст ü Расположить рисунок относительно текста позволяет атрибут align=“right” right

: Во «второй» контейнер <body> вставить тэг изображения (в начало, перед абзацами текста) <img src="comp. png" alt= «Здесь картинка компьютера" align="right"> Получили

Гиперссылки на WEB–страницах Первая страница должна предоставить посетителю WEB – сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы. Для создания гиперсвязей необходимо, прежде всего, создать WEB – страницы. Такие страницы пока могут быть пустыми (без содержания, но иметь заголовки). Все созданные страницы необходимо сохранить в виде файлов (. html) в папке сайта. Каждая страница будет содержать следующий HTML- код: <html> <head> <title> ЗАГОЛОВОК СТРАНИЦЫ</title> </head> <body> здесь позже будет содержимое </body> </html>

: Создать Web-страницы Создайте «пустые» страницы «Программы» , «Словарь» , «Комплектующие» и сохраните их в файлах Проги. html – заголовок страницы ПРОГРАММЫ Компы. html – заголовок страницы КОМПЬЮТЕРЫ В СБОРКЕ Hard. html - заголовок страницы КОМПЛЕКТУЮЩИЕ

Страницы - заготовки

Контейнер гиперссылок <a> </a>. Атрибут href=“адрес документа” &nbsp – разделяет гиперссылки пробелами. : Вставьте в титульную страницу код, создающий панель гиперссылки (в конце «второго тела» ). [<a href= «Проги. html"> ПРОГРАММЫ</a>] &nbsp [<a href= «Компы. html"> КОМПЬЮТЕРЫ В СБОРКЕ </a>] &nbsp [<a href=“Hard. html"> КОМПЛЕКТУЮЩИЕ</a>] &nbsp и «подчеркнем» , добавив соответствующий тег

Вот как это выглядит Обратите внимание на начертание и цвет шрифта

Полезно на титульной странице создать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта (или Вами). Контейнер адреса <adress> </adress> Атрибут href=“адрес электронной почты” : Вставьте в титульную страницу код, создающий ссылку на адрес электронной почты. <adress> <a href="mailto: Abcd@ps. dn"> e-mail: Abcd@ps. dn </a> </adress> Для «украшения» адреса добавьте изображение

Вот, что мы получили На «остальных» страницах сайта следует поместить «переход» на главную страницу файл Комп. Сайт. html (гиперссылку)