Думаешь ты такой умный раз нажал на эту кнопочку и увидел эту запись? А нет, тут не будет продолжения.
Ладно, ладно сейчас напишу и продолжение.
Пропустим экскурс в историю и забудем упомянуть о темных временах диктатуры таблиц, и перейдем к вкусненькому: *та-дам* блочная верстка. «Заранее оговорюсь таблицы это хорошо, но только при правильном применении»
И так начнем. А начнем как всегда с привета нашему любимому миру.
Создаем файл index.html
О даа, вы уже чувствуете себя программистом? Я в этом не сомневаюсь мои дорогие.
А теперь сделаем то что для настоящего программиста просто не нужно, настоящие программисты просто приказывают коду писаться, а мы будем его писать нашими клешнями, я надеюсь они у вас есть, если нету то выключайте комп и идите их искать.
И так пишем:
Код
<!DOCTYPE html5>
<html>
<head>
</head>
<body>
</body>
</html>
А теперь зубрите эту строку до посинения, так как на первых порах вы за*ПиииП*те гугл с просьбой показать вам эти несколько строк, ну или как крайний вариант будете обращаться к старым, если они у вас будут, проектам что бы подсмотреть там что да как было.
А да чуть не забыл, теперь вы можете назвать себя почетным именем ВЕРСТАЛЬЩИК, а если глубже посмотреть то ВЕРСТАЛЬЩИК WEB 2.0 приложений, вы ведь не забыли приписать строчку «<!DOCTYPE html5>» а это значит, что вы идеально изучили и поняли все тонкости html5.
Давайте модифицируем наш код и добавим пару бесполезных строк. Внятно и четко прокричите вашему коду А НАПЕЧАТАЙКА МНЕ ВОТ ТАКИЕ СТРОКИ В ШАПКЕ:
Код
<meta charset='UTF-8'/>
<link rel='stylesheet' href='style.css' >
<title>GOGLE</title>
И не забудьте скомандовать именно GOGLE, иначе засудят, ведь вы собираетесь делать супер успешный сайт бьющий мировые рекорды я прав?
Ну что, прокричали, а код не написался? Не печальтесь, просто начинаем щелкать клешнями по клавиатуре, прям как я, и радуемся появляющимся на экране буквам.
Кто то из особо умных спросит почему именно UTF-8 если во всех уроках которые они раньше смотрели, писали что то вроде windows-5121 и я отвечу тебе на этот особо умный ответ безотказным аргументом: А ПРОСТО РАДИ ПРЕКОЛА!
Сохраняем, смотрим на получившийся результат, с помощью перетаскивания файлы прямиком в браузер, и что мы видим? А нифига не видим, правильно! У нас то нету никакого кода в теле страницы. Давайте заставим наш код напечатать фразу, которую мы выбрали в самом начале. Кричим коду, а те у кого крик так и не сработал продолжаем щелкать клешнями, А ДОБАВЬКА НАМ В ТЕЛО СТРАНИЦЫ ТАКУЮ ВОТ ФИГНЮ:
Код
<div id="hello">ПРИВЕТ МИР</div><!--hello-->
Сохраняем и повторяем действия для просмотра результата. И вот мы видим в окоше браузера грациозную строчку «Привет мир» и слышим в ответ гремящий голос «Привет Витек». Что вы не слышали такого голоса? Эм давайте лучше продолжим.
У меня осталось мало времени, так что перейдем сразу к таблице стилей или по блатному CSS, а то те ребята у двери в белых халатах начинают меня доставать.
И так создадим файл «style.css», особо умные уже заметили сходство этой строчки с частью которую мы добавляли в самом начале «<link rel='stylesheet' href='style.css' >» и вы окажетесь правы, этим способом мы познакомили наш браузер с стервозной «девушкой» которая скоро вторгнется в его личное пространство и вот его любимый плюшевый мишка перекочует от гитары в спальню, а старая, но такая удобная, майка, с одной малюсенькой дырочкой, окажется навсегда утерянной в мусорном ведре, но не будем об этом, все это ещё наш беззаботный и счастливый браузер только ожидает в будущем, а пока он ещё бегает беззаботно по загрузочному экрану windows и радуется общению с таким необъятным миром.
Давайте же наконец откроем наш злополучный ящик пандоры «style.css» и выпустим эту бешеную, кхм, стерву.
Её как коду мы приказывать не можем, но мы можем незаметно подкинуть пару строк в неё, и не волнуйтесь, от пары строк детей не будет. Давайте добавим такие строки:
Код
#hello{
position: absolute;
left: 50%;
margin-left: -130px;
top: 45%;
color: red;
font-size: 18px;
}
#hello:after{
content: " - Привет Витёк";
color: black;
}
И снова сохраняем и смотрим результат. Вот вы видите, я же говорил что мир отвечает а они не верят. А был прав! Ааааааааааааааааа
Простите, но мы вынуждены прекратить этот беспредел и уводим больного подальше от компьютера, просим уничтожить этот документ и никогда о нем не вспоминать. То, что вы только что прочитали, является бессмыслицей и богохульщиной. Для вашей же безопасности настоятельно рекомендуем все забыть иначе мы придем и к вам.
P.S. Люди в белом. 
