ИНСТРУКЦИОННО-ТЕХНОЛОГИЧЕСКАЯ
КАРТА
ТЕМА: «Создание
одностраничного Web- сайта, содержащего вложенные
списки».
ЦЕЛЬ: Сформировать
навыки построения одностраничного документа.
Для начала создайте на рабочем столе Вашего
компьютера папку и назовите ее "Мой сайт". Далее 2 рисунка поместите
в папку "Мой сайт".
Итак, мы будем создавать
одностраничный сайт с помощью текстового редактора "Блокнот. 
Откройте текстовый редактор
"Блокнот". Откроется окно нового документа (Безымянный). Теперь
откройте рисунок 1 и скопируйте html-код будущей веб-страницы (выделите текст,
нажмите Ctrl+C). Затем вставьте его в документ Блокнота. Теперь нужно сохранить
документ Блокнота как index.html (в меню Блокнота Файл - Сохранить как - в
открывшемся окне заполните все строки (папка, имя файла, тип файла, кодировка)
как на рисунке, расположенном ниже): 
Теперь можно посмотреть, что у Вас получилось.
Для этого откройте папку "Мой сайт. Вот что у Вас должно получиться
Таким образом, у Вас в папке "Мой
сайт" находится 3 файла:
index.html,
tree.jpg и k.gif. Чтобы редактировать контент (содержание Вашего сайта), мы
будем работать с файлом index.html. Для редактирования этот файл нужно открыть
с помощью редактора Блокнот. Для этого щелкните по файлу index.html правой
кнопкой "мышки", в открывшемся меня выберите Открыть с помощью -
Блокнот (как на рисунке слева).
"ПОСМОТРЕТЬ, ЧТО ПОЛУЧИЛОСЬ". Вы
увидите как это выглядит на языке HTML и в окне браузера (т.е. как если бы Вы
открыли страницу в интернете). Итак, начинаем.
ШАГ № 1.
|
ПРОСТЕЙШИЙ
СПОСОБ СОЗДАНИЯ САЙТА. ШАГ № 1.
|
|
Задаем цвет фона нашего сайта (прописываем его в открывающем
теге <body>):
<body
bgcolor="#33CCCC"> ...
</body>
|
Описание на языке
HTML:
|
Вид в браузере:
|
|
<html>
<head>
<title>Как начать зарабатывать в интернете.</title>
<meta
http-equiv="Content-Type"content="text/html;
charset=windows-1251">
</head>
<body bgcolor="#33CCCC">
...
</body>
</html>
|
|
где bgcolor - это фон, а в кавычках ("#33CCCC")
указывается код его цвета.
|
ШАГ № 2.
|
ПРОСТЕЙШИЙ
СПОСОБ СОЗДАНИЯ САЙТА. ШАГ № 2.
|
|
Строим таблицу (рамку нашего сайта) и в открывающем теге <table>
задаем ее параметры:
<table
width="750" border="1" align="center"
cellpadding="10" bordercolor="33CCCC"
bgcolor="FFFFFF">
|
Описание на языке
HTML:
|
Вид в браузере:
|
|
<html>
<head>
<title>Как начать зарабатывать в интернете.</title>
<meta
http-equiv="Content-Type"content="text/html;
charset=windows-1251">
</head>
<body bgcolor="#33CCCC">
<table width="750" border="1"
align="center" cellpadding="10"
bordercolor="33CCCC" bgcolor="FFFFFF">
...
</table>
</body>
</html>
|
|
width - ширина таблицы,
border - толщина рамки (если рамка не нужна, значение этого парамента
будет "0"),
align - выравнивание таблицы по горизонтали (center - по центру, left
- по левому краю, right - по правому краю),
cellpadding - расстояние между границей ячейки и ее содержимым (чтобы
текст не "прилипал" к границам),
bordercolor - цвет рамки таблицы,
bgcolor - цвет фона внутри таблицы.
|
ШАГ
№ 3.
|
ПРОСТЕЙШИЙ
СПОСОБ СОЗДАНИЯ САЙТА. ШАГ № 3.
|
|
Начинаем пользоваться тегом <TD>,
наполняем нашу ячейку таблицы содержимым. Пишем заголовок, выравниваем текст по
центру, шрифт будет полужирный,
выбираем цвет шрифта ("#0033CC")
и его размер ("4").
|
Описание на языке
HTML:
|
Вид в браузере:
|
|
<html>
<head>
<title>Как начать зарабатывать в
интернете.</title>
<meta http-equiv="Content-Type"content="text/html;
charset=windows-1251">
</head>
<body bgcolor="#33CCCC">
<table width="750" border="1"
align="center" cellpadding="10"
bordercolor="33CCCC" bgcolor="FFFFFF">
<td>
<p align="center"><b><font color="#0033CC" size="4">УЗНАЙТЕ, КАК НАЧАТЬ ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!</font></b></p>
</td>
</table>
</body>
</html>
|
|
УЗНАЙТЕ, КАК НАЧАТЬ
ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!
|
|
|
ШАГ № 4.
|
ПРОСТЕЙШИЙ
СПОСОБ СОЗДАНИЯ САЙТА. ШАГ № 4.
|
|
На второй строке пишем приветствие, выравниваем текст по
центру, устанавливаем параметры шрифта (полужирный
и курсив) и увеличиваем размер шрифта ("5"):
<p
align="center"><b><i><font
color="#0033CC" size="5">Здравствуйте, уважаемый
посетитель!</font></i></b></p>
|
Описание на языке
HTML:
|
Вид в браузере:
|
|
<html>
<head>
<title>Как начать зарабатывать в
интернете.</title>
<meta
http-equiv="Content-Type"content="text/html;
charset=windows-1251">
</head>
<body bgcolor="#33CCCC">
<table width="750" border="1" align="center"
cellpadding="10" bordercolor="33CCCC"
bgcolor="FFFFFF">
<td>
<p align="center"><b><font color="#0033CC" size="4">УЗНАЙТЕ, КАК НАЧАТЬ ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!</font></b></p>
<p align="center"><b><i><font
color="#0033CC" size="5">Здравствуйте,
уважаемый посетитель!</font></i></b></p>
</td>
</table>
</body>
</html>
|
|
УЗНАЙТЕ, КАК НАЧАТЬ
ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!
Здравствуйте, уважаемый
посетитель!
|
|
|
ВНИМАНИЕ! Файл с картинкой всегда должен быть
расположен в той же папке, что и файл index, иначе придется прописывать полный
путь к файлу с картинкой (его адрес).
ШАГ № 5.
|
ПРОСТЕЙШИЙ
СПОСОБ СОЗДАНИЯ САЙТА. ШАГ № 5.
|
|
На этом шаге мы вставляем картинку и прописываем текст:
<img src="tree.jpg" width="150"
height="156" align="left" hspace="10">
<p align="justify"><font
color="#000000" size="3">Вы
находитесь в поиске информации о том, как начать зарабатывать в интернете?
Меня зовут Мария и я расскажу Вам, что и как нужно делать, чтобы Ваш путь
начинающего интернет-предпринимателя был не столь трудным и не столь длинным.</font></p>
|
Описание на языке
HTML:
|
Вид в браузере:
|
|
<html>
<head>
<title>Как начать зарабатывать в
интернете.</title>
<meta
http-equiv="Content-Type"content="text/html;
charset=windows-1251">
</head>
<body bgcolor="#33CCCC">
<table width="750" border="1"
align="center" cellpadding="10"
bordercolor="33CCCC" bgcolor="FFFFFF">
<td>
<p align="center"><b><font color="#0033CC" size="4">УЗНАЙТЕ, КАК НАЧАТЬ ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!</font></b></p>
<p align="center"><b><i><font
color="#0033CC" size="5">Здравствуйте,
уважаемый посетитель!</font></i></b></p>
<img src="tree.jpg" width="150"
height="156" align="left" hspace="10">
<p align="justify"><font
color="#000000" size="3">Вы
находитесь в поиске информации о том, как начать зарабатывать в интернете?
Меня зовут Мария и я расскажу Вам, что и как нужно делать, чтобы Ваш путь
начинающего интернет-предпринимателя был не столь трудным и не столь
длинным.</font></p>
</td>
</table>
</body>
</html>
|
|
УЗНАЙТЕ, КАК НАЧАТЬ
ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!
Здравствуйте, уважаемый
посетитель!
 Вы
находитесь в поиске информации о том, как начать зарабатывать в
интернете? Меня зовут Мария и я расскажу Вам, что и как нужно делать,
чтобы Ваш путь начинающего интернет-предпринимателя был не столь трудным
и не столь длинным.
|
|
|
ШАГ № 6.
|
ПРОСТЕЙШИЙ
СПОСОБ СОЗДАНИЯ САЙТА. ШАГ № 6.
|
|
Продолжаем написание текста с такими же характеристиками (<p
align="justify"><font
color="#000000" size="3">).
Начинаем пользоваться тегом <br>.
|
Описание на языке
HTML:
|
Вид в браузере:
|
|
<html>
<head>
<title>Как начать зарабатывать в
интернете.</title>
<meta
http-equiv="Content-Type"content="text/html;
charset=windows-1251">
</head>
<body bgcolor="#33CCCC">
<table width="750" border="1"
align="center" cellpadding="10"
bordercolor="33CCCC" bgcolor="FFFFFF">
<td>
<p align="center"><b><font color="#0033CC" size="4">УЗНАЙТЕ, КАК НАЧАТЬ ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!</font></b></p>
<p align="center"><b><i><font
color="#0033CC" size="5">Здравствуйте,
уважаемый посетитель!</font></i></b></p>
<img src="tree.jpg" width="150"
height="156" align="left" hspace="10">
<p align="justify"><font
color="#000000" size="3">Вы
находитесь в поиске информации о том, как начать зарабатывать в интернете?
Меня зовут Мария и я расскажу Вам, что и как нужно делать, чтобы Ваш путь
начинающего интернет-предпринимателя был не столь трудным и не столь
длинным.
<br><br>
Итак, что же необходимо для того, чтобы начать свой бизнес в
интернете? Основными инструментами интернет-бизнеса являются свой сайт,
обеспечение трафика на свой сайт, рассылка и востребованный продукт,
который Вы будете продвигать.
<br><br>
Изучив мой сайт, вы сможете:
</td>
</table>
</body>
</html>
|
|
УЗНАЙТЕ, КАК НАЧАТЬ
ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!
Здравствуйте, уважаемый
посетитель!
Вы
находитесь в поиске информации о том, как начать зарабатывать в
интернете? Меня зовут Мария и я расскажу Вам, что и как нужно делать,
чтобы Ваш путь начинающего интернет-предпринимателя был не столь трудным
и не столь длинным.
Итак,
что же необходимо для того, чтобы начать свой бизнес в интернете?
Основными инструментами интернет-бизнеса являются свой сайт, обеспечение
трафика на свой сайт, рассылка и востребованный продукт, который Вы
будете продвигать.
Изучив
мой сайт, вы сможете:
|
|
|
ШАГ № 7.
|
ПРОСТЕЙШИЙ
СПОСОБ СОЗДАНИЯ САЙТА. ШАГ № 7.
|
|
Вставляем в текст маркированный список:
<ul>
<li>создать свой сайт;</li>
<li>привлечь большое количество
посетителей на свой сайт;</li>
<li>зарабатывать на своем сайте.</li>
</ul>
|
Описание на языке
HTML:
|
Вид в браузере:
|
|
<html>
<head>
<title>Как начать зарабатывать в
интернете.</title>
<meta
http-equiv="Content-Type"content="text/html;
charset=windows-1251">
</head>
<body bgcolor="#33CCCC">
<table width="750" border="1"
align="center" cellpadding="10"
bordercolor="33CCCC" bgcolor="FFFFFF">
<td>
<p align="center"><b><font color="#0033CC" size="4">УЗНАЙТЕ, КАК НАЧАТЬ ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!</font></b></p>
<p align="center"><b><i><font
color="#0033CC" size="5">Здравствуйте,
уважаемый посетитель!</font></i></b></p>
<img src="tree.jpg" width="150"
height="156" align="left" hspace="10">
<p align="justify"><font
color="#000000" size="3">Вы
находитесь в поиске информации о том, как начать зарабатывать в интернете?
Меня зовут Мария и я расскажу Вам, что и как нужно делать, чтобы Ваш путь
начинающего интернет-предпринимателя был не столь трудным и не столь
длинным.
<br><br>
Итак, что же необходимо для того, чтобы начать свой бизнес в
интернете? Основными инструментами интернет-бизнеса являются свой сайт,
обеспечение трафика на свой сайт, рассылка и востребованный продукт,
который Вы будете продвигать.
<br><br>
Изучив мой сайт, вы сможете:
<ul>
<li>создать свой сайт;</li>
<li>привлечь большое количество
посетителей на свой сайт;</li>
<li>зарабатывать на своем сайте.</li>
</ul>
</td>
</table>
</body>
</html>
|
|
УЗНАЙТЕ, КАК НАЧАТЬ
ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!
Здравствуйте, уважаемый
посетитель!
Вы
находитесь в поиске информации о том, как начать зарабатывать в
интернете? Меня зовут Мария и я расскажу Вам, что и как нужно делать,
чтобы Ваш путь начинающего интернет-предпринимателя был не столь трудным
и не столь длинным.
Итак,
что же необходимо для того, чтобы начать свой бизнес в интернете?
Основными инструментами интернет-бизнеса являются свой сайт, обеспечение
трафика на свой сайт, рассылка и востребованный продукт, который Вы
будете продвигать.
Изучив
мой сайт, вы сможете:
- создать
свой сайт;
- привлечь
большое количество посетителей на свой сайт;
- зарабатывать
на своем сайте.
|
|
|
ШАГ № 8.
|
ПРОСТЕЙШИЙ
СПОСОБ СОЗДАНИЯ САЙТА. ШАГ № 8.
|
|
Теперь вставляем небольшую табличку и вписываем в нее свои
контакты:
<table width="250" border="0"
align="left" cellpadding="10"
bgcolor="FFFFFF">
<td>
<p align="center"><b><font
color="#0033CC" size="3">МОИ
КОНТАКТЫ:
<br><br>
<i>e-mail: mybox@yandex.ru
<br><br>
ICQ: 123456789</font></i></b></p>
</td>
</table>
|
Описание на языке
HTML:
|
Вид в браузере:
|
|
<html>
<head>
<title>Как начать зарабатывать в
интернете.</title>
<meta
http-equiv="Content-Type"content="text/html; charset=windows-1251">
</head>
<body bgcolor="#33CCCC">
<table width="750" border="1"
align="center" cellpadding="10"
bordercolor="33CCCC" bgcolor="FFFFFF">
<td>
<p align="center"><b><font color="#0033CC" size="4">УЗНАЙТЕ, КАК НАЧАТЬ ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!</font></b></p>
<p align="center"><b><i><font
color="#0033CC" size="5">Здравствуйте,
уважаемый посетитель!</font></i></b></p>
<img src="tree.jpg" width="150"
height="156" align="left" hspace="10">
<p align="justify"><font
color="#000000" size="3">Вы
находитесь в поиске информации о том, как начать зарабатывать в интернете?
Меня зовут Мария и я расскажу Вам, что и как нужно делать, чтобы Ваш путь
начинающего интернет-предпринимателя был не столь трудным и не столь
длинным.
<br><br>
Итак, что же необходимо для того, чтобы начать свой бизнес в
интернете? Основными инструментами интернет-бизнеса являются свой сайт,
обеспечение трафика на свой сайт, рассылка и востребованный продукт,
который Вы будете продвигать.
<br><br>
Изучив мой сайт, вы сможете:
<ul>
<li>создать свой сайт;</li>
<li>привлечь большое количество
посетителей на свой сайт;</li>
<li>зарабатывать на своем сайте.</li>
</ul>
<table width="250" border="0" align="left"
cellpadding="10" bgcolor="FFFFFF">
<td>
<p align="center"><b><font color="#0033CC" size="3">МОИ КОНТАКТЫ:
<br><br>
<i>e-mail: mybox@yandex.ru
<br><br>
ICQ: 123456789</font></i></b></p>
</td>
</table>
</td>
</html>
|
|
УЗНАЙТЕ, КАК НАЧАТЬ
ЗАРАБАТЫВАТЬ В ИНТЕРНЕТЕ!
Здравствуйте, уважаемый
посетитель!
Вы
находитесь в поиске информации о том, как начать зарабатывать в
интернете? Меня зовут Мария и я расскажу Вам, что и как нужно делать,
чтобы Ваш путь начинающего интернет-предпринимателя был не столь трудным
и не столь длинным.
Итак,
что же необходимо для того, чтобы начать свой бизнес в интернете?
Основными инструментами интернет-бизнеса являются свой сайт, обеспечение
трафика на свой сайт, рассылка и востребованный продукт, который Вы
будете продвигать.
Изучив
мой сайт, вы сможете:
- создать
свой сайт;
- привлечь
большое количество посетителей на свой сайт;
- зарабатывать
на своем сайте.
|
МОИ КОНТАКТЫ:
e-mail: mybox@yandex.ru
ICQ: 123456789
|
|
|
|
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.