HTML

   Здравейте, аз съм Боби от WebPandas и  ще ви запозная с основите на Уеб дизайна, а конкретно днес ще говорим за HTML. А какво е HTML?


    HTML, съкратено от Hypertext Markup Language е езикът, който стои в основата на всеки уебсайт. 


    Този език работи чрез тагове. Таговете представляват отделни възлови елементи в основния език.


Едни от основните видове тагове са meta таговете, но тях ще ги разгледаме малко по-късно в следващите уроци. 

Най-добре е първо да разберете какво е таг. Тагът представлява основният елемент, използван в HTML.     Какво означава това?

Това означава, че таговете съдържат информацията, която браузърът преобразува в уеб страница.             Нека започнем с няколко основни тага :
<!DOCTYPE html> - този таг се поставя в началото на всяка страница, преди всички други, който "казва" на браузъра коя версия на HTML ще използваме.
<html>  *</html> - началото и краят на един html документ.                                       * - повечето тагове освен отварящ таг имат и затварящ таг, който съдържа стартиращия таг и наклонена черта.
<head></head> - в този таг може да се съдържат заглавието на страницата, което се обозначава с таг : (<title></title>); meta тагове; линк тагове и скриптове , които също ще разгледаме малко по-късно в уроците.

<title></title> - този таг представлява заглавието на страницата (той е препоръчителен**).

** - Добра практика е да се наименува всяка страница, която направите.

Текстът, който поставите в <title> тага ще се възпроизведе в адрес бара или така наречения таб на страницата горе в браузъра, който използвате. <title> също така има и други функции, но за тях скоро :)


<meta charset="UTF-8"> - това е първият meta tag, който ще изучим. Той спомага на HTML езика да възпроизведе символи на кирилица и други специални такива. Той, както и всички останали meta тагове, се поставя в <head></head> тага.
<body></body>- тук се поставят всички тагове, които се възпроизвеждат визуално на страницата.                             <div></div> - най-универсалният таг, служи за групиране на тагове.                    <p></p> - този таг представлява текст в параграф.                                                      <span></span> - вътрешен таг за текст  *** - след CSS уроците ще доуточним.

<em></em> - този таг прави текстът наклонен (italic)

<strong></strong> - този таг прави текстът удебелен (bold)

<ul></ul> - unordered list - неномириран лист, в който елементите се показват с точки (bullets). Всеки елемент от листа се декларира чрез <li></li>   тага, (съкратено от list item)            
<ol></ol> - ordered list - лист , в който елементите са показват с цифри (numbers). Всеки елемент от листа се декларира чрез        <li></li> .


<a></a> - това е тагът, в който текстът вътре е линк към уебсайт. <a> тагът има атрибути, които са:

- <a href="http://facebook.com"></a> -  href атрибута представлява линк, към който текстът обграждан от тагът <a> води.
- <а href="http://facebook.com" target="_blank"> </a> - този атрибут кара линкът да се отваря не на същата страница, на която сме, а на нова.














<img> - този таг служи за вкарване на изображение в страницата
чрез атрибута src съкратено от source <img src="https://www.google.bg/images/srpr/logo11w.png" > . Визуализираме снимката чрез код.                                    Други атрибути на <img> тага са:

- <img src="..." title="Logo"> - заглавието на снимката, което се изобразява, когато посочим снимката с мишката си.                 - <img src="..." title="Logo" alt="The Logo"> -  този атрибут е алтернативния текст, които ще се покаже ако снимката не успее да се  зареди в браузъра.



Въпроси и отговори :)


 

Домашно

Напишете на HTML всички основни тагове и се опитайте да изобразите една ваша снимка от facebook чрез <img> тага в HTML. 



Text Editors - това са вид програми, които се използват за редактиране на текстови файлове.
Текстовите редактори често са снабдени с операционни системи или пакети за разработка на софтуер, и могат да бъдат използвани, за да се променят/конфигурират файлове и език за програмиране, изходният код (source code).
Source Code - представлява всяка колекция от компютърни инструкции написани на човешко-четящ се компютърен текст - обикновено като чист текст.
Видове Текстови Редактори :
  • Microsoft Word
  • Sublime
  • Notepad++

В нашият курс ние ще използваме Notepad++ , защото е най-подходящ за въвеждане и програмиране на изходен код и програмен език - HTML и други.

За да можете да изпълните проектите, които ви задаваме вие ще трябва да го използвате.
Можете да си го изтеглите безплатно от тук.

Much coding.
Such text editor.
So amazed.
Wow.

Примери:

<head></head> -> <title>Basic HTML document</title>

Тайтълът, който се намира в <head> тага се изобразява тук:


<p>This is text in paragraph</p> - Текстът в параграфа се изобразява ето така -



<span>and this one is in span tag</span> - Така се изобразява един <span> таг -




<em>This</em> + <strong>text</strong> - Така се изобразяват <em> и <strong> таговете -


<ul></ul> - Така се изобразява unordered list -



<ol></ol> - Така се изобразява ordered list -

 



<a href="http://facebook.com/webpandasland" target="_blank">Facebook Link to my Page</a> - Така се изобразява линк към страница :


<img src="http://goo.gl/EvNq5Z" title="Baby Panda" alt="Baby Panda from Web Pandas team" /> - Така се изобразява снимка в HTML :





HTML Presentation

By Borislav Nikolov

HTML Presentation

  • 655