BG-HALF LIFE

BG-HALF LIFE

Българският Half Life портал
 
PortalPortal  ИндексИндекс  Въпроси/ОтговориВъпроси/Отговори  Регистрирайте сеРегистрирайте се  ВходВход  
*BG-SMURFA-VRATSA* ви пожелава приятна игра в сървърите ни :)
CSPORTAL-BG.IN # Army Ranks+Respawn
Визита от други Държави
Flag Counter

Share| .

Как да програмираме уеб страници със HTML

Предишната тема Следващата тема Go down
АвторСъобщение
Neytiri
Модератор
Модератор


Брой мнения : 1606
Дата на регистрация : 05.10.2015
Години : 15
Местожителство : Eguestria / Ponyville

ПисанеЗаглавие: Как да програмираме уеб страници със HTML Чет 12 Май 2016, 14:03

Част 1: заглавия, линкове и таблици.

=============================================================
Част 2 изображения и шрифтове
Върнете се в началото Go down
http://smurfa.bulgarianforum.net/t3224-topic#8930 https://www.facebook.com//smurfavratsa
Neytiri
Модератор
Модератор


Брой мнения : 1606
Дата на регистрация : 05.10.2015
Години : 15
Местожителство : Eguestria / Ponyville

ПисанеЗаглавие: Re: Как да програмираме уеб страници със HTML Чет 12 Май 2016, 15:24

Програмиране в среда Интернет

Минно-геложки университет
"Св.Иван Рилски"

кат._Информатика
Меню

Начало
Увод
Съдържание
Въведение в Интернет
HTML
CSS
JavaScript
Perl
Полезни връзки
Речник на термините



HTML - ПЪРВА ЧАСТ

Концепция на езика. Основни тагове. Форматиране на шрифт и подравняване.
Създаване на хипервръзки. Коментари
Езикът за форматиране на WEB страници HTML е универсалния език във WEB. Той се използва за създаване на статични страници ( в последните версии на езика, той е допълнен с т.нар. DHTML - Dynamic HyperText Language, който добавя известна интерктивност на страниците ) и представлява обикновенни ASCII файлове т.е. това са обикновенни текстови файлове, които може свободно да се променят с помощта на Notepad (връзки към програми за писане на код можете да намерите в секцията "Полезни връзки", но особенно подходящ е продукта на Evrsoft - First Page 2000). Тези файлове се състоят от текст, който бива визуализиран и команди (тагове,tags), които служат за указване на това как да бъде визуализиран текста. HTML има няколко версии като актуалната за момента е 4.01, и съдържа над 110 тага.
Употребата на тагове за дефиниране на елементите във WEB документа са нарича форматиране (markup). Има тагове за поставяне на заглавие на документа, за създаване на таблици и хипервръзки, за поставяне на изображения, формуляри, мултимедийни обекти и др.
Структурата на един HTML документ е следната :

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>HELLO WORLD!
</BODY>
</HTML>
Това е резултата от този код.
Както виждате всеки HTML документ трябва да започва с тага <HTML> (по принцип таговете се пишат с големи букви, но всеки един браузър ще визуализира и документ написнан с малки букви, както този който четете) и да завършва с тага </HTML>. Първият таг се нарича отварящ, а втория затварящ. Трябва да се отбележи, че не всеки таг има затварящ такъв (например <BR>, който служи за преминаване на нов ред). Следващият таг, който трябва да присъства във всеки един HTML документ е <HEAD>. Той служи за поставяне на различна служебна информация, скриптове на JavaScript и какскадни стилове (CSS). Единствения таг, който е задължително да сложим е <TITLE>. Той променя заглавието на страницата, което се визуализира в заглавната лента на браузъра. Последният задължителен таг в <BODY></BODY>.Тук се намира същинската информация на документа. Този таг има няколко важни атрибута :

bgcolor="..." Установява цвета на фона на страницата.
background="..." Дефинира изображение, което да служи като фон.
text="..." Установява цвета на текста на страницата.
link="..." Цвят на хипервръзката.
vlink="..." Цвят на посетената хипервръзка.
alink="..." Цвят на активната хипервръзка.
Добавянето на цветове в един HTML документ става чрез шест цифрен код. Този код е шестнайсетично число съставено от три двуцифрени шестнайсетични числа. Всяка една от групите отговаря на един от трите основни цвята (червено, зелено, синьо - в този ред) и е в интервал от 00 (за липса на цвета) до FF (за пълна наситеност на цвета). Например кода #FF0000 - червено,#00FF00 - зелено и #0000FF - синьо. Чрез подходящо комбиниране се получават останалите цветове (таблица с 140 цвята можете да видите тук).

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет - цветове</TITLE>
</HEAD>
<BODY BGCOLOR="#99FFFF" TEXT="FFFFFF" LINK="FF0000">
<FONT COLOR="red">Това е червено</FONT><BR>
<FONT COLOR="green">Това е зелено</FONT><BR>
<FONT COLOR="blue">Това е синьо</FONT><BR>
</BODY>
</HTML>

Това е резултата от този код.
Форматирането на текст в чист HTML код става с тага <FONT></FONT>. Благодарение на него може да се променя цвета (както в примера) на шрифта, самия шрифт и неговата големина. По-важните атрибути са:

color="..." Установява цвета шрифта.
face="..." Установява самия шрифт.Възможно е дефинирането на повече от един шрифт, разделени със запетаи.
size="..." Големина на шрифта. Като параметри са възможни както цели числа определящи еднозначно шрифта, така и числа със знак определящи големината на шрифта относително спрямо шрифта по подразбиране( например size="+1").
style="..." Дефинира каскаден стил на шрифта .
Важно : Използвайте този таг само за съвместимост, във всички останали случаи използвайте каскадни стилове.

Друг важен таг е <P></P>, който служи за създаване на абзаци в текста на документа. Той служи за отделяне на дадена част от текста в ясно обособени параграфи. Има само един атрибут align="..." , който служи за подравняване на текста вътре в абзаца. Възможните параметри на атрибута са left (подравняване отляво),right(подравняване отдясно) и center(центриране). Друг начин за подравняване е използването на контейнера <DIV ALIGN="..."></DIV>, а за центриране може да се използва <CENTER></CENTER>. Разликата при използването им може да се види от следния пример :

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
<P ALIGN="center">Подравняване чрез абзац.</P>
<DIV ALIGN="center">Подравняване чрез контейнер.</DIV>
<CENTER>Подравняване с тага CENTER.</CENTER>
</BODY>
</HTML>

Това е резултата от този код.
Удебеляването на шрифта в документа може да стане по два начина. Първият е използването на тага <В>Удебелен шрифт</В>, а втория е чрез тага <STRONG>Удебелен шрифт</STRONG>. Използването на който е да е от двата тага води до един и същ резултат и използването им е чисто субективно. Слагането на шрифта в курсив става с помощта на <I>Курсив</I>. Чрез комбинирането на <B> и <I> може да се постигне удебелен шрифт в курсив. При това трябва да се спазва правилото първият отворен таг се затваря последен. Например следният ред е правилен <B><I>Правилно</I></B>, а този е неправилен <B><I>Неправилно</B></I>. Това правило важи за всеки един таг и трябва да се спазва, за да може браузъра да визуализира правилно страницата. Друг подобен таг е тага за подчертаване на текст <U>Почертан текст</U>.
Когато се налага обособяването на два блока от текст с различно съдържание може да се използва разделянето им с хоризонтална линия. Тага с помощта, на който става това е <HR>. Той няма затварящ таг и има следните параметри :

align="..." Подравняване на линията.
noshade Този параметър изключва 3-D визуализацията на линията.
size="..." Указва дебелината на линията в пиксели. Използването й в HTML 4.0 е остаряло и трябва да се замества с каскадни стилове.
width="..." Указва дължината на линията в пиксели (width="100") или в проценти относително спрямо елемента, който съдържа линията (width="50%").
color="..." Дефинира цвят на линията. При използването на този атрибут, автоматично се включва и атрибута noshade. Ако трябва да се използва 3-D изглед се налага използването на каскадни стилове. Този атрибут се поддържа само от Internet Explorer.
Друг начин за форматиране на текст е използването на таговете за заглавия (headings) - <Hx></Hx>, като х е число от 1 до 6. Единствения атрибут, който този таг има е ALIGN="...". Разгледайте пример за резултата от използването му (както и резултата от другите разгледани тагове):

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
<B>Удебелен текст с тага В.</B><BR>
<U>Подчертан текст</U><BR>
<STRONG>Удебелен текст с тага STRONG</STRONG><BR>
<I>Текст в курсив.</I><BR>
<B><I>Удебелен текст в курсив.</I></B><BR>
<H1>Това е H1.</H1>
<H2 ALIGN="right">Това е H2 подравнен вдясно.</H2>
<H3 ALIGN="center">Това е центриран H3.</H3>
<H4 ALIGN="left">Това е H4 подравнен вляво.</H4>
<H5>Това е H5.</H5>
<H6>Това е H6.</H6>
Линия с дължина 150 пиксела и размер 10 пиксела, подравнена вдясно.
<HR SIZE="10" WIDTH="150" ALIGN="right"><BR>
Линия с дължина 50 процента от размера на страницата и размер 1 пиксел и изключен 3-D изглед.
<HR SIZE="1" WIDTH="50%" NOSHADE><BR>
Линия в червен цвят (само в Internet Explorer).
<HR COLOR="red"><BR>
</BODY>
</HTML>

Това е резултата от този код.
Един от най-важните тагове в един WEB документ е тага за създаване на хипервръзка <A></A>. Между таговете се намира текста на самата хипервръзка. Този таг има множество атрибути, по-важните от които са:

href="URI" Това е най-важния атрибут.Посочва мястото към, което трябва на води връзката. Например href="[You must be registered and logged in to see this link.] ще посочи на вашия браузър, че трябва да зареди адреса [You must be registered and logged in to see this link.]
name="..." Атрибута създава т.нар. котва в страницата. Например ако има страница с име page1.html и място в нея обозначено с <A NAME="sect1">Секция 1</A> и друга страница с връзка <A HREF="page1.html#sect1">Секция 1</A>, то при тази връзка води към page1.html и точно там където е дефинирана sect1.Това ще бъде демонстрирано в примера.
target="..." Указва къде да бъде отворена страницата. Възможните параметри са : _blank (отваря връзката в нов прозорец), _parent (отваря връзката в същия прозорец, като ако е той е frameset го замества), _self (отваря връзката в същия прозорец, като ако е той е frameset не замества целия фреймсет, а само неговия фрейм), _top (замества всеки и всички фреймсетове, които могат да бъдат заредени, ако няма фреймсет действието е подобно на _self).
type="..." Указва на браузъра какъв тип документ на очаква. Параметъра трябва да е валиден MIME тип. Например ако връзката сочи към видео файл, то този атрибут ще укаже на браузъра да зареди подходящия плъгин <A TYPE="video/mpeg" HREF="mycat.mpeg">Моята котка</А>.
Параметъра на атрибута HREF="...", може да се дефинира по два начина: като абсолютен път към документа и като относителен път спрямо документа, който е връзката. Това може да се изясни със следния пример : да предположим, че съществува page1.html в директория c:\mydocs (т.е. c:\mydocs\page1.html) и втори документ page2.html в директория c:\mydocs\site2 (c:\mydocs\site2\page2.html). Искаме да направим връзка от page1.html към page2.html. Връзките ще изглеждат така:

Абсолютен път
<A HREF="c:\mydocs\site2\page2.html">Страница втора</A>
Относителен път
<A HREF="site/page2.html>Страница втора</A>

Сега да предположим, че искаме да направим връзка от page2.html към page1.html. Връзките ще изглеждат така:

Абсолютен път
<A HREF="c:\mydocs\page1.html">Страница първа</А>
Относителен път
<A HREF="../page1.html">Страница първа</А>

Тук ../ указва на браузъра на излезе една директория над текущата, аналогично ../../ ще укаже, че документа се намира на две директории над текущата. Така ако разширим нашия пример и предположим, че съществува файл c:\mydocs\site3\page3.html . Ако трябва да направим относителна връзка към него от page2.html, то тя ще има следния вид :

<A HREF="../site3/page3.thml">Страница трета</A>

Както бе обяснено във WWW за указване на връзки се използва URL, затова в атрибута се препоръчва изпозването на пълния URL адрес, например [You must be registered and logged in to see this link.] или [You must be registered and logged in to see this link.] . Освен това в HREF="..." могат да се поставят и връзки към e-mail едреси :

<A HREF="mailto:yourmail@mail.bg">Моят e-mail</A>

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

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет - пример 5</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<A NAME="top">Начало на документа</A><BR>
<A HREF="ex5.html#bottom">Това е връзка, която сочи към края на документа.</A><BR>
<A HREF="../../index.html" TARGET="_blank">Това е връзка с относителен път отваряща нов прозорец.</A><BR>
<A HREF="../../index.html" TARGET="_self">Това е връзка с относителен път отваряща се в същия прозорец.</A><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A HREF="ex5.html#top">Това е връзка, която сочи към началото на документа.</A><BR>
<A NAME="bottom">Край на документа</A>
</BODY>
</HTML>

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

<!-- Това е подчертан текст -->
<U>ВАЖНО</U>
Върнете се в началото Go down
http://smurfa.bulgarianforum.net/t3224-topic#8930 https://www.facebook.com//smurfavratsa
NoiZeR
Модератор
Модератор


Брой мнения : 177
Дата на регистрация : 27.03.2012
Години : 19
Местожителство : Велико Търново

ПисанеЗаглавие: Re: Как да програмираме уеб страници със HTML Чет 19 Май 2016, 22:44

videotutorials-bg.com(не е реклама) е много удобен и полезен сайт, пълен с видео уроци за HTML, CSS , PHP, MySQL, AJAX и още много други.
Колегата обеснява много подробно на български език всичко важно. Единствения недостатък е че е правил клиповете отдавна и не пише на HTML5 и на CSS3.

__________________________________________________________________________
Поздрави:NoiZeR
Върнете се в началото Go down
http://smurfa.bulgarianforum.net/ https://www.facebook.com//smurfavratsa
Sponsored content




ПисанеЗаглавие: Re: Как да програмираме уеб страници със HTML Today at 21:42

Върнете се в началото Go down
Как да програмираме уеб страници със HTML
Предишната тема Следващата тема Върнете се в началото
Страница 1 от 1

Permissions in this forum:Не Можете да отговаряте на темите
BG-HALF LIFE :: Програмиране и Дизайн-