Сайт в блокноте html готовый: Шаблон сайта на чистом HTML. Готовый код сайта

Как сделать сайт в блокноте?

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

Плюсы и минусы Блокнота

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

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

Тем более, что каждый редактор основан на языке html и его знание обязательно при работе с сайтами: изменение содержания страницы, добавлением или удалением кода.
В браузере вы можете переключиться с визуального режима в режим для редактирования страницы, в котором видно всю структуру сайта. В этом режиме вы сможете исправлять код, удалять его ненужные части, таким образом оптимизируя страницу. Давайте теперь перейдем непосредственно к самому созданию.

С чего начать и как сделать сайт?

Перед тем как начать работать с html и Блокнотом, нужно разобраться в основах. Самым важным понятием в языке программирования считается «тэг» — специальная команда, которую записывают в скобках. Например вот так: <команда>.

Самое важное то, что когда вы используете формат тэга, он должен иметь как начало так и конец. В начале вы открываете тэг: <тэг>. В конце его нужно закрыть, для этого используют такое сочетание: . Между этими частями вы можете поместить любую информацию, часть программы, текст.

Теперь когда мы разобрались с тем, что каждый тэг должен иметь начало и конец, поговорим о дополнительных функциях, которые ему присущи. Чаще всего в них используются параметры. Учитывая что тэгов в языке html очень много и каждый из них отвечает за определенную функцию, то и каждый указанный параметр имеет свое назначение. Как мы предупреждали вас — без знания языка сделать сайт в Блокноте тяжело. Тем не менее, если вы указываете параметр для тэга, это можно сделать так:

<тэг параметр=”значение этого параметра”> код страницы .

Разобравшись с тэгами давайте поговорим о структуре кода страницы. Каждая страничка состоит из двух частей:

1. Заголовок страницы, ее начало — в нем содержится служебная информация о вашей странице
2. Сам код, или «тело» страницы — именно эта часть будет отображена в визуальном режиме просмотра.

Для того чтобы обозначить заголовок и отделить его от остальной части кода нужно использовать тэг head. Для обозначения основного блока кода («тела») используют тэг body. В конце нужно использовать закрывающую форму тэга.

Также важно помнить о том, что для распознания в Блокноте html-кода нужно помещать весь код программы (вместе с телом и заголовком) в один общий тэги. Этот тэг позволяет определять программе, что данные команды относятся к этому языку. Некоторые браузеры могут самостоятельно определить язык, который используется для написания страниц, но при этом могут быть ошибки и сбои, что приведут к неверному отображению кода. Если вы будете использовать русский язык, то нужно указывать правильную кодировку: win-1251.

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

Код программы

Обычный сайт в блокноте

Наши советы и итог

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

1. Если вы используете парные тэги, помните о том, что их нужно закрывать. Когда вы используете несколько тэгов подряд — не перепутайте их порядок. Следите за тем какой тэг вложен в другой.
2. При ознакомлении с языком html следует учитывать новые стандарты, которые могут выходить в новых версиях. Следите за обновлениями.
3. Распечатайте на отдельный листик все новые тэги, которые вы выучили:

1. Во время написания кода страницы, особенно если вы используете парные тэги — прописывайте их сразу. Если у вас есть вложенные тэги, то выделяйте их отступлением от левого края документа — такое размещение поможет лучше разбирать код.
2. Для интереса и пополнения багажа знаний, открывайте различные странички в режиме редактирования кода — вы узнаете новые команды и увидите как нужно писать хороший код (последнее касается только хороших сайтов).

Мы надеемся что наши советы помогут вам в освоение такого сложного

Видео уроки

uchieto.ru

Создаем текстовый веб документ в Блокноте

Оглавление

Как научиться создавать сайты с нуля?. 1

Создаем текстовый веб документ в Блокноте. 1

Создаем правильный (грамотный) одностраничный html-документ. 2

Разница между веб документами с расширениями html и htm… 4

История HTML.. 4

Правильный DOCTYPE в HTML5 это <!DOCTYPE HTML>. 5

Элементы форматирования веб текста. 5

Заголовки. 6

Абзацы.. 6

Параграфы (выравнивание текста) 8

Цвет фона и текста. Размер и гарнитура шрифта. 9

Что еще нужно знать для создания сайтов?. 11

HTML и CSS. 12

JavaScript 12

PHP и MySQL.. 12

CMS. 12

Хостинг и домен. 13

Фреймворки и другие инструменты для упрощения разработки. 13

ЗАДАНИЯ.. 13

ВОПРОСЫ… 13

 

Неграмотный текстовый документ

В программе Windows Блокнот или аналогичной создайте любой текст, например, «Мой сайт» (рис. 1).

Рис. 1. Создание в Блокноте текстового документа

Сохраните документ командой Файл-Сохранить Как дайте этому документу название index.html (рис. 2). Тип файла – все файлы (это важно).

 

Рис. 2. Даем документу название

Рис. 3. Открываем файл в блокноте для редактирования

Откройте сохраненный файл с помощью браузера, например, Internet Explorer и просмотрите результат. Так создается простейший веб документ для Интернет. Еще примеры:

Создаем правильный (грамотный) одностраничный html-документ

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

<head> </head> — заголовок документа.

<body> </body> — тело документа.

В заголовке <head> </head>, используя теги <title> </title>, можно прописать название документа.

Для примера создадим простейшую текстовую HTML-страницу в программе Блокнот. Для этого надо создать текстовый файл (*.txt) и сохранить его с расширением *.htm (или *.html). Переименовать *.txt в *.htm удобно в любом файловом менеджере (коммандере), например, в NC или ТС, а просмотреть готовую страницу можно будет в любом браузере. Итак, листинг 1:

Листинг 1. Простейший html — документ

<HTML>

<HEAD>

<title>НАЗВАНИЕ ДОКУМЕНТА</title>

</HEAD>

<BODY>СОДЕРЖАНИЕ ДОКУМЕНТА</BODY>

</HTML>

Совет

Писать любой тег можно в любом регистре (не важно большими или маленькими буквами). Теги в HTML файле выполняются по порядку, столбиком: сверху — вниз.

Теперь сохраняем и меняем расширение TXT на HTM (рис. 4 и 5).

Рис. 4. Меняем расширение TXT на HTM

Рис. 5. Вид в браузере простейшего HTML-документа, созданного в программе Блокнот

Итак, создать одностраничный текстовый документ очень просто. У текстового файла, созданного в программе Блокнот и имеющего по умолчанию расширение для файлов *.txt необходимо изменить расширение для сохраненных на диск файлов на на *.htm или *.html. Имя такого файла для главной страницы сайта принято писать, как index. Таким образом, здесь и далее сохраняем все наши однастаничные веб документы как

index.html.

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>

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

Элемент <! DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <! DOCTYPE>. Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка HTML имеет номер пять и доктайп для нее должен выглядеть так — <! DOCTYPE html>.

Пример грамотного написания элементарной веб страницы с наиболее популярной сегодня кодировкой:

<! DOCTYPE html>

<html>

         <head>

                   <meta charset=»utf-8″>

                   <title>Это заголовок тайтл</title>

         </head>

         <body>

                   Это основное содержимое страницы.

         </body>

</html>

Здесь тег <meta charset=»utf-8″> задает правильное отображение русского языка на веб странице. Как выглядит этот пример в браузере смотрите по данной ссылке.

Еще пример:

Ниже рассматриваются основные теги, применимые к тексту документа.

Заголовки

В языке HTML определены 6 уровней заголовка, нумеруемых по убыванию их размера:

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<H5> </H5>

<H6> </H6>

Весь текст внутри таких скобок считается заголовком. Размер h2 соответствует самому крупному шрифту, а размер H6 — самому мелкому. Вот пример документа с использованием заголовков первого (h2) и второго (h3) уровней (Листинг 2):

Листинг 2. Меняем кегль (размер) шрифта

<HTML>

<HEAD>

</HEAD>

<BODY>

<h2> Заголовок первого уровня</h2>

<h3> Заголовок второго уровня</h3>

</BODY>

</HTML>

Этот код в браузере выглядит так:

Абзацы

Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге — каждый абзац начинается с новой «красной» строки. Абзац создается с помощью тега <p> таким образом:

<!DOCTYPE html>

<html>

         <head>

                            <title>Это заголовок</title>

         </head>

         <body>

                   <p>

                            Это абзац.

                   </p>

 

                   <p>

                            Это еще один абзац.

                   </p>

 

                   <p>

                            И еще один абзац.

                   </p>

         </body>

</html>

Так код будет выглядеть в браузере:

Разрыв строк, наподобие абзаца, можно задать записью вида <BR> (этот тег задает переход на новую строку). При этом задавать закрывающие скобки </BR> нет необходимости. Но, если закрывающий тег задан, то это не считается ошибкой. Код:

Этот код в браузере:

Параграфы (выравнивание текста)

Параграфы вводятся тегом <p> </p>. С помощью параграфов можно выравнивать текст по центру, по левому (правому) краю, или по ширине. Примеры:

 

<p align=»center»>текст</p>  текст выровнен по центру.
<p align=»left»>текст</p> текст выровнен по левому краю.
<p align=»right»>текст</p> текст выровнен по правому краю.

<p align=»justify»> текст</p> текст выровнен по ширине (по обоим краям).

Примечание

Если не задавать параграфы, то текст в документе выравнивается по левому краю.

Теперь давайте изучим листинг 3.

Листинг 3. Выравнивание текста документа

<html>

<head>

<title>Выравнивание текста</title>

</head>

<body>

<h2 ALIGN=CENTER>Текст по центру</h2>

<BR>

<BR>

<P ALIGN=RIGHT> Текст по правому краю</P>

</body>

</html>

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

Еще пример:

 Цвет фона и текста. Размер и гарнитура шрифта

Цвет фона и текста определяется шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного (Red) цвета, вторая — для зеленого (Green), и третья пара — для синего (Blue) цвета. #00 — минимальная насыщенность, #FF — максимальная насыщенность цвета. Пример изменения насыщенности красного цвета:

Подобрать нужную насыщенность цвета вы можете с помощью таблиц кода цвета HTML, которая есть в Интернет:

На веб страницах можно также использовать текстовое определение цвета: BLUE, RED и т.п., например, чтобы сделать цвет фона страницы серым, можно написать

<BODY BGCOLOR=»#808080″> или <BODY BGCOLOR=»GRAY»>. Эти записи равноценны.

Вот несколько примеров цветов в их текстовом и шестнадцатеричном коде:

Черный BLACK #000000

Зеленый GREEN #008000

Серебро SILVER #C0C0C0

Серый GRAY #808080

Белый WHITE #FFFFFF

Желтый YELLOW #FFFF00

Красный RED #FF0000

Голубой BLUE #0000FF

Для изменения цвета и размера шрифта используется метка <FONT> </FONT>. Ее атрибуты:

COLOR=»#hhhhhh» – цвет шрифта;

SIZE=»n» — размер шрифта;

FACE=»имя_шрифта» – гарнитура шрифта (arial, verdana, helvetica, sans-serif и другие).

Пример использования метки <FONT> приведен в листинге 4:

Листинг 4. Цвет фона и текста. Размер и гарнитура шрифта

<html>

<head>

Текст, размер, гарнитура шрифта

</head>

<body>

<BODY BGCOLOR=»GRAY»>

<FONT SIZE=»10″ COLOR=»RED» FACE=»SANS-SERIF»>

12345

</body>

</html>

Как видим по тегам, здесь на сером фоне крупным шрифтом красного цвета и без засечек написаны цифры 12345.

Что еще нужно знать для создания сайтов?

Не обольщайтесь тем, что знание HTML для разметки текста – это все, что нужно знать для создания сайтов. Для того, чтобы научиться самостоятельно создавать с нуля сайты, качественные современные сайты вам понадобятся знания следующих технологий:

1.                      HTML и CSS

2.                     JavaScript, jQuery

3.                     PHP и MySQL

4.                     любого популярного сайтового движка (WordPress, Joomla, Drupal)

5.                     понимание того, что такое хостинг и домен

Чем лучше вы разбираетесь в этих технологиях, тем более востребованным специалистом являетесь.

HTML и CSS

База. То, без чего немыслимо создание сайтов полноценным образом. Именно с языка html начинается создание сайта. Html — это язык разметки гипертекста, с его помощью создается каркас сайта, его структура, разметка. С помощью же языка CSS все эти блоки получают тот внешний вид, который необходимо. Если сравнить это с работой художника, то html — это набросок рисунка, а css — уже раскрашенный в цвета и полностью готовый рисунок. Но нужны обе технологии, потому что пустоту не оформишь, а без оформления сайты выглядели бы совсем невзрачно. Иными словами, html без css может существовать, а наоборот быть не может. HTML — основа всего и база, именно с его помощью формируется структура страниц.

JavaScript

JavaScript — с этим языком любой сайт оживает, начинает реагировать на действия посетителя. Что можно сделать на JavaScript? Массу всего. Например, проверку введенных значений в форму, переключатели, слайдеры, всплывающие окна и много-много другого. Для языка JavaScript написана библиотека jQuery, которая во многом значительно упрощает работу по написанию скриптов и управлению элементами.

PHP и MySQL

Это так называемая back-end разработка, а html, css и js — front-end. Бэк-эндом ее назвали потому, что на внешний вид сайтов php код почти никак не влияет, зато для работоспособности ресурса он имеет просто огромное значение. Почти все движки сайтов написаны на нем. Комментирование, регистрация и авторизация, отзывы, корзина товаров, поиск, галерея, загрузка файлов, обработка форм — все это лишь малая часть того, что реализовывается с помощью php. Ну, а MySQl? Это язык, с помощью которого происходят запросы к базе данных. База данных — одна из самых важных вещей в сайтостроении. Как вы думаете, где хранятся все ваши отзывы и комментарии на многочисленных форумах, профили в социальных сетях и статьи на блогах? Все это хранится в базах данных.

CMS

CMS — это сайтовые движки. Это разработанные специалистами веб-программы, которые позволяют управлять сайтом в удобной форме через панель управления. Почти все они написаны на PHP. Соответственно, приступать к изучению работы с движком лучше уже после того, как вы постигли хотя бы основы php. Нет смысла изучать много движков, в большинстве случаев вы просто не сможете одновременно усваивать столько информации. Лучше стать специалистом по какому-то одному движку, чем кое-как разбираться во всех. И я рекомендую выбрать движок WordPress. Позднее вы сможете попробовать и другие, когда у вас будет больше опыта.
Время изучения: От пары дней до многих месяцев, потому что движки имеют разную сложность и порог вхождения. Например, cms Drupal не рекомендуется для новичков ввиду своей сложности.

Хостинг и домен

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

Фреймворки и другие инструменты для упрощения разработки

Если вы всегда будете создавать сайты с нуля, используя только сами языки и написание кода, то времени и сил у вас на это уйдет гораздо больше. Реализовать адаптивный дизайн для сайта — это далеко не самая простая задача, особенно если сайт сложный по макету. Но, с css-фреймворком, вроде Bootstrap вы сможете очень легко и быстро делать адаптивные шаблоны, все потому, что в фреймворк вложена система сетки. Это позволяет вам реализовать полную адаптивность, порой не написав ни одной строки css-кода. Параллельный пример можно привести и с javascript. На «голом» javascript порой будет достаточно трудно и попросту неудобно писать какой-то скрипт. Другое дело — использовать библиотеку Jquery, которая упрощает написание скриптов в несколько раз.

Задание 1.

1.     Создайте в Блокноте правильный (грамотный) одностраничный html-документ с любым веб текст про своего домашнего питомца (кошку, собаку, рыбок в аквариуме или хомячка…). Можно написать про своего друга-приятеля (или про подругу). Документ должен иметь следующие параметры своего форматирования:

2.     Фон (BGCOLOR) — серый,

3.     Шрифт (COLOR) — синий,

4.     Текст выровнять (ALIGN) по центру,

5.     Размер шрифта (size) – 16,

6.     Гарнитура (face) – ARIAL,

7.     Название документа (title) – МОЙ КОТ (собака, хомяк и др…). Или, «Мой приятель Вася, одноклассница Маша» и т.д и т.п.

Задание 2.

В созданном вами одностраничном текстовом сайте поменяйте атрибуты одного (любого) слова:

8.     Шрифт – зеленый

9.     Размер шрифта – 24

10. Гарнитура – Times

11.  Кодировка UTF-8

<html><head><meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

</head><body bgcolor=»GRAY»>Моя собака<font size=»10″ color=»BLUE» aling=»CENTER» face=»ARIAL»>

<p>Моя <FONT COLOR=»RED»> собака <FONT COLOR=»BLUE»> очень пугливая, если побежит за котом, то потом наверняка будет от него убегать. Он очень боится громких звукой (Хлопушек, выстрелов и тд). <FONT SIZE=»5″> Его порода Йоркширский терьер,<FONT SIZE=»24″> маленькая собака которая гоняет больших собак. Он очень предан нашей семье, ждёт нас всегда никуда не уходя, поэтому мы гуляем без поводка. Мы любим его, а он любит нас.</p>

</font></body></html>

Что такое:

·        HTML, CSS, JavaScript, PHP, MySQL, CMS, Хостинг, домен, Фреймворки?

·        В чем разница между веб документами с расширениями html и htm?

·        Опишите HTML элементы форматирования веб текста — Заголовки h2-H6, Абзацы <BR>, Параграфы <p> </p>.

·        Какими командами можно произвести выравнивание HTML текста?

·        Как задать Цвет фона и текста, какой это цвет BLACK #000000?    

·        Для чего нужен <!DOCTYPE HTML>?

·        Какое правильное название имени и расширения для сохраненного веб документа?

·        Как задать размер и гарнитуру (семейство) шрифта?

·        Поясните следующий код:

<BODY BGCOLOR=»GRAY»>

<FONT SIZE=»10″ COLOR=»RED» FACE=»SANS-SERIF»>

12345

Что мы увидим в браузере?

·        В чем отличие заголовка документа от его названия (<head> </head> от <title> </title>)?

 

HTML Урок 2: Как создать и сохранить свой первый HTML-файл вручную

Пришло время испачкать руки и написать свой первый HTML-файл. Начнем с открытия программы редактирования текста. Если вы работаете на ПК с Microsoft Windows, откройте программу «Блокнот» (найдите ее в меню «Пуск» или просто нажмите и удерживайте клавишу Windows на клавиатуре и нажмите R, затем введите «блокнот» в командной строке запуска и нажмите клавишу ввода) . Если вы используете компьютер Macintosh, запустите приложение под названием «TextEdit» (которое можно найти в папке «Приложения»).

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

Этот код сообщает веб-браузеру, на каком языке мы используем компьютер. используя (HTML). Вы будете начинать каждую веб-страницу, которую когда-либо создавали, с этого кода.

Написание HTML похоже на приготовление бутербродов

Теперь мы готовы приступить к фактической структуре нашей страницы. Начните с добавления следующего кода в ваш документ, непосредственно под нашим последним фрагментом кода:

Начальный тег сообщает веб-браузеру, что мы хотим начать наш документ; аналогично конечный тег сообщает браузеру, что мы хотим завершить наш документ. Если наша страница представляет собой бутерброд, начальный и конечный теги — это куски хлеба.

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

 <тело>  

Элемент обозначает часть нашего документа, которая будет содержать наше фактическое содержимое (абзацы, изображения и т. д.). Вы можете подумать: «Но я думал, что это то, что делают теги?» На самом деле, в элементе содержится все, как наше фактическое содержимое (которое находится внутри элемента), так и более сложные элементы, о которых мы узнаем в следующих уроках. Пока просто знайте, что элемент находится внутри элемента.

Вот как должен выглядеть ваш документ на данный момент:

 


    <тело>
    
 

Наконец, самая интересная часть

Теперь давайте добавим наш первый контент на нашу страницу! Как насчет большого жирного заголовка? Добавьте следующий код под открывающим тегом:

 
Это большой жирный заголовок
 

Этот код поднимает хороший вопрос у начинающего программиста: « Как мне узнать, какой элемент использовать? Как вы решили использовать тег

?

”

Мы решили использовать элемент

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

,

и

для создания иерархии важности нашего контента.

Russian Stacking Dolls

На этом этапе полезно представить себе HTML как набор из 9 элементов. 0039 Русские матрешки . Меньшие элементы помещаются внутри более крупных элементов, которые помещаются внутри еще более крупных элементов и т. д. Наш заголовок находится внутри нашего элемента, который находится внутри нашего элемента. Чтобы полностью проиллюстрировать этот момент, давайте добавим на нашу страницу маркированный список. Добавьте следующий код прямо под закрывающим тегом :

 

    
Молоко
    
Хлеб
    
Яйца
 

Элемент

— это код для «неупорядоченного списка», а элемент
• — это код для «элемента списка». Точно так же, как ваш список покупок на клочке бумаги, список состоит из нескольких пунктов списка. Это отражено в нашем коде; наши многочисленные элементы списка вложены в наш единственный неупорядоченный список.

  Сохранение вашего документа

  Самое время сохранить наш документ и посмотреть, как он выглядит в нашем веб-браузере. В программе редактирования текста нажмите «Файл», а затем «Сохранить». Просто чтобы мы были на одной странице, давайте договоримся назвать файл «test.html». это очень важно чтобы наш файл заканчивался расширением «.html». Это сообщает нашему компьютеру, к какому типу файла относится наш документ (конечно, веб-страница!). Если вы работаете на ПК с Windows , обязательно щелкните раскрывающийся список под вводом имени файла с надписью «Сохранить как тип:» и выберите параметр «Все файлы». Это гарантирует, что ваш документ будет сохранен в правильном формате. Идите вперед и сохраните документ.

  Просмотр файла в веб-браузере

  Теперь перейдите туда, где вы выбрали для сохранения файла (я рекомендую создать новую папку на рабочем столе для хранения всех файлов обучения) и дважды щелкните «test.html». Это должно открыть нашу страницу в веб-браузере, и вас должен приветствовать довольно простой заголовок, который гласит: «Это большой жирный заголовок», за которым следует маркированный список продуктов.

  Присвоение вашей странице заголовка

  Возможно, вы заметили, что у нашей страницы нет заголовка (обычно отображается в строке заголовка нашего веб-браузера). Заголовки веб-страниц абсолютно необходимы, так как они играют огромную роль в поисковых системах, способных найти ваши страницы. Теперь, когда вы немного лучше знакомы с синтаксисом HTML, давайте продолжим и дадим нашей странице заголовок.

  Элемент

  В программе редактирования текста сохраните документ, а затем переключитесь в окно веб-браузера и обновите страницу (нажатие Control + R обновляет на ПК с Windows, а Cmd + R обновляет на компьютере Macintosh) . Обратите внимание, что наша страница теперь имеет заголовок в строке заголовка веб-браузера.

  Всего один последний шаг!

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

  Это означает, что вы впервые видите знак равенства или кавычки внутри элемента HTML. . Вы узнаете об этом новом синтаксисе в следующем уроке (HTML-атрибуты и значения), а пока просто довольствуйтесь копированием и вставкой этого кода, зная, что он делает вашу страницу законченной! Вы только что написали 100% действительную веб-страницу с нуля! Рукой! Это больше, чем могут сказать некоторые профессиональные веб-разработчики.

  Помните, никто никогда не обещал, что ваша первая веб-страница будет красивой! Важно то, что теперь вы знаете, как писать собственный HTML-код и создавать основные веб-страницы. Вы можете подумать: «Да, но я не знаю всех кодов элементов. Если кто-то не скажет мне, какой элемент использовать для описания части контента, я потеряюсь!» Позвольте мне предложить вам несколько слов утешения: вы уже знаете больше, чем думаете . По моим оценкам, 95% веб-сайтов используют один и тот же базовый набор HTML-элементов, который новичок может быстро и легко освоить. Следуйте остальным моим урокам, и вы быстро освоите HTML!

  Для справки, вот весь код, который мы только что собрали:

   
  
  
  
      <голова>
  
          <мета-кодировка="utf-8">
          
  
      
  
      <тело>
  
           
  Это большой жирный заголовок
   
  
          <ул>
              
  Молоко
              
  Хлеб
              
  Яйца
          

Если вы предпочитаете смотреть видео уроки, а не читать письменные уроки, ознакомьтесь с моим 8-часовым видеокурсом и изучите HTML, CSS и адаптивный дизайн на профессиональном уровне.

Узнайте, как создать первую веб-страницу

Создайте свою первую веб-страницу

Узнайте, как использовать редактор для создания первой веб-страницы.

Изучение HTML

Мы не научим вас кодировать HTML или CSS. Используйте для этого учебник, такой как W3Schools: начните с «Введение в HTML» и следуйте страницам до «HTML CSS».

Основные шаги

Это основные шаги, которые вы должны предпринять. Каждый шаг подробно описан ниже.

1. Установить редактор
2. Создайте папку для своего веб-сайта
3. Добавить веб-страницу (файл index.html)
4. Добавить HTML-код
5. Предварительный просмотр веб-страницы

1. Установите редактор

Для написания HTML-кода вам понадобится текстовый редактор. Вы можете использовать редактор, уже установленный на вашем компьютере (например, Блокнот), но настоятельно рекомендуется использовать редактор, подходящий для управления сайтом и написания кода. Мы рекомендуем:

• Атом
• Код Visual Studio
• Сублимтекст
• Codesandbox.io, онлайн-редактор (краткое руководство здесь)

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

2. Создайте папку для своего веб-сайта

Запустите редактор:

Создайте папку для своего веб-сайта, например, в папке «Документы»:

Мы можем сделать это из редактора (или использовать Windows Explorer/Finder):

В Atom: выберите File > Add Project Folder , нажмите New Folder , введите имя, выберите его, нажмите Select Folder :

Теперь вы готовы добавить файлы в папку сайта.

Важно: добавьте все файлы в папку веб-сайта

Все файлы, которые вы хотите добавить на свой сайт, должны находиться в папке веб-сайта. Поэтому, если вы хотите добавить изображения, скопируйте их в папку сайта (рекомендуется создать для этого подпапку, например, с названием «img»).

3. Добавьте веб-страницу (файл index.html)

Если файл без названия уже существует, пропустите следующую строку.

Если «безымянного» файла нет, добавьте файл через Файл > Новый файл :

Теперь у нас есть новый «безымянный» файл:

Затем сохраните «безымянный» файл: выберите Файл > Сохранить или нажмите CTRL+S. Дайте файлу имя index.html :

Теперь ваш проект в Atom должен выглядеть так:

Теперь вы готовы добавить код HTML в файл index.html .

4. Добавьте код HTML

Перейдите к введению HTML в W3Schools или к любому другому учебному пособию, в котором показано начало HTML-документа. Теперь скопируйте код примера HTML (выделите его, щелкните правой кнопкой мыши и выберите Скопируйте или нажмите CTRL+C):

Затем вставьте его в файл index.html в своем редакторе (используйте Правка > Вставить или CTRL+V):

Внесите некоторые изменения в код. Добавьте правильный заголовок, заголовки и текст абзаца (информация, показанная ниже, является лишь примером):

Есть ли более быстрый способ сделать все это? Да!

Создайте новый файл: нажмите Ctrl+N. Сохраните файл с помощью Ctrl+S (например, как index.html ).
Введите html и нажмите Enter, чтобы вставить основной код HTML.

Добавить изображение

Сначала добавьте новую папку «img». Щелкните правой кнопкой мыши папку веб-сайта и выберите 9.0157 Новая папка :

Добавьте имя «img» и нажмите Enter:

Скопируйте изображение, которое будет использоваться для страницы, в папку «img» (используйте Windows Explorer/Finder):

90 002 Затем вставьте его в подпапку «img» папки веб-сайта:

Теперь изучите главу учебного пособия W3Schools по изображениям. Добавьте код для элемента изображения, чтобы встроить изображение в HTML-документ:

5. Предварительный просмотр веб-страницы

Сохраните файл. ( Файл > Сохранить или CTRL+S)

Чтобы проверить, хорошо ли выглядит страница, вы можете просмотреть ее в своем браузере. В проводнике Windows (или Finder) перейдите к папке веб-сайта и дважды щелкните файл index.html :

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

Советы:

• Чтобы быстро перейти к папке веб-сайта, вы можете открыть ее прямо из Atom. Щелкните файл правой кнопкой мыши и выберите «Показать в проводнике».
• Вы также можете получить базовый предварительный просмотр внутри Atom: нажмите CTRL+SHIFT+M. Лучший предварительный просмотр может быть создан с помощью пакета browser-plus. См. внизу этой страницы информацию о том, как устанавливать пакеты в Atom.

Предварительный просмотр изменится только после того, как вы сохраните файл (нажмите CTRL+S) и обновите предварительный просмотр (нажмите F5). Но в браузере-плюс вы можете включить предварительный просмотр в реальном времени (значок с жирным шрифтом в виде молнии), который автоматически обновит предварительный просмотр (но вам все равно нужно нажать CTRL+S, чтобы сохранить файл):

Теперь вы можете дополнительно настроить страницу, сделать ее своей, попробовать что-то новое.
Если вы еще этого не сделали, то сейчас самое время узнать немного больше об HTML из руководств W3schools. В по крайней мере, прочитайте первые страницы от Введения до Стили и используйте / проверьте то, что вы узнали, добавив это в свой HTML-документ. Может быть даже добавить немного стиля ( перейдите к учебнику по CSS W3Schools, чтобы узнать больше).

Теперь вы готовы загрузить файлы на свой сайт. Это объясняется на отдельной странице:

Важно: ваша первая страница (домашняя страница) должна иметь имя index.html или index.php

Чтобы ваш адрес сайта работал, ваш сайт должен иметь индексный файл: ваша первая страница (домашняя страница) должна иметь имя index.html (или index.php ). Имена файлов чувствительны к регистру. Используйте только символы нижнего регистра для индексных файлов.

Проблемы с изображением? например изображение не отображается

Наиболее распространенная причина того, что изображения не работают, — это проблемы с именами файлов. На веб-сайте имена файлов и папок вводятся с учетом регистра. Поэтому вы должны быть осторожны, смешивая прописные и строчные буквы. Совет: всегда используйте символы нижнего регистра! Другие проблемы могут возникнуть при обращении к изображению в html-коде. Или вы забыли загрузить изображения. Некоторые примеры приведены ниже. Некоторые статьи по этим вопросам:

• Работа с файлами
• Причины, почему изображения не загружаются

Совет для Windows: всегда отображайте полные имена файлов в проводнике Windows. Перейдите на вкладку Просмотр , затем через параметры выберите «Изменить папку и параметры поиска»:

На вкладке View снимите флажок «Скрыть расширения для известных типов файлов» и нажмите Ok :

Пример: Различия в регистре (перепутывание верхнего и нижнего регистра)

9 0002 Можете ли вы определить, что здесь не так?:

В приведенном выше случае расширение файла указано в верхнем регистре.