UNDERSTANDING THE
FUNCTIONALITY OF HTML
OVERVIEW
HTML Document Structure ◦ Heading levels
◦ Basic HTML components ◦ Lists
◦ Head Element ◦ Links
◦ Writing well organised html syntax
Page Components
◦ Using global attributes to define ◦ Adding images to web pages
elements
◦ Presenting information in a table
Structural Markup ◦ Creating a form on a web page
◦ Block and inline elements ◦ How web forms work
◦ Content models ◦ Adding audio and video
◦ Define the structure and formatting of ◦ Using inline frames
text
Basic HTML components
DOCTYPE: all HTML documents should start with DOCTYPE. This tells the browser what type of
document to expect
E.g: <!DOCTYPE html>
Elements: also called tag
HTML document is divided into two main elements: within <html> element, there is <head> and
<body>
Attributes: they provide additional information about elements
◦ Ex: <img src=“myimage.jpg” alt=“a picture of a houses”>
The language of the document: to declare the language of the text on the web
<html lang=“en”>
The head element
Document title
◦ <title>My first webpage</title>
Scripts
◦ <script>
◦ function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
◦ </script>
Styles
◦ <style> body {background-color: linen;} </style>
Links to external files
◦ <link rel="stylesheet" href="styles.css">
Meta tag
<meta> tag is used to provide information about the page, such as:
◦ the character set used
◦ <meta charset=“UTF-8”>
◦ Description of the page
◦ <meta name=“description” content=“short description about the webpage”>
◦ Keywords
◦ <meta name=“keywords” content=“html, head section, meta”>
◦ Refresh
◦ <meta http-equiv=“refresh” content=“90”>
◦ Viewport
◦ <meta name=“viewport” content=“width=device-width, initial-scale=1”>
Writing well organised html syntax
In order to write clear, consistent and easy to read HTML, the following rules are
recommended:
It is good practice to write all element names, attributes and values in lower case
Indenting nested elements to make reading html codes easier
Use double quotes when writing attributes values for consistency
Avoid using true or false values on Boolean attributes (ex: hidden)
Omit the closing forward slash on self-closing tags (ex: <img>, <br>, <hr> )
Structural markup
Block Elements: always start on a new line and take up the full width of the
available browser window (<p>, <div>)
Inline Elements: don’t start on an new line (ex: <img> , <a> , <em>
Block elements can contain inline elements but inline elements cannot contain
block elements
Semantic elements: elements that provide a definition of the purpose of the
page content that elements contain ( <header> <footer> <article> ). Clearly
defines its content.
Content Models
Define the structure and
formatting of text
Structure elements
<header>
<nav>
<article>
<section>
<aside>
<p>
<footer>
<hr>
Formatting tags
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
Quotation tags
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the
author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from
another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
List
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
Nesting List and List
attributes
Attributes
Type: changes the style of the bullet in a <ul> or the type of ordering in a <ol>
Ex: <ul>
◦ <li></li>
◦ <li></li>
◦ <li></li>
</ul>
Nested lists are lists in another list
Links
Internal External Email
Attributes
href:
target: _self, _blank
Link within the same page
<p id=“chapter 4”>
Page Components
Images
Table
Forms
Audio and videos
iFrame
Image
Ex: <img src=“myimage.jpg”>
◦ Attributes
◦ alt
◦ width
◦ height
Using an image as a link
<a><img src=“myimage.jpg”></a>
Image file formats commonly used:
JPG for photographs, PNG for logos and diagrams
Table
<table> ◦ <td></td>
◦ <tr> ◦ </tr>
◦ <td></td> ◦ <tr>
◦ <td></td> ◦ <td></td>
◦ <td></td> ◦ <td></td>
◦ </tr> ◦ <td></td>
◦ <tr> ◦ </tr>
◦ <td></td>
<table>
◦ <td></td>
Using header, body and footer
<thead>
<tbody>
<tfoot>
Attributes for combining multiple cells
colspan
rowspan
Forms
Tags for forms: <form> </form>
Input types:
◦ Text: <input type=“text”>
◦ Radio button: <input type=“radio”>
◦ Checkbox: <input type=“checkbox”>
◦ Submit button: <input type=“submit”>
Other form elements
Labelling inputs: <label>
Text area : <textarea>
Drop down list: <select> <option>
Grouping form elements
<fieldset><legend><legend> </fieldset>
How forms work
Action attribute
Method attribute : GET, POST
Ex: <form action=“process.php” method=“POST”
Form validation: client-side, server-side
VIDEO
Video tag: <video> <source>
Ex: <video controls>
<source src=“myvideo.mp4” type=“video/mp4”>
</video>
More attributes
◦ Autoplay
◦ Loop
◦ Muted
◦ Poster
◦ Width and height
Recommended video format: MP4, Web4, Ogg
AUDIO
Audio tag: <audio> <source>
Ex: <audio controls>
<source src=“myaudio.mp3” type=“audio/mpeg”>
</audio>
More attributes
◦ Autoplay
◦ Loop
◦ Muted
◦ Width and height
Recommended video format: MP3, WAV
Inline Frames
iFrame is a way to include content from other websites
such as YouTube in a webpage
Ex:
<iframe width=“” height=“” src=
www.youtube.com/embed/abc123>
</iframe>
