Рабочие листы
к вашим урокам
Скачать
1 слайд
Создание Web-страницы для начинающих
Подготовила учитель информатики: Путятина Татьяна Юрьевна
2 слайд
Здравствуй пользователь. Если ты желаешь создать свою web-страницу и не знаешь как это сделать, то не отчаивайся. Как всегда – выход есть.
Этот краткий курс тебе в этом поможет.
3 слайд
Для начала немного теории:
1. Существует специальный язык Web-страниц HTML (HyperText Markup Language) – язык разметки гипертекста для публикации документов в глобальной или кооперативной сети.
2. При создании Web-документа необходимо учесть следующие моменты:
- все создаваемые файлы будущего проекта (сайта) должны сохраняться в одну папку (Web-страницы, видео- и звуковой файлы);
- в имени Web-документа разрешается использовать латинские буквы, цифры. Расширение Web-документа – html или htm.
3. Для создания электронного документа необходим любой текстовый редактор. Мы будем использовать «Блокнот».
4. Просмотр результата созданной вами Web-страницы осуществляется в программе-браузере. Примером этой программы может послужить нам Internet Explorer или Google Chrome.
4 слайд
При создании web-документа мы будем использовать Теги.
Тег – инструкция браузеру, указывающая способ отражения текста.
Тег всегда заключается в треугольные скобки - <…>.
Открывается тег знаком меньше <, закрывается знаками слэш и больше />
5 слайд
<html>…</html> - парные теги указывающие на начала и конец web-документа.
<head>…</head> - парные теги, описывающие заголовок документа.
<title>…</title > - парные теги используются для размещения заголовка окна.
<body>…</body> - парные теги внутри которых пишется содержимое web-страницы(текст, картинки, аудио и видео файлы, таблицы, гиперссылки на другие web-страницы).
6 слайд
Приступим к созданию web-документа:
1. Создадим на рабочем столе новую папку и назовем ее «Моя веб-страница». Для этого нажмем кликнем правой кнопкой мыши по рабочему столу и в контекстном меню выберем пункт «Создать». Далее выйдет еще одно контекстное меню, выберем пункт «Папку»
7 слайд
8 слайд
2. Откроем программу «Блокнот».
Для этого зайдем в меню «Пуск» >> «Все программы» >> «Стандартные» >> «Блокнот».
9 слайд
3. Наберем структуру HTML-документа.
Для этого переключим язык с русского на английский, по умолчанию это комбинация клавиш Alt + Shift.
<html>
<head>
<title>…</title>
</head>
<body>
…
…
</body>
</html>
10 слайд
11 слайд
4. Сохраните файл в папке «Моя веб-страница», присвоив имя 1.html
Для этого нужно в блокноте кликнуть вкладке «Файл» >> «Сохранить как…». Появиться окно, в появившемся окне в строке «тип файла» указываем «все файлы».
В строке «Имя файла» Пишем имя документа 1.html
Указываем путь в ранее созданной нами папке и кликаем «сохранить».
12 слайд
5. Зайдем в папку, вызовем контекстное меню на файле(кликнуть правой кнопкой мыши по файлу) 1.html >> «Открыть с помощью» Internet Explorer или Google Chrome.
Смотрим результат и закрываем браузер.
13 слайд
Первый урок завершен!
Поздравляю!
14 слайд
Урок второй.
Теперь мы сделаем нашу веб-страницу более красивой.
Поставим перед собой цель, например:
Создать краткую биографию о себе с приложением картинок.
15 слайд
1. Зайдем в нашу папку и откроем наш файл 1.html через «Блокнот», кликнув по файлу правой кнопкой мыши и в контекстном меню выбрать «открыть с помощью» >> «Блокнот»
2. В строке <title> введем текст: Моя биография и вашу фамилию имя отчество.
16 слайд
Теперь переходим в оформлению страницы
3. в теге <body> допишем bgcolor=“gray”>
должно получиться вот так:
<body bgcolor=“gray”>
Это сделает фон нашей страницы серым.
Можно выставить и другой цвет, для этого нужно в кавычках слово grey изменить на название другого цвета.
Названия цветов должны писаться обязательно на английском языке либо в шестнадцатеричном коде цвета
17 слайд
Вот названия цветов:
18 слайд
4. После тега <body bgcolor=“gray”>
нажмем Enter
и напишем Тег <center>. Это даст нашему следующему тексту находиться по середине страницы.
Жмем Enter >>
19 слайд
5. Придадим заголовку нашей биографии более красивый внешний вид.
После тега <center>
с новой строки напишем следующую комбинацию:
<font size=4 color=“black” face=“Georgia”>
Это будет внешним видом нашего заголовка.
Size – это размер шрифта
color – это цвет
face – определение типа шрифта.
Размер шрифта определяется от 1 до 7.
Через пробел напишем тег <I> - это позволит нашему тексту отображаться курсивом.
Далее через пробел напишем «Моя биография» и через пробел закроем предыдущие теги </I> </font>
Жмем Enter >> пишем </center>
20 слайд
Должно получиться вот так >>
21 слайд
Теперь перейдем к написанию самой биографии и ее оформлению.
6. Пишем тег <center> через пробел пишем нужное нам оформление дальнейшего текста
<font size=2 color="black" face="Georgia">
Жмем Enter пишем свою биографию, минимум 3 – 4 предложения.
После написания текста Жмем Enter и закрываем теги </font> <center>
22 слайд
Должно получиться вот так >>
23 слайд
Теперь посмотрим что получилось через браузер:
для этого закроем блокнот сохранив и откроем наш файл через браузер (клик правой кнопкой мыши по файлу >> контекстное меню >> Открыть с помощью ….
24 слайд
Если все написано и составлено верно, то наша с вами страница будет выглядеть вот так >>
Стало чуть красивее, чем было изначально.
25 слайд
Понемногу мы приближаемся к нашей цели, теперь сделаем вторую часть. Добавим картинки на веб-страницу.
Перед тем как приступить к дальнейшему заданию, поставим перед собой несколько простых задач.
26 слайд
1. Перейдем на новую строку
2. По центру напишем какие мы любим цветы и вставим картинку
3. Далее по центру напишем какой мы любим цвет выделив эту строчку тем цветом какой мы любим.
4. Напишем о том что мы больше всего любим в этой жизни и вставим картинку.
27 слайд
После нашей выше написанной биографии, которая замыкается тегами </font> </center>
жмем Enter
и пишем тег
- этот тег позволит нам перейти на новую пустую строку в веб-документе, он одиночный, поэтому не требуется в закрытии после написания и вставки информации.
28 слайд
После тега жмем Enter и пишем тег <center> что бы следующая информации писалась по центру.
Жмем Enter и пишем строчку «Я люблю такие цветы, как (свои любимые цветы)»
Теперь займемся вставкой картинки наших любимых цветов.
29 слайд
Примечания:
1. Картинки можете найти в интернете и скачать, сохранив их в нашу папку «Моя первая веб-страница» с нашим файлом.
2. Для дальнейшего удобства, советую переименовывать картинки в более простые названия, такие как (cart1, cart2, cart3 и т.д.)
3. при этом нужно заострить внимание на расширении картинки. Это играет очень важную роль в дальнейшем.
Расширение картинки можно узнать, кликнув по картинке правой кнопкой мыши в контекстном меню выбрать пункт «Свойства» и в появившемся окне в строке «Тип Файла» будет написано расширение нужной вам картинки. Там будет присутствовать два расширения – полное и сокращенное. Нам нужно будет только сокращенное, оно указано в скобах маленькими буквами
30 слайд
31 слайд
Вставка ссылки на картинку:
1. Нажав Enter пропишем тег
2. Нажав Enter пропишем тег
<img src=“название картинки.jpg” width=256 height=128>
это ссылка в веб-документе на картинку которую мы вставляем.
Вместо «названия картинки» пишем имя картинки которая содержится уже в нашей папке.
Width и height – это ширина и высота нашей картинки. По умолчанию это 256х128.
32 слайд
После проделанных нами операций, должно получиться следующее
33 слайд
Теперь напишем строчку тем цветом какой нам нравится, например возьмем красный цвет
1. Жмем Enter пишем тег
и снова жмем Enter
2. пишем тег <font> и указываем нужный нам размер шрифта, цвет, и поставим стиль шрифта “Georgia”
Наш тег должен выглядеть следующим образом
<font size=размер шрифта (от 1 до 7) color=ваш любимый цвет на английском языке в кавычках face=“Georgia”> Я люблю …. цвет </font>
34 слайд
Далее мы напишем о том что мы больше всего любим и вставим картинку если таковую найдем в интернете.
1. Жмем Enter пишем тег
2. Жмем Enter пишем то, что мы больше всего любим в жизни и жмем Enter
3. Пишем тег
Жмем enter
и вставляем ссылку на картинку указывая при этом ширину и высоту нашей картинки. И правильно указываем название и расширение нашей картинки.
4. Жмем Enter и закрываем тег </center>
35 слайд
Вот что должно поулчиться:
36 слайд
Теперь глянем что у нас получилось)
Закрываем блокнот и открываем наш файл через браузер. Смотрим что вышло…
37 слайд
Вот то, что получилось у меня >>
Рабочие листы
к вашим урокам
Скачать
Презентация по информатике : "Создание Web-страницы для начинающих "
Для начала немного теории:
1. Существует специальный язык Web-страниц HTML (HyperText Markup Language) – язык разметки гипертекста для публикации документов в глобальной или кооперативной сети.
2. При создании Web-документа необходимо учесть следующие моменты:
- все создаваемые файлы будущего проекта (сайта) должны сохраняться в одну папку (Web-страницы, видео- и звуковой файлы);
- в имени Web-документа разрешается использовать латинские буквы, цифры. Расширение Web-документа – html или htm.
3. Для создания электронного документа необходим любой текстовый редактор. Мы будем использовать «Блокнот».
4. Просмотр результата созданной вами Web-страницы осуществляется в программе-браузере. Примером этой программы может послужить нам Internet Explorer или Google Chrome.
6 610 526 материалов в базе
Настоящий материал опубликован пользователем Путятина Татьяна Юрьевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материалВаша скидка на курсы
40%Курс повышения квалификации
36 ч. — 180 ч.
Курс профессиональной переподготовки
600 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
6 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.