Как выучить html

С чего начать изучение html?

Сейчас трудно представить себе человека, работающего с Интернетом, и не знающего что такое html. Многие хотят выучить этот язык. Казалось бы, чего же проще — существует пугающе огромное число книг, посвященных этой теме. Неужели, язык html такой сложный, что ему посвящены огромные тома?

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

Для начала, я хотел бы привести примерный план этой статьи. Если кому-то что-то не интересно — может смело пропустить.

Что такое html и зачем он нужен

html — это не язык программирования, как многие думают. Это всего лишь, язык разметки. Его назначение — определять структуру документа. Если кто-то вам скажет, что html нужен, чтобы определять внешний вид странички — не верьте ему! Этот человек либо из прошлого, либо не совсем понимает предмет.

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

Поддержкой html, как и многих других технологий, связанных с web, занимается консорциум W3C. Если вы хотите узнать все из первых рук — пожалуйте на их сайт. Но должен вас предупредить: спецификации, выпускаемые W3C, носят рекомендательный характер, поэтому браузеры всегда по-разному воспринимают один и тот же html код. Это делает верстку гораздо сложнее, чем она есть на самом деле.

В настоящее время последняя спецификация html имеет номер 4.0. Есть так же, язык xhtml, который гораздо более требователен к разработчику, потому что содержит более жесткие стандарты. Так, тэги в html могут писаться в любом регистре, а в xhtml — только в нижнем. И так далее. Я придерживаюсь спецификации xhtml и буду ниже описывать ее.

Язык html составляет набор тэгов. Это директивы браузеру, которые указывают ему сруктуру вашего документа. Прошу заметить: структуру . За внешний вид сегодня отвечает другая технология — CSS, разговор о которой пойдет ниже. Для того, чтобы выучить html, по сути, нужно выучить набор тэгов и их аттрибутов и все! Можно приступать к созданию тестовых сайтов.

Какие тэги нужно знать?

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

Основные: html, head, title, body;
Структурные: div, span;
Текстовые: p, ul, ol, li, h1-h6, br, pre;
Таблицы: table, tr, td;
Ссылки: a;
Мультимедиа: img, object;
Фреймы: frameset, frame, iframe;
Формы: form, input, textarea, label, select, option;
Факультативные: hr;
Специальные: script, link, meta;

Как видно, тэгов не так уж и много. Однако, их изучение может занять значительное время, потому что многие из этих тэгов могут снабжаться атрибутами, которые заставляют эти элементы вести себя как-то не так.

Кто-то может возмутиться и сказать, что знает другие тэги, которые работают. Да, действительно, я привел список не всех тэгов, поддерживаемых браузерами. Однако, эти тэги являются основными, и человек, который знает их может сказать, что он знает html. Я нарочно не включал в свой список тэги типа font, которые являются устаревшими. Эти тэги настолько плохи, что даже говорить о них нет смысла, потому что сейчас есть значительно более мощные средства, позволяющие управлять внешним видом страниц и их частей. Лично я считаю необходимым и достаточным знание вышеприведенных тэгов. Потому что остальные либо нужны очень редко, либо не нужны вовсе. А посему, я предлагаю начинать изучение html с изучения этих тэгов.

Как сделать красиво?

Тот, кто попытается сверстать страничку при помощи вышеприведенных тэгов, получит в результате, довольно скромнооформленную страницу, которая будет белой с черным текстом и синими ссылками. Кое-кому, возможно, удастся разнообразить позиционирование блоков информации при помощи таблиц и атрибутов align. Кто-то попытается оживить страницу при помощи вставки картинок. Однако, есть специальное средство для настройки внешнего вида страниц. Это CSS.

Сейчас практически ни один сайт не обходится без применения технологии CSS. Именно на CSS возложена миссия определения оформления документа. Фон страницы, отступы, выравнивания, шрифты, цвета и многое другое находится в компетенции CSS. Поэтому сейчас рекомендуется не использовать теги и атрибуты, определяющие оформление страниц и элементов, а использовать вместо них правила CSS. О том, как же применять CSS лучше почитать в книгах. Но я хочу сказать, что если вы встретили тэг или атрибут, определяющий внешний вид элемента, 10 раз подумайте, прежде, чем применять его! Лучше узнайте, какое правило CSS отвечает за отображение элемента в таком виде, в котором вы хотите его видеть. За очень редким исключением, такое правило находится всегда.

С чего лучше начать изучение верстки?

Верстать лучше всего начинать после того, как поймешь принципы работы веб. Лично я бы составил такой план обучения:

Изучение принципов работы web и структуры клиент-сервер
Изучение тэгов и их атрибутов, с практическими занятиями по их применению
Изучение правил CSS с практическими занятиями по их применению
Изучение табличной верстки
Верстка простого макета таблицами
Верстка сложного макета таблицами
Изучение директив DOCTYPE
Изучение блочной верстки (тэг div)
Верстка простого макета дивами
Верстка сложного макета дивами
Хитрости, приемы, хаки и прочие премудрости от гуру

В принципе, для начального уровня подготовки и знания основ html, достаточно пройти только первые 5 пунктов. (такой вариант будет идеальным для веб-программистов, которые не будут верстать сайты. Знание html им нужно только для того, чтобы выводить данные, полученные в результате выполнения скрипта.)

Итог

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

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

С чего начать изучение html?
Основы html. Общие правила. Блочные и строчные элементы.
Основы html 2. Абзацы, списки, заголовки.
Основы html 3. Таблицы.
Основы html 4. Ссылки.
Основы html 5. Формы.
Основы html 6. Формы (продолжение).
Основы html 7. textarea.

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

Динамическая подгрузка JavaScript
Основы html 3. Таблицы.
Строим гистограммы на Perl + html + css
Основы html 7. textarea.
Загрузка втростепенного контента Ajax-ом
Делаем классную ленту изображений с автопрокруткой
Основы html 2. Абзацы, списки, заголовки.
Выбор пунктов из таблицы на JS

HTML Самоучитель

HTML — это стандартный язык разметки для веб-страниц.

С помощью HTML вы можете создать свой собственный веб-сайт.

HTML прост в освоении — совершенно бесплатно!

Простое обучение с помощью HTML «Попробуйте сами»

С помощью редактора «Попробуйте сами» вы можете отредактировать HTML-код и просмотреть результат:

Пример

HTML Учебник

Это заголовок

Это параграф.

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

HTML Примеры

В этом руководстве по HTML вы найдете более 200 примеров. С помощью нашего онлайн -редактора «Попробуйте сами» вы можете редактировать и тестировать каждый пример самостоятельно!

HTML Упражнения

Это руководство по HTML также содержит почти 100 упражнений по HTML.

HTML Тест-викторина

Проверьте свои навыки работы с HTML с помощью нашей HTML-викторины!

HTML Справочник

В SchoolsW3 вы найдете все ссылки на HTML-элементы, атрибуты, события, названия цветов, сущности, наборы символов, кодировку URL, языковые коды, HTTP-сообщения, поддержку браузера и многое другое:

Пройдите курс обучения

Мы только что запустили
SchoolsW3 видео

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

Schoolsw3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

С чего начать?

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

Для начинающих последовательность изучения следующая.

Тем, кто уже знаком с HTML и CSS, сложно посоветовать порядок прохождения материалов, поэтому обращаем ваше внимание на следующие рекомендуемые разделы.

Рецепты HTML и CSS
Справочники HTML и CSS
Практикум (высокая сложность)
Форум

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как выучить HTML

Привет! Я начинающий в этой сфере, прошел курс Sololearn. Понимаю что за месяц трудно хорошо выучить подобную тему, но я вижу, что пройденный курс в итоге дал только общее представление о html5.
Какие курсы можете посоветовать, которые смогут дать полноту знаний и я смог хорошо разбираться в этом вопросе и, конечно, начать в ней работать? Всем спасибо заранее

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Выучить C++: как и где можно более эффективнее выучить данный язык?
Хочу выучить C++, может кто подсказать, как и где можно более эффективнее выучить данный язык? Учу.

Как выучить C#?
Как вам данный сайт del , там есть вроде бы годные уроки по С# или всё же лучше Шилдт, что скажете?

Как выучить C++?
Привет всем! У меня такой вопрос тем кто учил или учит C++: Как выучить C++? А именно меня.

Как выучить Qt?
Хочу уметь создавать программное обеспечение с помощью QT. Возможно ли это сделать самостоятельно.

450 / 415 / 115
Регистрация: 15.02.2012
Сообщений: 1,831

Лучший ответ

Сообщение было отмечено gogolik как решение

Решение

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

2021 / 1620 / 489
Регистрация: 31.05.2009
Сообщений: 3,005

Цитата Сообщение от eternity_ua Посмотреть сообщение

Курсы имеют смысл только тогда, когда есть ментор, который даёт и проверяет задания, которому можно задать вопрос, и который может без лишней воды объяснить\показать как (и для чего) делать те или иные вещи. Т.е. может показать практическую часть. Такие курсы разумеется не бесплатны. В остальном, книги пока ещё никто не отменял.

Цитата Сообщение от eternity_ua Посмотреть сообщение

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

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

Регистрация: 05.07.2021
Сообщений: 5
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как выучить C# с нуля?
Извините если такая тема уже была.А она была я более чем уверен.Но всё же.Вопрос такой как вы учили.

Как выучить Джанго?
Изучаю Джанго . Питон знаю поверхностно (лутц и собственны небольши. Эксперементы). По Джанго.

Как выучить Objective-C?
подскажите хорошую литературу, что бы можно было выучить язык, и самое главное что бы было понятно.

Как выучить стихотворение?
Начитался в интернете советов "психологов" и "врачей" о том, как надо правильно учить.

Как выучить JAVA
Добрый день. Поделитесь опытом, как кто постиг Силу JAVA. Пытаюсь освоить ее через Шилда, но.

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