Как сделать статью html

Обновлено: 04.07.2024

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

Создание HTML документов

Для того, чтобы создать HTML документ необходимо:

Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
Набрать произвольный текст и разметить его HTML тегами;
Cохранить файл с расширением .htm или .html.

Базовый документ HTML

Ниже приведен в своей простейшей форме пример HTML-документа:

Пример HTML:

Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML - кода, или сохраните код в HTML - файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб - браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:

HTML теги

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

Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.

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

В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:

Вам не обязательно это перенабирать - вы можете просто скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit'у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае - это HTML версии 4.01.

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

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

Код HTML в редактор KEdit.

Тэг “ul” - список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
Элементы “h1” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.

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

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию "Don't append the .txt extension" в диалоговом окне "Save as". Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем, что легче использовать те же самые стили для множества HTML файлов: Вам нужно написать CSS стили только один раз. Но на этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент [и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.

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

но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos .

Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство 'color' устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.

Теперь браузер показывает страницу к которой мы добавили цвет.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать - шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13) :

Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

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

Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого - 'padding-left' (для сдвига текста) и 'position', 'left' и 'top' (для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или “верстка” на странице изучая CSS , вы найдете несколько готовых к использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16) :

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

В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево

Свойство 'position: absolute' говорит что элемент ul расположен независимо от любого текста который предшествовал или будет следующим за этим элементом, а свойства 'left' и 'top' обозначают это расположение. В нашем случае это 2em сверху и 1em от левого края окна.

'2em' обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список, вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и переместим элементы налево, где были маркеры. Так же мы нарисуем каждый элемент списка на белом фоне в своем черном квадрате (зачем? просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что давайте добавим и это свойство: синими будут ссылки которые пользователь еще не смотрел, пурпурными - те которые он уже посещал. (строки 13-15 и 23-33) :

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

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет горизонтальная полоса для разделения текста и подписи снизу. Мы используем свойство 'border-top' для того чтобы добавить прерывистую линию над элементом (строки 34-37) :

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

ШАГ 7: внешний CSS

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

Для создания отдельного файла таблицы стилей нам нужен другой пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню "Файл" в редакторе , для создания пустого файла. (Если вы используете TextEdit, не забудьте сделать его текстовым снова, используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри . Они принадлежат HTML коду, а не CSS. В новом окне у вас теперь должен быть полная таблица стилей:

Выберите “Сохранить как…” из меню "Файл", убедитесь что вы в той же директории/папке что и файл mypage.html, и сохраните таблицу стилей под именем “mystyle.css”.

Такая конструкция скажет браузеру о том, что таблица стиле располагается в файле под названием “mystyle.css”, и поскольку директория не упомянута, браузер будет искать этот файл там же, где лижит HTML файл.

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

Следующий шаг - положить оба файла mypage.html и mystyle.css на ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…) Как положить файлы на сайт зависит от вашего интернет провайдера.

Дальнейшее изучение

Для введения в CSS, смотрите главу 2 Lie & Bos или введение в CSS Дейва Рэггета .

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

Основы HTML для начинающих — в этой статье я расскажу об основах языка гипертекстовой разметки HTML. Статья предназначена для начинающих: школьников и студентов начальных курсов. Первая статья из серии самоучитель HTML.

Краткая история развития HTML

Суть состояла в том, что бы создать разметку текста которую без проблем можно было распознать на любом компьютере (что было очень важно в те времена).

Если вы знаете основы компьютерных сетей, то SGML можно сравнить с моделью OSI. SGML это базовый принципы которые легли в основу HTML так же как модель TCP/IP основывается на модели OSI.

В 1991 году на британский ученый Тимо Бернерс Ли разрабатывает на основе SGML язык гипертекстовой разметки который получает название HyperText Markup Language (HTML).

Тим Бернерс Ли

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

Изначально HTML соответствовал особенностям и идеологии SGML. В 1993 году появилась версия языка HTML 1.2, которая имела сорок с небольшим тегов, три из которых не были рекомендованы к использованию, так как указывали на физические параметры предоставления документа. Этот факт, в свою очередь, противоречил идеологии SGML.

Вся HTML- разметка была логической и только в описательной части стандарта можно было увидеть что-то типа ”в графических браузерах действие этого тега может передаваться жирным начертанием” (речь идет о теге , одном из первых тегов).

В это время был единственный браузер – Mosaic, который поддерживал графические возможности. Этот браузер был разработан в Национальном центре суперкомпьютерных приложений США (National Center for Supercomputer Applications — NCSA), там же, кстати, была разработана технология WWW (World Wide Web). По этой причине никаких противоречий между официальными стандартами и их реализацией в браузерах тогда не существовало.

Браузер Mosaic

В апреле 1994 года был образован Консорциум W3C (World Wide Web Consortium). Так как официальной спецификации HTML 1.0 не существовало, W3C начал заниматься подготовкой спецификации HTML следующей версии. Но чтобы стандартная версия отличалась от всех предыдущих, ей сразу присвоили номер 2.0. Разработка спецификации HTML 2.0 шла не спеша и лишь в сентябре 1995 года она была утверждена. Из больших дополнений был добавлен лишь механизм форм для отсылки информации с компьютера пользователя на сервер.

Тем временем Консорциум W3 в параллель со спецификацией 2.0 занимался обсуждением HTML 3.0. Она была предложена в марте 1995 года. Третья версия предлагала много новых возможностей: поддержка таблиц, обтекание изображения текстом, отображение сложных математических формул, примечания. Поддержка этого стандарта браузерами того времени была не удовлетворена.

Авторы HTML 3 добавили поддержку нового средства — иерархические стилевые спецификации (Cascading Style Sheets, CSS). Это нововведение нужно было для того, чтобы разрешить назревшее к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, которым в первую очередь нужно было гибкость и обширные возможности визуального представления. CSS имеет свой синтаксис и является формально независимой от HTML.

Следующей версией HTML стала 3.2 и в ней были опущены многие нововведения из версии 3.0.

18 декабря 1997 года бала принята четвертая версия HTML. Она содержала как и третья много элементов, специфичных для отдельных браузеров. Хотя в HTML 4.0 произошла чистка элементов из предыдущих версий спецификаций. Многие элементы были помечены как устаревшие и не рекомендуемые к использованию. Вместо них рекомендовалось использовать таблицы стилей CSS.

HTML 4.01 утвердили 24 декабря 1999. Изменения, принятые в нем были более значительные, чем, кажется на первый взгляд.

Сейчас W3C занимается разработкой пятой версии языка HTML. Ее черновой вариант стал доступен 20 ноября 2007 года.

В параллель ведется также разработка XHTML (Extensible Hypertext Markup Language) — расширяемый язык разметки гипертекста. В нем предъявляются более строгие требования к синтаксису, чем в HTML. XHTML 1.0 был утвержден 26 января 2000 года в качестве рекомендации W3C. Вариант XHTML 1.1 одобрен в качестве рекомендации консорциума 31 мая 2001 года.

Версии HTML

HTML 2.0 — опубликован IETF как RFC 1866 в статусе Proposed Standard (24 ноября 1995 года) ;
HTML 3.0 — 28 марта 1995 года — IETF Internet Draft (до 28 сентября 1995 года);
HTML 3.2 — 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 — 24 декабря 1999 года;
ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года;
HTML5 — 28 октября 2014 года ;
HTML 5.1 начал разрабатываться 17 декабря 2012 года . Рекомендован к применению с 1 ноября 2016 года .
HTML 5.2 был представлен 14 декабря 2017 года .
HTML 5.3 был представлен 24 декабря 2018 года.

Структура и основные элементы

Основным элементом HTML является тег. Тег это определенный текст заключенный в угловые скобки .

Большинство тегов парные, они имеют открывающий и закрывающий тег. Закрывающий тег отличается от открывающего добавлением слеша перед текстом.

Теги могут иметь атрибуты которым присваиваются значения (об этом чуть позже).

Теги могут быть вложенными друг в друга.

Редактор HTML

Теги прописываются в редакторе. Простейший пример редактора — блокнот. Но я советую пользоваться редактором Notepad++, скачать его можно на официальном сайте, устанавливается он в два клика.

Основное преимущество этого (да и других) редактора в том, что в нем есть подсветка синтаксиса. Это значит что ваш код будет выделяться определённым цветом. Данное действие упрощает написание кода и позволяет избежать ошибок.

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

Основные элементы web-страницы

Все базовые теги имеют закрывающие теги и являются вложенными друг в друга.

Структура простого HTML документа

Давайте наберем в редакторе следующий код:

Затем сохраните файл с расширением .html, в моем случае это файл html-1.html. Если у вас появились проблемы, просто скачайте этот файл.

Откройте файл в браузере и посмотрите результат.

Рассмотрим основные элементы подробнее.

Элемент

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

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

Атрибут	Описание	Возможные значения
manifest	Указывает путь к кешу манифеста.	URL.

Манифест (manifest) представляет из себя текстовый файл со списком ресурсов для кеширования. Я знаю, сейчас ничего не понятно. Про манифест можно нет запоминать. дальше я приведу более понятный пример.

Прописываются атрибуты так:

html — тег;
manifest — атрибут;
URL — значение атрибута.

Элемент

Роботов поисковых систем.
Стилизации и расширения функциональности сайта.
Указания, с помощью тега заголовка документа в браузере.

Элемент

Как я уже говорил, тег используется для того, что бы указать название web-страницы которое будет отображаться в закладке браузера.

Полное руководство для блогеров и начинающих верстальщиков. Разберем все самые необходимые HTML-теги и примеры их использования.

HTML-теги для форматирования текста

Заголовки

Заголовки подчеркивают особую важность заключенного в них текста. Вы можете использовать теги от

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

Выравнивание заголовков

Заголовки можно выравнивать на странице, но для этого потребуется щепотка CSS:

Можно также использовать ключевые слова left , right или justify .

Абзацы

Можно обернуть абзацы текста, чтобы между ними появилось расстояние.

Выравнивание абзацев

Все работает точно так же, как для заголовков:

Другие значения: left , right или justify .

Разрыв строки

Вместо абзацев можно использовать разрыв строки. Это позволит перенести текст на новую строку в рамках одного параграфа.

Жирный текст

Установит жирное начертание:

Важный жирный текст

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

Курсивный текст

Устанавливает курсивное начертание:

Курсивный текст с особой важностью

Выглядит точно так же, как обычный курсив, но добавляет семантическое значение, как будто вы сделали акцент на этом тексте.

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

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

Добавляет ~~эффект перечеркивания~~:

Семейство шрифта

Можно изменить шрифт текста с помощью CSS. Используйте безопасные шрифты или подключите Google fonts.

Размер шрифта

Для указания размера можно использовать px , em или проценты. Вот пример с пикселями:

Цвет шрифта

Установите для текста любой HEX-цвет по вашему выбору.

Выделенный текст

Выделите фрагмент текста с помощью CSS и фонового цвета:

Цитата

Полезно для выделения цитат и важных фрагментов текста.

HTML-теги для ссылок

Обычные текстовые ссылки

Открытие в новой вкладке

Используется для открытия гиперссылки в новой вкладке браузера, а не на текущей странице:

Ссылка на email-адрес

Открывает почтовую программу на компьютере пользователя для отправки письма по указанному адресу:

Ссылка на email с указанием темы письма

Полезно, если вы хотите установить для письма клиента конкретную тему. Вместо пробелов используйте %20 :

Ссылка-якорь

Вторая – ссылка, клик по которой отправит пользователя в нужное место документа:

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

Фоновый цвет страницы

Смените фон для всей страницы с помощью следующего кода с любым HEX-значением цвета.

Повторяющееся фоновое изображение

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

Чтобы изображение повторялось только по вертикали, замените значение repeat на repeat-y . Аналогично для повторения только по горизонтали используйте repeat-x .

Неповторяющееся фоновое изображение

Чтобы изображение отображалось на фоне всего один раз, используйте следующий код:

Неповторяющееся фоновое изображение сверху в центре

Установите фоновую картинку вверху страницы:

Вертикально повторяющееся фоновое изображение сверху в центре

Картинка отобразится наверху страницы и будет вертикально повторяться:

Не забудьте заменить URL-адрес изображения.

Списки

Нумерованный список

Создание упорядоченного списка элементов:

Маркированный список с буллитами

Буллиты заменяют собой цифры:

Маркированный список с другими маркерами

Вид буллита можно изменить. Возможные варианты: circle , square , disc (установлено по умолчанию).

Маркированный список с пользовательскими маркерами

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

Специальные символы HTML

Большую таблицу HTML-символов вы можете найти здесь.

Если, узнав базовые HTML-теги, вы захотели глубже изучить верстку, ознакомьтесь с небольшой подборкой наших материалов:

Читайте также: