3. Разработка Web-сайта посвященного компании "Марс"
3.1 Создание новой web-страницы (шаблона)
3.2 Ввод и форматирование текста
3.3 Работа с графикой
3.4 Создание гиперссылок
Заключение
Список использованной литературы
Введение
Internet развивается довольно стремительно. Быстро растет количество изданий, посвященных Сети, что предвещает широкое ее распространение даже в далеких от техники областях. Internet превращается из большой игрушки для интеллектуалов в полноценный источник разнообразной полезной информации для любой категории пользователей.
Через десять лет, по прогнозам специалистов, около 50 процентов семей (безусловно, пока лишь в развитых странах) будут использовать его ежедневно. Телевидение и радиоприемники не будут заменены компьютерами, но будут иметь мощный процессор, большую память и фактически сами станут в некотором отношении компьютерами.
Это будет время, когда любой человек, владеющий компьютером, сможет "скачать" с его помощью статьи, иллюстрации, видео- или аудиоинформацию по любой интересующей его теме. Он сможет получить эту информацию тогда, когда он этого пожелает. Через какое-то время системы искусственного интеллекта – параллельный машинный перевод, а также идентификация и распознавание голоса сломают последние национальные и языковые барьеры и сделают возможным свободный транснациональный обмен информацией.
Каждый из нас уже сейчас может сделать свой вклад в развитие Internet. Для этого достаточно создать свой веб-сайт и разместить его в Сети.
Сегодня, путешествуя по Internet, можно найти много очень хорошо выполненных сайтов, которые быстро загружаются, привлекательны на вид, имеют четко разграниченную по разделам информацию и удобные функции навигации. Такие сайты просто приглашают вас посетить их, расслабиться, задержаться на некоторое время, развлечься и узнать что-то новое.
Если вы задерживаетесь на каком-либо сайте на длительное время и даже не осознаете этого, то, по всей видимости, такой сайт очень хорошо продуман. Вернитесь обратно и попробуйте осмыслить полную картину. Можете ли вы увидеть структуру, организацию? Легко ли воспринимается информация? Понимание движения информационных потоков - это первый шаг в создании функционального, удобного в работе сайта. Если вы поймете, как работает эта концепция, и примените ее при создании собственного сайта, то вы уже тем самым опередите большинство других разработчиков.
Тема моей курсовой работы: Разработка Web-сайта посвященного компании "Марс".
Объект исследования: Web-сайт салона ООО Марс.
Предмет – создание структуры Web-сайта.
Цель - создание Web-сайта компании "Марс".
Для этого необходимо решить следующие частные задачи:
– ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке;
– изучить основные понятия и программный инструментарий, применяемый для разработки и создания Web-сайтов;
– выявить и учесть методы и способы представления на Web-страницах различных видов информации (текстов и изображений);
1. Базовые знания необходимые для создания Web-сайта
1.1 Web-страницы и Web-сайты
Что такое Web-страница"?
Ответить на этот вопрос могут многие. Это интернет-документ, предназначенный для распространения через Интернет по средством сервиса WWW. А если уж говорить по-простонародному, это то, что показывает в своем окне программа-клиент для просмотра Web-страниц - Web-обозреватель.
С технической точки зрения Web-страница - это обычный текстовый файл, который можно создать в любом текстовом редакторе, том же Блокноте, стандартно поставляемом в составе Windows. Этот файл содержит собственно текст Web-страницы и различные команды форматирования этого самого текста. Команды форматирования называются тегами,
а описывает их особый язык HTML (HyperText Markup Language, язык гипертекстовой разметки).
Но как Web-обозреватель дает понять Web-серверу, какая Web-страница ему нужна? Очень просто - он пересылает в составе клиентского запроса имя и полный путь файла, в котором она сохранена. Скажем, вот так: http://comp45.buh.department.ru/somepage.html
Этот запрос заставит Web-сервер извлечь и отправить Web-обозревателю файл somepage.html.
А что такое Web-сайт?
Это набор Web-страниц, подчиненных общей тематике и объединенных в единое целое. Web-сайт также сохраняется на жестких дисках серверного компьютера. Технических отличий у Web-страницы и Web-сайта не слишком много.
А теперь самое время прояснить несколько, опять же, чисто технических моментов, связанных с работой Web-обозревателя и Web-сервера. Прежде всего, для хранения всех файлов, составляющих сайт (или Web-страницу, если рассматривать ее как "вырожденный" случай сайта), на диске серверного компьютера создается особая папка, называемая корневой.
Все файлы сайта должны находиться только в этой папке, без малейших исключений. Все, что не находится в ней, автоматически исключается Web-сервером из состава сайта.
Корневую папку сайта на серверном компьютере создает человек, занимающийся настройкой и обслуживанием программы Web-сервера (или же всего серверного компьютера),- администратор.
При этом он заносит полный путь этой папки в настройки Web-сервера, чтобы последний смог найти ее на диске. После этого корневая папка может быть заполнена файлами нового сайта.
Когда Web-обозреватель присылает Web-серверу запрос вида: http://wvw.somesite.ru/somepage.html
Web-сервер ищет файл somepage.html в корневой папке сайта и, если находит, отправляет его Web-обозревателю. Если же такого файла нет или Web-сервер почему-то не может его загрузить, он отправляет Web-обозревателю сообщение об ошибке.
Язык разметки гипертекстовых страниц (HTML – Hypertext Markup Language) представляет собой язык, разработанный специально для создания Web-документов. Он определяет синтаксис и размещение специальных инструкций (тегов), которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Он также используется для создания ссылок на другие документы, локальные или сетевые, например, находящиеся в сети Интернет.
Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium). Стандарты, спецификации и проекты новых предложений можно найти на сайте http://www.3w.org/. В настоящее время действует спецификация HTML 4.0, поддержка которой со стороны основных браузеров постоянно растет.
На практике на стандарт HTML большое влияние оказывает наличие тегов, предложенных и поддерживаемых наиболее известными браузерами, такими как Microsoft Internet Explorer и Netscape Navigator. Эти теги в данный момент могут как входить, так и не входить в состав действующей спецификации HTML.
Информации о тегах HTML Compendium (краткое руководство по HTML) созданно Ron Woodall. Компендиум содержит список тегов и их атрибутов в алфавитном порядке, а также обновленную информацию о поддержке каждого из них со стороны браузеров. Компендиум HTML находится на сайте http://www.htmlcompendium.org.
1.3
Web-редактор
Macromedia Dreamweaver
Язык HTML, несмотря на столь мудреное название, весьма прост. И написать с его помощью простенькую Web-страничку с парой абзацев текста можно буквально за пять минут, причем большая часть этого времени будет потрачена на набор самого текста этой страницы, а не тегов HTML. Так в чем же проблема?
Но многие его не знают язык HTML, более того - не хотят его изучать или не имеют на это времени. Но создавать Web-страницы хотят. Поэтому специально для них программисты написали множество программ, предназначенных для создания Web-страниц, - так называемые Web-редакторы. С помощью таких программ можно создавать документы, как в Microsoft Word, т.е. просто и удобно.
Одна из таких программ написана разработчиками из фирмы Macromedia и называется Macromedia Dreamweaver. Первая ее версия вышла еще в далеком 1998 году; в настоящее же время доступна версия 8. Именно с Dreamweaver мы и будем работать в процессе написания курсовой работы.
Dreamweaver - типичнейший представитель визуальных Web-редакторов,
работающих по принципу WYSIWYG (What You See Is What You Get, "что ты видишь, то ты и получишь"). При этом пользователь форматирует текст и в окне редактора сразу же видит результаты своих трудов. Существуют также и невизуалъные Web-редакторы
(они же - HTML-редакторы),
основанные на другом принципе. Они работают непосредственно с самим HTML-кодом, предоставляя при этом пользователю различные дополнительные возможности: быстрая вставка тегов, удобное задание их параметров, набор предопределенных шаблонов для создания стандартных элементов Web-страницы и пр. В этом смысле они похожи на Блокнот, но значительно расширенный.
Здравствуйте, уважаемые читатели блога. С этой статьи мы начнем изучать основы языка HTML.
Вам скорей всего уже известно, что основным языком Internet-а является язык гипертекстовой разметки HTML (HyperText Markup Language)
. В этой статье мы узнаем базовые понятия HTML и научимся создавать простейшие WEB-страницы.
Начнем с самого главного, рассмотрим как работает сама всемирная паутина — Internet
. Для получения веб-страниц, вы создаете файлы, написанные на языке HTML, и помещаете их на веб-сервер. После этого любой браузер установленный на устройстве с доступом в Интернет, будь то компьютер, телефон или планшет, может отыскать ваши веб-страницы.
Веб-сервер
— это обычный компьютер со специальным программным обеспечением, имеющий доступ в Интернет. Он непрерывно ожидает запросов от браузеров на веб-страницы, изображения, аудио- и видео-файлы. Получив запрос на один из таких ресурсов, сервер ищет его и высылает браузеру.
Браузер
— это специальная программа, предназначенная для просмотра веб-сайтов, например Internet Explorer. При помощи браузера вы бродите по сайтам, щелкая по ссылкам. Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы. С помощью команд — тегов
, HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например
,
,
.
Срочно нужен интернет-магазин, а времени на изучение HTML, CSS, PHP и других технологий нет. Тогда просто можете арендовать интернет магазин с полностью реализованным функционалом и оптимизацией под поисковые системы.
Язык HTML и его теги
Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C. Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org
. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.
Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор. Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad)
(вообще в дальнейшем для редактирования html-кода я советую использовать ). Найти его можно: «Пуск->Все программы->Стандартные->Блокнот». Давайте создадим страничку об автомобилях. Итак, откроем Блокнот и наберем в нем текст:
Пример Web-страницы
Сайт об автомобилях.
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях. На сайте есть описания многих импортных и отечественных автомобилей.
Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:
Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:
Таким образом, мы создали Web-страницу в Блокноте, хоть и немного невзрачную, но уже содержащую большой заголовок и абзац текста, который автоматически разбивается на строки и содержит фрагмент, выделенный полужирным шрифтом.
Что такое тег?
Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент:
Сайт об автомобилях
.
Здесь мы видим текст, который отображается на странице как заголовок, заключенный в теги
и
. Что же такое тег в html языке?
Тег HTML
- это обычные слова и символы, заключенные в угловые скобки, например
,
,
. Так тег
является открывающим тегом, тег
закрывающим тегом, а текст между ними называется содержимым тега. Также тег
и тег
называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще элементы состоящие из одного открывающего тега:
Так парный тег
определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы
—
.
Элементы бывают блочные и строчные (текстовые). Блочные элементыосуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы
осуществляют непосредственное форматирование текста или логическое форматирование. Элемент
является блочным элементом.
На этом у меня все!!! До встречи в следующих постах!
Приветствую вас, уважаемые читатели 🙂
В одной из первых статей мы познакомились с существующими , и я вам пообещал в дальнейших публикациях рассмотреть каждый из них более подробно.
Я уже начал готовить статьи из этого цикла, но достаточно быстро понял, что в каждой из них будет присутствовать общий блок информации о структуре страницы сайта
.
Поэтому я решил посвятить данному вопросу отдельную статью, чтобы в дальнейшем не возникало вопросов по рассматриваемым сегодня нюансам.
Структура страницы сайта — терминология
Для начала, как и при рассмотре , давайте разберёмся с терминами.
Структура веб-ресурса
представляет собой его план. В свою очередь, она разделяется на внутреннюю и внешнюю.
Внутренняя структура сайта определяет, из каких страниц будет состоять веб-проект и порядок их вложенности (категория-подкатегория-сущность).
В то время как внешняя структура сайта предусматривает вид отдельных страниц в зависимости от размещаемой на них информации. То есть внешняя структура – это как раз и есть структура страницы сайта.
Она, как правило, однородна для всего ресурса (за исключением некоторых страниц на усмотрение разработчиков). Именно поэтому я и решил рассмотреть её в этой статье, дабы избежать будущих повторений.
Остальные статьи данного цикла будут, как Вы понимаете, посвящены внутренней структуре сайтов различных типов.
Перед тем, как мы приступим к обзору, следует также отметить, что понятие структуры и дизайна страницы сайта неразрывно связаны, а точнее, если верить Wikipedia, — это одно и то же 🙂 Потому как веб-дизайнеры как раз и занимаются проектированием внешнего вида элементов интерфейса, а также их расположением на страницах сайта.
Даже если вы решили заказать сайт и читаете эти строки только в целях самообразования — ваше время не будет потрачено зря 😉
Рассмотренные примеры структуры страницы сайта можно успешно применять при формировании инструкций и пожеланий разработчикам вашего продукта.
А это кстати, немаловажно, т.к. благодаря чёткой постановке задачи можно сэкономить не только на времени, но и на стоимости дизайна страницы сайта, которая колеблется в пределах от 50 до 500$.
Необходимость разработки структуры страницы сайта
Перед тем, как мы перейдём к обзору устройства страницы сайта, я хотел бы поговорить с вами о необходимости данных знаний. Чтобы придать вам мотивацию для чтения всего материала целиком 🙂
Дело в том, что чёткое представление структуры страницы сайта является необходимым для всех людей, которые занимаются веб-строительством.
Причём, при этом совершенно неважно, к какому способу создания сайта вы решили прибегнуть.
Даже при наличии каркаса в виде готового сайта в случае и конструкторов, базовые решения далеки от совершенства.
Также в них может банально чего-то не хватать, а имеющиеся элементы, напротив, могут быть избыточными. Но если вы являетесь новичком в сайтостроении, вы можете этого банально не заметить.
Про необходимость понимания принципов создания страницы сайта в случае проектировки ресурса «с нуля» или на основе фрэймворка говорить излишне, т.к. всё придётся делать с чистого листа, без какой-либо готовой основы.
Одним словом, знания о построении структуры страницы сайта должны присутствовать абсолютно у всех веб-строителей.
А для того, чтобы понимать, какие элементы на странице сайта являются необходимыми, а без которых можно обойтись, мы с вами и рассмотрим принципы разработки структуры страницы сайта, причём на реальных примерах.
Структура страницы сайта – это что?
Что касается требований к внешней структуре сайтов, то, как уже говорилось ранее, она должна быть едина. Т.е. все структурные элементы должны соответствовать единому шаблону.
Не должно возникать ситуации, когда пользователь просматривает один ресурс, а у него складывается впечатление, что он попал на другой… Настолько отличается структура страниц сайта.
В качестве наглядного примера мы возьмём OZON.ru , крупнейший сетевой торговый ресурс России, сайт которого является ярким представителем семейства Интернет-магазинов.
Структура страницы сайта у OZON.ru соответствует критерию единости. Именно поэтому мы не будем рассматривать каждую из них отдельно.
Возьмём для образца первое, что видит пользователь при переходе на любой ресурс – структуру главной страницы сайта. С дизайном внутренних страниц сайта мы познакомимся при обзоре внутренней структуры страниц сайтов различных типов в будущих публикациях.
На OZON.ru она имеет разный вид (различный контент) в зависимости от того, произведён ли вход пользователя на сайт или нет. Поэтому для просмотра полного содержимого настоятельно рекомендую зарегистрироваться.
Тем более, я уверен, что Вы хоть раз в жизни да слышали об этом магазине и планировали воспользоваться его услугами, а, может быть, уже и совершали покупки.
Поэтому данное действие не будет для вас лишним, ведь после регистрации у Вас появится возможность получать на свою электронную почту информацию о скидках и акционных предложениях на более чем 2 млн. товаров различного ассортимента, позволяя экономить на покупках.
Итак, рассмотрим выбранный нами пример более детально, чтобы вы могли использовать отдельные элементы интерфейса и их расположение при проектировании страницы сайта для своего ресурса.
Условно её можно разделить на следующие блоки.
1. Шапка или хедер (область вверху)
В нём, как правило, содержится логотип магазина, блога, социальной сети… Одним словом, проекта 🙂 со ссылкой на главную страницу.
Обязательно должна присутствовать контактная информация (телефоны, email) и данные пользователя, под которым вы прошли процедуру авторизации (логин/имя и меню пользователя, состоящее из различных элементов в зависимости от типа сайта).
Также широко распространён вариант шапки с главным меню ресурса, хотя на некоторых ресурсах оно может располагаться у правого или левого края зоны контента. На OZON.ru ссылка на главное меню размещена в хедере, но, при открытии, оно располагается в левой колонке зоны контента, что является оригинальным решением данного вопроса.
Помимо всего перечисленного здесь также размещается поиск по сайту.
Стоит сказать, что данная модель хедера является достаточно информативной и функциональной, поэтому можете смело использовать её разработке дизайна страниц сайта.
2. Подвал или футер (область внизу)
Данный элемент структуры страницы сайта содержит, как правило, общую информацию о ресурсе и перечень ссылок на различные его страницы.
На OZON.ru разработчики решили разместить в футере ещё и ссылки на сообщества в социальных сетях, которые в обязательном порядке должны присутствовать для привлечения новых посетителей.
Располагать их так же лучше в фиксированном месте. Именно поэтому на большинстве ресурсов они расположены в футере или хедере.
Помимо этого здесь также часто расположены ссылки на сайты партнёров, информация о годе основания ресурса с контактами его разработчиков и баннеры статистики (например, LiveInternet, HotLog, Яндекс.Метрика и др.)
3. Зона контента (информация, расположенная между хедером и футером)
Данный блок в большинстве случаев имеет правую и левую боковые колонки (сайдбары), в которых содержится различного рода служебная информация или элементы управления.
К ним относятся списки подкатегорий, рубрик, параметры фильтров и сортировки (характерны для Интернет-магазинов). Также в них может быть поиск по сайту, сводки погоды и другие элементы управления.
На большинстве ресурсов сайдбары расположены строго по бокам зоны контента. Таким образом, содержимое страницы выглядит как картина в рамке:-), ограниченная сверху и снизу хедером и футером, а по бокам сайдбарами.
Разработчики OZON.ru вновь продемонстрировали оригинальный подход при разработке дизайна данного блока сайта.
Он заключается в размещении левого сайдбара, блока с промо-акциями и правого сайдбара в лестничном порядке.
Дизайн главной страницы сайта в нашем примере предусматривает наличие в боковых колонках контента различных акционных предложений, действующих на данном торговом ресурсе либо на партнёрских проектах.
На многих ресурсах можно найти различные рекламные баннеры сторонних рекламодателей, что позволяет владельцам данных сайтов иметь дополнительный доход.
Правда, в таком случае, к выбору материала для размещения нужно подходить очень осторожно, чтобы не завести себе армию конкурентов и не привести к уходу пользователей от Вас на ресурс рекламодателя 🙂
Учитывая критерий однородности структуры страниц сайта, хедер, футер и сайдбары присутствуют на всех страницах, содержимое зоны контента различно.
Кстати, такой вариант дизайна страниц сайта является проверенным временем и универсальным.
Большинство ресурсов различных типов сегодня успешно её применяют в явном или модернизированном виде (может отсутствовать хедер, футер и один либо оба сайбара).
Иногда создатели веб-ресурсов наполняют сайдбары различным контентом, в зависимости от содержимого. Ярким подтверждением тому являются Интернет-магазины и, в частности, OZON.ru.
На странице со смартфонами в левом сайдбаре (рисунок вверху) выводятся параметры, характерные для этой категории (версия операционной системы, количество SIM-карт, типы беспроводных подключений и т.д.)
На следующем изображении с каталогом книг сайдбар уже выглядит по-другому, т.к. характеристики смартфонов неприменимы к данному виду продукции. Тут уже присутствуют свои характеристики: автор, издательство, для какого возраста рассчитаны и т.д.
Несмотря на различие контента, данный подход всё равно удовлетворяет критерию единства структуры страницы сайта ввиду наличия одинакового набора информационных блоков на различных страницах (в данном случае, левый сайдбар).
На этом наша статья, в которой нами была рассмотрена структура страницы сайта
, объявляется закрытой 🙂
По ходу изучения материала у вас уже должен был сформироваться проект страницы сайта, который осталось только воплотить в жизнь 🙂
Надеюсь, что информация была вам полезной, и помогла узнать что-то новое. Если это так, то мы охотно примем от вас в виде благодарности за наш труд репост данной записи в социальные сети с помощью кнопок под статьёй или в качестве подписки на обновления .
В следующих статьях, как я и обещал, будут рассмотрены особенности внутренней структуры страниц сайтов различной тематики, чтобы изучить тонкости создания сайта, с идеей и типом которого, я надеюсь, Вы уже определились.
Если же это не так, предлагаю Вам ознакомиться с другими статьями моего блога, посвящёнными данному вопросу.
Также, если в процессе чтения данного поста вы поняли, что вам нужно внести правки в структуру сайта, то рекомендую прочитать материал о том, как можно самостоятельно.
Обещаю, что ваше мнение не останется незамеченным.
Следите за обновлениями! До встречи 🙂
P.S.
: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.
Более 5 лет опыта
профессиональной разработки сайтов. Работа с PHP
, OpenCart
, WordPress
, Laravel
, Yii
,
Развитие компьютеров позволило существенно расширить границы уже существующих областей жизни и бизнеса, и создать абсолютно новые. Именно благодаря компьютерным технологиям стали возможны программы для разработки трехмерного дизайна новых моделей Ford Mustang, Subaru Impreza, Renault logan и других автомобилей, проектирование домов и ландшафтов, появились электронные деньги и системы их мгновенных переводов по всему миру и так далее. Но помимо этого, широчайшее распространение получил абсолютно новый вид сферы услуг – это разработка и поддержание веб-сайтов. Их использование практически безгранично – на собственной интернет-странице вы можете вести блог для друзей или писать стихи и прозу, проводить рекламные акции нового опель инсигния или бытовой техники, можете создавать фотоальбомы или хранилище видеофайлов, можете общаться с людьми по всему миру с помощью микрофона и веб-камеры… Однако разработка сайта – достаточно сложный и многоступенчатый процесс, включающий в себя девять основных этапов. Этап первый – работа с клиентом: важно правильно понять, что именно хочет ваш заказчик, как именно он представляет себе будущий сайт. Можно и даже нужно ознакомить клиента с вариантами уже готовых работ и вашими возможностями, лучше всего на конкретных примерах. На втором этапе формируется техническое задание, в которое входит структура и перечень основных средств разработки сайта, калькуляция стоимости выполнения работы и её сроки, размещение сайта в Интернете, создание доменного имени и дальнейшая техническая поддержка ресурса. Третий этап – утверждение технического задания заказчиком и подписание договора о выполнении работ, внесение аванса (обычно это 50% от общей стоимости заказа). На четвертом этапе дизайнер создает эскизы главной страницы ресурса, которые формируются в фирменном стиле заказчика (если это юридическое лицо), а затем утверждаются с перспективой дальнейшей работы с сохранением этого же стиля оформления. Пятый этап – разработка программных модулей и навигационной системы, html-кода и структуры в совместной работе программиста и дизайнера. Этот этап нуждается в информационных материалах, которые предоставляются клиентом. Шестой этап подразумевает регистрацию доменного имени для сайта или размещение ресурса на уже существующем домене, который указывается заказчиком. Седьмой этап – непосредственно прием сайта клиентом, подписание необходимой документации и внесение второй половины суммы гонорара. На предпоследнем, восьмом этапе, производится финальное тестирование веб-сайта как заказчиком, так и разработчиком в течение недели или 10 дней – срок может быть оговорен в техническом задании. Выявляются и исправляются мелкие ошибки, могут вноситься изменения в информационную начинку ресурса. Последний девятый этап – регистрация нового сайта в основных поисковых системах, а также в виде дополнительного сервиса – в системах рейтингов. Также на этом этапе может заключаться договор о технической поддержке ресурса разработчиком, если это не было оговорено заранее в контракте.
59.WEB-страница
является контейнером для текста и изображений, размещаемых в интернете. Для того, чтобы создать WEB-страницу, надо использовать программу, которая может преобразовывать текстовый документ в гипертекстовый. Гипертекстовая разметка нужна не только для создания страниц в интернете. Она используется для подготовки писем электронной почты, электронных изданий. А также для создания обычных документов.Для создания WEB-страницы удобнее всего использовать мастер. Он запускается на вкладке WEB-страницы, вызываемой командой «Файл» «Создать». Разработаем для примера деловое письмо. Создание документа с помощью мастера можно поделить на несколько этапов:
На первом шаге надо выбрать тип страницы. Типы отличаются наборами готовых элементов. Это шаблоны документов, и их можно произвольно изменять. Выберем тип «Простая» (страница) и самостоятельно добавим все необходимые детали.
Следующий шаг – выбор стиля страницы, то есть художественного оформления. Редактор использует для создания стиля рисунки, которые находятся в папках пакета MS Offiсe. Выберем стиль «Загородный» - орнамент из листьев. На этом создание заготовки WEB-страницы заканчивается. Можно нажать кнопку «Готово», и мастер завершит работу.Теперь работа с WEB-страницей будет идти как с обычным документом. Здесь некоторые инструменты изменили свой вид. Например, исчез список для выбора размера шрифта, а его место заняли кнопки «Увеличить размер шрифта» и «Уменьшить размер шрифта». Создадим в самом начале документа новый абзац, выберем самый мелкий шрифт и введем адрес фирмы.
Преобразуем строку заголовка. Сотрем имеющийся в шаблоне текст-подсказку и введем название фирмы. А в правой части строки вставим логотип, то есть рисунок.
Осталось ввести текст письма, и документ готов.
Особенность WEB-страницы заключается в том, что для их оформления
можно применять стандартные элементы: линии, гиперпосылки, рисунки форматов GIF и т.д. Для их создания используется меню «Вставка». Документ можно редактировать и в режиме источника, если выбрать страницу «Вид» - «Источник HTML». Тогда будет понятно, как создана та или иная деталь страницы. Но этот режим полезен только для пользователей, знающих HTML. Если на WEB-странице неправильно отображаются русские буквы, надо открыть ее в режиме источника и исправить соответствующий атрибут элемента МЕТА. Сохранять WEB-страницы необходимо в оригинальном формате (документ HTML). В этом случае файлу присваивается тип НТМ или HTML. При конвертации таких документов в формат DOS или обратно некоторые параметры форматирования не будут сохранены.
Основные этапы создания веб-сайта:
1. Определение целей веб-сайта и его позиционирование
На этом этапе необходимо определить, для чего нужен сайт, т.е. какие задачи он должен решать: предоставить общее представление о компании или многосторонне осветить какую-либо сторону человеческой деятельности, увеличить продажи по традиционным каналам или организовать веб-торговлю, провести рекламную или маркетинговую кампанию.
После определения целей сайта надо совершенно четко и как можно подробнее представить и описать целевую аудиторию сайта, т.к. это влияет на то, в каком виде будет представлена информация.
ТЗ является основным документом, на основе которого осуществляются все последующие этапы разработки веб-сайта.
Создание дизайн-макета веб-сайта.
На этом этапе дизайнер в специальной графической программе создает дизайн страниц будущего веб-сайта с прорисовкой всех графических (банеров, кнопок, фотографий) и текстовых элементов. Дизайнер создает дизайн веб-страниц с учетом пожеланий заказчика и задания, прописанного в ТЗ.
4. Верстка сайта.
После того, как Заказчик утвердил дизайн-макет (в письменном виде или по электронной почте) за работу принимается верстальщик – это тот человек, который переводит дизайн-макет на язык, понятный компьютеру с использованием языка HTML.
5. Программирование сайта.
Очень часто этап программирования и верстки объединяют в один. На мелких и средний проектах оба действия в состоянии выполнить один человек. На крупных проектах в силу специфики работ эти этапы разделяют.
На этапе программирования (как правило, с использовавнием DHTML, PHP, Perl, ASP и баз данных) происходит создание всех страниц сайта, определяется порядок работы меню, расставляются гипер-ссылки, создается динамика на сайте, программируются такие составляющие, как гостевая книга, форум, новостная лента и проч.
6. Наполнение сайта информацией.
На этом этапе информация, предоставленная Заказчиком, размещается на сайте, т.е. путем перевода в специальный формат текст и графика располагаются на сайте на определенных страницах, и эта информация становится доступной для просмотра.
7. Расположение сайта в сети Интернет.
Данный этап необязательно выполняется после проведения всех вышеперечисленных работ. Он может проводиться параллельно с любым из этапов. Он заключается в том, что файлы сайта располагаются на хостинге.
8. Тестирование сайта.
Этот этап можно осуществить как до, так и после размещения сайта по его «родному» адресу. На этом этапе выявляются все ошибки и недочеты в программировании и написании текстов. Срок тестирования зависит от сложности проекта, но, как правило, не превышает 1 месяца.
60. Структура HTML - документа.
Итак, HTML (Hyper Text Markup Language) - язык гипертекстовой разметки. Собственно, его появление и зарождение браузеров, которые способны распознавать и интерпретировать код html в понятное пользователям содержание вебстраниц положило начало развитию всемирной паутины (интернета), в том числе появлению информационных ресурсов (сайтов, блогов, крупных порталов и т.д.). Таким образом, используя язык гипертекстовой разметки, мы имеем возможность создавать свои проекты в сети. Для обеспечения единых стандартов был создан Международный Консорциум W3C, задачей которого стало не допустить анархии в использовании элементов HTML среди разработчиков.
Была определена спецификация языка разметки, которая изредка обновлялась. На данный момент последней версией является HTML 4.01, однако идут активные работы по внедрению 5 версии, отдельные нововведения уже поддерживаются популярными браузерами, поэтому проверка страниц сайта на ошибки, проводимого W3C validator, производится применительно именно к HTML 5, с отличиями которого от 4 версии можно ознакомиться на этой странице(правда, на английском языке).
Структура документа HTML - основные теги (html, head, body)
Если вы на какой-либо вебстранице кликните по ней правой кнопкой мышки и выберете из контекстного меню «Просмотр кода страницы» (в случае браузера Google Chrome), то в отдельной вкладке откроется текст, который и является html кодом, состоящим из совокупности тегов. Тегами называются команды языка HTML. Эти теги определяют то, что пользователи видят при просмотре.
Текст документа html, который определяет содержание того или иного элемента на странице, заключается между открывающим и закрывающим тегами (например,
и ). Как вы могли заметить, названия тегов заключаются между угловыми скобками, а закрывающий тег отличается от открывающего только наличием в нем слэша. Здесь надо отметить, что на приведенном выше скриншоте отмечены три главных тега (html, head, body) вместе со специальным тегом DOCTYPE:
- специальный тег, который называют еще декларацией. Он начинается с угловой скобки и восклицательного знака и показывает, на какую версию html ориентироваться браузеру. Приведенный мной вариант написания декларации уже является детищем 5 версии языка разметки и поддерживается последними модификациями всех популярных браузеров, хотя в html 4.01 существуют несколько вариантов, например, такой:
Однако мы уже будем ориентироваться на 5 версию, жизнь идет вперед, тем более, как я писал выше, валидация документов происходит уже в соответствии с новейшей версией, хотя до конца она еще не вступила в законную силу.
head - внутри этого тега размещается служебная информация, которая необходима браузеру для корректной интерпретации html документа. Она не видна на открытой вебстранице.
body - между закрывающим и открывающим тегами будет помещена информация, отображаемая на web странице.
html - все содержание документа определяется эти тегом
Обращаю внимание на то, что все вышеприведенные теги являются обязательными и входят в состав любого документа html. Более того, используется принцип вложенности, который определяет расположение тегов открытия и закрытия следующим образом:
Кроме этого, существуют теги, называемые пустыми, которые не требуют закрытия (например, тег br, определяющий перенос строки). В языке разметки существует строго ограниченный набор тегов для всех разработчиков, определенный консорциумом W3C, список валидных по версии HTML 4.01 тегов можно посмотреть на официальной странице
Структура документа HTML
HTML
-документ заключается в теги и . Между этими тегами располагаются два раздела: раздел заголовка (элемент head
) и раздел тела документа (элемент body для простого документа либо элемент frameset, задающий набор кадров). Все указанные элементы имеют начальный и конечный тег.Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера. Секция тела документа содержит текст, предназначенный для отображения браузером и элементы, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее.Формально, согласно спецификации HTML 4+, первым в документе должен указываться элемент doctype, сообщающий браузеру об использованной версии HTML (а версии, как уже говорилось, различаются наборами допустимых элементов и правилами их объявления). В элементеdoctype
указывается также адрес, с которого браузер может загрузить определение типа документа - Dtd (DocumentTypeDefinition). На практике же этот элемент зачастую опускают без ущерба для отображения документа.Браузер отобразит этот документ, выведя в строке заголовка своего окна текст "Самый простой HTML-документ", а в самом окне текст "Проще не бывает", причем параметры шрифта и цвет фона будут зависеть от умолчаний конкретного браузера. На практике, конечно, в разделе заголовка следует задавать определенную информацию. Для элементаbody
могут быть указаны атрибуты, определяющие цвета текста и фон документа.Строгости ради надо сказать, что согласно спецификации HTML 4+ лишь два элемента документа являются обязательными:doctype
и title.
61.Основные средства для автоматизации разработки Веб-страниц.Публикация Веб-сайтов
.
В современной литературе наряду с термином Web-сервер
часто используется термин Web-cайт
или Web-узел
.Для подготовки этих электронных изданий создано множество программных продуктов - от простейших HTML-редакторов до средств проектирования Web-страниц и Web-серверов.Наиболее заметные различия между Web-страницами и печатными публикациями касаются скорости их появления. Несомненно, время загрузки Web-страницы имеет существенное значение, но работа Web-дизайнеров в первую очередь зависит от требований, предъявляемых клиентами к темпам реализации проекта на всех его стадиях, начиная с рождения идеи и заканчивая ее практическим воплощением. Не менее важно и то, как часто клиент планирует обновлять содержание узла, а также добавлять в него новую информацию.В традиционной печати сроки выпуска изданий определяются графиками работ типографий и структур распространения. Как правило, новая интересная информация появляется в Internet гораздо раньше. Это объясняется наличием средств автоматизации проектирования Web-страниц и более сложных информационных структур - Web-серверов. Именно в этом особая роль и значение программных пакетов MacromediaDreamweaver и MicrosoftFrontPage.В данной главе рассмотрен один из наиболее распространенных программных пакетов автоматизированного проектирования Web-публикаций MacromediaDreamweaver.После того как сайт создан, его нужно опубликовать на Web-сервере. И сделать это можно тремя различными способами.Первый способ самый простой, но далеко не всегда самый легкоосуществимый. Заключается он в том, что все файлы сайта переписываются на дискету или более емкий носитель информации (дискета IomegaZip, магнитооптический диск, перезаписываемый диск CD-RW, лента стримера, обычный жесткий диск, в конце концов) и относится администратору Web-сервера. Администратор просто переписывает содержимое вашего носителя в соответствующую папку сервера и настраивает программное обеспечение.
Похожая информация.
Перед тем, как мы начнём наше путешествие по урокам создания сайтов на 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 определяет их <a href="/optimizaciya-sistemy-windows-xp-menyaem-stil-oformleniya-i-otklyuchaem-vizualnye.html">визуальный стиль</a> и внешний вид.</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>Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри <a href="/figurnaya-skobka-v-formule-vorde-stavim-figurnye-skobki-v-microsoft-word.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://i1.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="/vyravnivanie-v-div-po-vertikali-vertikalnoe-vyravnivanie-elementov-s-pomoshchyu-css.html">синтаксиса CSS</a> включает селектор, свойства и значения</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. Хорошей практикой является включение всех наших стилей в одном <a href="/g-ne-yavlyaetsya-vnutrennei-ili-vneshnei-komandoi-imya-faila.html">внешнем файле</a>, на который есть указатель внутри элемента <head>
нашего HTML-документа. Использование одного <a href="/izmenenie-poryadka-spiska-s-pomoshchyu-css-pravila-css-dlya-nastroiki.html">внешнего CSS</a> позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.</p><h3>Другие варианты добавления CSS</h3><p>Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.</p><p>Для создания нашей <a href="/razmer-shrifta-v-tablice-html-ubrat-vneshnie-ssylki-iz-novogo.html">внешней таблицы</a> стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.</p><p>Внутри элемента <head>
применяется элемент <link>
, который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем <a href="/chto-takoe-atribut-nofollow-kak-pravilno-ispolzovat-atribut-rel-nofollow---sekrety-seo.html">атрибут rel</a>
со значением stylesheet
для указания их отношений. Кроме того, атрибут href
применяется для указания местоположения или пути к CSS-файлу.</p><p>В <a href="/slozhnye-makety-s-primeneniem-flex-css-primery-veshchi-kotorye-sleduet-pomnit.html">следующем примере</a> 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="/kak-otkryt-novyi-akkaunt-v-instagram-kak-zaregistrirovat.html">собственные стили</a> по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться <a href="/kak-sdelat-bios-po-umolchaniyu-kak-sbrosit-nastroiki-css-po-umolchaniyu.html">сброс CSS</a>.</p><p>Сброс CSS берёт все основные элементы HTML с <a href="/css-kazhdyi-pyatyi-element-kak-rabotaet-nth-child-veb-standarty-i-zadat.html">заданным стилем</a> и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку <a href="/kaskadirovanie-css-kaskadirovanie-specifichnost-nasledovanie-chto-eto.html">каскадирование CSS</a> работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с <a href="/windows-server-nastraivaem-tenevye-kopii-dlya-obshchih-papok-tochka-vosstanovlenie.html">общей точки</a> отсчёта.</p><p>Есть куча разных сбросов CSS доступных для применения, у всех них есть свои <a href="/pustoi-massiv-v-yazyke-javascript-inicializiruetsya-javascript-massiv-i-ego-sozdanie.html">сильные стороны</a>. Один из самых популярных от Эрика Мейера , его сброс 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>Используя текстовый редактор создадим <a href="/kak-udalit-gugl-hrom-i-ustanovit-novyi-poisk-ostatochnyh-failov-i-papok.html">новый файл</a> с именем 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, вам станет гораздо комфортнее работать с этими двумя языками.
Поиск
Мы можем оповещать вас о новых статьях,