То для написания кода HTML и создания веб- страницы подойдет любой вид программы Nvu в режиме редактирования HTML - кода.
Структура HTML - страницы : < HTML >: <HEAD>: описание заголовка: </HEAD> головной частью программы, он содержит справочную информацию о странице, Код RGB - это три шестнадцатеричных числа в диапазоне 00 - FF. Поэтому редакторы html – программы, создание сайта без которых невозможно Для того чтобы написать в блокноте html - код веб- страницы не нужно. Разумеется, у пользователей таких программ есть возможность перемещаться по элементам страницы, но нет возможности быстро. Для просмотра HTML документов можно использовать любой текстовый редактор, а для просмотра кода страницы в интернете нужно всего лишь.
Что такое HTML и как им пользоваться. Сегодня говорим о том, что такое HTML. Мы обсудим HTML теги, атрибуты и элементы, узнаем, что такое структура и семантика HTML, рассмотрим концепцию блочных и строчных тегов и сделаем HTML страницу.
На первых порах будет трудно, но я уверен, что после изучения всех статей цикла и регулярной практики, вы научитесь делать профессиональные HTML страницы. HTML — это структура и семантика.
Самое главное, о чем необходимо помнить, когда работаешь с HTML, то, что он определяет структуру и семантику документа. Вообще, структура — внутреннее устройство чего-либо, а семантика — определение значения, или смысла. В нашем случае HTML выделяет структуру документа: шапка, область контента, подвал и др. и придает определенный смысл, например, заголовкам, абзацам, цитатам и др. HTML состоит из элементов, которые в свою очередь состоят из тегов и атрибутов. Теги могут быть парными и непарными. У парных тегов есть открывающий и закрывающий тег, а у непарных только открывающий.
Теги имеют атрибуты, число которых может быть не ограниченным. Вот пример элемента:. Тут h1 парный тег, а class — атрибут.
<img src="picture. jpg" alt=”картинка” />. Тут img непарный тег, а src и alt — атрибуты. Тегов и атрибутов очень много: текущий список определен в спецификации HTML5. Вот ссылки на оригинал на английском языке и на неофициальный перевод спецификации. К счастью, учить наизусть все теги и атрибуты не надо. Достаточно знать десяток тегов с которым сталкиваешься во время редактирования статей.
Вот примерный список:. strong, em, del.
blockquote, a, hr. h1, h2, h3, h4, h5, h6. table, tr, th, td. специальные символы HTML. О них мы и будем говорить в следующей статье. Семантические элементы HTML.
Как мы уже говорили ранее, семантика означает смысл. Семантические элементы — элементы которые придают смысл заголовкам, параграфам, спискам и др. Важно использовать их по назначению, так как они влияют на форматирование документа и SEO оптимизацию статьи.
Блочные и строчные элементы. При изучении HTML важно понимать концепцию блочных и строчных элементов. Блочные элементы — элементы, которые занимают всю ширину экрана браузера или родительского элемента и начинаются с новой строки:. Строчные элементы — элементы, которые остаются на той же строке на экране браузера, внутри родительского элемента или рядом с соседними строчными элементами:. Тег <!doctype> указывает на стандарт документа. Сегодня используется HTML5.
Тег <html> родительский элемент для всех остальных элементов документа. Он указывает, что перед нами HTML страница. Тег <head> содержит служебную информацию, которая описывает документ в целом. Внутри элемента задается кодировка, заголовок, подключаются файлы стилей, скриптов, шрифтов и другая служебная информация. Содержимое тега <head> не отображается в окне браузера. Тег <meta> используется для разных целей.
Конкретно в примере при помощи атрибута charset мы определили кодировку документа как utf-8. UTF-8 — кодировка, которая корректно отображает все символы латинского и кириллического (русского) алфавитов. Я рекомендую использовать только ее.
Помимо атрибута charset у тега <meta> есть другие атрибуты: description или keywords. Тег <title> задает общий заголовок страницы и его содержимое отображается во вкладках браузера. Тег <title> имеет решающее значение для SEO, так как он показывается в качестве заголовка в сниппете поисковой выдачи.
Тег <body> содержит все то, что отображается в окне браузера в качестве веб-страницы. В нашем случае мы поместили внутрь тега два элемента: заголовок и абзац. На реальных страницах внутри <body> содержатся тысячи тегов, определяющих структуру и семантику документа. <! — образец комментария -->. <! — образец комментария --> данная структура отображает комментарий в языке HTML.
Все то, что размещено внутри нее, не будет отображаться в окне браузера, однако будет доступно при просмотре исходного кода страницы. Практика по созданию HTML страницы.
Начнем с простого утверждения: HTML страница - это обычная текстовая страница с расширение. html: index. html — главная страница сайта, about.
html — страница о нас. Оба документа представляют собой обычный текст, такой же как эта статья — буквы. Для того, чтобы создать HTML страницу, следует воспользоваться любым текстовым редактором, но не текстовым процессором word, а таким как Notepad++ или Sublime 2.
Я использую 2 варианта создания HTML документа:. Открываю текстовый редактор Notepad++. Выставляю в настройках синтаксиса HTML.
Пишу HTML код страницы. Сохраняю файл, указывая имя index.
html. Делаю щелчок правой кнопкой мыши. Выбираю «создать» → «текстовый документ». В качестве имени документа ввожу, например index. В качестве расширения файл (3 символа после точки) вместо txt ввожу html. Открываю файл двойным кликом или правой кнопкой мыши → "открыть с помощью".
Второй вариант хорошо показывает идею того, что HTML документ — это просто текст. Как установить Notepad++. Рассмотрим установку текстового редактора на примере Notepad++. 1.
Скачайте последнюю версию программы официального сайта. 2. Начните установку, нажимая все время «Далее». 3.
Когда дойдете до шага выбора компонентов, снимите галочку с Auto-Updater. 4. На следующем этапе поставьте галочку Create Shortcut on Desktop. 5. Запустится установка, по окончанию которой нажимайте «Готово». Таким образом, Вы установили на свой компьютер текстовый редактор для создания HTML страниц.
На Вашем рабочем столе появился ярлык программы, нажав на который Вы можете без труда приступить к работе с кодом. Рассмотрим создание HTML документа по 1 Варианту. Кстати, не обращайте внимание на открытый документ, который будет в редакторе после запуска. Продолжайте работу. 1. В меню программы выберите раздел «Файл».
2. В выпадающем списке выберите «Новый». 3. Откроется новый документ в новой вкладке. 4. В меню программы выберите раздел «Синтаксис» → «H» → «HTML».
Теперь можно начинать вводить код страницы. Введение кода страницы. Введите код, который я приводил ранее в статье:.