HTML : Първи стъпки (Създаване на уеб страница)

Реших да драсна няколко реда, за това какво всъщност учим като начало по дисциплината
„Интернет приложение“. :))

Но преди това да напиша, че този сайт(който е просто няколко файла и картинки)
трябва да е качен на host сървър.
Хост сървъра е компютър, който работи денонощно и всички които искат да видят вашия сайт се свързват с него и разглеждат HTML файловете ви.(Сайта е съставен от HTML файлове)
В един от следващите уроци ще напиша как се качват файловете на безплатен HOSTserver (примерно hit.bg).

Ето какво е нужно за да си направите сайт:
1.Създавате един файл, написан на езика HTML(което не е трудно).
2.Качвате файла на host server.
И вече ще си имате сайт с една страница.
После създавате още една HTML страница и ги свързвате двете с линк.
И така докато не станат примерно 100 страници.
Линковете служат за връзка между уеб страниците.

Какво е HTML?
Това е компютърен език, разбираем за уеб браузърите.
Достатъчно е този, който ще разглежда вашия документ
да има интернет и браузър (Internet Explorer, Opera или Firefox) .

HTML(Hypertext Markup Language) осигурява и механизмите за свързване(линкуване) между документите.

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

Таг означава - специален HTML код, който е ограден в ъглови скоби.
Използва се задаване на структурата и формата на уеб страницата.
Може с тагове да направите текста удебелен, да го оцветите в червено или в друг цвят
и още хиляди неща.
Чрез таговете се създават линкове,таблици и се поставят картинки, снимки и анимации на което си изберете
място на вашата уеб страница.
Има отварящи и затварящи тагове.
Ето таг за удебеляване на текст <b> и неговия затварящ таг </b>.
С първия показваме откъде да започне удебеляването на текста а с втория къде свършва.
След затварящия таг останалия текст ще е не удебелен.

Да създадем първата ви уеб страница.

Та ето стъпка по стъпка какво трябва да направите:

Пускате си windows-a. 🙂
На десктопа кликвате с десния бутон на мишката и стартирате notepad .
Ето как изглежда кода на една уеб страница:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>TEST</title>
</head>
<body >
Това е моята първа уебстраница.
<br>
Казвам се Бойко.
<br>
Търся си работа, която да е свързана с
<br>
журналисти, телевизия и интервюта.
<br>

</body>
</html>

След като напишете този код в notepad документа, от менюто избирате file->Save as..->
и в полето file name: пишете test.html
Така създадохте html документ.
Ако искате да видите и редактирате кода,
стартирайте файла и трябва да видите това.
Изберете от менюто view->source и ще можете да разглеждате кода и да го редактирате.
ТАка може да разгледате кода и на чужди уеб страници.
За човек, който не познава HTML е трудно да разбере защо му е нужно толкова писане за да
накара уеб браузъра да напише няколко реда текст.

Започвам да обяснявам всеки ред и ще стане ясно.
Първия ред на кода е:

<html>

Този таг идентифицира документа като HTML(и без него браузъра ще се сети, че е HTML ама карай).
Накрая на кода ще видите и затварящия таг

Ето и заглавната част на документа:

<head> ->идентифицира заглавната част на документа
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> -> този ред е задължителен, ако искаме съдържанието на уеб страницата да е на кирилица.
Може и UTF-8
<title>TEST</title> -> заглавието на HTML документа
</head>

Ето и тялото :

<body > ->
Това е моята първа уебстраница.
<br> -> това е таг за нов ред(без него целия текст ще излезе на един ред)
Казвам се Бойко.
<br>
Търся си работа, която да е свързана с
<br>
журналисти, телевизия и интервюта.
<br>

</body>

Ако публикувате тази уеб страница в интернет посетителите ще я виждат така:

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

Не е много добре нали.
Хайде да е удебелен шрифта малко на името Бойко.
За целта заграждаме думата Бойко с таговете и .
Ако искате целия текст да е син.
Заграждате текста с таговете и затварящия

Ето как ще изглежда кода:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>TEST</title>
</head>
<body >
<font color="blue">
Това е моята първа уебстраница.
<br>
Казвам се <b>Бойко</b>.
<br>
Търся си работа, която да е свързана с
<br>
журналисти, телевизия и интервюта.
<br>
</font>
</body>
</html>

А ето какво ще видят посетителите:

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

Не знам дали е по добре, ама поне е шарено.
А както виждате името изпъква, защото е затворено между таговете(<b> и </b>), които удебеляват шрифта му.
Ако искате освен да ги удебелите и да ги уголемите трябва да затворите текста на името и в таговете
<big> и </big>.

Казвам се <big><b>Бойко</b></big>.

Името ще стане по голямо и едновременно удебелено в сравнение с другия текст.

А сега идва и момента да сложите и снимка.

За да поставите снимка тя трябва да е файл с формат .jpg,.gif или .png

Този файл трябва да е в една и съща папка заедно с уеб страницата или ако не е трябва да се опише правилно пътя до снимката спрямо уеб страницата.
Аз ще използвам снимка, която ще се казва boiko.jpg, защото формат .jpg в най- добър за снимки.

Ето как ще изглежда кода:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>TEST</title>
</head>
<body >
<font color="blue">
Това е моята първа уебстраница.
<br>
Казвам се <b>Бойко</b>.
<br>
Търся си работа, която да е свързана с
<br>
журналисти, телевизия и интервюта.
<br>
Ето и моя снимка (като млад)
<br>
</font>
<img src="boiko.jpg">
</body>
</html>

img е тага, който поставя изображението в уеб страницата, а aтрибута src показва пътя до файла boiko.jpg

В нашия случай и двата файла(test.html и boiko.jpg) са в една папка (директория).

Ето какво ще видят посетителите:

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

Ето и моя снимка (като млад)

Какво ще кажете.По добре е, нали?
Вече може и да го вземат на работа…

А сега е момента да сменим и фона на уеб страницата за да има по голям ефект.
Taгa <body> го заменяме с <body bgcolor="black"> и фона ще стане черен.

За да видите завършената страница натъснете тук.

На черен фон, сини букви не вървят ама вие може да смените цвета с бял или сив.
За да го направите сив променяте <font color="blue"> на <font color="gray"> или на
<font color="#808080">.

#808080 е RGB стойността на цвета gray.
Не всички цветове може да се задават със текст red,blue,black или gray.
Има милиони цветове, но само основните цветове може да се задават с дума.
Останалите се задават с RGB цвят.

Ако искаме да има връзка(link)между две уебстраници ето пример:
Създаваме два html файла.
Първия ще има следния код:

<html>
<head>
<title>page1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<body>
Това е page1.html<br>
Натиснете <a href="page2.html"> тук </a> за да видите страницата page2.html
</body>
</html>

Само думата тук е активна(link), тъй като само тя е затворена
между таговете <a href="page2.html"> и </a>.
Така създадохме линк към страницата page2.html
А ето и кода на page2.html:

<html>
<head>
<title>page2</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<body>
Това е page2.html<br>
Натиснете <a href="page1.html"> тук </a> за да се върнете на page1.html
</body>
</html>

В случая page1.html и page2.html, трябва да е в една и същата директория.
Така свързахте две уебстраници и от едната ще може да прехвърлите посетителя в другата.
Ако напишете кода по следния начин:

Натиснете <a href="http://web-tourist.net"> тук</a>

Ще се появи линк,който ще препраща посетителите към интернет адреса http://web-tourist.net .
Ето и нагледно какво ще се появи:

Натиснете тук

Щом натиснете върху линка ще ви препрати към сайта.
Така може да създавате линкове към чужди и свои документи.