Данная статья поможет вам ознакомиться с основами создания HTML страницы. Ознакомившись с основами, вы сможете создавать веб-страницы с нуля!
Использование HTML
1. Познакомьтесь с понятием HTML
HTML – это язык разметки документов для создания веб-страниц. Это скелет каждой существующей веб-страницы. Чтобы узнать, как он выглядит, откройте свой браузер, щелкните правой кнопкой мыши по странице и выберите опцию View Source («Посмотреть исходный код»). В открывшемся окне вы увидите HTML. Этот код именно то, что видит ваш браузер и трансформирует в веб-страницу:
- В Google Chrome нажмите F12;
- В Mozilla Firefox, используйте сочетание клавиш Ctrl + U, чтобы посмотреть исходный код страницы;
- В Safari, выберите Вид – Исходный код:
2. Сделайте первую веб-страницу как можно более простой
Если вы этого не сделаете, то, скорее всего, получите страницу, перегруженную синтаксисом и скриптами.
- Перед тем, как создать HTML страницу, важно помнить, что нужно писать весь код между открывающими и закрывающими тегами. Открывающий тег выглядит так: <___>. Закрывающий же тег выглядит так: </___>. В процессе создания “___” заменяется соответствующим кодом:
3. Перейдите в меню «Пуск» - «Программы» - «Стандартные»
Запустите приложение «Блокнот». Вам будет гораздо проще использовать Notepad++. Как только выберите язык HMTL, создаваемый код будет отображаться в различных цветах, упрощая работу и поиск ошибок:
4. Сообщите браузеру об используемом языке
В первой строке введите <! DOCTYPE> - это первый тег, который всегда должен быть в коде. Во второй строке добавьте <html>. Это второй тег, который необходимо добавить, так как именно он сообщает о том, что вы начинаете создание веб-страницы. Закрывать данный тег следует в самом конце кода, введя </html>. На этом веб-страница заканчивается:
5. Добавьте заголовок страницы, как показано на рисунке
6. Дайте название страницы
Название HTML страницы важно, так как оно дает посетителям представление о ее содержании. Кроме этого при добавлении сайта в закладки именно название страницы отображается в списке. Тег для добавления заголовка <title>. Закройте его после введенного названия (</title>). Заголовок будет отображаться на вкладке, но он не является названием всего веб-сайта:
7. Проработайте основное содержание страницы
Используйте тег <body>, чтобы обозначить начало "тела" документа. Затем закройте его тегом </body>. Основное содержание веб-страницы находится между этими двумя тегами.
- Чтобы изменить цвет фона веб-страницы можно добавить стиль. Для этого добавьте тег <body style="background-color:silver">. Можно попробовать ввести другие цвета или использовать шестнадцатеричный код. Слова в кавычках являются атрибутами. Атрибуты должны быть заключены в кавычки!
8. Напишите текст между тегами <body>
- Чтобы перенести часть текста на следующую строку (как после нажатия клавиши Enter), используйте тег <br>;
- Хотите создать бегущую строку? Введите <marquee>ТЕКСТ СООБЩЕНИЯ</marquee>:
9. Добавьте несколько изображений
Если вы хотите разместить на простой HTML странице картинку из интернета, потребуется ввести следующий HTML код <img src="/url(адрес файла в интернете)"> </img>. При этом стоит отметить, что закрывающий тег необязателен.
10. Убедитесь, что все теги закрыты
Код веб-страницы должен выглядеть следующим образом:
<title>Моя веб-страница</title>
<body bgcolor="yellow">
Я люблю wikiHow, потому что
<marquee>Это самый лучший сайт в мире</marquee>
<img src="http://www.wikihow.com/skins/common/images/wikiHow_logo_5.gif"></body>
11. Сохраните вашу работу
Перейдите в меню «Файл», нажмите «Сохранить как». Затем введите имя файла с расширением .html (например, testfile.html) и выберите тип файла «все файлы» или «текст». Оба этих условия необходимо выполнить, чтобы все заработало. Перейдите к сохраненному примеру HTML страницы и дважды кликните по нему, после чего браузер по умолчанию должен открыть созданную веб-страницу.
Перевод статьи “How to Create a Simple Web Page with HTML”
Источник: http://www.internet-technologies.ru/articles/article_3037.html