#1 HTML [know-how]

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>
</head>
<body>
</body>
</html>

The Root Element
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

The <head> Element
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

The <body> Element
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Character Encoding
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Viewport meta tag
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Document title
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Content
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

This slide [is] intentionally left blank.

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
< <
> >
" "
' '
& &

<p>In HTML, you define a paragraph using the <p> element.</p>
<p>In HTML, you define a paragraph using the <p> 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>

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!"

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><blockquote></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

<time datetime="2018-05-08">08 May 2018</time>
08 May 2018

<time datetime="2018-05">May 2018</time>

<time datetime="05-08">08 May</time>

<time datetime="19:30">19:30</time>

<time datetime="19:30:01.856">19:30:01.856</time>

<time datetime="2018-05-08T19:30">7.30pm, 08 May 2018</time>

<time datetime="2018-05-08T19:30+01:00">7.30pm, 08 May 2018 is 8.30pm in Indjija</time>

<time datetime="2018-W04">The fourth week of 2018</time>

#1 HTML [know-how]

Recommended

More Related Content

What's hot (19)

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

More from Dalibor Gogic (6)

Recently uploaded (20)

#1 HTML [know-how]