Подписка
Email
Fb
RSS
Twitter
Email

Курс HTML (видео уроки) Часть1

Самоучитель html
Этим постом я открываю вторую часть курса «Путь веб-мастера»- курс HTML. Курс будет состоять из видеоуроков. Самое основное, пройденное в уроке будет еще и в текстовом виде в посте. Курс будет содержать примерно 8−10 уроков. Я буду предоставлять только основную информацию, которая действительно может понадобиться при создании сайтов.

Изучение урока лучше начать с просмотра видео, а затем прочитать текст, тем самым Вы закрепите изученное. Так же обязательно нужно выполнить все изученное на практике, т.к. практика есть самое главное, без нее невозможно ничего изучить. Больше практикуетесь — лучше владеете материалом.

Итак, переходим к первому уроку — Основные понятия и структура HTML документа.

Закрепим изученное. Кратко повторим то, что мы изучили в этом видео уроке:

HTML (HyperText Markup Language, язык разметки гипертекста) — язык, который позволяет задать способ представления на веб-сранице текста, изображений, звуковых файлов, видео и др. Этот язык позволяет связывать документы и страницы между собой, используя ссылки (отсюда название гипертекст).

XHTML (англ. Extensible Hypertext Markup Language — Расширяемый язык разметки гипертекста) — это подобие языка HTML. Главное их различие состоит в том, что XHTML в отличие от HTML использует синтаксис XML. То есть XHTML требует более строгих синтаксических правил разметки нежели HTML.

Структура HTML документа:

Заголовок
 
   Основная информация

Теги — элементы разметки в HTML. Каждый тег состоит из имени тега, за которым может следовать список атрибутов, при этом все перечисленное заключено между открывающей и закрывающей угловыми скобками.

Структура тега

XHTML всегда требует закрывающий тег! Например:<br>нужно писать <br />

Имена тегов и атрибутов чувствительны к регистру и в соответствии с действующим стандартом XHTML необходимо записывать строчными буквами.

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

Строка<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>; предназначена для указания типа текущего документа.

Теги <html> и </html> определяют начало и конец HTML-файла соответственно.

Тег <head></head> — заголовок документа описывает в целом его различные свойства,
включая название, нахождение в сети и взаимосвязь с другими документами. Большая часть данных, содержащихся в заголовке, никогда
не отображается броузером.

Тег <title></title> определяет заголовок веб-страницы.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Тег <meta> является универсальным, с помощью метатегов, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Например:

<meta name="keywords" content="keyword1, keyword2, ..."> -добавляет ключевые слова.

<meta name="description" content="Эта страницица о..."> — добавляет описание документа.

Теги <body> </body> определяют границы тела документа. Именно здесь помещается содержание документа.

На этом для первого урока достаточно. Продолжим в следующем.

Вы можете оставить комментарий.

126 комментариев к записи “Курс HTML (видео уроки) Часть1”

  1. diamM:

    спс. Развитие твоему сайту, продолжай в том же духе

  2. Хорошие уроки. Спасибо

  3. Владимир:

    тег закрывающийся или нет? А то на видео он закрыт, а в тексте на странице нет.

    Так же не понял для чего

    — http-equiv="Content-Type"

    — content="text/html;

    или без них нельзя задать параметр кодировки?

  4. admin:

    Какой именно тег Вы имеете в виду?

    http-equiv="Content-Type" и content="text/html — служит для обмена информацией браузера с веб-сервером (определяет тип содержимого документа), то есть определяет, что данный документ является документом html. Его желательно указывать всегда.

  5. Cellad:

    А почему у меня не получается текст на руском ? токо на англиском языке показывает все на руском появляется токо вопросики (реч идеть о теле текста)

  6. Cellad:

    Спосибо огромное сработало

  7. Спасибо за уроки,вот сделал сайт по твоим урокам stalkerskoe-4tivo.narod.ru/

    Помоги как мне туда добавить опрос и комментарии к книгам?

  8. Будут ли на твоём сайте уроки по php ?если «да»,то когда?

  9. Пока не планирую. Хотя, когда буду делать курс про верстку шаблонов под WordPress, буду рассказывать об основах php.

  10. Здравствуйте.

    У меня надпись

    с наклонной чертой .

    Как убрать черту?

  11. pasha:

    а я не понял о докюпт )там одна строка для всех или есть другии

  12. c.c.c.p:

    админн помогииии плиз мой скайп c.c.c.p11

  13. кирилл:

    админ плиз скажи как называется прога для выделения(карандаш)?

  14. Серёга:

    Респект Админу и сайту!!!Очень помогает.Да и ниже видео:XHTML всегда требует закрывающий тег! Например:<br>нужно писать <br />так и должно быть <br / > ?

  15. Александр:

    А что значит, если я написал все, как было показано, а браузер пишет на странице такие изображения вместо заголовка ??????????

    • Александр, если Вы пишите код в редакторе NotePad++, то нужно открыть в меню пункт «Кодировка» — «Преобразовать в utf-8», затем сохранить файл. 

      Если в простом блокноте, то «Сохранить как» и указать там кодировку utf-8.

  16. Я не пользуюсь Тотал Коммандер. Поэтому поступил иначе. Открыл Блокнот, обозвал свой документ и сразу сохранил его в папку с расширением хтмл. Затем нашел сохраненный документ и открыл его с помощью NotePad++. Получилось то же самое. Хорошо, что вы сделали видеоуроки. Можно все рассмотреть и остановить в нужном месте.  И разбираться на конкретном примере, пока не станет получаться. 

  17. Спасибо! А что значат теги выделенные зеленым цветом?Например так:<!-- all in one seo pack 1.4.7 [158, 174] -->

    • Все что заключено в <!--   --> является комментарием и не отображается браузером. Применяется обычно для пояснений кода.

  18. Joker:

    спс огромное  ты ваше жжёшь  красавчик!

  19. Ali:

    Супер сайт ! и админ супер ! давно не находил такой СПС! 

  20. олег:

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

  21. олег:

    ну допустим где то не зарегистрировался или  где то не заплатил ,где то правила нарушил. 

    • Ну само собой, если не оплатите хостинг и домен вовремя, то потеряете домен и доступ к хостингу.

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

  22. олег:

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

  23. Ден:

    спс большое

  24. Валера:

    Скажите пожалуйста , если я буду использовать в создании сайта картинки которые как часто бывают подписанные в нижнем углу(типа авторские)При этом я вырезаю эту надпись и использую их. В итоге ко мне будут какие-то притензии, там не знаю, санкции?

    • Если вы берете картинки в свободном доступе (например через поиск в google или яндекс), то можно не волноваться по этому поводу. Претензии по этому поводу бывают очень редко (у меня ни разу не было).

  25. олег:

     Огромное спасибо.Я  собираюсь материалы брать из книг.За это не чего плохого не будет.

  26. Алексей:

    Добрый день. Подскажите, пожалуйста, какие плагины Вы используете в Notepad++?

  27. Влад:

    Я создал сайт но ссылки оказались вцентре ячейки таблицы.Как поднять ссылки вверх ячейки?

  28. Света:

    Скажите у меня проблема с кодировкой, когда открываю код в браузере, выдает квадраты да роммбы с вопросами

  29. КОГДА ПИШУ заголовке или в главной информации русским языком вылазиет 

    ??

    ??

    ??

    ??

    ??

    ?? а английским всё нормально????? ответьте пожалуйста!!!

  30. да ты мне так обьесни, я не понел что админ написал, у меня простой блокнот, я всё переписал с этой страницы всё точь в точь себе в блокнот,КОГДА ПИШУ заголовке или в главной информации русским языком вылазиет??????????, а на английском пишет нормально ты напиши мне отдельно !!! ПОЖАЛУЙСТА ( чё мне делать??? )

    • я не понел что админ написал

      Я и есть админ:)

      При сохранении нужно выбрать «сохранить как», далее написать имя файла с расширением html, например — file.html, а снизу будет выпадающее меню «Кодировка» — там выбрать utf8.

  31. спасибо брат !!! ты знаешь толк в этом!!!

  32. sarmail:

    Ден, я сегодня и вчера задавал вопросы под ником «Владимир». Сейчас увидел, что один Владимир тут уже есть. Так что буду под новым ником — sarmail.Скажи пожалуйста чайнику, я кое-что непонял из вышесказанного про UTF-8. Так писать теги нужно в ANSI, а потом каждый раз преобразовывать в UTF-8? Или сразу можно формат выставить как UTF-8 и уже не трогать?

    • Можно сразу выставить UTF-8 в настройках текстового редактора и doctype прописать сообветствующий. Потом просто откройте страницу в браузере — если русские буквы отображаются нормально, то все ОК, если вместо них какие-то «квадратики» или знаки вопроса, то кодировка файла не UTF-8.

  33. sarmail:

    Ну в настройках редактора — понятно, а где прописать в Doctype? Насколько я понял из урока, код UTF-8 (или иной) прописывается не в теге «Doctype», а в теге «meta».

  34. Антон:

    Спасибо все просто и понятно,правда я сначала доктайпа испугался,но потом все же выучил!

  35. Игорь:

    а доктайп можнь изменяться????или он всегда одинаков??

    • Может изменяться, в зависимости от синтаксиса. Например, для html 4.01 и xhtml 1.0 есть 3 разных доктайпа. Я же последнее время всегда использую только один:

      <!DOCTYPE html> 
      Это для html5, очень простой.

  36. Руслан:

    тебе бы книги писать по этой теме) 

  37. nurli:

    можете написать про плагины notepad? quicktext плагина нету, нашел webedit плагин и ничего не работает когда нажиамю tab.надо что сделать в настройках?

  38. Алена:

    А почему я пишу как вы говорили ,а у меня место букв ?????? идут что это такое подскажите пожалуйста?

  39. Данил:

    Здравствуй, сайт великолепный у тебя ! объясняешь и описываешь данную тематику шикарно, все понятным языком, я бы хотел поинтересоваться, как изменить дизайн блоков, например необходимо сделать сайт доставки пиццы, необходимо создать форму это понятно, а как изменить ей дизайн, например нарисовать самому и как прикрепить это к самой форме что бы она выглядела так ? Заранее спасибо за ответ. можешь на почту ответить если что. С Уважением Данил.  

  40. Данил:

    Хотел бы уйти в данную тематику целиком но никак не мог найти хорошего учителя =) вроде нашел )) на платной основе бы обучался бы у тебя =) 

    • Платно не обучаю, просто напросто времени столько нет, чтобы индивидуально работать. Если есть вопросы — пишите в комментариях, стараюсь отвечать и на основе вопросов писать новые поясняющие посты.

  41. илья:

    где можно скачать Notepad ++ ?

  42. Молодец. Удачи тебею

  43. Владимир:

    Шикарный ресурс!! Тут столько интересного и то что надо!! Спасибо!! Теперь я тут у тебя буду частенько околачиваться пока все не усвою :) 

  44. виктор:

    где ссылка на notpade++

  45. Давид09:

    Админ, скажите пожалуйста, вот например сделал я веб-страницу, у меня адрес на нее С:\Documents and Settings\User\Рабочий стол\Страничка.html. А как сделать свой адрес? куда его нужно прописывать?

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

  47. Олег:

    здравствуйте, скажите пожалуйста, если я хочу подключить к сайту сервер игровой (к примеру Aion) на платформе java, что бы на сайте могли регистрироваться а эта регистрация передавалась в базу сервера как аккаунт, что бы онлайн сервера показывался на сайте, off/on сервера.для всего этого какие языки нужно знать(html, css, php ) или еще javascript ?

  48. Медет:

    Спасибо дружище, удачи тебе в житейском и профессиональном плане! Хороший сайт.

  49. beowoolf:

    Хороший сайт!

  50. Сергей:

    Здравствуйте подскажите ,я вроде сделал как вы показали но у меня не отображается  какие то ромбики, а средине  знак вопроса в место надписи заголовок почему так? 

  51. Djangar:

    Спасибо тебе  за Хорошие уроки)

  52. Анатолий:

    Спасибо, всё пока понятно, начал смотреть ваши курсы уже что-то умею Уважаю вас +1 ?Отличный сайт продолжайте в том же духе ;)

  53. Антон:

    Здравствуйте. У меня такая проблемка. Когда я пишу в Note pad русским шрифтом, то он пишет вопросиками. В чем может быть проблема???Спасибо

  54. Тимофей:

    А ваши видео уроки подходят для использования на Mac OS?

  55. Иван:

    Здравствуйте Админ!!!   Посмотрел первый урок. У меня проблема. Пишу в Notepad++  структуру html документа сохраняю index.html   но в место ОСНОВНОЙ ИНФОРМАЦИИ в браузере отображается вот это РћСЃРЅРѕРІРЅР°СЏ РёРЅС"ормация.Я что то не правильно делаю? Помогите!!!!

  56. KoLa:

    Я конеш еще не во все въехала, но думаю терпение и труд сайт создадут :) удачи мне и вам :) спасибо!

  57. Максим:

    круто,большое спасибо

  58. сергей:

    А где следующие уроки???

  59. Виктор:

             Из-за низкой скорости интернет видео уроки недоступны, неужели на этом закончатся уроки по созданию сайта?

  60. Здрасти ......Уроки очень хорошие — спасибо.Однако структура html-документа отличается друг от друга или она едина? Дело в том что я верстал фотостраничку своего сайта по Вашим видеоурокам. Там структура отличается ...

  61. Iv:

    Просто хочу сказать СПАСИБО за твой ТРУД!Для меня,начинающего,такого рода материалы являются огромным подспорьем в изучении.Успехов нам всем!

  62. Спасибо огромное за то что преподаешь как препод в институте. 

  63. pq-17:

    Где можно скачать NotePad++.  А то везде трояны ((

  64. здраствуйте Денис хотел бы узнать можете ли вы сделать сайт за деньги

  65. Подскажите, пожалуйста, в какой программе вы записываете видео? И какой программой пользуетесь для обведения объектов синим полем?Заранее спасибо! 

      • Именно она у меня и стоит. 8-я версия. Но я, как мне кажется, перепробовал уже все варианты экспорта видео, но качество оставляет желать лучшего! В связи с чем вопросы: 1. Какие настройки следует выставлять при save and edit (какое разрешение выставлять: размер записи или максимально возможное (для ютуба)?2. Каковы настройки на стадии Produce and Sfare?3. И где, все же «обводилка»? Я не сумел её отыскать. Заранее спасибо. 

        • Сам себе и отвечу, так как в ожидании ответа продолжал узнавать возможности этой замечательной программы. По проблеме создания качественного видео: 1. когда записали свое видео и сохраните его, то в окошке «What sixe do you want...» выбираете РАЗМЕР ЗАПИСИ!!!  Это то, на чем я прокололся. В продюс энд шарэ выбираете пользовательские настройки. Далее выбираете любой формат, памятуя о том что в Camtasia Studio 8 имеются определенные  проблемы с Mov кодеками. Обязательно щелкаете по настройкам и выставляете тот размер в котором сделана запись. Если часто будете делать видео, то, думаю, разумно создать свой профиль в котором и укажете все настройки. Как обводить: идете в callouts, щелкаете по маленькой стрелочке «вниз» рядом с прямоугольником, выбираете что-то из красненького )))) Далее методом тыка (очень, очень просто) разбираетесь как это все работает, выбираете цвет и т.д. Вот так как-то. а вот вопрос еще один появился: микрофон какой у вас? К наушникам прикрепленный или покупали отдельно девайс?

  66. Светлана:

    Добрый день! Денис, я к вам с таким весьма глупым вопросом. Начала я работать в notpad++ и вот беда: Я НЕ МОГУ ВЫСТРОИТЬ ТЕГИ В ДЕРЕВО (ИЕРАРХИЮ). Не знаю поняли ли вы мена. Что нужно нажать для того что-бы это была не просто простыня текста, а структурированный код?! Помогите!!!!!

  67. Алекесй:

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

  68. Спасибо! Вы просто гений) очень благадарен вам! удачки вам) всего хорошего) за 2 дня понял от нуля до того у меня  педодогичка в институте интересуется что как :D

  69. сергей:

    admin может что то не допонял но почему не могу создать страницу.вроде создаю папку сохраняю в блокноте а новая папка с html не получается

  70. Pavel:

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

  71. Михаил:

    Здравствуйте, вы обещали выложить где скачать  Notepad ++ .

  72. Мишка:

    Подскажите где скачать Camtasia Studio

  73. Orville:

    Добрый день) Копирую ваш код в нотпад, сохраняю, в браузере показывает значки с вопросительными знаками. Что не так?

  74. Наталья:

    Здравствуйте.  Я новичок, только начинаю делать сайт. У меня пока вопросов нет, но хочу поблагодарить вас за то, что сделали уроки. очень все понятно и доступно. 

  75. Спасибо огромное ! Отличный урок. Шаг за шагом планирую постичь весь процесс. Долгое время не понимал почему не отображается русский текст — нашел ошибку. поставил кавычки еще и перед utf-8">Заработало)))

  76. Артур:

    Спасибо большое. Отличній урок!

  77. Артур:

    Где ссылка на скачивание Notepad++. В целом для начала — хорошо. Спасибо!

  78. Видео уроки для просмотра на планете есть?Очень заинтересовало ,а посмотреть никак:(

  79. Константин:

     Все классно, вот только навигация самого сайта страдает(или я слеп, помогите) в конце урока так и просится кнопка «Перейти к следующему уроку» или просто добавить кнопки 1урок, 2 урок, et cetera... А то приходится каждый раз возвращаться...

  80. сергей:

    Спасибо. Полезная информация. А где ссылка на нотпад++ ?

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика