ТОП 10 шагов к познанию HTML и CSS

Тема поста основана на собственных поисках, которые я производил в свое время. О боже мой, неужели я уже так стар, что могу сказать: "В свое время"? Дайте ко подумать... Свое знакомство с html и css я начал приблизительно в 2003 году, стало быть примерно 8 лет назад. Какой кошмар!

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

Мои ТОП 10 шагов к познанию HTML и CSS

1-ый шаг - ".html как открыть?"

В наше время вопрос бы наверное звучал так: ".tpl как открыть?" или ".php как открыть?" ведь современные движки содержу html код именно в этих файлах.

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

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

2-ой шаг - "Как подсмотреть html код сайта?"

После того как я просмотрел и разобрался в работе своей одноклассницы, появилось впечатление, что я теперь знаю все! И вот я захожу на какой то сайт, и решаю глянуть его код. Мол разберусь и все такое Как вспомню в смех бросает! Узнаю у поисковика как открыть исходный код, жму правую кнопку мыши в окне браузера, далее жмякую на "Исходный код HTML", а там

ОМГ! Меня тогда это сильно напугало... Темный лес, никак иначе! Еще бы, три тега в школьной работе, и куча не понятных букоф у сайта, ужас!

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

Если у Вас нет учебника по информатике, то загляните вот сюда, в этом посте я рассказывал про структуру и теги которых мне было достаточно для начала!

3-ий шаг - "Как поставить счетчик?"

Этот вопрос до сих пор актуальнее не бывает. Мне поначалу показалось это очень трудной задачей, ведь счетчик содержал ява скрипт, о существование которого я даже не подозревал. На вскидку казалось, что это какой то набор букоф но ни как не счетчик. Тем не менее запрос к все могущему поисковику помог решить поставленную задачу, при выполнение которой я узнал, что видимая часть сайта находится между тегами body Кстати подсмотреть пример размещение счетчика мне помог опыт из предыдущего пункта! А запрос в яндекс помог не только установить считалку, но и узнать про лучший сервис, предоставляющую данную услугу, по мнению интернета

4-ый шаг - "Картинка слева от адреса"

Если кто не понял, речь идет о фавиконе.

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

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

5-ый шаг - "Как поменять цвет ссылки и текста"

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

Но я искал как поменять цвет ссылки и текста. Узнал про атрибут style и элемент CSS color. Так же узнал что в head бурно кипит жизнь Оказывается в этот тег еще заключаются и стили, вот открытие!

Я в тот момент чувствовал себя Колумбом, не иначе! "Плыл" к одной информации "приплыл" к другой забавно даже вспоминать все это Кстати, тогда я узнал, что на сайте оказывается, можно использовать совершенно любой цвет! Код цвета можно было подсмотреть в фотошопе и вставить после слова color в атрибуте style.

Мне всегда нравилось чувство нового познания чего либо, это как будто у тебя в руках какая то неизведанная сила, позволяющее тебе делать что-то такое потрясающее!

6-ой шаг - "Как спрятать счетчик?"

Помню, что у меня в левой части сайта скопилось очень много кнопок с счетчиками и каталогами. В одном обзоре моего проекта написали, что сайт не о плагинах к великой игре The Elder Scrolls III: Morrowind а о ссылках на другие сайты. Эти строчки очень меня расстроили. Но для того, что бы собирать статистику и быть в каталогах необходимо было разместить у себя кнопку на сайт. Что же тогда делать?

Чисто случайно набрел в коде одного сайта на счетчик, но его не было видно на странице. Как разработчик этого добился? Оказывается в CSS есть такой стиль, display:none; который прячет все, что находится в теге к которому присвоили этот стиль. Еще один элемент CSS в мою копилку

7-ой шаг - "Как изменить шрифт сайта?"

Сейчас тоже многие новички задаются этим вопросом. Я нашел ответ на этот вопрос, но оказалось, что любой шрифт поставить очень и очень сложно, но тем не менее я узнал про стиль font-family и font-size.

Второй открыл для меня еще больше возможностей для реализации сайта своей мечты, ибо до этого я мог менять размер шрифта лишь тегами strong и h1, h2, h3. Первый же элемент тоже дал пользу, ибо существует два привлекательных шрифта Verdana и Trebuchet MS которых в большинстве случаев хватает по горло

8-ой шаг - "Как подвинуть div влево?"

Этот запрос помог мне узнать про элемент CSS margin. Если Вы с ним не знакомы, то он позволяет делать отступ с любого края блочного тега. То есть, например тег div, можно сдвинуть в любую сторону на определенное количество пикселей.

Стиль margin встретился мне вместе с position. Про него мы говорили в посте "Верстка макета, подробнее Часть 2". Этот стиль CSS позволяет расположить любой тег куда угодно, поверх чего угодно. На этот стиль нужно молиться, не будь его не было бы у нас всплывающих меню, и окошек поверх сайта.

Кстати не зря я упомянул всплывающее меню, потому, что именно с познания этого стиля я сумел создать свое первое, красивое, выдвигающее из "воздуха", меню, о котором мечтал очень и очень долго

9-ый шаг - "Как создать шаблон для джумлы?"

Между 8-ым шагом и 9-ым у меня по хронологии идет изучение php. Во время этого мероприятия я особо не откликался на познание новых возможностей в html. Да и не было необходимости, ведь я уже умел верстать свои странички.

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

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

10-ой шаг - "что такое nofollow?"

Этот запрос совсем не давний, около 3-х месяцев назад, я узнал что такое тиЦ, так же узнал, что у него есть привычка передаваться другим ресурсам. И что бы помешать этому в ссылку добавляется атрибут rel="nofollow". Я пока еще не определился точно зло этот атрибут или же добро, но 95% блогов ставят этот атрибут, стало быть есть на то причина.

Заключение

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

Если хотите, что сказать по поводу поста, пользуйтесь формой ниже!

Всего Вам наилучшего! У меня все!

MarkDay.ru - сообщество оптимизаторов, вебмастеров и манимейкеров.