HTML Final

HTML
1
HTML
•HTML is the standard Markup
language for creating Web Pages.
2
Introduction to HTML
Some acronyms
• HTML: Hypertext Markup Language, the format
used on the World Wide Web.
• HTTP: Hypertext Transfer Protocol, the language

used to transfer HTML files from web servers to
browsers.
• URL: Universal Resource Locator, an address for

information on the web.
3
What is HTML?
• When you look at a Web page, you are looking

at HTML.
• HTML is a language
• HT = Hypertext
• ML = Markup Language
• HTML files end in .HTM or HTML.
4
What is HTML?
• Markup codes define document structure.
• Internet browsers interpret markup codes so that

formatting is displayed.
• To see a file in its source format, view it in a text

editor such as Notepad.
• Markup codes are visible and editable.
5
What is HTML?
 HTML or HyperText Markup Language is the
standard markup language used to create web
pages.
 A markup language is a set of markup tags.
 The tags describe document content.
 HTML documents contain HTML tags and plain
text.
6
Viewing page and source code
7
Coding HTML
Well formed HTML source code
• Basic rules of well-formed HTML:
• Tags (elements) are lower case. For example, <h1>.
• Tags must have closing tags. For example, <h1>This is

heading 1</h1>
• Tags must nest properly. For example, <h1>This is
<em>heading 1</em></h1>
• Attribute values must be quoted. For example,
<background-color=“blue”>
8
Use Notepad, Notepad++, Sublime text and
browser
9
HTML Versions
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML5.1 2016
HTML5.2 Second Edition 2017
10
Differences Between HTML
• Differences Between HTML 4.01 and HTML5
• Some HTML 4.01 attributes are not supported in
HTML5.
• The "sizes" attribute is new in HTML5.
Differences Between HTML and XHTML

• In HTML the <link> tag has no end tag.
• In XHTML the <link> tag must be properly closed.
11
HTML Tags
• HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash
inserted before the tag name
12
HTML Page Structure
13
Write Some HTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
14
Coding HTML
The HTML tag
• The <!DOCTYPE html> declaration defines this document to be HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
15
Coding HTML
The HTML tag
• THE DOCTYPE DECLARATION DEFINES THIS DOCUMENT TO BE HTML5.
Since the early days of the web , there have been many versions of
HTML. version: year HTML 1991 HTML2.0 1995 HTML3.2 1997
HTML4.01 1999 XHTML 2000 HTML5 2014 The declaration represents
the document type and helps browsers to display web pages correctly.
it is an instruction to the web browser about what version of HTML the
page is written in. So, always add the declaration to your HTML
documents, so that the browser knows what type of document to
expect.
16
Coding HTML
The HTML tag
• The first tag in every HTML file is the HTML tag.
• This tag tells the browser that the file is HTML.

• HTML elements are represented by tags
• In Notepad, at the beginning of index.html,

<html></html>
17
Coding HTML
The HEAD tag
• Follows the HTML tag.
• Browsers do not display the HTML tags, but use
them to render the content of the page
• Sets up an area for items that don’t appear on the
page:
• The title that appears in the browser window’s title bar.
• Keywords that identify your page to Internet search
engines.
18
Coding HTML
Insert the HEAD tag
• After the <html> tag, type
<head>
</head>
• The <head> element is a container for all the head
elements.
• The <head> element can include a title for the
document, scripts, styles, meta information, and
more.
19
Coding HTML
Insert the HEAD tag
• The following elements can go inside the <head>
element:
• <title> (this element is required in an HTML document)

• <style>
• <base>
• <link>
• <meta>
• <script>
• <noscript>
20
Coding HTML
The TITLE tag
• The <title> tag is required in all HTML documents and it
defines the title of the document.
• The <title> element:
• defines a title in the browser toolbar
• provides a title for the page when it is added to
favorites
• displays a title for the page in search-engine results
21
The TITLE tag
• Contains the title that appears in the browser

window’s title bar.
• Goes in the HEAD section.
• The title is not visible in the page itself.
• The format of the Title tag is
<title>Works Cited</title>
22
Insert a TITLE tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
23
Insert a STYLE tag
• Definition and Usage
• The <style> tag is used to define style information for an HTML
document.
• Inside the <style> element you specify how HTML elements
should render in a browser.
• Each HTML document can contain multiple <style> tags.
24
Insert a STYLE tag
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
25
Insert a BASE tag
• The <base> tag specifies the base URL/target for all relative
URLs in a document.
• There can be at maximum one <base> element in a
document, and it must be inside the <head> element.
26
Insert a BASE tag
<!DOCTYPE html>
<html>
<head>
<base href="https://www.hello.com/images/" target="_blank">
</head>
<body>
<p><img src=“x.gif" width="24" height="39" alt=“x"> - Notice that we have only
specified a relative address for the image. Since we have specified a base URL in the
head section, the browser will look for the image at
"https://www.hello.com/images/x.gif".</p>
<p><a href="https://www.hello.com">hello</a> - Notice that the link opens in a new
window, even if it has no target="_blank" attribute. This is because the target attribute
of the base element is set to "_blank".</p>
</body>
</html>
27
Insert a Link tag
• The <link> tag defines a link between a document and an
external resource.
• The <link> tag is used to link to external style sheets.
• Note: The <link> element is an empty element, it contains
attributes only.
• Note: This element goes only in the head section, but it can
appear any number of times.
28
Insert a Link tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>
</body>
</html>
29
Insert a META tag
• Metadata is data (information) about data.
• The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine
parsable.
• Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other metadata.
• The metadata can be used by browsers (how to display content or
reload page), search engines (keywords), or other web services.
• HTML5 introduced a method to let web designers take control over
the viewport (the user's visible area of a web page), through the
<meta> tag (See "Setting The Viewport" example below).
30
Insert a META tag
• Note: <meta> tags always go inside the <head> element.
• Note: Metadata is always passed as name/value pairs.
• Note: The content attribute MUST be defined if the name or
the http-equiv attribute is defined. If none of these are
defined, the content attribute CANNOT be defined.
31
Insert a META tag
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
32
Insert a SCRIPT tag
• The <script> tag is used to define a client-side script
(JavaScript).
• The <script> element either contains scripting statements,
or it points to an external script file through the src
attribute.
• Common uses for JavaScript are image manipulation, form
validation, and dynamic changes of content.
33
Insert a SCRIPT tag
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
34
Insert a NOSCRIPT tag
• The <noscript> tag defines an alternate content for users
that have disabled scripts in their browser or have a browser
that doesn't support script.
• The <noscript> element can be used in both <head> and
<body>.
• When used inside the <head> element: <noscript> must
contain only <link>, <style>, and <meta> elements.
• The content inside the <noscript> element will be displayed
if scripts are not supported, or are disabled in the user's
browser.
35
Insert a NOSCRIPT tag
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text inside the noscript
element.</p>
</body>
</html> 36
Coding HTML
The BODY tag
• The BODY section contains the text and graphics
that appear on your page.
• The BODY section follows immediately after the
HEAD section.
• The format of the BODY section is
<body>All text and graphics on the page.
</body>
37
Coding HTML
Insert the BODY tag
• After the </head> tag, type <body>.
• After the end of the text on the page, type

</body>.
38
Coding HTML
Heading Tags
• Heading tags define the sections on your page.
• Headings are hierarchical: Heading 1, Heading 2,
Heading 3, etc.
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines
the least important heading.
• The format of Heading tags is
<h1>This Is Heading 1</h1>
39
Coding HTML
Heading Tags for Your Page
• Search engines use the headings to index the
structure and content of your web pages.
• Users skim your pages by its headings. It is
important to use headings to show the
document structure.
• In the body section of your page, enclose the title
with <h1></h1>, so that it looks like this:
<h1>Heading</h1>
• Save the file in Notepad, then refresh the page in
your browser.
40
Bigger Headings
• Each HTML heading has a default size. However,
you can specify the size for any heading with the
style attribute, using the CSS font-size property:
• <h1 style="font-size:60px;">Heading
1</h1>
41
Heading Tags & Alignment
• Alignment
• The default alignment is left-justified
• To center your heading, insert the following tag <center></center>
• Remember to embed or “nest” them properly
• <h1><center>Title</center></h1>
• To do right justification, you have to create a division within the code:
• <div><div align=“right”>Content</div>
42
HTML Headings
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<p>This is some other text.</p>
<hr>
<p>This is some other text.</p>
</body>
</html>
 <h1> headings should be used for main headings, followed by <h2> headings, then the less
important <h3>, and so on.
 The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
 The <hr> element is used to separate content (or define a change) in an HTML page
43
Coding HTML
Paragraph tags
• Insert the <p> tag at the beginning of each
paragraph and </p> at the end.
• Otherwise, lines of text will appear as a single
paragraph in browser, even if you have line breaks
in text file.
• To put a line break in, use the <br> tag
44
HTML Paragraphs, Links
<!DOCTYPE html>
<html>
<body>
<p>If you want to go for job searching press the link is given below <br>
<a href="http://bdjobs.com/">This is a link</a>
</p>
</body>
</html>
 HTML paragraphs are defined with the <p> tag

 HTML links are defined with the <a> tag
 Most browsers will display HTML correctly even if you forget the end tag
45
<!DOCTYPE html>
<html>
The Poem Problem <body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
<!DOCTYPE html> He lies over the ocean.
<html>
He lies over the sea.
<body>
<p>In HTML, spaces and new lines are ignored:</p>
He lies over the ocean.
<p>
He lies over the ocean. Oh, bring back to me.
</pre>
</body>
</html>
He lies over the ocean. Output
The pre tag preserves both spaces and line breaks:

Oh, bring back to me.
</p> He lies over the ocean.
</body>
</html>
He lies over the ocean.
Output Oh, bring back to me.

In HTML, spaces and new lines are ignored:
 <pre> element is displayed in a fixed-
He lies over the ocean. He lies over the
sea. He lies over the ocean. Oh, bring back width font (usually Courier), and it
my Bonnie to me. preserves both spaces and line breaks
46
HTML Images
<!DOCTYPE html>
<html>
<body>
<img src="job.jpg" alt="image unload" width="104" height="142">
</body>
</html>
• HTML images are defined with the <img> tag.

• The source file (src), alternative text (alt), width, and height are provided as
attributes:
47
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value“
• The title Attribute is added to the <p> element. The value of the title attribute will be
displayed as a tooltip when you mouse over the paragraph
• HTML links are defined with the <a> tag. The link address is specified in the href attribute
• Size Attributes: HTML images are defined with the <img> tag. The filename of the source (src),
and the size of the image (width and height) are all provided as attributes.
• alt Attribute: The alt attribute specifies an alternative text to be used, when an image cannot
be displayed.
48
HTML Attributes List
Attribute Description
Specifies an alternative text for an image, when the image
alt
cannot be displayed
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as

a tool tip)
49
HTML Attributes Example
<!DOCTYPE html>
<html>
<body>
<h2>The title attribute</h2>
<p title="I'm a tooltip">
Mouse over paragraph to display title attribute
</p> <br>
<a href="https://www.bdjobs.com">This is a link</a> <br>
<img src="job.jpg" width="104" height="142"> <br>
<img src="jobs.jpg" alt="image unload" width="104" height="142">
</body>
</html>
50
Background Color
• <body bgcolor=“colorname”>
• No closing tag required
• You can use the names of colors: green, pink, etc.
• You can also use hex values for the colors - an

alphanumeric code that gives different shades of
green, pink, etc.
51
Background Color Example
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:red">
Background-color set by using red
</h2>
<h2 style="background-color:rgb(255,0,0);color:blue">
Background-color set by using rgb(255,0,0)
</h2>
<h2 style="background-color:rgb(0,0,0);color:white">
Background-color set by using rgb(0,0,0)
</h2>
<h2 style="background-color:#FF0000">
Background-color set by using #FF0000
</h2>
<h2 style="background-color:#000000;color:white">
Background-color set by using #000000
</h2>
</body>
</html>
52
HTML
Font tags
• You can format text using HTML font tags:
• <em></em> It renders as emphasized text.
• <strong></strong> Renders as bold text style.
• <font size=“#”></font> Renders text different sizes. The
attribute values range from 1 - 7, with 1 being the
smallest.
• <font color=“color”></font> Renders text a different
color
• You can combine the font color and font size tags as
follows:
• <font color=“color”; size=“#”></font>
53
HTML
Hyperlinks
• HTML files can contain hyperlinks to files on the
same computer or around the world.
• 3 types of links: external, internal, and “mail to”
54
HTML
External Links
• All Link tags require two components
• The location you want to link to
• The text that you want to appear on the page
• <a href=“http://www.ucsb.edu”>Link Text</a>
• In an external link, this is the web address of the
site
55
Internal Links
• An internal link is very similar to an external one.
• The difference is that you are linking to another
html file on your own server.
• You’ll first need to decide what to name the second
file - remember all lowercase, no spaces.
• Then construct a link with the name of your new
file: <a href=“page2.html”>Next</a>
56
Mail-to Links
• These allow interested viewers to contact you.
• <a href=“mailto:[email protected]”> Contact Me</a>
57
HTML
Images
• You can insert images into HTML code.
• You insert an image reference using the <img src =
> tag.
• For example, <img src = “zoo.gif”> inserts the
zoo.gif file. No closing tag needed.
• You can also specify the height and width of images
to make the rest of the page load faster. <img
src=“zoo.gif” height=100px width = 100px>
• Upload image files with your html files.
58

HTML Final

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Final

Uploaded by

Copyright:

Available Formats

HTML

• HTTP: Hypertext Transfer Protocol, the language

• URL: Universal Resource Locator, an address for

• When you look at a Web page, you are looking

• HTML files end in .HTM or HTML.

• Internet browsers interpret markup codes so that

• To see a file in its source format, view it in a text

• Markup codes are visible and editable.

• Tags must have closing tags. For example, <h1>This is

Differences Between HTML and XHTML

• HTML tags are element names surrounded by angle brackets:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

• The <html> element is the root element of an HTML page

• The <head> element contains meta information about the document

• The <title> element specifies a title for the document

• The <body> element contains the visible page content

• The <h1> element defines a large heading

• The <p> element defines a paragraph

• This tag tells the browser that the file is HTML.

• In Notepad, at the beginning of index.html,

• <title> (this element is required in an HTML document)

• Contains the title that appears in the browser

• Goes in the HEAD section.

• The title is not visible in the page itself.

• The format of the Title tag is

• After the </head> tag, type <body>.

• After the end of the text on the page, type

 HTML paragraphs are defined with the <p> tag

He lies over the ocean. Output

The pre tag preserves both spaces and line breaks:

Output Oh, bring back to me.

• HTML images are defined with the <img> tag.

• All HTML elements can have attributes

• Attributes provide additional information about an element

• Attributes are always specified in the start tag

• Attributes usually come in name/value pairs like: name="value“

title Specifies extra information about an element (displayed as

• No closing tag required

• You can use the names of colors: green, pink, etc.

• You can also use hex values for the colors - an

You might also like