Начало > 10 клас > HTML

HTMLТема 1. Основни тагове в HTML

Тема 1.1. Средства за програмиране в Интернет

1. Хипертекстов документ. Език HTML.

а) хипертекстов документ

б) език HTML (HyperText Markup Language– език за форматиране на хипертекстови документи)

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

2. Средства за програмиране в Интернет (за създаване на Web- страници).

а) създаване на HTML–файл с произволен текстов редактор, използвайки командите (таговете) на този език. (Например: WordPad, NotePad и др.).Не се препоръчва ползването на сложни текстообработващи системи или Word, където е възможно поставянето на скрити символи, които да доведат до нежелателни резултати;

б) чрез специализирани програмни пакетиза създаване на Web-страници в режим WYSIWYG (WYSIWYG = What You See Is What You Get);

Например: Front Page, Macromedia Dream Weaver и др.

в) други средиза разработка на Web страници – Java, Java Script, XML, VRML и др.;

г) отваряне (преглеждане) на HTML–файл – извършва се с помощта на произволен
Web-браузър.

3. Избор на подходящи средства за програмиране в Интернет. Как да създадем успешен сайт.

Тема 1.2. Създаване на HTML-документ. Сруктура на
HTML-документ – основни тагове и правила

1. Структура на HTML-документ.

а) съдържание

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

б) команди в HTML

Наричат се тагове (tags). Те се възприемат от Web-браузърите като команда (указание) как да се изобрази на екрана съдържанието на Web-страницата.

Таг (tag) се нарича специален HTML код, ограден с ъглови скоби (“<” и “>”) и използван за задаване на структурата и формàта на съдържанието в Web-страниците.

в) структура на HTML-документ

HTML-документът има йерархична структура от тагове и елементи, включваща заглавна част и тяло. Всеки елемент може да съдържа вложени други елементи, по определени правила.
Пример: /най-обща структура на HTML-документ/
<html>

<head>

<title>Title of page(Заглавие на страницата) </title>

</head>

<body>

This is my first homepage. <b>This is some text</b>

</body>

</html>

г) HTML-документ и HTML-файл

Ø HTML-документе документ, който може да се отвори за разглеждане с Web-браузър. Съхранява се като HTML-файл.

Ø HTML-файл е текстов документ (текстов файл), съдържащ HTML-тагове. HTML-файлът трябва да има “разширение” htm или html, след името си (т.е. “име.htm” или “име.html”). Създава се с помощта на текстов редактор като NotePad и WordPad. Използването на MS-Word не се препоръчва,поради скритите символи, които оставя и които могат да доведат до неочаквани резултати. Може да се използват специализирани среди за генериране на HTML код.

д) Web-страниците като интелектуална собственост

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

2. Тагове.

а) същност и предназначение на таговете

б) особености

Ø заграждат се в ъглови скоби (“<” и “>”);

Ø HTML таговете обикновено са по двойки и се състоят от стартов (отварящ) таг и завършващ (затварящ) таг. (Например: стартов таг: <b> и завършващ таг: </b>). Стартовият таг се поставя преди съдържанието, за което се отнася, а завършващия таг се поставя след това съдържание;

Ø HTML таговете не са “Case sensitive”, т.е главните и малките букви са равноправни;

в) атрибути

Атрибутите играят важна роляпри работата с тагове. Използват се за описване на свойствата на даден таг.

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

Не всички тагове поддържат атрибути. (При изпускане на даден атрибут, се използва т.нар. стойност по подразбиране за него).

3. Основни елементи на HTML-страница. Основни HTML-тагове.

а) структурни тагове – използват се за описване на основната (цялостната) структура на Web-страницата.

Ø <html> и </html> – огражда HTML кода. Идентифицира документа като HTML-документ;

Ø <head> и </head> – идентифицира заглавната част на HTML-документа. Заглавната част на Web-страницата се поставя в началото на страницата и описва общите свойства на страницата. Едно от тях е заглавието;

Ø <title> и </title> – обгражда заглавието на страницата;

Ø  – коментар, който няма да бъде видим при разглеждане с браузър;

Ø <body> и </body> – идентифицира тялото на HTML-документ. Tялото следва заглавната част и включва съдържанието на Web-страницата;

б) текстови тагове– служат за организиране и форматиране на текстовото съдържание

Ø <p> и </p> – начало и край на абзац (параграф);

Ø <b> и </b> – удебеляване на текст (т.нар. стил “bold”);

Ø <i> и </i> – прави текста курсив (т.нар. стил “italic”);

Ø <u> и </u> – подчертан текст (т.нар. стил “underline”);

Ø <br> или </br> – край на ред и пренасяне на нов ред (Line break);

Ø <h1> и </h1>, <h2> и </h2>, … , <h6> и </h6>– заглавни тагове (Heading). Задават размер на текста от предварително (стандартно) установени размери;

Ø <font> и </font> – указва шрифт на текста;

в) списъчни тагове – позволяват организирането на Web-страницата в номерирани, неномерирани и дефиниционни списъци:

Ø <ul> и </ul> – обособява неномериран(неподреден) списък от пунктове (точки);

Ø <ol> и </ol> – обособява номериран(подреден) списък от пунктове;

Ø <li> и </li> – обособява пункт в номериран и неномериран списък;

г) таблични тагове – позволяват създаването на таблици и тяхното организиране и оформяне:

Ø <table> и </table> – обособява началото и края на таблица;

Ø <tr> и </tr> – обособява ред в таблицата;

Ø <td> и </td> – дефинира клетка в табличен ред (клетка от данни в табличен ред);

Ø <th> и </th> – указва заглавие на колона в таблица;

д) други тагове

Ø <img> – таг за въвеждане на изображение в Web-страница;

Ø < а> и </а> – таг за хипервръзка (хиперлинк);

Ø <meta> и </meta> – допълнителна информация за Web-страницата;

4. Основни атрибути в някои HTML-тагове.

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

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

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

а) таг <body> –> тяло на HTML-документа

– основни атрибути: bgcolor – задава (указва) цвят на фона на HTML-страницата;

text – задава цвят на текста (основния текст);

Link, Alink, Vlink – указва цвят на текста, с който е обозначена хипервръзкасъответно: преди върху нея да е било кликнато с мишката, цвят при кликване върху връзката и цвят на връзка, върху която вече е било кликвано с мишката;

– основни цветове: бяло (white), черно (black), сребристо (silver), сиво (gray), червено-кафяво (maroon), червено (red), зелено(green), бледо-жълто (lime), тъмно-синьо или индигово (navy), синьо (blue), тъмно-виолетово (purple), лилаво (fuchsia), маслинено-зелено (olive), жълто (yellow), тъмно зелено (teal), морско синьо (aqua). Цветът може да бъде указан чрез съответната английска дума или чрез съответната шестнадесетична цифрова стойност за съответния цвят.

Пример: <body bgcolor=”pink” text=”blue”>

.............

</body>

б) таг <img> –> таг за изображения

– основни атрибути:

src – задължителенатрибут от тага за изображения. Посочва файлът с изображението (картинката);

align – подравнява изображението спрямо съседния текст. Може да приеме следните стойности: left (ляво), right (дясно), center (централно);

height и width – атрибути за посочване на размер на изображението (в пиксели). Указват съответно височината и широчината на изображението.

– файлови формати за изображения: GIF, JPG, BMP и PNG – нов формат (Portable Network Grafics)

Пример: <img src=”c:\My Documents\MyPicture.jpg” width=100 height=75 align=right>

в) таг <а> –> таг за хипервръзка (хиперлинк):

Използва се описване на хиперлинкове към: други Web-страници, към електронна поща
(e-mail)или за идентифициране и препращане към котви (anchors) в дадена Web-страница.

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

– атрибут href – задължителен атрибут, посочващ URL-адрес, идентифициращ ресурса на хипервръзката;

– линкуване към Web-страница

Основни понятия:

Ø Целеви ресурс за хипервръзката –-> указва се в атрибута href на тага <а> и съдържа
URL- адреса, който идентифицира ресурса;

Ø Лнкувано HTML съдържание –-> играе роля на линк в страницата и е текст или изображение, обградено с таговете <а> и </а>;

Пример:

<p>

Ние предлагаме много продукти, които може да разгледате като кликнете

<а href=”producti.html”> тук </а> или като разгледате нашия каталог.

целеви ресурс

линкувано съдържание

</p>

– линкуване към електронна поща (e-mail)

линкувано съдържание

<a href=”mailto: products@lycos.com“ > e-mail </a>

електронен адрес

протокол за електронна поща

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

Пример:

<p>

Може да разгледате нашата
<а href=”c:\My Documents\ceni.doc”> ценова листа </а> и да се уверите в достъпните цени на продуктите, които предлагаме.

ресурс линкувано съдържание

</p>

г) таг <p> и </p> –> за начало и край на абзац

– атрибут align – подравняване на текста в абзац;

– стойности: left, right, center и justify – съответно за ляво, дясно, централно и двустранно подравняване на текста в абзаца

Пример:

Този текст е централно подравнен.

</p>

5. Тагове за форматиране на текст: (стр. 62 ÷ 66)

а) физическо форматиране

– <b> – указва удебеляване на текста (т.нар стил “bold”);

– <big> –увеличава размера на шрифта от подразбиращия се

– <blink> –задава мигащ текст;

– <i> – задава курсив на текста (т.нар стил “italic”);

– <s> –задава зачертаване на текста;

– <small> – намалява размера на шрифта от подразбиращия;

– <sub> –задава долен индекс;

– <sup> – задава горен индекс;

– <tt> – задава шрифт с еднаква ширина на буквите;

– <u> – задава подчертаване на текста (т.нар стил “underline”);

б) форматиране на база на съдържанието

– <cite> – задава библиографски цитат, като например заглавие на статия от книга или списание;

– <code> – задава код с еднакво разстояние между буквите, като например код на програма;

– <dfn> – задава дефиниции, като такива, които се срещат в онлайн речник;

– <em> – добавя наблягане върху текста;

– <kbd> – посочва текст, който се въвежда от клавиатурата;

– <samp> – задава поредица от буквени символи;

– <strong> – добавя силен акцент към текст;

– <var> – указва променливи в код, например в програмен код;

6. Тагове за работа със списъци.

а) видове списъци:

– подредени (номерирани) списъци;

– неподредени (неномерирани) списъци;

– дефиниционни списъци, съдържащи понятия със съответните им дефиниции;

б) неномерирани списъци:

– таг за неномериран списък: <ul> и </ul>

– таг за пункт (точка) в списъка: <li> и </li>

– атрибут type за указване на знака, стоящ пред елементите в списъка. Може да приема следните стойности:

· disc – посочва запълнен кръг;

° circle – задава празен кръг;

§ square – задава запълнен (плътен) квадрат;

в) номерирани списъци

– таг за номериран списък: <оl> и </оl>

– таг за пункт (точка) в списъка: <li> и </li>

– атрибути в номериран списък:

start – атрибут за задаване на стартова цифра в списъка;

type – атрибут за задаване на типа на системата за номериране. Може да приема следните стойности:

1 – резултат от него е изписване на арабски цифри (т.е. 1,2,3,4,…). Това е стойността по на атрибута подразбиране.

А – резултат от него е изписване на главни латински букви (A, B, C, D,….)

a – резултат от него е изписване на малки латински букви (a, b, c, d,…)

I – резултат от него е изписване на римски числа ( I, II, III, IV,…)

i – резултат от него е изписване на номерация от вида: i, ii, ix, iv и т.н.

7. Организиране на страница чрез таблици.

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

а) основни тагове за работа с таблици

– <table> и </table> – дефинира (създава) таблица, като обособява нейното начало и край;

– <tr> и </tr> – обособява (дефинира) ред в таблица;

– <td> и </td> – обособява (дефинира) клеткаот данни в табличен ред;

– <th> и </th> – обособява (дефинира) заглавие на колона в таблица (заглавна клетка);

б) очертаване на рамки около таблица

– атрибут border – чрез него се указва число, определящо дебелината на табличната рамка в пиксели;

– атрибут frame – служи за донастройване на поставяните рамки, като указва тяхното разположение. Може да има следните стойности:

Ø Above – указва рамка в горнатачаст на таблицата (отгоре на таблицата);

Ø Below – указва рамка в долната част на таблицата;

Ø Hsides – указва рамка в горната и долната част на таблицата;

Ø Lhs – указва рамка в лявата част на таблицата (от лявата страна на таблицата);

Ø Rhs – указва рамка в дяснатачаст на таблицата (от дясната страна на таблицата);

Ø Vsides – указва рамка в дясната и лявата част на таблицата;

Ø Box – указва рамка от всички страни на таблицата;

Ø Border – указва рамка от всички страни на таблицата (аналогично на box);

Ø Void – указва липсата на рамки;

в) задаване на размер на таблицата

– атрибут Width – задава ширина на таблицата, която може да се укаже в пиксели или като процентот ширината на показваната страница;

Примери:

1) <table border =”2” width=”400”> . . .

2) <table border =”2” width=”60%”> . . .

г) подравняване на таблица

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

Ø хоризонтално подравняване на таблицата спрямо Web-страницата: Left, Right, Center;

Ø хоризонтално подравняване на данните в редовете, колоните и клеткитеот таблицата: Left, Right, Center;

– вертикално подравняване на клетки и редове: извършва се чрез атрибута Vlign, който може да приема следните стойности: Top, Middle, Bottom;

д) задаване на цветове в таблицата

– атрибут bgcolor – дефинира фонов цвят на клетка, ред или цялата таблица;

– атрибут background –определя фон на таблицата или фоново изображение от картина за таблицата или отделни клетки от нея;

Пример:

<td background = “Pictue.jpg”> Така указваме фон на клетка! </td>

Тема 1.3. Вмъкване на файл, създаден с офис-приложение
в HTML-документ

1. Подбиране на подходящи материали за включване в HTML-документ.

а) използване на документи и материали, създадени с офис-приложение

– текстов документ от MS-Word

– табличен документ от MS-Excel

– компютърна презентация от MS-PowerPoint

– база данни от MS-Access

– материали от ClipArt на MS-Office и др.

б) използване на други средства и материали

– графични изображения

– звукови и видео файлове (мултимедия)

в) подбиране на подходящи материали, съобразно темата, представена в Web-страницата

2. Вмъкване (включване) на файл, създаден с офис- приложение в HTML-документ.

а) правила за включване на файл от офис-приложение в HTML-документ

б) възможност за конвертиране на документ, създаден чрез Microsoft Office пакет в HTML-формат – лесен начин да създадем документ, годен за публикуване в Web.

– същност и предимства

– реализация:

File

Save as HTML

                                    File

Save Аs...

Save as type:

Web Page (*.htm; *.html )

▼


–        разглеждане на файл, конвертиран в HTML формат – чрез Интернет браузър

в) примери

<a href=”C:\My Documents\Zaplati.xls”> Заплати </a>

<a href=”C:\My Documents\Zaplati.html”> Заплати </a>

Тема 1.4. Публикуване на HTML-документ

1. Визуализиране (предварителен оглед) на HTML-документ.

HTML-документ се визуализира чрез отварянето на HTML-файл с Web-браузър (Internet Explorer, Netscape Navigator, … ). Web-браузърът визуализира съдържанието на Web-страницата, форматирайки го по начин, зададен от таговете в документа.

2. Публикуване на HTML-документ.

а) Web-клиент и Web-сървър и връзка между тях

– Web-клиент: Web-браузър, който показва Web-страници, след като ги получи от Web-сървър;

– Web-сървър: специален компютър в Интернет, който “подава” Web-страници към Web-клиентите, след заявка подадена от тях;

б) разработване и съхраняване на Web-страници

Обикновено Web-страниците се разработват на локален компютър и се прехвърлят и съхраняват на Web-сървър.

Възможно е и съхраняването на Web-страницата на локален компютър и да се направи собствен Web-сървър, но това изисква компютъра да е постоянно включен и да има постоянна връзка с Интернет.

Обикновено се използва услугата Web-хостингза съхраняване на Web-страниците и Web-сайтовете на специални Web-сървъри.

в) пространство върху Web-сървър

– безплатно Web-пространство (безплатен Web-хостинг): ограничено по размер пространство, името на сайта (акаунта, домейна) не може да се избира;

– платен Web-хостинг: има възможност за избор на акаунт (име на сайт, домейн), размера на пространството зависи от цената, която се заплаща;

– виртуален сървър– закупуване на собствен Web-адрес и пространство;

– избор на начин на хостване и избор на хост – критерии при избор на хостващ сървър, безплатен и платен хостинг;

– избор на име (домейн):

· правилен избор на име (критерии при избор и съставяне на име на сайт)

· регистрация на име

· ICANN – световна организация за регулиране на процеса на регистриране на домейни

· възможност за регистриране на домейн в България: Цифрови системи, www.hit.bg
и др.

· други възможности за регистрация на домейни

– DNS (Domain Name Server) сървъри – реализират разпознаването на съответния
IP-адрес на база името на сайта (домейна)

– видове домейни според окончанията им:

· “регионални”:

.bg – за България;

.uk– за Великобритания;

.ru – за Русия;

.de – за Германия и др.;

· ”световни”:

.com – сайтове с комерсиален характер (търговски предприятия);

.edu – образователни сайтове;

.org – сайтове на нетърговски организации;

.mil – военни сайтове и организации;

.biz – бизнес сайтове;

.info – информационни сайтове;

.net – компютърни мрежи;

.int – международни организации;

.gov – правителствени агенции и организации мрежи и др.

г) прехвърляне (“качване”, Upload) на сайт върху Web-сървър

– FTP протокол (File Transfer Protocol);

– FTP сървъри и FTP услуга;

– име на домейн, потребителско име и парола;

– избор на софтуер за прехвърляне на сайта (за Web-публикуване)

/ Microsoft Web Publishing Wizard, CutFTP, WS_FTP – една от най-популярните програми за файлов трансфер (може да се изтегли от: https://www.ipswitch.com) и др. /

– прехвърляне на сайта (upload);

д) поддръжка и актуализация на публикуван документ (сайт);

е) регистриране в търсещи машини;

ж) реклама на сайта.

Тема 2. Скриптови езици

Тема 2.1. Адресиране в Интернет

1. Интернет-възли.

Компютрите, които общуват чрез Интернет (Internet), се подчиняват на нейните комуникационни правила и се наричат възли. Възлите са два основни вида:

а) сървър-компютри – предоставят една или няколко услуги на отдалечените потребители на Интернет;

б) клиентски компютри – дават възможност на отдалечените потребители да се свързват с Интернет и да изпълняват клиентски програми за достъп до услуги.

Сървърите трябва да бъдат в постоянна връзка с Интернет.

2. Адресиране в Интернет. Интернет адреси.

а) адреси на компютри

– IP-адрес (Internet Protocol) – четири числа от интервала [0-255], разделени с точка.

Пример: 192.168.0.75

– предназначение – за разпознаване и комуникация между потребителите в мрежата.

– видове: динамични и статични IP-адреси.

– имена на възли: DN и DNS (Domain Name Server или Domain Name System) – символният еквивалент на IP адресите

– популярни окончания (области на върхово равнище) – .com, .edu, .org, .mil, .net, .int, .gov, .bg, .ru, .uk, .us и т.н.

б) адреси на ресурси – URL-адрес на ресурс (Uniform Resource Locator)

– абсолютен URL-адрес на ресурс

– относителен URL-адрес на ресурс

в) общо адресиране – (Пример: pertov.sofia.digsys.net )

Създаване и публикуване на Web документ

Тема 1. Основни тагове в HTML

Тема 1.1. Средства за програмиране в Интернет

1. Хипертекстов документ. Език HTML.

а) хипертекстов документ

б) език HTML (HyperText Markup Language– език за форматиране на хипертекстови документи)

2. Средства за програмиране в Интернет (за създаване на Web- страници).

б) чрез специализирани програмни пакетиза създаване на Web-страници в режим WYSIWYG (WYSIWYG = What You See Is What You Get);

Например: Front Page, Macromedia Dream Weaver и др.

в) други средиза разработка на Web страници – Java, Java Script, XML, VRML и др.;

г) отваряне (преглеждане) на HTML–файл – извършва се с помощта на произволен
Web-браузър.

3. Избор на подходящи средства за програмиране в Интернет. Как да създадем успешен сайт.

Тема 1.2. Създаване на HTML-документ. Сруктура на
HTML-документ – основни тагове и правила

1. Структура на HTML-документ.

а) съдържание

б) команди в HTML

в) структура на HTML-документ

<head>

<title>Title of page(Заглавие на страницата) </title>

</head>

<body>

This is my first homepage. <b>This is some text</b>

</body>

</html>

г) HTML-документ и HTML-файл

Ø HTML-документе документ, който може да се отвори за разглеждане с Web-браузър. Съхранява се като HTML-файл.

д) Web-страниците като интелектуална собственост

2. Тагове.

а) същност и предназначение на таговете

б) особености

Ø заграждат се в ъглови скоби (“<” и “>”);

Ø HTML таговете не са “Case sensitive”, т.е главните и малките букви са равноправни;

в) атрибути

Атрибутите играят важна роляпри работата с тагове. Използват се за описване на свойствата на даден таг.

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

3. Основни елементи на HTML-страница. Основни HTML-тагове.

а) структурни тагове – използват се за описване на основната (цялостната) структура на Web-страницата.

Ø <html> и </html> – огражда HTML кода. Идентифицира документа като HTML-документ;

Ø <title> и </title> – обгражда заглавието на страницата;

Ø  – коментар, който няма да бъде видим при разглеждане с браузър;

б) текстови тагове– служат за организиране и форматиране на текстовото съдържание

Ø <p> и </p> – начало и край на абзац (параграф);

Ø <b> и </b> – удебеляване на текст (т.нар. стил “bold”);

Ø <i> и </i> – прави текста курсив (т.нар. стил “italic”);

Ø <u> и </u> – подчертан текст (т.нар. стил “underline”);

Ø <br> или </br> – край на ред и пренасяне на нов ред (Line break);

Ø <font> и </font> – указва шрифт на текста;

Ø <ul> и </ul> – обособява неномериран(неподреден) списък от пунктове (точки);

Ø <ol> и </ol> – обособява номериран(подреден) списък от пунктове;

Ø <li> и </li> – обособява пункт в номериран и неномериран списък;

г) таблични тагове – позволяват създаването на таблици и тяхното организиране и оформяне:

Ø <table> и </table> – обособява началото и края на таблица;

Ø <tr> и </tr> – обособява ред в таблицата;

Ø <td> и </td> – дефинира клетка в табличен ред (клетка от данни в табличен ред);

Ø <th> и </th> – указва заглавие на колона в таблица;

д) други тагове

Ø <img> – таг за въвеждане на изображение в Web-страница;

Ø < а> и </а> – таг за хипервръзка (хиперлинк);

Ø <meta> и </meta> – допълнителна информация за Web-страницата;

4. Основни атрибути в някои HTML-тагове.

а) таг <body> –> тяло на HTML-документа

– основни атрибути: bgcolor – задава (указва) цвят на фона на HTML-страницата;

text – задава цвят на текста (основния текст);

Пример: <body bgcolor=”pink” text=”blue”>

.............

</body>

б) таг <img> –> таг за изображения

– основни атрибути:

src – задължителенатрибут от тага за изображения. Посочва файлът с изображението (картинката);

– файлови формати за изображения: GIF, JPG, BMP и PNG – нов формат (Portable Network Grafics)

Пример: <img src=”c:\My Documents\MyPicture.jpg” width=100 height=75 align=right>

в) таг <а> –> таг за хипервръзка (хиперлинк):

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

– атрибут href – задължителен атрибут, посочващ URL-адрес, идентифициращ ресурса на хипервръзката;

– линкуване към Web-страница

Основни понятия:

Пример:

<p>

Ние предлагаме много продукти, които може да разгледате като кликнете

<а href=”producti.html”> тук </а> или като разгледате нашия каталог.

целеви ресурс

линкувано съдържание

</p>

– линкуване към електронна поща (e-mail)

линкувано съдържание

<a href=”mailto: products@lycos.com“ > e-mail </a>

електронен адрес

протокол за електронна поща

Пример:

<p>

ресурс линкувано съдържание

</p>

г) таг <p> и </p> –> за начало и край на абзац

– атрибут align – подравняване на текста в абзац;

Пример:

Този текст е централно подравнен.

</p>

5. Тагове за форматиране на текст: (стр. 62 ÷ 66)

а) физическо форматиране

– <b> – указва удебеляване на текста (т.нар стил “bold”);

– <big> –увеличава размера на шрифта от подразбиращия се

– <blink> –задава мигащ текст;

– <i> – задава курсив на текста (т.нар стил “italic”);

– <s> –задава зачертаване на текста;

– <small> – намалява размера на шрифта от подразбиращия;

– <sub> –задава долен индекс;

– <sup> – задава горен индекс;

– <tt> – задава шрифт с еднаква ширина на буквите;

– <u> – задава подчертаване на текста (т.нар стил “underline”);

б) форматиране на база на съдържанието

– <cite> – задава библиографски цитат, като например заглавие на статия от книга или списание;

– <code> – задава код с еднакво разстояние между буквите, като например код на програма;

– <dfn> – задава дефиниции, като такива, които се срещат в онлайн речник;

– <em> – добавя наблягане върху текста;

– <kbd> – посочва текст, който се въвежда от клавиатурата;

– <samp> – задава поредица от буквени символи;

– <strong> – добавя силен акцент към текст;

– <var> – указва променливи в код, например в програмен код;

6. Тагове за работа със списъци.

а) видове списъци:

– подредени (номерирани) списъци;

– неподредени (неномерирани) списъци;

– дефиниционни списъци, съдържащи понятия със съответните им дефиниции;

б) неномерирани списъци:

– таг за неномериран списък: <ul> и </ul>

– таг за пункт (точка) в списъка: <li> и </li>

– атрибут type за указване на знака, стоящ пред елементите в списъка. Може да приема следните стойности:

· disc – посочва запълнен кръг;

° circle – задава празен кръг;

§ square – задава запълнен (плътен) квадрат;

в) номерирани списъци

– таг за номериран списък: <оl> и </оl>

– таг за пункт (точка) в списъка: <li> и </li>

– атрибути в номериран списък:

start – атрибут за задаване на стартова цифра в списъка;

type – атрибут за задаване на типа на системата за номериране. Може да приема следните стойности:

1 – резултат от него е изписване на арабски цифри (т.е. 1,2,3,4,…). Това е стойността по на атрибута подразбиране.

А – резултат от него е изписване на главни латински букви (A, B, C, D,….)

a – резултат от него е изписване на малки латински букви (a, b, c, d,…)

I – резултат от него е изписване на римски числа ( I, II, III, IV,…)

i – резултат от него е изписване на номерация от вида: i, ii, ix, iv и т.н.

7. Организиране на страница чрез таблици.

а) основни тагове за работа с таблици

– <table> и </table> – дефинира (създава) таблица, като обособява нейното начало и край;

– <tr> и </tr> – обособява (дефинира) ред в таблица;

– <td> и </td> – обособява (дефинира) клеткаот данни в табличен ред;

– <th> и </th> – обособява (дефинира) заглавие на колона в таблица (заглавна клетка);

б) очертаване на рамки около таблица

– атрибут border – чрез него се указва число, определящо дебелината на табличната рамка в пиксели;

Ø Above – указва рамка в горнатачаст на таблицата (отгоре на таблицата);

Ø Below – указва рамка в долната част на таблицата;

Ø Hsides – указва рамка в горната и долната част на таблицата;

Ø Lhs – указва рамка в лявата част на таблицата (от лявата страна на таблицата);

Ø Rhs – указва рамка в дяснатачаст на таблицата (от дясната страна на таблицата);

Ø Vsides – указва рамка в дясната и лявата част на таблицата;

Ø Box – указва рамка от всички страни на таблицата;

Ø Border – указва рамка от всички страни на таблицата (аналогично на box);

Ø Void – указва липсата на рамки;

в) задаване на размер на таблицата

Примери:

1) <table border =”2” width=”400”> . . .

2) <table border =”2” width=”60%”> . . .

г) подравняване на таблица

Ø хоризонтално подравняване на таблицата спрямо Web-страницата: Left, Right, Center;

Ø хоризонтално подравняване на данните в редовете, колоните и клеткитеот таблицата: Left, Right, Center;

д) задаване на цветове в таблицата

– атрибут bgcolor – дефинира фонов цвят на клетка, ред или цялата таблица;

Пример:

<td background = “Pictue.jpg”> Така указваме фон на клетка! </td>

Тема 1.3. Вмъкване на файл, създаден с офис-приложение
в HTML-документ

1. Подбиране на подходящи материали за включване в HTML-документ.

а) използване на документи и материали, създадени с офис-приложение

– текстов документ от MS-Word

– табличен документ от MS-Excel

– компютърна презентация от MS-PowerPoint

– база данни от MS-Access

– материали от ClipArt на MS-Office и др.

б) използване на други средства и материали

– графични изображения

– звукови и видео файлове (мултимедия)

в) подбиране на подходящи материали, съобразно темата, представена в Web-страницата

2. Вмъкване (включване) на файл, създаден с офис- приложение в HTML-документ.

а) правила за включване на файл от офис-приложение в HTML-документ

– същност и предимства

– реализация:

в) примери

<a href=”C:\My Documents\Zaplati.xls”> Заплати </a>

<a href=”C:\My Documents\Zaplati.html”> Заплати </a>

Тема 1.4. Публикуване на HTML-документ

1. Визуализиране (предварителен оглед) на HTML-документ.

2. Публикуване на HTML-документ.

а) Web-клиент и Web-сървър и връзка между тях

– Web-клиент: Web-браузър, който показва Web-страници, след като ги получи от Web-сървър;

б) разработване и съхраняване на Web-страници

Обикновено Web-страниците се разработват на локален компютър и се прехвърлят и съхраняват на Web-сървър.

в) пространство върху Web-сървър

– виртуален сървър– закупуване на собствен Web-адрес и пространство;

– избор на име (домейн):

· правилен избор на име (критерии при избор и съставяне на име на сайт)

· регистрация на име

· ICANN – световна организация за регулиране на процеса на регистриране на домейни

· възможност за регистриране на домейн в България: Цифрови системи, www.hit.bg
и др.

· други възможности за регистрация на домейни

– DNS (Domain Name Server) сървъри – реализират разпознаването на съответния
IP-адрес на база името на сайта (домейна)

– видове домейни според окончанията им:

· “регионални”:

.bg – за България;

.uk– за Великобритания;

.ru – за Русия;

.de – за Германия и др.;

· ”световни”:

.com – сайтове с комерсиален характер (търговски предприятия);

.edu – образователни сайтове;

.org – сайтове на нетърговски организации;

.mil – военни сайтове и организации;

.biz – бизнес сайтове;

.info – информационни сайтове;

.net – компютърни мрежи;

.int – международни организации;

.gov – правителствени агенции и организации мрежи и др.

г) прехвърляне (“качване”, Upload) на сайт върху Web-сървър

– FTP протокол (File Transfer Protocol);

– FTP сървъри и FTP услуга;

– име на домейн, потребителско име и парола;

– избор на софтуер за прехвърляне на сайта (за Web-публикуване)

– прехвърляне на сайта (upload);

д) поддръжка и актуализация на публикуван документ (сайт);

е) регистриране в търсещи машини;

ж) реклама на сайта.

Тема 2. Скриптови езици

Тема 2.1. Адресиране в Интернет

1. Интернет-възли.

а) сървър-компютри – предоставят една или няколко услуги на отдалечените потребители на Интернет;

Сървърите трябва да бъдат в постоянна връзка с Интернет.

2. Адресиране в Интернет. Интернет адреси.

а) адреси на компютри

– IP-адрес (Internet Protocol) – четири числа от интервала [0-255], разделени с точка.

Пример: 192.168.0.75

– предназначение – за разпознаване и комуникация между потребителите в мрежата.

– видове: динамични и статични IP-адреси.

– имена на възли: DN и DNS (Domain Name Server или Domain Name System) – символният еквивалент на IP адресите

– популярни окончания (области на върхово равнище) – .com, .edu, .org, .mil, .net, .int, .gov, .bg, .ru, .uk, .us и т.н.

б) адреси на ресурси – URL-адрес на ресурс (Uniform Resource Locator)

– абсолютен URL-адрес на ресурс

– относителен URL-адрес на ресурс

в) общо адресиране – (Пример: pertov.sofia.digsys.net )

Тема 2.2.Средства и възможности за търсене и извличане на документи от Интернет

1. Средства и възможности за търсене на информация в Интернет.

а) браузъри .

– същност и предназначение – осъществяват достъпа до World Wide Web. Те са средство (среда) за достъп и разглеждане на Интернет информация (публикувана в WWW).

– видове: текстови и графични (Internet Explorer, Netscape Navigator и др.)

б) търсене на информация в Интернет

– чрез адреса на ресурса (сайт, документ, файл) – URL-адрес

– чрез “търсачки” (търсещи машини) – търсене по теми и ключови думи

2. Извличане на документи от Интернет (Download).

а) извличане на документи от https:// сървър – (HyperText Transport Protocol)

б) извличане на документи от ftp:// сървър – ( File Transfer Protocol )

– безплатни ftp-акаунти

– платени акаунти – потребителско име и парола

– извличане на програми за временно и експериментално ползване

3. Виртуални библиотеки, указатели и машини за търсене в Интернет.

а) виртуални библиотеки

Предимства:

– сравнително малкия информационен “шум”

– подбрани са най-добрите ресурси;

– дава описание, а понякога и оценка на ресурсите;

– често обхванатите теми са развити в голяма дълбочина;

Недостатъци:

– сравнително малък обхват по тематика и брой ресурси;

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

– сравнително бавна актуализация;

Някои по-известни библиотеки:

– Internet Public Library – https://www.ipl.org

– Argus Clearinghouse – https://clearinghouse.net

– BUBL Subject Links – https://www.bubl.ac.uk/link/

– Clearinghouse for Subject – Oriented Internet Resource Guides – https://www.lib.umich.edu/chhome.html

– и други;

б) указатели

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

Предимства:

– те са много по-пълни от виртуалните библиотеки и по тематика и по брой на обхванатите ресурси;

– редовно и по-често актуализиране(някои от тях дори ежедневно);

Недостатъци:

– дават по-оскъдна информация за намерените ресурси – често само заглавие на ресурса и връзка към него;

– липсва контрол на качеството, вследствие на което се получава много “шум”;

Най-популярни указатели:

– Yahoo! - https://www.yahoo.com – първият, най-пълният, ежедневно актуализиран и лесен за използване;

– BizWeb – https://www.bizweb.com – дава връзка към десетки хиляди фирми, подредени в около 200 категории и подкатегории, както и кратки сведения за тях;

– Open Market’s Commercial Sites Index – https://www.directory.net– има същото предназначение като BizWeb, но обхваща значително по-голям брой фирми;

– Einet Galaxy – https:///galaxy.einet.net – Покрива широк тематичен обхват и значителен брой ресурси, като подава информация и за документи, съхранени в Gopher-сървъри, а също и за адреси на Telnet -хостове;

– Big Yellow – https://www.bigyellow.com –Това е един от най-богатите фирмени указатели в Интернет. Позволява търсене и за хора и за адрес на електронна поща;

– Snap – www.snap.com – прилича на Yahoo;

в) машини за търсене в Интернет

Благодарение на своето напълно автоматично функциониране, машините за търсене излъчват “шампионите” по пълнота и всеобхватност сред средствата за търсене.. Те са твърде многобройни (към 1997 г. – над 1800), като прилагат най-различни механизми за събиране на данни, индексиране, търсене и подреждане на резултатите, по релативност.

Най-популярни са:

– Bing – https://www.bing.com/

– Google – https://www.google.bg/

– AltaVista – https://www.altavista.digital.com

– HotBot – https://www.hotbot.com

– Northern Light – https://www.northernlight.com

– Lycos – https://www.lycos.com

– Infoseek – https://www.infoseek.com

– и други.

Още за Как се прави сайт www сайтове

HTMLТема 1. Основни тагове в HTML

За връзка