1. Client-Side Internet and Web Programming
Eastern Mediterranean University
School of Computing and Technology
Department of Information Technology
ITEC229
Client-Side Internet and Web Programming
Introduction to HTML 5
CHAPTER 2
Prepared by: R. Kansoy

2. Contents 2.1 What is HTML? 2.2 HTML Versions 2.3 HTML Editors
2.4 Basic Building Blocks of HTML
2.5 Basic Tags and Document Structure
2.6 HTML Comment Lines
2.7 HTML5 New Semantic/Structural Elements

3. 2.1 What is HTML? HTML is an acronym for Hyper Text Mark-up Language.
It is a computer language for creating websites and web applications for World Wide Web.
Technically, HTML is not a procedural programming language such as C, but rather a mark up language that specifies the structure and content of documents that are displayed in web browsers.
HyperText is the method by which you move around on the web by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.
Markup is what HTML tags do to the text/content inside them. It tells the Web browser how to display a Web page's words and images for the user.

4. 2.1 What is HTML?
HTML 5 is the latest and most enhanced version of HTML.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
HTML5 is a standard for structuring and presenting content on the World Wide Web.
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 also have support for some HTML5 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

5. 2.1 What is HTML?
With Cascading Style Sheets (CSS) and JavaScript, HTML forms a triad of cornerstone technologies for the World Wide Web.

6. 2.2 HTML Versions
The Hypertext Mark-up Language (HTML) is an evolving language, with different versions supporting different features and each new version is given a version number.
The first version of HTML did not have a version number and it was just called HTML.

7. 2.2 HTML Versions HTML (1989-1994):
This was the bare bones version of HTML and the very first release of the language.
It  was very limited in terms of styling and presentation of content.
Because of these limitations, every web page created with HTML looked the same with similar background and the type of font used.
In HTML, it could not be possible to use tables or frames, specify fonts, change page background, or use forms
Because the World Wide Web Consortium (W3C) did not exist at the time when HTML first appeared, W3C did not formally specify the HTML specification.
HTML was only supported by Lynx and Mosaic browsers.

8. 2.2 HTML Versions
HTML 2.0 (1995):
HTML 2.0 was considerably improved to support forms with limited set of form elements such as text boxes, and option buttons, change of page background, use of tables
This version supported by more browsers
Between HTML and HTML 2.0 W3C was formed.

9. 2.2 HTML Versions
HTML 3.2 (1997):
This version included support for creating tables and expanded options for form elements but still did not support the frames.
It also allowed web pages to include complex mathematical equations.
In an attempt to ensure development of standards for the World Wide Web, the World Wide Web Consortium (W3C) was founded by Tim Berners-Lee in By 1997, they published HTML 3.2.
Because W3C delayed agreeing on the next version (after HTML 2.0) of HTML, HTML 3.2 was created instead of HTML 3.0.
Although HTML 3.2 specification included support for CSS (cascaded style sheets), browser manufactures did not support it very well in their browsers.

10. 2.2 HTML Versions HTML 4.0 (1997-1998):
Later in 1997, the W3C released HTML 4.0 — a version that adopted many browser-specific element types and attributes.
HTML 4.0 will later be reissued with minor edits in 1998.
HTML 4.01 (1999):
In December 1999, HTML 4.01 was released.
This version added support for style sheets and scripting ability for multimedia elements.
HTML 4.01 focused on separating presentation styling information from the actual content by the use of style sheets.

11. 2.2 HTML Versions XHTML (2000):
After HTML 4.01, there was no new version of HTML for many years as development of the parallel, XML-based language XHTML occupied the W3C's HTML Working Group through the early and mid-2000s.
It was recommended to be used as the joint-standard with HTML It incorporated XML to ensure code is properly written and to ensure interoperability between programming languages.

12. 2.2 HTML Versions
HTML 5.0 (2014):
HTML5 is the standard language of the Web, developed by W3C.
Its core was to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices.
For application developers and industry, HTML5 represents a set of features that people will be able to rely on for years to come. HTML5 is supported on a wide variety of devices, lowering the cost of creating rich applications to reach users everywhere.
HTML 5.1 (2016):
The W3C release HTML 5.1 in November 2016.

13. 2.3 HTML Editors
For creating web pages in HTML, you will need a HTML editor.
There are several benefits to using an HTML editor.
A good HTML editor will keep your code clean and organized.
It will also detect when you open a new tag and automatically close it to avoid you having buggy code and as a result reducing how much typing you have to do.
Most HTML editors today also allow you to preview your web page to see how it will look in a web browser using their WYSIWYG feature.

14. 2.3 HTML Editors
There are many free and paid HTML editors, and below are some of the top options you can choose from:
HTML-Kit
CoffeeCup
KompoZer
Komodo Edit
Notepad/ Notepad++
Bluefish

15. 2.4 Basic Building Blocks of HTML
TAGs, ELEMENTs and ATTRIBUTEs.
Tags are practically the building block of HTML - you can’t do anything with HTML without using tags
HTML uses tags to describe the structure of web pages
Web browsers do not display the HTML tags, but use them to render the content of the page (to interpret the content and display it as a web page).
For every HTML based web page, there are several tags that are always inserted into the document.
HTML tags are keywords surrounded by angle brackets (< and >).
HTML tags normally come in pairs (e.g., <body> and </body>). The first tag in a pair is called opening tag, and the second tag is called closing tag.

16. 2.4 Basic Building Blocks of HTML
TAGs, ELEMENTs and ATTRIBUTEs.
The opening tag consists of the tag name enclosed in angle brackets (e.g., <body>).
The closing tag is the same as the opening tag except it has a forward slash (/) before the tag name (e.g., </body>).
Almost every open tag must be closed.
However, there are exceptions. An example of a tag that does not have to be closed is an empty tag, such as the line break: <br>.
Everything between the opening tag and closing tag are inside that tag and therefore will be affected by the attributes that is assigned to that tag.

17. 2.4 Basic Building Blocks of HTML
TAGs, ELEMENTs and ATTRIBUTEs.
HTML elements are represented by tags
HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname> Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag.
Some elements, however, are forbidden from containing any content at all. HTML elements with no content are called empty /void elements. Empty elements do not have an end tag (e.g., <br>, <hr>, <link> and <meta> etc.
HTML elements can be nested (elements can contain elements).

18. 2.4 Basic Building Blocks of HTML
TAGs, ELEMENTs and ATTRIBUTEs.
HTML elements may contain attributes that are used to set various properties of an element.
Attributes provide additional information about an element
Some attributes are defined globally and can be used on any element, while others are defined for specific elements only.
Attributes usually come in name/value pairs like: name="value"
Attributes may only be specified within start tags and must never be used in end tags.
HTML5 attributes are case insensitive and may be written in all upper case or mixed case, although the most common convention is to stick with lower case.

19. 2.5 Basic Tags and Document Structure
While every web page is different in terms of content and layout, ech page has a basic structure and tags as the building blocks.
Every HTML document uses the basic structural tags below;

20. 2.5 Basic Tags and Document Structure
The <!DOCTYPE html> Declaration
All HTML documents must start with a document type declaration: <!DOCTYPE html>
DOCTYPE is such an element, which tells the browser about the html version
DOCTYPE is very useful for the proper Search Engine Optimization (SEO) purpose.

21. 2.5 Basic Tags and Document Structure
The <html>..</html> Tags
The <html>..</html> tags are the main tags and identify the page as a HTML document.
When a Web browser reads the document, it knows that everything between these two tags is a HTML document.
Each HTML page should begins with <!DOCTYPE html> followed by <html> and ends with </html>.
Tags are containers. The html tag also indicates that everything between <html> and </html> is code that conforms to the standards of the type of HTML dictated by the doctype declaration – in this case HTML5.

22. 2.5 Basic Tags and Document Structure
The <html>..</html> Tags
All HTML documents are divided into two main sections: the head and the body.
So, inside the <html> tag there are two other important tags:
the <head> tag
the <body> tag

23. 2.5 Basic Tags and Document Structure
The <head>..</head> Tags
The <head>..</head> tags are used to define the document header.
This section is where you define the basic information about your webpage such as;
providing metadata (e.g., author information, keywords, character encoding)
defining the title of the web page
inserting scripts
adding style sheets

24. 2.5 Basic Tags and Document Structure
The <head>..</head> Tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Introduction to HTML</title>
<script src="scriptfile.js"></script>
<link rel="stylesheet" href="stylefile.css">
</head>
<body>
</body>
</html>

25. 2.5 Basic Tags and Document Structure
The <head>..</head> Tags
Web sites have two audiences:
The first is human
The other "spiders", "bots" or "web crawlers"
While the contents of the head tag displays little to human viewers it's important to the bots. Search engines have crawlers (e.g. Google's is called "Googlebot") that constantly surf the net following links from one site to another collecting and indexing everything they find.
Web sites that read well to spiders are most likely to appear high in search engine results. This is what is called SEO or Search Engine Optimization.

26. 2.5 Basic Tags and Document Structure
The <head>..</head> Tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="The head tag contains the title and meta tags - important to the search engines, and information for the browser to properly display the page.">
<meta name= "author" content="Raygan Kansoy">
<meta name= "keywords" content="Itec229, html lecture notes, learn HTML">
<meta name= "copyright" content="Copyright Raygan Kansoy. All Rights Reserved.">
<title>Introduction to HTML</title>
</head>
<body>
</body>
</html>

27. 2.5 Basic Tags and Document Structure
The <body>..</body> Tags
The <body>..</body> tags identify the area in the Webpage where all of the content is stored.
Everythig placed between these tags appears in the html document
The body tag contains the code that generates what is seen in a browser.
This is what you see on your computer screen when you go to a web page

28. 2.6 HTML Comment Lines
In every programming language comments are widely used to help/remind to yourself or other developers about what is happening in the code, to make note of extra code that will be added to the web application at a later date and notes to others who may be working on the same project.
Comments can be used anywhere in the code, they don’t rendered by the browser and change the function of the code in anyway.
Comments are not shown to the viewer by the browser. However, they can be seen in the source code.
In HTML, comments are easily added to the document, by adding the opening and closing comment tags.

29. 2.6 HTML Comment Lines
Let’s go through our HTML document and talk about the structure step-by-step, using comments.

30. 2.7 HTML5 New Semantic/Structural Elements
Semantics is the study of the meanings of words and phrases in a language.
Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the developer.
Non-semantic elements tells nothing about its content.
<div> - defines a division or a section in an HTML document
<span>
Semantic elements clearly defines its content.
<form>
<table>
<article>

31. 2.7 HTML5 New Semantic/Structural Elements
HTML5 semantic elements are supported in all modern browsers.
HTML5 offers new semantic elements to define different parts of a web page and for having a better structure in document.
Most commonly used examples of these element are;
<header>
<nav>
<main>
<section>
<article>
<aside>
<figure>
<figcaption>
<footer>

32. 2.7 HTML5 New Semantic/Structural Elements
TAG
DESCRIPTION
<header>
Defines a header for a document or section
<nav>
Represents a section of the document intended for navigation links
<main>
Defines the main content of a document
<section>
Defines a section in a document
<article>
Represents an independent piece of content of a document, such as a blog entry or newspaper article
<aside>
Represents a piece of content that is only slightly related to the rest of the page.
<figure>
Specifies self-contained content, like illustrations, diagrams, photos, images, graphics, code listings, etc.
<figcaption>
Defines a caption for a <figure> element
<footer>
Defines a footer for a document or section and can contain information about the author, copyright information, etc.

33. 2.7 HTML5 New Semantic/Structural Elements
EXAMPLE - Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>

34. 2.7 HTML5 New Semantic/Structural Elements
EXAMPLE – Structure & Content
<html>
<head>
<meta charset="utf-8">
<title>Introduction to HTML5</title>
</head>
<body>
<header>
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in Chrome, Safari or Mozila.</p>
</header>
<nav>
<a href=" ">HTML Tutorial | </a>
<a href=" ">CSS Tutorial | </a>
<a href=" ">JavaScript Tutorial |</a>
</nav>

35. 2.7 HTML5 New Semantic/Structural Elements
EXAMPLE – Structure & Content
<article>
<section>
<p>One article can have multiple sections</p>
<p>One section can have multiple articles</p>
</section>
</article>
<aside>
<p>This is aside part of the web page</p>
</aside>
<footer>
© Raygan Kansoy
</footer>
</body>
</html>

36. 2.7 HTML5 New Semantic/Structural Elements
EXAMPLE – Output in a Browser

37. Thank You ! Introduction to HTML 5 END of CHAPTER 2