2020 MARREX.RU NEW DISIGN & NEW LOOK 2013 У нас третья реинкарнация ... возможны сбои в работе системы Теги:
#ссср (48)
#youtube (44)
#фото (12)
Показать еще
#paint (11)
#winrar (7)
#web (3)
#sony (2)
#nokia (2)
#word (2)
#мтс (2)
#admlis (1)
#elo (1)
#вов (1)
#accept (1)
#demix (1)
#kelme (1)
#ac_dс (1)
#doogee (1)
#суп (1)
#epson (1)
#nikon (1)
letisops

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

05/14/2017 24:01:29 | Марат | | 1861 | 8340 | 61 | 0 | 0 | Поддержи проект! Теги: #информатика , Поддержи проект! Теги: #информатика ,

Прежде чем читать страницу про урок информатики, я хочу вам сказать, что скопировать вы отсюда не сможете!

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

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

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

  1. Задание по информатике - «создать свой сайт»
  2. Сделать простую "html" страницу
  3. Создадим таблицу на странице задания по информатике:
  4. Вставляем логотип на страницу задания по информатике:
  5. Задний фон на странице задания по информатике:
  6. Создадим стили на странице задания по информатике:
  7. Поведение ссылок на странице задания по информатике
  8. Поведение ссылок на странице задания по информатике
  9. Создадим ссылки на странице задания по информатике:
  10. Вставляем фото на страницу задания по информатике.
  11. Ява скрипт на странице задания по информатике:
  1. Задание по информатике - «создать свой сайт»

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

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

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

    Сделать простую "html" страницу

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

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

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

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

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

  2. Сделать простую "html" страницу

    Начнем с создания простой "html" страницы.

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

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

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

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

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

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

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

    <head>

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

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

    </head>

    <body>

    Текст....

    </body>

    </html>

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

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

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

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

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

    Страница готова!

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

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

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

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

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

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

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

    Одна ячейка

    2 ячейки.

    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>

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

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

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

    <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"

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

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

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

    <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="https://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.

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

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

    <ul class="cssmenu">

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

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

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

    </ul>

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

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

    <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>

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

    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;

    }

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

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

    Пунк 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="https://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>

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

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

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

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

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

    1

    index.htm

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

    2

    1.html

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

    3

    2.html

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

    4

    3.html

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

    В меню :

    Для главной на сайтах ставится 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>

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

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

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

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

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

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

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

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

    Код до:

    <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>

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

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

    <script language="JavaScript">

    <!--

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

    //-->

    </script>

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

    между тегами

    </head>

    Скрипт

    <body>

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

    </head>

    <script language="JavaScript">

    <!--

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

    //-->

    </script>

    <body>

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

    Смотрим.

https://marrex.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги :

скачать сайт для урока информатики уже сделанный

как сделать сайт на урок информатики

как сделать сайт по информатике

как сделать сайт по информатике

как сделать сайт информатика 8 класс

на какую тему сделать сайт по информатике

как сделать сайт 9 класс информатика

как сделать сайт 9 класс информатика

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

гдз по информатике сделать сайт

сделать сайт по информатике в блокноте

как сделать сайт на урок информатики

как сделать сайт на урок информатики

как сделать сайт информатика 11 класс

как сделать веб сайт по информатике

Поддержать проект Marrex.ru

Вы можете сказать мне спасибо:

 поддержи проект

Поделиться ссылкой с друзьями или врагами!

Написать отзыв в Яндексе, из Яндекс браузера стало намного проще! В адресной строке, справа, видим кнопку с количеством отзывов, естественно, нужно быть зарегистрированным в Яндексе, выбираем оценку и можно написать комментарий к оценке!

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

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



Последние комментарии :
Марат :
14/07/2020 08:49
Друзья! Не нужно опускаться до оскорблений! Вы приходите в гости, считаете себя самыми умными, но считаете…
подробнее.
Марат :
10/07/2020 02:17
Ну чтож! Поздравляю! Никогда Firefox не пользовался и не собираюсь этого…
подробнее.
Дементьев Игорь Станиславович :
10/07/2020 08:31
В "огненном лисе" с папками все намного проще и…
подробнее.
ваня :
09/07/2020 03:36
это понятно что это такое если бы ты еще прикрепил слова которые можно было вставить просто то было бы…
подробнее.
Марат :
21/06/2020 01:11
Жена попросила на день рождения норку. Копаю в саду уже второй день. Волнуюсь... вдруг не…
подробнее.
MARREX.RU © 2013 - 2020 При активном участии DwWeb.ru 2015 - 2020 Мы на лучшем хостинге ruweb