Рабочие листы
к вашим урокам
Скачать
1 слайд
Разработка сайта с помощью языка разметки гипертекста HTML
2 слайд
1 урок
Создать папку «Сайт»
Открыть папку и создать в ней документ с помощью текстового редактора «Блокнот» с именем «1.txt»
Открыть документ и ввести теги, определяющие структуру Web-страницы:
3 слайд
<html>
<head>
<title>Компьютер</title>
</head>
<body>
Компьютер и ПО
</body>
</html>
4 слайд
4. Сохранить документ следующим образом:
5. ФАЙЛ Сохранить какимя файла/ index.html тип файла /все файлы
6. Открыть и просмотреть получившуюся Web-страницу в браузере
5 слайд
Вид страницы в блокноте
Вид Web-страницы в браузере
Вид Web-страницы
6 слайд
Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов можно задать различные параметры форматирования текста.
7. Открыть файл «1.txt» для редактирования
7 слайд
<FONT COLOR="blue">
<Н1 ALIGN="center">
Компьютер и ПО
</Н1>
</FONT>
<HR>
<Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>
<Р ALIGN="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</Р>
8 слайд
<html>
<head>
<title>Компьютер</title>
</head>
<body>
<font color="blue">
<h1 align="center">
Все о компьютере
</h1>
</FONT>
<hr>
<p align="left">На сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>
<p align="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету</p>
</body>
</html>
Вид web-страницы в блокноте
9 слайд
10 слайд
Вид web-страницы в браузере
11 слайд
Вставка изображений в Web-страницы
На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG.
Вставка изображений. Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:
<IMG SRC="computer.gif''>
12 слайд
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
<IMG SRC="C:\computer\computer.gif">
Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
На домашней странице сайта "Компьютер" логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28):
<IMG SRC="computer.gif" ALIGN="right">
13 слайд
8.
14 слайд
15 слайд
Гиперссылки на Web-страницах
Гиперссылки. Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.
Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница:
<А HREF="Адрес">Указатель ссылки</А>
Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:
<А HREF="f ilename.htm">Указатель ссылки</А>
Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:
<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Указатель ссылки</А>
16 слайд
Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.
Гиперссылки могут содержать адреса не только Web-страниц, но и файлов других типов. Активизация таких гиперссылок будет приводить:
к просмотру изображения в браузере:
<А HREF="picture.jpg">Изображение</A>
к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла:
<А HREF="sound.wav">Звук</A>
к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов:
<А HREF="Apxив.ziр">Скачать файл</А>
17 слайд
Панель навигации по сайту
Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие "пустые" страницы должны иметь заголовки, но могут пока не иметь содержания:
<HTML>
<HEAD>
<ТITLЕ>Заголовок страницы</ТITLЕ>
</HEAD>
<BODY>
</BODY> </HTML>
18 слайд
На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.
Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:
<Р ALIGN="center">
[<А HREF="software . htm">Программы</A>]
[<A HREF="glossary.htm">Словарь</A>]
[<A HREF="hardware.htm">Комплектующие</А>]
[<A HREF="anketa.htm">Aнкетa</A>]
</P>
19 слайд
Гиперссылка на адрес электронной почты
Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты с указанием протокола (mailto:)и вставить ее в контейнер <ADDRESS></ADDRESS>, «href» написать адрес электронной почты с указанием протокола (mailto:который задает стиль абзаца, принятый для указания адреса, например:
<ADDRESS>
<А HREF="mailto:username@server.ru">E-mail:
username@server.ru</A>
</ADDRESS>
20 слайд
Вид web-страницы в блокноте
21 слайд
Списки на Web-страницах
Нумерованные списки. Нумерованный список располагается внутри контейнера <OL></OL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и ДР.:
<OL>
< LI >Системные программы
< LI >Прикладные программы
< LI >Системы программирования
</OL>
22 слайд
Маркированные списки. Маркированный список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность):
<UL TYPE="square">
< LI >текстовые редакторы;
< LI >графические редакторы;
< LI >электронные таблицы;
< LI >системы управления базами- данных.
</UL>
23 слайд
<INPUT TYPE="radio" NAME="group"
VALUE="учитель"> учитель
<BR>
<FORM ACTION=MAILO:”username@server.ru”>
METHOD="POST"
ENNCTYPE="text/plain">
<INPUT TYPE="submit"
VALUE="Отправить">
</body>
</html>
Рабочие листы
к вашим урокам
Скачать
Пошаговая разработка сайта с помощью языка разметки гипертекста HTML по учебнику Н. Д. Угриновича. Тема урока: Web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице. Предмет: Информатика. Класс: 8 Ключевые слова: Web- страница, Web- сайт, тег, язык HTML, сервер. Оборудование: компьютерный класс, локальная сеть, Интернет, проектор, экран. Тип урока: изучения новых знаний. Формы работы: фронтальная, коллективная, индивидуальная на компьютере. Цель урока: познакомить учащихся с языком разметки гипертекста HTML, структурой Web-страницы и форматированием текста на Web-странице; начать разработку Web-страницы. Задачи: Организация деятельности учащихся по изучению новой темы; Ознакомление учащихся с понятием сайта, структурой web- страницы, основными тегами; Способствование развитию памяти, внимания, мышления. Ход урока: Организационный момент. Приветствие учащихся. Проверка готовности к уроку. Изучение нового материала. Тема нашего сегодняшнего урока: «Web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице». Основные моменты и определения учащиеся записывают в тетрадях. Итак, что же такое Web-сайт и Web-страница? Собрание страниц, объединенных некоторой общей тематикой и помещенных, как правило, на одном компьютере, называют Web-узлом или сайтом. Узлы Web подобны книгам, а Web-страницы - страницам этих книг. Компьютеры, на которых размещаются сайты, а также программы, обеспечивающие поддержку сайтов, называются серверами. На одном сервере может размещаться множество Web-узлов или сайтов. Чтобы опубликовать в Интернете страницу, содержащую некоторую информацию, используется специально разработанный для этого язык HTML. HTML – HyperText Markup Language (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части – заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране. Создавать Web-страницы можно с помощью специальных программ-редакторов, автоматически генерирующих код HTML, работа с которыми не требует знания языка разметки. Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение .html или .htm. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки и , например , , . Такие элементы разметки называются тэгами. Тэги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов: • левой угловой скобки ; • необязательного символа слэш /, который означает, что тэг является конечным тэгом, закрывающим некоторую структуру, например, . В этом смысле можно читать символ / как конец некоторого элемента разметки, например, строки или абзаца; • имени тэга, например, html; • необязательных атрибутов. Тэг может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например, align="center"; • правой угловой скобки . Таким образом, открывающий тэг , стоящий вначале документа HTML и означающий его начало, состоит из имени html и двух угловых скобок , а тэг , находящийся в конце Web-документа, кроме указанных элементов содержит также символ слэш /, означающий закрывающий тэг и указывающий на конец документа. В тэгах могут использоваться только символы латинского алфавита, а в значениях атрибутов - любые символы. Если в качестве значений атрибута используются, например, символы кириллицы, то они должны быть заключены в кавычки, например name="Раздел 1". Язык HTML не различает большие и малые буквы, так что тэги , и эквивалентны. Большинство тэгов спарены: за открывающим тэгом следует соответствующий ему закрывающий тэг, а между ними содержится текст или другие тэги.
6 625 838 материалов в базе
Настоящий материал опубликован пользователем Ефремчева Светлана Федоровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материалВаша скидка на курсы
40%Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Курс профессиональной переподготовки
300 ч. — 1200 ч.
Мини-курс
6 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.