Пример создания 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 страниц. Теперь советую перейти к следующим урокам.
Как создать простую веб страницу в Блокноте
В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.
Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.
Количество просмотров этой статьи: 233 887.
Вас интересует веб-дизайн? Чтобы попробовать свои силы в создании веб-страниц, необязательно пользоваться сложными программами. Веб-страницу можно создать в Блокноте, предустановленном на компьютерах с Windows. В качестве языка программирования будет использован HTML — HyperText Markup Language (язык гипертекстовой разметки). Вы можете написать HTML-код страницы в Блокноте или любом другом текстовом редакторе, а затем просто сохранить файл как HTML-документ. Этот язык легко изучить, даже если у вас нет навыков программирования. Итак, в нашей статье мы расскажем, как создать простую веб-страницу с помощью Блокнота.
Как создать HTML-документ
Щелкните по Блокнот . Это голубой значок в виде блокнота верхней части результатов поиска. Откроется Блокнот.
Нажмите Сохранить как. . Эта опция находится в открывшемся меню «Файл». Откроется окно «Сохранить как».
Откройте выпадающее меню «Тип файла». Оно находится в нижней части окна; в нем отобразится опция «Текстовые документы (*.txt)». Нажмите на нее, чтобы появилось выпадающее меню.
Щелкните по Все файлы . Эта опция находится в выпадающем меню. Теперь файл можно сохранить как HTML-документ.
- Например, чтобы сохранить документ на рабочем столе, прокрутите вверх и нажмите «Рабочий стол» на левой панели.
- Если Блокнот неожиданно закрылся или вы хотите вернуться к документу позже, щелкните правой кнопкой мыши по HTML-файлу и в меню выберите «Изменить».
Как создать простую веб страницу с помощью HTML
В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.
Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.
Количество просмотров этой статьи: 246 207.
В этой статье мы расскажем вам, как с помощью HTML-кода создать простейшую веб-страницу. HTML является одним из основных компонентов интернета, потому что задает структуру веб-страниц. Веб-страницу можно создать в текстовом редакторе, который есть в Windows или macOS.
Как добавить тег «head» (описание веб-страницы)
Введите и нажмите ↵ Enter . Этот тег содержит описание веб-страницы и заголовочные элементы. Контент этого тега на странице, как правило, не отображается. Контентом являются описание страницы, метаданные, таблицы стилей CSS и другие языки сценариев. [1] X Источник информации
Введите и нажмите ↵ Enter . Этот тег закрывает тег описания страницы. На данном этапе HTML-код должен выглядеть примерно так.
html> head> title>Моя веб-страницаtitle> head>Как добавить тег «body» (весь контент)
Введите тег под закрывающим тегом «head». Этот тег содержит весь контент HTML-документа. Контент этого тега отображается на веб-странице.
Введите . Этот тег содержит заголовок страницы. Заголовок — это текст большого размера, который, как правило, расположен вверху страницы.
- Добавьте дополнительные заголовки по мере необходимости. Можно создать до шести заголовков; это делается с помощью тегов — . Заголовки будут иметь разные размеры. Например, код для создания трех заголовков разного размера будет таким:
h1>Добро пожаловать на мою страницу!h1> h2>Меня зовут Макс.h2> h3>Надеюсь, вам не будет скучно.h3>Введите
. Этот тег содержит абзац текста. Такой тег отобразит текст нормального размера.
Введите
после текста и нажмите ↵ Enter . Этот тег закрывает тег абзаца текста. Ниже приведен пример абзаца в HTML-документе:
- Чтобы создать несколько абзацев под одним заголовком, добавьте подряд несколько строк.
- Измените цвет текста. В начале текста введите тег , а в конце тег . Вместо слова «цвет» подставьте нужный цвет (на английском языке), причем кавычки не удаляйте. Эти теги позволят изменить цвет любого текста (например, заголовка). К примеру, чтобы сделать текст синим, введите следующий код:
Киты — величественные животные.
- Также шрифт можно сделать полужирным, наклонным и другим. Ниже приведены примеры форматирования текста с помощью HTML-тегов: [2] X Источник информации
b> Полужирный текст b> i> Наклонный текст i> u> Подчеркнутый текст u> sub> Подстрочный текст sub> sup> Надстрочный текст sup>
