Как создать простой HTML сайт в блокноте
HTML-сайты не обязательно имеют примитивный дизайн. Существует множество бесплатных HTML шаблонов, ничем не уступающих по привлекательности тем, что используются в конструкторах сайтов или CMS. Но большие проекты на них неудобно делать. Много страниц – много мороки, поскольку редактирование каждой требует копания в коде. У них нет панели управления, также все страницы будут статическими – никаких блогов, форумов и т. д.
HTML-сайты чаще всего имеют формат лендингов и сайтов-визиток. В этих сценариях они себя более-менее оправдывают – работают быстро, не грузят сервер, не требуют подключения базы данных. Весь контент содержится в самих страницах. HTML отвечает за вёрстку, структуру блоков, а при помощи каскадных таблиц стилей (CSS) этим элементам можно придать необходимый внешний вид и формат (шрифт, цвет, фон, форма, отступы и т д.).
Вёрстка в HTML бывает табличной (table – устаревший стандарт) и блочной (div – именно её сейчас используют). Язык использует обширный набор тегов, почти все из которых используются парой – открывающий и закрывающий теги (например, <p> </p> — тег абзаца), внутри которых содержится контент. В CSS используются атрибуты, свойства и их значения, подключаемые к отдельным элементам HTML-каркаса страницы. То есть можно выборочно придавать желаемый вид каждому элементу на сайте по отдельности.
Мы не ставим своей целью обучить вас синтаксису языков – если нужно, то без труда сможете найти сотни уроков и справочников по ним в Сети. Покажем основу – как сделать простой сайт на HTML в блокноте, создать своими руками веб-страницу по тем же стандартам, что используют все посещаемые вами сайты. На примере вы сможете уловить суть процесса, оценить для себя, интересна ли вообще эта тема.
Шаг 1 – создание страницы формата HTML
Откройте стандартный блокнот для Windows (или любой другой текстовый редактор – Notepad++, Sublime Text — неважно), откройте меню «Файл», выберите «Сохранить как», измените кодировку с ANSI на UTF-8 (для правильного отображения русских букв в браузере), впишите заголовок веб-страницы и измените расширение на html (оно идёт после точки), после чего сохраните изменения.
Шаг 2 – добавляем разметку веб-страницы
Теперь приступаем к редактированию файла. Первым делом необходимо добавить -веб-разметку – стандартный кусок кода, позволяющий браузерам распознавать контент, находящийся во внутренних тегах. Просто скопируйте и вставьте его:
- <!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Топовый сайт новичка</title>
- </head>
- <body>
- <h1>Это тег заголовка первого уровня для содержимого страницы</h1>
- <p>Первый абзац</p>
- <p>Второй абзац</p>
- <p>Третий абзац и т. д.</p>
- </body>
- </html>
Это базовые элементы, которые есть на любом веб-ресурсе. Весь контент страницы должен находится между тегами <body></body> (это тело документа), всё, что выходит за их пределы выше и ниже, не будет отображаться на сайте.
Шаг 3 – работаем со стилями CSS
Допустим, вы добавили какой-то текст в параграфы, теперь нужно придать им стилистику – выбрать шрифты, фон, отступы, ширину области страницы и т. д. Это может выглядеть вот так:
- body <
- background: #F2F2F2;
- max-width: 900px;
- margin: 10px auto;
- padding: 30px;
- >
- h1 <
- color: #4C4C4C;
- padding-bottom: 20px;
- margin-bottom: 20px;
- border-bottom: 2px solid #BEBEBE;
- >
- p <
- font:italic;
- >
В примере вы видите цвет фона (background) и значение этого атрибута (#F2F2F2), ширину страницы (900 пикселей), отступы, цвет заголовка, отступы от основного текста и границ страницы (padding и margin), а также цветную границу нижней части сайта в 2 пикселя (border-bottom). Вся страница в сборе с разметкой, контентом и стилями будет выглядеть так:
- <!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Топовый сайт новичка</title>
- <style>
- body <
- background: #F2F2F2;
- max-width: 900px;
- margin: 10px auto;
- padding: 30px;
- >
- h1 <
- color: #4C4C4C;
- padding-bottom: 20px;
- margin-bottom: 20px;
- border-bottom: 2px solid #BEBEBE;
- >
- p <
- font:italic;
- >
- </style>
- </head>
- <body>
- <h1>Это тег заголовка первого уровня для содержимого страницы</h1>
- <p>Первый абзац</p>
- <p>Второй абзац</p>
- <p>Третий абзац и т. д.</p>
- </body>
- </html>
Как видите, свойства CSS мы добавили между тегами <style></style>. После завершения всех операций сохраните результат. Теперь, если вы попытаетесь открыть полученную страницу, то она автоматически запустится в браузере. Поздравляем, вы создали свой первый простенький сайт в блокноте.
Шаг 4 – загрузка сайта на хостинг
Понятно, что сайт из примера – не из тех, что публикуют в Интернете и тратятся ради этого на платный хостинг. Но, если вы по тем же принципам, изучив HTML и CSS, создадите действительно стоящий сайт для достижения каких-то целей, то для его отображения в Сети потребуются хостинг и домен.
Выбор хостинга – важная задача. Сайты на HTML легковесны и не требуют для своей работы каких-то суперских мощностей, но, тем не менее, мы рекомендуем использовать качественный хостинг, такой как Bluehost. Это один из самых надёжных и популярных зарубежных провайдеров с огромной базой клиентов (обслуживает более 2 млн доменов), впечатляющим количеством серверов по всему миру (около 120) и хорошими условиями. Стоит он $2.95/месяц, плюс ещё домен дают на первый год в подарок, бесплатный SSL и прочие интересные плюшки.
Скорость работы сайтов Bluehost в Рунете высокая, поскольку сервера находятся в облаке, используется CDN-технология. Провайдер абузоустойчивый – это означает, что ваш сайт не отключат ни при каких обстоятельствах – можете не бояться жалоб конкурентов и прочего. Всё будет работать надёжно. Техподдержка круглосуточная.
Для того, чтобы запустить HTML-сайт на хостинге, достаточно просто скопировать его файлы в директорию с названием домена. Можно использовать встроенный FTP-сервер либо программу вроде Filezilla, но, в таком случае, её придётся настраивать для работы с хостингом. База данных не нужна.
Выводы и рекомендации
Простейший HTML-сайт можно создать в блокноте за несколько минут. Для построения более сложных структур, способных выполнять конкретные задачи и выглядеть на уровне, потребуются углублённые знания HTML5 и CCS3. Этот подход полезен новичкам для обучения, приобретения базовых навыков веб-разработчика. В целом, особого смысла создавать такие сайты в других сценариях нет – гораздо эффективнее использовать конструкторы сайтов (например, uCoz, uKit и другие) или даже движок WordPress, если есть опыт.
Быстрый, простой и безопасный хостинг для HTML-сайтов и адекватной ценой. Включена БЕСПЛАТНАЯ регистрация домена на 1 год + SSL сертификат в подарок!
Тарифы: от $2.95
* Bluehost — самая привилегированная хостинг-компания в мире, обслуживает более 2 млн. сайтов, официально рекомендуемая компаниями WordPress, PrestaShop, WooCoomerce и др.!
Как создать простой HTML сайт в блокноте
Хотите сделать быстрый сайт с нуля, без CMS и конструктора. В этом нет ничего сложного, ведь по факту HTML не является языком программирования, и код можно освоить всего за пару дней. Мы подготовили пошаговую инструкцию для чайников, как создать HTML-сайт в блокноте.
Создаем простой сайт в блокноте: основные HTML-теги
Для начала вы должны понять правила разметки гипертекста — освоить базовые теги, которые создают команды для браузера. Последний, руководствуясь ими, отобразит информацию в заданном вами виде. На самом деле, тегов бывает достаточно много, но пока ознакомим вас с самыми важными и обязательными элементами HTML.
| <html> | Основной тег, который открывает и закрывает web-страницу. По <html> браузер понимает, что имеет дело с веб-документом. |
| <head> | Включает ключевые данные, касающиеся web-страницы (заголовок, ключевые слова, описание). Располагается первым после <html>. |
| <title> | Размечает основной заголовок страницы для браузера. |
| <body> | Тело страницы, куда вставляется содержимое для пользователей — текст, картинки, заголовки и т. д. |
Как создать HMTL-сайт в блокноте
Мы не будем обучать вас синтаксису языка. Покажем лишь один из способов, как сделать простой web-ресурс в блокноте.
Этап 1: создаем страницу
Ниже подробно по шагам.
- Открываем стандартный блокнот для Windows.
- Щелкаем на «Файл» и выбираем «Сохранить как».
- Изменяем кодировку на UTF-8 и даем название файлу. После названия ставим точку и вписываем html.
- Сохраняем файл.
Мы создали простую web-страницу, которая открывается в браузере. Достаточно дважды кликнуть на файл. Вот так он выглядит на рабочем столе, где мы его сохранили.
А вот так отображается страница в браузере.
Этап 2: делаем разметку
Пока наш сайт пустой, и там ничего нет. Поэтому начинаем редактировать файл. Вносим туда разметку.
- Для этого кликаем на файл правой частью мыши и выбираем «Открыть с помощью Блокнота».
- Вводим в файл этот код.
- Сохраняем файл. Обязательно вставляем точку и html после названия файла.
- Система спросит: вы хотите заменить файл, жмем «да».
Мы разметили страницу. Теперь она уже не пустая: включает заголовок первого уровня и несколько абзацев. Весь контент для пользователей добавлен между <body> и </body>.
Этап 3: добавляем стили CSS
Веб-площадка в том виде, котором представлена — выглядит не очень. Поэтому придаем элементам стилистику, добавляя шрифты, фон, отступы и т. д. Заменяем код в нашем файле на этот.
С помощью тега <style> мы задали фон (background), ширину страницы (900 px), отступы, цвет заголовка и т. д. Теперь в браузере наш ресурс выглядит на порядок лучше.
Как создать блоки сайта в html
Современная верстка HTML делается по блокам — табличная верстка уже устарела, ее редко используют. Блоки в данном случае — это прямоугольные элементы. Они по умолчанию начинаются с новой строки и автоматически рассчитывают высоту в зависимости от содержимого страницы.
Блоки состоят из 4-х свойств:
- контент — главный элемент блочной верстки;
- padding — поля вокруг контента, отвечающие за отступы между контентом и внутренним краем границ;
- border — задают границы блока;
- margin — отступы от внешнего края рамки до границ страницы.
Для примера создадим 2 блока. Вписываем в блокнот этот код.
В браузере он будет отображаться вот так.
Чтобы придать нормальный внешний вид, надо использовать CSS. Один из вариантов — подключить отдельный файл с этими стилями.
Для этого открываем новый блокнот, вписываем туда стили и сохраняем с названием style.css.
А в первый файл после закрывающего тега </title> добавляем ссылку на этот файл в таком виде — <link rel=»stylesheet» href=»style.css»>.
Теперь наши блоки отображаются в браузере так, как мы и задумали. Первый блок с жирной красной рамкой, внутри полупрозрачный. Второй блок с тонкой рамкой, желтого цвета и с закругленными углами.
Таким образом, мы создали 2 блока и вывели их через стили CSS. Ниже на картинке приведены свойства и значения css-кода. Можете вставлять свои значения и менять внешний вид блоков.
Как создать шапку сайта в html
Прежде нужно найти какое-то изображение. Ниже мы покажем пример создания шапки из одной картинки. Вставляем в наш файл блокнота, после <body> такой вот код.
Вы можете использовать другое изображение — просто вставляете его вместо image. Теперь открываем наш сайт в браузере.
Как создать подвал сайта в html
Этим же методом удастся создать подвал сайта. Добавляем в наш код такие строки, сразу перед закрывающимся тегом </body>.
И вот у нас получился еще и подвал.
Вы можете не использовать в подвале изображение, а просто вставить фон или меню с несколькими рубриками.
Как создать многостраничный сайт
Как видим, одностраничный сайт-визитка создается легко и просто — практически у всех это сразу получается за 1-2 минуты. А вот когда нужно сверстать многостраничник, многие разводят руками. Однако и здесь нет ничего сложного. Просто нужно научиться связывать страницы между собой ссылками.
Например, вот как создается многостраничный сайт.
- Через блокнот создаете несколько страниц, и каждой присваиваете уникальное название.
- Связываете все страницы между собой ссылками. Линки нужно поместить в html код каждой страницы через <a href=название страницы</a>. Например, в странице 1 будут ссылки на все остальные страницы. Также в странице 2 будут линки на все другие страницы, включая страницу 1 и т. д.
Для примера сверстаем сайт из 2-х страниц.
- Создаем первую страницу в блокноте. Называем ее galaxy-01.html. В <title> и <h1> прописываем Galaxy A.
- Создаем вторую страницу в блокноте. Называем ее galaxy-02. Название title и h1 — Galaxy Z.
- Добавляем в файл galaxy-01.html перед закрывающимся </body> строчку <a href=»galaxy-02.html»> Galaxy Z</a>.
- Добавляем в файл galaxy-02.html перед закрывающимся </body> строчку <a href=»galaxy-01.html»>Galaxy A</a>.
Все — теперь эти наши две страницы связаны между собой. Переходим на galaxy-01.html и внизу страницы видим ссылку.
Если кликнем на нее, то перейдем на страницу galaxy-02.html. Также ссылка проставлена на второй странице, но она ведет уже на первую страницу.
Как создать полноценный сайт в одном файле
Теперь мы понимаем, как создавать простой сайт через блокнот. Ниже мы покажем вариант полноценного структурированного адаптивного лендинга, где все включено: шапка, блоки, меню, подвал. Стили тоже все прописаны в одном файле. Можете использовать этот шаблон для верстки своего сайта, вам останется лишь заполнить его контентом. Открываете блокнот и вписываете туда этот код.
Вот как будет выглядеть сайт.
После этого можете создать другие страницы и связать между собой. Тогда у вас получится уже многостраничник.
Как подключить сайт к хостингу
Для простых сайтов, созданных в блокноте, не требуется БД или PHP, так как любой web-хостинг умеет работать с html-файлами. Поэтому вам достаточно будет подключить любой хостинг-провайдер, даже самый недорогой или бесплатный.
Ниже подробно о том, как разместить html-сайт на хостинге:
- покупаете домен;
- связываете его с DNS-серверами выбранного хостера;
- через панель управления хостинга создаете новый сайт — название должно совпадать с именем домена;
- загружаете html-файлы в директорию.
Как создать базу данных для сайта
База данных — это место для упорядоченного хранения информации в электронном виде в компьютерной системе. Управляется БД системой СУБД. Если вы все же решите создать БД, то сделать это можно несколькими способами. Один из вариантов — использование утилиты PhpMyAdmin.
Что делаете конкретно:
- открываете раздел «Базы данных»;
- добавляете новую базу, вписав уникальное название;
- создаете нового пользователя для БД;
- редактируете привилегии и права доступа.
Остается связать БД с web-ресурсом. Это происходит автоматически на этапе установки движка. Например, в WordPress надо указать название БД и имя пользователя, а также предоставить пароль для доступа к базе.
Зачем создавать простые сайты на HTML, когда есть CMS?
Простые web-page, написанные на чистом HTML — отличное решение для одностраничных лендингов или небольших сайтов. Вот лишь несколько причин.
- Такие сайты маловесны, понятны и просты. Поэтому они обеспечивают моментальную скорость загрузки — работают намного быстрее, чем ресурсы на любом CMS.
- Создавать их можно своими руками, без навыков программирования. А это экономия средств, если поставить на бесплатный или дешевый хостинг с минимальными параметрами.
- На таких ресурсах нет «мусорного» кода, который добавляют большинство CMS систем.
- HTML-сайты невозможно взломать, так как в них отсутствуют «дырки» движка или модулей.
- Можно быстро делать MFA-сайты чисто для заработка на контекстной рекламе.
Напротив, сайты на CMS или конструкторах из-за сложного кода, необходимости подключения к сторонней базе данных, а также необходимости подключения тяжелых плагинов и файлов CSS — всегда медленно грузятся.
Что касается недостатков площадок на HTML.
- Нет возможности удобно вести блок и наполнять его регулярно контентом, так как html-сайт статичный. Для обновления информации придется каждый раз открывать файл и вносить туда изменения. Например, если нужно вставить новое меню, то на ресурсе с множеством страниц придется редактировать каждую из них.
- Сложно будет расширять функционал площадки. Надо будет изменять код или вставлять новые теги.
- Не будет обратной связи с пользователями. Если вам нужна интерактивность — чат, заказ звонков, корзина и т. п, то без CMS уже не обойтись. Подробнее о том, как создать сайт самостоятельно с помощью различных движков.
Заключение
Таким образом, простейший HTML-ресурс создается в блокноте за несколько минут. Его лучше использовать в качестве статичного лендинга. Например, можете быстро сверстать сайты под партнерки и рекламировать через них товары или услуги.
Урок 1. Как создать простую страницу на html?
В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.
Вы готовы? Тогда поехали!
Подключение к интернету для создания страницы на html нам НЕ нужно.
Нам понадобится
1) Выбираем текстовой редактор. На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как)
2) для Mac и Linux
Bluefish Editor ( скачать )
2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla, Google Chrome, Opera, Yandex и Mail браузеры и тд.
Приступим к созданию страницы HTML
1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.
2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как.
Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с .html на конце, например index.html
Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить. Готово!
Часто задают вопрос о том, что не видно расширения файла. Разберём по порядку
| Расширение имени файла — это последовательность символов, добавляемых к имени файла и предназначенных для идентификации типа (формата) файла. Проще говоря, это .txt .doc .exe .jpg и тд в конце названия файла |
Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать) сменить не только расширение, но и следовательно тип файла (например, с txt на html)
Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:
Смотрим настройки файлов и папок:
Для Win XP Открываем любую папку — Сервис (сверху в панели) — Свойства папки — Вид — Скрывать расширения для зарегистрированных файлов (снять галочку) — Применить
Для Win 7 Открываем любую папку — Упорядочить — Параметры файлов и поиска -Вид — Скрывать расширения для зарегистрированных типов файлов (снять галочку) — Применить
3) вставляем в него Весь код (вместе с комментариями), указанный ниже:
4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html — Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.
В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:
Рисунок 1.
На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:
В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.
Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.
Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете
| Все отступы слева перед тегами в примерах Необязательны. Они сделаны для наглядности, чтобы Вы видели пары тегов |
Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы
Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).
В очередной раз напомню, что Важно не забывать писать закрывающие теги для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:
Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее
Хочу выделить текст жирным, а этот уже курсивом
Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!
5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html — выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad), либо установленный Вами другой текстовой редактор.
В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении — будем вставлять изображения, делать ссылки и много другого интересного)
Как сделать HTML страницу: основные теги для вставки картинки, текста, ссылок, кнопок и пр.
Д оброго всем времени!
Сегодняшняя заметка будет в виде небольшой «записной книжки» с перечнем основных тегов для создания и оформления HTML страницы (вопросы периодически по этому поводу возникают, но каждый из них относительно небольшой для отдельной заметки).
Да, признаться честно, я и сам не помню их все, и время-от-времени подглядываю в свой блокнот (который и решил перевести в отдельную запись). 🙂
Кстати, редактировать HTML файлы удобно с помощью блокнота Notepad++ (он подсвечивает код, подсказывает где какие теги закрыты или нет).
📌 Кстати!
Если вы хотите, чтобы вашу созданную страницу смогли открыть не только вы (со своего ПК), но и другие пользователи в сети Интернет — то для неё необходимо заказать услугу хостинга (и разместить там эту страницу. ).
Основы: с чего начать формирование своей страницы
Типовой код страницы: азы
Язык HTML строится на тегах . Тег — это спец. обозначение какого-нибудь элемента, например, у картинки он: «<img. >» , у ссылки: «<a. >» и пр. (при помощи них браузер понимает, что представлено в том или ином участке страницы).
Теги заключаются в угловые скобки ( < > ), и образуют пару: открывающий и закрывающий (эту пару также называют контейнером ).
Тело всей страницы заключается в теги: <html>. </html> . Обычно, на любой странице также представлен ее заголовок ( <head>. </head> ) и содержание ( <body>. </body> ).
📌 Приведу ниже итоговый код простейшей веб-страницы (для примера):
На скрине ниже представлено, как эта страница будет выглядеть в браузере. Думаю, принцип «что за что отвечает» — должен быть ясен. 🙂
Скриншот. Как наша страница будет выглядеть в браузере
📌 Примечание!
Чтобы создать веб-страницу (как в примере выше) — сделайте следующее:
- создайте текстовый документ (можно с помощью правого клика мышки на любом рабочем месте стола. );
- поменяйте у него расширение с TXT на HTML (если ваш проводник не показывает расширений — см. это);
- откройте файл для редактирования в блокноте (я использовал Notepad++);
- вставьте туда вышеприведенные строки кода страницы и сохраните файл;
- затем откройте полученный файл в браузере (в моем примере ниже — файл «page.html»). Для этого достаточно сделать клик ПКМ по этому файлу и в меню выбрать пункт «Открыт c помощью. «. 👇
Скриншот. Создаем текстовый файл, вставляем туда код, сохраняем
Скриншот. Код страницы, блокнот Notepad++
Обычно для создания сайтов (и веб-страниц) используют 📌спец. конструкторы и движки (вручную формируют HTML страницы реже, особенно, когда речь идет о десятках/сотнях страниц. ).
Адаптивный
Чтобы веб-страничка норм. отображалась не только на ПК, но и на телефонах (где куда меньший экран) — необходимо спец. образом подготовить страницу (например, использовать адаптивную версию — т.е. страница будет масштабироваться автоматически в зависимости от размера экрана устройства).
Для этого можно воспользоваться мета-тегом viewport (нижеприведенный код вставляется между тегами <head></head> ):
< meta name =»viewport» content =»width=device-width, initial-scale=1.0″ >
Скриншот. Без тега viewport и с ним
Для того, чтобы скрыть какой-нибудь блок в мобильной версии сайта — достаточно использовать следующую конструкцию в CSS файле (разумеется, можно задать свою ширину в пикселях и класс*, который нужно скрыть) :
Например, вышеприведенный код скрывает ссылку <a href=»/menyu/»>Статьи</a> с классом «main-item», если ширина экрана меньше 1120px.
Кстати, обратите внимание, что совсем не обязательно указывать ширину картинок, кнопок и пр. элементов в пикселях — допускается использовать проценты (например, max-width:100% — значит макс. ширина 100%):
Основные теги HTML
Текст (строка, список, выравнивание по центру, выделение жирным, пробел, отступ)
Наиболее популярные теги для форматирования текста (в порядке распространенности):
- <p> — тег для формирования абзаца. Каждый новый абзац заключен в свой тег (пример: <p style=»margin: 1px 20px 0px 30px;»> Текст блока HTML с отступами (сверху — 1px, справа — 20px, снизу — 0px, слева — 30px) </p> );
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6> — заголовки статьи по старшинству;
- <br /> — перенос текста на следующую строку (закрывающий тег не нужен);
- <hr> — горизонтальная линия, разделяет два участка страницы (закрывающий тег не нужен);
- <q> — цитата;
- <blockquote> — цитата;
- <strong> — выделение текста жирным шрифтом;
- <b> — аналогично, жирный шрифт;
- <i> — курсив, наклонный шрифт;
- <em> — курсив;
- <s> — зачеркнутый текст;
- <center> — расположение текста (или «того», что будет заключено в тегах) по центру;
- <mark> — подсвеченный участок текста;
- <small> — текст меньшего размера;
- <sup> — верхний индекс;
- <sub> — нижний индекс;
- <pre> — предварительно отформатированный текст;
- <dfn> — термин;
- <cite> — сноска;
- <code> — программный код;
- <time> — дата и/или время.
Код пробела:
Код значка телефон: ☎ (☎)
Код значка звездочка: ★ (★)
Код стрелочек: влево — &larr ; (←); вверх — ↑ (↑); вправо — → (→); вниз — ↓ (↓)
<p> Содержание страницы, текст заметки/поста </p>
<p style=»margin: 1px 20px 0px 30px;»> Текст блока HTML с отступами (сверху — 1px, справа — 20px, снизу — 0px, слева — 30px) </p>
<p><center> Текст по центру </center></p>
<p><b> Текст выделен жирным </b></p>
<p><i> Текст курсивом </i></p>
<p><center><i> Текст по центру и курсивом </i></center></p>
<p><blockquote> Цитата </blockquote></p>
Скриншот. Как выглядят теги на странице
Картинка, изображение, фото
Простейший код для вставки картинки на HTML страницу будет выглядеть следующим образом:
<img src color: #3366ff;»>https://ocomp.info/favicon-120×120.png » title color: #008080;»>Значок сайта » alt color: #00ccff;»>logo site «>
Обратите внимание, что:
- в «src» — указывается прямая ссылка на изображение (👆 у меня она выделена синим);
- в «title» — указывается текст, который будет виден при наведении курсора на картинку (название картинки);
- в «alt» — описание картинки (рекомендуется многими сервисами и браузерами к указанию. Дело в том, что картинки грузятся не так быстро, как текст, — и было бы хорошо, если бы пользователь в процессе открытия веб-странички видел не пустое место, а описание изображения. ).
Скриншот. Пример отображения картинки
Второй пример (слегка отредактированный):
<img src=»https://ocomp.info/favicon-120×120.png» width=»50px» height=»50px» align=»right» title=»Значок сайта» alt=»logo site»>
Обратите внимание на следующее:
- в «width» — можно указать ширину изображения (причем, вместо пикселей можно использовать и проценты!);
- в «height» — указывается высота изображения;
- в «align» — выравнивание картинки относительно текста (можно использовать значения: top, bottom, middle, left и right // сверху, снизу, по центру, слева, справа).
Скриншот. Картинка вставлена с выравниванием справа
Чтобы картинка была в виде ссылки (т.е. при нажатии на картинку происходило открытие какой-нибудь веб-страницы) ее необходимо «заключить» в ссылку:
<a href=»https://ocomp.info/»> <img src=»https://ocomp.info/favicon-120×120.png» title=»Значок сайта» alt=»logo site»> </a>
Обратите внимание на начало и конец кода — картинка находится «внутри» кода ссылки (и, разумеется, в «href» — нужно вставить тот адрес, который должен открываться после клика по картинке).
Ссылка (в т.ч. на телефон, почту, Skype)
Простейший код ссылки:
<a href=»https://ocomp.info/» target=»_blank»>Сам текст ссылки (сюда можно также добавить код картинки или кнопки)</a>
*
В «href» нужно добавить свой URL-адрес (кстати, target=»_blank» — обозначает, что ссылка должна быть открыта в новой вкладке. Если вам это не нужно — просто удалите этот участок кода).
* Кроме этого, в «href» можно вставлять не прямую ссылку, а относительный путь:
- / — корневая директория;
- ./ — указывает на текущую папку;
- ../ — перейти на один уровень вверх;
📌 Кстати, ссылки можно указывать не только на другие ресурсы, но и на свою почту, Skype, телефон (замените номер и никнейм в моем примере на свои):
- ссылка на телефонный номер: <a href=»tel:+71231234567″>+7 (123) 123-45-67</a>
- ссылка на адрес электронной почты: < a href=»mailto:123@mail.ru»>123@mail.ru</a>
- ссылка на Skype (позвонить): <a href=»skype:name_polzovatela?call»>Skype</a>
Список
Код списка очень простой:
Обратите внимание, что:
- в «type» можно указать: circle, square, disc (см. скрин ниже: если «disk» заменить на «square» — вместо кружков будут квадратики);
- вместо тега <ul> — можно использовать <ol> (<ol> — в этом случае список будет нумерованный, т.е. вместо точек будут цифры).
Скриншот. Список — пример
Кнопки и формы
Простейший код для отображения кнопки:
Обратите внимание, что между тегами <button> можно добавить не только текст, но и код ссылки или картинки.
Скриншот. Как кнопка выглядит в браузере
Чаще всего кнопки используют совместно с формами для обработки данных, которые вводит пользователь. Например, вот небольшой код:
При нажатии на кнопку «Отправить» — форма передаст введенные пользователем данные в файл «name.php» , где необходимо написать PHP-код, который обработает их. Например, чтобы посмотреть всё, что ввел пользователь (в наше форме выше) — можно использовать код «<? print_r ($_POST); » 👇
Скриншот. Форма — как выглядит
Достаточно слегка изменить тег «<body>» — добавить к нему атрибут bgcolor=»#00FA9A» (вместо #00FA9A нужно указать свой код цвета).
<html>
<head>
<title>Название, заголовок страницы</title>
</head>
<body bgcolor=»#00FA9A»>
<a href=»https://ocomp.info/»><img src=»https://ocomp.info/favicon-120×120.png» title=»Значок сайта» alt=»logo site»></a>
<p>Содержание страницы, текст заметки/поста</p>
<p style=»margin: 1px 20px 0px 30px;»> Текст блока HTML с отступами</p>
<p><blockquote>Цитата</blockquote></p></body>
</html>
Цвет фона страницы тут же изменится — в моем случае стал зеленым.
Скриншот. Фон залили зеленым цветом
Кстати, фон можно залить не только определенным цветом, но и картинкой. Достаточно также слегка изменить тег «<body>»:
Разумеется, ссылку на фон вам нужно указать свою. 👆👇
Скриншот. Фон в виде мраморной крошки (такая была выбрана картинка)
Таблица
Нижеприведенный код таблицы можно легко изменить под свои нужны: за кол-во столбцов отвечают теги <th> и <td>, за кол-во строк: <tr>.
Как будет выглядеть подобная таблица в браузере — см. скрин ниже. (разумеется, таблицу можно залить нужным фоном, использовать в ней ссылки, картинки и пр. теги).
Скриншот. Таблица — html код
Шрифт (цвет, размер)
Небольшой показательный код:
<font size=»15″ color=»green» face=»Arial»> Текст зеленый, шрифт Arial 15 </font>
Обратите внимание, что сам шрифт и его цвет можно указать свой (вот таблица цветов), размер шрифта «15» — также подбирается под свои нужды.
Скриншот. Изменение размера шрифта, его цвета
Линия
В своем примере я решил нарисовать 4-горизонтальных линии:
<hr align=»center» width=»500″ size=»2″ color=»red» />
<hr align=»left» width=»100%» size=»5″ color=»green» />
<hr align=»right» width=»500″ size=»2″ color=»#ff0000″ />
<hr />
Где, «align» — это выравнивание (положение) линии; «width» — ширина (можно задать в пикселях или процентах); «size» — толщина линии; «color» — ее цвет.
Скриншот. Нарисовано 4 линии (разной длины, толщины, цвета)
Рамки
Несколько рамочек на выбор:
<p style=»border:3px solid #00B344; width:100%;»>Первая рамка</p>
<p style=»border:3px dotted #00B344; width:50%;»>Вторая рамка</p>
<p style=»border:3px dashed red; width:200px;»>Третья рамка</p>
<p style=»border:3px double green; width:350px;»>Четвертая рамка</p>
Как они выглядят на страничке показано на скрине ниже (3px — толщина обводки, solid/dotted/dashed/ — тип обводки, #00B344 — код цвета, width — ширина рамочки).
Скриншот. Как выглядят рамочки
Кстати, рамочку можно вставить только с одной стороны (например, сверху):
Если вам нужно слева — «border-top» нужно заменить на «border-left» (справа — border-right, снизу-подчеркивание — border-bottom).
📌 Кстати, также в качестве рамочки можно использовать обычную таблицу!
📌 Как найти код незнакомых элементов, и вставить их к себе на страничку
Разумеется, выше приведены далеко не все теги и стили, за счет которых можно «построить» страницу. Многие, наверное, видели (и не раз) различные красивые элементы на сайтах, и не против были бы разместить их на своей странице. И сделать это не сложно, достаточно посмотреть код!
Это удобно реализовано (на мой взгляд) в Яндекс-браузере: нужно нажать ПКМ по интересуемому элементу, в появившемся меню выбрать «Исследовать элемент» — сразу после этого экран разделится на 2 части, справа — будет представлен код HTML и стили. 👇
Останется только скопировать его и перенести к себе не страницу (попутно исправив на свой лад 🙂).