SlideShare a Scribd company logo

#1 HTML [know-how]

D
Dalibor Gogic

HTML (Hypertext Markup Language) is the basic building block of web pages. It describes and defines the content and basic layout of a web page. HTML5 is the latest version that defines additional elements, attributes, and behaviors to allow more diverse and powerful websites and applications to be built. It provides capabilities for semantics, connectivity, offline storage, multimedia, graphics, performance, device access, and styling.

Presentations & Public Speaking
1 of 48
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
Diving deep into the core of the HTML
@dalibor_gogic [object Object]
HTML (HyperText Markup Language) is the most basic building block of the Web. It describes and defines the content of a webpage along with the basic layout of the webpage.
Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/ behavior (JavaScript).
HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.
Semantics Allowing you to describe more precisely what your content is. Connectivity Communicate with the server in new and innovative ways. Offline and storage Store data on the client-side locally and operate offline more efficiently. Multimedia Making video and audio first-class citizens in the Open Web. 2D/3D graphics and effects Much more diverse range of presentation options. Performance and integration Providing greater speed optimization and better usage of computer hardware. Device access Usage of various input and output devices. Styling Letting authors write more sophisticated themes.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Sample page</title></head><body> <h1>Sample page</h1></body></html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
The Doctype <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
The Root Element <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
The <head> Element <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
The <body> Element <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
Character Encoding <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
Viewport meta tag <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
Document title <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
Content <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
This slide [is] intentionally left blank.
#1 HTML [know-how]
Nesting elements <p>Startit <strong>Centar</strong> Indjija</p> <p>Startit <strong>Centar</p> Indjija</strong> Startit Centar Indjija Startit Centar Indjija
Block versus inline elements <em>first</em><em>second</em><em>third</em> <p>fourth</p><p>fifth</p><p>sixth</p> firstsecondthird fourth fifth sixth
Empty (void) elements <img src="/logo.png"> <input type="submit" value="Send"> <br> <hr> <link> <meta> ...
Attributes <p class="error">Not found</p> <a href="https://daliborgogic.com" title="Dlbr"> Home Page </a> Not found Home Page
Boolean attributes <input type="text" disabled="disabled"> <input type="text" disabled>
Whitespace in HTML <p>Google Chrome is a fast web browser.</p> <p>Google Chrome is a fast web browser.</p> Google Chrome is a fast web browser. Google Chrome is a fast web browser.
Including special characters in HTML In HTML, the characters <, >,",' and & are special characters. They are parts of the HTML syntax itself. Literal character Character reference equivalent < &lt; > &gt; " &quot; ' &apos; & &amp;
<p>In HTML, you define a paragraph using the <p> element.</p> <p>In HTML, you define a paragraph using the &lt;p&gt; element.</p> In HTML, you define a paragraph using the element. In HTML, you define a paragraph using the <p> element.
HTML comments <p>I'm not inside a comment.</p> <!-- <p>I am commented.</p> → <!-- <p>Can't see me!.</p> <p>I am commented too!.</p> --> I'm not inside a comment.
Headings and Paragraphs <h1>The Crushing Bore</h1> <p>By Chris Mills</p> <h2>Chapter 1: The dark night</h2> <p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p> <h2>Chapter 2: The eternal silence</h2> <p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p> <h3>The specter speaks</h3> <p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
The Crushing Bore By Chris Mills Chapter 1: The dark night It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ... Chapter 2: The eternal silence Our protagonist could not so much as a whisper out of the shadowy figure ... The specter speaks Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"
Why do we need structure?
Why do we need semantics?
This is a top level heading Is this a top level heading? <h1>This is a top level heading</h1> <span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
Lists Unordered <ul> <li>Jogurt</li> <li>Eggs</li> <li>Bread</li> <li>Burek</li> </ul> ● Jogurt ● Eggs ● Bread ● Burek Ordered <ol> <li>Burek</li> <li>Jogurt</li> <li>Bread</li> <li>Eggs</li> </ol> 1. Burek 2. Jogurt 3. Bread 4. Eggs
Emphasis I am glad you weren't late. <p>I am <em>glad</em> you weren't <em>late</em>.</p> I am glad you weren't late.
Strong importance I am counting on you. Do not be late! <p>I am counting on you. <strong>Do not</strong> be late!</p> I am counting on you. Do not be late!
Italic, bold, underline… HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles. <i> Foreign words, technical terms, a thought… Börek <b> Key words, product names… Burek <u> Proper name, misspelling… Bourek
Hyperlink <p> I'm creating a link to <a href="https://daliborgogic.com/"> the Dalibor's homepage </a>. </p> I'm creating a link to the Dalibor's homepage.
Block level links <a href="https://daliborgogic.com/"> <img src="/dlbr-logo.png" alt="It's a logo that links to the Dalibor's homepage"> </a>
URLs and paths A URL, or Uniform Resource Locator is simply a string of text that defines where something is located on the Web. https://daliborgogic.com/ https://daliborgogic.com/img/logo.png ../img/logo.png ../logo.png img/logo.png logo.png
Document fragments Link to a specific part of an HTML document <p>Want to write me a letter? Use my <a href="#mail">mailing address</a>.</p> ... <h2 id="mail">Mailing address</h2> Want to write me a letter? Use my mailing address. … Mailing address
Blockquotes <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
Abbreviations <p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p> We use HTML to structure our web documents. …….. Hypertext Markup Language
Marking up contact details <address> <p>Dalibor Gogic, Indjija, RS</p> </address> <address> <p> Page written by <a href="/authors/dalibor-gogic/"> Dalibor Gogic </a>. </p> </address> Dalibor Gogic, Indjija, RS Page written by Dalibor Gogic.
Superscript and subscript <p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> Caffeine's chemical formula is C8 H10 N4 O2 .
Representing computer code <pre> $ ping daliborgogic.com PING daliborgogic.com (46.101.167.000) 56(84) bytes of data. 64 bytes from daliborgogic.com (46.101.167.000): icmp_seq=1 ttl=52 time=31.2 ms ... </pre> $ ping daliborgogic.com PING daliborgogic.com (46.101.167.000) 56(84) bytes of data. 64 bytes from daliborgogic.com (46.101.167.000): icmp_seq=1 ttl=52 time=31.2 ms ...
Marking up times and dates <!-- Standard simple date --> <time datetime="2018-05-08">08 May 2018</time> 08 May 2018
<!-- Just year and month --> <time datetime="2018-05">May 2018</time> <!-- Just month and day --> <time datetime="05-08">08 May</time> <!-- Just time, hours and minutes --> <time datetime="19:30">19:30</time> <!-- You can do seconds and milliseconds too! --> <time datetime="19:30:01.856">19:30:01.856</time> <!-- Date and time --> <time datetime="2018-05-08T19:30">7.30pm, 08 May 2018</time> <!-- Date and time with timezone offset--> <time datetime="2018-05-08T19:30+01:00">7.30pm, 08 May 2018 is 8.30pm in Indjija</time> <!-- Calling out a specific week number--> <time datetime="2018-W04">The fourth week of 2018</time>
This slide [is] intentionally left blank.

More Related Content

What's hot (19)

PPTX
Web designing (1) - Html Basic Codding
Rabiul robi
 
PPTX
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
PDF
Html css workshop, lesson 0, how browsers work
Albino Tonnina
 
PDF
An Introduction To HTML5
Robert Nyman
 
PPTX
Introduction to HTML5
Terry Ryan
 
PPTX
Elements of html powerpoint
Anastasia1993
 
PDF
CSS-3 Course Slide
BoneyGawande
 
PDF
HTML and CSS crash course!
Ana Cidre
 
PPT
Introduction to Html
Joni
 
PDF
HTML5 Essentials
Marc Grabanski
 
PDF
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
Michaela Lehr
 
PDF
HTML 5 Step By Step - Ebook
Scottperrone
 
PPTX
uptu web technology unit 2 html
Abhishek Kesharwani
 
PDF
HTML CSS Best Practices
hoctudau
 
PDF
Findability Bliss Through Web Standards
Aarron Walter
 
PDF
Frontend for developers
Hernan Mammana
 
PPTX
Html and Xhtml
Chhom Karath
 
KEY
Semantic HTML5
Terry Ryan
 
PPT
Web forms and html lecture Number 2
Mudasir Syed
 
Web designing (1) - Html Basic Codding
Rabiul robi
 
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
Html css workshop, lesson 0, how browsers work
Albino Tonnina
 
An Introduction To HTML5
Robert Nyman
 
Introduction to HTML5
Terry Ryan
 
Elements of html powerpoint
Anastasia1993
 
CSS-3 Course Slide
BoneyGawande
 
HTML and CSS crash course!
Ana Cidre
 
Introduction to Html
Joni
 
HTML5 Essentials
Marc Grabanski
 
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
Michaela Lehr
 
HTML 5 Step By Step - Ebook
Scottperrone
 
uptu web technology unit 2 html
Abhishek Kesharwani
 
HTML CSS Best Practices
hoctudau
 
Findability Bliss Through Web Standards
Aarron Walter
 
Frontend for developers
Hernan Mammana
 
Html and Xhtml
Chhom Karath
 
Semantic HTML5
Terry Ryan
 
Web forms and html lecture Number 2
Mudasir Syed
 

Similar to #1 HTML [know-how] (20)

PPT
Intr to-html-xhtml-1233508169541646-3
bluejayjunior
 
PPTX
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 
PPTX
Html part 2
lokenra
 
PPT
Html basics
mcatahir947
 
PPT
Eye catching HTML BASICS tips: Learn easily
shabab shihan
 
DOCX
Html.docx
Noman Ali
 
PPTX
HTML Fundamentals
BG Java EE Course
 
PPTX
3 1-html-fundamentals-110302100520-phpapp02
Aditya Varma
 
PPTX
Additional HTML
Doeun KOCH
 
PPTX
HTML Basic, CSS Basic, JavaScript basic.
Beqa Chacha
 
PDF
If you know nothing about HTML, this is where you can start !!
Dr Sukhpal Singh Gill
 
PPT
HTML 5
Doncho Minkov
 
PPT
Html
Alisha Kalidhar
 
PPTX
Web Development PPT from Chd University.
akshitp2704
 
PPTX
Frontend Devlopment internship batch 2024.pptx
bankheleom
 
PPTX
Frontend Devlopment internship batch 2024-2.pptx
bankheleom
 
PPTX
4. html css-java script-basics
Nikita Garg
 
PPTX
4. html css-java script-basics
Minea Chem
 
PPTX
POLITEKNIK MALAYSIA
Aiman Hud
 
PPTX
4. html css-java script-basics
xu fag
 
Intr to-html-xhtml-1233508169541646-3
bluejayjunior
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 
Html part 2
lokenra
 
Html basics
mcatahir947
 
Eye catching HTML BASICS tips: Learn easily
shabab shihan
 
Html.docx
Noman Ali
 
HTML Fundamentals
BG Java EE Course
 
3 1-html-fundamentals-110302100520-phpapp02
Aditya Varma
 
Additional HTML
Doeun KOCH
 
HTML Basic, CSS Basic, JavaScript basic.
Beqa Chacha
 
If you know nothing about HTML, this is where you can start !!
Dr Sukhpal Singh Gill
 
HTML 5
Doncho Minkov
 
Html
Alisha Kalidhar
 
Web Development PPT from Chd University.
akshitp2704
 
Frontend Devlopment internship batch 2024.pptx
bankheleom
 
Frontend Devlopment internship batch 2024-2.pptx
bankheleom
 
4. html css-java script-basics
Nikita Garg
 
4. html css-java script-basics
Minea Chem
 
POLITEKNIK MALAYSIA
Aiman Hud
 
4. html css-java script-basics
xu fag
 
Ad

More from Dalibor Gogic (6)

PDF
#4 HTML & CSS [know-how]
Dalibor Gogic
 
PDF
#3 HTML & CSS [know-how]
Dalibor Gogic
 
PDF
#2 Html [know-how]
Dalibor Gogic
 
PDF
Love at first Vue
Dalibor Gogic
 
PDF
May The Nodejs Be With You
Dalibor Gogic
 
PDF
Automatizacija u Front-end razvojnom procesu
Dalibor Gogic
 
#4 HTML & CSS [know-how]
Dalibor Gogic
 
#3 HTML & CSS [know-how]
Dalibor Gogic
 
#2 Html [know-how]
Dalibor Gogic
 
Love at first Vue
Dalibor Gogic
 
May The Nodejs Be With You
Dalibor Gogic
 
Automatizacija u Front-end razvojnom procesu
Dalibor Gogic
 
Ad

Recently uploaded (20)

PPTX
Bob Stewart Humble Obedience 07-13-2025.pptx
FamilyWorshipCenterD
 
PPTX
2025-07-13 Abraham 07 (shared slides).pptx
Dale Wells
 
PPTX
Inspired by VeinSense: Supercharge Your Hackathon with Agentic AI
ShubhamSharma2528
 
PDF
Generalization predition MOOCs - Conference presentation - eMOOCs 2025
pmmorenom01
 
PPTX
Food_and_Drink_Bahasa_Inggris_Kelas_5.pptx
debbystevani36
 
PDF
FINAL ZAKROS - UNESCO SITE CANDICACY - PRESENTATION - September 2024
StavrosKefalas1
 
PPTX
presentation on legal and regulatory action
raoharsh4122001
 
PPT
Wireless Communications Course lecture1.ppt
abdullahyaqot2015
 
PDF
The Family Secret (essence of loveliness)
Favour Biodun
 
PPTX
BARRIERS TO EFFECTIVE COMMUNICATION.pptx
shraddham25
 
PPTX
A brief History of counseling in Social Work.pptx
Josaya Injesi
 
PPTX
Blended Family Future, the Mayflower and You
UCG NWA
 
PPTX
AI presentation for everyone in every fields
dodinhkhai1
 
PDF
CHALLENGIES FACING THEOLOGICAL EDUCATION IN NIGERIA: STRATEGIES FOR IMPROVEMENT
PREVAILERS THEOLOGICAL SCHOOL FCT ABUJA
 
PPTX
677697609-States-Research-Questions-Final.pptx
francistiin8
 
PDF
Cloud Computing Service Availability.pdf
chakrirocky1
 
PPTX
Presentationexpressions You are student leader and have just come from a stud...
BENSTARBEATZ
 
PDF
Medical Technology Corporation: Supply Chain Strategy
daretruong
 
PDF
What should be in a Leadership and Motivation Plan?
Writegenic AI
 
PPTX
some leadership theories MBA management.pptx
rkseo19
 
Bob Stewart Humble Obedience 07-13-2025.pptx
FamilyWorshipCenterD
 
2025-07-13 Abraham 07 (shared slides).pptx
Dale Wells
 
Inspired by VeinSense: Supercharge Your Hackathon with Agentic AI
ShubhamSharma2528
 
Generalization predition MOOCs - Conference presentation - eMOOCs 2025
pmmorenom01
 
Food_and_Drink_Bahasa_Inggris_Kelas_5.pptx
debbystevani36
 
FINAL ZAKROS - UNESCO SITE CANDICACY - PRESENTATION - September 2024
StavrosKefalas1
 
presentation on legal and regulatory action
raoharsh4122001
 
Wireless Communications Course lecture1.ppt
abdullahyaqot2015
 
The Family Secret (essence of loveliness)
Favour Biodun
 
BARRIERS TO EFFECTIVE COMMUNICATION.pptx
shraddham25
 
A brief History of counseling in Social Work.pptx
Josaya Injesi
 
Blended Family Future, the Mayflower and You
UCG NWA
 
AI presentation for everyone in every fields
dodinhkhai1
 
CHALLENGIES FACING THEOLOGICAL EDUCATION IN NIGERIA: STRATEGIES FOR IMPROVEMENT
PREVAILERS THEOLOGICAL SCHOOL FCT ABUJA
 
677697609-States-Research-Questions-Final.pptx
francistiin8
 
Cloud Computing Service Availability.pdf
chakrirocky1
 
Presentationexpressions You are student leader and have just come from a stud...
BENSTARBEATZ
 
Medical Technology Corporation: Supply Chain Strategy
daretruong
 
What should be in a Leadership and Motivation Plan?
Writegenic AI
 
some leadership theories MBA management.pptx
rkseo19
 

#1 HTML [know-how]

  • 1. Diving deep into the core of the HTML
  • 3. HTML (HyperText Markup Language) is the most basic building block of the Web. It describes and defines the content of a webpage along with the basic layout of the webpage.
  • 4. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/ behavior (JavaScript).
  • 5. HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.
  • 6. Semantics Allowing you to describe more precisely what your content is. Connectivity Communicate with the server in new and innovative ways. Offline and storage Store data on the client-side locally and operate offline more efficiently. Multimedia Making video and audio first-class citizens in the Open Web. 2D/3D graphics and effects Much more diverse range of presentation options. Performance and integration Providing greater speed optimization and better usage of computer hardware. Device access Usage of various input and output devices. Styling Letting authors write more sophisticated themes.
  • 7. <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Sample page</title></head><body> <h1>Sample page</h1></body></html>
  • 8. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
  • 9. The Doctype <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
  • 10. The Root Element <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
  • 11. The <head> Element <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
  • 12. The <body> Element <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
  • 13. Character Encoding <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
  • 14. Viewport meta tag <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
  • 15. Document title <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
  • 16. Content <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sample page</title> </head> <body> <h1>Sample page</h1> </body> </html>
  • 17. This slide [is] intentionally left blank.
  • 19. Nesting elements <p>Startit <strong>Centar</strong> Indjija</p> <p>Startit <strong>Centar</p> Indjija</strong> Startit Centar Indjija Startit Centar Indjija
  • 20. Block versus inline elements <em>first</em><em>second</em><em>third</em> <p>fourth</p><p>fifth</p><p>sixth</p> firstsecondthird fourth fifth sixth
  • 21. Empty (void) elements <img src="/logo.png"> <input type="submit" value="Send"> <br> <hr> <link> <meta> ...
  • 22. Attributes <p class="error">Not found</p> <a href="https://daliborgogic.com" title="Dlbr"> Home Page </a> Not found Home Page
  • 23. Boolean attributes <input type="text" disabled="disabled"> <input type="text" disabled>
  • 24. Whitespace in HTML <p>Google Chrome is a fast web browser.</p> <p>Google Chrome is a fast web browser.</p> Google Chrome is a fast web browser. Google Chrome is a fast web browser.
  • 25. Including special characters in HTML In HTML, the characters <, >,",' and & are special characters. They are parts of the HTML syntax itself. Literal character Character reference equivalent < &lt; > &gt; " &quot; ' &apos; & &amp;
  • 26. <p>In HTML, you define a paragraph using the <p> element.</p> <p>In HTML, you define a paragraph using the &lt;p&gt; element.</p> In HTML, you define a paragraph using the element. In HTML, you define a paragraph using the <p> element.
  • 27. HTML comments <p>I'm not inside a comment.</p> <!-- <p>I am commented.</p> → <!-- <p>Can't see me!.</p> <p>I am commented too!.</p> --> I'm not inside a comment.
  • 28. Headings and Paragraphs <h1>The Crushing Bore</h1> <p>By Chris Mills</p> <h2>Chapter 1: The dark night</h2> <p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p> <h2>Chapter 2: The eternal silence</h2> <p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p> <h3>The specter speaks</h3> <p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
  • 29. The Crushing Bore By Chris Mills Chapter 1: The dark night It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ... Chapter 2: The eternal silence Our protagonist could not so much as a whisper out of the shadowy figure ... The specter speaks Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"
  • 30. Why do we need structure?
  • 31. Why do we need semantics?
  • 32. This is a top level heading Is this a top level heading? <h1>This is a top level heading</h1> <span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
  • 33. Lists Unordered <ul> <li>Jogurt</li> <li>Eggs</li> <li>Bread</li> <li>Burek</li> </ul> ● Jogurt ● Eggs ● Bread ● Burek Ordered <ol> <li>Burek</li> <li>Jogurt</li> <li>Bread</li> <li>Eggs</li> </ol> 1. Burek 2. Jogurt 3. Bread 4. Eggs
  • 34. Emphasis I am glad you weren't late. <p>I am <em>glad</em> you weren't <em>late</em>.</p> I am glad you weren't late.
  • 35. Strong importance I am counting on you. Do not be late! <p>I am counting on you. <strong>Do not</strong> be late!</p> I am counting on you. Do not be late!
  • 36. Italic, bold, underline… HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles. <i> Foreign words, technical terms, a thought… Börek <b> Key words, product names… Burek <u> Proper name, misspelling… Bourek
  • 37. Hyperlink <p> I'm creating a link to <a href="https://daliborgogic.com/"> the Dalibor's homepage </a>. </p> I'm creating a link to the Dalibor's homepage.
  • 38. Block level links <a href="https://daliborgogic.com/"> <img src="/dlbr-logo.png" alt="It's a logo that links to the Dalibor's homepage"> </a>
  • 39. URLs and paths A URL, or Uniform Resource Locator is simply a string of text that defines where something is located on the Web. https://daliborgogic.com/ https://daliborgogic.com/img/logo.png ../img/logo.png ../logo.png img/logo.png logo.png
  • 40. Document fragments Link to a specific part of an HTML document <p>Want to write me a letter? Use my <a href="#mail">mailing address</a>.</p> ... <h2 id="mail">Mailing address</h2> Want to write me a letter? Use my mailing address. … Mailing address
  • 41. Blockquotes <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
  • 42. Abbreviations <p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p> We use HTML to structure our web documents. …….. Hypertext Markup Language
  • 43. Marking up contact details <address> <p>Dalibor Gogic, Indjija, RS</p> </address> <address> <p> Page written by <a href="/authors/dalibor-gogic/"> Dalibor Gogic </a>. </p> </address> Dalibor Gogic, Indjija, RS Page written by Dalibor Gogic.
  • 44. Superscript and subscript <p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> Caffeine's chemical formula is C8 H10 N4 O2 .
  • 45. Representing computer code <pre> $ ping daliborgogic.com PING daliborgogic.com (46.101.167.000) 56(84) bytes of data. 64 bytes from daliborgogic.com (46.101.167.000): icmp_seq=1 ttl=52 time=31.2 ms ... </pre> $ ping daliborgogic.com PING daliborgogic.com (46.101.167.000) 56(84) bytes of data. 64 bytes from daliborgogic.com (46.101.167.000): icmp_seq=1 ttl=52 time=31.2 ms ...
  • 46. Marking up times and dates <!-- Standard simple date --> <time datetime="2018-05-08">08 May 2018</time> 08 May 2018
  • 47. <!-- Just year and month --> <time datetime="2018-05">May 2018</time> <!-- Just month and day --> <time datetime="05-08">08 May</time> <!-- Just time, hours and minutes --> <time datetime="19:30">19:30</time> <!-- You can do seconds and milliseconds too! --> <time datetime="19:30:01.856">19:30:01.856</time> <!-- Date and time --> <time datetime="2018-05-08T19:30">7.30pm, 08 May 2018</time> <!-- Date and time with timezone offset--> <time datetime="2018-05-08T19:30+01:00">7.30pm, 08 May 2018 is 8.30pm in Indjija</time> <!-- Calling out a specific week number--> <time datetime="2018-W04">The fourth week of 2018</time>
  • 48. This slide [is] intentionally left blank.