Един таг се използва за вмъкване на изображение в текста на уеб страница. (Таблица P 1). Атрибутите на този таг задават всички параметри на изображението, поставено на страницата. Атрибутът SRC е задължителен, определяйки адреса и името на графичния файл. Ако атрибутът SRC не е зададен, ще се показва само иконата на празно изображение.

Структура на етикета с атрибута SRC изглежда така:

.

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

.

Формат на името на файла

За да поставите графичен файл с името MINSK, намиращ се на адрес D:\Collection\Cities\MINSK.GIF, трябва да напишете .

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

За да създадете уеб страница със снимка на нашия институт, която е показана на фиг. 4.1, трябва да въведете следния HTML код:

Нашият институт

ориз. 4.1. Уеб страница със снимка на института

В горния пример височината на снимката (HEIGHT) е 200 пиксела, а ширината (WIDTH) е 300 пиксела. За да поставите снимката, се създава абзац с централно подравняване.

Хоризонтални линии

Хоризонталните линии се поставят на уеб страница с помощта на един етикет

---

. Атрибутите SIZE, WIDTH, COLOR и ALIGN променят съответно дебелината, ширината, цвета и подравняването на линиите.

Нека да разгледаме няколко примера, за да обясним разположението на хоризонталните линии:

1.

---

- хоризонтална линия през цялата страница с дебелина 2 пиксела.

2.

---

WIDTH = "200" ALIGN="RIGHT"> – хоризонтална линия със зелен цвят с дебелина 15 пиксела, ширина 200 пиксела и подравнена вдясно.

3.

---

– хоризонтална синя линия, покриваща цялата страница, с дебелина 25 пиксела.

4.

---

WIDTH = "300" ALIGN = "LEFT"> – хоризонтална линия с червен цвят с дебелина 20 пиксела, ширина 300 пиксела и подравнена вляво.

Линейният дисплей за четирите записани примера е показан на фиг. 4.2.

ориз. 4.2. Редове на уеб страница

ТАБЛИЦИ

Създаване на таблици

Таблицата се създава с помощта на сдвоен таг

… . Този етикет създава таблица на мястото, където е добавен
в HTML код.

Всяка таблица се състои от редове, а редовете – от клетки. Следните тагове се използват за формиране на редове и клетки на таблицата:

... – нова линия;

... – заглавна клетка;

... – обикновена клетка на таблица.

Тези тагове се записват вътре в сдвоен таг

… .

Таблицата се формира ред по ред - първо се посочва един ред и в него се посочва необходимия брой клетки, след това вторият ред и т.н.

За да получите таблицата, показана на фиг. 5.1, трябва да въведете следния HTML код:

ориз. 5.1. Таблица страница

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

Трябва да се отбележи, че в HTML кода на горната страница тагът

автомобили	Цена	Форд	5000	Голф	6000

съдържа атрибута BORDER със стойност "1". Това означава, че в таблицата, показана на фиг. 5.1, дебелината на външната граница е
1 пиксел. Ако пишем

… ,

тогава дебелината на външната граница ще бъде 6 пиксела. За да предотвратите показването на границите на таблицата, трябва да зададете атрибута BORDER на 0 или просто да пропуснете този атрибут.

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

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

• вмъкване на индивидуални картинки;
• запълване на фона с картина.

Във всеки случай графичното изображение се взема от файла.

Вмъкване на графики

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

< IMG SRC = "адрес_графического_файла" >

Адресът на графичния файл е или URL, или име на файл, евентуално с път. Например, за да покажете графичен файл logotip.jpg, трябва да напишете етикета:

< IMG SRC = "logotip.jpg" >

За да увеличите скоростта на трансфер на графично изображение в таг можете да използвате атрибута ( допълнителен параметър) LOWSRC, който приема адреса на графичен файл като аргумент. Можете да създадете два графични файла: единият (например logotip.jpg) съдържа изображение с висока разделителна способност, а другият (например logotip.gif) съдържа изображение с ниска разделителна способност. След това етикетът:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

...инструктира браузъра първо да изтегли файла logotip.gif и след това да го замени с файла logotip.jpg, както е получен.

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

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Графиките обикновено се използват заедно с текст, така че възниква предизвикателството за подравняване на текст и графики. Този проблем се решава с помощта на атрибута ПОДРАВНЯВАНЕетикет използвайки различни аргументи. Например, може да искаме текстът да тече около изображение отдясно или отляво. Обикновено картината е вградена плътно до текста, което може да бъде грозно. За да избегнете това, можете да зададете празни полета около илюстрацията. Полетата се създават с помощта на атрибути VSPACEза горно и долно поле и ПРОСТРАНСТВОза странични полета в етикет . Аргументите към тези атрибути са посочени като числа, които определят размера на полетата в пиксели. За да отмените обвиването на текст около графики, използвайте етикета
.

Следният таг настройва графиките от файла logotip.jpg да се пренасят надясно (изображението ще бъде разположено вляво от текста):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Ако искате да поставите картина вдясно от текста, тогава имате нужда от атрибута ПОДРАВНЯВАНЕприсвояване на аргумент ДЯСНО:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

За да зададете полета около изображението, трябва да напишете етикет като:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Тук числата 20 и 10 определят размера на полетата.

Нека разгледаме един пример споделянеграфики и текстове. Отворете Notepad (текстов редактор Notepad) Windows. Напишете HTML код в него, като използвате таговете, обсъдени по-горе. По-долу е дадена програма, която извежда малко текст и графики. Можете да използвате всеки от файловете, които имате като графичен файл. Използваният тук файл е logotip.gif.

< HTML >

< HEAD >

< TITLE >Упражнение 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >Текстът се обвива около графиките вдясно< / H1 >

ориз. 657. Текстът се обвива около изображението вдясно

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

Определение 1

Уеб страницата е текстов файл, създаден в HTML и хостван в World Wide Web (WWW). В допълнение към текста, една уеб страница може да съдържа хипертекстови връзки, чрез които можете да навигирате до и да разглеждате други уеб страници, както и вложки под формата на графики, анимация, видеоклипове и музика.

С помощта на HTML можете:

1. Създавайте и редактирайте уеб страници.
2. Редактирайте HTML документи от Интернет, като вземете предвид функционирането на всички обекти, вградени в документа (снимки, анимации и др.).
3. Използвайки хипертекстови връзки и възможността за вграждане на рисунки, диаграми, анимации, видеоклипове, музикален и говорен съпровод, текстови специални ефекти в HTML документ, създайте мултимедийни презентации, слайдшоута, демо проекти.

Бележка 1

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

Добавяне на изображения към уеб страница

Привлекателността на уеб страниците се крие именно в графиките и другите различни обекти, използвани върху тях. Добавянето на изображение към страница не е трудно. И добавете графики, които могат да направят външен видУеб страниците са по-представителни и професионални, много по-сложни и изискват специални познания.

Можете да добавите изображение към страница, като използвате тага за източник на изображение, който изглежда така:

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

Добавяне на алтернативни надписи

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

По-долу е HTML кодът с атрибута alt, добавен в тага. Този атрибут, подобно на атрибута src, съобщава на браузъра допълнителна информация за изображението и винаги може да се използва заедно с таг.

alt="Това е снимка!" />!}

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

Когато използвате атрибута alt за всеки таг, е важно да внимавате да не присвоявате неподходящи текстови съобщения на графични елементи. Например, няма смисъл да добавяте алтернативни текстови етикети към елементите на дизайна на страницата. За да избегнете такива грешки, можете да зададете атрибута alt на тези елементи на празна стойност (alt=" "). Ако не зададете други атрибути, браузърът ще визуализира изображението в оригиналния му размер, но ще подравни горния край на изображението с горния край на съседния текстов низ. Въпреки това можете да промените и двете настройки с помощта на тагове на таблица със стилове.

Атрибути на изображението

Тагът има атрибути, които ви позволяват да преоразмерявате изображения. Ето някои от тях:

• височина – използва се за определяне на височината на изображението в пиксели или проценти;
• ширина – използва се за определяне на ширината на изображението в пиксели или проценти.

Регулиране на височината и ширината на изображението

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

alt="Това е снимка!" височина="60" ширина="60" />

alt="Това е снимка!" височина="10%" ширина="6%" />

Бележка 2

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

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

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

Подравняване на текст и графики

За да подравните изображение към десния или левия край на текстов ред, използвайте атрибута align на тага. Например:

alt="Това е снимка!" height="60" width="60" align="right" />

За да подравните изображение вертикално спрямо текстов низ, можете също да използвате този атрибут, който може да приема стойностите отгоре, отдолу и в центъра. Стойността top указва, че горният ръб на изображението трябва да бъде подравнен с горния ръб на околния текст. Стойността bottom указва, че долният ръб на изображението трябва да бъде подравнен с долния ръб на околния текст. Централната стойност указва, че центърът на изображението трябва да бъде подравнен с центъра на текстовия ред.

Използване на изображения като връзки

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

Миниатюрни изображения

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

alt="Щракнете, за да видите нормално изображение."

височина="60" ширина="60" />

Тайни за успешното използване на изображения

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

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

Бележка 3

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

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

Както споменахме, HTML днес е основата за писане на всяка уеб страница в World Wide Web. Когато използвате CSS, създаването на HTML код се променя драстично. Можете да кажете сбогом на повторното използване на тромави HTML тагове само за постигане на определени визуални ефекти. Относно някои HTML тагове или атрибути, като например отхвърления таг...

Начало

Поръчайте уеб сайт и започнете да правите бизнес!

Тази фраза може да се чуе и види в много сайтове и това не е напразно!

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

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

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

Най-важните предимства на HTML са:

• простота, която ви позволява да научите HTML за възможно най-кратко време.
• възможност за създаване на собствени уеб страници
• и HTML работи абсолютно еднакво на всички съществуващи днес платформи; няма нужда да купувате допълнително оборудване. И е достатъчно да използвате всички налични текстов редактор, например Notepad.

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

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

Графичните изображения, поставени на уеб страница, не само допринасят за по-доброто възприемане на информацията, но и правят страниците по-ярки и запомнящи се. Можете сами да подготвите графични изображения или да използвате услугите на дизайнери. Можете също да използвате библиотеки с графични файлове от софтуерни продукти като Microsoft Office, CorelDraw и др.

Нека поставим графично изображение от библиотеката Clip Art, включена в Microsoft Office, на началната страница на уеб сайта, който създаваме. За да направите това, изпълнете следните стъпки:

1. Отворете създадения уеб сайт.
2. Отворете начална страницачрез двукратно щракване върху името на файла index.htm в панела Списък с папки(Списък с папки).
3. В менюто Поставете(Вмъкване) изберете команда рисуване Снимки(Изобразително изкуство). В прозореца на програмата FrontPage се появява панел Вмъкване на снимка(Вмъкване на клип арт).
4. Изберете командата от този панел Колекция от снимки(Медийна галерия). Отваря се диалогов прозорец, който ви позволява да изберете графично изображение (фиг. 15.8).

ориз. 15.8.

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

1. Панел Списък на колекциитесъдържа папки на вашия компютър с мултимедийни файлове, както и файлове с картинки на библиотеката Clip Art. Отворете папката на категорията снимки, която ви интересува. Изображенията от тази категория ще се появят в работната зона на прозореца. Когато поставите курсора върху изображение, се вижда подсказка, указваща името, размера на изображението и файла, който съдържа, както и формата на графичното изображение (фиг. 15.9).

1. Щракнете върху бутона със стрелка от дясната страна на избраното изображение. Появява се контекстно меню.
2. Изберете командата от контекстното меню копие(Сора).
3. Отидете на уеб страница и поставете изображение от клипборда върху нея, като използвате всеки удобен инструмент. Например, натиснете клавишната комбинация +.
4. Запазете уеб страницата, съдържаща графичното изображение, като щракнете върху бутона Запазване(Запазване) на стандартната лента с инструменти. Появява се диалогов прозорец Запазване на вградени файлове(Save Embedded Files) (фиг. 15.10), предлагайки да запазите изображението, поставено на страницата, в папка изображенияУеб сайт под името, с което файлът се намираше в библиотеката. Този прозорец съдържа следните бутони:
   • Преименуване(Преименуване) - позволява ви да преименувате файла.
   • Промяна на папката(Промяна на папка) - отваря диалогов прозорец Промяна на папката(Промяна на папка), съдържаща папки на текущия уеб сайт, което ви позволява да изберете различна папка, за да запазите файла.
   • Действие(Задаване на действие) отваря диалогов прозорец Задача за действие,което ви позволява да промените стойността ЗапазванеЗапазете колоната Действие в Не спестявайте(Не запазвайте). ЗапазванеЧертежът се записва в папката на уеб сайта, която сте посочили, в противен случай уеб страницата ще съдържа връзка към изображението, намиращо се в библиотеката Clip Art.

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

ориз. 15.10.

Поставяне на графично изображение от файл

Разгледахме поставянето на графично изображение от библиотеката Clip Ait на уеб страница. За да поставите графично изображение от файл на страница, направете едно от следните неща:

• В менюто Поставете(Вмъкване) изберете команда рисуване(Картина), а след това в подменюто, което се отваря - опцията От файл(От файл)
• Щракнете върху бутона Добавете снимка от файл(Вмъкване на картина от файл) в стандартната лента с инструменти
• Щракнете върху бутона Добавете снимка от файл(Вмъкване на картина от файл) в лентата с инструменти чертежи(Снимки)

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

ориз. 15.11.

Задаване на свойства на изображението

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

• В менюто формат(Формат) изберете команда Свойства(Свойства)
• Изберете отбор контекстно меню Свойства на картината(Свойства на картината)
• Натиснете клавишната комбинация +

Диалогов прозорец Свойства на картинатасъдържа три раздела: генерал(Общи), Видеозапис(Видео) Преглед(Външен вид). Нека разгледаме по-подробно опциите за персонализиране с помощта на този прозорец на дисплея.