HTML КУРС ниво - 0 (уроци)

Раздела предоставя уроци за съответните уеб "езици":
User avatar
sonik_blast
Пристрастен GEEK
Posts: 2336
Joined: 11 Nov 2005, 17:57
Skype: sonik_blast_headoff
Location: София
Contact:

HTML КУРС ниво - 0 (уроци)

Unread post by sonik_blast »

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

ИНТРОДУКЦИЯ
Някой казват,че Уеб предостави моща на печатната преса в ръцете на отделни хора,мощ,която произтича от простия факт,че идеите променят света.По традиция хората винаги са използвали напечатената дума,за да споделят своите мисли,но днес те остремително се насочват към електронните медий - такива като уеб страници - макар,че се съмнявам отпечатването на хартия просто така да отмре.Научавайки се да правите свойте уеб страници вие може да вземете участие в този обмен на информация и да се възползвате от шанса да промените света по свой уникален начин.
Без значение колко възвишени или прости са вашите мотиви за създаване на уеб страници,необходимо е да започнете с езика,обслужващ основите на уеб:HTML.HTML значи описване на това,което виждате на една уебстраница.В това число текст,образи и музика.
След като научите основите на HTML ще започна да ви представям и другите допълнения XML и DHTML засега няма да се спираме на тях важно е само да знаем,че ги има и че с тяхна помощ занапред ще може да си улесним живота.

ВАШАТА ПЪРВА УЕБ СТРАНИЦА
Медицината по принцип се справя доста добре с диагностицирането на болести и с бързото препоръчване на някакъв курс на действие по посока възстановяването на здравето.Но когато докторите стигнат до съгласие,че нямат никаква представа кое не е наред,може да се наложи най-плашештата от всички медицински процедури - изследващата операция.Тя се прави тогава,когато херургат отваря тялото ви,просто зада го огледа вътре.Макар,че изследващата операция предизвиква у вас боязън,тя може да ви спаси живота.Аналогично,правенето на разрес на една примерна уеб страница може да вдъхне живот на вашият собствен проект.

Нека да напишем една малка уеб страничка и после да разгледаме отделните и елементи:


Цитат:
<HTML>
<HEAD>
<TITLE>MOQTA PYRVA WEB STRANICA</TITLE>
<HEAD>

<BODY BGCOLOR="PINK">
<TABLE>
<TR>
<TD ALIGN="CENTER">
<P>
<IMG SRC="BLA.GIF">
<BR>
<H2>mY FIRST WEB PAGE</H2>
</P>
</TD>
</TABLE>
</BODY>
</HTML>


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


Цитат:
<HEAD></HEAD> - в тази глава се състои информацията за страницата като заглавие,език,какво садържа и др.
<TITLE></TITLE> - самото заглавие на страничката
<BODY></BODY> - тялото на страницата където се намират операцийте,които искате тя да извършва.
<H1></H1>..<H6></H6> - задава размера на текста до един от предварително установените размери.
<p></p> - обособява абзац в текста
<b></b> - одебелява текста
<i></i> - прави текста в курсив
<u></u> - подчертава текста
<img> - поставя изображение в страницата
<a> - задава хиперлинк (котва)
<br> - поставя край на ред,премествайки курсора на нов ред

<ul></ul> - обособява неномериран списък от пунктове
<ol></ol> - обособява подреден списък от номерирани пунктове
<li></li> - обособява пункт в номериран или неномериран списък


Цветове:

Цветовете в уеб страниците представляват шест цифрени числа пред които има дс.Пимерно: #080808 или 000000,000080 и т.н.

Пимер:

Цитат:

<HTML>
<HEAD>
<TITLE> blue background </TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF" TEXT="#FFFF00">
Тази страница е на син фон със жълти букви
</BODY>
</HTML>
запишете страницата като Тест.html
Параметъра TEXT= задава цвета на текста на цялата страница. Обърнете внимание, че затварящата скоба ">" на елемента <BODY> се поставя след параметрите.

Примери:

#FFFFFF - бяло
#000000 - черно
#FF0000 - червено
#00FF00 - бледо-жълто
#0000FF - синио
#FFFF00 - жълто
#FF00FF - морско-синио
#008000 - лилаво
#C0C0C0 - зелено
#808080 - сребристо
#800000 - сиво
#808000 - червено-кафяво
#000080 - маслено зелено
#800080 - тъмно-синио
#008080 - тъмно-виолетово

ТЕКСТ

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

Пимер1
страница с различни цветове на буквите:


Цитат:
<HTML>
<HEAD>
<TITLE> Font </TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">Червен текст.</FONT><BR>
<FONT COLOR="#00FF00">Зелен текст на нов ред.</FONT><BR>
<FONT COLOR="#0000FF">Син текст на нов ред.</FONT><BR>
</BODY>
</HTML>


Пример2
най-различни цветове и големини:


Цитат:
<HTML>
<HEAD>
<TITLE> Font </TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000" SIZE=2>Текст</FONT>
<FONT COLOR="#00FF00" SIZE=3>с различна</FONT>
<FONT COLOR="#0000FF" SIZE=7>г</FONT>
<FONT COLOR="#00FFFF" SIZE=6>о</FONT>
<FONT COLOR="#FF00FF" SIZE=5>л</FONT>
<FONT COLOR="#AA0066" SIZE=4>е</FONT>
<FONT COLOR="#0033CC" SIZE=3>м</FONT>
<FONT COLOR="#2200FF" SIZE=2>и</FONT>
<FONT COLOR="#FF7700" SIZE=1>н</FONT>
<FONT COLOR="#555555" SIZE=2>а</FONT>
<FONT COLOR="#DD1188" SIZE=3> и цвят.</FONT>
</BODY>
</HTML>


Пример3
заглавия:


Цитат:
<HTML>
<HEAD>
<TITLE>H елемент</TITLE>
<HEAD>
<BODY>
<CENTER>
<H1>Голямо заглавиe</H1>
<H3>Средно заглавие</H3>
<H6>Малко заглавие</H6>
</CENTER>
</BODY>
</HTML>



Пример4
позициониране:


Цитат:
<HTML>
<HEAD>
<TITLE> P елемент </TITLE>
<HEAD>
<BODY>
<P ALIGN="left">текст, подравнен вляво</P>
<P ALIGN="center">текст, подравнен в средата</P>
<P ALIGN="right">текст, подравнен вдясно</P>
</BODY>
</HTML>


Това е най-общо всичко,което трябва да знаете за текстовете оцветяването и позиционирането им.

СПИСЪЦИ

HTML има възможност да правите списъци на страницата си.Те биват няколко вида - подредени, неподредени и списъци с обяснения:
Подредените списъци са номерирани в този си вид :
Соник
Заио
Петко
Неподредените списъци използват вместо номерация, някакъв символ. Примерно:
Соник
Заио
Петко
Списъците с обяснения не използват символ или цифра пред текста. Вместо това поставят обяснителен текст след всеки елемент от списъка:
Соник Администратор
Заио Форум администратор
Петко ламер
Списъците се правят с елемента <OL> и съответно се затваря с </OL> ,а елементите на списъка се задават с <LI></LI>,<UL></UL>,<TD></TD>
Примерно:

Цитат:
<HTML>
<HEAD>
<TITLE> ordered list</TITLE>
</HEAD>
<BODY>
да не забравя да купя:
<OL>
<LI>захар
<LI>яйца
<LI>сода каустик за тъщата
</OL>
</BODY>
<HTML>

Въпреки,че никъде не сте задали да излизат числа те се задават автоматично.Ако искате да не са числа добавяте Type=a примерно в тага <LI>.Примерно <li type=a>бла бла</li>
Ето още няколко примера експериментирайте за да видите какво ще се получи

Цитат:
<HTML>
<HEAD>
<TITLE>definition list</TITLE>
<HEAD>
<BODY>
<DL>
<DT>Иван
<DD>счетоводител
<DT>Георги
<DD>касиер
<DT>Захари
<DD>данъчен инспектор
</DL>
</BODY>
</HTML>


Цитат:
<HTML>
<HEAD>
<TITLE>вложени списъци</TITLE>
</HEAD>
<BODY>
<OL>
<LI>Да купя за вкъщи:
<UL TYPE=circle>
<LI>сладолед
<LI>торта
</UL>
<LI>Да купя за офиса:
<UL TYPE=circle>
<LI>дискети
<LI>химикалки
<LI>нова мишка
</UL>
</OL>
</BODY>
</HTML>


Цитат:
<HTML>
<HEAD>
<TITLE>списък с картинка</TITLE>
</HEAD>
<BODY>
<UL imagesrc="redpoint.gif">
<LI>дискети</LI>
<LI>химикалки</LI>
<LI>нова мишка</LI>
</UL>
</BODY>
</HTML>


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

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

Хоризонталните линии са също добра екстра в HTML която ви позволява да разграничавате текстове и картинки,а и в най-различни други приложения.Използва се тага <HR>,които свой събрат който да го затваря т.е няма затварящ таг.За сметка на това има допълнения към тага като широчина,височина и д.р
Пример 1

Цитат:
<BODY>
<HEAD>
<TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=100>
<HR WIDTH=100%>
</BODY>
</HTML>

Пример 2

Цитат:
<BODY>
<HEAD>
<TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=300 ALIGN="left">
<HR WIDTH=300 ALIGN="right">
</BODY>
</HTML>

Пример 3

Цитат:
<BODY>
<HEAD>
<TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=80% SIZE=5>
</BODY>
</HTML>

Пример 4

Цитат:
<HTML>
<BODY>
<HEAD>
<TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=80% SIZE=5>
</BODY>
</HTML>

Пример 5

Цитат:
<HTML>
<BODY>
<HEAD>
<TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=90% SIZE=8 COLOR="#0000FF">
</BODY>
</HTML>


Хиперлинкове

Хиперлинковете ви дават възможност да правите препратки към други сайтове,към други страници на сайта ви,към файлове и прочее.Без тях нямаше да има смисал от сайтовете... Хиперлинк се създава с двойката тагове <A> и </A>,като когато правите препратката прибавяте HREF към таг <A>.

Пример:

Цитат:
<HTML>
<HEAD>
<TITLE>hyperlink</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.webleit.com">webleit.com</A>
</BODY>
</HTML>


Освен препратки към други сайтове, можете да правите препратка и към собствения си сайт. За целта трябва да слагате всички web документи, създадени от вас в една папка или в нейните подпапки. Нека да направим един сайт ( не страница, а именно сайт, съвкупност от страници с препратки една към друга). Ще направим сайта от 3 страници, като ще ги именуваме "начална страница", "лични данни" и "свържете се с мен". Направете си нова папка на твърдия диск и и дайте името "website". Сега нека направим първата страница:


Цитат:
<HTML>
<HEAD>
<TITLE>начална страница</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЛИЧНАТА МИ СТРАНИЦА</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
<A HREF="forme.html">Нещо повече за мен.</A><BR>
<A HREF="contact.html">Пишете ми</A>
</BODY>
</HTML>


Запазете този документ във същата папка под името index.html. Сега да направим другите две страници от сайта:


Цитат:
<HTML>
<HEAD>
<TITLE>лични данни</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЗА МЕН</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
Тук напишете нещо за себе си
<BR>
<A HREF="index.html">Към началната страница</A><BR>
<A HREF="contact.html">Пишете ми</A>
</BODY>
</HTML>


Този документ го запазете в същата папка по името forme.html и направете последната страница с името contact.html.


Цитат:
<HTML>
<HEAD>
<TITLE>свържете се с мен</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ПИШЕТЕ МИ</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
Тук напишете адреса си, e-mail и т.н.
<BR>
<A HREF="index.html">Към началната страница</A><BR>
<A HREF="forme.html">За мен</А><BR>
<A HREF="mailto:sonik.blast@gmail.com">Моя e-mail</A>
</BODY>
</HTML>


Ето как ще изглежда този сайт. Натиснете ТУК, или го стартирайте от папка website на твърдия си диск. Виждате, че вече отделните страници са свързани а препратки помежду им. Когато задавате линкове към файлове, които са във същата папка, изписвате само името им и разширението (forme.html). Ако HTML документа е в някаква подпапка на вашата папка, например подпапка main, трябва да зададете и пътя до там <A HREF="main/forme.html">За мен</А>.
Новото в горния пример е <A HREF="mailto:www4u@search.bg">Моя e-mail</A>. Когато срещне mailto:име_на_мейла и посетителят на страницата кликне върху текста след него браузъра стартира програмата му за електронна поща, която вписва в полето за изпращане адреса на мейла, който е зададен след mailto:
По този начин спестявате на посетителят на страницата, който иска да ви пише, ръчното стартиране и настройка на програмата си за електронна поща. Ако посетителят няма такава програма (Eudora или Outlook Expres например) или използва webmail в hotmail или yahoo например, параметърът mailto: няма да върши работа. Затова винаги пишете вашия e-mail между <A> и </A>. Ето така:


Цитат:
<A HREF="mailto:sonik.blast@gmail.com">Моя e-mail sonik</A>


Освен към други страници и e-mail можете да правите препратки в рамките на същата страница. Това става по следния начин. Изполвайки елемента <A> давате някакво име на определена част от HTML документа, нещо като маркировка. Например, в началото на страницата която разглеждате в момента съм дал име "begin":


Цитат:
<A NAME="begin">Езика HTML</A>


Ако си спомняте така започваше тази страница. На първите две думи съм им дал име за препратка "begin". Сега ако напиша <A HREF="#begin">върнете се в началото на страницата</A> и кликнете върху текста, ще се върнете в началото на страницата. Ето, убедете се сами:

върнете се в началото на страницата

Можете да слагате навсякъде в документа такива маркировки и да правите препратки към тях. Също така, можете да препращате към друг HTML документ, в който има маркировка. Това става като първо напишете името на документа, после # и после името на маркировката.


Цитат:
<A HREF="index.html#begin">Отивате на index.html с препратка към част begin</A>


или


Цитат:
<A HREF="http://www.webleit.com/index.html#begin">Отиватена index.html с препратка към част begin</A>


Какво научихте за хиперлинковете :

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

2. Хиперлинк се реализира с елемента <A> и атрибута HREF. Име на част от страницата се дава с атрибута NAME.

(информацията за хиперлинковете е взета от форюсърч)

Картинки

Добавянето на картинки към страницата ви е много лесно.Възможните вариянти за картинки са GiF & JPEG.В най-многото случай най-добрия вариянт са GiF овете.Тага за добавяне на картинки към страницата е <img src> а допълненията му са ALT="" & Border="Number".

Пример:


Цитат:
<HTML>
<HEAD>
<TITLE>Добре дошли</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#00FF00" LINK="yellow" VLINK="orange" ALINK="red">
<H1 ALIGN="CENTER">
<i><u>Welcome To Aruba</u></i></H1>
<P>
<HR SIZE=4 WIDTH="80%" ALIGN=CENTER>
<HR SIZE=4 WIDTH="60%" ALIGN=CENTER>
<HR SIZE=4 WIDTH="40%" ALIGN=CENTER>
<IMG SRC="aruba.jpg" BORDER="5" ALT="sunset">
<P>
<FONT SIZE="3" COLOR="white">
<b><tt>This Beautiful Sunset In Aruba<BR>
Aruba is a lovely island off the coast<BR>
of South America. The weather is perfect<BR>
in Aruba any day of the year.</tt></b>
</FONT>
</BODY>
</HTML>


Височината и широчината се задават с таговете HEIGHT="number" и WIDTH="number",а разположението с тага ALIGN="място(примерно Left)".

Пример:


Цитат:
<HTML>
<HEAD>
<TITLE>Welcome To Aruba</TITLE>
</HEAD>
<BODY BACKGROUND="stars.gif" BGCOLOR="#000000"
TEXT="#00FF00" LINK="yellow" VLINK="orange" ALINK="red">
<H1 ALIGN="CENTER">
<i><u>Welcome To Aruba</u></i></H1>
<P>
<HR SIZE=4 WIDTH="80%" ALIGN=CENTER>
<HR SIZE=4 WIDTH="60%" ALIGN=CENTER>
<HR SIZE=4 WIDTH="40%" ALIGN=CENTER>
<P>
<IMG SRC="aruba.jpg" BORDER=5 HEIGHT="150"
WIDTH="200" ALIGN="right" ALT="sunset">
<FONT SIZE="2" COLOR="white">
<b><tt>This Beautiful Sunset In Aruba.<BR>
Aruba is a lovely island off the<BR>
coast of South America.<BR>
The weather is perfect<BR>
in Aruba any day of the year.</tt></b>
</FONT>
</BODY>
</HTML>


хиперлинк и картинка може да получите лесно по този начин:


Цитат:
<A HREF="http://www.webleit.com.com">
<IMG SRC="banner.jpg" WIDTH="?" HEIGHT="?" BORDER="0"></A>


Мелодии

За привържаниците на мелодиите ще кажа,че може да се радват защото HTML ви позволява и да узвочавате вашата страницата с няколко прости кода може да направите чудеса!Таг-а за интернет експлорера е <BGSOUND>,a в HTML код представлява най-просто това:


Цитат:
<HTML>
<HEAD>
<TITLE>music</TITLE>
<BGSOUND SRC="" LOOP="-1">
</HEAD>
<BODY>
</BODY>
</HTML>


таг-а loop="-1" се използва за да кажете на песента колко пъти да се повтаря,а ако сложите - пред цифрата песента няма да се повтаря.

За възпроизвеждане на звук от Netscape Navigator ползваме елемента <EMBED>,които показва меню за възпризвеждане на звука .

Пример:


Цитат:
<HTML>
<HEAD>
<TITLE>embed</TITLE>
</HEAD>
<BODY>
<EMBED SRC="music.mid" WIDTH="128" HEIGHT="128" LOOP="true">
</BODY>
</HTML>



Таблици:

Основно HTML таблиците се формират с помоща на няколко тага:
<table> - създава таблицата
<tr> - задава начало на ред в таблицата
<td> - задава клетка в ред

Примерно:


Цитат:
<table align="center" border="1" width="90%">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td >5</td>
<td>6</td>
</tr>
</table>


<align> - местонахождение на таблицата
<border> - рамка на таблицата (при = на 0 няма рамка)



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

Автор:[url="http://webleit.info"]Sonik_Blast[/url]
Оригинална тема:[url="http://webleit.info/forums"]WwW.WeBlEiT.Info[/url]
Last edited by sonik_blast on 13 Mar 2007, 23:46, edited 1 time in total.
Не е важното къде си, важното е да си там, но да не си сам.
Колкото по-умен ставам, толкова по-тъп изглеждам в очите на другите.
No Fea Sonik Is Hea, YouR End Is Nea!

Anonymous

Unread post by Anonymous »

Не се занимавам с HTML за сега, но се позачетох в началото и мога да направа едно допълнение за цветовете, ако някои го интересува как да използва по-точни цветове, различни от тези 15, които за описани в урока. Много удобно е да се използва вградения във windows paint. от там може да видите кода на желания цвят в RGB палитра в десетична бройна система и после лесно да го преобразувате с помощта на също вградения калкулатор. например цвят, които се състои от RGB - 213,23,43 ще изглежда в шестнаистични числа така D5,17,2B ... махате запетаите и поствяте '#' и се получава #D5172B = RGB 213,23,43. Ако не знаете как да пеобразувате всяко от трите числа с калкулатора това става така :
1во в меню view на калкулатора изберете позиция scientific вместо стандарт
2ро в режим DEC си напишете числото в моя случай 213
3то минете в режим HEX ... това е! калкулатора в показва как изглежда шестнадесетично а именно D5. Това е надявам се да ви е полезно :-) Ако имате някакви въпроси за повече подробности и някоя друга хватка при избирането на цвят питайте във форума ако я знам ще помогна

Locked