Как сделать оформление сайта в html
HTML – это основа всех современных сайтов. По сути, это язык разметки, который помогает браузеру правильно отображать те или иные элементы. Чтобы создать свои первые web-страницы будет достаточно даже простого текстового блокнота (имеется ввиду программа-редактор для работы с текстом, а не бумажная записная книжка).
Пара слов об HTML
С одной стороны, создание универсального синтаксиса для разметки интернет-страниц позволило этому самому интернету перерасти из технологии объединения сетей до современного WEB’а со всем его многообразием. С другой стороны, так можно сказать про любой язык программирования – он помогает преобразовывать логические структуры в машинный код. Но для того, чтобы получить более-менее внятный результат нужно проделать огромный пласт работы: изучить и досконально знать синтаксис, а на это может уйти много времени и сил, накопить опыт по созданию своих скриптов и т.п., а это ещё больше времени.
Фактически это язык разметки, который позволяет выделять определённые элементы страницы и задавать для них специфичные параметры (размер, шрифт, тип: картинка это, текст, ссылка, видеофайл и т.д.).
Немного о синтаксисе
Любой HTML-документ может быть представлен в текстовом виде и должен иметь определённую структуру.
Обязательными тегами для любых HTML-страниц являются следующие:
Внутри тега располагается вся разметка страницы.
Внутри тега HEAD описываются параметры заголовка страницы, включая так горячо любимые seo-атрибуты: title и description.
А внутри BODY располагается весь остальной контент.
В общей сложности в современной версии языка разметки HTML5 используется 125 основных элементов (тегов).
Простая web-страница в блокноте
Алгоритм работы очень простой:
- Создаёте новый документ.
- Если ваш редактор поддерживает работу с разными кодировками, то выбираете по умолчанию utf-8.
- Вписываете в него нужную структуру документа (с использованием нужных тегов).
- Сохраняете документ как текст (с расширением .txt) и меняете расширение на .html. Или сразу сохраняете файл в формате .html, если это позволяет ваш редактор.
- Теперь документ можно открыть в любом браузере, он распознает в нём вашу разметку и отобразит содержимое.
(тег вписывается внутри блока HEAD).
Хватит теории, пора переходить к делу. Давайте создадим в блокноте полноценную страницу. Просто скопируйте и вставьте следующий код в ваш блокнот.
Сохраните файл как index.html и откройте в браузере.
Пошаговая инструкция для новичков по созданию сайта с нуля без навыков программирования.
Стили CSS, скрипты, картинки и другой контент
Как можно заметить, приведённый пример адаптируется под ширину окна браузера и может выстраиваться в одну вертикальную колонку на мобильных устройствах. Как так получилось? Всё дело в таблице каскадных стилей (они же CSS).
Вы можете задать для каждого HTML-тега свои параметры оформления: цвет заливки, текста, тип шрифта, его размер, отступы и многое другое. В нашем примере стили прописаны в блоке
HTML – язык разметки гипертекста (HyperText Markup Language).
Гипертекст – текст + ссылки для автоматического перехода (гиперссылки).
Разметка – указания к оформлению и расположению текста и других элементов на странице.
- Тег (tag) заключается в угловые скобки .
- Область действия тега – между открывающим и закрывающим тегами.
- Открывающий тег может содержать параметры.
- Закрывающий тег начинается с символа слеш .
- Регистр при написании имен тегов и параметров не важен.
- Тег неизвестный браузеру – игнорируется.
Вложенные теги: Теги могут вкладываться друг в друга как матрешки. Вложенный тег должен заканчиваться до закрытия внешнего.
| большой текст полужирный | - правильно |
| красный текст добавим жирности /font > не красный /b > | - не правильно |
Пробелы, разрыв строки, комментарии
- Несколько пробелов или несколько новых строк игнорируются - считаются за один пробел.
- Для указания новой строки используйте тег разрыва строки
. - Текст, заключенный в блок (
Структура web-страницы
Первым идет необязательный тег , задющий формат документа: html, xml и их версию.
Тег . определяет границы HTML-документа, который делится на голову - . и тело - .
В последней части урока по созданию html страницы рассмотрим использование каскадных таблиц стилей - Cascading Style Sheets, сокращенно CSS. Главным назначением css является отделение внешнего оформления страницы от ее структуры, поэтому css подключается отдельным файлом, а в основном файле, определяющем структуру (в нашем случае это файл index.html), остаются лишь html-теги, отвечающие за разметку страницы.
Создадим в папке Test новый файл под названием style.css. Сначала необходимо подключить css файл в нашем основном файле index.html. После указания ссылки на файл стилей, html-файл уже сможет брать стили оформления из него. Подключение css-файлов происходит в разделе . В первом уроке уже упоминалось, что этот раздел невидимый, и необходим для подключения стилей, скриптов, а также указания заголовка страницы, мета-тегов и прочих элементов страницы. Просто напишите между тегами следующую строку:
Раздел теперь будет выглядеть так:
Такой путь будет работать только если файл стилей лежит в папке вместе с файлом index.html, если же он лежит в другой папке, то в ссылке надо будет указать полный путь к нему.
Итак, css подключен, теперь перенесем уже имеющиеся стили в файл style.css. Index.html будет снова выглядеть практически как во второй части урока, за исключением одной строчки, которая подключает css.
Содержимое файла index.html:
Содержимое файла style.css. Как видим, все стили теперь объявляются в нем:
В начале файла идет обнуление тега , так как многие элементы имеют предустановленные отступы, да и в разных браузерах могут отображаться по-разному.
Синтаксис css прост — сначала идет имя html-тега, для которого описывается оформление, а затем в фигурных скобках — непосредственно сам стиль оформления обязательно с точкой с запятой в конце каждого свойства. Глобальные теги, такие как body, html пишутся без каких-либо знаков, если мы описываем элемент, который записывали как
Файл header.jpg можно скачать тут, после скачивания его следует положить в папку Test.
Файл footer.jpg качаем тут и тоже кладем в папку с проектом.
Рядом с путем к файлу находится параметр repeat-x, который означает, что фон будет повторяться по горизонтали.
В итоге файл style.css будет иметь следующий вид:
Теперь страничка практически готова, но текст в блоке контента находится слишком близко к левой границе блока, поэтому лучше задать ему отступ. Так как текст заключен в тег
, значит и стиль надо прописывать тегу
расположен внутри блока content, и описываться будет следующим образом:
Сохраним файл style.css, обновим страничку в браузере, и если все было сделано правильно, то вы увидите следующее:
Конечно, страница выглядит совсем простой, и ее структура примитивна, но при этом она уже может быть страницей сайта, так как имеет для этого все необходимое. Если же продолжить усовершенствовать ее структуру и оформлять с помощью css, то может выйти что-то весьма неплохое.
В этом уроке мы разберем все основные теги, использующиеся для оформления контента HTML-странички - той части, которую видит пользователь, когда пользуется сайтом.
Все теги, перечисленные в этом уроке, должны использоваться внутри тега .
для создания абзацев
Мы уже рассматривали этот тег в одном из прошлых уроков в качестве парного тега. Давайте добавим несколько абзацев на нашу страничку:
Результат в браузере:
Используйте абзацы для разделения текста. Небольшие абзацы всегда проще воспринимаются глазом, чем большие портянки текста.
для заголовков
Заголовки используются как для названия странички, так и при оформлении её разделов. Для выделения заголовков используют заголовки
. Чем меньше цифра рядом с буквой h, тем более важным является заголовок, и тем большим шрифтом он будет выделен. Заголовок
При оформлении заголовков следует учитывать их важность так, чтобы она снижалась постепенно. Нельзя использовать после заголовка
сразу
. Только
, затем
, а затем уже, если нужно сделать
Пример корректной последовательности заголовков:
Кстати, вот так - оформляются комментарии в HTML-коде. Если вы хотите сделать какую-то пометку в исходнике странички, но при этом чтобы она не влияла на её внешний вид, можете их использовать.
Ну а сейчас давайте добавим несколько заголовков на нашу страничку:
Результат в браузере:
Маркированный список
-
в паре с тегом
. Весь список помещается внутрь
-
, а каждый элемент списка внутрь
.
Давайте сделаем простой список - перечислим уровни подготовки программистов, которым подойдёт книга:
В браузере это будет выглядеть так:
Нумерованный список
Давайте добавим для одной из наших книг список её преимуществ:
В браузере это выглядит так:
Вложенный список
Результат в браузере:
Тег для оформления жирного текста
Чтобы выделить какую-то часть текста жирным шрифтом, достаточно поместить его внутри парного тега .
Давайте применим тег на практике. Заменим одну из книг на странице следующим кодом:
В браузере это выглядит так:
Тег для выделения курсивом
Чтобы выделить текст курсивом, достаточно поместить его внутри двух тегов . Пример:
Сейчас эта книга полностью обновлена с учетом современных тенденций и технологий
Тег для разделения страницы полосой
Если нужно подвести черту (звучит-то как!), используйте тег :
В браузере результат будет выглядеть следующим образом:
А теперь, прежде чем окончательно подвести черту, научимся вставлять на страничку картинки!
Тег для вставки изображений
Интернетом правят котики. А представляют собой котики в Интернете ни что иное как картинки. Об этом мощнейшем инструменте влияния на людей мы и поговорим. И я сейчас про картинки, а не про котиков (ну не расстраивайтесь вы так).
Чтобы вставить картинку используется тег , у которого есть два обязательных атрибута:
На практике это выглядит так:
Размеры изображения
Помимо перечисленных выше атрибутов есть еще и дополнительные height и width, которые позволяют задать высоту и ширину картинки:
Ширина изображения в таком случае будет 200 пикселей.
Давайте теперь создадим рядом с нашей HTML-страничкой папку img, и положим в нее какое-нибудь изображение. Теперь выведем его на страничке с помощью тега .
Результат в браузере:
Внимательно изучив этот раздел, вы научитесь самостоятельно создавать сайты с нуля, без всяких конструкторов и CMS, а с помощью исключительно HTML 5 и CSS 3. В дальнейшем, когда уже будете делать проекты с использованием популярных CMS, применяя полученные знания, вы сможете вмешаться в исходный код сайта, переделав оформление и структуру под свои нужды.
Курс состоит из 25 уроков. Первая его часть научит понимать и писать код HTML, вторая познакомит с каскадными таблицами стилей (CSS). Именно с этих материалов и рекомендую начать изучать сайтостроение.
Сделайте свою первую HTML-страницу, не прибегая ни к чему, кроме известного всем простейшего текстового редактора, встроенного в любую Windows — Блокнота. Но не просто сделайте, а поймите, как это работает.
Вы познакомитесь с одним из самых популярных и многофункциональных средств, призванных упростить рабочие будни верстальщикам и веб-дизайнерам — программой Adobe Dreamweaver.
Основные вопросы, мучающие новичков. Что такое HTML? Зачем он нужен? Что позволяет делать? Что лучше — HTML4 или HTML5? Все ответы — в статье.
Теги — основная единица языка HTML. Без них не обходится ни одна веб-страница. Статья познакомит вас с основными контейнерами HTML. Из неё вы узнаете, как правильно записываются теги, научитесь частично понимать HTML-код.
У тегов есть не только содержимое, но также атрибуты, которые, в свою очередь, наделены значениями. Обо всём этом и пойдёт речь в статье. Где искать атрибуты? Как правильно записывать? Какие атрибуты можно присвоить любому без исключения тегу? А ещё вы узнаете, как разрешить пользователю редактировать любой элемент страницы, как задать для каждого объекта уникальное контекстное меню и как скрыть содержимое элемента, чтобы оно не отображалось в браузере.
Всё, что связано с оформлением текста: как сделать заголовки, назначить полужирный шрифт или курсив, уменьшить/увеличить размер текста или что-нибудь процитировать. В статье вас ждёт ещё много интересных секретов форматирования текста средствами HTML. А главное — всё это показано на наглядных примерах.
Маркированные, нумерованные, вложенные — какие хотите. Также вы узнаете, как нумеровать список большими латинскими буквами или римскими цифрами, да ещё и в обратную сторону, как начинать нумерацию не с единицы и тому подобные вещи. А ещё вас ждёт знакомство с мало кому известным списком определений.
Ссылки — чуть ли не основной элемент Интернета, без которого никакой связности страниц бы и не было. Научитесь создавать ссылки на примерах, узнайте, чем относительные пути отличаются от абсолютных, познакомьтесь с внутренними и графическими ссылками, научитесь ставить их на e-mail и Skype.
Картинки украшают страницу, поэтому уметь добавлять их — навык очень полезный. А если превратить изображение в навигационную карту, то оно становится не только симпатичным, но и очень полезным элементом. Научитесь создавать такие объекты на наглядных примерах, которые есть в статье.
Внимательно изучив этот раздел, вы научитесь самостоятельно работать с таблиц. На основе таблиц когда-то создавались целые структуры сайтов, но об этом будет идти речь в следующем уроке.
Как вообще можно сверстать целый сайт? Способов есть много, один из них — делать его с помощью таблиц. О том, что представляет собой такой метод, вы и узнаете. Наглядные примеры, как всегда, присутствуют, и помогут без труда освоить табличный подход.
Статья для тех, кто хочет научиться отображать в одном HTML документе совершенно другую страницу. Вы узнаете, что такое фреймы, как они создавались раньше и как создаются сейчас, а также познакомитесь с доступными им атрибутами.
Какие основные операторы и элементы присутствуют в документе каскадных таблиц стилей, что вообще такое этот CSS, зачем он нужен и чем отличается от HTML, а главное — как связать каскадную таблицу стилей с HTML-элементом.
На примерах показано, как выровнять текст по горизонтали и вертикали, изменить отступ и междустрочный интервал, добавить подчёркивание или надчёркивание, увеличить расстояние между символами и сменить регистр.
Прочтя статью, вы поймёте принципы группировки шрифтов в CSS, узнаете, какие из них поддерживает любой браузер, научитесь менять их размер и стиль, цвет и насыщенность. Разберётесь с аббревиатурами RGB и HSL, а также узнаете, зачем к ним иногда добавляют букву A.
Читать стоит после того, как освоили ссылки в HTML, потому что эта статья научит их не создавать, а оформлять, причём задать внешний вид вы можете не только для разных ссылок, но и для одной и той же, находящейся в разных состояниях. Пусть если по ней ещё не переходили, она будет синей, если навели указатель — зелёной с подчёркнутым текстом, щёлкнули — жёлтой и полужирной, а перешли — курсивной и фиолетовой.
Всё о правильном оформлении таблиц: ширина и высота, расположение заголовка, удаление двойных границ, определение расстояний, скрытие фона и многое другое, подкреплённое живыми примерами.
А вы знали, что в качестве маркера списку можно задавать не только круг, но и окружность или даже квадрат? Да хоть произвольную картинку. А знали, что помимо стандартных нумераций можно установить, например, традиционную армянскую? А как превратить маркер из вынесенного в обтекаемый? Нет? Тогда загляните в статью, там ждёт не только теория, но и примеры.
Всё о фоне. Цвет, на фоне которого пишется текст. Картинка, на фоне которой отображается вся страница: повторяющаяся по горизонтали, по вертикали, по всем направлениям одновременно, позиционированная, масштабируемая и т. д.
Ширина границ, их стиль, цвет. Вы узнаете, как сделать вместо внутренней границы внешнюю, как её раскрасить, как добавить рамки только с двух или трёх сторон и как сделать так, чтобы слева она была пунктирной, а справа — сплошной.
Статья объяснит, в чём смысл блочной вёрстки, чем она отличается от табличной и лучше ли она. По каким принципам создаётся и в чём её суть. Но самое главное — большой пример блочной вёрстки, благодаря которому вы сможете окончательно в ней разобраться и запомните метод навсегда.
Почему нельзя обойтись только HTML/CSS? Что даёт язык PHP современным сайтам? Какие страницы называют статическими, а какие — динамическими, и что это означает? А самое основное — описание функции include() и пример её использования.
Делаем PSD-макет настоящего сайта в программе Photoshop.
В предыдущей статье мы создали макет сайта, в этой будем делать из картинки работающий шаблон с помощью изученных ранее HTML и CSS.
Если вы прошли все уроки, то можете легко создать с нуля даже достаточно сложный сайт, а также разобраться в чужом коде, отрисовать и сверстать шаблон, вмешаться в тему оформления любой CMS и отредактировать её под свои нужды. С полученными знаниями вы всегда будете на шаг впереди любого веб-мастера, сразу начавшего работать с CMS и не освоившего основных инструментов веб-разработки.
Читайте также: