Преглед на урок

Вашата първа страница с HTML

Вашата първа страница с HTML




Вашата първа страница


Първото нещо, което трябва да направите е да имате файл, в който да въвеждате вашия HTML код. Отворете notepad, wordpad или друг текстов едитор. Запазете файла като imenafail.html. Естествено, името на файла е произволно. Ограниченията за него са наложени от операционната система - не може да съдържа специални знаци, а само букви и цифри.
Сега отворете този файл през вашия любим браузър. Би трябвало да излезе празна страница. Когато въведете някакъв HTML код и обновите (refresh) страницата в браузъра ще видите изходния резултат от кода.

HTML съдържа множество тагове, с които се въвежда и управлява информацията в даден уеб документ. След това тези тагове са интерпретирани от браузъра ви така, че да видите крайния резултат - готовата HTML страница.
Ето пример за един HTML таг:
<title>

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

Ето примерна употреба на тагa title:

Код
<html>
 <head>
  <title>My first webpage</title>
 </head>

 <body>
  Hi, welcome to my first webpage!
 </body>
</html>

Това е код на една много проста уеб страница. Копирайте го едно към едно във вашия HTML файл. Не се притеснявайте ако не разбирате кода, нататък ще обясня за какво служи всеки един таг от него.
След като сте копирали горния код в страницата си, запишете я и обновете (refresh-нете) браузъра си. Би трябвало да излезе текстът "Hi, welcome to my first webpage!", a отгоре в ляво на браузъра ви трябва да пише "My first webpage".
След като вече създадохте първия си HTML документ (и първата си уеб страница), ще ви обясня какво точно означава този код.

Както забелязвате освен <title> има още три тага - <html>, <head>, <body>. Всеки един от тях, както и <title> присъстват на две места.
Обяснението е много просто - всеки един от тези тагове, след като бъде отворен, трябва да бъде и затворен. Затварящите тагове са абсолютно същите като отварящите, с разликата, че съдържат една наклонена черта:
<html> - отварящ таг
</html> - затварящ таг

Таговете <html> и <head> са абсолютно задължителни за един уеб документ.

С тагът <html> вие указвате на браузъра че следва HTML код. Така той ще почне да го интерпретира като такъв.

Чрез тагът <head> вие въвеждате допълнителна информация, която не се съдържа пряко във вашата HTML страница. Това може да бъде допълнителна информация (като ключови думи, автор, дата на създаване, име и други) за сайта, може да бъде името на сайта (в <title> таг), както и още няколко други варианта, които са описани в други уроци.

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

Всеки таг си има атрибути, които добавят някакво значение или променят съдържанието на информацията в даден таг. В този пример нямаме тагове с атрибути, но по-нататък ще се сблъскате с тях задължително. Ето един пример за атрибут. Вземаме тага <font>. Той има няколко атрибута като size, face, color и други.

Код
<font face="verdana">Text</font>

Това ще направи текста да е с шрифт Verdana. Атрибутът е face, а неговата стойност е verdana.

Вече почнахте ли да разбирате?

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

Автор: GeorgeSG

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: GeorgeSG

Коментари

pavel4o

абе за какво служи веб паге макер? Аааа и как се добавя картинка??? 5+ за уарока

bloomy0111

а как да напрая код които може да се използва като layout в myspace?? (демек след като съм направила на фотошопа как да изглежда )

Sinnister

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

kroasana

Един съвет стига сте се занимавали с тва ами си изтеглете Macromedia Dreamweaver 8 ...Ама ако ще го правите по тоя начин урока е СУПЕР!!!!!!!!!

sonk

ами аз си я истеглих ама нищо не разбирам !

oki_1994

1 малко тапичък въпрос като си направя саит с macromedia dreamweaver 8 как да жляза в него :D как да му разбера името ????

bubsss

test

plvid76

Много ви благодаря за урокът. :(

THEGODFATHER1996.2008

<html>
<head>
<title>My first webpage</title>
</head>
<body>
<center><img src="Името на картинката (трябва да е до html файла)"></center>
</body>
</html>

neji7

Вече почнахте ли да разбирате?
-Да!
Хубаво уроче,браво!

shooky

Евала, един човек най-накрая да съветва да се почва от текстов редактор, а не от Web Page Maker, Macromedia Dreamweaver и т.н. Това е най-добрия - начин текстовия редактор. Не се лжъете от програмите, те са "по-лесни", но правят сайта ви тежък и бавен за зареждане, и освен това винаги се рекламират, било то с изображение на края или мета в head-а...

dark_man

От 2-3 месеца насам ме влекът сайтовете и тем подобни но се с готови системи а сега съм се решил да напиша собствена лична система но имам проблем !!!
Нямам нужните умения та който може да ми помогне моля да ми пише за скайп dark_man5582 :)

shooky

Забравих и да ви предупредя, ако нямате сериозно отношение към това, по-добре изобщо не се захващайте. Ако искате добър сайт трябва да го напишете на ръка, текстов редактор и яко главоблъскане, верно може да вземете и някои скриптове от интернет, но пак трябва да ги попромените. Единствено тези, които имат търпение и желание, изпитващи удоволствие от крайния резултат, те ще успеят. До колкото Macromedia Dreamweaver, Webpage Maker, Front Page и т.н. ПЪЛНА ГЛУПОСТ НЕ СТАВАТ. За начинаещ да, за опити да, но не и за сайт, който ще се пусне в интернет. По-добре седнете и понаучете html за няколко часа добро четене и опитване ще го направеите, практиката ще ви "отупа" и накрая резултатите ще са по-добри и по-добри.

dark_man

И все пак търся човек за помощ!!!
СИСТЕМАТА Е МАЛКА :) НЕ Е ТОЛКОВО СЛОЖНО НО САМ ЕНМОГА

blowr

Здравейте.. На 15 съм и 2ра година уча в ПМГ с профил информатика и английски.. чета от известно време из форумите.. и съм много надъхан на фотошоп и ме бива в рисуването.. та и искам да кандидатствам с графичен дизайн.. ако има някой който разбира и няма против да си попишем малко по скайп смисъл да ми даде някой друг съвет, ще съм благодарен :)) amo_insane ми е скайпчето.. благодаря от сега.. и да попитам как да въведа кода ? :D ( за title става въпрос )

Super ! Naistina na razbiraem za vsichki ezik ! :)))

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.