Black & White Series

HTML Tree

Structure and Format

Minimal HTML Page

<!DOCTYPE html>
<html>
  <body>
    The <b>dinosaur jumped</b> into the mud.
  </body>
</html>

HTML Markup and Tree

HTML Markup

Element

  • Tags delimit Elements:
    • element name = tag;
    • element content = everything delimited by the tag.

html Element

html element

body Element

body element

b Element

b element

Header Element <h_>

  • Document headers in levels
<h1>Level 1</h1>
<h2>Level 2</h2>
<h3>Level 3</h3>

Header Levels

Paragraph Element <p>

  • Document headers in levels
<p>paragraph 1</p>
<p>paragraph 2</p>

paragraph 1

paragraph 2

Header and Paragraph Example

<!DOCTYPE html>
<html>
  <body>
    <h1>Dinosaur Story</h1>
    <p>The <b>dinosaur jumped</b> into the mud.</p>
  </body>
</html>

Document Body Tree

Document Body Tree

Head <head>

  • Metadata block of the document
    • not displayed on the page
<!DOCTYPE html>
<html>
  <head>
    <title>Dinosaur and Mud</title>
  </head>
  <body>
    <h1>Dinosaur Story</h1>
    <p>The <b>dinosaur jumped</b> into the mud.</p>
  </body>
</html>

Document Tree

Document Tree

Videos / Tutorials

W3Schools HTML Tutorial

https://www.w3schools.com/html/

Web and Semantic Web 2015 Playlist

https://youtube.com/playlist?list=PL3JRjVnXiTBZpnuD7ZtJ3fdNsCcR5Oy7B

André Santanchè

www.ic.unicamp.br/~santanch/

Web2Learn

santanche.github.io/web2learn/