2015-06-30
528
Практика: Создадим шаблон нашей будущей странички. В Блокноте напиши следующий код:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Это будет наш шаблон. Сохраним его под именем shablon.html в папке, которую назовем mysite.
Итак, рассмотрим повнимательней наш шаблон. С первого взгляда видно, что все написанные нами теги – парные!
? Тег <html> </html> - это границы нашего документа. Благодаря этим тегам браузер распознает начало и конец нашей странички и выводит на экран содержимое на всеобщее обозрение.
? <head> </head> - это заголовок документа (не путать с названием!!!). Информация находящаяся между этими тегами не отображается на экране. Она необходима для программ, которые ее могу просматривать. Заголовок не является обязательным элементом.
? <title> </title> - это теги названия нашей странички. Это название отображается в заголовке браузера. Не делайте его слишком длинным. Достаточно одной строчки, а то и одного слова.
? <body> </body> - это и есть тело документа. Все, что мы запишем между этими тегами и отобразиться на нашей страничке. Это и фотографии и тексты и таблицы и много другое, что вы захотите разместить на вашей страничке. И то насколько она будет содержательной, интересной, красивой и уникальной, будет зависеть и популярность вашего сайта.
|
|
|
Пока, все понятно. А теперь давайте разместим на нашей страничке простую фотографию и небольшой текст.
Откройте свой файл shablon.html. Он открылся в окне браузера. Как же открыть его в Блокноте?
? Открыть Блокнот и Выбрать команду Файл – Открыть
? Если у вас уже открыт браузер, то существует еще один способ. Меню Вид – Просмотр HTML-кода
Практика:
Скопируйте фотографию, которую вы хотите разместить в ту же папку, где лежит наш файл шаблон. Переименуйте его foto.jpg.
Оптимизируйте фотографию для Web в программе Photoshop.
Измените HTML-код так, как показано ниже:
<html>
<head>
<title>Моя домашняя страничка</title>
</head>
<body>
<img src="foto.jpg">
Ура!!! Привет всем!!! Это моя первая интернет страничка!!!
</body>
</html>
Сохраните изменения в файл myhome.html и откройте страничку. Давайте разберемся, что такое img src. Это сокращенная запись от image source – источник изображения.
Правильная запись: <img src=…>.
