Рабочие листы
к вашим урокам
Скачать
1 слайд
Презентация по информатике
Создание Web-сайта
Шаронова С.М.
2 слайд
Структура Web-сайта
3 слайд
Контейнеры
Код страницы <HTML></HTML>
Заголовок <HEAD></HEAD>
Название Web-страницы <TITLE></TITLE>
Основное содержание страницы <BODY></BODY>
4 слайд
Назовем Web-страницу «Компьютер»
<HEAD>
<TITLE> Компьютер</TITLE>
</HEAD>
5 слайд
Поместим на страницу текст «Все о компьютерах»
<BODY>
Все о компьютерах
</BODY>
6 слайд
Текст программы:
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Все о компьютерах
</BODY>
</HTML>
7 слайд
Сохранять Web-страницы нужно с расширением .html
Например, Мой сайт .html
Принято сохранять титульный файл сайта под именем
Index.html
8 слайд
Форматирование текста:
Размер шрифта в заголовках задается тэгами от Н1 до Н6:
<H1>
Все о компьютерах
</H1>
Тип выравнивания заголовка задает атрибут ALIGN
<H1 ALIGN="CENTER”>Все о компьютерах
</H1>
Тэг FONT задает параметры форматирования любого фрагмента текста. Атрибут FACE задает тип шрифта (FACE=“Arial”) SIZE – размер (SIZE=10) COLOR – цвет (COLOR=“blue”)
Для отделения заголовка от остального содержания страницы горизонтальной линией используется тэг <HR>
Задать синий цвет заголовка:
<FONT COLOR=“BLUE">
<H1 ALIGN="CENTER”>
Все о компьютерах
</H1>
</FONT>
<HR>
9 слайд
Абзацы:
Разделение текста на абзацы производится
контейнером <P></P>. Для каждого абзаца
можно применить свой тип выравнивания.
Поместим на титульную страницу текст, разбитый
на абзацы с различным выравниванием:
<P ALIGN="LEFT">На этом сайте вы сможете
получить различную информацию о компьютере,
его программном обеспечении и ценах
на компьютерные комплектующие.</P>
<P ALIGN="RIGHT"> Терминологический
словарь познакомит вас с компьютерными терминами, а также вы сможете
заполнить анкету.</P>
10 слайд
Программирование Web-сайта
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
<FONT COLOR="GREEN">
<H1 ALIGN="CENTER”>
Все о компьютерах
</H1>
</FONT>
<HR>
<P ALIGN="LEFT">На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</P>
</H1>
</FONT>
<HR>
<P ALIGN="RIGHT">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>
</BODY>
</HTML>
11 слайд
Вставка рисунка
Форматы .GIF, .JPG, .PNG.
Тэг <IMG> с атрибутом SRC, который указывает место хранения файла (путь к файлу).
Расположение рисунка относительно текста –атрибут ALIGN:
1. TOP
2. MIDDLE
3. BOTTON
4. LEFT
5. RIGHT
Вставить рисунок в контейнер перед абзацем текста.
12 слайд
Вставка рисунка
<BODY>
<IMG SRC=«Комп.gif" alt=«компьютер"
ALIGN="RIGHT">
Или
<BODY>
<IMG SRC="D:\Мои документы\Школа 32\Комп.gif" alt=" компьютер "
ALIGN="RIGHT">
13 слайд
Создание других страниц сайта
<HEAD>
<TITLE> Заголовок страницы </TITLE>
</HEAD>
Создайте страницы Программы, Словарь, Комплектующие, Анкета.
Сохраните их в файлах с названиями:
software.html
glossary.html
hardware.html
anketa.html
14 слайд
Гиперссылки
Гиперссылки состоят из указателя ссылки и
адресной части ссылки.
Адресная часть – URL – адрес документа.
Принято размещать гиперссылки в нижней
части титульной страницы, поэтому разместим их
после введенного текста в новом абзаце.
В качестве указателя гиперссылок выберем
названия страниц нашего сайта: Программы,
Словарь, Комплектующие, Анкета.
Указатели гиперссылок разделяются пробелами ( ) . Для каждой гиперссылки определим
адрес перехода, (контейнер <A> </A>) с атрибутом HREF, значением которого является URL – адрес.
15 слайд
Гиперссылки
<P ALIGN= "CENTER"
[<A HREF="software.html">Программы</A>]  
[<A HREF="glossary.html">Словарь</A>]  
[<A HREF="hardware.html">Комплектующие</A>]  
[<A HREF="anketa.html">Анкета</A>]
</P>
16 слайд
Адрес электронной почты вставляется так:
Полезно на странице помещать ссылку на адрес электронной
почты, по которому посетители могут связаться с
администрацией сайта.
<ADRESS>
<A HREF="mailto:mailbox@provaider.ru">E-mail:
mailbox@provaider.ru</A>
</ADRESS>
По щелчку мыши по ссылке на адрес электронной почты
будет открываться программа Outlook Express, где в строке
Кому будет указан заданный в ссылке адрес
17 слайд
18 слайд
Создание списка нумерованного
Список располагается внутри контейнера <OL> </OL>, а каждый элемент списка – тэгом <LI>. С помощью атрибута TYPE тэга <ОL> можно задать вид нумерации: арабские цифры по умолчанию, “I” (римские цифры), “а” (строчные буквы).
Открыть в Блокноте файл Software.html и добавить следующий HTML-код, задающий список:
<OL>
<LI>Системные программы
<LI>Прикладные программы
<LI>Системы программирования
</OL>
19 слайд
Создание списка
маркированного
Создадим теперь вложенный маркированный список для
одного из элементов основного списка. Список располагается
внутри контейнера <UL> </UL>, а каждый элемент
списка определяется также тэгом <LI>. С помощью
атрибута TYPE тэга <UL> можно задать вид маркера списка:
“disc” (диск), “Square” (квадрат), “circle” (окружность).
Добавить HTML-код, задающий вложенный список для
элемента <LI> Прикладные программы.
20 слайд
Создание нумерованного списка
<FONT COLOR="GREEN">
<H2 ALIGN="LEFT">
<OL>
<LI>Системные программы
<LI>Прикладные программы
<LI>Системы программирования
</OL>
21 слайд
Создание вложенного списка
<UL>
<LI TYPE="DISC">
ТЕКСТОВЫЕ РЕДАКТОРЫ
<LI> ГРАФИЧЕСКИЕ РЕДАКТОРЫ
<LI> ЭЛЕКТРОННЫЕ ТАБЛИЦЫ
<LI> СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ.
</UL>
22 слайд
23 слайд
Словарь компьютерных терминов:
Контейнер списка определений <DL>, </DL>
Внутри него термин – тэг <DT>
определение - <DD>
<DL>
<DT>Процессор
<FONT COLOR="BRAUN">
<H4>
<DD>Центральный процессор, производящий вычисления в двоичном коде.
</H4>
<FONT COLOR="GREEN">
<DT>Оперативная память
<FONT COLOR="BRAUN">
<H4>
<DD>Устройство, в котором хранятся программы и данные
</H4>
</DL>
24 слайд
25 слайд
Таблицы
Таблица задается контейнером <TABLE></TABLE>, внутри которого содержится описание структуры таблицы и ее содержимого.
Любая таблица состоит из строк, которые задаются контейнером <TR></TR>, в который помещается описание ячейки.
Формат ячейки и ее содержание помещается в контейнер <TD></TD>, а заголовки ячеек в контейнер <TH></TH>.
Толщина разделительных линий задается атрибутом BORDER, а для выравнивания информации - атрибут ALIGN.
26 слайд
Вставить таблицу в файл hardware .html
<TABLE border="2">
<TR>
<TH><FONT COLOR="BLUE">НАИМЕНОВАНИЕ</TH>
<TH><FONT COLOR="CYAN">ТИП</TH>
<TH><FONT COLOR="LIME">ИЗГОТОВИТЕЛЬ</TH>
<TH><FONT COLOR="MAGENTA">ЦЕНА</TH>
</TR>
<TR>
<TD ALIGN="CENTER">ПРОЦЕССОР</TD>
<TD ALIGN="CENTER">PENTIUM</TD>
<TD ALIGN="CENTER">INTEL</TD>
<TD ALIGN="CENTER">2500 РУБЛЕЙ</TD>
</TR>
<TR>
<TD ALIGN="CENTER">МАТЕРИНСКАЯ ПЛАТА</TD>
<TD ALIGN="CENTER">Abit</TD>
<TD ALIGN="CENTER">GIGABAIT</TD>
<TD ALIGN="CENTER">2700 РУБЛЕЙ</TD>
</TR>
</TABLE>
27 слайд
28 слайд
Формы на Web- страницах
Формы включают в себя текстовые поля, раскрывающиеся списки, флажки, переключатели и т.д. Формы заключаются в контейнер <FORM> </FORM>
Текстовые поля задаются тэгом <INPUT> со
значением атрибута type=“text”.
Атрибут NAME является обязательным и служит
для идентификации полученной информации, Атрибут SIZE задает длину поля ввода данных.
Для того, чтобы анкета читалась необходимо разделять строки с помощью тэга перевода строки <BR>.
29 слайд
Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий текстовые поля для ввода данных. Просмотреть результат в браузере:
<FORM>
<FONT COLOR="GREEN">
<H2 ALIGN="LEFT">
Пожалуйста, введите ваше имя: <BR>
<INPUT TYPE="текст"
NAME="name" SIZE=30> <BR>
E-mail: <BR>
<INPUT TYPE="текст"
NAME="e-mail"
SIZE=30> <BR>
</FORM>
30 слайд
Переключатели
Пользователю предоставляется возможность отнести
себя к одной из групп пользователей: учащийся,
студент, учитель.
Переключатели создается тэгом <INPUT> со значением атрибута type=“radio”. Все элементы в группе должны иметь одинаковые значения атрибута Name=“Group”
Другим обязательным атрибутом должно быть VALUE, принимающий, в нашем случае, значения "schoolboy“, "student“, "teacher"
31 слайд
Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий группу переключателей. Просмотреть результат в браузере:
Укажите, к какой группе пользователей вы себя относите: <BR>
<INPUT TYPE="radio"
NAME="group" value="schoolboy">учащийся<BR>
<INPUT TYPE="radio"
NAME="group" value="student">студент<BR>
<INPUT TYPE="radio"
NAME="group" value="teacher">учитель<BR>
32 слайд
Флажки
Флажки задаются тэгом <INPUT> со значением
атрибута type=“checkbox”
Флажки, объединенные в группу могут иметь
одинаковые значения атрибута Name=“Group”
Другим обязательным атрибутом должно быть
VALUE, принимающий, в нашем случае, значения
“www“, “e-mail“, “ftp“
Добавить HTML-код, задающий флажки для
выбора нескольких элементов. Просмотреть
результат в браузере:
33 слайд
Пример:
Какие из сервисов Интернета вы используете наиболее часто:
<BR>
<INPUT TYPE="checkbox"
NAME="group" value="www">www<BR>
<INPUT TYPE="checkbox"
NAME="group" value="e-mail">e-mail<BR>
<INPUT TYPE="checkbox"
NAME="group" value="ftp">FTP<BR>
34 слайд
Поля списков
Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Используется контейнер <SELECT> </SELECT>, в котором каждый элемент списка определен тэгом <OPTION>. Выбираемый по умолчанию элемент задается атрибутом SELECTED.
35 слайд
Открыть в Блокноте файл Anketa.html и добавить следующий HTML-код, задающий раскрывающий список. Просмотреть результат в браузере:
<SELECT NAME="browsers">
<OPTION SELECTED> Internet Explorer
<OPTION>
Netscape Navigator
<OPTION> Opera
<OPTION> Neo Planet
</SELECT>
36 слайд
Текстовая область
Создается с помощью тэга <TEXTAREA> с обязательными атрибутами: NAME, задающим
имя области, ROWS – число строк , COLS – число столбцов.
добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере:
Какую еще информацию вы хотели бы видеть на нашем сайте?
<BR>
<TEXTAREA NAME="resume"
ROWS=4 COLS=30>
</TEXTAREA
<BR>
37 слайд
Отправка формы
Отправка введенной в форму информации, а также очистка полей от уже введенной информации осуществляется кнопками. Для создания кн., отправляющей инф-ю, атрибуту TYPE=“submit“, value=«Отправить».
Для создания кн., очищающую инф-ю, атрибуту TYPE=“reset“, value=«Очистить».
добавить HTML-код, создающий текстовую область. Просмотреть результат в браузере:
<INPUT TYPE="SUBMIT"
value="Отправить">
<INPUT TYPE="RESET"
value="Очистить">
38 слайд
Для того, чтобы при щелчке по кн. «Отправить» данные из формы передавались на сервер и там обрабатывались необходимо указать адрес и программу обработки. Для этого используется атрибут ACTION контейнера <FORM>.
<FORM ACTION=http:/www.mycompany.ru/ogi-bin/bd.exe"
39 слайд
Когда же был создан язык программирования Basic
Язык программирования Basic был создан в 1964 году двумя профессорами Дартмунского университета Джоном Кенеми и Томасом Куртцом.BASIC - это первые буквы английских слов Beginner's All-purpose Symbolic Instruction Code (Всецелевой язык программирования для начинающих). В настоящее время существует множество версий этого языка, которые иногда очень сильно отличаются друг от друга. Для учебных заведений самыми распространенными являются версии MSX, впервые реализованная на японском компьютере "Ямаха", и версии фирмы Microsoft для компьютеров IBM. Кроме этого в нашей стране популярностью пользуется версия Turbo-Basic фирмы Borland. Без преувеличения можно сказать, что сегодня Бейсик является самым распространённым языком программирования. После появления мощных компиляторов Visual Basic этот язык стал популярен и у профессиональных программистов. Бейсик относится к языкам программирования высокого уровня. Как и другие языки, этот язык имеет алфавит, синтаксис, семантику.
40 слайд
Алфавит языка
Алфавит языка Basic представляет собой таблицу символов ASCII. Первая половина этой таблицы (символы с кодом 0-127) - стандартная. Вторая половина (символы с кодом 128-255) специфична для каждой страны. В этой таблице каждый символ имеет 8-битовое обозначение. Итак, в алфавит языка Basic входят все прописные и заглавные буквы английского и русского алфавитов, цифры, а также набор специальных символов, который имеется на клавиатуре компьютера.
Рабочие листы
к вашим урокам
Скачать
6 656 258 материалов в базе
Настоящий материал опубликован пользователем Шаронова Селена Михайловна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс повышения квалификации
36/72 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Мини-курс
3 ч.
Мини-курс
6 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.