Как создать страницу html – Как написать простую HTML-страничку / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

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

создание-html-страницы

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

Вы можете написать html код в любом текстовом редакторе ( даже в блокноте ) но, я вам рекомендую для начало воспользоваться таким замечательным редактором как notepad++. Он очень удобный и простой в использований. Вы можете скачать его на официальном сайте https://notepad-plus-plus.org.

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

Открываем программу и как вы заметили новый файл с именем new 1, создался автоматически.

новый файл в notepad++

Этапы создания html страницы

Теперь из нового файла создаем html документ следующим образом: 1. Идем в меню файл и выбираем пункт сохранить как… или нажимаем горячие клавиши ( Ctrl+Alt+S)

2. В появившемся окне выбираем место, где хотим сохранить файл.

3. В поле имя файла пишем index и выбираем тип файла Hyper Text Markup Language file (*html; *htm; *shtml; *shtm; *xhtml;*hta).

название файла и его тип html document

После того как выбран тип файла, в конце имени файла автоматически вставляется расширение html.

расширение html

4. Нажимаем сохранить. Имя файла изменилось на

index.html

Название файла изменилось на index.html

Закрываем Notepad++ и едем в указанной папке, где сохранили файл. Там создался файл index, с расширением html и со значком браузера который установлен у вас по умолчанию. При двойном щелчке, файл открывается в вашем браузере. У меня браузер по умолчанию выбран опера, поэтому сохраненный файл выглядит так:

полученный html файл после сохранения

После того как открыли файл в браузере мы ничего не видим так как наш файл пустой, в нем нету ни одной строчки кода html. Давайте исправим ситуацию, напишем в файле пару строчек кода. Для этого идем в папку с нашим файлом, кликаем на него правым кликом мыши и в появившемся меню выбираем пункт Edit with Notepad++.

Edit with notepad++

Файл откроется в редакторе Notepad++. Теперь напишем в файле следующий код:


<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8" />
        <title>Файл html</title>
    </head>
    <body>
        <h2 align="center" > Привет Мир </h2>
    </body>
</html>

После этого нужно сохранить файл, для этого идем в меню файл и выбираем пункт сохранить или нажимаем горячие клавиши ( Ctrl + S )

сохранение html файла

Также есть еще один способ для сохранения файла, нужно нажать на значок дискеты который находится на панеле инструментов.

другой способ для сохранения файла

Обратите внимание на цвет дискеты возле имени файла. Если в файле сделаны какие то изменения, то цвет дискеты становится красным, это означает что файл не сохранен.

красная дискета в панель инструментов notepad++

После того как сохранили файл, цвет дискеты становится синим.

синяя дискета в панель инструментов notepad++

И так файл мы сохранили, давайте откроем заново его в браузере и посмотрим что получилось.

html страница в браузере opera

В браузере выводился заголовок Привет Мир, это означает, что мы все сделали правильно.

На этом пожалую все, думаю, вы поняли на 100 % как создать

html страницу и теперь у вас не возникнут трудностей сделать это.

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

<< Предыдущая статьяСледующая статья >>

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту [email protected]. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2014-02-19 06:58:52

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

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

Для начало давайте небольшой мануал, что отвечает за что.

Вообщем приступая к созданию нужно знать, что HTML-документ изначально будет делиться на 2 части. Первая, это голову документа за что отвечает head, но и само тело, что отвечает body, думаю все вам знакомо. Но и здесь должны на страницы быть закрывающие теги /head и /body. это обязательно.

Давайте начнем с head, который идет сразу после

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

Как пример:

Код

<title>Создаем страницу html</title>

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

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

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />  
<title>Название страницы.</title>  
</head>  
<body>  
Здесь размещаем информацию или код.
</body>  
</html>

Но нам нужно еще стили добавить, когда все заполнили, то сразу ниже стили ставим.

Код

<style type="text/css">  
Здесь как раз стили, что в CSS стоят  
</style>

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

PS - вот так сделали страницу демонстрация или как основном пишут DEMO на сайте.

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

Если меня спросить: с чего ты начинал изучать HTML? – я отвечу: с документации по HTML 3.1 и простого перебора тегов – написал и посмотрел, что получилось. Но лучше всего, если есть какая-то пошаговая инструкция с готовым решением задачи для новичков. Эта тема сейчас в тренде и я решил попробовать свои силы на этом поприще. В общем, давайте разбираться, как создать HTML страницу.

Шаг 1. Зайдите на сайт Notepad++ и скачайте последнюю версию этого бесплатного текстового редактора. Установите и запустите редактор на своём компьютере. Создайте новый документ. Действия достаточно простые и что-то расписывать здесь не вижу особого смысла.

Шаг 2. Наберите или скопируйте в поле редактирования следующий HTML-код:

<!DOCTYPE html>
<html>
<head>
  <meta charset="windows-1251">
  <title>Пример HTML страницы</title>
</head>
<body>
  <p>Привет, Мир!</p>
</body>
</html>

А теперь давайте разберёмся, что в нём к чему. ? так, перед нами стандартный HTML-документ, который начинается с объявления типа текущего элемента:

<!DOCTYPE html>

Это необходимо для того, чтобы браузер мог понять, как именно следует обрабатывать HTML-страницу. В данном случае приведён DOCTYPE для HTML5.

Далее идёт основной контейнер HTML-страницы, представленный тегом HTML, который состоит из двух основных контейнеров HEAD и BODY.

Контейнер HEAD (с англ. голова) является заголовком документа и содержит дополнительную информацию о HTML-странице. В приведённом примере, такой дополнительной информацией является объявление кодировки документа

windows-1251 в теге META и заголовок HTML-страницы: «Пример HTML страницы» в теге TITLE.

Почему я рекомендую использовать кодировку windows-1251, а не UTF-8? Об этом читайте в статье: «Какую кодировку использовать в html?»

Контейнер BODY (с англ. тело) является телом документа и содержит обрабатываемый и выводимы в окне браузера контент HTML-страцы. В приведённом примере, таким контентом является параграф: «Привет, Мир!» в теге P.

Шаг 3. Сохраните созданную HTML-страницу, как файл index.html. Здесь следует отметить, что HTML-страницы обычно имеют расширение .htm или .html, а файл с именем index зачастую используется как главная (открываемая по умолчанию) страница сайта.

Шаг 4. Откройте HTML-страницу в имеющемся у Вас на компьютере браузере. Для это воспользуйтесь пунктом меню «Запуск». А далее, если Вы хотите открыть HTML-страницы в браузере Firefox, вам нужно кликнуть соответствующий пункт в появившемся меню, например, «

Launch in Firefox».

Для дальнейшего изучения HTML языка, я рекомендую использовать небольшой справочник ХТМЛ разметки для начинающих, где приведены все основные теги и примеры их использования.

Главное не останавливаться на достигнутом и постоянно практиковаться в сознании HTML-страниц. Теперь Вы знаете как это делать.

Короткая ссылка: http://goo.gl/J3n8tF

Как создать веб-страницу | Теги DOCTYPE, html, head и body — Site on!

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

29.03.2013

Здравствуйте уважаемые читатели блога Site on! В прошлый раз мы говорили об основах HTML (XHTML) – языка гипертекстовой разметки. Сегодня у нас с вами будет вступительная статья в практику по созданию сайтов. А именно, сегодня мы создадим нашу первую веб-страницу всего за пару минут, и узнаем все подробности об её составляющих.

И так, ниже представлен макет самой простой веб-страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Как создать веб страницу?</title>
</head>
<body>
И здесь пишем любой интересующий нас текст.
</body>
</html>

Скопируем этот код в наш текстовый файл (блокнот) и не забываем поменять расширение файла на .html Таким образом мы получим готовую веб-страницу. Можете перетянуть её прямо в ваш браузер и насладиться результатом, а затем давайте же разберёмся во всём по порядку.

Тег !DOCTYPE

Первое, что появляется у нас в коде - это не закрывающийся тег

<!DOCTYPE>
вместе с его описанием. Без этого тега, между прочим, наша страница тоже работала бы, НО! Но писать его обязательно, так как он служит указателем для браузеров: какой разметкой и её версией мы собираемся дальше пользоваться (XHTML, HTML). Без указания DOCTYPE (типа документа) браузеры, из-за отсутствия информации о вашей страничке, автоматически переходят в таинственный Quirks Mode (эдакий режим совместимости), поведение которого абсолютно не предсказуемо для вашего сайта.

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

<!DOCTYPE>
мало, нужно также дать браузеру его полное описание, а именно
<!DOCTYPE html PUBLIC "-//W3C//DTD

Эта часть у всех одинакова, далее идёт тип и версия разметки. Лично я использую XHTML 1.0 Transitional (также есть Strict и Frameset), где Strict означает строгий синтаксис, Transitional – переходной (лояльный) и Frameset – синтаксис с фреймами. Не хочется долго на этом останавливаться, просто посоветую использовать либо Strict, либо Transitional. И вообще, старайтесь всегда приучать себя к определённым жёстким рамкам, и стараться всегда делать всё максимально по стандарту, к примеру, если тег НЕ обязателен к закрытию (p, li), то лучше всё равно его закрыть!

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

далее указываем ссылку на спецификацию

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

и не забываем в конце поставить угловую скобку.

Тег html

Следующим по списку идёт тег начала страницы

<html>
, который обязателен к закрытию (хотя современные браузеры могут закрыть его и без вас). Обращаю ваше внимание, что при использовании XHTML в теге
<html>
обязательно должна присутствовать ссылка на спецификацию xhtml и тег в конечном варианте выглядит как
<html xmlns="http://www.w3.org/1999/xhtml">

Тег head

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

Внимание! Обязательно указывайте мета-тег кодировки , как я сделал в примере выше

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
Более подробно о том, как правильно задать кодировку страницы читайте по ссылке.

Тег body

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

А на сегодня всё, спасибо за то, что уделили своё внимание. Если у вас возникли какие-либо вопросы – пишите в комментариях, я обязательно отвечу.

Заметки:

1) Тег head и тег body могут встречаться только по одному разу на странице: у сайта, как и у человека, может быть только одна голова и одно туловище. Естественно теги !DOCTYPE, html и title – тоже употребляются единожды на странице.

2) Теги html, head, body, title – обязательно должны иметь закрывающий тег!

3) Не ставьте enter’ов (переносов строки ) и пробелов (табуляций) в самом начале документа, пишите тег <!DOCTYPE> начиная с самого первого символа в вашем текстовом документе.

Пожалуйста, оцените эту статью
Средняя оценка: 4.68 из 5 (проголосовало: 53)

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!

Отправить ответ

avatar
  Подписаться  
Уведомление о