Создание веб-страниц

ССШ № 2

 

 

 

 

 

Реферат по ИИКТ

на тему:

«Создание веб-страниц»

 

 

 

 

 

 

 

 

 

 

 

 

 

Выполнила:

Назаранко Анастасия

Учащаяся 11 «Б» класса

 

 

 

2007 год

 

Содержание.

 

 

1.  Как создаются веб-страницы
2. Несколько средств веб-разработки
3. Простейшие средства создания веб-страниц
4. Веб-редактор TaxtPad
5. Веб-редактор Arachnophilia
6. Текстовые редакторы типа WYSIWYG
7. Редактор Star Office
8. Netscape Composer

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Как создаются  веб-страницы

 

Для создания Web-страниц используется особый язык HTML (HyperText Markup Language – язык гипертекстовой разметки). Этот язык определяет набор специальных команд, называемых тегами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы. Особые теги используются для размещения на Web-страницах графических изображений, аудио- и видеоклипов и прочих так называемых внедренных объектов.

Несмотря  на кажущуюся сложность, Web-страницы не представляют собой ничего сложного. Это обычные текстовые файлы, созданные в стандартном Блокноте или аналогичном простейшем текстовом редакторе. И содержат они текст, тот самый текст, который вы хотите поместить на страницы, только размеченный особым образом...

Для того чтобы  различные программы Web-обозревателей  правильно отображали одну и ту же Web-страницу, язык HTML должен быть стандартизирован. Его стандартизацией (а также множеством других стандартов Интернета) занимается особая организация, называемая World Wide Web Consortium или, сокращенно, WWWC. Это название можно перевести как "Комитет Всемирной паутины".

WWWC издает  весьма увесистые труды, описывающие  различные версии стандарта HTML. Последняя версия этого языка  — 4.01 — вышла в конце 90-х  годов прошлого века. Все современные  версии Web-обозревателей поддерживают  эту версию HTML.

Наряду с  тегами HTML, стандартизированными WWWC (стандартные теги), Web-обозреватели поддерживают множество нестандартных тегов. Эти теги были введены разработчиками той или иной программы Web-обозревателя, чтобы получить преимущество перед конкурентами. Они надеялись, что эти фирменные расширения впоследствии войдут в стандарт HTML, но этим надеждам так и не суждено было сбыться. Однако теги остались, и они все так же поддерживаются.

Версия 4.01 станет последней версией языка HTML. В  дальнейшем он будет постепенно заменен своим потомком — языком XHTML (extensible Hyper-Text Markup Language — расширяемый язык гипертекстовой разметки). Этот язык основан на популярном языке описания данных XML (extensible Markup Language — расширяемый язык разметки), он позволяет расширять доступный набор тегов и считается более строгим и более подходящим для машинной обработки. К тому же, из XHTML выброшено множество устаревших тегов, все еще поддерживаемых HTML в целях совместимости.

Скоро ли наступит эра XHTML? Вряд ли. Старый добрый HTML поцарствует на земле еще не один год.

Web-страницы  сохраняются в текстовых файлах  с расширением htm или html. Графические  изображения, аудио- и видеоролики  и прочие внедренные нетекстовые  элементы сохраняются в виде  отдельных файлов; их расширение зависит от формата файла. Web-обозреватель, загрузив страницу, содержащую внедренные элементы, загружает также нужные графические, звуковые и видеофайлы и формирует окончательный вид страницы.

Чтобы сделать  свои Web-страницы доступными для широкой  публики, автор должен поместить их на жесткие диски компьютера, на котором работает программа Web-сервера. Этот процесс называется публикацией страниц (опытные Web-дизайнеры также часто говорят "выложить" вместо "опубликовать").

Одна из Web-страниц, хранящихся на диске серверного компьютера, при настройке Web-сервера задается в качестве страницы по умолчанию или главной страницы. Она будет загружена, если пользователь наберет в строке адреса Web-обозревателя только интернет-адрес сайта (например, "http:// www.site.ru"), без указания имени файла страницы. Как правило, такая страница имеет имя default или index.htm и расширение htm или html, хотя, опять же, все это в руках администратора.

После получения  файлов Web-страницы Web-обозреватель сохраняет  их на жестком диске клиентского компьютера в особой папке, называемой кэшем. Зачем это нужно? Да хотя бы затем, чтобы вы смогли впоследствии просмотреть эту страницу, не подключаясь к Интернету. Все современные Web-обозреватели поддерживают так называемый автономный режим (по-английски — offline mode), когда они отображают только те страницы, что находятся в кэше. Если же вы попытаетесь просмотреть страницу, которой нет в кэше, Web-обозреватель предложит вам подключиться к Интернету и загрузить ее.

Несколько средств веб-разработки

                                             Различные редакторы

На свете  существуют две разновидности Web-редакторов: визуальные и невизуальные. Или, как  еще говорят, WYSIWYG- и не-WYSIWYG-редакторы. (WYSIWYG или What You See Is What You Get -"что ты видишь, то ты и получишь".)

Невизуальные  редакторы работают с "чистым" (или "сырым") HTML-кодом. Они предоставляют  возможность быстрого ввода тегов, синтаксического подсвечивания, проверки правильности получившегося кода и  ссылок. К ним относится, в частности, известная Arachnophilia.

Невизуальные Web-редакторы часто называют HTML-редакторами.

Визуальные  редакторы позволяют работать с  самой Web-страницей "как она есть". Пользователь редактирует и форматирует  текст, вставляет рисунки, таблицы, как в обычном текстовом редакторе, а уж сама программа формирует соответствующий HTML-код. К такого рода редакторам относится популярный Microsoft FrontPage и целый ряд программ попроще.

Невизуальные  редакторы прекрасно подходят для  опытных Web-дизайнеров, съевших собаку на HTML и прекрасно представляющих, как должна выглядеть Web-страница в результате тех или иных изменений в ее коде. Визуальные редакторы — отличная стартовая площадка для начинающих Web-дизайнеров, плохо знакомых с HTML. Но и опытные дизайнеры часто пользуются визуальными редакторами, чтобы быстро "набросать" Web-страничку, а потом довести ее до ума "врукопашную".

Специально  для таких пользователей, совмещающих  прекрасное знание HTML с пристрастием к визуальным средствам редактирования, существуют так называемые гибридные редакторы. Они имеют мощные средства визуального редактирования, одновременно предоставляя доступ к получившемуся HTML-коду. Именно к таким редакторам и относится Macromedia Dreamweaver.

Вообще-то сейчас, судя по всему, уже нет чисто визуальных редакторов — все они являются гибридными. Просто у одних доступ к HTML-коду осуществляется проще (Dreamweaver), а у других — чуть сложнее (FrontPage). Поэтому практически всегда, когда говорят "визуальный Web-редактор", подразумевают как раз гибридные программы.

Вдобавок, как  правило, все более-менее мощные редакторы Web-страниц - и визуальные, и невизуальные — имеют в своем  составе развитые средства управления сайтом. Они знают, из каких страниц  состоит ваш сайт, помогут опубликовать его на Web-сервере, предупредят о гиперссылках, указывающих "в никуда", и даже позволят вам составить список всех действий, которые вы хотите проделать с сайтом.

Простейшие  средства создания веб-страниц 

 

Веб-страницы кодируются на языке гипертекстовой разметки — HTML. Вообще говоря, чтобы написать HTML-файл, достаточно иметь любой текстовый редактор, лишь бы он умел не добавлять в текст свои специальные символы. Самый простой вариант — это редактор Notepad (Блокнот), входящий в стандартную поставку Windows. Собственно говоря, это именно то, что нужно, — простейшая программа, сохраняющая написанный текст именно в том виде, в котором он был введен, и ничего лишнего. (Тем, кто не работает под Windows, в качестве замены Блокноту подойдет почти “все что угодно”: Edit — для MS-DOS, vi или jed — для Linux, Kedit — для Linux/KDE и т. д.)

Однако в очень простых  текстовых редакторах типа Блокнота весь HTML-текст приходится писать вручную, а многим хотелось бы какую-то часть  работы автоматизировать. Учитывая это желание, разработчики создали специализированные средства, призванные облегчить труд веб-программиста (как иногда называют тех, кто пишет код HTML, в отличие от веб-дизайнеров, которые придумывают внешний вид и иногда даже пытаются воплотить его, используя программы работы с графикой). Давайте сначала кратко опишем несколько простых программ, а потом остановимся на лучших из них.

Веб-редактор TextPad

 

Тем, кто предпочитает набирать код HTML вручную, но кому не хватает  функциональности Блокнота и подобных ему программ, можно посоветовать программу под названием TextPad, которую можно загрузить, обратившись по адресу www.textpad.com. Эта программа по сути весьма похожа на Блокнот, однако разработчики специально предусмотрели некоторые удобства для того, чтобы писать код HTML (а также языков Java, С, C++, Perl и еще некоторых). Это выражается в том, что при написании HTML -документа все теги автоматически подсвечиваются синим цветом, их атрибуты — темно-синим, а значения атрибутов — зеленым (цвета можно настроить по собственному желанию, так же, как и шрифт). Это очень удобно. К примеру, если автор случайно ошибется в имени тега или атрибута, то оно останется черным, и он сразу поймет, что здесь что-то не то. Правда, проверка не является “ интеллектуальной”: программа может спокойно “разрешить” приписать тегу какое-либо свойство, которого у него в принципе быть не может (спокойно подсвечивает абракадабру типа < BR ALIGN="top" > или < /BR >).

В отличие  от Блокнота, TextPad — редактор многооконный. В нем можно открыть сразу несколько документов и работать, легко переключаясь между ними с помощью списка в левой части окна или вкладок в нижней части.

Веб-редактор TextPad позволяет автоматизировать набор  многих тегов. Если не хочется набирать их вручную (многие этого не любят просто из-за того, что приходится переключаться на латинский шрифт), то обратите внимание на левую нижнюю часть окна программы. Там приведен список наиболее распространенных HTML-тегов, которые можно вставлять в свой основной текст двойным щелчком мыши. Правда, в списке указаны не сами теги, а их описание. Например, чтобы вставить тег < BR > , нужно выбрать из списка пункт Block > Break Line. Однако к этому быстро привыкаешь. Почти все пункты списка вставляют теги вместе с закрывающим парным тегом. Например, если выбрать пункт Block > Preformatted, в текст автоматически будут добавлены теги и < PRE > и < /PRE > . Некоторые пункты добавляют сразу целые блоки-заготовки. Если, к примеру, выбрать пункт Table (Таблица), в текст будет вставлен такой код: < TABLE ALIGN="left" BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" > < TR ALIGN="left" VALIGN="middle" > < TH >< /TH > < TH >?< /TH > < TR ALIGN="left" VALIGN=middle" > < TD > ? < /TD > < TD > ? < /TD > < /TABLE >

Кроме списка тегов TextPad предоставляет нам также  возможность выбирать из списка специальные  символы (список HTML Characters), а также, если потребуется, любой управляющий  символ, например символы псевдографики DOS и другие. Те, кто часто вводят какие-либо последовательности символов, что при написании веб-страниц не редкость, могут облегчить свою задачу, записав в TextPad соответствующие макросы. Для записи макроса надо нажать комбинацию клавиш CTRL+SHIFT+R (или выбрать из меню Macros пункт Record). При этом начнется запись макроса, то есть все последующие действия будут запомнены. Чтобы закончить запись, надо снова нажать комбинацию клавиш CTRL+SHIFT+R, после чего присвоить имя файлу макроса, а также дать название для представления макроса в меню. Здесь можно также дать, если нужно, краткое описание макроса и указать имя его автора. После нажатия на кнопку ОК название макроса появится в меню Macros. Выбрав его, можно ввести сразу всю заданную последовательность символов.

Для удобства отладки можно установить флажок в пункте Line Numbers (Нумерация строк) в меню View (Вид), — в этом случае все строки текста будут пронумерованы. Хочется отметить, что если в меню Configure (Настройка) включен пункт Word Wrap (Перенос по словам) для автоматического переноса концов длинных строк в видимую часть экрана, то каждая такая длинная строка все равно будет нумероваться одним номером, а не двумя или тремя (кстати, такая нумерация почему-то недоступна в замечательной программе Homesite, о которой речь пойдет ниже). А если в меню View (Вид) включить флажок Visible Spaces (Отображать пробелы), то можно увидеть на экране и “невидимые символы”, такие, как пробелы, символы табуляции и прочие.

В программе TextPad можно легко сравнить два файла, выбрав из меню Tools (Сервис) пункт Compare Files (Сравнить файлы). А если есть два (или более) похожих файла, в некоторые местах которых надо внести изменения, удобно использовать функцию Synchronize Scrolling (Одновременная прокрутка) из меню Configure (Настройка). В этом случае можно открыть сразу несколько файлов, например, выбрав из меню Windows (Окна) пункт Tile Vertically (Расположить по вертикали), и тогда при прокрутке одного из них другие прокручиваются синхронно. Среди других полезных функций программы TextPad стоит отметить возможность автоматической смены клавиатурного регистра командой Edit > Change Case (Правка > Сменить регистр), автоматического копирования в буфер слова или строки, на которой находится курсор, с помощью команд Edit ” Cut Other (Правка > Вырезать) и Edit > Сору Other (Правка > Копировать), а также функцию проверки орфографии Tools > Spelling (Сервис > Правописание). И, конечно, здесь присутствует возможность просмотра созданного файла в броузере View > In Web Browser (Вид > В броузере).