Как создать HTML-страницу: пошаговая инструкция, технология и рекомендации. Создание html страницы в блокноте: разъяснения для чайников Теги для web страницы


В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

Вы готовы? Тогда поехали!

Подключение к интернету для создания страницы на html нам НЕ нужно.

Нам понадобится

1) Выбираем текстовой редактор . На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как )
Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на:
1) для Windows
NotePad++ (скачать или )
Intype (скачать)

2) для Mac и Linux
Bluefish Editor (скачать)

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

2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla , Google Chrome , Opera , Yandex и Mail браузеры и тд.

Приступим к созданию страницы HTML

1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как .

Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с.html на конце, например index.html

Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить . Готово!

Часто задают вопрос о том, что не видно расширения файла . Разберём по порядку

Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать ) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

так НЕ должно выглядеть: photo, текстовой документ, game
так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe

Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:

Смотрим настройки файлов и папок:

Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить

Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить

Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить

3) вставляем в него Весь код (вместе с комментариями), указанный ниже:



<br>


Заголовок моей странички


4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:


Рисунок 1.

На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:



<br> Название Вашей первой странички <br>

Заголовок моей странички

Это моя первая web-страничка!

В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.



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

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head , который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете



<br> Название страницы <br>


Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы


<br> Название страницы <br>

Любой заголовок


Просто текст

Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом


Другой текст



Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).



<br> Название страницы <br>



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



<br>

Хочу выделить текст жирным, а этот уже курсивом



Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

Хочу выделить текст жирным, а этот уже курсивом

Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!

5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad) , либо установленный Вами другой текстовой редактор.

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

Мои поздравления!
Несложно же?)

Начнем наш сегодняшний урок с того, что создадим самую простейшую веб-страничку. Для этого сначала заготовим текстовый документ, потом преобразуем его в htm документ, затем вставим в него несколько строк кода и после этого откроем в браузере нашу созданную веб-страничку. После этого познакомимся с понятием теги, обязательными элементами и их разновидностями, которые должны присутствовать на каждой веб-страничке. Разберемся с их различиями и особенностями их применения. После этого выучим основные правила, необходимые при написании кодов. Они касаются обязательных элементов, правил написания тегов и особенностей браузера в восприятии кода.

Базовая HTML структура
Создадим предельно простой HTML документ. Для этого на компьютере создадим папку. Назовите ее как хотите. Заходим в нее, щелкаем правой кнопкой мыши по пустому полю и выбираем пункт «Создать» > «Текстовый документ». Открываем созданный текстовый документ и в верхнем меню выбираем пункт «Файл» > «Сохранить как…». В открывшемся диалоговом окошке в строке «Имя файла» пишем index.htm. В строке «Кодировка» выбираем UTF-8 и нажимаем «Сохранить». У нас появится файл index, в который мы и будем вписывать все HTML коды.

Теперь копируем код, приведенный ниже, и вставляем в файл index . Важно! Открывать этот файл нужно с помощью специального редактора. Я обычно пользуюсь «Блокнотом.» Для этого щелкаем правой кнопкой мыши по файлу index и выбираем пункт «Открыть с помощью…» > «Блокнот». Есть и другие специальные редакторы с подсветкой разметки. Кому как удобнее. После этого нажатием клавиш Ctrl+S сохраняем наши изменения и уже после этого два раза щелкаем по самому файлу index. В браузере откроется наша первая созданная веб-страничка.

Моя первая веб-страница

Это моя первая веб-страница

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

Каждый документ HTML должен начинаться тегом и оканчиваться его двойником, тегом. Помимо них, в данном файле содержатся еще три пары тегов, которые должны присутствовать в любом другом документе HTML. Пара тегов

И применяются для обозначения любой информации о самом документе HTML. Теги и предназначены для добавления заголовка, отображаемого в строке заголовка браузера. Теги и применяются для обозначения любого текста, отображаемого на странице HTML.

Обязательные элементы документа XHTML
В языке XHTML, более новой версии HTML, есть еще один обязательный для создаваемых Web-страниц элемент — тег. Он предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу. Этот тег указывается в верхней части файла и идентифицирует текущий документ HTML как удовлетворяющий требованиям XHTML (или совместимый со спецификацией XHTML). Если вы создаете XHTML-совместимый документ, он может выглядеть приблизительно так:

Moя XHTML страница Это моя первая XHTML страница.

Тег имеет три разновидности: Strict, Transitional и Frameset. В верхней части HTML-документа вы декларируете, какую именно из них хотите использовать.

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

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

Frameset Применяйте эту разновидность, работая с фреймами.

Обратите внимание еще на одно отличие кодов XHTML от обычных документов HTML: у тега появились три новых атрибута: xmlns, xml:lang и lang. В случае применения HTML вам достаточно было включить тег, чтобы идентифицировать файл как HTML-документ, однако в данном случае требуется добавление атрибута xmlns, подключающего документ к определению W3C языка XHTML, которое по-прежнему продолжает эволюционировать. Пока же запомните о необходимости включения тега и полного тега в коды всех своих веб-страниц.

Корректное написание кодов
Одних лишь тегов не достаточно для создания хорошей веб-страницы. Если при написании кодов HTML еще можно допускать некоторые погрешности, то коды XHTML требуют строгого соблюдения правил. Хотя текущие версии большинства современных браузеров способны правильно интерпретировать ваши коды, даже если они набраны из неверных тегов, последующие версии браузеров такой сообразительностью отличаться не будут. Вы можете уже сейчас подумать о будущем и научиться следовать некоторым базовым принципам написания веб-кодов, удовлетворяющих стандартам XHTML.

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

Используйте символы нижнего регистра для всех тегов. Для браузера записи

И равнозначны (хотя они не обязательно могут быть таковыми). Применяйте символы нижнего регистра при наборе всех своих команд, и вам не придется корректировать коды своих веб-страниц после возможного изменения стандартов XHTML.

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

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

Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.

Существует определенная иерархия вложенности тегов. Например, тег

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

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

Основы HTML - обязательные теги и создание HTML документа - 5.0 out of 5 based on 1 vote

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

Как вы уже знаете, большинство веб-страниц в интернет представлены в виде файлов с расширением html. Рассмотрим базовые теги такого документа и их предназначение.

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

Для того чтобы браузер понял что данная страница состоит из тэгов и предназначена для него необходимо чтобы она имела определенное расширение. Html документы, имеют расширения.html или.htm.

Сейчас мы создадим простую веб-страницу. Создать html документ, т. е. файл с расширением.html проще простого. Я предлагаю вам создать для этого специальную папку, куда вы будете складывать все то, что мы будем рассматривать в уроках.

Пока в целях изучения языка HTML мы не будем использовать для создания страниц специальные программы, такие например как широко известный . Наша цель на данном этапе изучить основы html.

Для создания страниц мы воспользуемся стандартным текстовым редактором, который есть в любой версии Windows. Из своей практики я знаю, что данный способ наиболее продуктивен и понятен, для человека который только начал изучение основ HTML.

В дальнейшем же для создания сайта, лучше всего использовать какой либо HTML редактор, это упростит вам работу. Лично я предпочитаю пользоваться редактором Dreamweaver.

А пока воспользуемся текстовым редактором блокнот. Поэтому идем в пункт меню "Пуск" >> "Все программы" >> "Стандартные" - и запускаем текстовый редактор блокнот.

Теперь скопируйте и вставьте в окно блокнота код, который написан ниже, он является основой для любого html файла:

Моя первая страница Вот вы и создали свою первую web страницу!!!

Вставили? А теперь выберите в блокноте пункт меню "Файл" и в раскрывающемся списке пункт “Сохранить как…”, откроется окно сохранения файла. Здесь нас будет интересовать поле "Имя файла". Сюда вам нужно вписать имя нашего файла, например "Моя первая страница", а вместо расширения.txt расширение.html.

Помните о том, что для размещения страниц в интернет названия им дают на английском языке, здесь мы дали название на русском просто в качестве примера. Смотрите на рисунок.

Затем выберите, ту папку, которую вы создали ранее, или любую другую папку на вашем компьютере и сохраните этот файл туда. Сам текстовый документ не закрывайте, мы еще будем с ним работать.

В результате того что Вы вписали код и изменили расширение с.txt на.html мы «превратили» текстовый документ в html документ. Теперь зайдите в ту папку, куда вы сохранили этот файл и откройте его вашим браузером. В результате вы увидите текст: "Вот вы и создали свою первую web страницу!!!"

После этого перейдите назад в наш блокнот, не закрывая окно браузера, и попробуйте поменять текст «Вот вы и создали свою первую web страницу!!!», на какой ни будь свой. Затем пройдите в пункт меню “Файл” >> “Сохранить” и перейдите в открытое окно браузера с этой страничкой, где щелкните по кнопке обновить страницу или нажмите сочетание клавиш Ctrl + R, страница обновится и браузер отобразит уже ваш текст.

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

Теперь разберемся, что за теги мы прописали в нашем файле. На самом деле это самые главные тэги html документа, они составляют основу HTML файла и должны быть в каждом HTML документе.

Первые из основных тэгов идущих в нашем коде это

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

В данном случае содержат теги, в этих тегах размещается название страницы, его вы можете наблюдать в самом верху окна браузера, в нашем примере там будет название «Моя первая страница». И последние теги из нашего кода это между этими тегами размещается непосредственно все содержимое веб-страницы, весь текст, графика, таблицы и т. д. Вот так выглядит основа любого HTML файла.

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

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: имя тега> … . Между начальным и закрывающим тегами находится содержимое тега - контент.

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

Теги могут вкладываться друг в друга, например,

Текст

. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:

Текст

.

HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.

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

Загрузка...
Top