HYPERTEXT MARK-UP
LANGUAGE
Head, Body, And Containers
COS216
AVINASH SINGH
DEPARTMENT OF COMPUTER SCIENCE
UNIVERSITY OF PRETORIA
VIDEO
[Link]
HTML - OVERVIEW
• Hypertext Markup Language (HTML)
• Markup language for websites and web applications
• Some mobiles apps also use HTML
• Created in 1991 - 1993 by Tim Berners-Lee at CERN
• Current version: 5.3 (many changes from 2.0/3.0/4.0 to 5.0)
• File extension: .html or .htm
• Mime type: text/html
HTML - OVERVIEW
• HTML only marks-up and structures data (with some styling)
• Calculations, behavior, events, and functions are provided in JavaScript (JS)
• Advanced styling is done in Cascading Style Sheets (CSS)
• Syntax almost identical to XML
• Has a different declaration
• Has specific tag names
• Extended from SGML
• Extended to XHTML
Year Version
1991 Tim Berners-Lee invented HTML
HTML Working Group defined
1995
HTML - HTML 2.0
HISTORY 1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2014 W3C Recommendation: HTML 5.0
W3C Candidate Recommendation:
2016
HTML 5.1
HTML - OVERVIEW
HTML is delivered via HTML is simple text
HTTP Interpreted and rendered by the browser
Emails Different browsers might interpret the
Any other available means same thing differently
Standards maintained by W3C
HTML - EXAMPLE
<!DOCTYPE html>
<html>
<body>
Hello COS216 Class!
</body>
</html>
HTML - SYNTAX
HTML is case insensitive HTML ignores Browsers can handle Attributes can be enclosed
whitespaces some mistakes in single or double quotes
Tag names can be upper or lower Elements can be all on one line or Some browsers might add a closing
case separated by newlines, tabs, and tag if you forgot it
spaces Do not rely on browsers to do this
Always validate your document
before publishing
HTML - DECLARATION
• Document Type Declaration (DOCTYPE)
• Used by browsers to determine how to render a document
• Also specifies the standard, encoding, and version
• Most browsers are able to correctly render without a declaration
• Very important to add it for Internet Explorer and Edge, otherwise the page is a mess
• Even if not needed, it should always be added
• Must be placed at start of document
HTML - DECLARATION
• For HTML 5:
<!DOCTYPE html>
• For older HTML versions the DTD has to be specified:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
HTML - COMMENTS
• Comments can be added which are ignored by the browser/parser
• Opening tag: <!--
• Closing tag: -->
• Example: <!-- This is my random comment -->
HTML - ROOT
• HTML documents can only have a single root element
• Must be present
• Opening tag: <html>
• Closing tag: </html>
• Example: <html> ... </html>
HTML - HEAD AND BODY
• HTML root element may contain 2 child elements
• Head:
• Contains the title, metadata, scripts, and stylesheets
• Nothing in the head is displayed on the website
<head> ... </head>
• Body
• Contains the content that is displayed on the website
<body> ... </ body>
HTML - HEAD - TITLE
• The title of the website
• Displayed in the browser tab
<head>
<title>My COS216 Website</title>
</head>
HTML - HEAD - META
SPECIFIES VARIOUS META TAGS ARE PARTIALLY USED BY PARTIALLY USED BY
METADATA FOR THE OPTIONAL BROWSER FOR WEBCRAWLERS AND
WEBSITE RENDERING SEARCH ENGINES (SEO)
HTML - HEAD - META
• Charset: Specifies the character set used for encoding
• Description, Author, Keywords: The summary, author name, and keywords
• Viewport: Change the scale and resolution for mobile devices
• Refresh: Reload the website every few seconds
<head>
<meta charset="UTF-8">
<meta name="description" content="The first COS216 site">
<meta name="keywords" content="COS216,UP,Pretoria">
<meta name="author" content="Satoshi Nakamoto">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30">
</head>
HTML - HEAD - SCRIPT
• Adds a scripting language to HTML
• You may assume that all scripts are JavaScript
• If no type attribute is defined, defaults to JavaScript
• Can be added to the head or anywhere in the body
• Can be standalone code or an external script
HTML - HEAD - SCRIPT
• Embed JavaScript code directly into HTML
<script> <script type="text/javascript">
// JS code // JS code
</script> </script>
• Link to a separate JavaScript file
• Separately downloaded by the browser
• Should be placed in the head
<script src="[Link]"></script>
HTML - HEAD - STYLE
• Adds a style language to HTML
• You may assume that all style sheets are CSS
• If no type attribute is defined, defaults to CSS
• Must be added to the head
• Can be a standalone style or an external style sheet
HTML - HEAD - STYLE
• Embed CSS directly into HTML
<style> <style type="text/css">
/* CSS style */ /* CSS style */
</style> </style>
• Link to a separate CSS file
• Separately downloaded by the browser
• Should be placed in the head
• Does not need a closing tag – some browsers actually fail if you add a closing tag
<link rel="stylesheet" type="text/css" href="[Link]">
HTML - BODY
• Contains the content that is displayed on the website
• Can be empty, text, or nested elements
<body>
Hello COS216 Class!
</body>
HTML - BODY - BREAK
• Break and create a newline
• Does not need a closing tag
• Does not even need the ending slash
<body>
Some text<br/>
Some more text<br>
And some more text
</body>
HTML - BODY - HEADING
• Adds a text heading
• Various sizes of headings
• h1 is the largest
• h6 is the smallest
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
HTML - BODY - PARAGRAPH
• Adds a paragraph of text
• Text can be added without a paragraph
• Paragraph provides advance formatting (fonts, sizes, colors)
• Paragraph adds some whitespace before and after
<body>
<p>My text paragraph for COS216</p>
</body>
HTML - BODY - DIVISION
• A division or section that separates content
• Invisible rectangle
• Placed on a separate line
<body>
<div>Text inside an invisible block</div>
</body>
HTML - BODY - SPAN
• A division or section that separates content
• Invisible rectangle
• Placed inline
• Span is almost identical to divs
• Spans are placed on the same line, divs are placed on a separate line
• Spans can be transformed to divs, and vice versa, using CSS
<body>
<span>Text inside an invisible block</span>
</body>
HTML - BODY - TABLE
• A traditional grid table
• Consists of:
• Table (table): the outer table container
• Row (tr): A row inside the table
• Cell (td): A cell or column inside a row
• Header (th): A special cell representing the header or top row of the table
• Multiple rows and cells can me merged
• Use the colspan and rowspan attributes
• No borders by default
HTML - BODY - TABLE
<body>
<table border="1">
<tr>
<th colspan="3">Cryptos</th>
</tr>
<tr>
<th>Currency</th>
<th>Symbol</th>
<th>Price</th>
</tr>
<tr>
<td>Bitcoin</td>
<td>BTC</td>
<td>8102</td>
</tr>
<tr>
<td>Ethereum</td>
<td>ETH</td>
<td>856</td>
</tr>
</table>
</body>
HTML - EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Crypto Exchange</title>
</head>
<body>
<h1>My Crypto Exchange</h1>
<p>The first attempt on a simple crypto site</p>
<span>Bitcoin on one side</span>
<span> --- </span>
<span>Ethereum on one side</span>
<br/><br/>
<table border="1">
<tr>
<th>Currency</th>
<th>Symbol</th>
<th>Price</th>
</tr>
<tr>
<td>Bitcoin</td>
<td>BTC</td>
<td>8102</td>
</tr>
<tr>
<td>Ethereum</td>
<td>ETH</td>
<td>856</td>
</tr>
</table>
</body>
</html>
BROWSER DEVELOPER TOOLS
• Most browsers have built-in developer tools
• Allows developers to inspect and debug websites
• In most browsers pressing F12 will show/hide the tools
BROWSER DEVELOPER TOOLS
• Inspect the HTML, JS, and CSS code
BROWSER DEVELOPER TOOLS
• Other tools are also available
• Memory inspector
• Security manager
• Performance analysis
• Auditors
• And more, depending on the browser
HTML
RESOURCES
• All HTML elements, attributes,
descriptions, and examples can
be found on W3Schools:
• [Link]
DEMO
