Scribd
Upload
17 views

03 Introduction to HTML

The document provides an overview of HTML's history, starting from its first publication in 1991 to the introduction of HTML5 in 2012, highlighting the evolution of standards like XHTML. It explains the structure of HTML documents, including the importance of the <!DOCTYPE> declaration, the <head> and <body> sections, and various tags and attributes used in HTML. Additionally, it emphasizes the differences between HTML and XHTML, the significance of proper formatting, and includes examples of simple HTML pages.

Uploaded by

Mark
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views

03 Introduction to HTML

The document provides an overview of HTML's history, starting from its first publication in 1991 to the introduction of HTML5 in 2012, highlighting the evolution of standards like XHTML. It explains the structure of HTML documents, including the importance of the <!DOCTYPE> declaration, the <head> and <body> sections, and various tags and attributes used in HTML. Additionally, it emphasizes the differences between HTML and XHTML, the significance of proper formatting, and includes examples of simple HTML pages.

Uploaded by

Mark
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

CT053-3-1

Fundamentals of Web Design &


Development

Introduction to HTML
History of HTML

1991 HTML first published

1995 HTML 2.0


After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2

1999 HTML 4.01 XHTML 2.0 had even stricter standards


than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
- XHTML 2.0
HTML5 is much more tolerant and can
2009 handle markup from all the prior versions.

Though HTML5 was published officially in 2012, it


2012 HTML5
has been in development since 2004.

CT053-3-1-FWDD HTML (part 1)


Preface

• It is important to have the correct vision


and attitude towards HTML
– HTML is only about structure, not appearance
– Browsers tolerate invalid HTML code and
parse errors – you should not.

CT053-3-1-FWDD HTML (part 1)


The <!DOCTYPE> Declaration

• HTML documents must start with a document


type definition (DTD)
– It tells web browsers what type is the served code
– Possible versions: HTML 4.01, XHTML 1.0
(Transitional or Strict), XHTML 1.1, HTML 5
• Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
– See http://w3.org/QA/2002/04/valid-dtd-list.html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- for a
transitional.dtd">
list of possible doctypes

CT053-3-1-FWDD HTML (part 1)


HTML vs. XHTML

• XHTML is more strict than HTML


– Tags and attribute names must be in
lowercase
– All tags must be closed (<br/>, <img/>)
while HTML allows <br> and <img> and
implies missing closing tags (<p>par1
<p>par2)
– XHTML allows only one root <html> element
(HTML allows more than one)

CT053-3-1-FWDD HTML (part 1)


XHTML vs. HTML (2)

• Many element attributes are deprecated in


XHTML, most are moved to CSS
• Attribute minimization is forbidden, e.g.
<input type="checkbox" checked>
<input type="checkbox"
•checked="checked" />
Note: Web browsers load XHTML faster than
HTML and valid code faster than invalid!

CT053-3-1-FWDD HTML (part 1)


The <head> Section

• Contains information that doesn’t show directly


on the viewable page
• Starts after the <!doctype> declaration
• Begins with <head> and ends with </head>
• Contains mandatory single <title> tag
• Can contain some other tags, e.g.
– <meta>
– <script>
– <style>
– <!–- comments -->

CT053-3-1-FWDD HTML (part 1)


<head> Section: <title> tag

• Title should be placed between <head> and


</head> tags

<title>Telerik Academy – Winter Season


2009/2010 </title>

• Used to specify a title in the window title bar


• Search engines and people rely on titles

CT053-3-1-FWDD HTML (part 1)


<head> Section: <meta>

• Meta tags additionally describe the content


contained within the page
<meta name="description" content="HTML
tutorial" />

<meta name="keywords" content="html, web


design, styles" />

<meta name="author" content="Chris Brewer"


/>

<meta http-equiv="refresh" content="5;


url=http://www.telerik.com" />
CT053-3-1-FWDD HTML (part 1)
<head> Section: <script>

• The <script> element is used to embed


scripts into an HTML document
– Script are executed in the client's Web browser
– Scripts can live in the <head> and in the <body>
sections
• Supported client-side scripting languages:
– JavaScript (it is not Java!)
– VBScript
– JScript

CT053-3-1-FWDD HTML (part 1)


The <script> Tag – Example
<!DOCTYPE HTML>
scripts-example.html
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello World!<\/p>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html>
CT053-3-1-FWDD HTML (part 1)
<head> Section: <style>

• The <style> element embeds formatting information


(CSS styles) into an HTML page
<html>
style-example.html
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html>
CT053-3-1-FWDD HTML (part 1)
Comments: <!-- --> Tag

• Comments can exist anywhere between the


<html></html> tags
• Comments start with <!-- and end with -->

<!–- APU Logo (a JPG file) -->


<img src=“apu_logo.jpg" alt=“APU Logo">
<!–- Hyperlink to the web site -->
<a href="http://www.apu.edu.my/">APU</a>
<!–- Show the news table -->
<table class="newstable">
...
CT053-3-1-FWDD HTML (part 1)
<body> Section: Introduction

• The <body> section describes the viewable


portion of the page
• Starts after the <head> </head> section
• Begins with <body> and ends with </body>
<html>
<head><title>Test page</title></head>
<body>
<!-- This is the Web page body -->
</body>
</html>

CT053-3-1-FWDD HTML (part 1)


HTML Structure

• HTML is comprised of “elements” and “tags”


– Begins with <html> and ends with </html>
• Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>
• Tags have attributes:
<img src="logo.jpg" alt="logo" />
• HTML describes structure using two main
sections: <head> and <body>

CT053-3-1-FWDD HTML (part 1)


HTML Code Formatting

• The HTML source code should be formatted to


increase readability and facilitate debugging.
– Every block element should start on a new line.
– Every nested (block) element should be indented.
– Browsers ignore multiple whitespaces in the page
source, so formatting is harmless.
• For performance reasons, formatting can be
sacrificed

CT053-3-1-FWDD HTML (part 1)


First HTML Page

test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

CT053-3-1-FWDD HTML (part 1)


First HTML Page: Tags

<!DOCTYPE HTML>
Opening tag
<html>
<head>
<title>My First HTML Page</title>
</head>
<body> Closing tag
<p>This is some text...</p>
</body>
</html>
An HTML element consists of an opening tag, a closing tag and the content
inside.

CT053-3-1-FWDD HTML (part 1)


First HTML Page: Header
HTML header
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

CT053-3-1-FWDD HTML (part 1)


First HTML Page: Body

<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body

CT053-3-1-FWDD HTML (part 1)


Some Simple Tags

• Hyperlink Tags
<a href="http://www.telerik.com/"
title="Telerik">Link to Telerik Web
•site</a>
Image Tags
<img src="logo.gif" alt="logo" />
• Text formatting tags
This text is <em>emphasized.</em>
<br />new line<br />
This one is <strong>more
emphasized.</strong>
CT053-3-1-FWDD HTML (part 1)
Some Simple Tags – Example
some-tags.html
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.telerik.com/" title=
"Telerik site">This is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>
CT053-3-1-FWDD HTML (part 1)
Some Simple Tags – Example (2)
some-tags.html
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.apu.edu.my/" title=
“APU Website">This is a link.</a>
<br />
<img src=“apu_logo.png" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>
CT053-3-1-FWDD HTML (part 1)
Tags Attributes

• Tags can have attributes


– Attributes specify properties and behavior
– Example: Attribute alt with value "logo"
<img src="logo.gif" alt="logo" />
– Few attributes can apply to every element:
• id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint
when the element is hovered with the mouse
• Some elements have obligatory attributes

CT053-3-1-FWDD HTML (part 1)


Headings and Paragraphs

• Heading Tags (h1 – h6)


<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
• Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
• Sections: div and span
<div style="background: skyblue;">
This is a div</div>
CT053-3-1-FWDD HTML (part 1)
Headings and Paragraphs – Example
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>
CT053-3-1-FWDD HTML (part 1)
Headings and Paragraphs – Example (2)

headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>
CT053-3-1-FWDD HTML (part 1)

You might also like