Пошаговое руководство по HTML, которое сделает из тебя html-гуру

Пошаговое руководство по HTML, которое сделает из тебя html-гуру

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

Чтобы определиться с тем, нужно ли это вам вообще, предлагаем начать вам с веб-разработки, а именно с HTML. HTML — это не совсем язык программирования в привычном понимании. Это язык текстовой разметки. Другими словами, эта разметка отвечает за содержание на странице и то, как на ней располагаются различные элементы. Браузеры считывают код и преобразуют его в страницу на вашем экране.

Создаем первую страницу

Итак, попробуем создать нашу первую страничку. Наверняка на вашем компьютере уже есть стандартный текстовый редактор (Блокнот, Notepad++). Можете использовать его. Однако, в Интернете вы сможете найти десяток хороших HTML редакторов, которые облегчат вам жизнь. Выберите тот, который вам по душе. Откройте его и напишите Hello! сохраните его с расширением .html. Например mysite.html Внимание! Расширение определяет тип файла, и пишется в конце названия вашего файла. Обратите внимание, что название файла и его расширение разделяется точкой.

Щелкните по файлу — и ваша веб-страничка откроется в браузере.

Сохранение .html файла

Сохранение .html файла

Знакомимся с тегами

Чтобы браузер понимал, как именно должен выглядеть текст, нужны теги. Тег — это специальный код, который говорит браузеру о том, как именно будет отображаться текст на странице. Каждый тег заключается в угловые кавычки < >. Существуют парные и одиночные теги. Тег <br>, к примеру, одиночный, и отвечает за то, что предложение нужно начать с новой строки. Если тег парный, выглядит он так: <p>….</p>. Открывающий тег ставится перед тем объектом, к которому мы хотим его применить, а закрывающий после него.

Самые важные теги

В самом верху всегда пишем <!DOCTYPE html>. Это называется декларацией типа документа. Она нужна, чтобы браузер сразу же “понимал”, что весь последующий текст написан в html.
Еще одними тегами, без которых не обойтись, являются <html>, <head> и <body>. <html> — это контейнер, в котором находится содержимое всей страницы.
<head> содержит данные, необходимые для работы браузера и поисковых систем. <body> содержит в себе непосредственно содержимое страницы.

Код вашей странички должен всегда содержать следующие строки:

<pre class="html">
<!DOCTYPE html>
<html>
<head></head>
<body></pre>
Здесь остальное содержание страницы 
</body>
</html></pre>

Теперь между <code><head></head></code> разместите тег <code><title></code>. Этот тег содержит в себе информацию о странице, но его содержимое отобразится только в названии вкладки в браузере, а также в выдаче поисковика. Вот так:

Название вкладки в браузере

Название вкладки в браузере

Основные теги

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

Размечаем абзацы <p>…</p> тег, с помощью которого можно сделать сделать абзац.

<!DOCTYPE html>
<html>
 <head></head>
 <body>
 <p>Я изучаю HTML. Я очень ответственный и серьезный человек. Любое начатое дело я всегда довожу до конца. Я добиваюсь любых поставленных мною целей.</p>
 </body>
</html>

Делаем заголовки. Для лучшего структурирования текста используют целую группу тегов для заголовков <h1>, <h2>,…<h6>. <h1> — это самый важный тег. Важно! он может использоваться только один раз. На практике используют только теги <h1>, <h2> и <h3>.

<!DOCTYPE html>
<html>
 <head></head>
 <body>
 <h1>Моя первая страничка</h1>
 <p>Я изучаю HTML. Я очень ответственный и серьезный человек. Любое начатое дело я всегда довожу до конца. Я добиваюсь любых поставленных мною целей.</p>
 <h2>Для чего мне это нужно?</h2>
Я стану умнее. Я стану всесторонне развитым человеком. Потому что мама так сказала. Мой кот станет меня уважать.
 </body>
</html>

Делаем списки. для того, чтобы разместить текст списком нам понадобятся теги <ul>, <ol>.
<ul> необходим, если наш список не пронумерован тег <ol> используется для пронумерованных списков.

Каждый элемент отделяется еще парой тегов <li>, </li> и теперь ваш код будет выглядеть вот так.

<!DOCTYPE html>
<html>
 <head></head>
 <body>
 <h1>Моя первая страничка</h1>
 <p>Я изучаю HTML. Я очень ответственный и серьезный человек. Любое начатое дело я всегда довожу до конца. Я добиваюсь любых поставленных мною целей.</p>
 <h2>Для чего мне это нужно?</h2>
<ul>
 <li>Я стану умнее.</li> 
 <li>Я стану всесторонне развитым человеком. </li>
 <li>Потому что мама так сказала.</li> 
 <li>Мой кот станет меня уважать.</li>
</ul>
 <h2>Что мне мешает?</h2>
<ol>
 <li> неуверенность</li>
 <li>страх</li>
 <li>лень</li>
</ol>
 </body>
</html>

А вот так наш код преобразует браузер:

Браузер преобразовал наш html код в страницу

Браузер преобразовал наш html код в страницу


Выделяем слова

Жирный и курсив. Для выделения текста жирным шрифтом или курсивом используют парные теги <b> и <i>.

Перенос и разделитель. Иногда нужно перенести предложение на новую строку. В таком случае используем тег <br>. Для того, чтобы провести горизонтальную линию, разделяющую текст, используем <hr>. Примечание: эти два тега являются одиночными, следовательно, закрывающий тег не нужен.
Парный тег <mark> подсвечивает выбранный текст желтым. Поместите слово или фразу, которую вы хотите выделить, между открывающим и закрывающим тегами.

Вы можете ставить сколько угодно пробелов в коде, но браузер будет отображать их как один. То же самое относит и к пустым строкам. Для того, чтобы браузер отображал все пробелы и переносы можно использовать одиночный тег <pre>. Поставьте его перед предложением, которое вы хотите начать с новой строки.

Поэкспериментируйте со своим текстом. Примените теги к тем словам, которые хотите выделить или сделать на них акцент.

Ссылки и изображения

Ссылки вводятся в текст с помощью тега <a> и специального атрибута href. Ссылка ставится перед тем словом или фразой, щелкнув на которое вы перейдете на заданный вами ресурс. В коде ссылка принимает такой вид : <a href=”https://unihost.com/”> Ваше слово или фраза </a>

Тег <img> нужен для того, чтобы поместить на вашу страничку изображение. Этот тег также нуждается в атрибуте src, который определяет адрес картинки. Если изображение хранится на вашем компьютере, то просто напишите место, где находится ваша картинка, и ее название. Изображение, помещенное на страницу, в коде будет выглядеть так:
<img src=”/images/success.png” width=”120” height=”90” alt=”successful man”>.

Обратите внимание, что вы можете самостоятельно задавать размеры изображения. Из-за того, что изображения и веб-страницы хранятся отдельно, браузер вынужден делать для них отдельные запросы. Если скорость интернета маленькая, то изображение может не загрузиться и на его месте будет изображаться пустой прямоугольник. Для того, чтобы пользователь могу узнать, что из себя представляет изображение, необходим атрибут alt.

С применением всего изученного, наш документ принимает такой вид:

<!DOCTYPE html>
<html>
 <head></head>
 <body>
 <h1>Моя первая страничка</h1>
<p><a href=”http://howtolearnhtml.com”>Я изучаю HTML.</a> Я <strong>очень</strong> <b>ответственный</b> и серьезный человек. Любое начатое дело я всегда довожу до конца. Я добиваюсь любых поставленных мною целей.</p>
<img src=”success.png” width=”120” height=”90” alt=”successful man”>
 <h2>Для чего мне это нужно?</h2>
<ul>
 <li>Я стану умнее.</li> 
 <li>Я стану всесторонне развитым человеком. </li>
 <li>Потому что мама так сказала.</li> 
 <li><i>Мой кот</i> станет меня уважать.</li>
</ul>
<hr>
 <h2>Что мне <em>мешает?</em></h2>
<ol>
 <li> <mark>неуверенность</mark></li>
 <li><mark>страх</mark></li>
 <li><mark>лень</mark></li>
</ol>
 </body>
</html>

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

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

ПОНРАВИЛАСЬ СТАТЬЯ?
Подпишитесь и получайте рассылку на почту!

Про Автора

Вам также могут понравиться

Сайтостроение 0 комментариев

Изюминка сайта: как создать фавикон?

Favicon — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Не стоит

Сайтостроение 0 комментариев

Как создать сайт на WordPress: гайд для новичков

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

Сайтостроение 0 комментариев

Почему вам действительно нужен персональный сайт?

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