Сайт о телевидении » Услуги » Персональная web страница. Как создать web-страницу. HTML и другие понятия
Персональная web страница. Как создать web-страницу. HTML и другие понятия
В рамках данной статьи для начинающих и обычных пользователей, я рассмотрю что такое веб-страница, а так же связанные с этим нюансы.
Сегодня интернет это уже обыденность, доступная для использования даже для самых начинающих пользователей. Интернет предоставляет доступ и к развлекательным ресурсам, и к сайтам для общения (например, социальные сети), и к поисковым системам, и ко многому другому. Однако, мало кто при этом хоть чуть-чуть представляет себе, что же это такое "веб-страница". Это не плохо и не хорошо, но все же полезно знать хотя бы некоторые основы, о них и пойдет речь далее.
Примечание
: Так же советую ознакомиться со статьей что такое веб .
Первым делом, вам стоит знать, что все сайты, блоги, форумы и прочие интернет-ресурсы состоят из этих самых веб-страниц. Причем эти страницы связаны между собой через интернет-ссылки, щелкая по которым в браузере вы переходите от одной странице к другой. Эта статья так же представляет собой веб-страницу. При чем все содержимое этой страницы называется контентом. То есть текст, картинки и прочее. Даже видео и аудио входит в понятие контент.
Таким образом, веб-страница
- это специальный документ, содержащий ряд мета-данных для отображения в браузере (и прочих технических вещей), а так же контент (текст, картинки и прочее), который можно просмотреть, прослушать и прочее.
Чаще всего веб-страницы разделяют по двум видам:
1. Статические веб-страницы
. Данное словосочетания периодически неправильно воспринимается пользователями и все из-за наличия слова "статический". Дело в том, что слово "статический" присутствует только из-за того, что весь этот специальный документ остается одним и тем же. При этом страничка может быть анимированный (блоки плавно ездят и прочие красивости), на ней может находится видео, аудио и прочие элементы медиа. Тем не менее, эти страницы представляют собой обычный неизменяемый html-документ , а так же сопутствующие файлы, которые загружаются браузером для корректного отображения веб-страницы (специальные файлыстилей CSS, позволяющие форматировать отображение контента, картинки, видео, аудио и прочее).
2. Динамические веб-страницы. В отличии от предыдущего типа веб-страниц, данный тип предусматривает, что содержимое одной и той же страницы может меняться. Например, страницы в форумах, где люди оставляют свои комментарии. Различные страницы поиска и многие другие примеры. Стоит отметить, что эти страницы так же представляют собой html-документ с сопутствующими файлами, однако их содержимое генерируется отдельным компьютером, который обычно называется сервер. Хотя бы раз, но, вероятно, слышали о таких языках как PHP, Asp.Net C#, Java и прочие. Именно с помощью них и осуществляется генерация страниц.
Так же страницы могут разделять по их назначению (приведу несколько вариантов):
1. Персональная страница
. Эта такая веб-страница, информация которой относится к некой персоне. При этом стоит понимать, что такая страница может быть как официальной, так и нет. Относится как к реальному человеку, так и к выдуманному. Например, в форумах есть страницы с названием "профиль пользователя" - это, по сути, и есть персональная страница. Если рассматривать еще пример, то вашу страничку в социальной сети так же можно назвать персональной.
2. Медиа страницы
. На подобного рода веб-страницах, обычно контент содержит какую-то медиа-информация в преобладающем виде. Например, различные галереи с фотографиями, сборники аудио или видео.
3. Информационная веб-страница
. В принципе, вообще любую веб-страницу можно назвать информационной, так как она содержит некий контент. Однако, обычно принято называть информационными те страницы, основным назначением которых является предоставление информации пользователю. При этом информация может быть связана с чем угодно. Например, эта статья - хороший пример информационной страницы.
4. Страница поиска
. Данная страница предназначена для того, чтобы вы, как пользователь сайта, могли осуществить поиск необходимой вам информации. Обычно такая страница содержит поля для ввода фраз, по которым будет осуществляться поиск, и различные элементы управления для настройки области поиска (например, искать по всему сайту или только в комментариях).
Здравствуйте, дорогие читатели! Пожалуй, у всех интернет пользователей во время прогулок по бескрайним просторам сети рано или поздно возникает желание оставить там что-то своё, донести людям своё мнение на те или иные вещи.
Кстати даже для начинающих пользователей здесь нет ничего сложного. В этой статье я расскажу вам, как создать web страницу. Вы узнаете самые азы этого процесса.
Что такое web-страница?
Гипертекстовый документ либо веб-страница представляет собой текстовый файл, размеченный тегами при помощи языка HTML (HyperText Markup Language).
Все представленные там объекты воссоздаются по написанным данным инструментом инструкциям, которые были присланы по его запросу сервером. Для внесения в документ разметок применяются теги, которые заключают в угловые скобки. Как правило, они парные, то есть имеется открывающий и закрывающий, а между некая информация.
К примеру, тег, говорящий браузеру, что ниже находится документ на HTML языке, имеет следующий вид: . А закрывающий, говорящий, что тут код заканчивается, выглядит так: . Таким образом, единственным отличием закрывающего тега от открывающего является наличие слэша после скобки открытия.
Данный язык разметки позволяет форматировать текст web-страницы, устанавливать на ней рисунки, графические элементы, создавать гипертекстовые ссылки, добавлять мультимедийные элементы, звукозаписи, скрипты (VBScript, JavaScript).
Чтобы узнать, что из себя представляет этот язык, вовсе не обязательно лезть в скучные учебники. Мне лично вполне достаточно было открыть мой браузер, и выбрать опцию «Посмотреть исходный код» (нажать правую кнопку мыши). Представленные в окне строчки кода и есть тот самый html-код. Именно этот код браузер в дальнейшем трансформирует в web-страницу.
Виды страниц в Интернете
Существует три типа веб-страниц:
Интерактивные
. Они включают в себя формы, сформированные на языках VBScript, JavaScript, РНР, при помощи которых сервер обменивается с пользователем данными;
Динамические
. Они написаны на языке ASP, РНР с разрешениями.aspx, .php. Данные страницы создаются движком либо особой программой, формирующей по пользовательским запросам web-страницу, используя при этом данные с сервера базы данных;
Статические
. К ним относятся статические файлы (рисунки, таблицы, набор текста и прочее), сформированные на языке разметки HTML.
Как создать?
Для создания веб-страниц используются редакторы html: FCKeditor, TinyMCE WYSIWYG Editor, Macromedia Dreamweaver, Microsoft FrontPage и прочие. Во всех этих редакторах имеется масса различных мастеров, дающих возможность с лёгкостью создавать web-сайты, а также шаблоны для страничек с дизайном и структурой. С их помощью можно быстро создать собственную web-страницу.
Но для любителей всё делать самому, можно воспользоваться и простым блокнотом, который по умолчанию уже установлен на любом компьютере.
Инструкция:
С помощью текстового редактора создаём файл. Это первое, что необходимо сделать. В блокноте создайте пустой файл под названием index.html. Именно эту страничку сперва ищет сервер, если вы вводите адрес ресурса без указания определённой web-страницы сайта.
Сформировать инструкцию. Помещённый между тегами и
код должен состоять из двух частей – тела документа и заголовка.
Делаем заголовок. Открывающие и закрывающие заголовочную часть теги:
и
. На этой «служебной» части страницы находятся данные для заголовка окна, описания, слов-ключей для поисковых систем, скриптов, описания стилей и прочее. Между этими словами прописываем заглавие окна страницы с помощью тегов:
и
. Ваша веб-страница к этому моменту должна иметь следующий вид:
заглавие
С заголовочной частью мы справились. Теперь необходимо разместить теги тела
и
. Между ними будут находиться инструкции документа: ссылки, тексты, картинки и т.д, то есть основной .
Итак, код в общем должен иметь следующий вид:
заглавие<TITLE>
</HEAD>
<BODY>
Тело веб-страницы
</BODY>
</HTML></p>
<p>Поздравляю! Теперь вы знаете, как создать свою собственную веб-страницу, хоть и самую простую! Только не забудьте сохранить документ, иначе все ваши труды пойдут прахом и придётся всё делать по новой.</p>
<blockquote>
<p>Сейчас существует множество визуальных <a href="/programmy-redaktory-html-html-reader-besplatnyi-html-redaktor.html">редакторов html</a> кода, благодаря которым можно создавать интернет страницы, абсолютно не зная язык <a href="/sozdanie-formy-obratnoi-svyazi-html-razmetka-pravilno.html">разметки html</a>. Но я считаю, что азы знать всё таки необходимо.</p>
</blockquote>
<p>Мой блог кстати создан на бесплатной платформе WordPress. Плачу только за домен и хостинг — это совсем немного. Хотите узнать больше? Вот ссылка.</p>
<p>С уважением! Абдуллин Руслан</p>
<p>МОСКОВСКИЙ ИНСТИТУТ ОТКРЫТОГО ОБРАЗОВАНИЯ<br>
КАФЕДРА МАТЕРИАЛЬНЫХ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ</p>
<h2>Материалы дистанционного курса<br>"Информационные технологии и образование"</h2>
<p>Полилова Татьяна Алексеевна<br>
polilova@online.ru</p>
<h2>Как создать web-страницу</h2>
<p>Самый простой способ создать страницу для размещения в Интернете - воспользоваться инструментами <a href="/onlyoffice-ili-libreoffice-vybiraem-luchshuyu-alternativu-microsoft-sovmestimost-ofisnyh.html">пакета Microsoft</a> Office. Последние версии этого пакета предоставляют возможность преобразовать обычный документ в HTML-формат с неплохим качеством кода.</p>
<h3>Возможности Word</h3>
<p>Подготовленный в текстовом редакторе <a href="/kak-sdelat-iz-dokumenta-word-pdf-kak-preobrazovat-dokument-word-doc-v-pdf-fail-a.html">Word документ</a> можно легко преобразовать в web-страницу. Однако она будет выглядеть не столь привлекательно, как хотелось бы, если не предпринять дополнительные шаги. Рассмотрим несколько примеров.</p>
<p>Возьмем некоторый текст.</p>
<p>Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню - позиция Файл). Тогда html-представление документа будет иметь вид:</p>
<p>Первое, что бросается в глаза - текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.</p>
<h4>Использование таблицы</h4>
<p>Можно в этом случае поступить совсем просто: завести в исходном документе таблицу и поместить в нее нужный текст. В таблице можно задать рамку. Тогда вид web-страницы намного улучшится, и в браузере страница будет выглядеть привлекательнее.</p>
<h4>Фон и стиль</h4>
<p>Желательно выбрать не слишком <a href="/kak-sdelat-fon-yarche-v-fotoshope-kak-sdelat-cvet-na-fotografii.html">яркий фон</a>, чтобы на нем хорошо читался текст. Таким фоном в предложенном списке является, например, Рисовая бумага. Вид страницы заметно преобразился:</p>
<h4>Вставка картинки</h4>
<p>В документ можно добавить картинку, взяв ее, к примеру, из коллекции клипов.</p>
<p>Нужно <a href="/funkcii-kontekstnogo-menyu-chto-takoe-kontekstnoe-menyu-kak-izmenit.html">правой кнопкой</a> мыши щелкнуть на картинку, выполнить операцию копирования, и далее в документе указать место для картинки и выполнить операцию вставки скопированного объекта.</p>
<p>Если вы вставляете картинку внутрь абзаца, то лучше изменить свойства картинки, задав обтекание текста вокруг картинки (нужно выбрать позицию главного меню Формат и далее Рисунок):</p>
<p>В документе при этом не будет создаваться лишнего пустого пространства.</p>
<p>Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование - Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.</p>
<p>Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.</p>
<h4>Бегущая строка</h4>
<p>Word позволяет внести на web-страницу и другие оформительские элементы, например "бегущую строку". Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню - позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает <a href="/kak-izmenit-fon-v-yandekse-poiskovike-startovoe-okno-na-telefone.html">дополнительное окно</a> для задания текста параметров бегущей строки.</p>
<p>Как обычно, в строке можно поменять шрифт и атрибуты: размер шрифта и цвет символов. Web-страница будет выглядеть на экране следующим образом:</p>
<p>Мы привели пример лишь очень скромного набора дизайнерских приемов, с помощью которых можно оформить web-страницу на основе имеющегося документа в формате Word.</p>
<h4>Использование шаблонов оформления</h4>
<p>Если вы начинаете создавать страницу с нуля, то можно воспользоваться мастером веб-страниц, который в диалоге будет помогать формировать документ. Или же можно использовать <a href="/gotovye-lendingi-shablony-landing-page.html">готовый шаблон</a> оформления страницы, выбрав его из достаточно представительного набора. Для этого нужно в операции Создать выбрать режим Создание с помощью шаблона и далее <a href="/chto-vybrat-vordpress-ili-dzhumla-temy-i-shablony-chto-obshchego-u-wordpress-joomla-i.html">Общие шаблоны</a>. На экране появится форма, в которой нужно выбрать закладку Веб-страницы:</p>
<p>Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат - Тема.</p>
<h4>Создание гиперссылок и закладок</h4>
<p>Последний вопрос, который мы планируем рассмотреть в <a href="/tehnologiya-atm-znachenie-rasshifrovka-abbreviatury-sposob-peredachi.html">данном разделе</a> - создание гиперссылок в документе.</p>
<p>Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка - Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.</p>
<p>Здесь следует помнить, что адрес выбранного файла на вашем компьютере может измениться, когда вы будете формировать свой сайт. Поэтому неявный способ задания адреса подходит только в том случае, если структура вашей папки на компьютере и на сайте Интернета совпадают.</p>
<p>Если гиперссылка должна ссылаться на другую часть этого же документа, то предварительно нужно вставить закладку в начале нужного фрагмента. Нужно выполнить операцию Вставить - Закладка, и в появившейся на экране форме ввести имя закладки.</p>
<h3>Веб-презентация в PowerPoint</h3>
<p>Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.</p>
<p>Вы можете открыть подготовленную презентацию и выполнить операции (из главного меню) Файл - Сохранить как веб-страницу. Как обычно нужно задать имя веб-презентации в открывшемся окне. В результате выполнения преобразования презентации будет создан файл с <a href="/neverno-zadano-imya-papki-karta-pamyati-reshenie-oshibki-usb-nakopitelya.html">заданным именем</a> и расширением.htm и одноименная папка с дополнительными материалами.</p>
<p>Если теперь из браузера вызвать веб-презентацию, то на экране можно увидеть результат преобразования.</p>
<p>В нижней части экрана создается специальная строка, где располагаются кнопки перехода к слайдам и кнопки для задания различных параметров просмотра презентаций.</p>
<p>Презентацию можно просматривать с показом структуры слайдов. Но если эта информацию не представляет интереса, то зарезервированное для показа структуры поле на экране можно убрать (операция развернуть/свернуть структуру в нижней строке).</p>
<p>С помощью кнопки Показ сладов можно просматривать слайды на полном экране.</p>
<h4>Создание гиперссылок</h4>
<p>В презентации можно создать гиперссылки, которые связывают объекты на слайде, например, с другими слайдами. Тем самым можно создать структуру гипермедиа, которая естественным образом будет соответствовать идеологии Интернета. Поясним этот прием на примере.</p>
<p>Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий. Создадим новый слайд - оглавление коллекции.</p>
<p>Если новый слайд получился не первый в последовательности, то нужно выйти в режим сортировщика слайдов (из главного меню с помощью операций Вид - Сортировщик слайдов) и перетащить новый слайд в начало коллекции.</p>
<p>На новый слайд поместим уменьшенные копии всех фотографий. Проще всего это сделать самым прямолинейным способом: на пустой слайд последовательно скопировать все фотографии коллекции, уменьшить их размер и разместить, например, в две линии. Картинки можно будет в дальнейшем оформить рамками с тенью. На слайд-оглавление можно добавить название презентации. Вид презентации в режиме Сортировщик слайдов представлен ниже:</p>
<p>Перейдем в <a href="/kak-poschitat-skolko-elektroenergii-potreblyaet-kompyuter.html">обычный режим</a> просмотра слайдов (команды Вид и далее Обычный). На слайде-оглавлении выделим фотографию и выполним команду Вставка - Гиперссылка. В открывшемся окне зададим переход по гиперссылке - номер слайда с <a href="/kak-sdelat-bolshe-razmer-fotografii-na-kompyutere-kak.html">большой фотографией</a>, с которой был скопирован меньший образец для оглавления.</p>
<p>Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.</p>
<p>Если мы теперь запустим нашу презентацию на выполнение, то она будет работать как структура гипермедиа: при щелчке по маленькой фотографии будет выполняться переход на слайд с фотографией в увеличенном размере.</p>
<p>Осталось совсем немного усовершенствовать нашу структуру. Добавим на каждый слайд с фотографией в его верхнюю <a href="/vhod-v-lichnyi-kabinet-alpari-i-ego-obzor-v-levoi-chasti-raspolozheno.html">левую часть</a> стрелку (Автофигура на панели инструментов Рисование), и сделаем из этой стрелки гиперссылку, выполняющую переход на слайд-оглавление. Теперь движение по созданной нами структуре гипермедиа станет "двусторонним": из оглавления можно перейти на слайды с фотографиями, и с любого слайда вернуться на оглавление.</p>
<p>После выполнения преобразования презентации в веб-формат наша первая страница будет иметь вид:</p>
<p>Щелчок по картинке из меню вызовет переход к слайду с большой фотографией, а щелчок по стрелке (в левой верхней части слайда) обеспечит переход на страницу с оглавлением коллекции.</p>
<p>Здравствуйте, уважаемые читатели блога сайт. Слово «веб» уже давно стало нарицательным и очень часто оно используется как синоним . Но что же оно означает на самом деле? , Веб 2.0, web-поиск, веб-сайт, web-страница, веб-браузер, вебмастер и прочая-прочая-прочая включающее это слово?</p><p>Естественно, что все эти слова имеют прямое отношение к интернету, но что они конкретно означают в двух словах не скажешь. Как мне кажется, лучше начать по порядку, чтобы в голове не образовывался сумбур. Не бойтесь, «много букв» не будет, но каждому термину все равно придется посвятить пару абзацев. А как вы думали? Высокие технологии — это дело такое...</p><h2>Что такое веб и онлайн? Чем отличается Web 2.0 от 1.0?</h2><p>Очень часто слово «веб» используют еще и вместо слова «онлайн» (только сейчас, начиная писать эту заметку, поймал себя на этой мысли). Люди добавляют к своем запросу слово веб или онлайн имея в виду, что хотят найти что-то доступное через браузер (например, пишут « » или « »).</p><p>Т.е." Web" и «онлайн» по сути тут выступают некими синонимами и означают возможность получения чего-либо через активное интернет-подключение. Почитать книгу онлайн, посмотреть фильм, послушать музыку через веб, пообщаться или поиграть через сеть — это все характеризуется словами «веб» или «онлайн». Кстати, сейчас люди все меньше покупают персональных компьютеров, но все больше <a href="/izvestnaya-amerikanskaya-marka-kachestvennoi-nad-zhnoi-funkcionalnoi-navigacionnoi-mobilnoi-tehniki.html">мобильных гаджетов</a>, основным преимуществом которых является <a href="/pribor-dlya-izmereniya-sily-toka-kak-izmerit-silu-toka-multimetrom.html">постоянное подключение</a> к сети.</p><p>Да и вообще, люди все меньше используют стационарные программы и все больше веб-приложения (онлайн-сервисы) с <a href="/kak-uznat-sistemnye-specializirovannye-programmy-dlya-prosmotra-harakteristik.html">аналогичными характеристиками</a>. Например, я уже писал про , про и прочие . А ведь когда-то этого не было. Даже трудно представить как жили люди до того, .</p><blockquote><p>Так <b>что же такое веб
</b>? По сути, это и и все то, о чем я уже писал в приведенной по ссылке статье. Получается, что это совокупность миллионов веб-сайтов, которые расположены на веб-серверах (аналогов <a href="/kak-skachat-i-ustanovit-android-na-obychnyi-kompyuter-podrobnaya-instrukciya-vs.html">обычных компьютеров</a>, но с уклоном под выполнение определенных задач — нет монитора, много <a href="/podderzhivaemaya-chastota-operativnoi-pamyati-vybor-operativnoi-pamyati.html">оперативной памяти</a> и места на <a href="/kak-podklyuchit-vtoroi-zhestkii-disk-sata-kak-podklyuchit-dva-zhestkih-diska.html">жестких дисках</a>). Работают сервера в режиме 24 на 7 и доступны из любой точки мира благодаря связи через сеть интернет.</p>
</blockquote><p>Но WEB (то, что мы называем сейчас WWW) появился значительно позже самого интернета (физической возможности соединения компьютеров в сеть). Только в конце восьмидесятых Тим Бернерс-Ли придумал и создал все необходимые для этого инструменты, а через несколько лет появился первый графический веб-браузер. Вот именно с середины девяностых и можно начинать отсчет эры всемирного веба — онлайн взаимодействия миллионов компьютеров пользователей и веб-серверов.</p><p>Принято считать, что тогда была эра так называемого <b>«Веб 1.0»
</b>, когда властвовали простенькие без всяких намеков на интерактивность. Последнее же (интерактивность — формируемый посетителями) позволяли в какой-то мере реализовать лишь форумы, гостевые доски и чаты.</p><p>Причем все это было сделано довольно топорно (вычурные цвета, фон в виде текстуры), убого (помните информеры погоды или валюты чуть ли не на всех сайтах), без <a href="/css-nerazryvnyi-probel-ispolzovanie-probelnyh-simvolov.html">использования CSS</a> и Джава-скрипта.</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/aport-1999.png' width="100%" loading=lazy></p><p>С другой стороны <b>все <a href="/web-dizainer-chto-sdavat-nedostatki-professii-web-dizainer-kak.html">недостатки WEB</a> 1.0
</b> были обусловлены , которыми в то время обладали веб-пользователи (чаще всего это был диал-ап, со скорость загрузки в 5 мегабайт в час!). Современные навороченные сайты на таких скоростях интернета грузились бы по полчаса, а возможности браузеров и ПК того времени просто не позволили бы отобразить большую часть их функционала. В общем, все соответствовало своему времени и техническим возможностям.</p><blockquote><p>Оптимальным решением являются <a href="/poiskovye-mashiny-poiskovye-mashiny-i-katalogi.html">поисковые машины</a>. довольно прост — они сканируют все сайты интернета, изучают содержимое всех их веб-страниц и выдают в ответ на запрос пользователя веб-поиска наиболее подходящий ответ (в виде списка наиболее подходящих страниц, отсортированного по степени их релевантности запросу).</p>
</blockquote><p>Однако, то что просто на словах, на деле осуществить очень сложно. Вы представьте только, сколько нужно задействовать веб-серверов, чтобы хранить на них копию всего интернета? А ведь эти данные еще нужно обработать и выдавать ответы на вопросы в реальном времени. Не даром самым крупным сборщиком компьютеров является компания, которая их не продает. Догадываетесь какая? Гугл, конечно же. Они все эти компьютеры (сервера) используют для реализации возможности веб-поиска. О, как!</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/26-04-201421-45-12.png' height="993" width="651" loading=lazy></p><p>Это огромные деньги, и они <b>позволяют нам с вами осуществлять веб-поиск бесплатно
</b>, пусть и с просмотром рекламы.</p><h2>Веб-сайты, страницы и web-сервера</h2><p>И файлы движка, и таблицы баз данных опять же хранятся и подгружаются по запросу пользователя сайта <b>с веб-сервера
</b>, расположенного у хостера (даже сейчас , где можно размещать сайты на движках без оплаты и без рекламы).</p><p>Причем веб-сервер не всегда представляет из себя <a href="/kak-predstavit-chislo-dvoichnom-vide-predstavlenie-chisel-v-kompyutere.html">целый компьютер</a>, выделенный в ваше полное распоряжение (это так называемый выделенный web-сервер). Чаще всего вы получаете в свое распоряжение (как на <a href="/kak-ne-zaputatsya-i-naiti-luchshii-hostinga-dlya-wordpress-vybiraem.html">платном хостинге</a>, так и на бесплатном) лишь его часть (часть <a href="/kak-podklyuchit-drugoi-zhestkii-disk-kak-podklyuchit-zhestkii-disk-k.html">жесткого диска</a>, часть оперативной памяти и часть процессорного времени). Поэтому веб-сервером чаще называют именно <a href="/vybor-sredy-razrabotki-po-razrabotka-programmnogo-kompleksa-avtomatizacii.html">программную среду</a>, которая позволяет функционировать вашему веб-сайту.</p><p><b>Поднять веб-сервер
</b> можно даже на своем собственно домашнем ПК (в этом вам помогут программы и ). Это позволит вам работать над созданием веб-сайтов без предоставления к ним доступа из интернета. А когда все отладите и настроите, можно будет уже перенести web-проект на реальный сервер, расположенный на платном или бесплатном хостинге.</p><p>Ну вот, где-то так получается... Если что не понятно, то спрашивайте — постараюсь ответить.</p> <p>Удачи вам! До скорых встреч на страницах блога сайт</p><blockquote>посмотреть еще ролики можно перейдя на
</blockquote>");"><br><img src='https://i2.wp.com/ktonanovenkogo.ru/wp-content/uploads/video/image/fakt-o-chelovek-tele.jpg' width="100%" loading=lazy><p>Вам может быть интересно</p><p>Host - что такое хост и чем он отличается от Hosts и хостинга
</span> <br><img src='https://i2.wp.com/ktonanovenkogo.ru/wp-content/uploads/2015/06/sait-chto-eto-takoe.jpeg' width="100%" loading=lazy><span>Сайт - что это такое и какие они бывают?
</span> <br><img src='https://i0.wp.com/ktonanovenkogo.ru/wp-content/uploads/2016/11/vots-app-veb.jpg' width="100%" loading=lazy><span>Как установить Ватсап на компьютер - версия для ПК и <a href="/mozhno-li-ustanovit-whatsapp-na-kompyuter-kak-ustanovit-vatsap.html">использование WhatsApp</a> <a href="/dr-web-cureit-poslednyaya-versiya-dr-web-onlain-proverka-na-virusy.html">Web онлайн</a> (через веб-браузер)
</span> <br><img src='https://i1.wp.com/ktonanovenkogo.ru/wp-content/uploads/2016/01/inkognito.jpg' width="100%" loading=lazy><span>Инкогнито - что это такое и как включить режим инкогнито в Яндекс браузере и Гугл Хроме
</p>
<p>Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.</p><h2>Что такое HTML и CSS?</h2><p>HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.</p><p>Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.</p><p>При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.</p><h2>Основные термины HTML</h2><p>Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML - элементы, теги и атрибуты.</p><h3>Элементы</h3><p>Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с <h1>
до <h6>
) и абзацев (определены как <p>
); в список можно включить элементы <a>
, <div>
, , <span><strong>
и <em>
и многие другие.</p><p>Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:</p><h3>Теги</h3><p>Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.</p><p>Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, <div>
.</p><p>Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, </div>
.</p><p>Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег <a>
и закрывающий тег </a>
. Что находится между этими двумя тегами будет содержимым ссылки.</p><p>Так, теги ссылок будут выглядеть примерно так:</p><p>
<a>...</a>
</p><h3>Атрибуты</h3><p>Атрибуты являются свойствами, применяемыми для предоставления <a href="/otklyuchit-bazovyi-mts-tarif-bazovyi-mts-opisanie-dopolnitelnaya.html">дополнительной информации</a> об элементе. Наиболее распространённые атрибуты включают в себя атрибут id
, который идентифицирует элемент; атрибут class
, который классифицирует элемент; атрибут src
, который определяет источник встраиваемого содержимого; и атрибут href
, который указывает ссылку на связанный ресурс.</p><p>Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент <a>
с атрибутом href
будет выглядеть следующим образом:</p><p>
Shay Howe
</p><h3>Демонстрация основных терминов HTML</h3><p>Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега <a>
и закрывающего тега </a>
охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com"
в открывающем теге.</p><p>Рис. 1.01. <a href="/tekstovye-redaktory-s-podsvetkoi-sintaksisa-kakoi-luchshii.html">Синтаксис HTML</a> в виде схемы включает элемент, атрибут и тег</p><p>Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу.</p><h2>Настройка структуры документа HTML</h2><p>HTML-документы представляют собой простые <a href="/luchshaya-programma-dlya-tekstovyh-dokumentov-tekstovye.html">текстовые документы</a>, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и <a href="/plaginy-dlya-php-sublime-text-3-plaginy-ih-ustanovka-i-nastroika-dlya-sublime.html">Sublime Text</a>. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.</p><p>Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: <!DOCTYPE html>
, <html>
, <head>
и <body>
.</p><p>Объявление <a href="/vvedenie-v-xml-dtd-opredelenie-tipa-dokumenta-dtd.html">типа документа</a> или <!DOCTYPE html>
находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать <a href="/nomer-poslednei-versii-nalogoplatelshchik-yul-poslednyaya-versiya-nalogoplatelshchik-yul.html">последнюю версию</a> HTML, наш тип документа будет просто <!DOCTYPE html>
. После этого идёт элемент <html>
означающий начало документа.</p><p>Внутри <html>
элемент <head>
определяет <a href="/chto-znachit-znak-luny-na-aifone-chto-oznachayut-znachki-v-verhnei-chasti-ekrana-iphone.html">верхнюю часть</a> документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента <head>
не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.</p><p>Всё видимое содержимое веб-страницы будет находиться в элементе <body>
. Структура типичного HTML-документа выглядит следующим образом:</p><p>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Привет, мир!
Привет, мир!
Это веб-страница.
Демонстрация структуры 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://i0.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>При добавлении элементов на веб-страницу они могут быть оформлены с <a href="/krugovoi-indikator-processa-na-css-razrabotka-gibkih-i-podderzhivaemyh.html">помощью CSS</a>. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.</p><p>Селекторы, как правило, связаны со значением атрибута, вроде значения id
или class
или именем элемента, вроде <h1>
или <р>
.</p><p>В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <span><p>P { ... }
</p><h3>Свойства</h3><p>Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри <a href="/kak-v-vorde-postavit-bolshuyu-figurnuyu-skobku-vse-sposoby-kak-v.html">фигурных скобок</a> {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как 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://i2.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy></p><p>Рис. 1.03. Структура <a href="/primery-border-css-sintaksis-css-border-primery-s-razlichnymi-granicami-ramok-css.html">синтаксиса CSS</a> включает селектор, свойства и значения</p><p>Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.</p><h2>Работа с селекторами</h2><p>Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.</p><h3>Селекторы типа</h3><p>Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div>
мы должны использовать селектор div
. <a href="/vyidet-sleduyushchii-ios-funkciya-avtozapolneniya-kodov-iz-sms-siri-nauchilas.html">Следующий код</a> показывает селектор типа для элементов <div>
, а также соответствующий HTML.</p><p>Div { ... }
</p><p>
<div>...</div>
<div>...</div>
</p><h3>Классы</h3><p>Классы позволяют выбрать элемент на основе значения атрибута class
. Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.</p><p>Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class
для нескольких элементов.</p><p>В <a href="/css-pervyi-klassa---selektor-css-dlya-pervogo-elementa-s-klassom-gde.html">CSS классы</a> обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение 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. Хорошей практикой является включение всех наших стилей в одном <a href="/kak-skryt-faily-na-vneshnem-zhestkom-diske-kak-nadezhno-skryt-papku-ili-fail.html">внешнем файле</a>, на который есть указатель внутри элемента <head>
нашего HTML-документа. Использование одного <a href="/pravila-css-dlya-nastroiki-vneshnego-vida-spiska-na-html-stranice-svoistvo.html">внешнего CSS</a> позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.</p><h3>Другие варианты добавления CSS</h3><p>Другие варианты <a href="/podklyuchenie-css-k-html-dokumentu-kak-privyazat-css-stili-k-html-kodu.html">подключения CSS</a> включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.</p><p>Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.</p><p>Внутри элемента <head>
применяется элемент <link>
, который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем <a href="/kak-pravilno-ispolzovat-atribut-rel-nofollow---sekrety.html">атрибут rel</a>
со <a href="/teg-link-opredelyaet-cvet-ssylka-na-pochtovyi-yashchik-atribut-rel-i-ego.html">значением stylesheet</a>
для указания их отношений. Кроме того, атрибут 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>Каждый браузер имеет свои собственные стили по умолчанию для <a href="/h-sovety-i-rekomendacii-po-rabote-s-unity3d-perevod-prisvoenie-im-n.html">различных элементов</a>. То, как <a href="/kak-uznat-nesohranennye-paroli-v-google-chrome-gde-v-google-chrome-hranyatsya-paroli--.html">Google Chrome</a> отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает <a href="/kak-izmenit-nachalnuyu-stranicu-v-internet-explorer-vosstanovlenie-internet.html">Internet Explorer</a>. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.</p><p>Сброс CSS берёт все основные элементы HTML с <a href="/kaskadnyh-tablic-stilei-selektor-strukturnyh-psevdoklassov-tipa-i.html">заданным стилем</a> и обеспечивает <a href="/populyarnye-kanaly-v-instagram-kak-krasivo-oformit-profil-v-instagram-v-edinom.html">единый стиль</a> для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все <a href="/kak-postavit-parol-na-raznye-brauzery-skryvaem-sekrety-brauzera-ot.html">разные браузеры</a> станут работать с общей точки отсчёта.</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 давайте создадим <a href="/pochemu-postoyanno-otkryvaetsya-yandeks-brauzer-v-novom-okne-papki-otkryvayutsya.html">новую папку</a> с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.</li><li>Используя текстовый редактор создадим <a href="/otkryt-fail-v-novom-okne-html-chto-delat-esli-kazhdaya-papka-otkryvaetsya-v.html">новый файл</a> с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.</li><p>Просматривая файл index.html в браузере мы можем видеть, что элементы <h1>
и <p>Уже содержат стиль по умолчанию. В частности, у них задан <a href="/failovye-sistemy-sravnenie-sekrety-i-unikalnye-osobennosti-bolshii.html">уникальный размер</a> шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла 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, вам станет гораздо комфортнее работать с этими двумя языками.
