Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Другие методич. материалы / Создание сайта средствами HTML-программирования (по учебнику Н.Д.Угриновича)

Создание сайта средствами HTML-программирования (по учебнику Н.Д.Угриновича)

  • Информатика

Поделитесь материалом с коллегами:

Создание 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.gifALT = “компьютер”> Расположить рисунок относительно текста можно различными способами, с помощью атрибута <ALIGN> тэга <IMG>( TOP (ВВЕРХ), MIDLE (СЕРЕДИНА), BOTTOM (НИЗ), LEFT (СЛЕВА), RIGHT(СПРАВА)

Итак, при вставке изображения получим:

computer.gif”

ALT = “компьютер

ALIGN = “right”>


II. Гиперссылки на Web-страницах.

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

Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.

Каждая страница будет содержать следующий HTML-код:


Заголовок страницы

HEAD>

<BODY>



BODY>

HTML>

Создайте пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохраните их в файлы с именами software.htm, glossary.htm, hardware.htm, anketa.htm в каталоге сайта.

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

[Программы] &nbsp [Словарь] &nbsp [Комплектующие]

&nbsp [Анкета]

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:mailbox@provaider.ru> E-mail: mailto:mailbox@provaider.ru>

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


Выберите курс повышения квалификации со скидкой 50%:

Автор
Дата добавления 30.09.2015
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров277
Номер материала ДВ-022812
Получить свидетельство о публикации

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