Създаване на Web страници

Въведение

Какво представлява HTML? Ключът към разбирането на този термин е във връзката между HTML и Wеb. Уеб представлява огромен океан от документи – уебстраници – които са свързани по между си, така че да можете да прескачате от една страница в друга. Това означава, че уебстраниците са написани на HTML, също както когато пишете писмо до приятел от Италия, пишете писмото на италиански. Очевидно разликата е, че HTML е компютърен език, разбираем за Web браузърите, а италианският език е човешки език разбираем за хората живеещи в Италия. Езикът HTML е официалния език за Уеб страниците и означава HyperТext Markup Language (хипертекстов език за маркиране). Използва се в Уеб за форматиране на текст и изображения. Той ви дава възможност да прецизирате посланието, което изпращате към света.Една Уеб страница, написана на HTML се записва, като документ с разширение html или htm.Командите в HTML са оградени в счупени скоби <> и се наричат тагове. Не команди, а тагове. Примерно командата, която казва на браузъра, че следва удебелен текст изглежда така: <b>. Повечето тагове в HTML имат две части: Отваряща част Затваряща част

Затварящата част на един таг е същата, както отварящата, но веднага след отварящата счупена скоба има наклонена черта. Така затварящия таг за удебелен текст ще изглежда така:</b>. Той указва на браузъра, че текста след него не бива повече да е удебелен. Има тагове, които оказват, на браузъра, че един текст е заглавие, клетка от таблица, част от списък, препратка към друга страница, или пък вмъкват картинка в страницата, има тагове за вмъкване на звук, видео и какво ли още не в една web страница, но нека започнем нещата едно по едно.Накратко, Уеб страницата е комбинация от това, което трябва да бъде визуализирано u начина, по който да бъде визуализирано. Всяка Wеb страница може да се създаде по два начина:1. Като се пише HTML кода в текстов редактор, например Notepad, Textpad, Ultra Edit, JCreator.2. Като се използват специализирани редактори, които генерират HTML кода автоматично.

Питате се, щом като HTML е така важен за красивото оформяне на Уеб страниците и свързването им по между си, защо тогава не го виждаме, когато сме в Уеб, заети с пазаруване, търсене или просто сърфиране? Отговорът е, че никой друг освен уеб дизайнерите и уеб браузърите, не говори езика HTML. Когато вие проектирате уеб страница, вие на практика пишете лично “писмо” до уеб браузъра относно това, как бихте искали да изглежда вашата страница. Това писмо би могло да изглежда по следния начин:“Скъпи ми браузър,

Моля те постави снимката на моя любимец саламандъра Ърнест в горния ляв ъгъл на екрана и напиши името му с удебелени букви точно под снимката. Вдясно от Ърнест постави неговите жизнени характеристики, тоест височина, тегло и цвят. Под всичко това вмъкни линк(препратка) към e-mail-ът му, така, че приятелите ми да могат да му изпратят по един e-mail със своите най-добри пожелания за оздравяването на Ърнест. И още нещо – моля те направи фона на страницата розов, любимия цвят на Ърнест.

Искрено твой,Данчо”Макар,че това разказно описание между уеб дизайнера и уеб браузъра очевидно не е валиден HTML код, то представя как в действителност се описва информацията, чрез използване на HTML. Проблемът е, че компютрите не са особено умни и трябва да им дадете подробни инструкции, за да получите точно каквото искате във вашата уеб страница. HTML е езикът, използван за предаване на тези подробни инструкции.

1

Създаване на Web страницис помощта на HTML

1. Структура. Предполагам почти всички сте програмирали на Паскал. Там една програма има приблизително следната структура:program dictionary;uses crt;type te=string; f1=file of te;var f:f1; izb:char;

procedure add(var f:f1);var k,x:te;beginwriteln('input word and it',chr(39),'s meaning [end=nothing input]:');reset(f);while not eof(f) do read(f,x);repeatreadln(x);k:=x;if x<>'' then write(f,x);until k='';close(f);end;

procedure show(var f:f1);var x,ang,bg:te;beginwrite('duma:');readln(x);reset(f);while not eof(f) do begin read(f,ang);read(f,bg); if x=ang then writeln(bg) else if x=bg then writeln(ang); end;close(f);end;procedure test(var f:f1;n:integer);var i:integer; x:longint; ang,bg,t:te;beginreset(f);for i:=1 to n do beginx:=random(FileSize(f) div 2);seek(f,x*2);read(f,ang);read(f,bg);writeln(ang);readln(t); if t=bg then writeln('corect') else writeln(bg); end;close(f);end;

BEGINrandomize;assign(f,'dictiona.dat');repeatwriteln('r-read word w-add word e-end program t-test');izb:=ReadKey;if izb='r' then show(f) else if izb='w' then add(f) else if izb='t' then test(f,10);until izb='e';END.

2

При HTML документа, също има фиксирана структура.При създаването на Web страници с директно писане на HTML тагове се най-често се използва текстов редактор, като Notepad, TextPad, JCreator. Както в Паскал има команди, така и в HTML има команди, но в HTML те се наричат таговете. Таговете представляват указания за браузъра, заграждат се в < > счупени скоби и няма значение дали се изписват с големи или малки букви.Казахме, че една страница на HTML има строга структура. Всяка страница започва със деклариране на тага <HTML>, който оказва, че този текст надолу не е текстов файл или някакъв друг файл, а е Уеб страница. Всяка страница завършва със затварящия таг </HTML>.

<HTML></HTML>

За създаването на затварящ таг, просто трябва да се добави “/”(наклонена черта) към отварящият таг. Повечето, но не всички, тагове имат затварящи.Горния пример казва на браузъра "начало на html документ" (<HTML>) и "край на html документ" (</HTML>). Във всяка уеб страница задължително и присъстват и други три важни тага, в следния ред:

<HTML><HEAD><TITLE>Текст на заглавието</TITLE></HEAD><BODY>Здравейте!</BODY></HTML>

Това всъщност е самата структура на една Уеб страница. В раздела: <HEAD> ... </HEAD> се задава заглавие и може да се зададат мета етикети и обръщение към файл. Този файл може да е скрипт, но за скриптове сега няма да говорим, а може и да е CSS (Cascade Style Sheet), тоест каскадни стилови таблици. С тези “таблици” се задава модификация на някои тагове, за всяка страница, която използва тези стилови таблици. Примерно може да промените абзаца <p> за е с червен текст в стиловите таблици, и навсякъде, където използвате абзац, той по подразбиране ще е с червен текст. Внимание! По-старите браузъри не поддържат CSS.

В тялото на Уеб страницата, заградено от двойката тагове <BODY> … </BODY> се разполага съдържанието на цялата Уеб страница, заедно с всички указания за форматирането ù. Тоест, обособяване на текста в параграфи (абзаци), удебеляване на текст, текст в курсив(наклонен), обособяване на точки и подточки, не номериран списък, таблици, картинки, хипервръзки(препратки) и други... В тялото на страницата <BODY> … </BODY> се задава всичко, което се вижда от потребителя .А сега малко по-подробно за всяка една част:

3

Между таговете <HEAD> ... </HEAD> се поставя информацията, отнасяща се за самия браузър – заглавие на страницата (<TITLE> ... </TITLE>), JavaScript и/или VBScript функции, вмъкване на файлове(CSS (Cascade Style Sheet) – каскадни стилови таблици или скриптови файлове), мета етикети, стилове дефинирани в самата Уеб страница и т.н.

Примерно вмъкването на файл става с тага <link…>. Този таг няма затварящ таг. Изобщо повечето тагове в раздела <HEAD> ... </HEAD> нямат затварящи. За всеки таг може да се добавят свойства, които се наричат АТРИБУТИ.Всеки таг може да има и атрибути, като някои тагове се обезсмислят, ако не им се добавят атрибути. Такъв е тага за вмъкване на картинка <img>, на който ако не се окаже от къде да вземе картинката, чрез атрибута src=”my_dog.jpg”, няма да прави нищо, но затова по късно. Атрибутите играят много важна роля при работа с тагове. Казано по–просто атрибутите се използват за описване на свойствата на даден таг.За тага <link ...>, който казахме, че вмъква файл от определен тип, имаме следните атрибути:

<link href="styles.css" rel="stylesheet" type="text/css" >

Атрибута HREF е съкращение от “Hyper Reference” и означава препратка към друг файл. В случая “styles.css”, което е името на файла с каскадни стилови таблици. href="styles.css"

Типът може да бъде: type="text/css" type="text/javascript"

Това ни подсказва, че тук може да вмъкнем файл “my_alert.js”, който съдържа JavaScript, но за това няма да говорим този час.

Атрибута Rel e съкращение от “Relation” и може да приема много стойности. Това, което ни интересува в е: rel="stylesheet"

Което означава, че този файл е, който вмъкваме съдържа каскадни стилови таблици (Cascading Style Sheet или CSS).

Също в раздела <HEAD> стоят и МЕТА етикетите. Това са команди, които помагат на браузъра и на търсещите машини в интернет да познават съдържанието, езика и други детайли на страницата. Чрез МЕТА етикет указвате на браузъра, че страницата ви е написана на кирилица, добавяте ключови думи за търсене, описание на сайта си, запазвате авторско право, върху страницата си. Всеки мета етикет започва с тага <META …> и няма затварящ таг! Както методите (процедурите и функциите) в един език за програмиране имат входни параметри, така таговете в HTML имат АТРИБУТИ. Атрибутът е опция на даден таг, която позволява да посочите детайли за начина, по който той влияе на съдържанието на Уеб страницата. Тагът мета има два задължителни атрибута:

4

Name – име и Content – съдържание

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

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><meta name="Keywords" content ="IT, course, rating"><meta name="Description" content ="This is my course site"> <meta name="Author" content ="Tsvetko Trendafilov"><meta name="reply-to" content ="tsvetko_tr@yahoo.com"><meta name="copyright" content ="All Rights reserved by Tsvetko Trendafilov"><meta name="rating" content ="General"><meta name="robots" content ="ALL"><meta name="revisit-after" content ="5 days"><meta name="GENERATOR" content="Notepad"><meta http-equiv="cache-control" content="no-cache">

Можете да видите генератор на Мета етикети на адрес:http :// scripts . cgispy . com / metatag . cgi ? user = ccBEST Толкова за Мета етикетите.

Тагът <TITLE> не е важен само защото в лявата част на синята лента на браузъра излиза заглавието, което сте посочили. Ако решите да добавите страницата към любимите си страници, от менюто Favorites -> Add to Favorites… по подразбиране страницата се добавя точно с това име, което сте посочили в тага <TITLE> … </TITLE>.

В тялото на страницата <BODY> … </BODY> се поставя съдържанието на страницата, заедно с форматиращите го тагове. Ние разгледахме примера:<HTML><HEAD><TITLE>Текст на заглавието</TITLE></HEAD><BODY>Здравейте!</BODY></HTML>В този пример, казваме на браузъра да покаже надписа “Текст на заглавието” в горната, синя ивица на прозореца и “Здравейте!” в мястото за съдържание.Изобщо казано тагът указва на браузъра да направи нещо. А атрибута (ATTRIBUTE) се поставя в тага и посочва как точно да стане това.

Пример: <BODY BGCOLOR="#FFFFFF">Задай цвят на фона на страницата – бял.Изобщо атрибута bgcolor=”white” се използва за задаване на цвят на фона.

5

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

Надолу ще покажем някои от основните (и най-често използвани) тагове (команди) и техните най-често използвани атрибути. Не е задължително, разбира си, да пишете атрибутите всеки път. Те имат подразбираща се стойност и ако не ги напишете, се използва подразбиращата се стойност. Тоест, ако не окажете на браузъра какъв фон да сложи, тоест не напишете атрибута bgcolor=”…” се подразбира бял цвят за фон.И така, да започваме:Тагът <BODY> се отнасят се за съдържанието на документа, тоест за съдържанието на Уеб страницата, като цяло:

<BODY BGCOLOR=”цвят”></ BODY>Задава цвят на фона:1. чрез име на цвят, примерно: “white”(бяло), “black”(черно), “yellow”(жълто), “red”(червено), “green”(зелено), “blue”(синьо), “silver”(сребристо), “gray”(сиво), “moroon” (червено-кафяво), “lime”(бледо жълто), “navy” (тъмно-соньо, индигово), “purple”(тъмно виолетово), “fuchsia”(лилаво), “olive”(маслено зелено), “teal” (тъмно зелено), “aqua”(морско синьо);

или 2. чрез 16-тичен код се задава фонов цвят на страницата. Примерно: “#000000” – задава черен цвят;“#FFFFFF” – задава бял цвят;“#FF0000” – задава червен цвят;“#00FF00” – задава зелен цвят;“#0000FF” – задава син цвят;“#FFFF00” – задава ярко жълт цвят.

В Уеб, не знаете на какъв компютър ще работи потребителя, който разглежда вашата страница. Обикновено по училищата използват все още компютри 486 или 586. Възможно е компютъра на потребителя да поддържа само 250 цвята, тогава цвета на вашия фон ще му излезе или на точки, или на тирета, или като съвсем друг цвят. Примерно, ако пишете на сив фон с черни букви, но сивото ви е някакъв странен нюанс на сивия цвят, то компютъра на потребителя може да реши, че най-близкия цвят до вашия сив, който поддържа е черен. И ако и буквите са ви черни, при потребителя няма да си вижда нищо. По често срещаното явление е да ложите примерно странен нюанс на жълтия цвят, а при потребителя вместо бледо жълто, каквото сте сложили за фон да излезе ярко жълт цвят на бели точки, които страшно много дразнят очите. Пробвайте да си сложите цветовете на 256 цвята и вижте как ще изглежда вашата Уеб страница. Затова се препоръчва да си използват само така наречените Уеб-сейф (Web safe) цветова. Това се постига, като се използват само шестнайсетичните числа “00, 33,

6

66, 99, CC, FF”. Така получавате 216 цвята, които можете да използвате спокойно. Ето и таблицата със тези Web safe цветове:

000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF

33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFFCC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF

CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FFFF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

<BODY BACKGROUND=”URL”></ BODY>Задава адреса на изображение, което да служи за фон на страницата. Това може да е картинка от интернет и тогава URL адреса е във формат :BACKGROUND=”http :// tsvetko . hit . bg / bkg 2. jpg ”, ако картинката е в директорията, в която е Уеб страницата, пишем само името на картинката. Тогава атрибута background има стойност във формат:BACKGROUND=”bkg2.jpg”Желателно е фоновото изображение да НЕ Е дразнещо за очите. Потребителя трябва да може да се съсредоточи във съдържанието на страницата, без да се разсейва от фонът и.

<BODY TEXT=”цвят” LINK=”цвят” ALINK=”цвят” VLINK=”цвят”></BODY>Тези атрибути задават:TEXT=”цвят” – задава цвят на текста. По подразбиране е черен.;LINK=”цвят” – задава цвят на хипервръзките (препратките) в страницата. По подразбиране обикновено е син. Може да се промени от настройките на браузъра, по подразбиране цвета да е някакъв друг.ALINK=”цвят” – идва от active link и е цвета на препратката в момента на щракването с мишката върху нея.

7

VLINK=”цвят” – идва от visited link и е цвета на препратката, ако потребителя вече е щракнал на нея, или по друг повод вече е разглеждал страницата, към която е препратката.

<BODY leftmargin="3" topmargin="6" rightmargin="0" bottommargin="0"></BODY>leftmargin="3" – задава отстъп от ляво, между рамката на браузъра и текста. По подразбиране тази стойност е 10 точки. topmargin="6" – задава отстъп от горе, между рамката на браузъра и текста. По подразбиране тази стойност е 20 точки. rightmargin="0" – задава отстъп от дясно, между рамката на браузъра и текста. bottommargin="0"– задава отстъп от долу, между рамката на браузъра и текста.

Всеки браузър има настройки "по подразбиране", които са следните - текстът е черен, връзките са сини, активните връзки са червени и посетените връзки са виолетови. Чрез горните атрибути се променят тези цветове. Разстоянията между рамката на браузъра и текста са по 10 точки отстъп отляво и отдясно и 20 точки отгоре и отдолу. Променят се със съответните leftmargin, rightmargin и topmargin, bottommargin.

Както в Word има абзац, и като отворим менюто:

Format -> Paragraph… И като променим опциите Before -> “0” и “After -> ”12”, всеки параграф започва да се отделя от другия на 12 точки. Когато натиснем бутона <Enter> курсора преминава на нов абзац на видимо разстояние през един ред по надолу. В Word може да видим параграфите, като такива специални символи.В HTML също има команда за параграф и тя е:

<P></P>Текстът между тези тагове се показва като отделен абзац.Този таг може да приема атрибути:align="left"align="center"align="right"align="justify"Които задават подреждане също както при Word. Ще отбележа, че Justify подравнява текста и отляво и отдясно, като варира големината на интервалите между думите, но само ако абзаца надминава един ред, ако имаме абзац само от един ред Justify подравнява текста както left.

lang="en" – Английски език lang="bg" – Български езикlang="fr" – Френски езикlang="de" – Немски езикlang="es" – Испански езикlang="uk" – Британски Английски езикТози атрибут е само за прегледност, той не влияе на съдържанието по никакъв начин.

8

<B></B>Начален и краен таг за удебелен текст. Отново, както в Word.

<I></I>Начален и краен таг за наклонен текст. Тагът <I> идва от Italic, което се превежда, като курсив, по същество това е наклонен текст.

<U></U>Начален и краен таг за подчертан текст. Отново както в Word .

<CENTER></CENTER> или <div align=”center”></div>

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

Понякога се искаме да сменим големината на буквите. Следващото изречение да е с по-голям шрифт. Или пък с по-малък. Искаме да сменяме цвета на шрифта, а може би и самия тип на шрифта, примерно да не е Times New Roman, а да в Arial или Verdana може да искаме да сложим по-екзотичен шрифт, като Comic Sans MS за някоя дума, или няколко думи, които искам е да подчертаем. Самият таг е <FONT></FONT> - Начален и краен таг за определяне на шрифта. Той може да има следните атрибути:

<FONT point-size="12"></FONT>Задава големина на шрифта 12 точки.

<FONT SIZE=”3”></FONT>Този атрибут служи за определяне размера на буквите. Има 7 основни размера, които могат да се посочват. Тоест в кавичките стои число между 1 и 7. Като 7 е най-голям, а 1 е най, малък. Не се препоръчва използване на шрифт 1 и 2, тъй като са много малки и трудно се четат.

<FONT COLOR=”цвят”></FONT>Служи за смяна на цвета на буквите. Цвета отново може да се зададе с дума или с 16-тичен код, отговарящ на RGB стандарта. Погледни таблицата с Web-safe цветовете по-горе.

<FONT FACE=”име”></FONT>Текстът ще бъде с шрифт “име”. Ако посетителят на вашата страница, няма инсталиран шрифта, който сте указали, ще види написан текст с шрифта, който е по подразбиране. Можете да оставите възможност на браузъра да избере един от няколко шрифта. Например:

<FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Тук е текста</FONT>.

9

Браузъра търси първо дали е инсталиран Arial. Ако го намери, го използва. Ако не го намери търси следващия (Helvetica). Ако не намери и него, търси Lucida Sans. Ако никой от описаните шрифтове не е инсталиран на компютъра, браузъра изписва текста с шрифта "по подразбиране" за съответния браузър.

<IMG SRC=”URL”>Показва на екрана графика или картина. Ако е в интернет, URL е във формат:http :// tsvetko . hit . bg / cat . jpg Ако картинката е в директорията, в която е вашата Уеб страница, пишете само името на файла, тогава URL е във формат: cat.jpg.Тагът <IMG …> се обезсмисля, ако не е оказано от къде да се вземе картинката, тоест при този таг е необходимо да дадете стойност поне на атрибута src, което идва от source. Тагът <IMG …> има и още полезни атрибути:

<IMG SRC=”URL” ALT=”Текст, подсказка, какво е на картинката”>Задава какъв текст да се покаже, ако не се вижда графиката(картинката). Ако потребителя задържи мишката, върху картинката, този “ALT” текст ще се покаже в малка текстова кутийка с жълт фон.

<IMG SRC=”URL” BORDER=“2“>Задава черна рамка на картинката с дебелина, която се посочили. Ако картинката е вмъкната в таг за хипервръзка и е препратка, рамката е синя и се поставя по подразбиране. За да премахнем синята рамка, когато нашата картинка е хипервръзка, трябва да укажем border=”0”.Можем да зададем широчина и височина на картинката в точки, или в проценти:WIDTH=”110%” – задава ширина с 10% по-голяма от оригиналната ширина на картинката.HEIGHT=”400” – задава височина 400 точки на картинката. Така ако картинката е по-малка ще я разтегне, до 400 точки, а ако е по-голяма, ще я свие до 400 точки.Подразбиращите се стойности за ширина (width) и височина(height) са 100%. Тоест показват картинката в оригиналните и размери.

Тагът за хипервръзка е <A HREF=”url” …> Щракни тук </A>. Този таг също се обезсмисля, ако не му е зададен атрибут HREF, което идва от hyper reference, за което вече говорихме, когато обяснявахме за тага <link…>. Ето как изглежда и самия таг за хипервръзка:

<A HREF=”URL”>Връзка към друго място</A>Текстът между тези тагове обикновено е подчертан и с друг цвят(по подразбиране син, или е цвета, който сте задали в атрибута link=”#0000FF” на тага <body …>), което показва че потребителят може да щракне с мишката върху този текст. Имаме възможност да направим цвета на връзките и на текста един и същи, но това е строго забранено! Потребителя трябва да може да различава хипервръзките от останалия текст и то без да се затруднява. Връзката за електронна поща се изгражда по подобен начин - използваме адреса на електронната поща вместо да пишем URL, пишем запазената дума mailto, слагаме две точки и пишем e-mail адреса, към който искаме да препращаме:

<A HREF="mailto:name@sеrver.com">Е-Mail!</A>

10

Създава хипервръзка, която отваря подразбиращия се e-mail клиент на компютъра и добавя в полето “To:” e-mail-ът, който сте задали след запазената дума mailto:.

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

<A HREF="http://www.yahoo.com/"><IMG SRC="copper.gif"></A>Така на екрана ще се появи картинката copper.gif, ако има такава в директорията, където е HTML страницата, и като потребителя щракне върху нея, ще се отвори страницата, която сме задали в атрибута href на тага за хипервръзка <A…> </A>, тоест в случая сайта на www. yahoo.com .

Тагът а може да има още два интересни атрибута. Първия е “target”, той може да приема една от следните стойности:

target=”_self” – да отвори препратката в прозореца на самата страница;target=”_blank” – да отвори препратката в нова страница;target=”_parent” – да отвори препратката горния фрейм;target=”_top” – да отвори препратката в най-външния фрейм;

Другия интересен атрибут е title. Той действа както alt текста при картинките. Като потребителя задържи мишката върху текста на препратката, в textbox с жълт фон се изписва подсказващия текст зададен в атрибута title.

title="Подсказващ текст" – текст отговарящ на alt текста на картинка. Показва се, като задържиш мишката отгоре за малко.

Често ни се налага да подреждаме информацията в табличен вид. Знаете, че в Word също могат да се правят таблици, а пък Excel е създаден специално заради таблиците. Таблица се създава с тага table:

<TABLE></TABLE>Между тези тагове се дефинира таблица.

<TR></TR>Създава се нов ред в таблица. Идва от table row.

<TD></TD>Между тези тагове се пишат данните в таблицата. Броят на такива двойки тагове определя и броя на колоните. Има опция за фонов цвят и фоново изображение. Тага има следните атрибути:

align=”left” – задава подравняване по хоризонтала. Може да има стойности “left”, “right”, “center”, “justify”, като е в Word;valign=”top” – задава подравняване по вертикала. Може да има стойности “top”, “bottom”, “middle”;colspan=”1” – Прави една клетка, колкото две колони;rowspan=”1” - Прави една клетка, с височина колкото два реда;width=33% - Задава ширина на клетката 33% от размера на таблицата. Може тук, да сложим число, което да е брой точки, примерни width=”400”.

11

<TABLE CELLSPACING=x>По подразбиране между клетките на таблицата има 2 пиксела разстояние. Чрез този атрибут се задава колко да бъде това разстояние.<TABLE CELLPADDING=y>По подразбиране между текста и рамката на клетката има 2 пиксела разстояние. Чрез този атрибут се задава колко да бъде това разстояние.

<table width=”400 pt” border="1" bgcolor="#FFFFFF" bordercolor="#000000" cellpadding="3" cellspacing="0" rules="all" >

width=”400 pt” – задава ширината на таблицата. Може да е в точки или проценти.border=”1” – задава дебелината на рамката;bgcolor="#FFFFFF" – задава цвят на фона на таблицата;bordercolor="#000000" – задава цвят на рамката. Внимание, по старите браузъри не поддържат тази атрибут;cellpadding="3" – задава разстояние между рамката и съдържанието на клетката;cellspacing="0" - задава разстояние между клетките. По подразбиране са 2 точки.rules="all" – Може да приема стойности:all – Всички клетки да имат рамка;rows – По редовете да няма рамка, тоест да останат само хоризонталните вътрешни рамки.cols – По колони(стълбове) да няма рамка. Да останат само вертикалните вътрешни рамки.none – Да няма вътрешни рамки. Да остане само външната рамка.

В практиката ни често се налага да пишем точки, под точки, или да изреждаме с тирета, докато структурираме някакъв текст. Това в HTML е реализирано с помощта на таговете за номериран и неномериран списък.В Word имаме Numbered и Bulleted списък. При HTML таговете са:

<UL></UL>Начален и краен таг за неномериран (bulleted) списък. <UL> идва от unordered list. Отварящия и затварящия таг за списък трябва да бъдат сложени извън информацията в списъка. Могат да имат атрибути :

1. При неномериран списък (<UL>): <UL type=”disc”>…</UL> - стандартен запълнен диск

<UL type=”square”></UL> - Запълнено квадратче

o <UL type=”circle”></UL> - Кухо кръгче

<OL></OL>Начален и краен таг за номериран списък. <OL> идва от Ordered List. Отварящия и затварящия таг за списък трябва да бъдат сложени извън информацията в списъка. Могат да имат атрибути :

2. При номериран списък (<OL>):

12

<OL type=”1”></OL> - номер<OL type=”A”></OL> - главни латински букви<OL type=”a”></OL> - малки латински букви<OL type=”I”></OL> - римски цифри<OL type=”i”></OL> - като твърдения на теорема (i), (ii), (iii), …

Като и атрибута start.<OL start=”5”> … </OL> Така първия елемент ще бъде с номер 5.

<LI></LI>Нов елемент от списъка. <LI> идва от List Item.Елемента може да приема една от следните стойности за тип: 1. При номериран списък (<OL>):

<LI type=”1”></LI> - номер<LI type=”A”></LI> - главни латински букви<LI type=”a”></LI> - малки латински букви<LI type=”I”></LI> - римски цифри<LI type=”i”></LI> - като твърдения на теорема (i), (ii), (iii), …

2. При неномериран списък (<UL>): <LI type=”disc”></LI> - стандартен запълнен диск

<LI type=”square”></LI> - Запълнено квадратче

o <LI type=”circle”></LI> - Кухо кръгче Самия списък може да има същите атрибути. Примерно <UL type=”square”>…</UL>, както казах по-горе.

Пример:Неномериран ( bulleted ) списък: Резултат:<UL><LI>номер 1</LI> номер 1

номер 2 номер 3 номер 4

<LI>номер 2</LI><LI>номер 3</LI><LI>номер 4</LI></UL>

Номериран списък: Резултат:<OL><LI>номер 1</LI> 1. номер 1

2. номер 23. номер 34. номер 4

<LI>номер 2</LI><LI>номер 3</LI><LI>номер 4</LI></OL>

Номериран списък: Резултат:

13

<OL type=”A” start=”3”><LI>номер 3</LI> C. номер 3

D. номер 4 E. номер 5 F. номер 6

<LI>номер 4</LI><LI>номер 5</LI><LI>номер 6</LI></OL>

При списъците можем да влагаме един списък в друг. Примерно:Влагане на списъци: Резултат:<OL type="I"><LI>Главно 1</LI> <OL type="1"> <LI>Малко 1</LI> <OL type="a"> <LI>подточка а</LI> <UL> <LI>първо</LI> <LI>второ</LI> </UL> <LI>подточка b</LI> </OL> <LI>Малко 2</LI> </OL><LI>Главно 2</LI> <OL type="1"> <LI>Малко 1</LI> </OL></OL>

I. Главно 1 1. Малко 1

a. подточка а първо второ

b. подточка b 2. Малко 2

II. Главно 2 1. Малко 1

Ако вместо <UL> напишете <BL> ще залепи списъка отляво, без да има отстъп надясно. Може да използвате същите атрибути, както при <UL>. Мисля че това е предостатъчно за списъци.

За да преминете на нов ред вътре в параграф се използва тага (командата) <BR>, която идва от Break Line. Тага <BR> може да има един атрибут, който има три стойности:

<BR clear=”all”> - минава надолу, докато няма таблица и картинка нито отляво, нито отдясно.

<BR clear=”left”> - минава надолу, докато има таблица или картинка отляво; <BR clear=”right”> - минава надолу, докато има таблица или картинка

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

14

Създаване на Web страницис помощта на специализирани редактори

Съществуват много специализирани редактори, които автоматично генерират HTML код. Най-често използваните са редактори от тип “получава се това, което виждаш” (WYSIWYG) - Dreamweaver, Page Mill, Front Page и Netscape Composer. Ще се спрем по-подробно на Macromedia Dreamweaver.

УпражненияЗадача 1:Създайте страница на вашия домашен любимец, като сложите в горния ляв ъгъл снимка на любимото си животно, под нея напишете името му, от дясно на снимката сложете жизнените му характеристики: височината, теглото и цвета му. Под всичко това поставете любимите му занимания и какво най-много харесвате в него. Ако ви е трудно да си представите как да изглежда тази страница, погледнете примера: http :// www . tsvetko . hit . bg / Ernest . html http :// www . tsvetko . hit . bg / pc1 . gif Можете да си изтеглите картинките: http :// www . tsvetko . hit . bg / dog . jpg http :// www . tsvetko . hit . bg / cat . jpg .

Задача 2:Създайте своя собствена страница като:а) пишете HTML кода в текстов редактор

Обмислете добре съдържанието. Личната страница съдържа информация, която собственикът и иска да даде на света за себе си. Ако тази лична страница е portfolio(буквално от английски – папка), тоест се пише по зададен скелет, или със задължителни характеристики, то може да съдържа:

1. Трите имена2. Електронна поща3. Кратка автобиография4. Любими занимания5. Фото албум

При оформянето на външния вид на страницата: фон, цвят на текста, шрифт и т.н. трябва да се има в предвид следното:

1. Фонът на Web страницата и цветът на текста трябва да са избрани така, че да има контраст между тях, например светъл фон - тъмен цвят на текста или тъмен фон - светъл цвят на текста.

2. Обикновено за една Web страница по-подходящи са шрифтове като Arial и Verdana, понеже са много по-разбираеми от Algerian или Dauphin, например.

15