HTML елемент: P

Употреба: когато искаме да представим съдържание, отделено в параграф.

Атрибути: няма задължителни. В HTML5 не се допуска използването на атрибута align. Допустими са единствено глобалните HTML атрибути.

Справочник: w3schools: HTML p Tag

				
Текст в параграф 1
				
Текст в параграф 2
			

Текст в параграф 1

Текст в параграф 2

Браузърите слагат определено разстояние между параграфите, но това лесно можем да променим със CSS.

VSCode notes

VSCode позволява да генерираме бързо lorem ipsum текст, като напишем lorem и натиснем TAB.

Когато дължината на текста надхвърля широчината на VSCode Editor Area, можем да укажем на VSCode да го "обхване" (wrap) във видимата част на редактора като активираме командната палитра CTRL+SHIFT+P, въведем wrap и изберем командата View: Toggle Word Wrap

HTML елементи: H1 - H6

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

SEO: Имат голяма тежест при структурирането и индексирането на страницата от търсещите системи. В тях е добре да участват ключовите думи за страницата.

UX: Подпомагат потребителя да навигира и възприема бързо съдържанието на страницата.

Справочник: w3schools: HTML h1-h6 Tags

HTML елементи H1 - H6

			
Заглавие 1
			
Заглавие 2
			
Заглавие 3
			
Заглавие 4
			
Заглавие 5
			
Заглавие 6
		

HTML елемент: HR

В HTML5 използваме хоризонтална черта за да отделим съдържанието тематично.

Атрибути: всички специфични за HR атрибути са свързани с оформлението, и не се препоръчва да се използват в HTML5.

Справочник: w3schools: HTML hr Tag

HTML елементи: I,EM

i: - маркира текст, който да се представи чрез курсив.

"The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text" - HTML5 W3C Recommendation: The i element

em - за текст, който носи семантично ударение.

"The em element represents stress emphasis of its contents." - HTML5 W3C Recommendation: The em element

HTML елементи: B,STRONG

b - текст, който да се представи почернен.

"The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede" - HTML5 W3C Recommendation: The b element

strong - за текст, който носи важен смисъл.

"The strong element represents strong importance, seriousness, or urgency for its contents." - HTML5 W3C Recommendation: The strong element

Пример

			
При закупуване на пералня модел XYZ0101 клиентът получава 5% отстъпка

			
"Внимание! Внимание! Внимание! Всички роботи да се придвижат към балната зала". Колко хубаво би било да бъда сега на плажа - помисли си той, докато тътреше колелата си по пода.
		

Браузърите изобразяват текста на един ред, докато има място на реда, независимо от това дали в текста има символи за нов ред.

Всички последователни спейсове, табове, символи за нов ред и пр. (т.нар. Whitespace character ) съществуващи в текста се представят от браузърите като един единствен спейс.

Повече от един спейс може да изобразим чрез използването на HTML Entity:  

Разбира се, когато изскаме да визуализираме няколко спейса за по-голямо разстояние между текст, се препоръчва да се използва CSS, а не чрез:     

Съществуват и други HTML Entities, чрез които можем да укажем да се рендерират буквално служебни символи като '<' (<) и '>' (>) а да не се интерпретират като заграждащи тагове символи.

See the Pen White-spaces Collapsing and HTML Entities by Iva Popova (@webdesigncourse) on CodePen.

HTML елемент: BR

Ако желаем браузъра да постави нов ред - то използваме елемента BR. Той няма съдържание и се състои само от отварящия таг:

Справочник: w3schools: HTML br Tag

				
Първи ред.
Втори ред.
			

Първи ред.
Втори ред.

HTML елемент: PRE

Текстът в елемент PRE се изобразява буквално, както е въведен в кода. Т.е. запазват се въведените спейсове и символи за нов ред.

Обикновено се изобразява със fixed-width шрифт.

Справочник: w3schools: HTML pre Tag

			

				Този     текст    ще   се
						представи

						  така,
				както е въведен в кода.

			
		

Изпробвайте и вижте сами резултата от горния примерен код!

HTMl елементи small и mark

W3schools: HTML small Tag

W3schools: HTML mark Tag

			Small text
			Marked text
		

HTMl елементи del и ins

W3schools: HTML del Tag

W3schools: HTML ins Tag

			deleted text
			inserted text
		

HTMl елементи sub и sup

W3schools: HTML sub Tag

W3schools: HTML sup Tag

			subscripted text
			normal text
			supscripted text
		

Още HTMl елементи

			A piece of computer code

			Sample output from a computer program

			Keyboard input

			Variable

		

Структуриране на директориите и файловете

Условията на задачите са дадени детайлно в следвашите слайдове. Но преди да започнете с кода, е важно да създадете правилно директориите и файловете в които ще работите.

Работете в папка HW със следната структура:

			HW/
			├── images
			│   └── IvaPopova.png
			└── pages
				├── CV.html
				└── personalPage.html
		

Условие

Да се състави валидна HTML5 страница, в която се представя информация за вас (или за някоя фиктивна личност).

Целта е да структурирате правилно съдържанието, като подберете правилните HTM елементи.

KAK ще изглежда вашата страница, няма значение, за сега.

Съдържанието е изцяло според вашия вкус и идеи, но то трябва да съдържа минимум секциите, дадени на следващия слайд.

Примерно (минимално) съдържание

За мен (тук бихте могли да сложите отделни под-секции, например:)

образование

интереси/хоби

домашни любимци

и каквото още ви хрумне

Какво очаквам от курса по HTML/CSS/JS

Какъв курсов проект бих желал/а да мога да реализирам до края на курса.

Защо записах курса към ProgressBG (или: откъде разбрах за курса)

Условие

Да се състави валидна HTML5 страница с ваше CV.

Целта е да структурирате правилно съдържанието, като подберете правилните HTML елементи.

KAK ще изглежда вашето CV, няма значение, за сега.

Примерно (минимално) съдържание

Aко не жалаете да работите върху ваше CV, използвайте като пример следното съдържание: Ivan Ivanov CV

Не забравяйте, важно е единствено СЪДЪРЖАНИЕТО!

След като приключим с темите за CSS, същото CV би могло да изглежда така: Ivan Ivanov CV