31
HTML HyperText Markup Language За HTML История на езика HTML. Структура Структура на една HTML-страница. Тагове и други основни понятия. Основни правила. Таг за коментар. Работна среда за писане на HTML-код. Създаване на прост HTML документ. Влагане на тагове. HEAD Съдържание на секцията "HEAD". Заглавие на страница. BODY Съдържание на секцията "BODY". Атрибути на тага "BODY". Текст Работа с текст. Задаване на различни шрифтове, големина, вид, разположение, цвят. Разполагане на текста по страницата и подравняване на текст. Инструменти за въздействие върху вида на текста. Хипер връзки Хипер връзки между отделни страници на HTML документа и между отделни сайтове в мрежата. Навигация по една отделна HTML страница. Изображения Работа с изображения. Използвани файлови формати на изображения в HTML. Разполагане на изображения. Подравняване на изображения към текст.

HTML HyperText Markup Language

  • Upload
    reid

  • View
    64

  • Download
    1

Embed Size (px)

DESCRIPTION

HTML HyperText Markup Language. За HTML История на езика HTML. Структура Структура на една HTML-страница. Тагове и други основни понятия. Основни правила. Таг за коментар. Работна среда за писане на HTML-код. Създаване на прост HTML документ. Влагане на тагове. - PowerPoint PPT Presentation

Citation preview

Page 1: HTML HyperText Markup Language

HTMLHyperText Markup Language

• За HTMLИстория на езика HTML.

• СтруктураСтруктура на една HTML-страница. Тагове и други основни понятия. Основни правила. Таг за коментар. Работна среда за писане на HTML-код. Създаване на прост HTML документ. Влагане на тагове.

• HEADСъдържание на секцията "HEAD". Заглавие на страница.

• BODYСъдържание на секцията "BODY". Атрибути на тага "BODY".

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

• Хипер връзкиХипер връзки между отделни страници на HTML документа и между отделни сайтове в мрежата. Навигация по една отделна HTML страница.

• ИзображенияРабота с изображения. Използвани файлови формати на изображения в HTML. Разполагане на изображения. Подравняване на изображения към текст.

Page 2: HTML HyperText Markup Language

За HTMLИстория на езика HTML

HTML е специалният език за изграждане на сайтове в световната мрежа - интернет. HTML е съкращение от HyperText Markup Language и буквално означава "Хипертекстов език за маркиране". Това е езика чрез който са изградени милионите сайтове в World Wide Web - Световната паяжина, за краткост наричана WWW или Web.

Кратка история на HTML и World Wide Web

Самия Web често се идентифицира с интернет. Макар че съдържа огромно количество информация, тази Паяжина не представлява целия интернет. Основите на World Wide Web се изграждат в края на 80-те години от англичанина Тим Бърнърс-Лий, който се опитва да изнамери нов метод за обмяна на информация с колегите си учени от Европейската Лаборатория по Физика на Елементарните Частици в Женева. Същността на неговия метод е създаване на текстови документи, които да могат да се прехвърлят чрез мрежата до отдалечен потребител. Така се появява необходимостта от специален език за създаване на този вид документи.

До създаването на Web обмяната на информация в интернет се е извършвала по други начини - например чрез протокола Telnet, който предоставя на един потребител достъп до отдалечен компютър, като по този начин потребителя директно може да работи с файловете, разположени върху отдалечената машина. Ползвал се е и протокола FTP - File Transfer Protocol - чрез който може да се прехвърлят файлове от една свързана с мрежата машина на друга. Telnet и FTP не са "отживелица" - те се използват и в момента.

Появата на Web и HTML обаче дават нови възможности. Много скоро се появява и първия браузър - програма, която позволява на потребителя да види HTML-документа на своя монитор. Създателя му е Марк Ендрисън, който по-късно основава компанията NetScape Communications и пуска на пазара известния браузър NetScape Navigator. Другия широко използван браузър в момента е Internet Explorer на компанията Microsoft.

HTML може да се нарече "дизайнерски" език, защото е специално предназначен за създаването на всички тези прилични на пъстри рекламни брошури сайтове, които срещате из интернет. В сравнение с останалите езици за програмиране (Pascal, C, C++, Java, Perl и т.н.) той е много по-прост и лесен за усвояване - съдържа много по-малко на брой команди и не изисква специална програма за компилиране на въведения код.

Page 3: HTML HyperText Markup Language

Стандартизация на HTML (World Wide Web Consortium)

Езика непрекъснато се развива и в него се правят нововъведения. В един момент се стигна до положение, когато съществуваха множество различни версии на HTML, несъвместими с различните браузъри и техните различни версии. Появи се нуждата от стандартизиране на езика. За тази цел беше създадена организацията World Wide Web Consortium (www.w3.org), към която вече се отправят всички предложения за допълване и изменение на HTML.

Програми за изграждане на страници (WYSIWYG)

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

Много популярни са програмите от типа What You See Is What You Get (WYSIWYG), т.е. каквото виждате по време на изграждането на сайта, това ще се вижда и когато той е готов. Компанията Microsoft предлага програма за строителство на сайтове, която се нарича Front Page. Подобна е и програмата Composer на Netscape. Много добра програма за изграждане на сайтове е Dreamweaver.

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

Page 4: HTML HyperText Markup Language

СтруктураСтруктура на една HTML-страница. Тагове и други основни понятия. Основни

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

<html> Това е командата, с която започват всички HTML-документи. Като разглеждате сорса ("суровия" код на HTML-документа ) на HTML-страницата ще видите, че командите на езика лесно се различават от обикновения текст - разликата се състои в това, че всички команди на HTML са затворени в ъглови скоби: < и >. Обиковения текст не е затворен в скоби, а е разположен в пространството между командите. Повечето команди в HTML притежават различен брой атрибути. На повечето атрибути се задават някакви стойности. Командите на езика и всичките им атрибути и стойности, заключени между ъгловите скоби, както и самите ъглови скоби трябва да се изписват винаги при включена латинска азбука. Запомнете, че между текста на командите и ъгловите скоби не трябва да се оставя празен интервал. Такъв се оставя между атрибутите на командите. Не се прави разлика между малки и големи букви. Друга отличителна черта на командите на езика е, че почти във всички случаи те са обединени по двойки - една начална и една крайна команди, като началната команда задава началото на някакъв ефект и е затворена между скобите < и >, а крайната команда задава край на ефекта, предизвикан от началната команда и представлява същата дума, изписана също между скобите < и >, но с наклонена надясно черта отпред: /.

Например, след като началото на един HTML-документ е командата

<html>,

то края на един HTML-документ е командата

</html>.

Page 5: HTML HyperText Markup Language

Структура на типичен HTML-документ и правила при влагане на тагове

Вече знаете, че таговете <html> и </html> оформят началото и края на един HTML-документ. Mежду тези два тага се разполагат двете основни части на един HTML документ. Първата част се нарича HEAD (глава), а втората част - BODY (тяло).

Тези две части на HTML-документа също имат начални и крайни тагове. Следователно скелета на един типичен HTML документ изглежда така:

<html> <head> </head> <body> </body></html>

От горния пример ще научите за още една характерна особеност на HTML - таговете (командите) се влагат един в друг и това става по точно определено правило, а именно: таговете се затварят последователно, като винаги първия отворен таг, в който има вложени други тагове, се затваря последен. В случая първия отворен таг е <html>, в който са вложени таговете за глава и тяло на HTML-документа - <head> и <body>, затова последен е неговия затварящ таг </html>. Затварящия таг на главата - </head> - е разположен преди началния таг на тялото <body>, защото секцията HEAD свършва непосредствено преди

началото на секцията BODY.

Page 6: HTML HyperText Markup Language

Таг за коментар

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

<!-- Тук може да се напише коментар, който няма да повлияе на HTML-документа -->

Т.е. коментара трябва да е изписан задължително между следните две форми: Отляво (в началото) - ъглова скоба, удивителен знак и две тирета (<!--) Отдясно (в края) - две тирета и ъглова скоба (-->)

Page 7: HTML HyperText Markup Language

HEADСъдържание на секцията "HEAD". Заглавие на страница

Секцията HEAD - "главата" на HTML-страницата - започва непосредствено след началния таг <html>.

Запомнете, че съдържанието на секцията HEAD остава невидимо за посетителите на страницата, т.е. това, което се пише в HEAD, не се появява на екрана.

"Главата" на страницата може да съдържа много елементи, някои от които не са абсолютно задължителни за една уеб-страница. Все пак ако не сложите нищо в HEAD, то поне трябва да напишете там заглавието на страницата си.

Заглавието на една уеб-страница се пише между таговете <title> и </title>

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

Mоже да напишете например: <title> My first page </title>

Указването на заглавие е много важно от гледна точка на популяризирането на вашата страница - повечето търсещи машини "разбират" записаното между таговете <title> и </title> като най-важните ключови думи, по които вашата страница може да бъде намерена. Затова отделете време, за да измислите заглавие, което много точно и стегнато да изразява същността и съдържанието на страницата ви. Заглавието трябва да съдържа 2-8 думи.

Цялата секция HEAD заедно със заглавието на страницата ще изглежда така:

<head><title> My first page </title></head>

Page 8: HTML HyperText Markup Language

BODYСъдържание на секцията "BODY". Атрибути на тага "BODY".

Веднага след секцията HEAD (Главата на HTML-документа) започва секцията BODY - Тялото. Тялото на HTML-страницата е затворено между началния таг <body> и крайния таг </body>. В секцията BODY се намира основната част от съдържанието на една HTML-страница - текста, изображенията и изобщо всичко, което е видимо на екрана на потребителя.

Тагът <body> може да съдържа няколко атрибута, които определят до известна степен външния вид на HTML-страницата. Тези атрибути са следните:

Атрибути на секцията BODY: bgcolor (фон на страницата)

Атрибута bgcolor задава фоновия цвят на страницата.

Като фон на една HTML-страница може да бъде зададен всеки от основните цветове, както и всякакъв оттенък на цвят, получен в следствие на някаква цветова комбинация. Цветове могат да се задават по няколко начина. Засега трябва да запомните, че най-простия начин да зададете като фон един от основните цветове - бял, жълт, зелен, син, червен или черен - е като изпишете названието на съответния цвят на английски и го зададете като стойност на атрибута bgcolor по следния начин:

<body bgcolor="английско название на желания цвят">

Ако желаете например страницата ви да има черен фон трябва на напишете следния код:

<body bgcolor="black">

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

<body bgcolor="yellow"> и т.н.

Page 9: HTML HyperText Markup Language

Атрибути на секцията BODY: background (изображение като фон)

Освен цвят за фон на една HTML-страница може да послужи и някакво изображение - картинка или снимка.

За да зададете като фон на страницата си например изображението picture.jpeg трябва да напишете следния код:

<body background="picture.jpg">

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

Атрибути на секцията BODY: text

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

<body text="red">

Подразбиращия се цвят на текста е черен.

Page 10: HTML HyperText Markup Language

Атрибути на секцията BODY: link, alink и vlink

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

<body link="green">

Атрибута alink указва в какъв цвят да се оцветяват хипервръзките в момента на щракането върху тях.

Атрибута vlink указва как да са оцветени вече посетените връзки.

Пример за комбинирано използване на атрибутите на тага BODY

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

<body bgcolor="black" text="white" link="blue" alink="yellow" vlink="green">

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

Page 11: HTML HyperText Markup Language

Други атрибути на тага BODY (topmargin и leftmargin)

Освен описаните вече атрибути в тага BODY може да използвате още два атрибута: topmargin и leftmargin. С тези атрибути се задава разстоянието съответно от горната и от лявата част на браузъра до началото на страницата. Ако например страницата ви е оформена чрез таблица и желаете тази таблица да бъде "прибрана" плътно в най-горната и най-лявата част на екрана, е нужно да зададете на атрибутите topmargin и leftmargin стойност 0:

<body topmargin="0" leftmargin="0">

Page 12: HTML HyperText Markup Language

ТекстРабота с текст. Задаване на различни шрифтове, големина, вид,

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

шрифтове (Webdings и Wingdings).

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

Тага, който съдържа атрибутите на текста, носи названието <font> . За разлика от тага <body> той не може да се ползва без нито един атрибут, но също има затварящ таг - </font> Атрибутите на тага font са face, size и color.

Атрибути на тага FONT: face (вид на шрифта)

Задава се със следния код:

<font face="Название на шрифта">Тук се пише текст</font>

По отношение използването на шрифтовете запомнете следното:

1. За да види даден потребител използвания от вас шрифт той също трябва да го има на своя компютър. В противен случай браузъра ще му покаже вашия текст в шрифт по подразбиране. 2. Не с всички шрифтове може да се пише на кирилица.

Съществуват два основни и най-често използвани шрифта - times new roman и arial.

Page 13: HTML HyperText Markup Language

Шрифта на който е написана настоящата страница е arial. Задаването му става по следния начин:

<font face="arial">Това е текст, написан на arial.</font>

Ефекта в прозореца на браузъра е: Това е текст, написан на arial.

Другия популярен шрифт е times new roman:

<font face="times new roman">Това е текст, написан на times new roman.</font>

Ефекта в прозореца на браузъра е: Това е текст, написан на times new roman.

Обикновено шрифта times new roman е зададен като шрифт по подразбиране.

Тези два шрифта са инсталирани на голяма част от компютрите в света. Препоръчително е поне за основната част от текста във вашата HTML-страница да използвате някой от тях.

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

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

<font face="arial, helvetica, verdana, sans-sherif">Това е текст, написан на arial, helvetica, verdana, sans-sherif.</font>

<font face="times new roman, georgia, timoku">Това е текст, написан на times new roman, georgia, timoku.</font>

Както разбирате - шрифтовете arial, helvetica, verdana и sans-sherif не се различават особено, както и times new roman, georgia и timoku.

Page 14: HTML HyperText Markup Language

Ето още няколко популярни шрифта, с които може да се пише на кирилица - courier (courier new), impact и comic sans (comic sans ms).

Атрибути на тага FONT: size (размер на шрифта)

<font size="цифра от 1 до 7">Тук се пише текста</font>

Size е атрибута за размер (големина) на текста и може да приема стойности от 1 до 7 включително. Например:

<font size="2">Това е текст с големина 2</font>

Освен твърдо зададен размер на шрифта е възможно да се укаже и относителен размер. Браузърите показват големина на шрифта по подразбиране с размер 3. За да напишем текст с един размер по-малък от подразбиращия се трябва да използваме следния код:

<font size="-1">Това е текст с един размер по-малък от подразбиращия се.</font>

За текст с един размер по-голям от подразбиращия се трябва да напишем следния код:

<font size="+1">Това е текст с един размер по-голям от подразбиращия се.</font>

Page 15: HTML HyperText Markup Language

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

<h4>Това е заглавие с размер 4</h4>

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

Атрибути на тага FONT: color (цвят на шрифта)

Задаването на цвят става като се присвои някаква стойност на атрибута color, например:

<font color="blue">Това е син текст</font> <font color="green">Това е зелен текст</font> и т.н.

Пример за комбинирано използване на атрибутите на тага за шрифт

Всички указани атрибути могат да се използват както поотделно (както беше показано в примерите), така и комбинирано, например:

<font face="arial, helvetica, verdana, sans-sherif" size="4" color="green">Това е текст в шрифт arial и подобните му, с размер 4 и зелен цвят</font>

Page 16: HTML HyperText Markup Language

Инструменти за допълнително въздействие върху вида на текста

Основните инструменти за преправяне вида на текста са таговете <b>, <i> и <u>. Всеки от тях има и завършващ таг с наклонена черта.

Тага <b> служи за удебеляване на текста, например: Този текст е затворен между таговете <b> и </b> и затова е удебелен.

Тага <i> прави текста курсивен (наклонен), например: Този текст е затворен между таговете <i> и </i> и затова е наклонен.

Тага <u> прави текста подчертан, например: Този текст е затворен между таговете <u> и </u> и затова е подчертан.

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

Внимание: таговете се затварят последователно и винаги тага, който се отваря първи, се затваря последен. Отнесено към горния пример това означава, че кода трябва да изглежда по следния начин:

<b> <i> <u>Този текст е едновременно удебелен, наклонен и подчертан.</u> </i> </b>

Неправилно е кода да се напише например така:

<b> <i> <u>Този текст е едновременно удебелен, наклонен и подчертан.</i> </b> </u>

Page 17: HTML HyperText Markup Language

Освен тези основни три тага в HTML съществуват и още много възможности за променяне на вида на текста. Ето списък на тези възможности:

<big> Увеличава големината на шрифта с един размер на всяко изписване на тага</big> <small> Намалява големината на шрифта с един размер на всяко изписване на тага</small> <strike> Зачертава текста</strike> <s> Зачертава текста</s> <del> Зачертава текста</del> <sup> Изписва текста като горен индекс</sup> <sub>Изписва текста като долен индекс</sub>

Разполагане на текста по страницата и подравняване на текст

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

Параграфи

Тага за параграф е <p>. Той има и завършващ таг - </p> Текстовия блок затворен между таговете <p> и </p> ще се появи на страницата на един ред разстояние от предходния и следващия го текст, както е разположен настоящия текстов блок.

Ако изпишете няколко тага за параграф един след друг това ще има същия ефект както от един таг.

Page 18: HTML HyperText Markup Language

Преминаване на следващ ред

Тага за преминаване на следващ ред е <br /> (или <br > ) и той няма затварящ таг. На страницата ви ще се появят толкова свободни редове, колкото пъти изпишете тага <br /> .

Показване на текст така, както е изписан в Notepad

Както беше споменато в началото - ако изрично не укажете чрез съответния таг начина на разположение на текста, то браузъра ще го покаже като един компактен блок. Докато пишете кода в Notepad може например многократно да натискате Enter и да оставяте неограничено количество свободни редове - за браузъра това няма да има никакво значение и той ще показва текста компактно, без да прескача на следващ ред, докато не използвате тага <br> Същото се отнася и за оставянето на множество интервали с дългия клавиш (space) - браузъра ще отчита само една стъпка разстояние между думите. За да преодолеете това и да видите текста точно както сте го написали трябва да използвате тага <pre> Той има затварящ таг </pre> Ако изпишете само таговете <pre> и </pre>, то текста, затворен между тях ще се появи в шрифт, подобен на Courier (както е в примера горе), независимо какъв шрифт сте указали преди това. За да използвате друг шрифт ще трябва да го вмъкнете между таговете <pre> и </pre>, например:

<pre> <font face="arial">Това е текст, написан на A R I A L</font> </pre> Въпреки удобството, което предлага на пръв поглед, не е препоръчително да използвате често тага <pre>, тъй като е възможно различните марки и версии браузъри да покажат страницата ви по различен начин.

Page 19: HTML HyperText Markup Language

Оставяне на по-голям интервал

Вече знаете, че ако не използвате тага <pre> браузъра показва само по една стъпка интервал между думите, независимо колко интервала сте оставили докато сте писали кода в Notepad. Понякога се налага да се остави по-голям интервал между две думи или да се започне новия ред с отстъп. Тогава се използва кода за интервал &nbsp; Той оставя по една стъпка интервал всеки път, когато се изписва.

      За да започнете нов ред с отстъп от например 6 интервала - както е започнат настоящия ред - ще трябва шест пъти да изпишете кода &nbsp; преди да започнете да пишете текста на реда. Не забравяйте да изписвате точката и запетаята, с които всеки код &nbsp; завършва.

Подравняване на текст вляво, вдясно и центриране на текст

<p align=“left">Текст на параграф...<p> <p align=“right">Текст на параграф...<p> <h2 align="center">Текст на заглавие...<h2>

За да центрирате текст може да ползвате и тага <center>, който има завършващ таг </center> Не препоръчително да се ползва, тъй като тага не се възприема от браузърите във всички случаи.

Page 20: HTML HyperText Markup Language

Хипер връзкиХипер връзки между отделни страници на HTML документа и между отделни сайтове в

мрежата. Навигация по една отделна HTML страница.

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

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

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

Текстови хипервръзки към други сайтове

Текстовите хипервръзки се задават в следния формат:

<a href="Тук се изписва адреса, към който ще води връзката">Тук се изписва названието на връзката, което ще се вижда на екрана</a>

Например ако желаете да пуснете връзка от страницата си към страницата на Yahoo, която да носи названието "Връзка към www.yahoo.com" ще трябва да напишете следния код:

<a href="http://www.yahoo.com">Връзка към www.yahoo.com</a>

В този случай в прозореца на браузъра ще се вижда оцветен в синьо и подчертан текста "Връзка към www.yahoo.com".

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

Page 21: HTML HyperText Markup Language

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

Ако хипервръзката води не към началната страница на някакъв сайт (например www.some-site.com), а към някаква вътрешна страница (например page3.html), тогава трябва да изпишете пълния адрес на тази страница, т.е. да укажете целия път по който се стига до нея:

<a href="http://www.some-site.com/page3.html">Връзка към страница page3.html от сайта www.some-site.com</a>

Текстови хипервръзки към страници от един и същ сайт

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

Нека да имаме следната структура на сайт:

- файл index.html, който се намира в основната директория (папка) - файл page1.html, който се намира също в основната директория - файл page2.html, който се намира в папка folder1

Основна директория (основна папка) index.html page1.html         folder1 (папка, вложена в основната)         page2.html

Page 22: HTML HyperText Markup Language

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

<a href="page1.html">Връзка към страница page1.html от началната страница index.html</a>

Връзката от началната страница index.html към страницата page2.html, намираща се в папка folder1, трябва да съдържа наименованието на папката (folder1) и наименованието на страницата (page2.html), отделени с наклонена надясно черта:

<a href="folder1/page2.html">Връзка към страница page2.html, намираща се в папка folder1, от началната страница index.html</a>

Връзката от страницата page2.html, намираща се в папка folder1, към началната страница index.html, трябва да съдържа две точки, наклонена надясно черта и наименованието на страницата, към която води (index.html):

<a href="../index.html">Връзка към страница index.html от страницата page2.html, намираща се в папка folder1</a>

Page 23: HTML HyperText Markup Language

Текстови хипервръзки към части от една и съща страница

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

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

<a name="Произволно зададено название на котвата"></a>

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

<a name="bottom"></a>

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

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

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

<a href="#bottom">Връзка към долната част на страницата</a>

Page 24: HTML HyperText Markup Language

Т.е. хипервръзката съдържа названието на котвата със знака диез (#) отпред. Котвата която създадохме в горния пример е невидима - между началния таг <a name="bottom"> и затварящия таг </a> не изписахме никакъв текст. Ако желаете може да зададете название на котвата, което да се вижда на екрана, например:

<a name="bottom">Това е название на "котва", което ще се вижда на екрана</a>

Ако в една страница са използвани такива хипервръзки може да направите връзка към точно определено място от определена страница по този начин:

<a href="http://www.some-site.com/some-page.html#bottom">Връзка към долната част на страницата some-page.html от сайта some-site.com</a>

Текстови хипервръзки към е-mail адрес и файл на FTP сървър

Съществуват и други видове хипервръзки. Това са връзки към e-mail адреси и връзки към файлове, намиращи се върху FTP сървър. Кода за връзка към e-mail адрес е следния:

<a href="mailto:[email protected]">[email protected]</a>

Имайте предвид, че ако посетителя на страницата ви няма на компютъра си праграма за електранна поща няма да може да ви изпрати директно e-mail, а ще трябва да препише или копира адреса. Затова е препоръчително във видимата част на връзката да изписвате електранния си адрес, а не "изпратете имейл" или нещо подобно.

Кода за връзка към файл, разположен на FTP сървър е:

<a href="ftp://some-address.com/some-file.zip">Връзка към файл в zip формат от FTP сървър</a>

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

Page 25: HTML HyperText Markup Language

Хипервръзки които се отварят в отделен прозорец

Повечето хипервръзки върху които щракате се отварят в същата страница, която гледате в момента на щракането. Така губите от поглед първата страница и трябва да натиснете "Back"-бутона от горното меню на браузъра, за да се върнете на нея. Понякога е много удобно дадена хипервръзка да се отвори в отделен прозорец. Вие може да отваряте всяка хипервръзка в интернет в отделен прозорец ако преди да щракнете върху нея натиснете бутон "Shift" (с надпис Shift и/или дебела стрелка, сочеща нагоре). Но много потребители в интернет не познават пълните възможности на клавиатурата. HTML дава възможност да зададете отваряне на хипервръзка в нов прозорец чрез използване на атрибута target. Той може да приема няколко стойности. За да зададете отваряне на хипервръзка в нов прозорец трябва да присвоите на атрибута target стойност _blank. Нека например да направим хипервръзка, която ще отваря в отделен прозорец сайта на Yahoo. Трябва да напишем следния код:

<a href="http://www.yahoo.com" target="_blank">Връзка към Yahoo, която ще се отвори в нов прозорец</a>

Ето я същата връзка в прозореца на браузъра: Връзка към Yahoo, която ще се отвори в нов прозорец Натиснете върху нея, за да видите ефекта.

Другата стойност на target е _self. Тази стойност задава отваряне на хипервръзката в същия прозорец, който е отворен в момента на щракането върху нея, т.е. ефекта е същия, който е и по подразбиране.

Като стойност на таргет може да се зададе и произволно избрано от вас име. Например target="myname" и т.н. По този начин всички връзки (например 5 на брой), на които присвоите атрибута target със стойност myname ще се отварят в един и същ прозорец.

Page 26: HTML HyperText Markup Language

Промяна на цвета на текстовите хипервръзки

По подразбиране всички хипервръзки са сини на цвят и подчертани. В урока за атрибутите на тага <body> научихте как се задава цвета на хипервръзките - това става чрез атрибутите link - задава цвят на непосетените връзки alink - задава цвят на връзките в момента на щракането в/у тях vlink - задава цвят на вече посетени връзки Например, за да зададете бял фон, черен текст, син цвят на връзките (той е и по подразбиране - може да не се задава), червен цвят при щракане върху тях и отново син цвят за посетени връзки, трябва да напишете следния код:

<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#0000ff">

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

Освен текст за хипервръзки могат да служат и изображенията (картинки, снимки и др.). За да използвате изображения като хипервръзки трябва да напишете код, подобен на следния:

<a href="http://www.some-site.com"><img src="some-image.gif" /></a>

В случая използваме изображението some-image.gif за да направим връзка към сайта some-site.com

Page 27: HTML HyperText Markup Language

ИзображенияРабота с изображения. Използвани файлови формати на изображения в HTML.

Разполагане на изображения. Подравняване на изображения към текст. Използване на изображения като хипер връзки. Използване на изображения като фон на страницата

Изображенията - картинки, фотографии и др., анимирани или статични - са важна част от почти всеки сайт в мрежата. Добре подбрани и разположени, те могат да "освежат" HTML-страницата ви, но претрупването на една страница с изображения може да постигне и обратния ефект, като я направи непривлекателна. Освен това използването на прекалено много изображения ще направи страницата "тежка" и трудна за зареждане.

Формати на файловете за изображения

В HTML се използват два основни формата на файлове, съдържащи изображения: gif формат, който се използва предимно за картинки, илюстрации и надписи, които не са оцветени в богата цветова гама и не съдържат "сложни" оттенъци и светлосенки.

Файловете с разширение gif имат две важни предимства пред другия основен формат:

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

- gif файловете могат да бъде анимирани - да съдържат движеща се картинка.

jpeg или jpg формат (и двете разширения са валидни и равностойни), който се използва предимно за висококачествени фотографии. Възможностите на този формат за показване на цветове и оттенъци са по-богати от тези на gif формата, но за сметка на това jpg файла не може да бъде анимиран, нито да съдържа прозрачни елементи. Съществува и още един файлов формат, който в момента се използава много рядко, защото са малко браузърите, които го поддържат. Това е png формата, който съдържа в себе си най-доброто от gif и jpg форматите. Въпреки качествата на png файловете използването им не е препоръчително.

Page 28: HTML HyperText Markup Language

Показване на изображение в HTML-страницата

Най-простия код с който може да покажете изображение на страницата си е следния:

<img src="Име на изображение, например myimage.gif" />

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

изискванията на XHTML (XHTML - Extensible HiperText Markup Language ).

Page 29: HTML HyperText Markup Language

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

Атрибутите на тага за изображение не са абсолютно задължителни - и да не ги използвате изображението ви ще се вижда на екрана. Но за някои от атрибутите е препоръчително да бъдат въвеждани, тъй като това ще подобри качеството на вашия HTML-документ. •Атрибутите width и height задават съответно ширина и височина на изображението в пиксели. В нашия пример width="163" height="73".

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

•Атрибута alt задава алтернативно название на изображението.

Понякога, въпреки, че страницата е заредена, изображенията не се появяват. Освен това някои потребители настройват браузърите си да не изтеглят изображенията, за да зареждат по-бързо страниците. В тези случаи на мястото, където трябва да е вашето изображение, ще се появи празно рамкирано пространство. За да разберат посетителите на страницата какво съдържа изображението се използва атрибута alt="Произволно описание на изображението". Това, което напишете между кавичките, ще се появи на мястото на изображението ви, ако то не се зареди. Така посетителите ще научат какво представлява изображението, макар че няма да го видят. Препоръчително е винаги да използвате този атрибут и по още една причина - търсачките индексират текста, въведен като обяснение на графиките с атрибута alt, така че това е още един начин за рекламиране и популяризиране на страницата ви. Ако комбинираме горните атрибути, ще получим следния код:

<img src="Example.gif" width="163" height="73" alt="Image Example" />

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

Page 30: HTML HyperText Markup Language

•Атрибута border задава рамка около изображението в пиксели.

Ако не използвате този атрибут, около вашето изображение по подразбиране няма да се появи никаква рамка. Но това се отнася само за изображения, които не са хипервръзки! Ако едно изображение е използвано като връзка, тогава около него автоматично се появява рамка с цвета, който сте задали на хипервръзките (по подразбиране е син). В такъв случай, за да премахнете тази рамка, трябва да въведете атрибута border със стойност 0: border="0".

Ако желаете да зададете рамка на изображението си например 8 пиксела трябва да напишете:

<img src="Example.gif" border="8" />                       

Page 31: HTML HyperText Markup Language

Подравняване на изображение спрямо текст

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

Как да правите така, че текста да "обтича" изображението.

Този ефект се постига чрез атрибута align, който трябва да се вкара в тага img и да му се зададе някаква стойност:

<img src="Example.gif" width="163" height="73" alt="Image Example" align="left" />

<img src="Example.gif" width="163" height="73" alt="Image Example" align=“right" />

<img src="Example.gif" width="163" height="73" alt="Image Example" align=“top" />

<img src="Example.gif" width="163" height="73" alt="Image Example" align=“bottom" />

<img src="Example.gif" width="163" height="73" alt="Image Example" align=“middle" />

Ако сте задали на атрибута align стойност left или right, така че текста да "обтича" изображението, може да поискате да оставите по-голямо от подразбиращото се разстояние между изображението и текста. Това се прави с атрибутите за задаване на свободно пространство около изображението. Атрибута hspace задава свободно пространство отляво и отдясно на изображението, а атрибута vspace - отгоре и отдолу. Стойностите на двата атрибута са в пиксели.

Например ако сте задали align="left и искате да добавите 10 пиксела свободно пространство отгоре и отдолу и 80 пиксела отляво и отдясно, трябва да напишете:

<img src="Example.gif" width="163" height="73" alt="Image Example" align="left" vspace="10" hspace="80" />