Сега можем да поставим текст с различно подравняване на нашата уеб страница:

Ето моите лични страници!

На тях можете да намерите: - разказ за мен и моите хобита; - моите снимки.

От една от моите страници ще е възможно
прати ми имейл.

3. Инструменти за създаване на уеб страници

3.1 HTML редактори

Всеки избира свой собствен инструмент за създаване на уеб страници. Може да бъде MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page. И някой използва прост текстов редактор, като Notepad (Notepad).

Текстовите редактори могат да се използват само за създаване на малки страници, тъй като те имат много недостатъци: проектите не се поддържат, няма "маркиране" на текст. Като цяло е изключително неудобно за работа.

Основният недостатък на MS FrontPage е, че генерира много голям HTML код (твърде много допълнителен), така че страниците са големи, което се отразява на скоростта на зареждане. Освен това, когато създавате уеб страници в този редактор, виждате едно нещо, но в прозореца на браузъра - съвсем друго. Страниците се оказват донякъде криви, следователно, за да създадете висококачествени уеб страници, се препоръчва да използвате пакетите, които ще бъдат разгледани по-долу.

Ще започнем с популярния Macromedia DreamWeaver. Macromedia се смята за лидер в производството на софтуер за създаване на уебсайтове, както и за законодател на тенденциите в тази област.

Dreamweaver 3.0

Но DreamWeaver е няколко стъпки пред други WYSIWYG редактори, най-вече чрез генериране на много чист HTML. DreamWeaver ви позволява да се отървете от същия тип работа при създаване на страници (например подреждане на текст), като използвате опции "запис на последователност от команди" (записвате последователността от команди, които произвеждате, след което натискате, например, CTRL+P и DreamWeaver възпроизвежда всичко в същата последователност.

Начална страница 4.0

Следващият редактор - HomeSite 4 - за ръчно създаване на страници, т.е. за ценители на HTML. Получавате пълен контрол върху HTML кода и е възможно да оптимизирате страницата си за един от трите популярни браузъра (MSIE, Google Chrome, Opera).

HomeSite съдържа два основни режима: Редактиране и Дизайн. Режимът на проектиране е вид WYSIWYG редактор, който произвежда HTML код и ако качите HTML код на някой друг, тогава HomeSite ще пренапише всичко по свой собствен начин.

Друга отличителна черта на HomeSite е неговото "залепване" с Dreamweaver. HomeSite има бутон "Dreamweaver" и също е включен в стандартния му пакет. DreamWeaver обаче има и възможността да свърже HomeSite като редактор за коригиране на HTML код.

Един от най-новите HTML редактори е EVR Soft 1st Page v2.

Неговият слоган е "Създайте 1-ви клас уебсайтове!" („Създавайте първокласни уебсайтове!“). Редакторът съдържа няколко режима - Normal, Easy, Advanced / Expert и Hardcore, тоест можете да изберете вашето ниво и в крайна сметка да преминете към по-високо. Друга характеристика е доста голяма колекция от JavaScript и DHTML скриптове. Всичко това е доста удобно разделено на категории.

3.2 Графични редактори

Създаването и оптимизирането на графики е сложна и капризна задача. Разбира се, възможно е да създадете уеб страница без използване на графики - с помощта на шрифтове, скриптове и стилови таблици (CSS) - и тя ще бъде красива и стилна. Но в крайна сметка крайният вид на документа зависи от голям брой различни фактори, като: ширината на прозореца на браузъра, предварително зададени настройки на браузъра, размер на шрифта по подразбиране, име и цвят на шрифта. Освен това не всички скриптове и стилове се поддържат от всички браузъри. Ако се използват графики, тогава посетителят на вашата страница ще я види точно както вие и ще я види.

Основната трудност при работата с уеб графики е, че честотната лента на интернет каналите в повечето случаи е много ниска и веднага ще се сблъскате с проблеми - как да направите графичен файл с малък размер, но с добро качество, какви програми и техники да използвайте, когато го оптимизирате.

На това е посветен разделът за векторни и растерни графични редактори, които са мощен инструмент за обработка на изображения в способни ръце.

Преди да разгледате векторни и растерни графични редактори, трябва да разберете каква е разликата между векторно и растерно представяне на изображение.

Растерна графикае мрежа (растер), чиито клетки се наричат ​​пиксели. Всеки пиксел в растерното изображение има строго дефинирано местоположение и цвят, следователно всеки обект се представя от програмата като набор от цветни пиксели. Това означава, че потребителят, работещ с растерни изображения, не работи върху конкретни обекти, а върху групите пиксели, които ги съставят.

Растерните изображения осигуряват висока прецизност в градацията на цветовете и средните тонове, както и висока детайлност на изображението, така че те са най-добрият начин за представяне на изображения с цвят на тон, като например сканирани снимки.

Растерната графика винаги използва фиксиран брой пиксели, т.е. Качеството на растерното изображение директно зависи от разделителната способност на оборудването. Това означава, че всяка промяна в изображението (въртене, увеличение и т.н.) води до постоянно изкривяване на изображението и границите на обектите се оказват неравни.

Векторни изображениясе формират на базата на математически описани фигури, наречени вектори, а видът на изображението се определя от параметрите на векторите. С други думи, векторната графика се състои от криви, които имат координати, цвят и други параметри, както и затворени области, запълнени с определен цвят. Границите на тези региони също се описват с криви. Файлът с векторно изображение съдържа координатите и параметрите на кривите.

Резултатите от обработката на векторни изображения не зависят от разделителната способност на оборудването, така че можете произволно да променяте техните параметри (размер, цвят, форма и т.н.) - качеството няма да се влоши. Векторните графики се използват при създаване на цифрови обекти с помощта на малки размери (размери на шрифта) или обекти като лога, за които е важно да се поддържат ясни очертания при неограничено мащабиране.

Графичните пакети (редактори) също са разделени на два вида: растерни и векторни. Нека сега разгледаме най-популярните от тях.

A) Растерни графични редактори

Microsoft Paint е прост (или по-скоро най-простият) редактор, който се предлага стандартно с операционните системи на Microsoft. Той има набор от прости функции (четка, молив, гумичка и др.), които ви позволяват да създавате прости картини. За съжаление, той практически не е подходящ за обработка на графики. Картината, която виждате вдясно, е повече от това, на което този редактор е способен.

Адобе Фотошоп- днес това е най-мощният пакет за професионална обработка на растерни графики. Това е цял комплекс, който има множество опции за модифициране на растерно изображение, има огромен набор от различни филтри и ефекти и е възможно да се свържат инструменти от производители на трети страни.

Пакетът предлага например инструменти за поправяне на повредени изображения, ретуширане на снимки или създаване на най-фантастичните колажи, които въображението ни може да си позволи. Като цяло, потенциалът на този пакет е наистина огромен. Започвайки от версия 5.5, пакетът включва програмата Adobe ImageReady, които предоставят страхотни възможности за обработка на графики под WEB (оптимизация на изображения, създаване на анимирани gifs, „нарязване“ на картини на по-малки и т.н.). Мотото на разработчиците на Adobe Photoshop - "Камера на вашия ум" - предполага не само техническо съвършенство, но и пълна свобода на творчеството, на която човек, който работи с тази програма, е просто обречен.

PhotoPaint- друг също толкова добре познат графичен редактор (от пакета Corel Draw) за обработка на растерни графики, конкуриращ се с Adobe Photoshop. Освен това разполага с всички необходими инструменти за обработка на графики, разнообразие от филтри, текстури. Единствената разлика е в удобството на работа, интерфейса и скоростта на прилагане на филтри - наслагването е малко по-бавно.

художник- редакторът предоставя страхотни възможности за емулиране на реални инструменти за рисуване: графит, тебешир, масло и др. Също така ви позволява да симулирате текстурата на повърхността на материалите, рисуването, да създавате анимация. Много удобен за проектиране на тапети или уеб страници в стил рисуване. Използвайки тази програма, се чувствате като истински артист.

Има и редица редактори ( Microsoft Photo Editor, Microsoft PhotoDRAW), също така позволява да се изпълняват най-простите задачи, но не отговарят на нуждите на професионалистите.

Б) Векторни графични редактори

Adobe Illustrator- пакетът ви позволява да създавате, обработвате и редактирате векторни графики. То е еквивалентно по сила

растерен редактор Adobe Photoshop: има подобен интерфейс, позволява ви да свързвате различни филтри и ефекти, разбира много графични формати, дори като. cdr (Corel Draw) и . swf (Flash).

Corel Draw- разбира се, такъв добре познат графичен пакет не би могъл без инструменти за обработка на векторна графика. Пакетът е почти толкова мощен, колкото графичните редактори Adobe Photoshop и Adobe Illustrator. В допълнение към обработката на векторна графика, този пакет разполага с процесор за растерна графика (Photo Paint), трасьор на изображения, редактор на шрифтове, подготовка на текстури и създаване на баркод, както и огромни колекции от изображения (CorelGallery).

Adobe Streamline- Друг продукт на Adobe, предназначен за проследяване (превеждане) на растерни графики във векторни графики. Това е малък, но много полезен и мощен продукт. Това е особено полезно, ако създавате уеб страници с помощта на векторна графика, като например Flash технология.

4. Създаване на сайт с помощта на CMS Joomla 1.5.7

Плавно, по принципа от просто към сложно, преминаваме от статични WWW страници към динамични. За да направим това, ни трябват познания по уеб езиците PHP, Jscript, Perl, jQueryи поне езика за структурирани заявки MySQL. Всичко е наред, само няколко години и вие сте професионалист, способен да правите такива многофункционални сайтове, в които се генерират страници в движение, в които има бази данни с клиенти на форума, входове, пароли, идентификация, удостоверяване, анимационна връзка и много повече.

Но не е необходимо да владеете всички езици, за да направите динамичен многофункционален сайт. Имах достатъчно познания по HTML, SCC, PHP, 3Ds Max, Photoshop и SMC Joomla.

Joomla е система за управление на съдържанието, написана на PHP и JavaScript, която използва база данни MySQL като съхранение. Това е безплатен софтуер, лицензиран под GNU GPL.

Основни функции:

1. Функционалността може да бъде разширена с допълнителни модули (разширения, плъгини).

2. Модул за сигурност за многостепенна автентификация на потребители и администратори.

3. Шаблонната система улеснява промяната на външния вид на сайта.

4. Персонализирани оформления на модули, включително леви, десни и централни блокове от менюта.

5. Предимствата на системата включват факта, че можете сами да напишете всички модули, компоненти, плъгини, шаблони, да ги поставите в структурирана директория с разширения или да редактирате съществуващо разширение по ваша преценка.

Можете да работите с Joomla на хост сървъра в Интернет (допълнителни разходи и много зависи от скоростта на интернет). Предпочитам да работя на локален сървър. За това избрах Apache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8d PHP/5.2.4 сървър на 127.0.0.1 порт 80.

Така че, настройте локален сървър. В директорията localhost/home/www/ създайте папка, в която поставяме самата Joomla. Искам да отбележа, че под PHP5.3.1 Joomla не работи правилно. Постоянно компонентите на форумите FireBoard и Kunena дават грешки в сайта, трябва да редактирате php. ini и изключете извеждането на грешки, което означава, че самото действие обещава непредвидени обстоятелства за сайта. Затова препоръчвам да изберете PHP версия 5.2.4, работата е стабилна за всички плъгини, модули и компоненти. След като инсталирате Joomla през браузър, създайте администратор на потребител в MySQL и отидете в администраторския панел, като използвате неговото вход и парола. След това трябва да изберете шаблон за сайта. На пръв поглед ще изглежда, че е много лесно, но ако копаете по-дълбоко, вие сте убедени, че 80% от времето се изразходва за актуализиране на този шаблон. Затова препоръчвам да изберете най-подходящия шаблон за вашите нужди, като не забравяте за изходните модули. След това свързваме цялата функционалност на сайта: регистрация, форум, слайдшоу, банери, изтегляне на файлове, видео онлайн, аудио, редактиране, всички показвани страници. Работим основно с Индекса. php и шаблон. css и разбира се конфигурираме за себе си всички свързани разширения, от които има около 6000 за Joomla. Тогава остава най-приятното - това е дизайнът на сайта. С помощта на растерната програма Photoshop и 3Ds Max (пълнофункционална професионална софтуерна система за създаване и редактиране на триизмерни графики и анимация, разработена от Autodesk, съдържа най-модерните инструменти за художници и мултимедийни специалисти), ние създаваме шаблонен дизайн. Редактиране на заглавката, правене на желания вид.

Изход

С бързото развитие на уеб програмирането и създаването на множество CMS, работата на уеб дизайнера е улеснена. Сега, за да създадете многофункционален мощен динамичен уеб портал, достатъчно е да овладеете няколко езика за програмиране (ако добавим разширения и скриптове), да владеете графични и растерни програми, малко вдъхновение, иновации и умения.

литература

1. Которев Д.В., Костарев А.Ф. "PHP 5 или най-пълното ръководство в оригинала." Петербург 2005г

2. А. Гончаров "HTML урок".

3. А. Матросов, А. Сергеев, М. Чаунин "HTML 4.0 в оригинала"

4. Айзъкс С. "Динамичен HTML"

5. Байенс Дж. "Притурки за WEB програмиране"

6. Бурсов М.В. и др. "Основи на работата с Dreamweaver HTML Editor. Урок"

7. Велихов В. "Наръчник за HTML 4.0"

HTMLе език за описание на структурата на уеб страниците. Създадените с него страници могат да се разглеждат само с помощта на специални програми (браузъри), инсталирани на компютрите на потребителите.

• Съкращението HTML означава Х yper твътр М arkup Л anguage (език за маркиране на хипертекст).
• Не забравяйте, че това не е език за програмиране, а език за маркиране.
• HTML използва етикетимаркиране за описание на структурата на уеб страница.

етикети

HTML таговете са ключови думи или знаци, затворени в ъглови скоби, например ,

,

и т.н. Таговете са два вида: сдвоениИ единичен(те също се наричат ​​празни). Сдвоените тагове се състоят от отварящ и затварящ етикет, например: . Знакът "/" след ъгловата скоба показва, че етикетът е затварящ. Единичните тагове се състоят само от началния маркер, например:
. Етикетите не са чувствителни към главни букви, така че могат да бъдат написани както с главни, така и с малки букви:

Означава същото като

Таговете определят къде започва и завършва даден HTML елемент.

Таговете помагат на браузъра да разпознае структурата и значението на вашия текст, например, те казват на браузъра коя част от текста е заглавие, къде започва нов абзац, какво да подчертае и къде да постави изображение (картина). Като се има предвид тази информация, браузърът използва своите правила по подразбиране за това как да показва всеки от тези елементи.

Забележка: В нашата HTML справка можете да видите стиловете по подразбиране за всеки маркер, който ви интересува.

Без използването на HTML тагове, браузърът ще показва само непрекъснат поток от текст, без отстъпи, заглавия, абзаци и т.н. За да стане по-ясно, нека разгледаме това по-подробно с примери.

Ето как изглежда страница, която използва тагове за маркиране:

Напитки в нашето кафене

Multifruit - 100 rub.

Плодова напитка, съдържаща сокове от портокал и ананас.

Млечен шейк - 150 rub.

Кремообразен сладолед, смесен с плодова каша.

Същото, но без използване на тагове:

Напитки в нашето кафене Multifrukt - 100 rub. Плодова напитка, съдържаща сокове от портокал и ананас. Млечен шейк - 150 rub. Кремообразен сладолед, смесен с плодова каша.

3. HTML хипертекстов език

Хипертекстовете трябва да започват с дума и да завършват с дума. Думите в ъглови скоби се наричат ​​тагове в HTML и дескриптори в програмирането. Почти всички HTML тагове са сдвоени - и, и и т.н.

Сдвоените тагове подчертават определен фрагмент от хипертекст - "title", "body" и т.н. Първият таг започва фрагмента, а вторият го завършва. Затварящите дескриптори предхождат името със знак за дроба / .

Общата структура на хипертекстовете, написани на езика HTML:

хипертекст::= заглавие

заглавие::= заглавие

заглавие::= заглавие

body::= текст

В съответствие с правилата на HTML, хипертекстовете трябва да имат "заглавие" и "тяло". Като публикации, хипертекстовете могат и трябва да съдържат информация за авторите и собствениците на авторски права (уебсайтове).

Заглавието на хипертекста трябва да съдържа "заглавието", което се показва от браузърите в най-горния ред на екрана на компютъра. Заглавието трябва да изразява основната идея на публикацията (страницата). Хипертекстът без заглавие е като неозаглавена статия.

"Тялото" на хипертекста трябва да съдържа текстове, таблици, снимки и илюстрации. Разликата между електронните хипертекстове и обикновените хартиени текстове е включването на хипервръзки, щракването върху които предизвиква изтеглянето на нови хипертекстове.

Пример за хипертекст и резултата от показването му от браузър на екрана на компютъра:

Хипертекст: Резултат:

Резултатът от работата на браузъра е зареждането и показването на хипертекста, съхранен в сайта на адреса, посочен в прозореца на браузъра, и показването му на екрана на компютъра. Ако хипертекстът е твърде голям, браузърът показва бутони за плъзгане на хипертекст в дясната или долната част на екрана.

Размерите на екрана на компютъра имат следния спектър. Минималният размер на екрана е 640 x 480 пиксела. Освен това стандартните размери на екрана са 800 x 600, 1024 x 768 и 1280 x 1024 пиксела. Следователно хипертекстовете може да изглеждат различно на различните екрани.

Общата структура на хипертекстовете и тяхното показване на екрана на компютъра:

Хипертекст: Резултат:

Текстовата част може да се състои от редове и абзаци със и без заглавия, със списъци, таблици и менюта.

body::- текст

текст::= заглавие ( текст) |

списък ( текст ) |

таблица ( текст ) |

Хипертекстовите заглавия са форматирани по следния начин:

заглавка::=

заглавие

заглавка::=

заглавие

заглавка::=

заглавие

където таговете H2, ..., h6 задават размера на заглавията спрямо основния текст.

Абзаците в хипертекстовете започват с дескриптор

хипертекст |

Преходът към нов ред и параграфи се обозначава с дескриптор . Абзацът, завършващ p> не е задължителен, но е задължителен при използване на опции в маркера на абзаца.

Основният параметър на абзаците - подравняване - подравняване на текстовете на екрана на компютъра. Подравняването на текста се извършва от браузърите автоматично в съответствие с размера на екрана на компютъра:

align=center - до центъра на екрана:

align=left - към левия ръб;

align=right - към десния ръб;

align=justify - цял екран.

За подравняване на абзаца трябва да се избере един общ стил, който трябва да се приложи към всички във всички хипертекстове на сайта.

За дизайна на хипертекстове HTML езикът за маркиране има богат набор от шрифтове, стилове и ресурси. Най-простото средство за дизайн е подборът на думи, за да се привлече вниманието на читателите на сайта към отделни части от текстовете.

За да подчертаете думите в хипертекстовете, можете да използвате удебелен шрифт или подчертаване, като използвате следните тагове:

Големи символи

удебелен шрифт

курсив i>

подчертайте

зачеркване

малки знаци

Изборът на шрифт в хипертекстовете се задава от тага :fonts::=текстов шрифт>

Параметри на шрифта - техният размер и вид. Размерите на шрифта се задават с параметър size = size.

Размерът е посочен изрично от 1 до 6, или под формата на увеличение +1, +2 или намаляване - 1, - 2.

Типът на шрифта се задава от параметъра

лице = шрифт

Тук шрифтът е един от стандартните шрифтове: "Times", "Courier" и т.н.

Цветът на шрифта се определя от параметъра colog = color, където color е цветът на избрания хипертекстов фрагмент. Например, маркиране на текст в червено:

текстов шрифт>

Стандартни имена на цветове в HTML език:

червено - червено, зелено - зелено, синьо - синьо, черно - черно,

бяло - бяло, злато - злато, жълто-жълто и др.

За дизайна на хипертекстове е по-добре да вземете за модел добра книга или списание, издадено от професионално издателство, или чужда професионално проектирана електронна книга, вестник или интернет сайт.

Единният стил на дизайн е важно свойство на всяка публикация в книги, списания и уебсайтове. В бъдеще е най-добре да се придържате към приетия стандарт и стил на дизайн за целия период на създаване и поддръжка на сайта.

Хипертекстовите фрагменти могат да бъдат поставени на един и същ сайт или на няколко сайта или дори на няколко сървъра. Външните хипервръзки показват имената на съответните файлове на сайта, сървъра или в Интернет:

Обща форма на външни хипервръзки:

където "адрес" е адресът на хипертекста в сайта или на друг интернет сървър.

Примери за външни хипервръзки:

а) адрес на уебсайт в Интернет:

http: // bak2.nagod.gu

б) адреса на страницата в сайта:

http: // bak2.nagod.gu / inrogl.html.

в) адреса на страницата в папката на сайта;

http://bak2.nagod.gu/tests/test2.html.

тестове 2 a>

С помощта на апарата от хипервръзки в сайтовете се организира поставянето на всички рисунки, фотографии и други графични илюстрации. За да направите това, всички файлове с графични илюстрации се записват предварително на сайта.

Графичните файлове обикновено се поставят на сайтове и в отделна папка, наречена изображение. Зареждането на илюстрации на екраните на потребителските компютри се извършва от браузъри с помощта на оператори :

Общата форма на изрази за натоварване за графични илюстрации е:

Местоположението на илюстрациите на екрана на компютъра се определя от параметрите за подравняване: align=left - left, align=right - right. В този случай текстът се движи около илюстрациите, съответно вдясно или сляпо.

Илюстрациите могат да бъдат натиснати до горния или долния ръб на екрана, което се задава от параметрите: align =top - до горния ръб, align=bottom - до долния ръб на екрана или подравнен до средата на екрана - подравняване = средно.

За да поставите илюстрации на екрана на компютъра, тяхната ширина и височина могат да бъдат посочени в оператора за зареждане:

височина:= височина= "височина"

ширина:= ширина="дължина"

Размерите на илюстрациите се определят от броя на точките на екрана (в пиксели) или като процент от височината или ширината на екрана на компютъра. В последния случай илюстрациите ще имат различни размери на различни екрани. След като изчислите местоположението на илюстрациите за екрани с минимални размери, можете да сте сигурни в тяхното разположение на екрани с всякакъв друг размер.

Размерите на илюстрациите обикновено се избират така, че да се виждат изцяло дори на компютърни екрани с минимален размер. Ако компютърният кран е по-голям, тогава илюстрациите ще заемат само част от него.

Хипертекстовите списъци са списъци с номериране или избор на елементи от списъка. Всички елементи започват с тагове

Маркирането на хипертекст се използва, за да посочи в коя част на екрана и как трябва да се показва текстът и как текстовете, които съставляват хипертекстовата база данни, са взаимосвързани. За тези цели в текста се въвеждат специални контролни знаци. Текстът с контролни знаци се съхранява в обикновен текстов файл в ASCII кодове и може да бъде обработен от почти всеки текстов редактор.

Езикът за маркиране на хипертекст HTML е предложен от Тим ​​Бърнърс-Лий през 1989 г. По времето, когато HTML е създаден, е съществувал стандарт за език за маркиране за печатни документи - SGML (Standart Generalized Markup Language), който е взет за основа на HTML. Предполагаше се, че подобно решение ще помогне да се използва съществуващ софтуер за интерпретиране на новия език.

Като елемент от хипертекстовата база данни за HTML е избран обикновен текстов файл, който се съхранява с помощта на файловата система на операционната среда на компютъра.

По този начин хипертекстова база данни в концепцията за WWW е набор от текстови файлове, написани в HTML, който дефинира:

Форма на представяне на информацията (маркиране);

Структура на връзките между файловете (хипертекстови връзки). Този подход предполага наличието на друг компонент

технология - езиков преводач. В WWW функциите на интерпретатора са разделени между сървъра на хипертекстова база данни и потребителския интерфейс. Сървърът, освен че осъществява достъп до документи и обработва хипертекстови връзки, извършва и препроцесорна обработка на документи, докато потребителският интерфейс интерпретира езикови конструкции, свързани с представянето на информация.

През 1990г имаше нулева версия на HTML 0.

Първата версия (HTML 1.0) имаше за цел да представи езика като такъв, където описанието на неговите възможности беше по-скоро препоръка.

Прогнозите са гръбнакът на всяка система за търговия, така че добре изработените прогнози могат да ви направят невероятно богати.

Втората версия (HTML 2.0) поправи практиката за използване на езикови конструкции и стана стандарт за изграждане на WWW.

Версия ++ HTML ++ въведе нови функции за представяне на научна информация и таблици, подобрения в оформлението на текст и изображения.

Третата версия (HTML 3.0) рационализира всички иновации и формализира потребителския интерфейс на хипертекстова разпределена система.

През 1996г е пусната нова версия на езика: HTML 3.2, която включва инструменти за създаване на таблици, езикови конструкции на Java, карти на изображения (разположени на клиентската машина) и нови видове форматиране на текст.

HTML е текстово базиран език, в който инструкциите за форматиране, наречени тагове, са вградени в текста на документ.

Процесът на създаване на HTML документ е включването на тагове в неформатиран текст, който носи информация.

HTML таговете са поредици от знаци, които започват със знак за по-малко от (<) и заканчивающиеся знаком “больше” (>).

Повечето от функциите за форматиране в HTML определят логически, а не физически стилове. Например етикетите за заглавия, които обикновено показват по-голям размер на буквата, не уточняват кой размер да се използва. Браузърът (който действа като клиентска програма) избира по-голям от нормалния размер на текста за заглавия. Този подход ви позволява да се отървете от платформата - документ, създаден на Macintosh, може да се използва UNIX или Windows. Недостатъкът е, че документът изглежда различно на различните платформи.

WWW браузърите работят съгласно следните правила, когато анализират HTML изречения:

Интервалите и други "невидими" знаци се игнорират;

Всички тагове могат да бъдат разделени на групи: основни тагове, форматиращи тагове, структурни тагове, указатели и т.н.;

Етикетите за форматиране могат да бъдат написани с малки и/или главни букви;

Повечето тагове за форматиране се записват по двойки. Откриващият маркер включва този ефект, а затварящият го изключва. Двойка тагове понякога се наричат ​​контейнер, защото ефектът, който се включват и изключват, е върху текста вътре в тях. Например, за да посочите, че ред трябва да бъде отпечатан с удебелен шрифт, трябва да напишете:< B >Този ред ще бъде отпечатан с удебелен текст.

Текстът вътре в затварящия маркер винаги се предшества от обратна наклонена черта. Сред основните HTML тагове, изключенията от това правило са:< BASE >(основна информация),< BR >(край на реда),< HR >(хоризонтална линийка) и< IMG >(образ). Тези тагове съществуват в един екземпляр.

Всеки HTML документ има обвързани тагове:< HTML >И. Тази двойка тагове капсулира всички други тагове на уеб страницата и цялото съдържание на документа. Всъщност те декларират, че цялото съдържание на контейнера е HTML код. етикет< HTML >трябва да е на първия ред на файла и етикетът- в последния.

Всеки HTML документ съдържа заглавка и тяло на документа.

Заглавието на документа идентифицира документа. Трябва да отиде веднага след етикета< HTML >и започнете от< HEAD >. Заглавието завършва с етикет.

Заглавието на документа трябва да съдържа заглавието на документа и неговия основен URL адрес.

Заглавието на документа се поставя между етикетите< TITLE >И. Използва се от браузъра и уеб сървъра. Дължината на заглавието не трябва да надвишава 40 знака. Заглавието на документа трябва да е информативно, да отразява съдържанието на документа, така че да може да бъде идентифициран. Името се намира в заглавната лента на Internet Explorer, в списъците с историята (History) и „Любими“ (Favorites).

Основният URL адрес трябва да е пълен (абсолютен) и да съдържа протокола, интернет адреса на компютъра и името на файла. Посочено е в етикета< BASE HREF = “базовый_URL”>. Всички други URL адреси в документа могат да бъдат относителни спрямо основния URL. Например, ако основният URL адрес е: http://www.microsoft.com/products/office/word/datasheets.htmlи трябва да посочите URL адреса на файла с функции. html, намиращ се в директорията /products/office/excel на същия сървър, можете да посочите: ../excel/features . html , вместо да въвеждате пълния адрес.

символи. ./ показва да се издигне едно ниво на директория от базовия адрес.

Наличието на основен адрес улеснява прехвърлянето на документ към друг сървър, защото ако всички други URL адреси в документа са относителни, тогава само името на сървъра в основния URL трябва да се промени при преместване.

Тяло на документасъдържа цялата текстова информация и всички HTML тагове, използвани за форматиране на текста. Основното съдържание на документа започва веднага след заглавието и е ограничено до тагове< BODY >И.

Пример за HTML документ:

< TITLE >Име на документа

< BASE HREF = “базовый_URL” >

Таговете, използвани в тялото на документа, ви позволяват да посочите следните елементи за маркиране на текст:

Начало на абзаца и край на реда

Стилове на заглавия

Физически стилове - логически стилове

Специални символи.

Хипертекстови връзкисе състои от две части: указател и URL. Показалецът е текстът, върху който потребителят трябва да щракне, за да се премести някъде. URL адресът посочва адреса, от който браузърът ще изтегли документа, когато потребителят щракне върху показалеца.

Текстовите указатели в графичните браузъри обикновено са подчертани и подчертани в цвят. В браузърите с чист текст те се показват с удебелен шрифт.

Всеки текст може да се използва като указател, независимо от неговия размер или форматиране. Индексът може да се състои от няколко букви, думи или дори реда текст.

Формат на показалеца:

< A HREF = “ URL ”>индексен текст ,

къде е буквата А в етикета< A HREF >означава указател (anchor), а HREF - хипертекстова връзка (Hypertext REFerence). Всичко между етикетите< A HREF = “ URL ”>Ие текстът на показалеца, който се показва с подчертан или удебелен шрифт.

Други кодове за форматиране могат да се използват във връзка с хипертекстови указатели. Например:

< A HREF = “ URL ”> < I > или

< I > < A HREF = “ URL ”>Отидете на повече подробности

WWW технология

Световната мрежа (WWW) е най-популярната интернет услуга. WWW е единно информационно пространство, състоящо се от стотици милиони взаимосвързани електронни документи, съхранявани на уеб сървъри. Отделните документи, които съставляват уеб пространството, се наричат ​​уеб страници. Групи от тематично комбинирани уеб страници се наричат ​​уеб сайтове (Уеб сайт).Един физически уеб сървър може да съдържа доста уеб сайтове, на всеки от които е назначена отделна директория на твърдия диск на сървъра.

Уеб страниците се различават от обикновените текстови документи по това, че са проектирани без препратка към конкретна среда. Например, дизайнът на документ на Word, отпечатан на хартия, е обвързан с параметрите на отпечатан лист, който има определена височина, ширина и размер на полето. Електронните уеб документи са предназначени да се гледат на екран на компютър и не се знае предварително на кой. Следователно уеб документите не могат да бъдат твърдо кодирани. Проектирането се извършва по време на възпроизвеждането им на компютъра на клиента и се извършва в съответствие с настройките на програмата за гледане (браузър). Браузърът показва документа в съответствие с командите, които са записани в текста на уеб документа. Командите могат да бъдат написани или директно от автора на документа, или реализирани чрез автоматични инструменти за подготовка на уеб документи.

Такива команди се наричат ​​тагове. Етикетите са затворени в скоби<>. Повечето тагове се използват по двойки: отварящ таг и затварящ етикет.

Сложните тагове, в допълнение към ключовата дума, имат допълнителни атрибути и параметри. Правилата за писане на тагове се съдържат в спецификацията на специален език за маркиране на хипертекст - HTML (Hyper Text Markup Language). Това означава, че уеб документът е обикновен текстов документ, маркиран с HTML тагове.

Най-важната характеристика на уеб документите са хипертекстовите връзки. Хипервръзка може да бъде зададена към всяка част от текст. За създаване на хипервръзка се използва етикет за двойка . Този маркер съдържа необходимия атрибут HREF, който определя URL адреса на документа, към който сочи връзката.

Адресът може да бъде даден в абсолютна или относителна форма. Адресът в абсолютна форма започва с протокола и адреса на уеб сайта. Такъв запис се използва, когато е необходимо да се насочи посетителя към друг уеб сайт и се третира като външна връзка. Когато се използва относителен адрес във връзка, се посочва само относителният път за търсене на документа. Това предполага същия протокол и същия уеб сайт и третира връзката като вътрешна. Вътрешната връзка остава валидна, ако адресът на уеб сайта като цяло се промени (например към друг сървър). Пълният формат на хипервръзката включва възможността за свързване към конкретно място в рамките на страницата. Но това може да се направи само за страници по ваш собствен дизайн. За да направите това, мястото, към което е поставена връзката, е маркирано със специален елемент за закрепване. Котвата се поставя с помощта на етикет за двойка с необходимия атрибут NAME. Стойността на този атрибут е произволна последователност от латински букви и цифри - името на котвата. За да се свържете към котва, името му се посочва в края на URL адреса след символа #.

Терминологичен речник

Браузърът ще търси документа на дадения сървър в текущата папка

Миди музика

Браузърът ще отиде на сайта http://www.midi.ru.

Колекцията от огромен брой хипертекстови документи, съхранявани на WWW сървъри, образува един вид пространство за хипердокументи, между които е възможно движение. Произволното движение между документи се нарича уеб сърфиране, а целенасоченото движение (извършвано с цел намиране на необходимата информация) се нарича уеб навигация.

Хипертекстовата връзка между огромния брой документи, съхранявани на физическите сървъри на Интернет, е основата за съществуването на WWW логическото пространство.

Помислете за хардуера и софтуера, които заедно съставляват мрежата.

· Клиенти и сървъри.Уеб сървърът е компютър, свързан към Интернет, който изпълнява специална програма, наричана още уеб сървър. Задачите на тази програма включват съхранение, търсене и разпространение на определени файлове в мрежата. Уеб клиентът е браузър, който изисква файлове от мрежата. Когато клиентският компютър иска достъп до един от файловете, заявката се изпраща до уеб сървъра. Сървърът извлича посочения файл и го изпраща на клиентския компютър, който е изпратил заявката. Хилядите компютри, които съставляват мрежата, са голямо разнообразие от комбинации от хардуер и софтуер. Когато клиентски компютър поиска файл, той на практика не знае нищо за спецификата на сървъра, където се съхранява исканият файл, или за други компютри, които ще прехвърлят файла един на друг по пътя му от сървъра към клиента. За да работи такава система, тя трябва да използва набор от езици и протоколи, независими от хардуера или операционните системи.

· URL и протоколи за трансфер на данни.Ако фрагменти от документ са разпръснати по целия свят и искате да го представите на потребителя като единен, последователен документ, ще ви е необходима много добра адресна система. Всеки файл в Интернет има адрес, наречен URL (Uniform Resource Locator - Uniform Resource Locator). Например URL адресът на уебсайта на Европейската федерация футбол - http://ru.uefa.com.

Първата част от URL адреса определя метода, чрез който компютърът осъществява достъп до файла, т.е. комуникационния протокол. Повечето уеб страници са достъпни чрез HTTP (Hypertext Transfer Protocol) протокол. Ето защо уеб адресът обикновено се посочва с буквите "http" и браузърите автоматично вмъкват тези букви преди уеб адреса, който потребителят въвежда. Често се разделят http:// в началото на URL адреса се пропуска.

Следващата част от адреса е името на хоста на уеб сървъра. Системата за имена на домейни ще насочи вашата заявка към уеб сървър, където и да се намира.

Някои URL адреси съдържат информация, която следва името на хоста на уеб сървъра. Тези данни определят точно файла, който искате да видите, и директорията, в която се съхранява. Ако имената на директория и файлове не са посочени, се показва уеб страницата по подразбиране на този уеб сървър.

· HTML(Hypertext Markup Language - език за маркиране на hypertext do-nts) е универсалният език на мрежата. Използва се за подреждане на страници, на които може да се възпроизвежда информация, публикувана в мрежата: текст, графики, както и аудио и видео информация.

· Java и JavaScript.Езикът Java е предназначен да доставя малки приложения (наречени аплети или Java приложения) в мрежата. А езикът JavaScript разширява силата на HTML за вграждане на малки програми (или скриптове) в уеб страници. Основната цел на аплетите и скриптовете е да повишат интерактивността на уеб страниците - вместо да взаимодействате с отдалечен уеб сървър, вие работите с аплет и скрипт, който се изпълнява на вашия компютър.

Има също така Java аплети и JavaScript скриптове за изграждане на анимации, които се изпращат от уеб сървъра по мрежата, за да бъдат изпълнени на компютъра на потребителя; те избягват предаването на анимационни кадри през интернет. Описаните процеси обикновено протичат неусетно за потребителя.

· VBScript и ActiveX контроли.Езикът VBScript и ActiveX контролите са стандартни функции, поддържани от Internet Explorer.

VBScript е опростена версия на езика Visual Basic, разработена от Microsoft. С него можете да създавате скриптове, които правят уеб страниците динамични. По този начин по своите възможности VBScript е подобен на езика JavaScript.

ActiveX контролите, като Java аплети, се използват за вграждане на изпълними програми в уеб страници. Когато Internet Explorer срещне уеб страница, която използва ActiveX контроли, той проверява дали конкретната контрола е инсталирана на вашия компютър и, ако не, я инсталира.

· XML и други разширени уеб езици. XML (Extensible Markup Language - разширен език за описание на документи) е много мощен език, който трябва да замени HTML като език за разработване на приложения за уеб. За разлика от HTML, XML не съдържа инструкции как трябва да се показват данните, описани в XML документа. Начинът, по който се показват, се определя от езика на стиловата таблица, който е приблизително същата роля за XML като каскадните стилови таблици за HTML. W3C работи с две спецификации на стилова таблица: XSL (разширяем стилов език) и CSS (каскадни стилови таблици). Друга фундаментална разлика между XML и HTML е, че той може да съдържа всякакви тагове, които създателите на XML речника смятат за подходящи да използват.

По-усъвършенствана версия на HTML е DHTML (Dynamic HTML – динамичен HTML), която включва три компонента – HTML, JavaScript и CSS.

· Графични обекти.Снимки, чертежи, карти, диаграми и други графики, представени в мрежата, могат да бъдат в много формати. Най-често срещаните формати за показване на графична информация са JPEG и GIF.

· Аудио и видео файлове.Мрежата предоставя разнообразие от аудио и видео файлове, които се възпроизвеждат чрез вградените добавки в браузъра. Има два начина за прехвърляне на такива данни: браузърът може или да го изтегли като цял файл (тогава ще трябва да възпроизвеждате цялото количество информация, което ще отнеме много време, тъй като звуковите файлове са големи, а видео файловете са просто огромен), или вземете само тази част от файла, която да бъде възпроизведена в момента. Вторият метод се нарича поточно аудио или поточно видео.

Език за маркиране на хипертекст(HTML) - Hypertext Markup Language - предназначен за писане на хипертекстови документи, публикувани в World Wide Web.

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

Има два начина за създаване на хипертекстови документи. Можете да използвате един от WYSIWYG HTML редакторите (например Microsoft FrontPage и др.), които не изискват специални познания за вътрешната структура на създадения документ. Този метод ви позволява да създавате документи за WWW без познаване на HTML езика. HTML редакторите автоматизират създаването на хипертекстови документи и облекчават рутинната работа. Възможностите им обаче са ограничени, те значително увеличават размера на получения файл, а резултатът, получен с тяхна помощ, не винаги отговаря на очакванията на разработчика. Но, разбира се, този метод е незаменим за начинаещи в подготовката на хипертекстови документи.

Алтернатива е да създадете и маркирате документ с помощта на обикновен текстов редактор (NotePad). С този метод HTML командите се вмъкват ръчно в текста. Създавайки документи по този начин, вие знаете точно какво правите.

Както вече беше отбелязано, един HTML документ съдържа символична информация. Една част от него е действителният текст, т.е. данните, които съставляват съдържанието на документа. Друго - етикети(маркиращи тагове), наричан още флагове за маркиране, са специални HTML езикови конструкции, използвани за маркиране на документ и управление на показването му. Именно етикетите на HTML език определят формата, в която ще бъде представен текстът, кои от неговите компоненти ще играят ролята на хипертекстови връзки, кои графични или мултимедийни обекти трябва да бъдат включени в документа. Графичната и аудио информацията, включена в HTML документ, се съхранява в отделни файлове. HTML зрителите (браузърите) интерпретират флаговете за маркиране и подреждат текста и графиките на екрана по подходящ начин. За файлове, съдържащи HTML документи, се приемат разширенията .htm или .html.

При писане на етикети не се разграничават главни и малки букви.В повечето случаи таговете се използват по двойки. Двойката се състои от отварящи (начален таг) и затварящи (краен етикет) тагове. Синтаксис на отваряне на маркера:

<имя_тега [атрибуты]>

Скобите, използвани в описанието на синтаксиса, означават, че елементът може да бъде пропуснат. Името на затварящия маркер се различава от името на отварящия маркер само по това, че е предшествано от наклонена черта:

Атрибутите на маркера се записват в следния формат:

име[="стойност"]

Кавичките при посочване на стойността на аргумента са по избор и могат да бъдат пропуснати. За някои атрибути може да не е посочена стойност. Затварящият маркер няма атрибути.

Действието на всеки сдвоен етикет започва от мястото, където се срещна началният таг и завършва, когато се срещне съответният затварящ етикет. Често се извиква двойка начални и крайни тагове контейнер, а частта от текста, оградена с отварящи и затварящи тагове, е елемент.

Последователността от знаци, съставляващи текста, може да се състои от интервали, табулатори, нови редове, връщане на карета, букви, пунктуация, цифри и специални знаци (например +, #, $, @), с изключение наследните четири знака, които имат специално значение в HTML:< (меньше), >(по-голямо от), & (амперсанд) и " (двойни кавички). Ако искате да включите някой от тези знаци в текста си, трябва да го кодирате със специална последователност от знаци.