Как научиться писать html коды. Главное — практика. Какие тэги нужно знать
Данным циклом я хочу открыть серию уроков, посвященных 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 ) .
- < Назад
Для комментирования, вам необходимо зарегистрироваться.
Когда-то давно я захотел сделать свой первый сайт IT-тематики. Из этой области я знал только совсем простые азы HTML и пожалуй все. Но желание и смелости у меня было хоть отбавляй, поэтому без особой боязни я зарегистрировал свое первое доменное имя.
Мой путь в освоении CSS и HTML был долгий, примерно 2.5 года и, я думаю, что процесс самообучения не закончится уже никогда. Но вот как сейчас помню, что мне очень сильно хотелось найти точку опоры, с которой можно было бы начать осваивать эту новую для меня область, так как информации обрушилось сразу очень много и переварить ее было непросто.
Я, полный решимости, зарегистрировал свой первый домен и принялся достигать поставленные цели. В то время я знал, что большинство сайтов, которые есть в Интернет, работают на различных уже готовых системах управления материалом, то есть CMS. И первой моей задачей было - найти CMS.
При выборе CMS я обращал внимание только на одно - CMS должна быть не требовательной к ресурсам сервера, так как желание, наверное, каждого новичка в этой области, свести к минимуму все затраты. Ну, то что CMS должна быть блоговой это понятно.
После долгих блужданий по сети я наткнулся на CMS Textpattern. По прошествию уже 2.5 лет я с уверенностью могу сказать, что с выбором Textpattern я не прогадал. Это самая лучшая CMS для блога, которая есть в паблике.
При колоссальной производительности эта CMS может размещаться практически на любом хостинге, где есть MySQL и поддержка PHP. В данный момент я использую недорогой хостинг, не VPS, и размещаю на нем 16 сайтов. Суточное посещение всех сайтов равняется примерно 5000 уникальных посетителей в сутки. Я думаю, что это хороший показатель производительности Textpattern.
Основной проблемой, с которой я столкнулся после установки этой CMS, это абсолютное мое незнание основ CSS. Я по крупице выуживал информацию из русскоязычного сообщества, пока в итоге не наткнулся на сайт http://htmlbook.ru . До этой своей находки, я подумывал о покупке книге по CSS, но теперь я даже рад, что не успел этого сделать, так как это была бы очередная покупка нового пылесборника.
На сайте HTMLbook я нашел очень много хорошо структурированной информации. Для новичка - это просто клад. Я и сейчас нередко обращаюсь в к этому ресурсу, так как все запомнить нельзя, да и не нужно это. Главное знание человека - это знать где достать то, что тебе нужно!
Если Вы только в самом начале своего профессионального жизненного пути и собираетесь сделать освоить CSS и HTML, то мой Вам совет: не покупайте бумажные толмуды, которые устаревают до момента издания, а пользуйтесь WEB-сервисами, которые не только сэкономят ваши деньги, а будут отличным подспорьем, находящимся всегда под рукой.
P.S. Всегда дивлюсь, когда забредаю на какой-нибудь "блог начинающего манимейкера" или как сейчас модно "бомжа", который пытается заработать кучу денег, но толком не представляет как самостоятельно сделать уникальный дизайн для своего сайта и получается что есть куча бомжей похожих друг на друга. Можно конечно и заплатить за дизайн, но копейка рубль бережет, да и никто лучше не сделает, как Ты сам.
Я решил уделить больше внимания новичкам, желающим приобрести знания в области сайтостроения. На это меня подтолкнула моя преподавательница, которая допускала уж очень много ошибок в методичках к лабораторным работам. Я бы с удовольствием бы глянул на тот ресурс, с которого была взята учебная инфа, и оставил бы там пару строк своего мнения. Но сейчас не об этом. В своей первой лекции я расскажу о том
Из чего состоит структура HTML-документа
Тег
сообщает о том, что начинается структура html-документа,
— что заканчивается. Между тегами
хранится в большей части информация для браузера и поисковых систем. В тегах
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
А это мой первый сайт.
Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
- align — Определяет выравнивание линии. Может принимать значение left, center, right.
- color — Задаёт цвет линии.
- noshade — Рисует линию без трехмерных эффектов.
- size — Задаёт толщину линии.
- width — Задаёт ширину линии.
Код с использованием тега
:
А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Cуществуют и другие одиночные теги (,
,