HTML – первые шаги в изучении языка. Первые Шаги - Учебник по Html для чайников Главное — практика

От автора: все когда-то начинается. Вот и вы решили наконец освоить науку сайтостроения. Начинать в ней нужно с языка html. Первые шаги в нем очень важно делать уверенно, иначе можно споткнуться и не продолжить изучение. Как вам максимально просто и эффективно освоить язык, я рассказу сегодня.

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

Как начинал я и что из этого вам нужно понять

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

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

Как вообще происходит процесс создания сайта и зачем там нужен html

Какова структура документа, на какие части он делится

Что такое теги и атрибуты, какими они бывают и как их использовать

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

Итак, как я учил этот язык? Я воспользовался услугами Яндексов и Гуглов, куда забил соответствующую информацию (что-то вроде изучения html). Попался мне сразу на глаза 1 сайт, где было 15 уроков по html в порядке усложнения. Купил я, значится, тетрадку на 48 листов, собрался с духом и начал изучение, записывая практически каждую буковку в тетрадь и по 300 раз в день используя только что изученные теги.

Дело это было невероятно интересное. Собственно, такой способ изучения имеет одну проблему:

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

Таким образом, буквально за 1 месяц я изучил язык. Не полностью, конечно. Я вам скажу, что его и не нужно изучать от и до. Например, спросите у меня сейчас, что означает тег dfn или bdi? Я полезу в справочник глянуть. Но это никак не помешает мне легко создавать сайты на html, потому что 70-80% тегов и атрибутов в нем используются крайне редко и практически не нужны в стандартных ситуациях.

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

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

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

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

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

Следующий шаг – это полноценная практика. А именно, вы сверстаете сайт. Очень простой, потому что для первого раза именно такой и нужен. Самое главное на этом этапе – научиться применять полученные знания. Ведь без применения знания не имеют никакой ценности. Вы ведь хотите изучить html не для того, чтобы хвастаться перед друзьями? Надеюсь, не для этого. Цель – научиться использовать html как базовый язык при создании сайтов.

Следующий и последний шаг – это изучение самой актуальной информации по новым тегам и возможностям, которые принес html5, изучение новых возможностей css3. Ну а в самом курсе вы наконец-то совершите мощный прорыв в сайтостроении: сверстаете три сайта, каждый сложнее предыдущего. Ах да, даже 4, потому что там еще пару уроков идут вам бонусом.

Последним сайтом, который вы сверстаете, будет интернет-магазин. Чувствуете мощь такого обучения? Сейчас вы полный 0 (даже может не знаете, что такое тег), а уже через 1 месяц у вас будет шаблон профессионального интернет-магазина. Я даже не знаю, какой пример привести. Это все равно, что вы катались на четырехколесном велосипеде, а потом сразу пересели в BMW.

Итог

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

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

Первые страницы учебника:

Учебник по Html для чайников. Инструментарий.

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

D:\первые шаги\

У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:

Здравствуйте, это моя первая страница.

Добро пожаловать! :)

()

Сохраним этот документ, присвоив ему имя *.html

D:\первые шаги\index.html

Многие читатели спотыкаются на фразе: "А теперь сохраним этот документ, присвоив ему имя *.html ", они пишут письма, о том, что у них получается сохранить, только как текстовой документ *.txt, а вот как *.html - никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание.

Ступенька 8-ая.

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

Сначала рассмотрим курсив и полужирный текст:

Полужирный текст
Наклонный текст (курсив)

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

Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:

моноширинный шрифт

В наш пример я его вводить не буду (сделайте это самостоятельно).

Также моноширинным шрифтом отображается текст заключенный в тэг

Текст (куча пробелов) текст
 текст (куча пробелов) текст
 текст (куча пробелов) текст

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

  текст


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

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

  Перечеркнутый  

 Перечеркнутый  
Тэг  представляется крупным шрифтом, а  малым шрифтом относительно основного текста: 

  Малый 

Нормальный текст

 Большой  
Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub
 - нижний. Где они могут пригодиться? Ну, например, при написании
какой-нибудь формулы - H 2 O (все, что мы выносим со школьной скамьи:). 
Верхний индекс  sup 

Нижний индекс  sub  

 / Учебник по Html.
Ступенька 8-ая.
 



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

 Полужирный текст



 Наклонный текст (курсив)

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


 


 


 

 












Здравствуйте, это
моя первая страница.




Добро пожаловать!
 :)


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



 


 

 ()


Теперь
пара строк о моширинном шрифте. Что это такое за шрифт? Это
шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей
машинки. А тэг для него следующий: 

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

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

 
текст


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

  Подчеркнутый текст

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

  Перечеркнутый
 

 Перечеркнутый  
Тэг  представляется крупным шрифтом, а
 малым шрифтом относительно основного текста: 

  Малый


Нормальный текст

 Большой  
Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний,
Sub - нижний. Где они могут пригодиться? Ну, например, при написании
какой-нибудь формулы - H 2 O (все, что мы выносим
со школьной скамьи:). 
Верхний индекс  sup


Нижний индекс  sub
 
Вот, собственно, и все. Можем переходить на следующую ступеньку.

1 голос

 
Приветствую вас, дорогие читатели! Сегодня мы поговорим о «языке гипертекстовой разметки». Почему его должен знать каждый , и как сделать в html первые шаги. Если дизайнер не знает иностранных языков, это не самое страшное. Самое страшное, когда он не владеет даже базовыми знаниями html. В таком случае он рискует навсегда остаться «иностранцем» в веб-индустрии.
 
Язык важен
 
Вы разговариваете? Представьте себе, ваш тоже!
 
 
Часто ли вы сталкивались с тем, что дизайн сайта продуман до мелочей, но в итоге результат оставляет желать лучшего? Это значит, что вы и ваш браузер говорите на разных языках. Когда с подобным сталкивается дизайнер, он начинает четко осознавать: сайт – это не набор красивых , плашек и картинок.
 
Качественный ресурс – это прежде всего, грамотный код. А чтобы разбираться в нём, необходимо его изучить. Существует много толковых учебников, которые помогут новичку разобраться в html, с нуля.
 
Все мы знаем, что учиться чему-то новому проще сразу на практике. Специально для новичков был разработан бесплатный онлайн‑курс «Базовый HTML и CSS



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

 
Вам не придётся читать тонны занудной литературы для программистов, или идти получать высшее образование по профилю. Интерактивность курса позволяет сразу закреплять навыки, увидеть полученный результат, а наставник поможет, если возникнут трудности.
 
Кстати о проблемах. У новичков часто возникают ошибки в написании кода. Тут важно помнить, что учитывается всё: пробелы, точки и запятые. Лишний знак или отсутствие оного приведут к некорректному отображению информации. А потому следить за этим нужно очень внимательно.
 
Главное — практика
 
Самое приятное, что для создания сайта, вам не потребуется сложное . Можно просто обойтись . Открываем блокнот и пишем в нём:
 <html
>

<head
>

<title
>
Моя первая страничка</
title
>

</
head
>

<body
>

Hello World!
<br
>
</
body
>

</
html
>







Hello World!


Меня зовут (имя), это моя первая страничка!


 
Затем, сохраните всё написанное как html документ, важно, чтобы расширение было html. Как это сделать? В документе нажимаете «файл», затем «сохранить как», в поле «имя файла» задаём: index.html
. После всех этих операций остаётся сделать самое интересное! Правой клавишей жмём по нашему документу, открываем любым браузером.
 
Вуаля! Вы написали страничку, и это только начало!
 
 
Как вы видите, код отвечает за содержимое страницы. Другими словами – за . Как правило, за дизайн ресурса отвечает один человек, за вёрстку – другой. Но золотой серединой является то, когда один человек умеет верстать и отрисовывать картинку.
 
Это помогает избежать недопонимания между двумя людьми, в итоге получить тот продукт, который задумывался дизайнером.
 
Как и где учиться
 
У многих количество тегов и просто их название вызывают ужас. Словно ты попал в страну, где говорят на незнакомом языке. Без словаря не обойтись, а точнее без учебника для чайников. Курсы – это конечно хорошо, но без книги, в которой все расписано, и куда можно заглянуть в любой момент, просто не обойтись. Учебник можно скачать, а можно изучать онлайн.
 
Практика показывает, что онлайн-версия имеет ряд плюсов и минусов. Минус состоит в том, что для доступа к материалу, вам не обойтись без интернета. А плюсом будет в то, что онлайн-издания часто обновляют. В них можно найти всю актуальную информацию на сегодняшний день.
 
 
Алленова Наталья Вячеславовна написала толковую, подробную книгу по html (смотреть

). Структура издания позволяет двигаться постепенно, осваивая более сложные алгоритмы, основанные на простых элементах. Теория и практика приятно сочетаются и дополняют друг друга.
 
Здесь вы найдете ответы на конкретные вопросы: как создавать ? Как выстраивать ? Как вставить картинку? Никаких абстрактных рассуждений на тему пойди туда, не знаю куда. Многие учебники в этом проигрывают, с ними вы либо теоретик, либо практик, у которого ничего не работает. Согласитесь, это не самые радужные перспективы.
 
 
Конечно, для создания сайта, придётся изучить теги более подробно. С этим, проблем возникнуть не должно, всемирная сеть предлагает огромное количество источников справочников html. Плюсы таких справочников в том, что в поисковой строке сайта можно вписать тег, узнать его значение, как и где он применяется. Иными словами – это эдакий интерактивный словарь.
 
Каждому, кто хочет сделать сайт самостоятельно, не обойтись одними познаниями html. Придется , но это уже совсем другая история. Если после создания первой странички, вы захотите соорудить полноценный сайт, то рекомендую подписаться на мои обновления. Здесь вы сможете найти много полезной информации, которая поможет разобраться в веб-индустрии.