HTML Basics
Sparking Challenge
Super Secret Programmable Passcode-
Protected Image Safe
Questions
Which websites and apps do you use?
Entertainment Education Shopping
Social Networking News Blogs
Question
What’s the point of websites and apps?
Answer
To serve content and provide functionality in a
meaningful way to users
Let’s break this down.
What Types Of Content Are There?
Let’s imagine our favourite apps and break them down into components
What Functionality Do They Provide?
● Playing videos
● Liking pictures
● Chatting with our friends
● …
What Is “Meaningful”?
The content needs to be pretty and
organised so the users have a good
experience using the website
In Practice
You’ll create a website using
● HTML - Content
● Javascript - Functionality
● CSS - Style
What We’re Going To Cover Today
Today we’ll focus on the content
● HTML and the anatomy of a webpage
● Basic HTML elements
HTML
Hypertext Markup Language
How the web organises content
or
“The stuff websites are made of”
Hypertext Markup Language
Hypertext – text with links
Markup Language – a language that
describes how something is built
HTML Documents
An HTML document is a file that
◉ Document Body contains HTML
◎ Heading
◎ Paragraph
○ Link1
○ Link2
◎ Image
Demo Time!
Let’s explore the source code of a website :)
Your Turn!
Exercise:
Inspect the source of a few websites of your choice
● Which elements do you notice?
● What patterns and structures do you see?
Anatomy Of A Web Page
● Head – secret notes for your browser
● Body – the actual content to display
<Tags />
Tags are used to mark the start and end of an element, for instance:
Opening Tag
<body>
content of the body
!</body>
Closing Tag
Nesting Tags
As we said, elements can be nested within other elements, for instance:
Nested tags
<html>
<body>
<p>This is a paragraph !</p>
!</body>
!</html>
Demo Time!
Let’s write a website with a title and a paragraph
Your Turn!
Exercise:
Write a website with a title and a paragraph
Now add some more content to the site
Don’t Panic
Some Basic Elements
”Building blocks” of our site
What else does HTML
have to offer?
HEADINGS
<h1>BIG heading</h1>
BIG heading
<h2>Smaller heading</h2>
Smaller heading
<h3>Smallest heading</h3>
Smallest heading
Lists - Ordered
There are two types of lists:
1. Ordered (numbered) lists
<ol></ol>
1. One
2. Two
3. Three
Lists - Unordered
There are two types of lists:
1. Ordered (numbered) lists
2. Unordered lists
• Item
• Item <ul></ul>
• Item
Lists - Items
Lists are made of individual list items:
<li></li>
Lists
Let’s write a grocery list:
<ul> • Durian
<li>Durian</li> • Bananas
<li>Bananas</li> • Apples
<li>Apples</li>
</ul>
Links (anchors)
Links are called “anchors” in HTML and use the <a></a> tag
We specify the address to link by using the href attribute
<a href="[Link]
Attributes
<tag attribute1="value"
attribute2="value2">!</tag>
Note we used an “attribute” of the <a> tag to specify the address in
the previous slide
HTML – It’s a picnic
● Each element is like a container, e.g. a basket or a
box
HTML – It’s a picnic
● Each element is like a container, e.g. a basket or a box
● The containers can contain other containers
HTML – It’s a picnic
● Each element is like a container, e.g. a basket or a box
● The containers can contain other containers
● The (delicious) content that is displayed by the browser is the food
HTML – It’s a picnic
Attributes are labels on the containers
<basket>
<bottle temperature="cool">Orange Juice!</bottle>
<box size="big">
<box size="small">Salad!</box>
<box size="small">Sandwich!</box>
!</box>
!</basket>
Images
Similarly, we can display images using the <img>
tag if we know their address
Demo Time!
Getting the address of a picture
Images
Now we can display our images for all to see!
<img src ="/[Link]" >
The src attribute means the “source” of the image
content
Changing the size of the image
The <img> tag also support passing in the ”width” and the “height” of an image
<img src="/[Link]" width="300" height="300">
The numbers here refer to the number of pixels that the image
takes up on the screen
A Riddle
How would you create a picture that is also a link?
A Riddle
How would you create a picture that is also a link?
<a href="!!...">
<img src="!!...">
!</a>
Breaks
Some HTML elements are “inline”, like images. To add a new line after
them we can use breaks.
<img src="">
<br/>
Basic Form Elements
Setting the stage for interaction
Buttons
The <button> tag defines a clickable button:
<button type="button">Click me!</button>
Inputs
To get text from the user (for instance their email)
<input type="text" placeholder="your@[Link]" />
Inputs
You can also set the initial value of the input using the value attribute
type="password" to hide the typed characters:
<input type="password" value="5ecretp@ss" !/>
Labels
We can attach a label to our form elements!
<label>Name:</label>
<input type="text">
Summary
● What is a webpage made up of?
● An HTML document organises the content of a webpage
Summary
● The document contains elements
● Elements can be nested
● Elements are defined using tags
● Elements can have attributes
Basic Elements
● Which elements did we learn today?
○ Paragraphs - <p></p>
○ Headings - <h1></h1>
○ Lists - <ul><li></li></ul>
○ Links - <a href="..."></a>
Basic Elements
● Which elements did we learn today?
○ Images - <img src="...">
○ Buttons - <button></button>
○ Inputs - <input type=”text">
Questions?
Your Turn!
Play around, have fun, ask questions!
Challenge Time
Let’s put our new knowledge to good use