Как соединить html и css в notepad
Перейти к содержимому

Как соединить html и css в notepad

  • автор:

Редактор для HTML: пишем код, чтобы было удобно

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на сайт и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если Mac OS или Linux — нажмите Other platforms.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:

  1. Add workspace folder — открывает меню выбора папки.
  2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
  3. Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down, чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

   Сайт начинающего верстальщика  
Взгляд упал на кота.
Подвал сайта

Скопируем код со стилями из файла — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html . Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали

  1. Установили и настроили редактор кода.
  2. Создали рабочую папку и добавили туда файлы нашего проекта.
  3. Научились редактировать и сохранять файлы с кодом.
  4. Установили расширение, чтобы сразу видеть результат вёрстки.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Создание первой таблицы стилей

В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.

Создание внутренней таблицы стилей

Рассмотрим пример в котором вы будете создавать Вашу первую внутреннюю таблицу стилей.

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.

Перед Вами откроется основное окно программы:

 Рис. 2 Текстовый редактор Notepad++.

Шаг 2: Создайте структуру документа

Скопируйте или впишите в редактор следующий HTML код:

   charset = "UTF-8"> Внутренняя таблица стилей Как хорошо, что я занимаюсь саморазвитием. Я выучу CSS за месяц, а то и быстрее  

В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег , текст внутри такого элемента не отображается браузером. В CSS коде для добавления комментария необходимо текст комментария поместить в следующую конструкцию: /* текст комментария */ . Комментарии в CSS коде вы можете делать как внутри встроенных стилей, так и во внешних (в отдельном файле).

Шаг 3: Добавьте встроенные стили

Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный ( color : red ), а для абзацев голубой ( color : blue ). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру ( text-align : center ). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.

   charset = "UTF-8"> Внутренняя таблица стилей h1  text-align: center; /* горизонтальное выравнивание текста по центру */ color: red; /* изменяем цвет текста */ > p  color: blue; /* изменяем цвет текста */ >  Как хорошо, что я занимаюсь саморазвитием. Я выучу CSS за месяц, а то и быстрее  

Шаг 4: Просмотр HTML страницы в браузере

Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:

Рис. 2.1 Пример создания внутренней таблицы стилей в документе.

Подключение внешней таблицы стилей

Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.

  1. В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css) в той же папке, где вы создавали HTML документ.
  2. Перенесите из предыдущего примера код CSS (содержимое тега ) в файл, который мы создали. Обратите внимание, что сам тег необходимо удалить из документа (зачем нам пустые неиспользуемые теги в документе). Файл css у Вас должен содержать следующий код:

h1  text-align: center; color: red; > p  color: blue; > 
body  margin-top: 50px; border: 5px solid green; font-family: courier; > 

margin-top : 50px – это CSS свойство отвечает за внешний отступ от верхнего края элемента, его мы указали равным 50 пикселям.
border : 5px solid green — это универсальное CSS свойство, которое позволяет установить все свойства границ элемента в одном объявлении (в нашем случае задаем сплошной тип границы (solid) равной 5 пикселям зеленого цвета.
font-family : courier — задаем шрифт «Courier» для элемента.

   charset = "UTF-8"> Внутренняя таблица стилей href = "page.css" rel = "stylesheet"> Как хорошо, что я занимаюсь саморазвитием. Я выучу CSS за месяц, а то и быстрее.  

Рис.3 Пример использования внешней таблицы стилей в документе.

  • Сохраните ваши файлы и проверьте результат в браузере.
  • Не беспокойтесь, если Вам на этом этапе непонятно как работают какие-либо новые для вас CSS свойства, позднее мы ещё не раз будем прибегать к использованию данных свойств в примерах, и подробно остановимся на каждом из них в отдельных статьях, например:

    • Как управлять шрифтами вы научитесь в статье «Работа со шрифтами в CSS».
    • Как работать с отступами элемента вы научитесь в статье «Блочная и строчная модель в CSS».
    • Как использовать границы элемента вы научитесь в статье «Границы элемента в CSS».

    Вопросы и задачи по теме

    Перед тем как перейти к изучению следующей темы пройдите практическое задание:

    • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:
    • Составьте следующую HTML страницу, в которой CSS стили, отвечающие за заголовки страницы будут подключаться отдельным файлом, а все остальные используемые стили, будут содержаться во внутренней таблице стилей:

    Практическое задание № 1.

    Практическое задание № 1.

    Подсказка: на странице использованы цвета: dimgray, gray, aliceblue, orange.

    Обращаю Ваше внимание, что готовые практические примеры будут доступны для открытия в новом окне, но старайтесь выполнять их самостоятельно. Подглядеть код готовой страницы можно, используя инструменты разработчика, как правило, в любом браузере достаточно кликнуть правой кнопкой по странице и нажать на просмотр кода страницы, либо элемента.

    Введение в CSS
    Селекторы. Часть 1.

    © 2016-2024 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

    Кажется, вы используете блокировщик рекламы 🙁

    Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

    Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

    CSS: что это такое и как подключить стили к HTML документу?

    В этом уроке мы поговорим о каскадных таблицах стилей (CSS) и о том, насколько они упрощают настройку дизайна сайта. С помощью CSS можно в одном файле задать оформление на всех страницах сайта.

    При создании сайта нужно придерживаться такой концепции: языком HTML описывают содержание страниц на сайте, а языком CSS описывают дизайн и оформление элементов страницы.

    Например, мы можем в одном файле задать цвет, фон, размеры шрифта, оформление картинок. А в файлах сайта мы вставим содержание, текст, изображения.

    Файл, в котором описывается дизайн страницы, и оформление элементов обычно называют style.css.

    В блокноте создайте файл style.css.

    Давайте опишем дизайн первого элемента – body:

    body

    Сохраните этот файл в папке, где вы храните файлы сайта.

    С помощью этой записи мы зададим белый шрифт на сером фоне. Если вы помните, в языке html эта запись выглядела так:

    Если мы будем создавать новые страницы нашего сайта, то каждый раз нам нужно будет прописывать тег body. А можно один раз описать элемент body в файле style.css , прикрепить этот файл к каждой странице, и элемент body будет все время отображаться так, как мы его описали в файле style.css.

    Для того чтобы прикрепить файл style.css нам нужно после тега вставить следующую запись:

    Давайте в каждом файле, который мы создали, вставим эту запись, а также изменим тег body:

    Как видите, во всех файлах фон стал серым, а текст белым. Теперь, если мы хотим поменять цвет фона, то нам нужно изменить только описание селектора body, и во всех файлах автоматически поменяется цвет фона.

    Давайте теперь разберем, как задавать оформление элементов. В общем виде команды css выглядят так:

    Селектор — это название элемента разметки, атрибут- название параметра, который мы хотим описать.

    В следующих уроках мы подробно разберем, как нам описывать текстовые, строчные элементы, как работать с изображениями.

    Давайте создадим страницу style.css. Для этого зайдите в меню File – нажмите New. У вас откроется такое окно:

    Создаем CSS файл в DreamViewer

    Зайдите на вкладку General, в категорию Basic Page, выберите CSS, нажмите Create (на рисунке обведено овалами).

    Вы создадите страницу с расширением css. Сохраните ее под названием style.css.

    По умолчанию первая строка выглядит так:

    /*___*/ — между этими знаками можно вводить комментарии, браузерами они не интерпретируются.

    body

    Сохраните страницу. Теперь в каждую страницу, которую мы создавали, в тег введите ссылку на страницу css:

    А тег body измените так:

    В результате все наши страницы написаны белым текстом на сером фоне.

    В следующих уроках мы научимся с помощью css форматировать текст и работать с изображениями.

    Подключение CSS к HTML

    Существует несколько способов подключения CSS к HTML. Рассмотрим их:

    • Внешние таблицы стилей. Создайте в блокноте файл style.css и сохраните его. Чтобы подключить style.css к уже существующей html-странице используется тег:
    • Внутренние таблицы стилей, которые задаются внутри HTML-документа при помощи атрибута style. К примеру:

    >hello!

    • Встроенные таблицы стилей (таблица стилей встраивается в заголовок HTML-страницы):

    «color:red

    Также рекомендуем почитать:

    Категории

    Хостинг сайтов

    • Блог
    • Наши новости, акции, нововведения
    • Руководства, статьи, инструкции
    • Хостинг, домены, мировые новости, обзоры ПО
    • Рейтинги, обзоры, отзывы
    • Наши новости, акции, нововведения
    • Руководства, статьи, инструкции
    • Хостинг, домены, мировые новости, обзоры ПО
    • Рейтинги, обзоры, отзывы
    • RSS

    Популярное в категории

    • Новая услуга: VPS с выделенным накопителем
    • Новая функция в cPanel: установка бесплатного SSL-сертификата от Let’s encrypt
    • Авторизация через соцсети в Bitrix
    • Создание простого и выпадающего меню на WordPress
    • Cron в cPanel: запуск скрипта по расписанию
    • Основы JavaScript. Урок 1. Введение в JavaScript. Что такое JavaScript.
    • Что делать с ошибкой Strict Standards: Non-static method JLoader?
    • Что лучше хостинг или vps?
    • Где купить домен и хостинг?
    • Инструкция по установке ISPmanager (последняя версия)
    • SSL: понятие, суть, предназначение
    • Добро пожаловать в наш блог!

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *