- Преподавателю
- Информатика
- Создание сайта средствами HTML-программирования (по учебнику Н. Д. Угриновича)
Создание сайта средствами HTML-программирования (по учебнику Н. Д. Угриновича)
Раздел | Информатика |
Класс | - |
Тип | Другие методич. материалы |
Автор | Шанина Т.А. |
Дата | 27.08.2015 |
Формат | doc |
Изображения | Есть |
Создание Web-сайта.(по учебнику Н.Д.Угриновича)
1. Открыть окно текстового редактора Блокнот.
2. Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Html-код страницы помещается внутри контейнера <HTML>HTML>.
Заголовок Web - страницы заключается в контейнер <HEAD>HEAD>
Название Web-страницы содержится в контейнере <TITLE>TITLE>
Наша страница будет называться «Компьютер»:
Компьютер
HEAD>
Основное содержание страницы помещается в контейнер <BODY>BODY> и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и т.д.
Поместим на страницу текст «Все о компьютере»
<BODY>
Все о компьютере
BODY>
Созданную Web-страницу необходимо сохранить в виде файла. Титульный файл сайта принято сохранять под именем index.htm
Загрузите полученный файл в окно браузера для просмотра.
Компьютер
HEAD>
<BODY>
Все о компьютере
BODY>
HTML>
3. Для форматирования текста:
-
размер шрифта задается тэгами от <H1> ( самый мелкий) до <H6> (самый крупный).
-
Положение заголовка на странице позволяет задать атрибут ALIGN, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN="right", а по центру - ALIGN="center"
-
С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта ( например, FACE ="Arial"), атрибут SIZE - размер шрифта( например, SIZE=4), атрибут COLOR - цвет шрифта (например, COLOR="blue").
-
Заголовок целесообразно отделять от остального содержания страницы горизонтальной линией с помощью одиночного тэга <HR>.
-
Разделение текста на абзацы производится с помощью контейнера <P>P>
-
Разместим на титульной странице текст, разбитый на абзацы с различным выравниванием:
<P ALIGN ="left"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. P>
<P ALIGN = "right"> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
P>
Т.о. сейчас в контейнере <BODY> находится следующая последовательность тэгов:
< FONT COLOR ="blue">
Все о компьютере
FONT>
<HR>
<P ALIGN ="left"> На этом сайте вы сможете…
P>
<P ALIGN = "right"> Терминологический словарь…
P>
4. Вставка изображений.
На Web- страницах могут размещаться графические файлы трех форматов-gif, jpg, png.
Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла. Если файл сохранен в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла.
<IMG SRC ="computer.gif">
Если файл находится в другом каталоге, то надо указать путь к нему. ( Например, <IMG SRC ="C:\computer\computer.gif">
Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был увидеть пользователь
<IMG SRC ="computer.gif" ALT = "компьютер"> Расположить рисунок относительно текста можно различными способами, с помощью атрибута <ALIGN> тэга <IMG>( TOP (ВВЕРХ), MIDLE (СЕРЕДИНА), BOTTOM (НИЗ), LEFT (СЛЕВА), RIGHT(СПРАВА)
Итак, при вставке изображения получим:
ALT = "компьютер"
ALIGN = "right">
II. Гиперссылки на Web-страницах.
Для создания связи между титульной страницей и другими страницами сайта необходимо создать заготовки страниц, которые должны иметь заголовок, но пока могут не иметь содержания.
Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.
Каждая страница будет содержать следующий HTML-код:
Заголовок страницы
HEAD>
<BODY>
BODY>
HTML>
Создайте пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохраните их в файлы с именами software.htm, glossary.htm, hardware.htm, anketa.htm в каталоге сайта.
Перейдем к созданию гиперссылок. Гиперссылки принято размещать в нижней части страницы, поэтому разместим их под введенным текстом в новом абзаце одну строку разделенными несколькими пробелами.
[Программы]   [Словарь]   [Комплектующие]
  [Анкета]
P>
Для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки <A>A> с атрибутом HREF
<A HREF ="URL"> Указатель гиперссылкиA>
Вставьте в титульную страницу код, создающий панель навигации:
[A HREF ="software.htm">Программы ]
[A HREF ="glossary.htm">Словарь ]
[A HREF ="hardware.htm">Комплектующие]
[A HREF ="anketa.htm">Анкета ]
Можно создать на титульной странице ссылку на адрес электронной почты
< A HREF =mailto:[email protected]> E-mail: mailto:[email protected]>
ADRESS>
III. Использование списков.
На странице «Программы» разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка.
Список располагается внутри контейнера <OL>OL>, а каждый элемент списка определяется тэгом <LI>. Тип нумерации определяется с помощью атрибута TYPE тэга <OL> ("I" -римские цифры, "a"- строчные буквы…)
Откройте файл software.htm, введите заголовок «Программное обеспечение» и добавьте следующий HTML- код
<OL>
<LI>Системные программы
<LI> Прикладные программы
<LI> Системы программирования
OL>
Добавим вложенный список для элемента <LI> Прикладные программы
<UL>
<LI TYPE ="square" (это вид маркера - квадрат)
Текстовые редакторы;
<LI> графические редакторы;
<LI> электронные таблицы;
<LI> системы управления базами данных.
Страницу «Словарь» мы представим в виде словаря компьютерных терминов. Для этого используем контейнер списка определений DL>. Внутри него текст оформляется в виде термина, который выделяется непарным тэгом <DT>, и определения, которое следует за тэгом <DD >
Откройте файл glossary.htm, введите заголовок «Компьютерные термины» и добавьте следующий HTML-код, задающий список определений:
<DL>
<DT> Процессор
<DD > Центральное устройство компьютера, производящее обработку информации в двоичном коде.
<DT> Оперативная память
<DD >Устройство, в котором хранятся программы и данные
DL>
IV. Создание форм.
Для того, чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам сайта, на его страницах размещают формы.
Разместим на странице «Анкета» анкету для посетителей.
Вся форма заключается в контейнер <FORM>FORM>
В первую очередь выясняется имя посетителя и его электронный адрес. Для этого разместим два однострочных текстовых поля с помощью тэга <INPUT> со значением атрибута TYPE ="text" Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах.
Чтобы анкета читалась, необходимо разделить строки с помощью тэга перевода строки <BR>.
Откройте файл anketa.htm и добавьте код:
Пожалуйста, введите ваше имя:
NAME="name" SIZE=30>
E-mail:
NAME ="e-mail" SIZE =30>
Далее мы хотим выяснить, к какой группе пользователей относит себя посетитель: учащийся, студент, учитель. Для этого необходимо создать группу переключателей (радиокнопок). Создается такая группа с помощью тэга <INPUT> со значением атрибута TYPE ="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Еще одним обязательным атрибутом является VALUE, которому присвоим значения "schoolboy", "student", "teacher". Атрибут CHECKED, который задает выбор кнопки по умолчанию, в данном случае не используется.
Укажите, к какой группе пользователей вы себя относите:
<BR>
NAME ="group" VALUE=
"schoolboy"> учащийся
NAME ="group" VALUE=
"student"> студент
NAME ="group" VALUE=
"teacher"> учитель <BR>
Выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка. Для реализации такого списка используется контейнер<SELECT>SELECT> , в котором каждый элемент списка определяется тэгом <OPTION>
Internet
Explorer
Internet Explorer
<OPTION>
Netscape Navigator
Opera
<OPTION> Neo Planet
SELECT>
В заключении поинтересуемся, что хотел бы видеть посетитель на страницах нашего сайта. Создается такая текстовая область с помощью тэга <TEXTAREA> с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS - число столбцов.
Какую еще информацию вы хотели бы видеть на нашем сайте?
ROWS=4 COLS=30>
TEXTAREA>
Для отправки данных из формы наберите:
VALUE="отправить">
VALUE=" очистить">
4