Сайты - строим сами
Сайты - строим сами
Главная Введение Основы HТМЛ Формат и цвет Картинки и ссылки Таблицы Фреймы Основы CSS
Вёрстка сайта Формы в html



Основы HTML

HTML – Это язык, с помощью которого программа просмотра Интернет-страниц получает указания, что и как ей показывать. Такую программу называют браузером, в Windows это по умолчанию Internet Explorer.

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

.       Откроем блокнот и поместим туда следующее (только то, что выделено черным):
<html> -начало страницы сообщение браузеру что используется html
<head> -буквально голова, по русски шапка документа
</head> - голова (шапка) закончилась
<body> -тело, рабочая часть страницы
</body> -окончание рабочей части
</html> -окончание страницы

Это теги (tag). Каждый из них отдает команду браузеру на то или иное действие. Большинство из них идет в паре: октрывающий <...> и закрывающий </...>. Но бывает, что закрывающий тег не нужен, например < br>, тег переноса на следующую строку, как клавиша Enter.

Теперь между тегами < head> и </head> вставим заголовок (титул) < title> Настоящая страница </title>. Это то, что будет отображатся в заглавии окна, в верхнем левом углу экрана монитора, перед названием браузера. Любой текст помещенный между тегами < body> и </body> будет отображаться в рабочей области страницы с параметрами (размер, цвет, шрифт, и т.д.) принятыми по умолчанию в браузере.

Итак, что получилось?

<html>
<head>
<title>
Настоящая страница</title>
</head>
<body>
Текст который должен находится на странице
</body>
</html>

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

Теперь надо сохранить текстовый документ и закрыть блокнот. Имя пока можно не менять, главное запомнить папку в которой он сохранен. Потому что теперь у этого документа надо сменить расширение. Расширение это несколько английских букв в имени файла, стоящих после точки, например: file.txt,  text.doc,  song.mp3,  picture.jpg ,  table.xls и т.д. которые сообщают компьютеру с чем он имеет дело, с текстом, звуком, картинкой или чем-то еще. Нам нужно, чтобы наш докумен воспринимался как файл html.

Небольшая сложность состоит в том, что например в Windows XP, расширения файлов скрыты по умолчанию и при переименовании файла расширение не меняется. Неопытный пользователь может просто не понять о каких расширениях идет речь.
Делаем так: ПАНЕЛЬ УПРАВЛЕНИЯ---->ПРОИЗВОДИТЕЛЬНОСТЬ И ОБСЛУЖИВАНИЕ---->ТИПЫ ФАЙЛОВ(в меню слева)---->в появившемся окне СВОЙСТВА ПАПКИ выбрать закладку ВИД снять галочку у пункта СКРЫВАТЬ РАСШИРЕНИЯ ДЛЯ ЗАРЕГИСТРИРОВАННЫХ ТИПОВ ФАЙЛОВ, нажать ОК. Потом лучше все вернуть на место, но в данных момент таким образом у файлов появяться расширения, и вы поймете, о чем собственно я. Еще лучше использовать файловый менеджер, в нем файлы переименовываються вместе с расширениями.

Едем дальше. Файл, который мы сохранили, как Безымянный.txt надо переименовать в index.html, если всё прошло успешно, иконка файла должна изменится на другую, обозначающую файл интернета.   Имя index по умолчанию присваивается той странице сайта, с которой начинается просмотр, обычно главной странице. А с неё осуществляется переход на другие страницы. Простейший сайт, это ничто иное как набор страниц.
     

Теперь, созданый файл html открываем в браузере. Если что-то не вышло, внимательно проверьте синтаксис. Для этого не закрывая файл в браузере откройте его в блокноте, щелкнув по нему правой кнопкой и выбрав пункт открыть с помощью... Так можно редактировать файл. Только не забывайте сохранять внесенные изменения. А, чтобы увидеть их в браузере нужно ОБНОВИТЬ страницу(F5).

Если получилось, ну что же, хорошо в общем это уже страница интернета, её можно поместить на сервер, и кто-то увидит ваши гениальные мысли. Если будет знать, как Вашу страницу найти. Но выглядеть это будет очень примитивно. Текст будет смотрется единым блоком, нет картинок и ссылок на другие страницы. В общем, непривлекательно.


Поделиться с друзьями
На главную    Дальше



Hosted by uCoz