Как создать простую веб-страницу с помощью HTML

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

Использование HTML

Step-1-Version-6

1. Познакомьтесь с понятием HTML

HTML – это язык разметки документов для создания веб-страниц. Это скелет каждой существующей веб-страницы. Чтобы узнать, как он выглядит, откройте свой браузер, щелкните правой кнопкой мыши по странице и выберите опцию View SourceПосмотреть исходный код»). В открывшемся окне вы увидите HTML. Этот код именно то, что видит ваш браузер и трансформирует в веб-страницу:

  • В Google Chrome нажмите F12;
  • В Mozilla Firefox, используйте сочетание клавиш Ctrl + U, чтобы посмотреть исходный код страницы;
  • В Safari, выберите Вид – Исходный код:
Step-2-Version-6

2. Сделайте первую веб-страницу как можно более простой

Если вы этого не сделаете, то, скорее всего, получите страницу, перегруженную синтаксисом и скриптами.

  • Перед тем, как создать HTML страницу, важно помнить, что нужно писать весь код между открывающими и закрывающими тегами. Открывающий тег выглядит так: <___>. Закрывающий же тег выглядит так: </___>. В процессе создания “___” заменяется соответствующим кодом:
Step-3-Version-6

3. Перейдите в меню «Пуск» - «Программы» - «Стандартные»

Запустите приложение «Блокнот». Вам будет гораздо проще использовать Notepad++. Как только выберите язык HMTL, создаваемый код будет отображаться в различных цветах, упрощая работу и поиск ошибок:

Step-4-Version-2

4. Сообщите браузеру об используемом языке

В первой строке введите <! DOCTYPE> - это первый тег, который всегда должен быть в коде. Во второй строке добавьте <html>. Это второй тег, который необходимо добавить, так как именно он сообщает о том, что вы начинаете создание веб-страницы. Закрывать данный тег следует в самом конце кода, введя </html>. На этом веб-страница заканчивается:

Step-5-Version-6

5. Добавьте заголовок страницы, как показано на рисунке

Step-6-Version-6

6. Дайте название страницы

Название HTML страницы важно, так как оно дает посетителям представление о ее содержании. Кроме этого при добавлении сайта в закладки именно название страницы отображается в списке. Тег для добавления заголовка <title>. Закройте его после введенного названия (</title>). Заголовок будет отображаться на вкладке, но он не является названием всего веб-сайта:

Step-7-Version-6

7. Проработайте основное содержание страницы

Используйте тег <body>, чтобы обозначить начало "тела" документа. Затем закройте его тегом </body>. Основное содержание веб-страницы находится между этими двумя тегами.

  • Чтобы изменить цвет фона веб-страницы можно добавить стиль. Для этого добавьте тег <body style="background-color:silver">. Можно попробовать ввести другие цвета или использовать шестнадцатеричный код. Слова в кавычках являются атрибутами. Атрибуты должны быть заключены в кавычки!
Step-8-Version-6

8. Напишите текст между тегами <body>

  • Чтобы перенести часть текста на следующую строку (как после нажатия клавиши Enter), используйте тег <br>;
  • Хотите создать бегущую строку? Введите <marquee>ТЕКСТ СООБЩЕНИЯ</marquee>:
Step-9-Version-6

9. Добавьте несколько изображений

Если вы хотите разместить на простой HTML странице картинку из интернета, потребуется ввести следующий HTML код <img src="url(адрес файла в интернете)"> </img>. При этом стоит отметить, что закрывающий тег необязателен.

Step-10-Version-6

10. Убедитесь, что все теги закрыты

Код веб-страницы должен выглядеть следующим образом:

<title>Моя веб-страница</title> 
<body bgcolor="yellow">
 Я люблю wikiHow, потому что
<marquee>Это самый лучший сайт в мире</marquee> 
<img src="http://www.wikihow.com/skins/common/images/wikiHow_logo_5.gif"></body>
aid4082-760px-Create-a-Simple-Web-Page-With-HTML-Step-11-Version-6

11. Сохраните вашу работу

Перейдите в меню «Файл», нажмите «Сохранить как». Затем введите имя файла с расширением .html (например, testfile.html) и выберите тип файла «все файлы» или «текст». Оба этих условия необходимо выполнить, чтобы все заработало. Перейдите к сохраненному примеру HTML страницы и дважды кликните по нему, после чего браузер по умолчанию должен открыть созданную веб-страницу.

Перевод статьи “How to Create a Simple Web Page with HTML” был подготовлен дружной командой проекта Сайтостроение от А до Я.

18 декабря 2016 в 17:54
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок