Готовимся к пенсии: осваиваем Интернет
Шрифт:
Итак, посмотрим еще раз, уже повнимательнее, на наш шаблон. С первого же взгляда видно, что практически все написанные теги — парные!
<HTML> имеет пару </HTML>
<TITLE> имеет пару </TITLE>
<HEAD> имеет пару </HEAD>
<BODY> имеет пару </BODY>
И вы, скорее всего, обратили внимание на косую черту во второй колонке тегов. Она означает конец тега. А между этими тегами будут стоять какие-то слова. Разберемся подробнее, какие.
Теги <HTML></HTML> — это просто границы нашего документа. Благодаря этим тегам браузер распознает начало и конец странички,
Теги <HEAD></HEAD> — это заголовок документа (не путайте с названием!!!). Информация, находящаяся между тегами, не видна на страничке, она необходима тем программам, которые ее могут просматривать. Заголовок не является обязательным элементом, однако как у каждого документа, у странички тоже должен быть заголовок. Кроме того, в заголовок входят такие полезные элементы, как стиль документа, ключевые слова, да и много полезной информации, без которой потом трудно будет обойтись.
Между тегами <TITLE></TITLE> мы будем писать название нашей странички. И это название браузер выведет в самой верхней строке своего окна. Не делайте название слишком длинным — достаточно одной строчки. А то и одного слова. Советую вам не использовать общие малозначащие названия — ведь ваша страничка уникальна, правда? Вместо безликой "Моя домашняя страничка" дайте то имя, ради которого вы и решили явить себя миру.
Скажем, если мы напишем так: <TITLE>Пенсионерка Ру</TITLE>, то на сайте http://www.pensionerka.ru это название появится в заголовке (верхней строчке) браузера (рис. П1.8).
Теги <BODY></BODY> — это и есть тело документа. Все, что мы запихнем между этими тегами: все наши таланты, работы и творения, фотографии, рисунки, фильмы, музыку и Бог знает что вы еще там напридумываете, — все это отобразится на вашей страничке. А от того, насколько она окажется содержательной, интересной, красивой и уникальной, будет зависеть и популярность вашего сайта.
Ну, теперь можно и прерваться, и посмотреть, что же у нас там получилось, в нашем первом файле shablon.html. Так… и что мы видим? Правильно… ничего. А чего показывать, если мы туда ничего своего не внесли? Что ж, попробуем исправить положение.
Пояснение
Предложила посмотреть, что показывает файл shablon.html, а как это сделать не объяснила… Все очень просто. Щелкните двойным щелчком по этому файлу в папке, куда он сохранен, и он откроется в браузере, принятом в системе по умолчанию.
Рис. П1.8. В заголовке браузера — название странички
Надеюсь, у вас есть какая-нибудь ваша фотография? Все равно какая, лишь бы была! Надеюсь, ее файл назван латинскими буквами? И в нижнем регистре? И, желательно, в формате JPG? Типа так: myfoto.jpg.
Примечание
Не обижайтесь, но некоторые моменты я буду повторять по сто раз, потому как если бы мне кто раньше так повторял… мне не пришлось бы обливаться слезами, лупить ни в чем не повинный компьютер и переделывать заново свои работы. Тогда начнем…
Да! Кстати… а как же открыть нам свой файл в блокноте, если он по двойному щелчку сразу открывается в окне браузера? Привожу два различных способа.
Открыть опять Блокнот — для особо забывчивых: Пуск | Все программы | Стандартные | Блокнот. Хотя давно пора выставить его значок на рабочий стол… Открыли? Ну, и оттуда Файл | Открыть… достать наш родной, единственный и неповторимый shablon.html. Получилось? Ну и славненько…
Если у вас этот файл уже открыт браузером, щелкните правой кнопкой мыши по экрану и в появившемся меню выберите Просмотр HTML-кода (или Просмотр кода страницы — в зависимости от браузера) — результат будет тот же. Наш файл сам откроется в Блокноте!
Итак, хватит болтовни, посмотрим что у нас там осталось с прошлого раза (листинг П1.2).
Вы уже выучили наизусть этот наш шаблон как "Отче наш"? Нет? Странно… мы им будем пользоваться постоянно. Хотя, скажу вам по секрету, можно писать эти теги и строчными буквами, браузеру на это начхать. Точно так же откроет он и содержимое такого файла (листинг П1.3).
Ну, а теперь запомнили? Еще повторить?
Ладно… в общем, объясняю: я буду писать буквы всех тегов прописными (заглавными) буквами исключительно из-за того, чтобы вам легче было отличать изменяемую часть от постоянной. Договорились? А вы можете писать как хотите. Как удобней.
Добавляем в шаблон текст
Итак, изменим содержимое нашего шаблона, вставив туда немного текста (листинг П1.4).
Ну и сохраним этот файл, например, под именем, соответствующим номеру листинга: listing_1.4.html. Открываем файл и видим следующую картину (рис. П1.9).
Рис. П1.9. Файл listing_1.4.html в окне браузера
Итак, в верхней строке браузера у нас отобразилось название странички: Моя Первая Страничка, а в самом окне — текст, который мы ввели между тегами <BODY> и </BODY>.
Ну вот, уже кое-что становится понятно. А раз так — идем дальше!
Форматируем содержимое странички
Для того чтобы текст на наших страничках смотрелся красиво, его необходимо отформатировать. Для этого есть несколько тегов, вот ими сейчас и займемся.
Заголовки
Обычно в каждом тексте имеются заголовки разных уровней. Самый крупный заголовок называется заголовком 1-го уровня, самый маленький — 6-го. Тегами заголовков служат парные теги <Hn> и </Hn>, где n — номер уровня заголовка. Вернемся к нашему шаблону shablon.html и внесем в него некоторые изменения (листинг П1.5).