Главная страница Случайная страница Разделы сайта АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Введение. Web-конструированиеСтр 1 из 21Следующая ⇒
Л. Татарникова
Web-конструирование
Введение Сегодня мы начнём прогулку в увлекательный мир – мир web-строительства. Что это значит? Наверняка ты «гулял» в Интернет, а уж если и не гулял, то слышал о нём. Что такое Интернет? Каждый представляет его по-своему. Но, возможно, всякому будет понятно и такое сравнение: Интернет – это городок, точнее, городище, состоящее из домиков – сайтов, которые, в свою очередь, состоят из комнат – страничек. В каждой комнате есть двери в соседние, и даже (сбылась мечта фантастов!) в очень далёкие комнаты. Причём сделаны эти двери – гиперссылки – так хитро, что, перебираясь в комнатку, расположенную за тридевять земель, ты даже не заметишь, что так далеко забрался. Творят все эти чудеса мастера-сайтостроители (web-мастера). И имеется у них инструмент – специальный язык, красиво и звучно названный Hyper Text Markup Language – язык гипертекстовой разметки, или коротко HTML. Используя инструмент HTML, мы будем, скорее, даже не строить домик-сайт, а составлять чертежи, по которым некий строитель, называемый браузером, будет на лету строить комнатку, заказанную посетителем. Итак, Чертёж первый 1. Для создания чертежа, или кода (web-мастера – люди довольно странные и обычные чертежи называют кодом J), нашего домика-сайта нам понадобится рабочая площадка – папка, в которую будут помещаться все файлы (мы люди «подкованные» и прекрасно понимаем, что Интернет – это виртуальный мир, а значит всё, что в нём существует, располагается в файлах): c создай папку с именем my_site; c открой её и в ней создай текстовый документ, которому дай имя index.html (создаются и папка, и документ одинаково: Файл à Создать à Папку или Текстовый документ). 2. Открой файл index.html двойным щелчком мыши.
Не удивляйся, если твой текстовый файл открылся не в блокноте. Мы изменили расширение файла (.txt на.html), а такое расширение сообщает системе Windows, что файл является web-страничкой и открывать её надо в специальной программе – браузере (или броузере, решай сам, как должно звучать слово Browser), том самом мастере, который умеет читать html-чертежи и строить по ним домики. Не удивляйся, если, прочитав эти строки, ты всё-таки увидишь свой файл открытым в блокноте. Такое может случиться, если в системе отключено отображение расширений. В этом случае, переименовав файл в index.html, ты на самом деле получил файл index.html.txt, который и должен открыться в блокноте. Как тогда быть? Можно, конечно, изменить системные настройки, но мы поступим проще: c выполни команду Файл à Сохранить как…; c в открывшемся диалоговом окне в списке Тип файла выбери Все файлы; c в поле Имя файла сотри предложенное имя и запиши index.html (на твой вопрос, зачем мы стёрли имя, заменив его точно таким же, отвечу – на самом деле ты стёр имя со скрытым расширением.txt); c нажми кнопку Сохранить и закрой блокнот; c убедись, что в папке my_site теперь существует два файла – index.html и index, первый из которых можешь смело удалить; c двойным кликом открой файл index, и, если он открылся в браузере, значит, у тебя получилось сменить расширение, поэтому теперь возвратись к началу текста в этой рамке и читай…
И ещё одно замечание: о типе файла говорит не только его расширение, но и значок – пиктограмма приложения, «ответственного» за этот файл. Если у файла index.html значок изменился, превратившись в голубую букву е, значит, «твой» браузер – Internet Explorer. Программ-браузеров существует довольно много. Наиболее распространены такие: Internet Explorer (устанавливается в системе Windows автоматически), Opera , Netscape Navigator (и его русифицированная версия Сибкон Коммуникатор )… 3. В открывшемся окне браузера ты видишь пустую страницу. И, думаю, это тебя не удивляет – мы ведь ещё ничего и не «начертили». Откроем наш файл для редактирования. Для этого щёлкни правой кнопкой мыши по этой самой пустой странице и в открывшемся контекстном меню (будем коротко его называть КМ) выбери строчку Просмотр HTML-кода. Описанным способом можно открыть код странички в Internet Explorer. В нём же можно поступить и иначе: Вид à Просмотр HTML-кода. В любом случае наш файл откроется в Блокноте. В браузере Opera всё это делается чуть-чуть иначе: либо КМ à Фрейм à Просмотреть источник (Frame à View source), либо Вид à Источник (View à Frame source). А вот в Сибкон Коммуникаторе сложнее. Если он у тебя установлен как основной, то ты уже успел увидеть сообщение о том, что в документе нет данных. То есть пустой чертёж Коммуникатор не воспринимает вообще. И воспользоваться командой КМ à Просмотр кода кадра или Вид à Код страницы сейчас не получится. Эти команды просто недоступны. Придётся запускать Блокнот из главного меню и выполнять команду Файл à Открыть. 4. Наконец-то можно написать первые строчки кода: < HTML> < HEAD> < /HEAD> < BODY> Здравствуйте! Меня зовут Вася! < /BODY> < /HTML> Как видишь, html-код состоит из особых слов – тегов, заключённых в угловые скобки < и >. Каждый тег имеет свой смысл: < HTML> – начало html-документа; < HEAD> – начало «головной» части – в ней записывается служебная информация; < /HEAD> – конец «головной» части (закрывающий тег отличается от открывающего наличием слэша (знак /) и присутствует почти у всех тегов); < BODY> и < /BODY> – начало и конец «тела» документа (именно здесь, между этими тегами и располагается всё содержимое странички). Текст, который не является тегами, просто отображается на страничке. 5. Посмотрим, что же мы сотворили: c сохрани изменения в документе – Файл à Сохранить; c перейди в окно браузера и обнови страничку, нажав кнопку Обновить: в IE, в Opera, в Коммуникаторе. 6. Впечатляет? Скорее всего, не очень. Мелковато, черновато-серовато, никакого оформления, да ещё в строке заголовка в лучшем случае имя нашего файла, а в худшем – длиннющая строка пути к этому файлу на диске. Будем исправлять: c прежде всего в головную часть добавим данные о заголовке нашей странички – тег < TITLE>: < TITLE> Моя домашняя страничка< /TITLE> c затем оформим текст как заголовок, используя теги < H1>, < H2>, … < H6> (эти теги «превращают» заключённый в них текст в заголовок, просто изменяя его размер и выделяя полужирным начертанием, начиная с < H1> – самого крупного и заканчивая < H6> – самым мелким. Поэкспериментируй и подбери наиболее подходящий для твоей странички размер заголовка): < H3> Здравствуйте! Меня зовут Вася! < /H3> c продолжим рассказ о себе (приведённый в коде текст, конечно же, примерный, ты волен его изменить по своему усмотрению). В результате получаем такой (или почти такой) код: < HTML> < HEAD> < TITLE> Моя домашняя страничка< /TITLE> < /HEAD> < BODY> < H2> Здравствуйте! Меня зовут Вася! < /H2>
|