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

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

Уроки html

Вы читаете второй урок курса HTML. Если вы еще не знакомы с основами и не прошли Урок№1, вам стоит остановиться и вернуться к нему.

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

Итак, приступим. Как всегда — сначала видео, затем краткое содержание урока для закрепления.

Часть1

Часть2

Повторим изученное.

Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. Это же правило относится к символам табуляции и переносу текста. Лишние пробелы только увеличивают объем файла.

<p> </p> — тег параграфа (абзаца). Основной тег для разделения текста на блоки.

<br /> — тег разрыва строки или переноса.

Заголовки.

Существует 6 уровней заголовков. Самый крупный — <h1></h1>. Самый мелкий — <h6></h6>. Не нужно забывать, что заголовки несут и логическое значение — чем более значим текст, тем более высокий уровень заголовка.

Выравнивание осуществляется при помощи атрибута align. Он имеет 4 значения: left, center, right, justify. Этот атрибут можно применить, например, к тегу параграфа: <p align="right">...</p> , заголовку <h1 align="center"> </h1>.

Теги логической разметки.

Это теги предназначены для выделения, придания логического ударения участку текста. Примеры таких текстов:

<em>логический</em> — отображается курсивом

<strong>логический</strong> — отображается полужирным шрифтом

<code>display: block;</code> — для отображения кода (html, php, css...)

<abbr title="Логический">лог.</abbr> — для отображения аббревиатуры

<acronym title="Hyper Text Markup Language">HTML</acronym> — акроним, сокращение составленное из первых букв слов.

Курт Кобейн: <blockquote>Никогда не думайте о том что думают о Вас люди. Они гораздо более озабочены тем что Вы думаете о них</blockquote>, <q>логической</q> — теги цитаты.

Теги физической разметки — используются для того, чтобы изменить внешний вид текста. Например:

<b>физический</b> — полужирный шрифт

<big>физический</big>  — большой текст

<i>физический</i> — курсив

<s>физический</s>  — зачеркнутый текст

<small>физический</small> — маленький текст

<tt>физический</tt>— моноширинный шрифт

<u>физический</u> — подчеркивание

H<sub>2</sub>O — нижний индекс

2<sup>3</sup> =8 — верхний индекс

Списки.

Различают маркированные, нумерованные списки и списки определений.

Маркированный:

    • Google

 

  • Yandex

 

 

  • Rambler

 

 

  • Yahoo

 

 

Нумерованный

    1. Google

 

  • Yandex

 

 

  • Rambler

 

 

  • Yahoo

 

 

Список определений

XHTML

Extensible Hypertext Markup Language — Расширяемый язык разметки гипертекста)

Тег

Элемент языка разметки гипертекста

 

Тег <font> позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тегами.

Size - определяет размер шрифта. Возможные значения:

  • Целое число от 1 до 7;
  • Относительный размер с указанием знака, вычисляется путем сложения с базовым размером. Например: <font size="+3">...</font>

Color - определяет цвет текста. Задается либо RGB-значением в шестнадцатеричной системе ( #FF8100 ), либо одним из 16 базовых цветов (black, green, blue...).Например: <font color="#FF8100">...</font>

Face - определяет используемый шрифт.

Тег <font> в современном строительстве сайтов не используется. Вместо этого все прописывается в CSS.

Программа для подбора цветов ( и не только).

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

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

  1. Сергей:

    Спасибо большое за урок)))

  2. Снежана:

    Спасибо!)

  3. Володя:

    Гигантское спасибо! Единственный курс на котором всё ясно.

  4. Аня:

    Спасибо!!все очень очень очень понятно...P.S...а голос...вообще тащусь...)))))))))...

  5. Максим:

    Спасибо за урок) <li> помоему не обязательно закрывать...и так работает

  6. Максим, <li> закрывать обязательно, хоть и работать может, но будет не валидный код.

  7. Максим:

    ок, спасибо за консультацию)

  8. Сергей:

    Спасибо за помощь, процветанию этому сайту

  9. Серёга:

    Спасибо за урок!!!Блин почему я раньше на этот сайт не натыкался...визде фигня непонятная а тут чётко всё и ясно ещё раз мои благодарности!

  10. Семён:

    слушай,а почему когда я пишу текст в заголовке,или в так называемом body,после того,как зайду на страницу браузера с моим сайтом,то там ни текст,а какие-то знаки с вопросами,че делать?

  11. Безумно интересно! Спасибо

  12. Кстати, я по мере просмотра твоих видео составляю для себя этакий словарик. Так лучше усваивается информация и в дальнейшем очень удобно. Всем советую! Вот словарь из этого урока, может кому и пригодится:Форматирование: Парагрф — <p> </p> Перенос строки — <br /> Постоянный перенос строки — <pre> </pre> Заголовок — <h1−6> </h1−6> Выравнивание текста — align="left/right/centr/justyfy" Цитаты — <blockquote> </blockquote>Список: Маркированный список — <ul> type="disc/cirle/square" </ul> Нумерованный список — <ol> type="1/A/a/I/i" </ol> Элемент списка — <li> </li> Начать с — start="3/C/c/III/iii" В элементе списка начать с — value="3/C/c/III/iii" Определения — <dl> </dl> Элемент определения — <dd> </dd>Текст: Курсив — <em> </em> Печатная машинка — <code> </code> Выделение текста Печатная машинка — <tt> </tt> Жирный шрифт — <strong> </strong> Жирное выделение текста — <b> </b> Увеличивающее выделение текста — <big> </big> Уменьшивающее выделение текста — <small> </small> Курсивное выделение текста — <i> </i> Зачеркивающее выделение текста — <s> </s> Подчеркивающее выделение текста — <u> </u> Верхний индекс — 2<sup>3</sup> =8 Нижний индекс — H<sub>2</sub>O Изменить шрифт текста — <font face="Times New Roman, Arial"> Изменить размер текста — <font size="1−7/+1/-1"> Изменить цвет текста — <font color="red/000000/#ffcc00">Сокращения: Аббревиатура — <abbr title="аббревиатура">аб-ра</abbr> Инициалы — <acronym title="Hyber Text Markup Language">HTML</acronym>

  13. kirill:

    ?? ???? ??? ?????? ?? ???? ?????.? ??? ???? ??????????? ???люди у меня на сайте так пишет помогите што делать

  14. Сергей:

    Спасибо! Очень полезные уроки. Жду следующих :)

  15. Хихи:

    Русские буквы иероглифами опазнает,кодеровка утф-8

  16. Ден помоги.Короче, как сделать слова,чтобы они были на одной строке тока на разных расстояниях.Вот например.МАМА-с лева ПАПА-по середине Я-с права.И все на одной строке.Заранее спс!!!

  17. Николай:

    Ау меня наоборот все отображалось так "

    ?? ???? ??? ?????? ?? ???? ?????.? ??? ???? ??????????? " когда была строчка с кодировкой «

    charset=utf-8» После удаления этой строчки все стало нормально работать, ничего что я удалил?

  18. Игорь:

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

  19. Fati:

    Здравствуй , ДэнВэбвот мои первые строчки:<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org//TR/html4/loose.dtd»><html><head><meta http-equiv"«Content-Type» content"«text/html: charset=utf-8»><meta name="description" content="хадисы Муслима, переводы с арабского, заказать сайт." /><meta name="keywords" content="хадис, Муслим, сайт /><title>Заголовок</title></head><body><p>мой первый сайт</p> </body></html>и не могу понять , где ошибка. Почему в броузере не отображается моя жалкая фраза? Только пустая страница, а где же «мой первый сайт»?

  20. Доброе время суток!Хотелось бы задать вопрос:Чем принципиально отличаются теги<acronym></acronym> и <abbr></abbr>?Ведь на веб-странцие в рез. применения этих тегов мы видим одно и тоже.Спасибо за ответ!

    • Они отличаются логическим значением. <abbr></abbr> — это аббревиатура, а <acronym></acronym> — это акроним, то есть, в отличии от аббревиатуры, это уже устоявшееся и вошедшее в речь сокращение.

  21. sarmail:

    Ден, спасибо за второй урок. Но остался непонятным один момент. Я так и не понял, чем отличаются теги для курсива<em> — </em>и<i> — </i>И тот и другой делают текст наклонным. В чем же тогда между ними разница? Какой тег использовать?И непонятно также другое: на примере твоего сайта видно, что слова у тебя «кавычатся» с помощью какого-то тега &quot;И в то же время в уроке ты предлагаешь кавычить с помощью тега <q> — </q>Поясни плиз.

    • Как я говорил, нужно понимать, что некоторые теги не только отвечают за внешний вид, но и несут логический смысл.

      Если используется <i> — это просто курсив, если <em> — это говорит о том, что текст внутри данного тега очень важен, вы делаете на нем акцент, хотя внешне то тоже курсив. Это, например, будут учитывать поисковые системы при сканировании вашего документа.
      Так же и <q> — это логический тег, означает цитату. 
      Нужно логически правильно использовать теги, это делают далеко не все html верстальщики)

  22. sarmail:

    Теперь понятно. А то из видеоурока не понятно, чем отличаются логические кавычки от обычных.  Вопрос еще такой: есть ли какой-то особый порядок, как ставить «задвоенные теги»? Например: чтобы слово было и заголовком и курсивом, нужно ставить <h1><i>Заголовок</i></h1> или 

    <i>

    <h1>Заголовок</h1></i>?

     

    • Правильно 

      <h1><i>Заголовок</i></h1>. Так как h1 — блочный элемент, а i — строчный. Строчные элементы должны всегда быть внутри блочных.

  23. sarmail:

    Спасибо.Сейчас, набивая теги, обнаружил странную вещь. Забыл поставить кавычки в таких тегах, как face=verdana color=blue. И тем не менее сработало. У тебя же в примерах теги показаны с кавычками — face="verdana" «color=blue». То есть кавычки можно не ставить? Или это потом «выйдет боком»?

    • Кавычки ставить надо. Просто браузеры «понимают» некоторые свойства и без кавычек, но это уже не валидно, не соответствует стандарту.

  24. Виктор:

    гыыы, разобрался, синтаксическая ошибка правописания)))

  25. Сергей:

    Большое тебе «ЧЕЛОВЕЧЕЩНОЕ» спасибо!!! Все доступно, просто и интересно. 

  26. Женя:

    Автор спабо тебе очень полезная инфа ))))) 

  27. Женя:

    автору песпектос

  28. nurli:

    на что вы нажимаете после которого ""(ковычки) автоматически появляются? не tab ли? я нажимаю, а там просто пробел

    • Кавычки автоматически не появляются, я сам просто так набираю — сначала 2 кавычки, потом текст между ними — так привык.

  29. Руслан:

    Такой вопрос. Например, чтобы слово отображалось жирным и курсивным.Как правильно писать?Так: <b><i>Слово</i></b> или так: <i><b>Слово</b></i> или не имеет значения как прописывать? 

  30. Олег:

    Действительно, кротко и доступно без всякой «воды». Огромное спасибо

  31. ильдар:

    ?????? ?????? ?????? ???? ?? ????? ??? ????? ????? ? ? ?????? (??? ???????? ??? ???? ??????) ден пожалуста скажи как мне с этим быть зарание спс

  32. Сергей:

    У меня такой вопрос:         мне советовали кодировку windows-1251        Подскажите она чем то хуже????P.S. Большое спасибо за обучающий курс, заделан он классно!!

    • Используйте utf8 — более «продвинутый» вариант, содержит ВСЕ символы. Это позволит избежать многих проблем в будущем.

      • Сергей:

        Просто проблема в том что с utf-8 у меня не хочет работать. Я даже брал просто копировал твой текст с первого урока и вставлял в блокнот с  кодировкой 

        windows-1251 все работает а с utf-8 не хочет в место текста ставит знаки вопроса(((

  33. Славик:

    А как например записать «<!DOCTIPE HTML>», чтобы при этом броузер эту запись воспринимал именно как текст, а не как код?

  34. Используйте тег <code> или <pre>

  35. Ден! PLIZ...такой вопрос как делать сайт,чтобы писанина на арабском языке отображалась так как надо?

  36. спасибо за видео 

  37. Коля:

    подскажите как изменить адрес сайта, а то ту меня вместо адреса сайта, путь к моему интернет файлу(или адрес сайта менять нельзя???)???

    • Адрес сайта — это есть доменное имя, которое вы покупаете и прописываете для него сервера хостинга, где лежит ваш сайт.

  38. Карен:

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

  39. Kolya:

    DenWeb  Привет, хочу создать галерею семейную. типо как у этих сайтов  

    /katyakabak.ru/  khilkevich.кг! Но не получается какой нужно использывать тег чтобы картинки самими листались , музыку добавить

  40. Спасибо за уроки очень полезно

  41. спасибо за урок) смотрел его год назад! всё запомнил!но потом забыл, и снова вернулся на ваш сайт потому, что понятно обьясняете ) 

  42. Все очень внятно и наглядно. Большое спасибо!

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

    Никогда не пишу комментарии,но сейчас не удержался. Потрясающе созданный сайт,отличные по качеству уроки.Все доступно и грамотно.Огромное спасибо и хорошего продвижения сайту.

  44. Алина:

    Большое спасибо за Ваш сайт, нашла для себя очень много полезного!! Только вот вопрос:  <title>(в вашем примере просто «заголовок»)</title> ввожу заголовок, но вместо этого текста появляються вопросы в ромбике))) аналогично происходит и с остальными текстами( зарание спасибо за ответ))))

  45. Сашка:

    Как понять,сохраните в формате utf-8 ?заранее большое спасибо

  46. beowoolf:

    большое спасибо за урок!

  47. Никита:

    а как сделать так чтобы фон веб-страницы стал определённого цвета?

  48. Опять 25 который раз вижу и который раз не работает.<h1 align="center" с этим проблем не возникает а вот <h1 align="right" как не крути не переносит текст в правую сторону.

  49. Антон:

    Возник вопрос.Можно ли в теге font одновременно указать допустим размер и цвет?

  50. Максим:

    Спасибо! ОГРОМНОЕ.Теперь многое стало понятным

  51. Евгений:

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

  52. Татьяна:

    Уроки отличные!!! Доступные, понятные для новичков! Редко такие встретишь! СПАСИБО!

  53. Евгений:

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

  54. Ilya:

    Спасибо за урок!Но меня одно приводит в ужас. То что все эти теги надо запомнить...

  55. Курсов по html в сети и торентах очень много,но ваши курсы более чётко обьясняют как зачем и почему следует применять данное действие или лучше нежелательно,что придаёт более удобно понимать все аспекты и лучше закрепить...Например,после просмотра именно ваших видео материалов я наизусть знаю значение каждого тега и саму структуру страницы...А по другим материалам из сети я не мог чётко закрепить материал и при создании сайта прибегал к записям хоть уже и понимал основы языка...Респект вам за уроки...

  56. Рыжепаха:

    Молодец!!!спасибо большое!!всё понятно...

  57. ZY:

    Хороший курс,все понятно,все конспектирую и даже вопросов не возникает

  58. Владимир:

    Хороший курс,все объясняется доходчиво,даже вопросов не возникает

  59. Екатерина:

    Просто супер! Понятно и интересно. Спасибо!

  60. Надежда:

    Денис выражаю вам огромною благодарность за ваши уроки, вы просто палочка-выручалочка, спасибо! Но у меня возник вопрос. Так ли актуальна эта информация, как в те года, когда вы это снимали? Во первых остаётся ли актуальной именно эта версия HTML? И во вторых я с удовольствием изучаю и конспектирую всё, что Вы нам тут рассказываете, но меня не покидают сомнения...Мне говорили, что сейчас полно движков и приложений через которые легко сделать сайт, не прибегая к изучению таких глубин, что это лишняя трата времени...Так ли это?

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

  61. Руслан:

    Ура!!! Наконец-таки нашел толковый сайт. Ув. ДенВеб я восхищаюсь правда грамотное толкование,а как оформлено все ...имоции тут уместны)))) Большое спасибо Вам. С Ув. Руслан 

  62. Галина:

    Денис (?), огромное спасибо за Ваш сайт. Вы удивительно легко, доступно и доходчиво  объясняете нелегкие (по крайней мере для меня) вещи. Успехов Вам во всем. И еще раз спасибо.

  63. Валерий:

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

  64. Витос:

    Спасибо за доступную и качественную информацию, Денис! Желаю Вам успехов в ваших движениях!!!

  65. Валентин:

    Спасибо большое,давно хотел заняться))

  66. Лена:

    Голос приятный, уроки интересные) Спасибо.

  67. Дениска:

    Огромное приОГРОМНОЕ спасибо.Всё настолько понятно и доступно!!! Дэн, ты преподаватель от природы!!!

  68. Ирина:

    Огромное спасибо! Очень познавательно и всё понятно

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

Spam Protection by WP-SpamFree

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