Как создать страницу в html. Как создать web-страницу
Либо , а лучше все четыре, потому что многие элементы HTML по-разному показываются в различных программах просмотра, и очень лучше держать под контролем эту разницу.
Не считая браузера нам нужен будет хоть какой текстовой редактор, к примеру, Блокнот (Notepad) из Windows либо Notepad, но идеальнее всего Dreamweaver. Программа нужна для подготовки HTML файлов, а браузер - для просмотра и контроля изготовленного. При помощи этих инструментов мы сделаем WEB сайт на собственном локальном компьютере, после этого поместим его на один из WWW серверов в Интернет, сделав, таким макаром, ваши WEB странички доступными всему миру.
Подготовка к созданию WEB сайта
В качестве примера подготовим WEB странички некоторой компании. Назовем ее «Компания SD», допустим, что она работает в области автоматических систем управления. Цель WEB сайта - поведать миру о компании, сфере ее деятельности, отыскать партнеров и заказчиков.
Для файлов нашего WEB сайта нужна отдельная папка.
Сделайте папку с именованием WEB на любом жестком диске вашего компьютера. Сейчас запустим программку Блокнот (Notepad) и приступим к работе.
Откройте программку, к примеру Блокнот (Notepad), нажав кнопку Запуск (Start) на Панели задач (Taskbar) и выбрав из показавшегося меню команду Программки - Обычные - Блокнот (Programs - Accessories - Notepad).
Вы сможете использовать хоть какой другой текстовый редактор. Но в данном случае следует сохранять файл как обычный текст, чтоб избежать включения в WEB документ сторонних знаков форматирования.
Поначалу введем главные теги, определяющие структуру хоть какого HTML документа. Напомним, что в HTML коде допускается использовать хоть какой регистр знаков - верхний либо нижний.
1-ые теги
Введите с клавиатуры последующие главные теги, поместив любой из их, не считая закрывающего тега , в новейшей строке.
Для ввода парных тегов вы сможете использовать операции копирования и вставки через буфер обмена Windows с следующим добавлением знака слэш /.
Напомним, что 1-ый и последний теги означают соответственно начало и конец документа, элемент
… определяет заголовок WEB странички, элемент … - тело документа, а в элементе мы на данный момент укажем заглавие WEB странички.
Меж открывающим
и закрывающим тегами воткните заглавие документа - Компания SD. Этот элемент должен смотреться последующим образом:
Компания SD
Напомним, что заглавие WEB странички должно быть маленьким и в наибольшей степени показывать ее содержание.
Наша последующая задачка - воткнуть в тело документа меж тегами
… маленький текст-приветствие гостям WEB странички.
Воткните пустую строчку меж тегами
и и введите в ней последующий текст:
Добро пожаловать на страницу компании SD! Тут Вы узнаете о нашей деятельности, о программных продуктах нашей компании и об оборудовании, которое мы производим.
Для каждой WEB странички вы сможете найти цвет фона и цвет текста. Это производится при помощи атрибутов bgcolor и text открывающего тега
. Для определения цвета как значения атрибутов существует два варианта:
словесное указание имени цвета, к примеру, white (белоснежный). В языке HTML предвидено шестнадцать таких имен;
цифровое обозначение в шестнадцатеричной записи, к примеру, "#ffffff" - белоснежный, которое показывает, каким образом цвет формируется из главных цветов - красноватого, зеленоватого и голубого.
Раскрашиваем первую WEB страничку
Естественно, словесное указание цвета более комфортно и понятно. С другой стороны, числовые обозначения дают больше способностей, потому что позволяют указать фактически хоть какой из 16 777 215 цветов, тогда как словесные обозначения ограничены только шестнадцатью цветами.
Перечислим некие цветовые имена: black (темный), gray (сероватый), red (красноватый), green (зеленоватый), aqua (голубой).
Используем в качестве примера для фона нашей WEB странички голубой цвет (blue), а для текста - желтоватый (yellow).
Воткните в открывающий тег
атрибуты bgcolor="blue" и text="yellow". Этот тег должен принять вид:
Не считая указания цвета, для фона WEB странички можно использовать также заблаговременно приготовленный набросок. Но об этом мы побеседуем в предстоящем.
В окне программки Блокнот (Notepad) изберите команду меню Файл - Сохранить (File - Save). На дисплее появится диалог Сохранение (Save As).
Откройте сделанную ранее папку WEB, в какой обязаны сохраняться все файлы WEB сайта.
В поле ввода Название файла (File name) введите other.html - так мы назовем этот файл.
Направьте внимание: вы непременно обязаны указать расширение названии файла HTML, чтоб браузер сумел его открыть. Можно также писать и htm, но это уже устаревший формат и использовать его категорически не рекомендуется.
Смотрим итог работы
Сейчас можно просмотреть результаты нашей работы.
Не закрывая, сверните окно программки Блокнот (Notepad).
Откройте при помощи программки Проводник (Windows Explorer) папку WEB, в какой вы сохранили файл other.html, и два раза щелкните мышью на его значке. Будет запущен браузер, установленный по умолчанию, и в его окне раскроется документ other.html.
Видите ли, в заголовке окна браузера указывается заглавие документа, которое мы ввели в элементе
, а цвет фона и текста странички - такие, как указаны в теге . Текст отображается в одном абзаце и выровнен налево.
Может быть, в вашем браузере размер шрифта текста будет крупнее либо мельче, чем на рисунке. В таком случае изберите команду меню Вид - Размер шрифта - Средний (View - Text Size - Medium) в браузере Internet Explorer, чтоб установить средний размер шрифта.
Следует подразумевать, что различные браузеры могут по-разному показывать содержимое 1-го и такого же HTML файла. Потому при разработке WEB страничек лучше всегда просматривать итог во всех более фаворитных браузерах - Internet Explorer, Opera, Мозилла. В таком случае вы будете убеждены, что гость вашего WEB сайта увидит конкретно то, что вы желаете ему показать.
Просмотрите сделанный файл в другом браузере. На этом шаге работы отличия будут неприметны.
Не закрывая, сверните окна браузеров.
Потому что в элементе
мы ввели текст без разбивки на абзацы, то в браузере он отображается в виде 1-го абзаца и выровнен налево. Сейчас следует придать тексту более приятный вид.
Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.
Что такое HTML и CSS?
HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.
Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.
При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.
Основные термины HTML
Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML - элементы, теги и атрибуты.
Элементы
Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с
Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id
, который идентифицирует элемент; атрибут class
, который классифицирует элемент; атрибут src
, который определяет источник встраиваемого содержимого; и атрибут href
, который указывает ссылку на связанный ресурс.
Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент
с атрибутом href
будет выглядеть следующим образом:
Shay Howe
Демонстрация основных терминов HTML
Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега
и закрывающего тега
охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com"
в открывающем теге.
Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег
Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу.
Настройка структуры документа HTML
HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.
Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы:
,
,
и
.
Объявление типа документа или
находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто
. После этого идёт элемент
означающий начало документа.
Внутри
элемент
определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента
не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.
Всё видимое содержимое веб-страницы будет находиться в элементе
. Структура типичного HTML-документа выглядит следующим образом:
Привет, мир!
Привет, мир!
Это веб-страница.
Демонстрация структуры HTML-документа
Этот код показывает документ, начиная с объявления типа документа,
, затем сразу идёт элемент
. Внутри
идут элементы
и
. Элемент
содержит кодировку страницы через тег
и название документа через элемент
. Элемент <body>
включает в себя заголовок через элемент <h1>
и абзац текста через <р>
. Поскольку и заголовок и абзац вложены в элемент <body>
, они видны на веб-странице.</p><p>Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head>
и <body>
вложены и сдвинуты внутри элемента <html>
. Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head>
и <body>
.</p><h3>Самозакрывающиеся элементы</h3><p>В предыдущем примере элемент <meta>
был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. <meta>
является одним из таких элементов. Содержимое элемента <meta>
в примере присваивается с помощью атрибута charset
и значения. К другим типичным самозакрывающимся элементам относятся:</p><ul><li><br>
</li><li><embed>
</li><li><hr>
</li><li><img>
</li><li><input>
</li><li><li><meta>
</li><li><param>
</li><li><source>
</li><li><wbr>
</li>
</ul><p>Приведённая структура, сделанная с помощью объявления типа документа <!DOCTYPE html>
и элементов <html>
, <head>
и <body>
, является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.</p><h3>Валидация кода</h3><p>Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS , которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.</p><h2>На практике</h2><p>В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!</p><br><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy><p>Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид.</p><h2>Основные термины CSS</h2><p>В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой.</p><h3>Селекторы</h3><p>При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.</p><p>Селекторы, как правило, связаны со значением атрибута, вроде значения id
или class
или именем элемента, вроде <h1>
или <р>
.</p><p>В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <span><p>P { ... }
</p><h3>Свойства</h3><p>Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background
, color
, font-size
, height
и width
и другие часто добавляемые свойства. В следующем коде мы определяем свойства color
и font-size
, применяемые ко всем элементам <span><p>P {
color: ...;
font-size: ...;
}
</p><h3>Значения</h3><p>Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p
>И устанавливаем значение свойства color
как orange
, а значение свойства font-size
как 16 пикселей.</p><p>P {
color: orange;
font-size: 16px;
}
</p><p>Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.</p><p>Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy></p><p>Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения</p><p>Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.</p><h2>Работа с селекторами</h2><p>Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.</p><h3>Селекторы типа</h3><p>Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div>
мы должны использовать селектор div
. Следующий код показывает селектор типа для элементов <div>
, а также соответствующий HTML.</p><p>Div { ... }
</p><p>
<div>...</div>
<div>...</div>
</p><h3>Классы</h3><p>Классы позволяют выбрать элемент на основе значения атрибута class
. Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.</p><p>Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class
для нескольких элементов.</p><p>В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class
, включая элементы <div>
и <span><p>Awesome { ... }
</p><p>
<div class="awesome">...</div>
</p><h3>Идентификаторы</h3><p>Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class
, идентификаторы используют значение атрибута id
в качестве селектора.</p><p>Независимо от типа отображаемого элемента, значение атрибута id
может быть использовано только один раз на странице. Если id
присутствуют, то они должны быть зарезервированы для важных элементов.</p><p>В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id
. Здесь идентификатор выберет только элемент, содержащий атрибут id
со значением shayhowe
.</p><p>
#shayhowe { ... }
</p><p>
<div id="shayhowe">...</div>
</p><h3>Дополнительные селекторы</h3><p>Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.</p><p>Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.</p><h2>Подключение CSS</h2><p>Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента <head>
нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.</p><h3>Другие варианты добавления CSS</h3><p>Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.</p><p>Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.</p><p>Внутри элемента <head>
применяется элемент <link>
, который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel
со значением stylesheet
для указания их отношений. Кроме того, атрибут href
применяется для указания местоположения или пути к CSS-файлу.</p><p>В следующем примере HTML-документа элемент <head>
указывает на внешний стилевой файл.</p><p>
<head>
<link rel="stylesheet" href="main.css">
</head>
</p><p>Чтобы CSS отображался правильно, значение пути атрибута href
должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.</p><p>Если CSS-файл располагается в подпапке, то значение атрибута href
должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href
будет stylesheets/main.css
. Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.</p><p>На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS.</p><h2>Использование сброса CSS</h2><p>Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.</p><p>Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.</p><p>Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5.</p><p>Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.</p><h3>Кроссбраузерность и тестирование</h3><p>Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени - это решение вы должны будете сделать на основе того, что лучше для вашего сайта.</p><p>Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.</p><h2>На практике</h2><p>Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.</p><ol><li>Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.</li><li>Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.</li><p>Просматривая файл index.html в браузере мы можем видеть, что элементы <h1>
и <p>Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.</p><p>
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}</p><li>Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент <link>
в <head>
, сразу после элемента <title>
.</li><li>Поскольку мы указываем на стили через элемент <link>
добавьте атрибут rel
со значением stylesheet
.</li><p>Мы также включим ссылку на наш файл main.css используя атрибут href
. Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href
, который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css
.</p><p>
<head>
<meta charset="utf-8">
<title>Styles Conference
Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.
Рис. 1.04. Наш сайт Styles Conference со сбросом CSS
Демонстрация и исходный код
Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Резюме
Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.
Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.
Напомним, что мы рассмотрели следующее:
Разница между HTML и CSS.
Знакомство с элементами HTML, тегами и атрибутами.
Настройка структуры вашей первой веб-страницы.
Знакомство с селекторами CSS, свойствами и значениями.
Работа с селекторами CSS.
Указатель на CSS из HTML.
Важность CSS сброса.
Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.
Ресурсы и ссылки
Common HTML terms via Scripting Master
CSS Terms & Definitions via Impressive Webs
CSS Tools: Reset CSS via Eric Meyer
Сайт на самом деле представляет собой набор файлов из кода на нескольких языках. А код можно писать в любом нормальном текстовом редакторе, даже в блокноте. Конечно, лучше использовать более продвинутый софт, вроде Notepad++ или полноценных программ для разработки. Ну да ладно, давайте посмотрим, как сделать сайт в блокноте средствами html и css.
Как создать сайт с нуля на html в блокноте — пошаговая инструкция
А вот оно и наше ключевое слово – HTML. Именно с этого языка начинается создание сайта. Без него невозможно представить себе веб-разработку. Это все равно что пытаться сварить суп без воды. Не спешите закрывать страницу, если вы абсолютный ноль в html. В этой пошаговой инструкции мы вместе создадим простой сайт, а я попробую объяснить те куски кода, которые мы будем добавлять в блокнот.
Шаг 1. Создание файлов
Создание html сайта в блокноте нужно начать с того, что создать два текстовых документа в какой-нибудь пустой папке. Один должен получить расширение.html, а второй.css. Имена могут быть любыми. Заметьте, не site.html.txt , а именно site.html .
Для этого, сохраняя документ вручную, допишите ему расширение через точку. Такую же манипуляцию проделываем со вторым файлов, но ему даем расширение.css. Ах да, не забудьте выбрать кодировку UTF-8
.
Шаг 2. Закладываем структуру
Файлы созданы и можно приступать к работе. Открывайте html-документ. В нем будет происходить основная работа. Строительным элементом в этом языке являются теги – это специальные слова в угловых скобках, которые указывают браузеру, что нужно отобразить на веб-странице.
Давайте и мы вставим что-то в наш документ, а то совсем пусто.
Hello, world!
Привет, мир!
Итак, мы вставили сразу кучу тегов и может быть вы ничего не понимаете. Попробуйте открыть страничку в браузере. Там вы увидите слова “Привет, мир”
если все сделано правильно. Это и есть, по сути, простейшая веб-страничка.
html – контейнер для всех остальных тегов. В нем содержится вся веб-страница. В самом верху мы указали тип документа. Тег head – это служебная информация о странице. Тут мы с помощью тега
задали название страницы, которое будет выводиться в строке браузера вверху. Далее задали кодировку и подключили css-файл с помощью тега <link> .</p><p>Как видите, есть теги парные и есть одинарные. Сейчас я не буду на этом подробно останавливаться, это зависит от того, какие функции выполняет команда.</p><h3>Шаг 3. Планирование</h3><p>Сейчас давайте на минутку оставим код в покое и подумаем. Из чего, по вашему, состоит типичный веб-ресурс? Конечно, в сети их много и все они разные, но есть же какие-то одинаковые элементы структуры, не так ли? Например, вертикальные и горизонтальные меню, боковые колонки, шапки (самый верх, где располагается логотип) и подвал (низ сайта).</p><p>Так вот, давайте и мы распланируем, как бы сделать наш первый простой сайт. В этом деле все нужно начинать с планирования. Нужно выделить структурные части будущего шаблона, из чего он будет состоять. Допустим, в нашем простом шаблоне будет шапка, часть с основным содержимым, боковая колонка и футер или подвал (одно и то же).</p><h3>Шаг 4. Начинаем!</h3><p>Значит, нам нужно 4 основных блока. В html есть возможность в парный тег вкладывать неограниченное количество других тегов, поэтому я предлагаю следующий метод:<br>Создать один общий контейнер, в котором будут расположены все наши 4 основных блока.</p><p>Итак, вернемся к коду. Писать мы его будем в теге body, так как он и являет собой будущую страницу. Можете смело удалить надпись <b>«Привет, мир»
</b>, и напишем вот что:</p><p> <div id="main">
<div id="header">Это наша шапка</div>
<div id="sidebar">Это боковая колонка</div>
<div id="content">Это - контент</div>
<div id="footer">Подвал</div>
</div>
</p><p>Таким образом мы создали один большой блок, в которой поместили остальные 4. Блок в html создается парным тегом div , который не имеет обязательных атрибутов, но я сразу добавил каждому из них уникальный id (идентификатор), чтобы позднее оформить внешний вид через CSS.</p><p>Скопируйте этот код себе и обновите страничку в браузере. Пока вы видите перед собой просто 4 строчки текста, но ничего, щас мы их превратим в сайт!</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/2-1.jpg' height="89" width="160" loading=lazy><br></p><h3>Шаг 5. Нам поможет CSS</h3><p>Теперь начнем оформлять наши блоки. Конечно же, нужно начать с самого большого контейнера. Мы создали css-файл в самом начале, но так и не написали в него ничего. Самое время это исправить. Добавим туда такой код:</p><p> *{
box-sizing: border-box
}
#main{
width: 810px;
margin: 0 auto;
border: 5px solid black
}
</p><p>Первое правило устанавливает такое поведение для блоков, чтобы отступы и рамки не увеличивали их ширину. Дальше по коду мы обращаемся к блоку с идентификатором main , для этого достаточно поставить решетку и дописать имя идентификатора. Сразу после этого открываются фигурные скобки, где перечисляются правила внешнего вида, которые применятся к элементу.</p><p>Мы установили общему контейнеру ширину в 810 пикселей, правило margin: 0 auto устанавливает блок по центру, то есть наш сайт будет отображаться красиво по центру, а не прижат к левому краю. Последнее свойство border добавляет черную сплошную рамку с каждой стороны блока.</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/3-1.jpg' height="98" width="181" loading=lazy><br></p><p>Что ж, стили для главного контейнера мы сделали. На веб-страничке у нас по-прежнему отображается 4 строчки с текстом, но уже в черной рамке. Идем дальше.</p><p>Теперь самое время настроить внешний вид четырех основных структурных блоков нашей страницы. Я сразу приведу код, а ниже буду его комментировать.</p><p> #header{
height: 100px;
border-bottom: 5px solid black
}
#sidebar{
width: 200px;
height: 500px;
float: left;
border-right: 5px solid black
}
#content{
width: 600px;
float: right;
height: 500px
}
#footer{
height: 75px;
clear: both;
border-top: 5px solid black;
}
</p><p>Как вы понимаете, я просто обращаюсь к элементам с разными идентификаторами, описывая их сверху вниз. Сначала стили задаются для шапки – я поставил высоту в 100 пикселей и рамку снизу, чтобы она была отделена от остальных блоков.</p><p>А вот дальше все становится интересней. Дело в том, что по умолчанию блоки отображаются сверху вниз, если их просто написать в html-коде и никаких дополнительных правил не задавать. Но ведь боковая колонка на то и боковая, чтобы отображаться сбоку от основной части страницы. А как это сделать? Смотрите, мы сайдбару задаем высоту, ширину, рамку и еще одно свойство (float: left).</p><p>Это правило означает, что элемент будет прижат к левому краю родителя (то есть родительского элемента – блока #main). Отлично, теперь такое же свойство зададим блоку с контентом и он тоже прижмется к левому краю, но уже вслед за боковой колонкой.</p><p>Конечно, контент получает больше ширины, потому что так и должно быть, а вот высоту мы поставили одинаковую. На реальном сайте обычно в основном блоке будет много информации, поэтому высоту можно вообще не задавать. То же самое и с боковой колонкой, если в нее постоянно добавляется информация. Но мы для примера явно прописали высоту, чтобы было наглядно видно размеры блоков.</p><p>Наконец, осталось описать последний блок – <b>footer
</b>. Он получает небольшую высоту, рамку с высоту и еще одно новое для нас свойство. Это свойство clear со значением both . Зачем его писать? Мы с вами прижали два предыдущих блока к левому краю. Они стали так называемыми плавающими блоками, но по умолчанию обычные блоки могут не замечать плавающие и наезжать на них.</p><p>Чтобы этого не происходило наш подвал получил вот такую команду – мол, смотри, обычный блок, выше тебя располагаются два плавающих. Заметь их и расположись ниже, чем они. Вот такую команду, по сути, дает свойство clear: both , которое заставляет обычный блок расположиться ниже всех плавающих.</p><p>Отлично, а теперь обновите страницу в браузере. Ну что, уже намного больше похоже на сайт, хотя бы по структуре.</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-v-bloknote.jpg' width="100%" loading=lazy></p><h3>Шаг 6. Разукрашиваем сайт</h3><p>Следующий, очень интересный этап – давайте добавим каких-то цветов нашему сайту. Пусть у него будет не сплошной белый фон, а что-то поинтереснее. Задать фон можно двумя способами:</p><ul><li>Общий фон сразу всему сайту, прописав его общему контейнеру #main</li><li>Если каждый из основных блоков должен иметь свой оттенок цвета, то тогда нужно каждому задать цвет отдельно. Но лучше сильно не увлекаться – красная шапка, зеленый контент и желтый подвал будут смотреться не очень, сразу скажу</li>
</ul><p>Предлагаю сделать по первому методу. Я тут нашел в онлайн-сервисе приятный светло-синий оттенок, который и предлагаю сделать фоном сайта. Добавьте к стилям общего контейнера такое свойство:</p><p> #main{ background: #B3C1E6 }
</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/fon.jpg' width="100%" loading=lazy></p><p>Обновляем страничку и убеждаемся в том, что наш сайт получил приятную светло-синюю гамму. Теперь предлагаю немного продвинуть уровень дизайна – пусть фон шапки и подвала будет потемнее, чем у остальных блоков. Можно добавить такие строчечки кода:</p><p> #header, #footer{ background: #9091DA }
</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/4-1.jpg' width="100%" loading=lazy></p><p>Тут мы применили новую технику – через запятую записали два блока и новый фон применится к им обоим.</p><h3>Шаг 7. Работаем над шапкой</h3><p>Дальнейшая работа будет заключаться в оформлении отдельных блоков до более привлекательного состояния. Начнем с шапки. Что у нас обычно в шапке? Правильно, красивое название сайта и логотип. Вот это мы и добавим.</p><p>Начать я предлагаю с логотипа. Поскольку сайт мы создаем с помощью html, поместим логотип этого языка в левый угол шапки. В интернете я нашел вот такой вот милый логотипчик.</p><p>Его нужно скачать и положить в ту же папку, где хранится html-документ.<br>Теперь смотрим:</p><p> #header{ background: #9091DA url(html.jpeg) no-repeat 5% center }
</p><p>Картинку я назвал html , а ее формат – jpeg , поэтому такая запись. Дальше мы также указали такие команды: картинка-фон не должна повторяться, а разместиться должна со смещением с 5% по горизонтали от начала блока и по центру по вертикали. Сначала всегда записывается горизонтальная позиция, а потом вертикальная.</p><p>Естественно, если у вас картинка называется по-другому или имеет другой формат, то вы должны немного изменить приведенный код. Отлично, логотип у нас есть. Пора убрать надпись – это шапка сайта и поставить вместо нее красивый заголовок. Удалим из шапки текст и вставим туда новый элемент:</p><p> <div id="header">
<div id="title">Название сайта</div>
</div>
</p><p>Теперь его нужно оформить:</p><p> #title{
font-size: 32px;
float: left;
margin-left: 200px;
font-family: Tahoma;
color: yellow;
padding-top: 20px;
text-shadow: 0 0 5px orange;
}
</p><p>Мы задали приличное количество стилей: размер шрифта, семейство шрифта, прижатие заголовка к левому краю, левый отступ, цвет, верхний внутренний отступ и тень текста. Объяснять работу каждого свойства сейчас нет смысла, поэтому просто скопируйте код и вставьте в таблицу стилей (css-файл).</p><p>Все, простая шапка готова. Конечно, на реальном сайте в ней могут находиться еще какие-то ссылки, адреса и т.д. Ну чтож, давайте что ли добавим для реализма. Этот html-код нужно вставить в содержимое шапки сайта.</p><p> <ul id="about">
<li>О нас</li>
<li>Блог</li>
<li>Обратная связь</li>
</ul>
</p><p>Он формирует список их трех ссылок. В действительности они должны куда-то вести, но у нас это просто пустые ссылки. Также оформим список и ссылки в нем.</p><p> #about{
float: right;
list-style: none;
margin-right: 50px
}
#about a{
color: yellow;
}
</p><h3>Шаг 8. Делаем меню в боковой колонке</h3><p>Обычно боковая колонка содержит меню сайта и еще много разных виджетов. Давайте сделаем там простейшее меню. Опять же, в этом нам поможет список, с помощью которого мы уже вывели ссылки в шапке, но поскольку главное меню по идее объемнее, то ссылок будет больше.</p><p> <ul class="menu">
<li>Пункт меню1</li>
<li>Пункт меню2</li>
<li>Пункт меню3</li>
<li>Пункт меню4</li>
<li>Пункт меню5</li>
<li>Пункт меню6</li>
</ul>
</p><p>Menu{ list-style: none }
</p><p>Собственно, тут я прописал только одно правило – убрал маркеры у пунктов списка, все остальное и так устраивает. Также перед меню можно добавить заголовок и как-нибудь его оформить. Можете этим сами заняться. Заголовки пишутся в парных тегах <h1> - <h6> , где первый – самый большой (заголовок статьи), а последний – самый маленький, часто он вообще не применяется. Для заголовка меню в боковой колонке оптимально брать <h3>.</p><h3>Шаг 9. Оформляем контентный блок</h3><p>Ну а что его там оформлять? Нужно добавить немного текста, чтобы было похоже на реальный сайт со статьей.</p><p> <h1>Заголовок статьи</h1>
<p>А здесь будет какая-нибудь статья...</p>
<p>Содержимое в статье разбивается на абзацы и подзаголовки...</p>
<h2>Подзаголовок статьи</h2>
</p><p>Любое содержимое можно вставить в блок с контентом. Абзацы в нем формируют основное содержимое, а теги h1-h2 – заголовки и подзаголовки. Тег <b>h1
</b> должен быть единственным на странице.</p><p>Оформление в данном случае заключается в том, чтобы определить цвет текста. Например, можно поставить коричневый. Заголовки можно выделить немного другим оттенком. Тут я не буду приводить никакого кода, сами уже сможете додуматься.</p><h3>Шаг 10. Оформляем подвал</h3><p>Если честно, у меня нет желания сейчас что-то пихать в подвал. На реальных сайтах в нем размещаются сведения об авторских правах, иногда там размещают меню и ссылки на другие сайты. Я напишу там просто слово копирайт и выровняю его по центру вот так:</p><p> #footer{ text-align: center }
</p><h3>Шаг 11. А нет, нет больше шагов</h3><p>Вот, собственно, и все. Процесс создания наипростейшего шаблона на html можно считать законченным. У нас есть логотип, есть название сайта, меню, статья, подвал. В общем, это очень примитивный, но все же сайт.</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-tselikom.jpg' width="100%" loading=lazy></p><p>Конечно, сайт выглядит так, что хочется никогда на него больше не смотреть, но сути это не меняет. Хороший внешний вид это работа веб-дизайнера.</p><h3>А что с ним дальше делать?</h3><p>Целью этой статьи было просто показать вам, как создается простейший сайт с помощью html и css. Можно поработать над его дизайном и в результате может получиться что-то привлекательное. Но все же нужно помнить, что это статический сайт. Если на него и добавлять новые страницы, то это делается вручную, с помощью создания новых html-документов.</p><p>Такой способ управления сайтом давно в прошлом, хотя и имеет свои плюсы. Чтобы выложить сайт в сеть, вы должны все html-файлы, таблицу стилей и необходимые картинки забросить на какой-нибудь хостинг, платный или бесплатный. Также нужно зарегистрировать имя сайта, чтобы он как-то назывался. Домен третьего уровня можно получить бесплатно у многих компаний, а вот за домен второго уровня придется заплатить <b>(.ru, .com, .ua и т.д.)
</b></p><p>То, что мы делали с вами по ходу этой статьи, называется версткой сайта. Если вы хотите управлять сайтом с помощью удобного визуального редактора, то уже сделанную верстку нужно будет интегрировать с любым из популярных движков. Лучше всего с <b>WordPress
</b>.</p><p>Это отдельная тема – интеграция во многом намного сложнее самой верстки. Чтобы научиться создавать сайты под движок, нужно пройти хороший обучающий курс. Бесплатной информации на просторах интернета вам может не хватить. Процесс создания сайта на wordpress я описал , но там вы не найдете сведений, как интегрировать html шаблон с движком.</p><p>В статье приводился так называемый блочный метод верстки, то есть все содержимое мы разместили в блоках. Сегодня это все еще самый популярный метод. Вообще при этом в процессе желательно использовать теги HTML5 , а не просто блоки, но ради простоты в этой статье был применен самый простой вариант.</p><p>Надеюсь, у вас сложилось хотя бы минимальное представление о том, как сделать сайт html в блокноте или любом другом текстовом редакторе.</p>
<p>Здравствуйте, уважаемые читатели блога. С этой статьи мы начнем изучать основы языка HTML.</p>
<p>Вам скорей всего уже известно, что основным языком Internet-а является <b>язык гипертекстовой разметки HTML (HyperText Markup Language)
</b>. В этой статье мы узнаем базовые понятия HTML и научимся создавать простейшие WEB-страницы.</p>
<p>Начнем с самого главного, рассмотрим как работает сама <b>всемирная паутина — Internet
</b>. Для получения веб-страниц, вы создаете файлы, написанные на языке HTML, и помещаете их на веб-сервер. После этого любой браузер установленный на устройстве с доступом в Интернет, будь то компьютер, телефон или планшет, может отыскать ваши веб-страницы.</p>
<p><b>Веб-сервер
</b> — это обычный компьютер со специальным программным обеспечением, имеющий доступ в Интернет. Он непрерывно ожидает запросов от браузеров на веб-страницы, изображения, аудио- и видео-файлы. Получив запрос на один из таких ресурсов, сервер ищет его и высылает браузеру.</p>
<p><b>Браузер
</b>— это специальная программа, предназначенная для просмотра веб-сайтов, например Internet Explorer. При помощи браузера вы бродите по сайтам, щелкая по ссылкам. Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы. С помощью команд — <b>тегов
</b>, HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например <p>, <h1>, <table>.</p>
<p>Срочно нужен интернет-магазин, а времени на изучение HTML, CSS, PHP и других технологий нет. Тогда просто можете арендовать интернет магазин с полностью реализованным функционалом и оптимизацией под поисковые системы.</p>
<h2>Язык HTML и его теги</h2>
<p>Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C. Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org
. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.</p>
<p>Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор. Я предлагаю для начала воспользоваться встроенным в Windows <b>Блокнотом (Notepad)
</b>(вообще в дальнейшем для редактирования html-кода я советую использовать ). Найти его можно: «Пуск->Все программы->Стандартные->Блокнот». Давайте создадим страничку об автомобилях. Итак, откроем Блокнот и наберем в нем текст:</p>
<p><!DOCTYPE html><br>
<html><br>
<head><br>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br>
<title>Пример Web-страницы
Сайт об автомобилях.
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях. На сайте есть описания многих импортных и отечественных автомобилей.
Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:
Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:
Таким образом, мы создали Web-страницу в Блокноте, хоть и немного невзрачную, но уже содержащую большой заголовок и абзац текста, который автоматически разбивается на строки и содержит фрагмент, выделенный полужирным шрифтом.
Что такое тег?
Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент:
Сайт об автомобилях
.
Здесь мы видим текст, который отображается на странице как заголовок, заключенный в теги
и
. Что же такое тег в html языке?
Тег HTML
- это обычные слова и символы, заключенные в угловые скобки, например
,
,
. Так тег
является открывающим тегом, тег
закрывающим тегом, а текст между ними называется содержимым тега. Также тег
и тег
называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще элементы состоящие из одного открывающего тега:
Так парный тег
определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы
—
.
Элементы бывают блочные и строчные (текстовые). Блочные элементы
осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы
осуществляют непосредственное форматирование текста или логическое форматирование. Элемент
является блочным элементом.
На этом у меня все!!! До встречи в следующих постах!
Всем привет, дорогие друзья и гости моего блога! Ой. Я только что заметил, что Яндекс наградил меня ТИЦ 20, хотя еще вчера был 0. Я понимаю, что ТИЦ уже ничего толком не значит, но всё равно очень приятно и радостно. Ну а вообще я хотел продолжить недавно начатый цикл статей по сайтостроению. И первое, с чего я бы хотел начать — это с основ языка гипертекстовой разметки (не программирования!) HTML.
HTML
— это всё таки основа всего и даже если вы не будете крутым веб-разработчиком, а будете делать свои сайты на движках, то знание языка HTML будет огромным и жирным плюсом. Поэтому в своей сегодняшней статье я хочу рассказать вам, как создать сайт html через блокнот.
Конечно то, что мы сегодня сделаем трудно будет назвать сайтом, поэтому сразу говорю, что сегодня мы не создадим крутой сайт, но я вам расскажу структуру, как всё происходит при таком способе создания собственного веб-ресурса. Я думаю, что у вас не должно возникнуть трудностей. В итоге мы создадим самую наипростейшую веб-страницу для начала. И если вы готовы, то поехали!
Для начала создайте обычный текстовый документ или откройте блокнот. Для открытия блокнота можете вызвать строку «Выполнить» и вписать туда notepad. Открыли? Молодцы!
Любой html-документ или сайт размечаются с помощью специальных тэгов. Тэг — это специальный знак, который дает команду сайту, как правильно нужно отображать тот или иной кусок содержимого, заключенный в него. Сейчас я подробно на этом останавливаться не буду, так как о тэгах я собираюсь рассказать вам в своей .
Скажу лишь, что большинство тэгов парные, то есть сначала ставится открывающий, а после того, как мы написали информацию, надо закрыть тег. Закрывается он точно также как и открывается, только перед закрытием надо поставить знак «/».
В общем для функционирования нам нужно проставить несколько обязательных тэгов. Давайте посмотрим, что они из себя представляют.
— это главный тэг, благодаря которому мы говорим сайту, что сейчас будем писать тут на языке HTML, так что пусть не беспокоится. С него должен начинаться сайт и им же закрываться.
— сюда заносится служебная информация, например название документа, описание и многие другие. Ставится сразу после открытого тэга .
— Между этими значениями мы пишем заголовок страницы, то есть это название будет отображаться не в самом содержимом сайта, а во вкладке браузера. Данный тип ставится между и .
— этот тэг отвечает за отображение содержимого на сайте. То есть всё, что вы напишите между этими тэгами будет отображаться на веб-странице.
Я так чувствую, что не все всё поняли, и у некоторых осталась каша в голове, поэтому я всё покажу вам на живом примере.
Живой пример
Итак создаем текстовый документ и пишем там следующее содержимое:
Написали? Молодцы! Тут я дал вам информацию специально в виде картинки, а не в виде текста, так что вы ее не скопируете. Вот я негодяй, да?)) Обратили внимание, что тэги вкладываются друг в друга как матрешки? Так и должно быть.
Совет!
Старайтесь все таки не копировать содержимое, а переписывать его своими руками. Таким образом вы намного лучше и быстрее усвоите весь материал.
После этого сохраните ваш документ в формате html. Для этого при сохранении, после того как вы назвали ваш документ, ставьте точку и пишите html. То есть у вас должно получиться index.html. Тогда ваш документ автоматически сохранится уже не в виде текстового документа, а в виде веб-страницы. И еще при сохранении документа измените кодировку на UTF-8 Вы можете открыть этот файл с помощью любого браузера. Давайте это сделаем и посмотрим, что у нас получилось.
Смотрите, сколько мы всего написали, а в итоговом документе остался только наш приветственный текст. Почему? Да потому что сами по себе тэги не отображаются в итоговом варианте, а показываемая информация отображается только между тэгами body
. Поэтому всё так и получилось. Зато смотрите, то что мы писали в head, точнее в title, теперь отображается во вкладке браузера.
Если вы захотите вновь что-то редактировать здесь, то вам достаточно будет открыть уже этот сохраненный документ снова в блокноте. В общем смотрите, таким образом с помощью блокнота мы сделали первый наш сайт. Да...сайтом это сложно назвать, но по сути это так. Мы сделали основу (каркас) и если мы закинем это на хостинг, то он уже будет отображаться в интернете.
Но попробуйте поставить несколько пробелов и написать еще текст, либо просто напишите несколько строчек текста и сохраните это в том же документе.
Теперь войдите в этот документ с помощью браузера. Что мы видим? А то, что ваши пробелы и переносы строк не повлияли на документ и все идет одной строкой. Некрасиво, да? А всё потому, что html сам по себе не понимает ваши пробелы (кроме одного) или переносы. Для того, чтобы переносить строки всё нужно размечать другими тэгами, о которых мы будем говорить в других статьях.
Многие наверное подумают что-то типа: «И это по твоему сайт? Да ты с дубу рухнул». Да, дорогие мои. Эту примитивную веб-страницу также можно назвать сайтом. И я еще раз повторюсь, что смысл данной статьи был не создать мегакрутой сайтище, а показать вам основу любого сайта, как это выглядит, как всё происходит.
Но вы не волнуйтесь. Это всё вводные уроки. Далее мы всё глубже и глубже погрузимся в html разметку, и сможем всё правильно форматировать, расставлять. В общем всё будет круто и мы сделаем полноценный веб-ресурс. Просто в одну статью всё это не уместится, а комкать и сокращать я тоже не буду, иначе фигня получится.
Специальный блокнот для веб-разработчика
Но все же мы больше не будем пользоваться этим доисторическим средством, так как для разработчиков есть более удобный и навороченный блокнот, причем абсолютно бесплатный. Скачайте его отсюда
и установите самым обычным способом.
В дальнейшем я буду работать именно через редактор Notepad++. Установите его и вы поймете, почему это удобно. Настроек там премудрых нет, но если вдруг вы установили английскую версию, то зайдите в меню «Preference»
и в графе «Localization»
выберите Русский.
Да, и еще зайдите в меню «Кодировка»
и выберите «UTF-8»
. Ну и сразу сохраните этот файл в формат html. Для этого выберите меню «Файл»
— «Сохранить как»
и обзовите документ index, выбрав из из выпадающего списка формат «html»
. Это делается для того, чтобы программа поняла, что мы делаем и подсвечивала нам нужные теги и команды.
А почему я вообще называю страницу index? Дело в том, что когда вы заходите на любой сайт, то по умолчанию он ищет страницу index.html или index.php. Именно эти файлы общеприняты как главные, но вообще это можно и изменить на сервере.
Конечно, если вы хотите всё изучить побыстрее, то рекомендую вам посмотреть недавно вышедший курс по HTML5 и CSS3
. Там все подробно рассказывается и показывается на живом примере, кроме того вы научитесь делать несколько видов сайтов. В общем очень интересные и информативные уроки.
Ну а вам я рекомендую подписаться на обновления моего блога, чтобы не пропустить следующих уроков, а также других интересностей. Кроме того обязательно посмотрите и другие статьи моего блога. Я уверен, что многие из них окажутся для вас полезными. В общем желаю вам удачи. Увидимся в других статьях. Пока-пока!
