Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Как создать html страницу

Урок 1 - Как создать html страницу?

В данном уроке будет описано как создать самую простую html страницу не используя специальных программных средств будь то редакторы или браузеры. Если у вас установлена операционная система Windows, то нам будет достаточно блокнота и любого браузера. Это может быть Google Ghrome, Opera, Safari и т.д.

И так начнем. Для начала немного информации.

HTML (HyperText Markup Language) – язык гипертекстовой разметки. Именно HTML сообщает браузеру информацию необходимую для отображения web странички. Он поясняет браузеру, как располагать текст, где вставить картинку, или таблицу. Но как он это делает? Посмотрите на код приведенный ниже и подумайте, что и для чего используется.

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

Привет мир!

Меня зовут Маркус, и это моя первая html страничка.

Когда браузер считывает вашу html страницу, он преобразует теги которыми размечен основной текст страницы. Теги — это обычные символы, заключенные в угловые скобки, например, ,

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

Пришло время посмотреть, для чего используются теги, заодно создадим свою первую html страницу.

Откроем текстовый редактор Блокнот.

Напишем в нем следующий код. Моя первая страница
Привет мир!

Меня зовут Маркус, и это моя первая html страничка.

Сохраняем наш файл через выбирая Сохранить как.

В появившемся окне выбираем тип файла Все файлы(*), прописываем имя файла index.html и выбираем кодировку utf-8. Жмем сохранить.

Заходим в папку в которую сохранили файл и запускаем его.

На экране браузера должно отобразиться следующее:

Первый html документ создан. Поздравляю. Теперь пришло время разобраться что-же мы сделали и внести несколько изменений в код нашей страницы.

Кто что делает?
-- сообщает браузеру о начале html страницы. -- начинается голова веб страницы, место подключение стилей и другой информации Моя первая страница -- Заголовок веб страницы, отображается на вкладке браузера. -- конец головы веб страницы -- начало основной части страницы

Привет мир!

-- заголовок первого уровня

-- на страницу подключается изображение logo.png

-- начало абзаца Меня зовут Маркус, и это моя первая html страничка.

-- конец абзаца -- комментарий, не отображается браузером, но содержится в коде страницы. -- закрывается основная часть страницы -- закрывается html документ.

Мы кое о чем не рассказали. Подумайте, что делает тег strong и в качестве упражнения попробуйте добавить на страницу еще несколько абзацев и заголовков. И да, не забудьте поместить в папку с вашей страничкой картинку с расширением png. Переименуйте ее в logo и обновите вашу страницу.

Урок 2. Размечаем текст

Создание HTML страницы

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

Абсолютно все теги обязательно окружаются угловыми скобками . Существуют парные (создают контейнер), которые состоят из открывающего и закрывающего контейнер тега и одиночные теги. Парные теги закрывают контейнер с благодаря символу “/”, пример - .

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

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

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

- данный парный тег очень важен, его содержимое задаёт название страницы. Название отображается в верхней вкладке браузера активной страницы. К примеру, на этой странице установлен следующий title: Создание html страницы|Как создать html страницы. Также содержимое тайтла, имеет большой вес при индексации поисковыми роботами.

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

Уже благодаря вышеперечисленным тегам, можно создать web страницу HTML. Хоть такая страница и мало кого впечатлит, но не всё сразу. Забейте в Notepad++ или Блокнот следующий код:

Если вы в Блокноте, нажмите вкладку Файл > Сохранить как… , после чего напишите имя файла с расширением .html, к примеру index.html или hello.html, сохраните. В итоге появится файл, который можно открыть любым браузером.

Если вы в Notepad++, также нажмите вкладку Файл > Сохранить как… , но здесь следует задавать чистое имя (без расширения). Расширение к сохраняемому файлу добавляется с помощью вкладки Тип файла, где необходимо выбрать: Hyper text markup language. Должно получиться что-то вроде этого:

Открываете созданный файл любым браузером и празднуете свою первую, маленькую победу, ведь вопроса: «как создать HTML страницу?», у вас уже не возникает.

Дата первой публикации: 25.06.2016Дата последнего обновления: 25.06.2016

Рекомендовать друзьям:

Уроки html

Содержание:

Уроки по практическому изучению HTML. Сейчас вы узнаете, как создать простенькую html-страницу в обычном текстовом редакторе Блокнот. Познакомитесь со структурой и обязательными правилами оформления html-документов, узнаете о разнице между версиями HTML, XHTML и HTML5.

Чтобы создать страницу html, наберите в Блокноте следующие несколько строк:

Структура документа html, xhtml

Скриншот наглядно показывает структуру документа html, которая должна соответствовать следующим требованиям: в первой строке - указан тип документа. Далее следует тег Html, в который вложены теги Head и Body. В теге Head располагаются служебные теги: link, meta, base, script - они не отображаются на странице и тег title - название веб-страницы, которое видно в заголовке вкладки браузера. В теге Body расположены видимые элементы разметки (у нас - заголовок и абзац).

Все вложенные элементы следует закрывать в порядке, обратном их открытию. Некоторые теги не имеют закрывающего тега, некоторые содержат атрибуты с определенными значениями, пример для обоих случаев: тег Meta в строке 4, у него атрибут Charset, а его значение utf-8 и нет закрывающего тега.

Для того чтобы создать html-страницу, просто сохраним наш документ в формате .html, задав ему имя, у меня - struktura. Обратите внимание, что нужно изменить «Тип файла» и выбрать кодировку, у меня выбрана - универсальная UTF-8:

Чтобы просмотреть нашу html-страницу - откроем ее в браузере:

Наш html-документ соответствует версии html5. Эта версия, видимо, будет одобрена в 2014, однако большинство элементов html5 читаются основными браузерами, в т.ч. Internet Explorer, с версии 9. Вот тот же документ, только в русской кодировке windows-1251. Для русскоязычных сайтов используется кодировка windows-1251 или универсальная utf-8. Документ соответствует распространенной версии XHTML 1.0 Transitional:

Обратите внимание, что в коде страницы изменилась первая строка, содержащая тег DOCTYPE, объявляющий тип документа. Смотрите о правильном написании тега !DOCTYPE для всех версий в справочнике. К тегу Html в строке 2 добавлен обязательный для xhtml-документов атрибут xmlns. Изменение в строке 4: это тег Mета, задающий кодировку документа.

Разница версий html, xhtml и html5

Прежде всего: тег !DOCTYPE помогает браузеру распознавать и правильно интерпретировать веб-страницы. XHTML - это расширенный HTML и отличается более жесткими требованиями к синтаксису. Наиболее распространенными версиями являются HTML 4.01 и XHTML 1.0, и их разновидности Transitional, Frameset и Strict.

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

Начинающим лучше выбрать XHTML 1.0 Transitional, его намного проще читать. Если вы выберете HTML 1.0 Transitional, то старайтесь соблюдать правила оформления, как в документах xhtml - путаницы меньше. В HTML5 более либеральные правила - касается, прежде всего, вложенности тегов.

Правила оформления документов

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

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

В HTML, кроме атрибутов id и class, не важен используемый регистр символов, в XHTML - только строчные буквы, а все значения атрибутов обязательно заключаются в кавычки. В следующем уроке рассмотрим элементы тега Body, структурирующие текст: заголовки, абзац, списки. А далее, по плану: вставим на страницу изображения, свяжем html-страницы в единый сайт с помощью ссылок.

Содержание:

О партнёрках

получить

Сайт с нуля

получить