Пример создания html страницы в блокноте
В первом уроке мы уже рассмотрели маленький пример создания html-страницы. Теперь создадим более сложную страничку. Хочу отметить, что я буду объяснять как это сделать без применения специальных программных средств. Все, что понадобится для работы — это обычный блокнот от Windows. Для более удобной работы рекомендую скачать Notepad++ (продвинутый блокнот с возможностью подсвечивания html-тегов). Итак, начнем.
Откройте блокнот и скопируйте в него следующее:
html> head> title>Главная страница - страница обо мне/title> /head> body> center>h1>Информация обо мне/h1>/center> Краткая биография обо мне Родился в 1985 году в городе Москва. Закончил в 2008 году МАИ. На данный момент работаю ведущим инженером в крупной авиакомпании. Моя мечта стать ведущим по машине. Поскольку я люблю авиацию, то хотел бы поделиться несколькими интересными фотографиями на эту тему br/>br/> center>img alt value">Два самолета" src value">https://img-fotki.yandex.ru/get/9931/160700675.0/0_110e34_54188f48_-1-orig"> /center> br/>br/> font style value2">color:green">Этот текст зеленый/font> br/>br/> b>Просто пример жирного текста/b> br/>br/> Низ страницы br/>br/> В данном примере мы рассмотрели кратко основные теги HTML, теперь можно пробовать создавать несколько связанных страниц через ссылки и выкладывать сайт в интернет. hr> Этот материал был написан благодаря сайту a href=http://zarabotat-na-sajte.ru/> http://zarabotat-na-sajte.ru//a> - за что я ему благодарен. br/>br/> Спасибо. До новых встреч! /body> /html>
Далее нажмите «сохранить как», в поле тип файла выберите «все файлы», а в названии напишите index.html . Обязательно в конце названия должно быть расширение .html (не .txt), иначе браузеры не будут интерпретировать его как веб-документ.
Если по каким-то причинам у Вас не получается создать html страницу, то Вы можете скачать предыдущий пример по ссылке: index.rar.
Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
Описание html тегов из примера
1. — эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
Любая html страница имеет следующую структуру:
html> head> . Заголовочные теги . /head> body> . Тело страницы . /body> /html>
2. — между этими тегами заключается весь видимый контент страницы.
3. — внутри этих тегов должны располагаться все заголовочные теги. Этот раздел можно опустить, но я не советую это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про читайте в описание заголовочных тегов
4. — между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют «тайтлом». Советую ознакомиться со статьей: как составить тег
Теперь перейдем к тегам, которые находятся в теле html страницы (внутри
и ).5. — эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет — центр экрана. В будущем рекомендуется отказаться от использования этих тегов.
6. — это один из класса тегов заголовочных тегов .. , обычно в него заключают название страницы. Например, у этой странице заголовочный тег «Пример создания html страницы».
эти теги имеют большой вес в ранжировании сайта, поэтому ими необходимо пользоваться аккуратно и с умом.
При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег , а дальше могут идти уже , и т.д. Главное, чтобы не было сначала , потом , потом и т.п. Должна быть строгая иерархия. Заголовков , и т.п. может быть много.
Более подробно про эти теги читайте в уроке 14 HTML теги — — заголовочные теги внутри страницы
7.
— это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.
8. — это одиночный тег, который выводит изображение.
- src — обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
Примечание:- Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL;
- Не забудьте указать расширение изображения. Например, .jpg , .gif , .jpeg .
Более подробно про
читайте в специальном уроке: html тег
9. — эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.
Примечание: — аналогичный тег.
Есть также свойство CSS font, в котором можно задавать все эти параметры.
10. — выделить жирным. Все, что заключено между и будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является .
Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.
11.
— одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее.
href=»URL» — этому параметру необходимо присвоить URL ссылки, на которую ведет ссылка. Является обязательным параметром.
Если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа. Например:
a href value">stranica_50.html">stranica_50.htmla> Можно писать и полный адрес страницы a href value">http://САЙТ.РУ/КАТЕГОРИЯ/stranica_50.html">http://САЙТ.РУ/КАТЕГОРИЯ/stranica_50.htmla>
Этому важному тегу посвящен специальный урок: HTML тег .
Более подробное описание этих и других тегов читайте в следующих уроках.
Уважаемый читатель, теперь Вы уже умеете создавать элементарные страницы с изображениями и ссылками. Описанные выше теги встречаются довольно часто и у них есть много различных параметров, о которых Вы узнаете далее. Целью этого урока было ознакомление с простыми тегами html страниц. Теперь советую перейти к следующим урокам.
Как писать html в блокноте
В каждом задании создайте гипертекстовый документ, изображение которого приводится на рисунке.
HTML-программу записывайте в многострочном поле ввода, используя расположенную там заготовку.
Кнопка Восстановить восстанавливает первоначальную заготовку, стирая набранный текст. Кнопка Показать открывает окно документа. Кнопка Закрыть — закрывает его.
- Откройте Блокнот.
- Выделите HTML-код в многострочном поле ввода (аккорд Ctrl+A , когда курсор внутри поля).
- Запомните код в буфере обмена (аккорд Ctrl+C ).
- Скопируйте текст в Блокнот (аккорд Ctrl+V , когда курсор внутри Блокнота).
- Сохраните код из Блокнота в файл task1.htm (для первого задания). Не забудьте в окне сохранения Блокнота в качестве типа файлов установить Все файлы .
Задание 1. Первый документ
Создайте документ, вид которого показан на рисунке. Не забудьте задать правильный заголовок окна документа и написать в тексте свою фамилию. Сохраните документ в файл task1.htm (каталог назовёт учитель).
Задание 2. Понедельник начинается в субботу
Создайте документ, вид которого показан на рисунке. Текст можно скопировать прямо с этой страницы через буфер обмена. Сохраните документ в файл task2.htm (каталог назовёт учитель).
Создаем текстовый веб документ в Блокноте
В программе Windows Блокнот или аналогичной создайте любой текст, например, «Мой сайт» (рис. 1).
Рис. 1. Создание в Блокноте текстового документа
Сохраните документ командой Файл-Сохранить Как дайте этому документу название index.html (рис. 2). Тип файла – все файлы (это важно).
Рис. 2. Даем документу название
Рис. 3. Открываем файл в блокноте для редактирования
Откройте сохраненный файл с помощью браузера, например, Internet Explorer и просмотрите результат. Так создается простейший веб документ для Интернет. Еще примеры:
Создаем правильный (грамотный) одностраничный html-документ
Разметка элементов языка HTML сопровождаются специальными скобками: открывающая скобка отмечает начало части страницы, а закрывающая отмечает конец этой части страницы. При этом, как правило, документ состоит из двух частей – заголовка и тела.
- заголовок документа.
— тело документа.
В заголовке , используя теги , можно прописать название документа.
Для примера создадим простейшую текстовую HTML-страницу в программе Блокнот. Для этого надо создать текстовый файл (*. txt ) и сохранить его с расширением *. htm (или *. html ). Переименовать *. txt в *. htm удобно в любом файловом менеджере (коммандере), например, в NC или ТС, а просмотреть готовую страницу можно будет в любом браузере. Итак, листинг 1:
Листинг 1. Простейший html — документ
Писать любой тег можно в любом регистре (не важно большими или маленькими буквами). Теги в HTML файле выполняются по порядку, столбиком: сверху — вниз.
Теперь сохраняем и меняем расширение TXT на HTM (рис. 4 и 5).
Рис. 4. Меняем расширение TXT на HTM
Рис. 5. Вид в браузере простейшего HTML-документа, созданного в программе Блокнот
Итак, создать одностраничный текстовый документ очень просто. У текстового файла, созданного в программе Блокнот и имеющего по умолчанию расширение для файлов *.txt необходимо изменить расширение для сохраненных на диск файлов на на *.htm или *. html . Имя такого файла для главной страницы сайта принято писать, как index . Таким образом, здесь и далее сохраняем все наши однастаничные веб документы как index . html .
Разница между веб документами с расширениями html и htm
Hyper Text Markup Language (HTML) — стандартный язык гипертекстовой разметки документов, образующих веб-ресурсы. Файлы, написанные на html, обычно имеют расширение имени *.HTM или *.HTML. Разница между html и htm в единственной лишней букве расширения имени файла. Больше распространено именно html, но ничто не мешает сокращать по своему усмотрению. Такое расширение происходит от полного названия языка гипертекстовой разметки – Hyper Text Markup Language. Последнее слово опускается, и получается htm. Ранее это было продиктовано необходимостью ограничения на количество букв в расширении имени файла: старые операционные системы понимали только три знака в расширении файла. Сегодня таких условий нет и от наличия или отсутствия одной последней буквы в веб документе ничего принципиально не меняется. Однако при работе в старых операционных системах и программах под них пользоваться придется расширение *.htm. Итак, буква «l», образуется от последнего слова аббревиатуры HyperText Markup Language. Файлы с расширением имени html более современны и распространены сегодня. Расширение htm устарело.
История HTML
Язык HTML был создан Тимом Бернерсом-Ли в 90-х годах прошлого века. Изначально главной функцией первой версии HTML было корректное, без каких-либо структурных искажений, воспроизведение текста на различных устройствах вывода информации. За прошедшее время HTML претерпел существенные изменения и значительно расширил возможности верстки документов. Язык имеет несколько версий:
HTML 1.0 — начало 90-х годов. Спецификаций не существует, так как единого официального стандарта языка на тот момент не было. Язык был ориентирован только на обработку текста и применение к нему атрибутов — жирный текст, курсив etc.
HTML 2.0 — появилась поддержка форм.
HTML 3.2 — появилась возможность создания таблиц, отображение математических формул, эффект обтекания изображений.
HTML 4.0 — были отменены некоторые элементы HTML, взамен которых было предложено использовать таблицы стилей CSS. Была добавлена поддержка скриптов и фреймов.
HTML 4.01 — доработанная версия 4.0.
HTML 5 — 2010-й год — нынешнее время.
Правильный DOCTYPE в HTML5 это
DOCTYPE указывает тип документа (веб документ). Это необходимо, чтобы браузер понимал, согласно какому стандарту отображать текущую страницу. Валидация сайта (проверка сайта на ошибки кода) позволяет следить за правильным отображением сайта в разных браузерах. Валидаторы (сервисы для проверки сайтов на наличие ошибок в структуре документа) проверяют HTML-код на соответствие определенному стандарту, который указан в самом начале любой HTML-страницы первой строчкой.
Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать . Кроме того, перед тегом обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка HTML имеет номер пять и доктайп для нее должен выглядеть так — .
Пример грамотного написания элементарной веб страницы с наиболее популярной сегодня кодировкой:
Это основное содержимое страницы.
Структура страницы — Основы HTML, CSS и веб-дизайна
До этого момента мы рассматривали отдельные элементы. Теперь давайте посмотрим на целую HTML-страницу.
Создайте у себя на компьютере файл index.html . Вы можете использовать любой текстовый редактор, например, встроенный в Windows блокнот. Но лучше использовать специальный редактор кода, например, VS Code .
Впишите в файл такое содержимое:
Теперь откройте файл в браузере. Вы увидите пустую страницу. Можете заглянуть в исходный код страницы — там будут те же строки кода.
Все эти элементы — обязательны.
HTML-документ должен начинаться с указания формата. Раньше там указывали версию HTML, но сегодня достаточно простого указания . Мы изучаем современный стандарт HTML и не будем заботиться о поддержке старых форматов и старых браузеров.
Всё содержимое документа обёрнуто в теги . У этого элемента могут быть атрибуты, например, такой: . Так мы можем явно предупредить браузер, что этот документ — на русском языке.
Внутри находятся два элемента: head и body . Голова и тело :). Содержание «головы» не видно на самой странице. А содержание «тела» видно.
Внутри head указываются так называемые метаданные и дополнительные файлы, необходимые для документа. «Мета» означает «над», «уровнем выше». Метаданные — это данные о данных. Например, здесь можно указать заголовок страницы. Он будет выведен в окне или вкладке браузера:
Моё резюмеА также информацию о кодировке страницы:
charset="UTF-8">Всё, что мы делали в предыдущих уроках, помещается внутрь body . Это и есть то, что видно посетителю страницы.
Моё резюме Алексей Примадонин Веб-разработчик href="mailto:alprim@grail.com">alprim@grail.com , href="https://github.com/alprim">github.com/alprimСупер! Мы сделали полноценную страницу. Но, честно говоря, она выглядит. не очень. Пока текста мало — все более-менее нормально, но с увеличением текста и других элементов страница будет выглядеть все более неопрятной.
Пора научиться задавать стили содержимому.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар « Как самостоятельно учиться »
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях: