Part 1: HTML basics

Presented by

Agenda

  • What is/Why HTML?
  • HTML Syntax
  • Constructing a page and viewing it in-browser (Demo)
  • Resources
  • Question time

What is HTML?

  • HTML Stands for (H)yper(T)ext (M)arkup (L)anguage
  • Used for describing the structure/layout of a web page
  • Markup Language, not a programming language
    • Contains no logic. Static, What you see is what you get (WYSIWYG)
    • Simply used as a blueprint for web browsers
  • Lightweight and Descriptive composition of different content

Why HTML?

  • In 1993, Internet Engineering Task Force (IETF) defined it
  • Due to competing interests, the World Wide Web Consortium (W3C) has maintained it since 1996
  • Became an international standard in 2000

Hello, HTML


<!doctype html>
<html>
  <head>
    <title>Hello, HTML!</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>
	    

Commonly used elements and usage

Element Description Usage
<html> Begins an HTML page.
<html>
  <head></head>
  <body></body>
</html>
<body> Contains visible page content
<body>Hello World!</body>
<head> Contains page meta content
<head>
  <title>
    Hello, I'm a title
  </title>
</head>
<title> Title of page that shows in tabs and in searches See above

Elements and usage (cont)

Element Description Usage
<p> A paragraph
<p>I'm in a paragraph!</p>
<div> A block of content, text or html. Acts as divider.
<div>
  Just some raw text...
  <p>Paragraph Text</p>
</div>
<div>
  Text on new line
</div>
<span> A block of content, text or html. Fits inline.
<span>
  First text in row
</span>
<span>
  Text on same line
</span>

Elements and usage (cont)

Element Description Usage
<a> A link
<a href='https://bit.ly'>
  Go to bitly.com
</a>
<li> A list element
<li>List item</li>
<ul/ol> An (un)ordered list
<ul>
  <li>A list item</li>
</ul>
<ol>
  <li>List item #1</li>
</ol>
<br> A newline
<span>
  On first line
  Still on first line <br>
  On second line
</span>

Ok cool, so how do I set this up?

  • HTML is so simple that all you'll need are:
    • Web Browser (preferably Chrome or Firefox)
    • Text Editor (preferably with syntax highlighting for HTML)
  • Create a file named index.html
  • Right-click file and open with browser
  • Have to refresh to reflect changes

This refreshing thing is annoying

  • Agreed. You can develop in-browser as well
  • Chrome and Firefox have powerful in-browser tools
    • You can right click and go to inspect element
    • You might notice Chrome's devtools are more detailed then Firefox's default. If you want a similar experience, Firefox has a plugin named Firebug
  • These developer tools are really powerful actually. If you want to learn more about them, I recommend trying out the Discover Devtools Course on CodeSchool

Resources

Now that you've got the gist, here's some sites you can look at for more info or use as a reference, etc.

  1. w3schools. This is the first thing you'll find when you Google HTML stuff. Be wary, though, sometimes their info isn't exactly correct. You can find out why, here.
  2. Tizag. This will be probably be second. I'm not sure if this is better or worse than w3schools. So take a lot of what you read with a grain of salt.
  3. WebPlatform. This is the up and coming site backed by the W3C and companies like Facebook, Mozilla, and Google. If you want to know more about HTML and best practices, go here.

Questions?