С чего начать изучение CSS и HTML? Мой путь в WEB. Почему стоит заняться веб-разработкой и с чего начать

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

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

Итак, что же такое HTML ?

Сама аббревиатура расшифровывается как Н урегТ ехt M arkиp L aпguage (язык гипертекстовой разметки ).

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

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

Заголовок странички

Один день из моей жизни

Подготовка к концерту

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

Репетиция

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

Концерт

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

Для начала вам надо будет набрать этот текст в каком-нибудь текстовом редакторе (наиболее удобным я считаю является Notepad ++ ) и сохранить файл под именем index .html где-нибудь у себя на диске. При двойном щелчке на сохраненном файле у вас откроется страничка примерно такого вида.

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

Посмотрите на исходный код. Как вы могли уже заметить, в нем перед словом “Один”, есть небольшой отступ. Однако браузер его не учел, он просто его проглотил молча, как будто и не было его никогда. Более того, если вы попробуете поставить множество пробелов между словами, то они все будут восприняты браузером как один пробел, - у HTML есть такая особенность.

И вот ещё такой совет, - когда пишите HTML -код, приучайте себя к тому, чтобы делать отступы в тех тэгах, которые являются вложенными в другие. Например, тэги title и body вложены в тэг html . Значит, когда будете писать эти тэги, то не забывайте делать соответствующие отступы. Обычно они делаются с помощью двух пробелов, либо табуляции, - это уже дело вкуса. Зачем это нужно? Сейчас, в том небольшом кусочке документа, который я привёл как пример выше - информации немного, поэтому и запутаться там довольно проблематично. Однако, если на страничке будет находиться множество вложенных элементов, то не будет ничего проще, как заплутать в этом огромном коде и с трудом сообразить, в какой части документа вы сейчас находитесь. Так что лучше приучать себя к хорошему стилю сразу, потом вы это сами поймете и вам это сыграет в дальнейшем хорошую службу.

Стоит также указать и самый необходимый минимум тэгов, которые должны быть в HTML -документе. Я говорю про эту часть:

Но даже если этой части и не будет, то большинство браузеров посмотрит на все это сквозь пальцы и всё равно отобразит вашу страничку. Однако такой фривольный стиль написания кода, при котором человек пропускает большое количество тэгов, является дурным тоном написания, поэтому желательно, чтобы все эти элементы были на вашей странице в любом случае. Иначе это может грозить проблемой совместимости с другими браузерами, что в результате сможет повлиять на внешний вид вашего сайта, и как следствие – посещаемости.

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

А теперь попробуем разобрать сами, какой тэг нашего примера выше за что отвечает.

Тэг html означает, что начинается вывод html кода.

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

body – начинается основная часть документа.

h 1 – заголовок.

h 2 – подзаголовок.

p – абзац.

На этом пожалуй всё! Если это был ваш первый HTML -документ, то я вас поздравляю! Да, он выглядит не так здорово, как нам бы того хотелось. Но тем не менее, у нас есть материал, над которым мы уже можем работать. А в следующих уроках, всё будет ещё интереснее, и мы потихоньку коснёмся работе с каскадными таблицами стилей (CSS ) .

< Назад

Для комментирования, вам необходимо зарегистрироваться.

Приветствую вас на страницах моего блога. HTML – это простой язык разметки, с помощью которого создаются веб-страницы. Я сказал что он простой, чтобы вы не пугались его изучения. Язык html для начинающих подходит просто идеально – намного сложнее с нуля сразу освоить какой-нибудь язык программирования, а вот html реально намного проще.

В этой статье я хочу подсказать вам, как наиболее быстро и эффективно изучить этот язык, чтобы уже через месяц-два вы отлично его знали. Думаете, невозможно? Я начал изучение html в конце марта. В конце мая я уже без проблем знал 90% нужных для работы тегов.

Как выучить язык бесплатно?

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

Из справочников я могу посоветовать вам – htmlbook . Это реально крутой сайт, на котором собраны все теги, показан результат их работы с подробным описанием. Но справочник это лишь дополнительный инструмент, наибольшего эффекта можно добиться при реальной практике.

Интерактивные курсы

И тут я говорю об интерактивных курсах. Это возможность писать код и сразу видеть, как он отображается. На курсах вам будут давать задания. Сначала простые, например, превратить текст в заголовок или сделать таблицу. Потом – сложнее. В конце концов вы обретете понимание того, что можно делать с помощью HTML. Если вы думаете, что за это нужно платить, то ошибаетесь.

– это замечательный сайт с курсами по html и css. Первые 16-18 курсов бесплатно! Если вы захотите продолжить обучение и получить доступ к платным, то придется платить 300 рублей в месяц или 1800 в год. Лично я отдал 300 рублей, прошел за месяц все платные курсы и получил от этого много пользы.

Важность записей

Еще один совет от меня – записывайте! Записывайте всю новую и важную для вас инормацию. Не записав вы рискуете так и не закрепить в памяти нужные знания. Лично у меня на полке лежит три общих тетради, практически полностью исписанных и время от времени я заглядываю в них, когда забываю то или иное свойство.

Параллельное изучение html и css

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

Самостоятельная практика

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

Уроки от команды webformyself

Webformyself – замечательный интернет-портал, который предоставляет кучу информации по сайтостроению. На их сайте вы можете найти много бесплатных статей по HTML, CSS и верстке сайтов, но также ими выпущены платные видеоуроки, цель которых максимально быстро донести до вас полезные знания.

В конце концов, у вас должна быть цель, по которой вы изучаете эти веб-технологии. Обычно это делают для того, чтобы научиться самостоятельно верстать макеты сайтов. Если у вас тоже есть такая цель, то отличным вариантом для вас будет приобретение доступа к премиум-урокам на сайте webformyself.com . В итоге вы можете получить не только доступ к урокам по HTML и CSS, но и много других. Например, по JavaScript и WordPress.

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

За сколько можно выучить языки?

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

Хорошие сайты с полезными материалами я вам дал – дальше ваше дело. В принципе, вышеперечисленные ресурсы являются наилучшими в интернете. Например, курсы от Htmlacademy прошли более ста тысяч человек, а на обновления Webformyself подписаны больше 87 тысяч людей.

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

Из чего состоит структура HTML-документа

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

Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:

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

Мой первый сайт Привет всем!
А это мой первый сайт.

Результат можно посмотреть .

— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:

align — Определяет выравнивание линии. Может принимать значение left, center, right.
color — Задаёт цвет линии.
noshade — Рисует линию без трехмерных эффектов.
size — Задаёт толщину линии.
width — Задаёт ширину линии.

Код с использованием тега

Мой первый сайт Привет всем!

А это мой первый сайт.

Визуальный пример находится .

Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:

Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:

Cуществуют и другие одиночные теги (, ,
, , , ,

, , , , , , , , , ), но с ними я познакомлю вас чуть позже.

Теперь давайте поговорим о «закрывающихся» тегах. Само название «закрывающийся тег», говорит о том, что тег требует обязательного закрытия. Это сделано для того, чтобы чётко ограничить часть текста, на которую действует тег.

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

Мой первый сайт Привет всем! А это мой первый сайт.
Привет всем! А это мой первый сайт.

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

Теги для выделения текста

Существует несколько способов выделить текст на странице. Сделать это можно с помощью стилей, а можно с помощью тегов. Нас (пока) интересует второй вариант.

— устанавливает жирное начертание шрифта.

— устанавливает курсивное начертание шрифта.

— добавляет подчеркивание к тексту.

— предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

— перечёркивает текст. Данный тег исключён из HTML5 вместо него рекомендуется использовать

— отображает текст моноширинным текстом. Исключён из HTML5.

— отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

— отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

— предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

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

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

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

— предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.

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

..
..
— HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег
представляет собой наиболее важный заголовок первого уровня, а тег
служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги
,…,
относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align , который определяет выравнивание заголовка, может принимать значения left — выравнивание заголовка по левому краю, center — выравнивание по центру, right — выравнивание по правому краю, justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

— представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color — устанавливает цвет текста, face — определяет гарнитуру шрифта, size — задает размер шрифта в условных единицах.

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

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

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

Ниже приведу код, в котором я использовал все эти теги:
Мой первый сайт
HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about:

What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

Publish online documents with headings, text, tables, lists, photos, etc.
Retrieve online information via hypertext links, at the click of a button.
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.
What is XHTML?

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML ^tools with it (such as XSLT, a language for transforming XML content).

What is CSS?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup ~~язык~~ language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

What is WebFonts?
WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format _{for the Web} (called "WOFF").
Лекция подошла к концу, надеюсь приобретённые знания вам пригодятся! В следующей лекции я расскажу вам о том, что в себе хранит тег , научимся выполнять всевозможные манипуляции с изображениями, и познакомимся с таблицами.

При написании данной статьи описание некоторых тегов было взято отсюда

Сейчас трудно представить себе человека, работающего с Интернетом, и не знающего что такое 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 - это сокращение от Hyper Text Markup Language (язык гипертекстовой разметки), на этом языке создаются сайты. Если вы никогда не программировали, изучение может показаться сложным, но, на самом деле, все что вам нужно, чтобы начать обучение - это простейший текстовый редактор и браузер. Вы узнаете, каким образом HTML влияет на текст, верстку различных сайтов и так далее. Знание HTML будет крайне полезным для любого пользователя интернета, и изучение основ займет меньше времени, чем вы думаете.

Шаги

Изучение основ HTML

Откройте файл HTML. Большинство текстовых редакторов (Блокнот или Word для Windows, TextEdit для Mac) могут быть использованы для создания файлов HTML. Создайте новый документ, и сохраните его (Файл > Сохранить как) в формате веб-страницы, или измените расширение файла на ".html" или ".htm" вместо ".doc," ".rtf," или другого расширения.

Откройте этот файл в браузере. Сохранив пустой файл с расширением.htm, найдите его на компьютере и откройте двойным щелчком мыши. В браузере должна открыться пустая страница. Если этого не произошло, перетащите файл в адресную строку вашего браузера. Редактируя файл HTML по этой инструкции, вы сможете обновлять эту страницу, чтобы посмотреть изменения.
Обратите внимание, что таким образом вы не создаете сайт в интернете. У других людей не будет доступа к этой странице, и вам не нужен интернет, чтобы смотреть свою локальную страницу. Браузер просто интерпретирует HTML-код, который ему дают, неважно, в интернете он, или у вас на диске.

Выучите теги разметки. Теги не отображаются на странице, в отличие от обычного текста. Вместо этого они указывают браузеру, каким образом надо отображать страницу и ее содержимое. "Открывающий тег" содержит инструкцию. Например, есть тег для полужирного текста. Также нужен "закрывающий тег", для разграничения области применения инструкции: в этом примере текст между открывающим и закрывающим тегами отобразится в полужирном начертании. Теги записываются внутри знаков неравенства, но закрывающий тег начинается с косой черты.
Открывающий тег записывается между знаками неравенства: < Открывающий тег >

В закрывающем теге перед дескриптором (названием) тега ставится косая черта: )

Читайте дальше, чтобы узнать об использовании тегов. Для этого шага достаточно запомнить формат записи, теги записываются между знаками неравенства: < > и

В некоторых самоучителях HTML, теги называют "элементами", а текст между открывающим и закрывающим тегами называют "содержимым элемента".

Наберите в редакторе тег . Каждый файл html должен начинаться с тега и заканчиваться тегом . Эти теги указывают браузеру, что все содержимое между тегами написано на языке HTML. Добавьте эти теги в файл:
Наберите вверху документа.

Нажмите enter несколько раз, чтобы создать несколько пустых строк, затем наберите

Все примеры из этой инструкции набираются между этими двумя тегами.

Создайте секцию в файле. Между тегами и , создайте открывающий тег и закрывающий тег . Создайте несколько пустых строк между ними. Содержимое, записанное между тегами и , не отображается на самой странице. Выполните следующие шаги, чтобы узнать, для чего нужен этот тег:
Между тегами и , напишите </b> и <b>

Между тегами и , напишите Как выучить HTML - wikiHow .

Сохраните изменения и откройте файл в браузере (или обновите страницу, если файл уже открыт). Текст должен отобразиться в названии страницы, над адресной строкой?

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

Как выучить HTML - wikiHow

Добавьте текст, используя различные стили. Пришло время добавить настоящее содержимое страницы! Все, что вы напишете между тегами body, отобразится на странице после обновления в браузере. Не используйте символы < или > , поскольку браузер попытается интерпретировать содержимое как тег, вместо текста. Напишите Hello world! (или что захотите), затем попробуйте добавить эти теги к тексту, и посмотрите, что получится:
Hello world! выделяет текст "курсивом": Hello world!

Hello world! выделяет текст "полужирным": Hello world!

~~Hello world!~~ зачеркивает текст: Hello world!

^{Hello world!} отображает шрифт в виде верхнего индекса: Hello world!

_{Hello world!} отображает шрифт в виде нижнего индекса: Hello world!

Попробуйте разные теги вместе: Как будет выглядеть Hello world! ?

Разделите текст на параграфы. Если вы попробуете написать несколько строк текста в файле HTML, вы заметите, что разрывы строк не отображаются в браузере. Абзацы определяются следующими тегами:
Это отдельный абзац.

После этого предложения следует разрыв строки.
тег до начала этого предложения.
Это первый тег, не требующий закрывающего тега. Такие теги называются "пустыми".

Создайте заголовки, чтобы показать названия разделов:

текст заголовка
: Самый большой заголовок

текст заголовка
(заголовок второго уровня)

текст заголовка
(заголовок третьего уровня)

текст заголовка
(заголовок четвертого уровня)

текст заголовка
(самый маленький заголовок)

Научитесь создавать списки. Есть несколько способов создания списков на странице. Попробуйте нижеизложенные варианты, чтобы узнать, какой вам больше нравится. Обратите внимание, что список помещается между двумя тегами (например для маркированного списка), и элементы списка тоже выделяются специальными тегами, например .
Маркированный список:

Первая строка
Вторая строка
И так далее

Нумерованный список:

Один
Два
Три

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

Кофе
- горячий напиток
Лимонад
- холодный напиток

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

Горизонтальная линия:

Вставить картинку :

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

Чтобы сослаться на относительную ссылку другой страницы, добавьте знак # после основной ссылки и название якоря. Например, ссылается на раздел советов этой страницы.

Продвинутый уровень HTML

Выучите атрибуты. Атрибуты записываются внутри тега, указывая на дополнительную информацию. Формат атрибутов такой: название="значение" , где название определяет атрибут ("color", для атрибута цвета), а значение указывает на его значение (например "red", для красного цвета).
Атрибуты на самом деле уже применялись в предыдущем разделе основ HTML. Тег использует атрибут src , якоря относительных ссылок используют атрибут name , а ссылки используют атрибут href . Как вы уже заметили, все атрибуты записаны в формате ___="___" ?

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

Содержимое каждой строки таблицы заключите в теги:

Заголовок столбца определяется тегом:

Ячейки в последующих строках:

Пример использования этих тегов:

Столбец 1: Месяц Столбец 2: Сэкономлено денег
Январь 100 рублей

С чего начать изучение CSS и HTML? Мой путь в WEB. Почему стоит заняться веб-разработкой и с чего начать

Один день из моей жизни

Подготовка к концерту

Репетиция

Концерт

Как выучить язык бесплатно?

Интерактивные курсы

Важность записей

Параллельное изучение html и css

Самостоятельная практика

Уроки от команды webformyself

За сколько можно выучить языки?

Из чего состоит структура HTML-документа

Теги для выделения текста

....

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

,…,

What is HTML?

What is XHTML?

What is CSS?

What is WebFonts?

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

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

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

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

Шаги

Изучение основ HTML

текст заголовка

текст заголовка

текст заголовка

текст заголовка

текст заголовка

Продвинутый уровень HTML

..
..