Главная » Языки программирования

Notepad html and css

Содержание
  1. How to Create a Simple CSS Stylesheet Using Notepad
  2. Creating an HTML Page
  3. Welcome!
  4. Adding CSS
  5. Saving the Document
  6. Hi!
  7. Community Q&A
  8. HTML редактор Notepad++, установка и настройка
  9. Содержание:
  10. Устанавливаем HTML редактор Notepad++
  11. Настройки редактора Notepad++
  12. Доступные функции редактора
  13. Создание макросов в Notepad++
  14. Другие записи по теме:

How to Create a Simple CSS Stylesheet Using Notepad

This article was co-authored by wikiHow staff writer, Jack Lloyd. Jack Lloyd is a Technology Writer and Editor for wikiHow. He has over two years of experience writing and editing technology-related articles. He is technology enthusiast and an English teacher.

The wikiHow Tech Team also followed the article’s instructions and verified that they work.

This article has been viewed 214,978 times.

This wikiHow teaches you how to use Windows’ Notepad app to store information for a webpage written in HTML and CSS. HTML is the programming language used to create your webpage, while CSS is the language that determines the style—color, font, and so on—of the HTML elements on the webpage.

Creating an HTML Page

Image titled Create a Simple CSS Stylesheet Using Notepad Step 1

Windows Start

Image titled Create a Simple CSS Stylesheet Using Notepad Step 2

Image titled Create a Simple CSS Stylesheet Using Notepad Step 3

Image titled Create a Simple CSS Stylesheet Using Notepad Step 4

Enter the BODY tag. Type in and press ↵ Enter . You can now begin entering your webpage’s information.

Image titled Create a Simple CSS Stylesheet Using Notepad Step 5

  • For example, to create a page header that says «Welcome!», you would type

    Welcome!

    into Notepad.

Image titled Create a Simple CSS Stylesheet Using Notepad Step 6

  • For example, to add text that says «I am an iguana», you would enter I am an iguana into Notepad.

Image titled Create a Simple CSS Stylesheet Using Notepad Step 7

Image titled Create a Simple CSS Stylesheet Using Notepad Step 8

Close the BODY and HTML tags. Once you’ve entered your last line of code, type in on its own line and press ↵ Enter , then type in . Your document is now ready to be styled with CSS.

Adding CSS

Image titled Create a Simple CSS Stylesheet Using Notepad Step 9

Image titled Create a Simple CSS Stylesheet Using Notepad Step 10

Image titled Create a Simple CSS Stylesheet Using Notepad Step 11

Image titled Create a Simple CSS Stylesheet Using Notepad Step 12

Image titled Create a Simple CSS Stylesheet Using Notepad Step 13

Image titled Create a Simple CSS Stylesheet Using Notepad Step 14

  • Text size — Type in font-size: 30px; to set your text as 30-point font. Substitute any number that you want to use.
  • Text color — Type in color: black; to make black text. Substitute any color that you want to use.
  • Text alignment — Type in text-align: center; to center the text. You can also type left or right to align the text appropriately.
  • Font used — Type in font-family: times new roman; to set your font as Times New Roman. You can also use fonts like verdana or georgia .

Image titled Create a Simple CSS Stylesheet Using Notepad Step 15

Image titled Create a Simple CSS Stylesheet Using Notepad Step 16

Style the rest of your document. You can style any element by referencing its tag text and placing an open curly bracket (<), adding modifiers, and then closing the bracket (>).

Image titled Create a Simple CSS Stylesheet Using Notepad Step 17

Close the STYLE and HEAD tags. On a new line below your last styling text, type in

and press ↵ Enter , then type in and press ↵ Enter . Your CSS sheet is complete, meaning that you can now review and save it.

Saving the Document

Image titled Create a Simple CSS Stylesheet Using Notepad Step 18

  • body
  • background-color: lightblue;
  • >
  • h1
  • font-size: 45px;
  • >
  • p1
  • color: black;
  • >

  • Hi!

  • I am an iguana

Image titled Create a Simple CSS Stylesheet Using Notepad Step 19

Image titled Create a Simple CSS Stylesheet Using Notepad Step 20

Click Save As… . You’ll see this near the bottom of the drop-down menu. Clicking it prompts a window to open.

Image titled Create a Simple CSS Stylesheet Using Notepad Step 21

Image titled Create a Simple CSS Stylesheet Using Notepad Step 22

Image titled Create a Simple CSS Stylesheet Using Notepad Step 23

Image titled Create a Simple CSS Stylesheet Using Notepad Step 24

  • For example, if you named your file «My CSS», you’d type my css.html into the field.
  • If you use a program that can run «.css» files, you can use .css instead of .html here.

Image titled Create a Simple CSS Stylesheet Using Notepad Step 25

Click Save . It’s in the bottom-right side of the «Save As» window. This will save your CSS sheet in an executable format, meaning that you can open it in your preferred browser or HTML editor rather than in Notepad.

Community Q&A

Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

CSS files are stylesheets that extend HTML pages with styles. They are not able to be run, but must be specified as links in a tag.

Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

Источник

HTML редактор Notepad++, установка и настройка

html редактор Notepad

Для работы с документами HTML и CSS достаточно удобно применить HTML редактор Notepad++.

Можно вообще-то применить любой редактор, который поддерживает кодировку UTF-8 и таких редакторов в настоящее время довольно много, но Notepad++ обладает рядом преимуществ.

Содержание:

HTML редактор Notepad++ является бесплатной программой и его часто сравнивают с продвинутым аналогом обычного блокнота, который есть в Windows.

Но это не совсем верное сравнение, так как Notepad++ является действительно мощной программой. Редактор поддерживает много языков программирования и работать с ним намного удобней, чем с обычным блокнотом.

Устанавливаем HTML редактор Notepad++

Адрес официального сайта – notepad-plus-plus.org. Здесь слева имеется вкладка download, при нажатии на нее откроется страница закачки редактора, на которой также присутствует одноименная кнопка.

Скачать редактор Notepad++

Устанавливается HTML редактор Notepad++ как любая обычная программа. Никаких особых навыков не требует и сложностей при этом не возникнет.

Установка редактора Notepad++

Единственное, в окне Компоненты устанавливаемой программы нужно указать локализацию – Тип установки – Russian.

Компоненты редактора Notepad++

В следующем окне кликаем Далее и затем Установить.

Компоненты Notepad++

Установка редактора Notepad++ проходит достаточно быстро, оставляем флажок Запустить и нажимаем Готово.

Настройки редактора Notepad++

Во-первых, язык можно выбрать еще при установке редактора. А если не случилось, то после установки можно открыть вкладку Опции, перейти в Настройки и во вкладке Общие выбрать нужный язык.

Редактор Notepad++

Кроме этого в программе надо сделать необходимые настройки:

  • Заходим в Опции — Настройки открываем вкладку Новый документ и в поле Кодировка нужно поставить UTF-8 без метки BOM, а также снять флажок Применить при откр. ANSI файла.

Настройки редактора

Потому что если существующие файлы на компьютере открывать с помощью редактора Notepad++, то он соответственно будет преобразовывать их в UTF-8, что, конечно же, не нужно. Если нужно будет, то всегда можно сделать это вручную.

  • Затем в этом же поле Синтаксис. При создании нового файла, если редактор в основном используется для работы с HTML, то в выпадающем меню следует выбрать HTML, чтобы происходило подсвечивание тегов.
  • Переходим во вкладку Автозавершение. Функция автозавершение позволяет получить такой эффект, что при нажатии, например, на скобочку, она автоматически закрывается.

Настройки Notepad++

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

  • Далее можно изменить размер шрифта, Ctrl+NumLock+ увеличивают размер, соответственно, Ctrl+NumLock — – уменьшают. Рекомендуется сделать такой, чтобы глаза не уставали.
  • Затем переходим во вкладку Вид и устанавливаем Перенос строк. Строки при написании кода могут быть очень длинными.

Чтобы они не продолжались за пределы поля документа, и не появлялась полоса прокрутки, а переносились при достижении правого конца поля, ставим эту опцию.

  • Далее переходим в Опции – Определение стилей. Здесь можно выбрать тему, то есть стиль, который будет определять внешний вид редактора и чтобы различные части кода подсвечивались разными цветами.

Выбор стилей редактора

Стилей здесь достаточно много и можно выбрать тот, который больше по душе именно вам, нажимаем Ok.

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

Доступные функции редактора

  • В поле программы кодировка указывается в правом нижнем углу – ANSI as UTF-8. Это другое название кодировки UTF-8, без специальной метки BOM.

Кодировка редактора

Соответственно, когда вы создаете новый документ, то почти всегда нужно использовать именно эту кодировку.

Во вкладке Кодировки также можно увидеть после настроек, что черный кружок стоит напротив Кодировать в UTF-8 (без BOM). Это показывает текущую кодировку документа.

Чтобы документ преобразовать в другую кодировку, нужно ее выбрать из нижней части выпадающего меню и тогда произойдет преобразование документа.

  • В редакторе Notepad++ есть функция, которая отсутствует во многих других редакторах, это возможность свернуть код. Это позволяет более визуально наблюдать структуру какого-то кода.
  • Если имеется две вкладки, то можно их окна расположить рядом. Для этого достаточно перетянуть одну вкладку в центр. Появляется контекстное меню, в котором можно выбрать пункт Переместить в другую область.

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

Создание макросов в Notepad++

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

Созданный макрос, сохраняется под каким-то именем. Дается ему какое-то сочетание горячих клавиш и можно его вызывать при необходимости и вставлять в нужное место.

Сначала макрос надо включить – Макрос – Начало записи, либо при помощи кнопки на панели инструментов, затем вводим нужную запись, останавливаем ее. Сейчас запись можно удалить.

Чтобы вставить, можно нажать горячие клавиши – Shift+Ctrl+P либо Макрос – Прокрутить запись. Все, наша запись вставится в нужное место.

Сейчас макрос можно сохранить – Макрос – Сохранить запись в макросе, появляется окно, в котором можно задать ему имя, назначить сочетание клавиш.

Сохранение макроса в редакторе

В пункте меню Макросы появится новый пункт с именем нашего макроса, нажав на который можно запустить его выполнение.

Даже после перезагрузки редактора Notepad++ данный макрос будет сохранен и всегда можно его запускать. Таким образом, макросы работают, и верстать код с их помощью намного удобней.

Другие записи по теме:

Источник

Читайте также:  Адрес почты
Оцените статью
© 2024 Программирование