HTML

What is HTML

HyperText Markup Language

large part of what the web is

you use your browser, which speaks HTTP to the Servers on the Internet to see webpages

HTML in the wild

right click > View Page Source or Ctrl+Shift+I

Inspect element or Ctrl+Shift+C to select and jump to an element

you can copy HTML from any website

Simplest html page

make a super simple html page, index.html which looks like a text file

<!-- index.html -->
Orbital wohoo!

HTML is just plain text

this is incomplete and incorrect, but your browser tries to display it anyway

HTML and tags

using Sublime Text, just type html and press Tab to see a barebones HTML structure

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>
    </title>
  </head>
  <body>
  </body>
</html>
<!DOCTYPE html>
<!DOCTYPE htmL> requierd for legacy reasons to help browser in rendering 
<html>
</html>
<html> tag defines that this is a html page 
<head>
  <title>
  </title>
</head>

<head> not seen by users, mainly for computers, e.g. search engine crawlers

<title> title of webpage, shown in search results and browser tab

<body>
</body>
<body> what is seen by us, the user

Our project page

whatever project you end up doing, you will probably want to build a a website to showcase it, let's use that as a starting point

title for our page

<title>
  Orbital Project Name - Home
</title>

headers from h1 to h6

<!-- after <body> -->
<h1>
  Project Name
</h1>

p is a paragraph of text

<!-- after </h1> -->
<p>
  Awesomeeeee subtitle!
</p>

div is the generic container

 <!-- after </p> -->
 <div>
   <h2> Installation </h2>
   <p> download this project and open it in your browser </p>
 </div>
 <div>
   <h2> Creators </h2>
   <p> 2 wonderful students from NUS created this </p>
   <p> Me, You </p>
 </div>

HTML ignores whitespace

<!-- under Creators -->
<p> Me,
You
</p>

we can br it, but we usually don't

<!-- under Creators -->
<p> Me,<br>
You
</p>

em for emphasis

<!-- under Details -->
<p> It will win <em>best project</em>! <p>

strong for stronger emphasis

  <p> 2 <strong>wonderful</strong> students from NUS created this </p>

nav is essentially like div but it gives more meaning, saying that "here be links"

<nav>
</nav>
<!-- before Details -->

represent navigation as a list

using ul or an unordered list

<!-- after nav -->
<ul>
</ul>

li for a list element inside a list

<ul>
  <li> Details </li>
  <li> Installation </li>
  <li> Creators </li>
</ul>

note the difference in styling of links, blue underline

<ul>
  <li> <a href="#details">Details</a> </li>
  <li> <a href="#installation">Installation</a> </li>
  <li> <a href="#creators">Creators</a> </li>
</ul>
the # essentially means, look for something with an id details and jump there

sepcify an id attribute for div

<div id="details">
<!-- cut -->
<div id ="installation">
<!-- cut -->
<div id ="creators">

what's the web without img

<!-- before nav -->
<img src="">

a form with input and submit

  <div id="feedback">
    <form>
      <input name="q">
      <input type="submit">
    </form>
  </div>
nothing happens when we click submit, so lets change that

a search query

  <div id="feedback">
    <form action="www.google.com/search">
      <input name="q">
      <input type="submit">
    </form>
  </div>

a feedback form

use label to tell the user what the field is for

<form action="shout">
  <label>
    Email:
    <input name="email">
  </label>
  <label>
    Comments:
    <textarea required name="comments" rows="10" cols="50" placeholder="What do you think?">
    </textarea>
  </label>
  <input type="submit" value="Send">
</form>
try pressing submit and see what happens

HTML5 ftw!

<form action="shout">
  <p>
    <input type="email" name="email" placeholder="Email">
  </p>
  <p>
    <textarea required name="comments" rows="10" cols="50" placeholder="What do you think?">
    </textarea>
  </p>
  <p>
    <input type="submit" value="Send">
  </p>
</form>
placeholder as a new supported attribute

References

HTML element reference

Tutorial on HTML5 forms