Изучаем с нуля HTML за 1 час! Верстка для начинающих, структура, теги, сайт.

Описание

В этом видео я рассказываю, как за 1 час выучить HTML, как это сделать быстро и потратить минимум времени – без потери качества!!!

Обязательно используем удобные инструменты для редактирования веб страниц – такие, как например редактор Brackets.

Скачать его можно по этой ссылке: http://brackets.io/

Лайфхак: Обязательно в этом редакторе устанавливаем два дополнения:

*** Внимание: Угловые скобки в описании нельзя разместить - поэтому вместо них использованы квадратные [ ] !!! ***

Первое – Emmet – для ускорения написания кода HTML. Например, сохранив файл как имяфайла.html нажимаем !(восклицательный знак) и TAB(табуляцию) и у нас автоматически пишется минимальная структура документа HTML.
Или, например, пишем английскую буква “a”(без кавычек) и нажимаем TAB и у нас пишется ТЕГ для ссылки [a href=”” alt=””][/a].

Ведь очень удобно?!

Второе – Beautify – для красивого оформления кода. Комбинацией клавиш Ctrl+Alt+B или при сохранении файла красиво оформит структуру вашего файла, с отступами и, главное — сделает ее читабельной.

Это просто отлично!


В целом для полноценного изучения HTML нужно сделать следующие:

1. Понять, что минимальная структура HTML файла просто необходима – она позволяет браузерам правильно отображать ваш документ пользователям.

2. Усвоить, что структура документа, которая находится в теге [html] состоит из 2х частей – тег [head][/head] - для служебной информации о документе (например, заголовок, кодировка, описание, ключевые слова и т.п.) и тег [body][/body] - сам основной документ, который и отображается пользователю (то содержание, которое он видит на экране).

3. Придерживаться правильной структуры HTML.

4. Изучить десяток популярных тегов, которые чаще всего используются для оформления содержания документа, такие как:

Абзац - тег [p] позволяет сформировать абзацы в тексте.
Заголовок - формируются посредством тегов [h1]...[h6].
Ссылка - используется тег [a].
Перевод строки - используется тег [br].
Выделение текста - подходит тег [span].
Блочный элемент - для позиционирования подойдет тег [div].
Картинка – тег [img].
Таблица – тег [table].
Ввод данных – тег [input].
Жирный текст – теги [b] или [strong].
Курсив – тег [em].

5. Естественно, обращаться к онлайн руководствам и читать описания новых тегов.

6. Изучать чужой код – нажимаем правой кнопкой мыши и берем пункт меню – «Исследовать элемент»

Подписывайтесь на наш канал в YouTube: https://www.youtube.com/channel/UCfxnN0xALQR6OtznIj35ypQ

Вступайте в нашу группу ВК: https://vk.com/wiseplat

Задавайте вопросы – постараюсь ответить ?

Удачи в таких классных начинаниях!

#html #css #htmlза1час #программированиедлядетей #урокиhtml