Разбор первых полетов (проверка Д/З)

В этом видеоуроке мы разберем:

  • Домашнее задание.

Скачать материалы:
Скачать 7-ой видеоурок по HTML Размер: 2.09 MB, скачали: 407 раз.
Скачать исходники к 7 видеоуроку по HTML Размер: 2.61 kB, скачали: 433 раз.
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Добро пожаловать в еще один видеоурок по курсу HTML. В нем мы разберем домашнее задание. Я надеюсь, вы его выполнили. Если у вас что-то не получилось, то обратите внимание на повторное изучение уроков, которые мы прошли:

  1. Что такое HTML и где писать HTML код?
  2. Что такое теги и атрибуты? Как создать HTML документ? Структура HTML.
  3. Элемент Doctype и раздел HEAD. Метаданные в HTML.
  4. Параграфы и заголовки в HTML.
  5. Учимся изменять цвет текста и цвет фона используя HTML.
  6. Изучаем параметры текста: шрифты, курсив, жирный, подчеркнутый, перечеркнутый и другие.

Я делал домашнее задание вместе с вами, и поэтому вы можете его сейчас видеть на экранах. Вы можете найти все свои ошибки либо убедиться в правильности выполнения домашнего задания.

Давайте откроем мою страничку в браузере. Текст «Добро пожаловать на мою страничку мыслей» изображен в теге <h1> и отцентрирован. Далее идет текст курсивом. Название сайта «info-line.net» выделено жирным. Весь этот текст выровнен по левому краю и находится в теге <p>, что означает «абзац».

Далее идет тег <div>. Текст «PHP» и «HTML» выделены жирным, «Оставалось придумать, про что будет сайт:)» изображен синим цветом с помощью тега <font>, и «Дааааа… Шли недели…» находится в теге <small>, что означает «маленький».

После мы видим тег <h3> — заголовок третьего уровня и текст синего цвета. Потом идет опять обычный текст в параграфах <p> с выделенным жирным словом «удобном». Затем идет черный подчеркнутый текст, написанный шрифтом Monotype Corsiva.

Вот и все, что я хотел разобрать в данном видеоуроке. Сейчас вы можете посмотреть на код. Я его также приложу к текстовой части данного видеоурока,  и вы сможете сверить все свои ошибки.


<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Главная страница</title>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="keywords" content="Мой, личная, страница, info, line, net, рассказ, сайт">
<meta name="description" content="Моя личная страница! Сказ о том, зачем я создал сайт info-line.net">
</head>
<body text="#660000" bgcolor="#FFFCC">
<h1 align="center">Добро пожаловать на мою страничку мыслей.</h1>
<p align="left"><i>Данная страничка посвящена одной истории. Истории о том, зачем я создал сайт <b>info-line.net</b></i></p>
<div title="Как-то раз...">
Как-то раз я блуждал во всемирной паутине под именем Интернет, впрочем это было обычным повседневным занятием для меня. Ничто не предвещало беды, однако я случайно попал на сайт по изучению языка php. <b>HTML</b> я уже знал к этому времени, не буду рассказывать подробнее, так как это совсем другая история...
<br>Ближе к <b>PHP</b>... И изучать эти многостраничные книги мне было так лениво, что каждый раз, когда я их снова видел, я сохранял адрес страницы и переключался на что-нибудь другое.
<br>Спустя год, таких адресов накопилось достаточно много, но изучать я так и не хотел. Благодаря одному человеку, а точнее лишь одной его фразе, которую я запомню скорее всего на всю жизнь, я поборол лень и выполнил все то, что мне было нужно.
<br>Это был именно тот момент в жизни, когда что-то внутри перещелкнуло и я стал идти по собственному пути успеха.
<br>Я работал на фрилансе(кто не знает, это - удаленная работа, то есть люди дают задание, за выполнение которого, получаешь деньги).
<br>И тут возникла идея создать уже свой собственный сайт. <font color="#000099">Оставалось придумать, про что будет сайт :)</font>
<br><small>Дааааа... Шли недели...</small></div>
<h3><font color="#0000CC">И вдруг, осенило!</font></h3>
<p>Я решил создать сайт про то, чему сам долго и упорно трудился, тому, как создать свой сайт в этом большом и наверняка всем известном пространстве.
<br>Я бы мог написать книгу, которая бы лежала на n-ой полке какого-нибудь магазина, а то и вовсе у читателей, которым было бы также лениво приступать к ее изучению.
<br>Но я предпочел потратить больше времени и подать информацию в более <b>удобном</b> варианте ее восприятия для пользователей.
<br>Сейчас Вы смотрите данный видеоурок и скорее всего, Вы со мной согласны.
</p>
<br>
<p align="right"><font face="Monotype Corsiva" color="#000000"><u>Спасибо за внимание! C Уважением, Олег Зубцов.</u></font></p>
</body>
</html>

Спасибо за внимание. До встречи в следующем видеоуроке, в котором вы узнаете, что такое списки и линии в HTML.

Подпишись на info-line:

Получать новые уроки на e-mail:

55 комментариев на “Разбор первых полетов (проверка Д/З)”

  1. Михаил 1 ноября 2011 в 8:22 #

    Олег! Благодарю сердечно за уроки по html...Кое-что мы уже знаем)) PHP в студию!!! Даёшь PHP!!! =) =) =) =) =) =) =)

    ждём...

  2. Михаил 1 ноября 2011 в 8:25 #

    Еще интересует как создать миничат в html? Есть у Вас инфо по этому поводу? =-O %) =-O

    • Олег Зубцов 1 ноября 2011 в 17:22 #

      Мини-чат на HTML не написать. Нужны знания более серьезного языка, например PHP.

  3. Михаил 1 ноября 2011 в 19:56 #

    Олег. Идите работать репетитором)) Уроки не громоздкие, но емкие и краткие, а потому и легкие к восприятию. О, мне понравился фокус с ...мелочь, а приятно))... я то, всё больше на время терял, и шрифт действительно — красивенький...уже взят на вооружение и применен...а как насчет готики в кириллице? Насчет мини-чата, я в принципе так и думал, ну авось, мало-ли, может чего-то не знал... =-O =-O =-O =-O =-O вот потому-то PHP- меня интересует особенно, в сравнении с html, он имеет ряд существенных преимуществ...Олег, имеется-ли у Вас урок по чату, как его сделать на сайте, а сайт прежде перевести из html в PHP? Благодарю. Михаил.

    • Олег Зубцов 1 ноября 2011 в 20:50 #

      HTML — язык разметки.

      CSS — каскадные таблицы стилей.

      PHP — язык программирования.

      Прежде чем изучать PHP, нужно знать HTML и CSS.

      Олег, имеется-ли у Вас урок по чату, как его сделать на сайте

      Нет, такого урока на сайте пока нету.

  4. Михаил 1 ноября 2011 в 20:02 #

    А в виде форм, через вивер можно сообразить какой-нибудь простенький чат?

    • Олег Зубцов 1 ноября 2011 в 20:55 #

      С помощью одних форм вы его не сделаете. Чтобы написать хороший чат — желательно знать PHP и MySQL.

  5. Михаил 1 ноября 2011 в 22:46 #

    Даёшь PHP!!!Даёшь PHP!!!Даёшь PHP!!! *BRAVO* *HELP* =)

  6. Михаил 1 ноября 2011 в 22:49 #

    ну а хиленький чатик, значит таки можна?

    • Олег Зубцов 2 ноября 2011 в 2:21 #

      На одном HTML — нет. Возможно получится с помощью JavaScript, но я не видел таких чатов. *UNKNOWN*

  7. Михаил 2 ноября 2011 в 8:31 #

    Thank you for the answer and...Forgive me, for the causal inconvenience, please. But... Олег, а по какому принципу сделан чат на UCOZ? К примеру, как на этом сайте справа udovichenko.ucoz.ru/load/4-1-2

    • Олег Зубцов 2 ноября 2011 в 15:55 #

      К сожалению, PHP — язык серверный, а потому скрыт от глаз посетителей.

      В чате используется JQuery библиотека. Скорее всего PHP тоже там есть.

      Если вас интересует чат, то лучшый выход в этой ситуации — просто поискать готовый скрипт чата.

  8. Михаил 2 ноября 2011 в 8:33 #

    можно-ли на свой сайт в html вставить блок с подобным (кодом) чата?

    • Олег Зубцов 2 ноября 2011 в 16:00 #

      Можно, только вам нужно знать этот код, который вы не видите 🙂 Поэтому лучший вариант — установка готового скрипта чата. Но для его установки вам нужно будет узнать, как установить локальный хостинг (Denwer) на свой компьютер.

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

  9. Михаил 2 ноября 2011 в 18:08 #

    Олег, сердечно благодарю за ответы...у меня уже установлен PHPmyadmin, этот подойдет?..и могли бы Вы помочь, — дать уже готовый код чата? Может где-то есть в закромах? =) =) =)

    • Олег Зубцов 2 ноября 2011 в 20:06 #

      PhpMyAdmin — это веб-интерфейс для администрирования MySQL (база данных). Он включен в Denwer.

      Нет, никогда не интересовался чатами 🙂

  10. Михаил 2 ноября 2011 в 18:35 #

    www.cbox.ws а об этом чате слышали что- нибудь?

    • Олег Зубцов 2 ноября 2011 в 20:12 #

      Нет, но судя по описанию чат неплохой. Попробуйте установить. Буду благодарен, если сообщите о результатах и впечатлениях от чата.

      Если понадобится помощь — спрашивайте! 🙂

  11. Михаил 2 ноября 2011 в 23:42 #

    Олег, в настоящий момент я ищу его (Сbox) с русским интерфейсом, в этом можете помочь? Да и смайлики предлагаемые у них (синюшные цветом), а потому особого восторга не вызывают, хотелось бы иметь общепринятые (желтые)...

  12. Михаил 3 ноября 2011 в 16:56 #

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

  13. Михаил 4 ноября 2011 в 13:40 #

    Слава Богу, чат установил и уже используется.)) =) =) =) Тем не менее, Олег, Ваши уроки по любым темам (и в особенности по PHP)) ожидаю с особым вниманием и живейшим интересом...Будьте здоровы...и сообщайте, please если будет появляться что-то новенькое. Благодарю, Михаил.

    • Олег Зубцов 4 ноября 2011 в 17:56 #

      Спасибо 🙂 Чтобы не пропустить новые видеоуроки, подпишитесь на RSS-ленту сайта 😉

  14. Михаил 4 ноября 2011 в 23:20 #

    Хорошо, я подписался на эл. почту...Олежек, ты можешь посмотреть исходник кода страницы главной (index)? что-то там я напутал с цветами ссылок, кстати там и стили...вышло всё наоборот, хотя конечно же хотелось как лучше 🙁 🙁 🙁 ...Уж так навертел, накрутил, что нужен свежий взгляд...Если можешь глянь, вот сайт, его главная страница. otwet.zp.ua Подскажи, please ... =) =) =)

    • Олег Зубцов 5 ноября 2011 в 0:17 #

      А что именно напутали? Все отображается нормально. Или вы уже исправили проблему? Если же проблема еще существует, то прошу объяснить более подробно: что было до этого, что хотели получить, что изменяли в коде.

      Посмотрев ваш исходный код, решил дать пару советов:

      1. Чтобы не запутаться, давайте человекопонятные имена классам. Пример названия класса для меню: — .menu {}

      2. Сократите кол-во написаний классов в HTML.

      Вместо этого:

      <p class="стиль7"></p>
      <p class="стиль7"></p>
      <p class="стиль7"></p>
      <p class="стиль7"></p>
      <p class="стиль7"></p>
      

      Можно добавить все абзацы в тег div с id=content и прописать стили для всех абзацев, которые в нем находятся.

      Как это будет выглядеть:

      CSS код:

      div#content p {
      color: #5D8311;
      font-size: 10pt;
      font-weight: bold;
      }
      

      HTML код:

      <div id=content>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      </div>
      

      Это позволит создать понятную структуру, увеличить читабельность кода и уменьшить вес страницы. 8)

  15. Михаил 5 ноября 2011 в 1:21 #

    Олежек, я есть на агенте под кодовым именем smm70@mail.ru если ты не против укажи куда...я вышлю исходник CSS ...проблема осталась...это я уже в начале хотел через font цвета поменять)) а если опуститься ниже, то заметно, что ссылки серого цвета #аааааа, а когда наводишь курсор, становятся синими...короче, накуролесил...а хотел, чтобы на footer ссылки были светлыми а в тексте синими...вот присмотрись внимательнее к ссылкам ниже...и всё увидишь...http://otwet.zp.ua/

  16. Михаил 5 ноября 2011 в 1:27 #

    Это layout CSS попробую выслать

    #site_center {text-align:center}
    #main {
    	width:1000px;
    	text-align:left;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    
    
    .col_1, .col_2, .col_3, .col_box_1, .col_box_2{ float:left;}
    
    
    /*======= index.html =======*/
    #page1 #content .col_1{
    	width:210px;
    }
    #page1 #content .col_2{
    	width:600px;
    }
    /*=========================*/
    
    /*======= index-1.html =======*/
    #page2 #content .col_1{width:503px;}
    #page2 #content .col_2{width:273px;}
    /*=========================*/
    
    /*======= index-2.html =======*/
    #page3 #content .col_1{width:313px;}
    #page3 #content .col_2{width:463px;}
    /*=========================*/
    
    /*======= index-3.html =======*/
    #page4 #content .col_1{width:526px;}
    #page4 #content .col_2{width:250px;}
    /*=========================*/
    
    /*======= index-4.html =======*/
    #page5 #content .col_1{width:313px;}
    #page5 #content .col_2{width:463px;}
    /*=========================*/
    
    /*======= index-5.html =======*/
    #page6 #content .col_1{width:313px;}
    #page6 #content .col_2{width:220px;}
    #page6 #content .col_3{width:243px;}
    /*=========================*/
    

  17. Михаил 5 ноября 2011 в 1:30 #

    а что-то стиль CSS не получается выслать...

  18. Михаил 5 ноября 2011 в 1:32 #

    два раза попробовал...или они (сообщения) у Вас отобразятся?

  19. Михаил 5 ноября 2011 в 11:56 #

    Слава Богу! Всё выровнял,как хотелось — ссылочки на странице синие, а на footer серые...с утра пораньше лучше работать...за советы спасибо!!! Будьте здоровы. С ув. Михаил. =) =) =)

    • Олег Зубцов 5 ноября 2011 в 21:00 #

      Ну вот, только пришел, а вы уже свою проблему решили. *CRAZY*

      Будьте здоровы. С ув. Михаил.

      Взаимно.

  20. Михаил 5 ноября 2011 в 21:42 #

    Олежек, уже другое =) Это какой-то фокус, притом весьма занятный. Делал страничку в вивере о партнерстве в коде первого рисунка «свеча» gif на сайте otwet.zp.ua/Partners_Donation-1.html первую рамку сделал красного цвета, но затем )))))) захотел сменить цвет на синий и как я не менял, как не удалял, прописывал дублями, вообщем вивер отображает синим в disigne и в коде а браузера Opera, IE продолжают отображать красным, хотя в коде его уже и в помине нет. ну конечно обновляю...и прописывал, и цифрами, и словом blue, и даже navy, и дублировал...не ужели не поддерживают браузера...нет в фотошопе и просмотрщиках не пробовал...интересный фокус однако...в чем дело? А? =) =) =)

    • Олег Зубцов 5 ноября 2011 в 22:50 #

      Нет здесь никакого фокуса. Просто у вас очень плохой исходный код. Много пустых и ненужных тегов. Откажитесь от DreamWeaver. Пишите код вручную, пока не напишите хотя бы 2-3 сайта. Потом, можете начинать работать с DreamWeaver, так как уже будете наблюдать за кодом и сможете удалять все лишнее, что он добавляет.

      Смотрим HTML-код с этим изображением:

      <h3><img src="Images books/Candle77.gif" width="240" height="320" align="center" bgcolor="navy" border="2" bordercolor="#0000FF"></h3>

      Смотрим CSS стили:

      h3 {
      color: #900;
      }
      

      Чтобы поменять цвет рамки с красного на синий, нужно заменить в стилях цвет #900 на цвет #00F. Чтобы не нарушить цвет всех заголовков, было бы правильным написать стиль примерно так:

      h3 img {
      color: #00F;
      }
      

      Дело в том, что атрибут bordercolor поддерживается не во всех браузерах, об этом я рассказывал в видеоуроках по HTML.

  21. Михаил 6 ноября 2011 в 1:07 #

    Всё понял! Олег, как же я это упустил из виду? Начал смотреть код по Вашей записи и заметил, что там же заголовок h3 стоит, он то родимый и вытягивает красный цвет...Ща, я его красавца...видать прежде делал заголовок, а затем поставил изображение...а тег не удалился...действительно bordercolor бывает, что не поддерживается, но я задал нужный цвет через заголовок h6...теперь нормально =) Спасибо за совет.

  22. Михаил 6 ноября 2011 в 1:12 #

    вот, можно посмотреть как получилось otwet.zp.ua/Partners_Donation-1.html

  23. Михаил 6 ноября 2011 в 11:33 #

    Добрый день, Олег. Я скачал у Вас таблицу символов, хорошая штука, наглядно ...А есть у Вас таблицы по тегам, атрибутам, стилям, PHP, HTML, CSS ? Я бы просмотрел или скачал, шаблоны, фоны тоже интересно посмотреть =) ...спасибо, Михаил.

    • Олег Зубцов 6 ноября 2011 в 20:11 #

      Спасибо. Нету таких таблиц. Про фоны для сайтов и где их достать, я расскажу в бонусном уроке по CSS, а он не за горами 🙂

  24. Михаил 6 ноября 2011 в 21:48 #

    А про шаблоны? =)

    • Олег Зубцов 6 ноября 2011 в 23:55 #

      Шаблоны вы можете найти в интернете. Их море. Также возможно я добавлю в бонусы комплект бесплатных готовых шаблонов. 😉

  25. Михаил 9 ноября 2011 в 13:13 #

    Хорошо, будем ждать...Олег, как вставить в html у которой уже есть фон, поля, изображение разворачивающегося свитка и вводить текст на нем, желательно готика — кириллица...К примеру, как на этом сайте www.christusimperat.org/uk/node/122 Спасибо, за новый урок...С ув. Михаил.

    • Олег Зубцов 9 ноября 2011 в 22:10 #

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

      Как сделать фон с помощью CSS, я рассказывал в соответствующем видеоуроке. Если возникает такая, ситуация, что изображение достаточно сложное и нужно отобразить какие-то углы, то изображение нужно разделить на части.

      Например, делим (разрезаем в фотошопе) изображение на 3 части: верхняя и нижняя высотой в 50 пикселей, а средняя будет высотой в 10 пикселей и будет повторяться. Таким третье изображение будет являться фоном для блока с тектом.

      Ничего сложного нету и с более большим количеством частей. Если вы посмотрели первые 10 видеоуроков по CSS, то для вас уже не должно быть проблем с версткой. У вас есть знания, просто их нужно применить на практике. Каждый сайт, каждый дизайн — уникален, именно поэтому верстальщик — профессия творческая 🙂

  26. Михаил 10 ноября 2011 в 20:28 #

    Спасибо за информацию, честно говоря я надеялся на подсказки по коду =) Еще один вопрос, как сделать ссылки в форме кнопки, и как отрегулировать форму кнопки...желательно код =) спасибо.

  27. Михаил 10 ноября 2011 в 21:21 #

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

    • Олег Зубцов 11 ноября 2011 в 1:45 #

      Кнопку делать вы умеете. Более того, можно сделать ссылку, после чего превратить ее в кнопку, сделав ее блочным элементом с помощью CSS. А это 95% всего дела. Потому что цвет, фон, высоту, ширину, размер текста и прочие характеристики для кнопки вы можете задать с помощью таблицы стилей.

      Просто пробуйте, не бойтесь эксперементировать и у вас получится!

      Для скругления кнопок, можно применить 2 варианта.

      1) Делаем фоном прямоугольное изображение, за счет прозрачности по углам, оно кажется овальным. Повторение не задаем (no-repeat).

      2) Использовать свойства радиуса.

      #button {
      border: 1px solid #65A3FF;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      }
      

  28. Михаил 11 ноября 2011 в 10:43 #

    Благодарю ...Буду экспериментировать =) И штудировать CSS ...

  29. Михаил 14 ноября 2011 в 11:16 #

    Олег, у меня к Вам вопрос. В чем может быть причина...Создаю background="picture1.jpg" в вивере при просмотре в браузере отображает. Переношу страницу и изображение на удаленный сервер. При просмотре в интернете не отображает. Менял расширение на png — без результата, прописывал код изображения вручную, безуспешно, переносил по несколько раз и страницу и изображение на удаленный сервер, проверил body никакого цвета не заданно, при просмотре в браузерах и Firefox и IE отображет переношу на удаленный с изображением, не отображает в интернете ни один??? %) Задаю вместо изображения цвет, к примеру bgcolor="#9999FF" отображает и на удаленном...What's a matter? =-O Answer, please...Михаил.

  30. Михаил 14 ноября 2011 в 12:41 #

    Олег, пожалуйста...На моем сайте otwet.zp.ua в левой дайджестной новостной колонке, там где и чат, внизу, между новостными строками: «Как преследовали за Библию» и «Приказ о вживлении ЧИПов уже подписан!» будет маленькая, короткая стрелка, которая и является ссылкой, при наведении на нее будет появляться надпись « trial»...По этой ссылке будет находиться страница, на которой я хотел бы предположим, задать background="picture1.jpg" для средней колонки (основной) где «picture1.jpg» допустим, пусть будет иметь значение к примеру, как у тебя в 12 уроке по HTML (там где сиреневые звездочки)...посмотри пож. по коду в HTML в чём причина, где я что-то упускаю? Я уже всяко- его прописывал и в ручную, и в вивере...и думаю, что это будет видно по коду... %) Если можешь. Благодарю, Михаил. Почему в браузерах при просмотре отображается, (переношу и файл, вместе с изображением) но, на удаленном почему-то не отображается???

    • Олег Зубцов 14 ноября 2011 в 15:51 #

      Понятна ваша ошибка.

      body {
      background-color:picture1.jpg ;
      }
      

      Написано в корне неправильно. Посмотрите еще раз видеоурок. Будьте внимательней, повторяйте все действия за мной. Должно быть так:

      body {
      background-image: url('picture1.jpg');
      }
      

      Если нужно задать для средней колонки, то задаете фон средней колонке, а не тегу body.

      В следующий раз, просьба оставлять комментарии к соответствующему видеоуроку.

  31. Михаил 14 ноября 2011 в 19:21 #

    спасибо, Олег, конечно...но...прописал его везде!!!!!!!! И всяким образом...и так, как Вы говорили, и...по всякому прописал где только мог и в body , и для колонки...ничего, пока не сдается, но и я не сдамся, буду думать...спасибо буду думать дальше, в чем дело...

    • Олег Зубцов 14 ноября 2011 в 21:49 #

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

  32. Айша 25 августа 2013 в 14:57 #

    ОГРОМНОЕ спасибо за видеоуроки)

Оставить ответ