Selected from Linux Selected from PHP
- Ubuntu 17.10 Install google's mod pagespeed for apache - PHP-Ubuntu-Youtube-dl simple script for converting and downloading youtube video or mp3
- Ubuntu SSH tunnel via proxy - PHP while loop with every row with a different color
- Install GoAccess Apache Log Analyzer Tool on Ubuntu 17.10 - PHP use while loop in function
- SSHFS and map folder with a proxy - PHP List Files And Folders As links
- How to connect to SSH server with a proxy - PHP Extract Text From String
➥ HTML курс ниво - 0 - начинаещи - (обединени уроци)
Added by sonik on 02-05-2017 and keywords: html, tutorials, bulgarian, level, one, junior, уроци, за, начинаещи, хтмл, начално, ниво, начинаещи, колекция, уроци, всичко, по, темата [ Print Article ]
Тази тема ще бъде направена като курс от няколко урока започващи от нулево равнище. Т.е. всеки, които и в живота си не е чувал за 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 другите неща ще ги описваме по-подробно след време във под-форума,ще ви покажа как да направите страниците си по-интересни и така нататък.

Автор:Sonik_Blast
Оригинална тема:WwW.WeBlEiT.Info

@All rights reserved with Copyright Webleit.info 2018 by Sonik_Blast [ Site Map ] [ RSS ] [ YouTube Mp3 Downloader and converter ]