ITEC229_Chapter2_new.ppt

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

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
http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229
2

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.
3

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.
4

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

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.
6

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.
7

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.
8

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 1994. 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.
9

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.
10

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 4.01. It incorporated XML to ensure code is
properly written and to ensure interoperability between
programming languages.
11

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.
12

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.
13

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
14

 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.
15
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.
16

 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).
17

 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.
18

 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;
19

 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.
20
The <!DOCTYPE html> Declaration

21
 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.
The <html>..</html> Tags

22
 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
The <html>..</html> Tags

23
 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
The <head>..</head> Tags

24
<!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
 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
<!DOCTYPE html>
<html>
<head>
<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
 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
The <body>..</body> Tags

 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.
28

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

 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>
30

 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>
31

32
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.

EXAMPLE - Structure
33
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>

EXAMPLE – Structure & Content
34
<html>
<head>
<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>

EXAMPLE – Structure & Content
35
<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>

EXAMPLE – Output in a Browser
36

LOGO
Introduction to HTML 5
END of CHAPTER 2

ITEC229_Chapter2_new.ppt

Recommended

Recommended

More Related Content

Similar to ITEC229_Chapter2_new.ppt

Similar to ITEC229_Chapter2_new.ppt (20)

Recently uploaded

Recently uploaded (20)

ITEC229_Chapter2_new.ppt