| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Oснова создания web-страниц
|
|
Oснова создания web-страниц
Теги HTML будем изучать, создавая свою первую web-страничку. Для этого нам понадобится самый простенький инструмент Windows и блокнот.
Наберём в блокноте текст (код HTML) приведённый ниже:
Листинг 1.1
<!DOCTYPE hml>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Web-страницы</title>
</head>
<body>
<h1>Справочник по HTML</h1>
<p>Приветствуем на нашем Web-сайте, всех тех, кто занимается сайтостроением и Web-дизайном.
Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых в создании сайта. В частности, о языке <strong>HTML</strong></p>
</body>
</html>
Создадим на нашем компьютере отдельную папочку для хранения наших html-файлов. Не забывайте так-же задать имя вашему файлу и сменить расширение с txt. на html. что-бы браузер смог его прочитать. Кодировка должна быть UTF-8.
Наша первая Web-страничка, написанная при помощи нескольких тегов HTML, создана! Напоследок надо глянуть как она выглядит в браузере.
При создании сайта, во избежании всевозможных ошибок, необходимо тестирование написанного html-кода во всех основных Web-обозревателях. Mozilla Firefox, Opera, Apple Safari, Google Chrome и Microsoft Internet Explorer - вот некоторые из них. Почему в нескольких - спросите вы. Каждый производитель такой программы старается сделать свою лучшей вот и получаются некоторые различия. Ну, а каждый пользователь Интернета использует ту, которая больше понравилась.
Вот что у нас получилось:
Справочник по HTML
Приветствуем на нашем Web-сайте, всех тех, кто занимается сайтостроением и Web-дизайном.
Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых в создании сайта. В частности, о языке HTML
Какой вывод? Web-страницы можно создавать не используя никаких html-редакторов - простой программой "блокнот".
Попробуем разобраться с нашим html-кодом. Рассмотрим, для примера, небольшую его часть (листинг 1.2).
Листинг 1.2
<h1>Справочник по HTML</h1>
<p>Приветствуем на нашем Web-сайте, всех тех, кто занимается сайтостроением и Web-дизайном.
Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых в создании сайта. В частности, о языке <strong>HTML</strong></p>
В начале идет заголовок материала затем один из абзацев текста, а еще какие-то слова вот в таких скобках < и >. Что же это?
Вот это и называется - теги HTML. Именно с помощью html-тегов соответствующий участок кода становится каким-то элементом web-страницы: заголовок, текст или таблица в тексте.
Парные теги <h1> и </h1> указывают, что текст, находящийся между ними, является заголовком. Тег </h1> - открывающий, а тег </h1> - закрывающий тег. Сам текст, размещенный внутри, называется содержимым тега. Именно к содержимому применяется действие тега.
Парный тег <p> создает на Web-странице абзац; содержимое тега станет текстом этого абзаца. Такой абзац будет отображаться с отступами сверху и снизу. Если он полностью помещается по ширине в окне Web-обозревателя, то отобразится в одну строку; в противном случае сам Web-обозреватель разобьет его на несколько более коротких строк. (То же справедливо и для заголовка.)
Парный тег html <strong> выводит свое содержимое полужирным шрифтом. Как мы видим, тег <strong> вложен внутрь содержимого тега <p>. Это значит, что содержимое тега <strong> будет отображаться как часть абзаца (тега <p>).
Рассмотрим важнейшие правила, согласно которым пишется HTML-код.
- Имена тегов html можно писать как прописными (большими), так и строчными (малыми) буквами. Традиционно имена тегов html пишут прописными буквами.
Между символами <, >, / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк.
В обычном тексте, не являющемся тегом html, не должны присутствовать символы < и >. (Эти символы называют недопустимыми.) В противном случае Web-обозреватель сочтет фрагмент текста, где встречается один из этих символов, тегом и отобразит Web-страницу некорректно.
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
