Интернет. ТЕМА 5. Язык создания сайтов HTML.

PDF стр.  101 - 118.

 

Аудиозаписи по книге
(делались для Windows XP [2002 г. выпуска].
Прочтение автора.

Аудиозаписи по книге (делались для Linux Ubuntu, осень 2008). Читалось в течении 2 занятий по 2ч15 минут чистого времени каждое
 Аудиозаписи по книге (делались для Linux Ubuntu Видеозаписи делались для Linux Ubuntu 10.04 и QuantaPlus

Лекция 1:

  • аудио 1. От трёх назначений HTML (стр. 101) до цветовой кодировки (стр.105) /1,85 Мб/;
  • аудио 2. Теги формирования текстового потока (стр. 105), теги заголовков (стр. 109). Так же ссылка на то, откуда взять примеры КР2 /1,16 Мб/;
  • аудио 3. Теги нестилевого дооформления текста (стр. 109). Теги таблиц (стр. 110 - 111). Теги списков (стр. 111) /0,66 Мб/;
  • аудио 4. НЕ ЗАБУДЬТЕ сохранить созданную страничку в свою папку на сервере Zoo /0,01 Мб/.

    • Лекция 2:

  • не читалась, все самостоятельно по методичке разбирались с гиперссылками и вставкой графических объектов (стр.112 - 117).

    • Ответы на наиболее частые вопросы:

  • вопрос №1. Возникли проблемы с тегами ссылок. Заново разбирали на примере ссылки внутри одной страницы,
    когда вверху документа есть якорь <a name="verh"></a>,
    ниже изобразили большой объём текста за счёт тегов <br>,
    а ещё ниже есть ссылка на вышеописанный якорь <a href=#verh> Текст ссылки </a>.
  • вопрос №2. Наиболее частые проблемы со ссылками - не следят за расширением имени.
  • вопрос №3. Непарный тег <img src="название файла рисунка">.

    • Техника встраивания в свой сайт маленького изображения, с которого будет вести ссылка на большое:

    Текст до гиперссылки.
    <a href="большой.jpg">

      Не обязательный текст до изображения.
      <img src="маленький.jpg">
      Второй необязательный текст, после изображения.

    </a>.
    Текст после гиперссылки

  • вопрос №4. Перемещения mamont.gif и rastiapa.jpg в свою папку.
  • вопрос №5. Коллекция картинок в нашей лаборатории.
  • вопрос №6. Использование таблиц для обтекания графики текстом.
    		•

    Лекция 1:

  • аудио1 - от начала темы и до встраи вания пары тегов <HTML> ... </HTML>;
  • аудио 2 - основные теги структуры документа на языке HTML;
  • аудио 3 - автоматическое указание браузеру кодировки:
  • <meta http-equiv="Содержимое-Тип" content="text/html; charset=utf8">
  • <meta http-equiv="Содержимое-Тип" content="text/html; charset=windows-1251">
  • аудио 4 - смена цвета фона сайта и запуск редактора QuantaPlus;
  • аудио 5 - теги формирования текстового потока <p>, <br>, <hr>
  • аудио 6 - окончание лекции: сохранение папки SAIT_FIO в свою папку на файловом серевер Zoo.

    • Лекция 2:

    1. аудио 7 - теги нестилевого оформления текста <i>...</i>, <b>...</b>, <u>...</u>;
    2. аудио 8 - теги таблиц;
    3. аудио 9 - использование списков;
    4. аудио 10 - якоря и гиперссылки;
    5. аудио 11 - продолжение простановки якоря в документ;
    6. аудио 12 - гиперссылка на второй документ;
    7. аудио 13 - ошибки со ссылками;
    8. аудио 14 - работа с изображениями;

    Техника встраивания в свой сайт маленького изображения, с которого будет вести ссылка на большое:

    Текст до гиперссылки.
    <a href="большой.jpg">

      Не обязательный текст до изображения.
      <img src="маленький.jpg">
      Второй необязательный текст, после изображения.

    </a>.
    Текст после гиперссылки

  • аудио - краткое повторение и постановка задачи на КР №2.

    • Альтернативное, более подробное прочтение лекции:

  • аудио - работа с комментариями;
  • аудио - работа с изображениями, в том числе создание уменьшенного изображения, понятие gif и jpg;
  • аудио - словарь тегов и внутренний ресурс НП "УЦКТ" www.studing.ru.

    •  

    		 Лекция 1 :
  • аудио 1 - язык создания сайтов HTML , от задания 1.2 создания текстовой заготовки , открывющие и закрывающие парные теги <html> ...</html> , сохранение созданнонго документа в формате .htm , открытие и просмотр нового документа в браузере , изменение неправильной кодировки документа , парные теги <head> ...</head> и <body> ...</body> теги заголовка сайта <title>...</title> , добавление тегов <meta > с указанием правильной кодировки)
  • аудио 2 - просмотр документа в браузере , снятие процесса запуска FireFox с помощью системного монитора
  • аудио 3 - работа с редактором HTML - кода QuantaPlus , цветовая кодировка , смена цвета фона , интенсивность цвета , шестнадцатиричная система обозначения цвета , атрибуты открывающих тегов < body bgcolor="#FF0000" text="#336699" >...< /body >
  • аудио 4 - от стр. 105 теги формирования текстового потока : использование пары тегов <p> ...</p> для перехода в новый абзац , непарный тег <br> для перехода на новую строку
  • аудио 5 - атрибуты тега <p> для абзацного выравнивания : <p align="center">...</p>, различные типы выравнивания, непарный тег <hr> для добавления горизонтальной линии , теги заголовков <H1> и <H2> , сохранение папки SAIT_FIO в свою папку на файловом серевер Zoo
    • Лекция 2 :
  • аудио 6 -(продолжение работы с документом , созхраненном на прошлом занятии : от рис 5.2 , теги нестилевого оформления текста <i>...</i> , <b>...</b> , <u>...</u> , очередность закрытия тегов при их совместном использовании
  • аудио 7 - стр. 110 теги таблиц <table>...</table> , задание толщины границ таблицы , <tr>.../<tr> - начало новой строки , <td>...</td> - новая ячейка , создание таблиц с помощью мастера
  • аудио 8 - теги списков стр. 111 нумерованный список :<ul>...</ul> и нумеровнный : <ol>...</ol> , новый элемент списка <li>... </li> , добавление списка с использованием карточки " списки "
  • аудио 9 - стр. 112 теги ссылок , задание 9.1 - 9.3 от создания "якоря " :
    <a name="verh"></a> , увеличение объёма текста за счёт тегов <br> ,
    создание ниже ссылки на вышеописанный якорь
    <a href=#verh> Текст ссылки </a>
  • аудио 10 -( задание 9.11 создание ссылки на другую страницу
    <a href="second.htm"> Текст ссылки </a>, создание документа " second.htm " , создание ссылки для возврата на титульную страницу :
    <a href="index.htm#verh "> Текст ссылки </a>
    • Лекция 3 :
  • аудио 11 - от стр. 114 прочие виды ссылок , специальные символы ( &lt; - < &gt;; - > ) и комментарии <!-- текст -->
  • аудио 12 - теги вставки графических объектов стр. 116
    <img src="название файла рисунка">
    типы встраиваемых файлов : jpg , . gif , .png , добаление альтернативного описания содержания
  • аудио 13 - создание ссылки с маленького изображения на большое : делаем копию изображения , изменяем размер изображения для копии в Gimp ( или в другой программе ) , даем копии оригинальное имя
    <a href="название файла большого рисунка"><img src="название файла маленького рисунка"></a>
  • аудио 14 - Постановка задачи на контрольную работу , просмотр сайтов созданных сотрудниками и выпускниками предыдущих групп
  • аудио 15 - подготовка сайта к размещению в сети : предварительная проверка работы ссылок , проверка содержимого папки "SAIT_FIO"
  • аудио 16 - размещение сайта в сети : регистрация на Yandex ( Google или другом бесплатном сервере) , после регистрации зайти в "почта " , "народ " , загрузка файлов через " обзор " , контроль загрузки файлов , просмотр проекта
  • аудио 17 - альтернативная версия постановки задачи на КР с пояснениями по закачке сайта на narod.

    •  

    Лекция 1:

    1. видеозапись -
    2. видеозапись -
    3. видеозапись -
    4. видеозапись -
    5. видеозапись -
    6. видеозапись -
    7. видеозапись -
    8. видеозапись -
    9. видеозапись -

    промежуточный результат (index.htm)

    Лекция 2:

    1. видеозапись - ...
    2. видеозапись - ...
    3. видеозапись - ...
    4. видеозапись - ...
    5. видеозапись - ...
    6. видеозапись - ...
    7. видеозапись - ...

    промежуточный результат (index.htm)

    Лекция 3:

    1. видеозапись - открытие методички и принесение на рабочий стол папки с сайтом
    2. видеозапись - ...
    3. видеозапись - ...
    4. видеозапись - ...
    5. видеозапись - ...
    6. видеозапись - ...
    7. видеозапись - ...
    8. видеозапись - ...
    9. видеозапись - ...
    10. видеозапись - теги ссылок второй страницы. Проверял сделанное

    промежуточный результат (index + Second.zip)


    Лекция 4

    1. видеозапись - открытие методички
    2. видеозапись - ...
    3. видеозапись - ...
    4. видеозапись - ...
    5. видеозапись - ...
    6. видеозапись - ...
    7. видеозапись - ...
    8. видеозапись - ...
    9. видеозапись - ...
    10. видеозапись - ...
    11. видеозапись - ...
    12. видеозапись - ...
    13. видеозапись - ...
    14. видеозапись - ...
    15. видеозапись - текстовая ссылка на "Растяпу"
    16. видеозапись - ссылка с "мамонта маленького" на "мамонта большого".

    Результатный документ (index.htm + Second.htm + MAMONT.gif + MAMONT_big.gif + RASTIAPA.JPG.zip)

    Лекция 5. Видеозаписи - непосредственно выгрузка сайта на бесплатный хост-сервер uCoz средствами админ-панели uCoz.


    Сторонние статьи по html: