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 webpagesright 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 websitemake 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 anywayusing 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
title
for our page<title>
Orbital Project Name - Home
</title>
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>
<!-- under Creators -->
<p> Me,
You
</p>
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
for navigation linksnav is essentially like div but it gives more meaning, saying that "here be links"
<nav>
</nav>
<!-- before Details -->
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>
a
and href
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
id
attribute for div
<div id="details">
<!-- cut -->
<div id ="installation">
<!-- cut -->
<div id ="creators">
img
<!-- before nav -->
<img src="">
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
<div id="feedback">
<form action="www.google.com/search">
<input name="q">
<input type="submit">
</form>
</div>
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
<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