Други уроци
Adobe Photoshop
Adobe Illustrator
Adobe Flash
Adobe Fireworks
DreamWeaver
CSS и HTML
Corel Draw
Image Ready
PHP
SEO
CMS
Microsoft Windows
Microsoft Word
Microsoft Excel
PowerPoint
Microsoft Access
Microsoft Publisher
Linux
Visual basic
JavaScript
Ajax
3ds Max
Maya 3D
C++
Sound Forge
Gimp
SWiSH
Как да си направите първия сайт
видян: 97412
ХИПЕРЛИНКОВЕ
Езика HTML ви позволява да правите препратки към други страници, към части от същата страница, към файлове, картинки, електронна поща. Тези препратки се наричат ХИПЕРЛИНКОВЕ (или хипервръзки). Без хиперлинковете един web сайт не би имал никакъв смисъл. Хиперлинк се създава с двойката елементи <A> и </A>. Когато правите препратка към някакъв интернет адрес, трябва да използвате атрибута HREF на елемента <A>. Ето един пример, който препраща към адрес ViSsY.hit.bg:
<HEAD>
<TITLE>hyperlink</TITLE>
</HEAD>
<BODY>
<A xhref="http://ViSsY.hit.bg">#ViSsY</A>
</BODY>
Нека да анализираме този пример. С <A xhref= се задава адреса, към който води препратката. В случая това е адреса на #ViSsY, предхождан от
http://. Този адрес се нарича още URL. След това изписвате текста, който ще води до съответния адрес, в случая текста е "#ViSsY".
Когато посочите с мишката този надпис, курсора се сменя от стрелка на сочеща ръка.
Ако кликнете върху него отивате директно на адреса на "#ViSsY". Забележете, че цвета на текста е син, а самия текст е подчертан без вие да сте задавали такива параметри. Това е така, защото браузъра по подразбиране показва хиперлинка подчертан и със син цвят. Ако кликнете върху него, отидете на страницата на #ViSsY и после пак се върнете на тази страница, цвета вече няма да бъде син, а лилав. Причината за това е, че браузъра визуализира посетените от вас линкове с лилав цвят. Можете да промените цвета на линка по ваше желание. Това става с атрибутите на елемента <BODY> LINK, ALINK и VLINK. LINK задава какъв да бъде цвета на линка, ALINK (active link) задава цвета на активния линк (този, на който се намирате в момента), а VLINK (visited link) задава цвета на посетените вече от вас линкове. Ето един такъв пример:
<HEAD>
<TITLE>hyperlink</TITLE>
</HEAD>
<BODY LINK="#00FF00" ALINK="#00FFFF" VLINK="#FF0000">
Посетете нашия
<A xhref="http://ViSsY.hit.bg"><B>FORUM</B></A>
</BODY>
Ако искате линка да се отваря в нов прозорец използвайте атрибута TARGET на елемента <A> с параметър _blank. Ако пропуснете този атрибут линка ще се отвори в същия прозорец. Вижте следващия пример:
<HEAD>
<TITLE>hyperlink</TITLE>
</HEAD>
<BODY>
<A xhref="http://ViSsY.hit.bg" TARGET="_blank">#ViSsY</A>
</BODY>
Другите параметри на TARGET ще ги разгледаме в секцията "РАМКИ". Освен препратки към други сайтове, можете да правите препратка и към собствения си сайт. За целта трябва да слагате всички web документи, създадени от вас в една папка или в нейните подпапки. Нека да направим един сайт (не страница, а именно сайт, съвкупност от страници с препратки една към друга). Ще направим сайта от 3 страници, като ще ги именуваме "начална страница", "лични данни" и "свържете се с мен". Направете си нова папка на твърдия диск и и дайте името "website". Сега нека направим първата страница:
<HEAD>
<TITLE>начална страница</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЛИЧНАТА МИ СТРАНИЦА</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
<A xhref="forme.html">Нещо повече за мен.</A><BR>
<A xhref="contact.html">Пишете ми</A>
</BODY>
Запазете този документ във същата папка под името index.html. Сега да направим другите две страници от сайта:
<HEAD>
<TITLE>лични данни</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЗА МЕН</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
Тук напишете нещо за себе си
<BR>
<A xhref="index.html">Към началната страница</A><BR>
<A xhref="contact.html">Пишете ми</A>
</BODY>
Този документ го запазете в същата папка по името forme.html и направете последната страница с името contact.html.
<HEAD>
<TITLE>свържете се с мен</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ПИШЕТЕ МИ</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
Тук напишете адреса си, e-mail и т.н.
<BR>
<A
xhref="index.html">Към началната страница</A><BR>
<A xhref="forme.html">За мен</А><BR>
<A xhref="mailto:[email protected]">Моя e-mail</A>
</BODY>
Стартирайте сайта от папка website. Виждате, че вече отделните страници са свързани а препратки помежду им. Когато задавате линкове към файлове, които са във същата папка, изписвате само името им и разширението (forme.html). Ако HTML документа е в някаква подпапка на вашата папка, например подпапка main, трябва да зададете и пътя до там:
<A xhref="main/forme.html">За мен</А>
Новото в горния пример е:
<A xhref="mailto:[email protected]">Моя e-mail</A>
Когато срещне mailto:име_на_мейла и посетителят на страницата кликне върху текста след него браузъра стартира програмата му за електронна поща, която вписва в полето за изпращане адреса на мейла, който е зададен след mailto:
По този начин спестявате на посетителят на страницата, който иска да ви пише, ръчното стартиране и настройка на програмата си за електронна поща. Ако посетителят няма такава програма (Eudora или Outlook Expres например) или използва webmail в hotmail или yahoo например, параметърът mailto: няма да върши работа. Затова винаги пишете вашия e-mail между <A> и </A>. Ето така:
<A xhref="mailto:[email protected]">Моя e-mail:
[email protected]
</A>
Освен към други страници и e-mail можете да правите препратки в рамките на същата страница. Това става по следния начин. Изполвайки елемента <A> давате някакво име на определена част от HTML документа, нещо като маркировка.Например:
<A NAME="begin">първата дума от страницата</A>
Сега ако напиша:
<A xhref="https://uroci.net/#begin">върнете се в началото на страницата</A>
и кликнете върху текста, ще се върнете в началото на страницата. Можете да слагате навсякъде в документа такива маркировки и да правите препратки към тях. Също така, можете да препращате към друг HTML документ, в който има маркировка. Това става като първо напишете името на документа, после # и после името на маркировката.
<A xhref="index.html#begin">Отивате на index.html с препратка към част begin</A>
или
<A xhref="http://ViSsY.hit.bg/index.html#begin">Отивате на index.html с препратка към част begin</A>
КАРТИНКИ
Една от най-силните характеристики на езика HTML е възможността да разполагате картинки върху страницата си. Това става с елемента <IMG> и атрибута му SRC, като след SRC записвате името на файла:
<HEAD>
<TITLE> Image </TITLE>
</HEAD>
<BODY>
<IMG xsrc="image.jpg>
</BODY>
Така на екрана си вече имате картинка. В езика HTML най-често се използват графичните формати GIF(.gif) и JPEG(.jpg). Предимството на първия е че може да съдържа анимация и прозрачен фон, но се ограничава само до 256 цвята. При втория формат няма ограничение за цветовете и картинките са с по-високо качество, но пък нямате прозрачен фон, нито анимация.
Когато слагате картинка на web страницата си трябва да знаете от колко точки е съставена хоризонтално и вертикално (кликнете с десния бутон на мишката върху картинката и от менюто изберете Properties за да видите от колко точки е картинката). Вие разбира се можете да свиете или разширите изображението. Това става с атрибутите WIDTH и HEIGHT на елемента <IMG>. Например нека направим същата картинка да се показва като 150Х187 точки(пиксела):
<IMG xsrc="image.jpg" WIDTH="150" HEIGHT="187">
В този случай картинката се намалява точно наполовина. Ако не бяхме спазили пропорцията да намалим точно на 2 ширината и височината на картинката изображението щеше да се "смачка".
Можете да използвате също така картинки за фон на web страници. Това става с атрибута BACKGROUND на елемента <BODY>. Нека направим страница с фон същата картинка:
<HEAD>
<TITLE>background</TITLE>
</HEAD>
<BODY BACKGROUND="image.jpg">
</BODY>
Можете да направите фона на страницата неподвижен (при скролиране на страницата нагоре-надолу фона няма да се мести заедно с нея). Това става с атрибута BGPROPERTIES="fixed" разположен след атрибута BACKGROUND. Ето така:
<BODY BACKGROUND="image.jpg" BGPROPERTIES="fixed">
За съжаление, BGPROPERTIES се разпознава само от Internet Explorer. При разглеждане с Netscape Navigator фона няма да е неподвижен.
Картинките често служат и като хиперлинкове към други страници. За да добавите хиперлинк към картинка, трябва да използвате двойката елементи <A> и </A>. Вижте един пример:
<HEAD>
<TITLE>image</TITLE>
</HEAD>
<BODY>
<A
xhref="http://vissy.hit.bg/ "><IMG xsrc="banners/mirchelp.gif" BORDER="0" ALT="#mirchelp"></A>
<A xhref="http://vissy.hit.bg/Comands.html"><IMG xsrc="banners/mhforum.gif" BORDER="0" ALT="#Irc Comands"></A>
</BODY>
При разглеждане на горния html документ с някой браузър, на екрана ще се появят две картинки. При кликване върху първата ще отивате на адрес vissy.hit.bg, а втората ще води до vissy.hit.bg/Comands.
Първото изображение е файл с име mirchelp.gif, а второто mhforum.gif. И двете се намират в поддиректория banners, затова след атрибута SRC се указва цели път до файла, в случая banners/dirbg.gif. Когато изображението е комбинирано с хиперлинк, то се показва оградено със синя рамка. За да махнете досадната синя рамка, използвайте атрибута BORDER="0". BORDER задава дебелината на рамката около изображението в пиксели. При промяна на стойността на BORDER се променя и дебелината на рамката. Атрибута ALT задава алтернативния текст, който да се показва, когато вие сочите с мишката върху изображението, без да клеквате върху него. Обикновено това е пояснителен текст, най-често докъде води хиперлинка. Застанете с мишката върху картинката и ще видите за какво става въпрос.
Коментари (20)
Моля ви помгнете!
с 2 думи нямам думи :Д
езикът не става хипер линковете също .. както и снимките (и снимки с хиперлинкове)
вече горе долу се научих как става но не от тук!
това което научих от тук е че трябва да има / и това е сичко...