2020 MARREX.RU NEW DISIGN & NEW LOOK 2013 У нас третья реинкарнация ... возможны сбои в работе системы Войти

РЕГИСТРАЦИЯ


Я согласен с правилами
blockUnder

АВТОРИЗАЦИЯ


Запомнить меня
blockUnder

ЗАБЫЛ ПАРОЛЬ

letisops

Урок по информатике создать свой сайт.

05/14/2017 24:01:29 | Марат | | 56 | 5510 | 0 | 0 | Теги: #информатика , Прежде чем читать страницу про урок информатики, я хочу вам сказать, что скопировать вы отсюда не сможете!

Но если вам нужны исходники, все темы, которые рассматриваются на данной странице, то все это можно скачать одним архивом!

Если не получилось скачать то см. здесь.

Предупреждение:

Нельзя тупо  перекатать данный урок и  получить пять!

Требования и взгляд на выполненное задание  у каждого учителя  отличаются.

Прежде чем продолжать, то вот эта старая версия нашего сайта была сделана по этому принципу, как описано ниже… И кстати этот дизайн был сделан в 2008 году…

+ Никакого содержания на страницах нет, простое описание процесса, что за что отвечает. Вам нужно, что-то придумать имеется ввиду наполнение, с использованием функционала данного архива!

Задание по информатике - «создать свой сайт»

Условие задачи:

Создать сайт из не менее 7 страниц.

Тема, содержание и дизайн должны соответствовать друг другу.

Обязательное применение таблиц.

Использовать CSS .

На одной из страниц вставить фотографию.

На одной из страниц использовать ява скрипт.

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

Скачать  задание по информатике "создать сайт".

Где будем делать сайт?

Не только задание по информатике, но и полезная информация для всех, кто интересуется, как самостоятельно сделать сайт.

Можно сделать сайт, который будет располагаться на вашем ПК, с ссылками на страницы  в папке.

Если есть условие - опубликовать ваш сайт в интернете, то надо будет поменять ссылки - на реальные адреса.

Будем создавать с самого начала.

Первая страница сайта называется  index.html

1.

Код самой простой страницы:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Назание страницы</title>

</head>

<body>

Текст....

</body>

</html>

Создаем папку, где будет храниться наш сайт.

Открываем блокнот, копируем отсюда код и вставляем его в блокнот:

Как создать сайт в блокноте

Далее идем – файл – сохранить как –« index.html »

Как создать сайт в блокноте Как создать сайт в блокноте Страница готова!
2.

Создадим таблицу на странице задания по информатике:

Страница будет  построена на таблицах.

Верхняя  таблица – шапка, где будет располагаться логотип вашего сайта:

<table width="800" align="center">

Где  - table width="800" – ширана таблицы 800 пикселей.(вы можете поставить свое значение).

align="center" – будет расположена посередине.

Всего  мы сделаем 3 таблицы:

  1. Одна ячейка
  2. 2 ячейки.
  3. 3 ячейки
Код внутри тега

<body> …….</body>

Код. Где:
<table width="800" align="center">

  <tr>

    <td><div align="center">Логотип</div></td>

  </tr>

</table>

<table width="800" align="center">

  <tr>

    <td width="200">Меню</td>

    <td width="600"><div align="center">Текст</div></td>

  </tr>

</table>

<table width="800" align="center">

  <tr>

    <td width="200"><div align="center">Контакты</div></td>     <td width="400"><div align="center">Задание по информатике </div></td>     <td width="200"><div align="center">Реклама на сайте </div></td>

  </tr>

</table>
 Начало таблицы №1, Шир.-800, центр

 <tr> - начало строки,

<td> - начало ячейки

</tr> - конец строки.

</table> - конец таблицы.

Начало таблицы №2, Шир.-800, центр

 

Левая таблица – меню

Правая таблица – текст

 

 

 

№3

 

 

Первая таблица  – Контакты

Вторая таблица  -  Задание по информатике

 
Третья таблица – Реклама на сайте

Где:

тег <div> - блочный элемент html страницы, который предназначен для управления размещением и придания самых разнообразных свойств текстам, изображениям, ссылкам и др объектам.

Код страницы :

В странице немного изменил вид таблицы – сделал таблицу видимой добавив тег:

border="1"

Вы можете использовать с бордюром или без.

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Назание страницы</title>

</head>

<body>

<table width="800" border="1">

<tr>

<td><div>Логотип</div></td>

</tr>

</table>

<table width="800" border="1">

<tr>

<td width="200">Меню</td>

<td width="600"><div>Текст</div></td>

</tr>

</table>

<table width="800" border="1">

<tr>

<td width="200"><div>Контакты</div></td> <td width="400"><div>Задание по информатике </div></td>
<td width="200"><div>Реклама на сайте </div></td>

</tr>

</table>

</body>

</html>

3.

Вставляем логотип на страницу задания по информатике:

Теперь вставим рисунок в верхнюю таблицу:

Наша строчка была такая:

<td><div align="center">Логотип</div></td>

Слово  «Логитип меняем на  :

<img src="logotip.JPG" width="500" height="200">

Вот так выглядит фото в папке это logotip.JPG

Как изменить это фото на своё.

Урок по информатике

(Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой.)

Эта строчка говорит нам, что наш рисунок имеет название  logotip.JPG  с размером 500 х  200

Внимание:

размер изображения не должен превышать ширину таблицы!

Создадим дополнительную папку и назовем её - "foto"

Наша строчка должна быть такая.

<td><div align="center"><img src="foto/logotip.JPG" width="500" height="200"></div></td>

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

logotip.JPG

Если вы захотите изменить  размеры логотипа, то в верхней  строке

измените размеры изображения на ваши.(это нужно для корректного отображения вашего логотипа).

width="500" height="200"
4.

Задний фон на странице задания по информатике:

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

Добавляем  под строчку 

<title>Название страницы</title> :

<style type="text/css">

<!--

body {

               background-image: url(fon_for_pages.JPG);

               background-repeat: repeat;

}

-->

</style>

Где:

Задний фон страницы - background-image: url(fon_for_pages.JPG);

Повторение и по горизонтали и по вертикали - background-repeat: repeat;

Повторение сделано для того чтобы на задний фон можно было  поставить  маленькую по весу картинку.

Если же вы хотите поставить большую картинку размером …, к примеру 1200 х 720.

Страница будет открываться медленно!

Если же вам не нужен задний фон, то просто удалите эти 2 строчки.

И ещё, чуть не забыл!

До этого у нас таблицы были прозрачными и через них был виден задний фон. Таблицу сделаем белого цвета: добавляем в каждую таблицу :

bgcolor="#FFFFFF"

Строчка должна получиться такая:

<table width="800" align="center" bgcolor="#FFFFFF">

Код страницы:

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Назание страницы</title>

<style type="text/css">

<!--

body {

background-image: url(foto/fon_for_pages.JPG);

background-repeat: repeat;

}

-->

</style>

</head>

<body>

<table width="800" border="1" bgcolor="#FFFFFF">

<tr>
<td><div><img src="http://marrex.ru/__arhiv/_old_foto/informatika/logotip.JPG" width="500" height="200"></div></td>

</tr>

</table>

<table width="800" border="1" bgcolor="#FFFFFF">

<tr>

<td width="200">Меню</td>

<td width="600"><div>Текст</div></td>

</tr>

</table>

<table width="800" border="1" bgcolor="#FFFFFF">

<tr>

<td width="200"><div>Контакты</div></td> <td width="400"><div>Задание по информатике </div></td> <td width="200"><div>Реклама на сайте </div></td> </tr>

</table>

</body>

</html>

 

Смотрим пример как это выглядит -пунк № 3 + 4.

5.

Меню на странице задания по информатике:

Меню вставляем в столбец левый для меню

<ul class="cssmenu">

   <li><a href="#">пункт первый</a></li>

   <li><a href="#">пункт второй</a></li>

   <li><a href="#">пункт третий</a></li>

</ul>

Создадим стили на странице задания по информатике:

Код вставляем после тега

<title>Название страницы</title>

Перед тем, как вставить на страницу убираем строчки с русскими словами.

<style type="text/css">

//зададим стиль для списка

ul.cssmenu {

// убираем отступы

   padding: 0;

   margin: 0;

// убираем точки

   list-style: none;

   width: 150px;

}

//зададим стиль для элементов списка

ul.cssmenu li {

// Чтобы меню корректно отображалось в IE

   float: left;

}

// зададим стиль для анкора в списке

ul.cssmenu li a, ul.cssmenu li a:visited {

// обязательно блочное отображение

   display: block;

// укажем отступы

   padding: 5px;

// сделаем промежутки между пунктами для красоты

   margin-bottom: 1px;

// цвета фона и текста

   color: #FFFFFF;

   background-color: #003366;

   width: 140px;

}

// меняем цвета при наведении

ul.cssmenu li a:hover {

   color: #003366;

   background-color: #FFFFFF;

}

</style>

Поведение ссылок на странице задания по информатике:

a:link {

               color: #0000FF;

               text-decoration: underline;

}

a:visited {

               text-decoration: underline;

}

a:hover {

               text-decoration: none;

               color: #33FF33;

}

a:active {

               text-decoration: underline;

}

a {

               font-family: Times New Roman, Times, serif;

               font-size: 13px;

}

6.

Форматирование текста на странице задания по информатике:

Вся информация о форматировании текста на странице:

Пунк 5 + 6.

код страницы после пункта 5 и 6:

если требуется растянуть фон, то изучаем мат.часть

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

<title>Пример  созданного меню и оформление текста в задание по информатике  - создать сайт</title>

<Meta name="description" Content="Пример  созданного меню и оформление текста в задание по информатике  - создать сайт">

<Meta name="keywords" Content="Пример  созданного меню и оформление текста в задание по информатике  - создать сайт, Пример ,  созданного , меню , и  , оформление , текста , в , задание  , по  , информатике , создать сайт">

<style type="text/css">

body {

  background-image: url(foto/fon_for_pages.JPG);

  background-repeat: repeat;

}

 

a:link {

  color: #0000FF;

  text-decoration: underline;

}

a:visited {

  text-decoration: underline;

}

a:hover {

  text-decoration: none;

  color: #33FF33;

}

a:active {

  text-decoration: underline;

}

a {

  font-family: Times New Roman, Times, serif;

  font-size: 13px;

}

ul.cssmenu {

   padding: 0;

   list-style: none;

   width: 150px;

ul.cssmenu li {

   float: left;

ul.cssmenu li a, ul.cssmenu li a:visited {

   display: block;

   padding: 5px;

   margin-bottom: 1px;

   color: #FFFFFF;

   background-color: #003366;

   width: 200px;

}

ul.cssmenu li a:hover {

   color: #003366;

   background-color: #FFFFFF;

}

h1 { 

  font: 20px Times New Roman;

  font-weight:bold;

  color: #003366;

  letter-spacing: normal;

}

</style>

</head>

<body>

<table width="800" border="1" align="center" bgcolor="#FFFFFF">

  <tr>

    <td><div align="center"><img src="foto/logotip.JPG" width="500" height="200"></div></td>

  </tr>

</table>

  <table width="800" border="1" align="center" bgcolor="#FFFFFF">

      <tr>

        <td width="230" valign="top"><ul class="cssmenu">

          <li><a href="#">ГЛАВНАЯ</a></li>

          <li><a href="1.html">Страница на таблицах</a></li>

          <li><a href="2.html">Логотип + Фон</a></li>

          <li><a href="3.html">Меню + Оформление текста</a></li>

          <li><a href="4.html">Фото на странице </a></li>

          <li><a href="5.html">Изменить размер фото</a></li>

          <li><a href="6.html">Ява скрипт</a></li>

        </ul>

          </p>

        </span></td>

        <td width="600"><h1 title="Пример созданного меню и оформление текста в задание по информатике - создать сайт.">Пример&nbsp; созданного  меню и оформление текста в задание по информатике&nbsp; - создать сайт.</h1>

<p>Оформление текста...</p>

           

            &nbsp;текст с одним  отступом...&amp;nbsp;</br>

             &nbsp;&nbsp;текст с двумя отступоми...&amp;nbsp;&amp;nbsp;</br>

             &nbsp;&nbsp;&nbsp;текст с тремя отступоми...&amp;nbsp;&amp;nbsp;&amp;nbsp;</br>

          

 

          <ol>

            <li>прономерованный</li>

            <li>прономерованный</li>

            <li>прономерованный</li>

            <li>прономерованный</li>

          </ol>

код:

<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ol&gt;<br />

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;прономерованный&lt;/li&gt;<br />

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;прономерованный&lt;/li&gt;<br />

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;прономерованный&lt;/li&gt;<br />

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;прономерованный&lt;/li&gt;<br />

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ol&gt;</p>

          <p align="center">По центру -  &lt;p align=&quot;center&quot;&gt;текст&lt;/p&gt;.</p>

          <p align="right">Справа - &lt;p align=&quot;right&quot;&gt;Текст&lt;/p&gt;.</p>

          <p align="left">Слева -  &lt;p align=&quot;left&quot;&gt;текст&lt;/p&gt;</p>

          <p align="left"><strong>Жирный - &lt;strong&gt;текст&lt;/strong&gt;.</strong></p>

          <p style="font-style: italic;">С наклоном - &lt;p style=&quot;font-style: italic;&quot;&gt;текст&lt;/p&gt;</p>

          Форматирование ссылки

          <p align="left">Вернуться на <a href="http://marrex.ru/Zadania/Zadanie_po_informatike/Zadanie_po_informatike.htm">страницу задания.</a></p></td>

      </tr>

    </table>

  <table width="800" border="1" align="center" bgcolor="#FFFFFF">

      <tr>
        <td width="212"><div align="center">Контакты</div></td>         <td width="400"><div align="center">Задание по информатике </div></td>         <td width="200"><div align="center">Реклама на сайте </div></td>

      </tr>

    </table>

</body>

</html>

7.

Создадим ссылки на странице задания по информатике:

Если  нужно будет опубликовать сайт, то исправляем  index.html – на ссылку сайта,

к примеру на  http://marrex.ru/

Мы создали несколько страниц:

Посмотрим структуру этих ссылок:

1

index.htm

http://marrex.ru/Zadania/Zadanie_po_informatike/index.htm

2

1.html

http://marrex.ru/Zadania/Zadanie_po_informatike/1.html

3

2.html

http://marrex.ru/Zadania/Zadanie_po_informatike/2.html

4

3.html

http://marrex.ru/Zadania/Zadanie_po_informatike/3.html

В меню :

Для главной на cайтах ставится index.html либо index.php.

<ul class="cssmenu">

          <li><a href="index.html">ГЛАВНАЯ</a></li>

          <li><a href="1.html">Страница на таблицах</a></li>

          <li><a href="2.html">Логотип + Фон</a></li>

          <li><a href="3.html">Меню + Оформление текста</a></li>

          <li><a href="4.html">Фото на странице </a></li>

          <li><a href="5.html">Изменить размер фото</a></li>

          <li><a href="6.html">Ява скрипт</a></li>

        </ul>

8.

Вставляем фото на страницу задания по информатике.

Вставляем фото:(нажмите в браузере "ctrl + U" - увидите код.)

……………………………………………………………………………………………………

<p><img src="foto/Simple_page_clip_image001.jpg" width="600" height="449"></p>

……………………………………………………………………………………………………

9.

Изменим фото на странице задания по информатике:

Не меняя размер фотографии меняем размер в коде.

……………………………………………………………………………………………………

Код до:

<p><img src="foto/Simple_page_clip_image001.jpg" width="600" height="449"></p>

Код после:

  <p align="center"><img src="Simple_page_clip_image001.jpg" width="411" height="301"></p></td>

10.

Ява скрипт на странице задания по информатике:

вставляем ява скрипт

<script language="JavaScript">

<!--

alert("Рад видеть Вас на моем сайте! Пошли дальше?");

//-->

</script>

……………………………………………………………………………………………………

между тегами

</head>

Скрипт

<body>

Должно получиться:

</head>

<script language="JavaScript">

<!--

alert("Рад видеть Вас на моем сайте! Пошли дальше?");

//-->

</script>

<body>

Объяснять поведения ява скрипта не буду. Жмем и смотрим, что получилось.

Смотрим.

Поделиться:

Теги: #информатика ,
Статистика по странице:
Всего прсомотров в новом дизайне : 56
Всего прсомотров в старом дизайне : 8877
















Теги:
#youtube (42)
#ссср (11)
Показать еще
#music (4)
#word (2)
#sony (2)
#paint (2)
#web (2)
#мтс (2)
#nokia (2)
#kelme (1)
#admlis (1)
#demix (1)
#epson (1)
#суп (1)
#nikon (1)
#doogee (1)