Topic 7: Understanding The Functionality of HTML What Is HTML?

Topic 7: Understanding the functionality of HTML
What is HTML?
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for
creating Web pages. Being a markup language HTML describes the structure of Web pages using
markup. HTML elements are the building blocks of HTML pages and they are represented by tags.
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on. The browser
of the computer does not display the tags but use them to render the content of the page which is
known as the presentation.
HTML Editors
HTML can be written using a Notepad or Text Edit. The HTML code should be properly written
in here and saved separately. To run the HTML code, the same document should be saved with
the HTML extension.
HTML Tags
HTML tags are element names surrounded by angle brackets which is written in the editor. These
normally come in pairs with an opening and a closing tag. The end tag is written like the start tag,
but with a back slash inserted before the tag name
First program
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Doctypes in HTML
All HTML documents must start with a document type declaration: <!DOCTYPE html>. This is
used with the HTML version 5. The <!DOCTYPE> declaration represents the document type, and
helps browsers to display web pages correctly. It must only appear once, at the top of the page
(before any HTML tags). The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
HTML Elements
 The HTML element is everything from the start tag to the end tag and defines the whole
document. It has opening tag <html> and a closing tag </html>.The HTML element is
everything from the start tag to the end tag
 The <body> element defines the document body. It has a opening tag <body> and a
closing tag </body>. The element content is two other HTML elements (<h1> and <p>).
 HTML elements with no content are called empty elements. <br> is an empty element
without a closing tag
HTML Basic
HTML tags are not case sensitive
 HTML Headings: HTML headings are defined with the <h1> to <h6> tags. <h1> defines
the most important heading. <h6> defines the least important heading
 HTML Paragraphs: HTML paragraphs are defined with the <p> tag
 HTML Links: HTML links are defined with the <a> tag. The link's destination is specified
in the href attribute. Attributes are used to provide additional information about HTML
elements. Double quotes around attribute values are the most common in HTML, but single
quotes can also be used. In some situations, when the attribute value itself contains double
quotes, it is necessary to use single quotes:
 HTML Images: HTML images are defined with the <img> tag. The source file (src),
alternative text (alt), width, and height are provided as attributes.
 HTML Buttons: HTML buttons are defined with the <button> tag
 HTML Lists: HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list items)
Example: 1
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<h2>This is heading 2</h2>
<p>My first paragraph.</p>
<a href="https://www.w3schools.com">This is a link</a>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
<button>Click me</button>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML Attributes
All HTML elements can have attributes and they provide additional information about an element.
These are always specified in the start tag and usually come in name/value pairs
like: name="value"
Main attributes used with HTML

 Href: HTML links are defined with the <a> tag. The link address is specified in
the href attribute.
<a href="https://www.w3schools.com">This is a link</a>
 src :HTML images are defined with the <img> tag. The filename of the image source is
specified in the src attribute.
<img src="img_girl.jpg">
 The width and height :Images in HTML have a set of size attributes, which specifies the
width and height of the image. The image size is specified in pixels.
<img src="img_girl.jpg" width="500" height="600">
 alt :The alt attribute specifies an alternative text to be used, when an image cannot be
displayed.
<img src="img_girl.jpg" alt="Girl with a jacket">
 Style: The style attribute is used to specify the styling of an element, like color, font, size
etc.
<p style="color:red">I am a paragraph</p>
 Lang:The language of the document can be declared in the <html> tag. Declaring a
language is important for accessibility applications (screen readers) and search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
 Title: a 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.
<p title="I'm a tooltip">
This is a paragraph.
</p>
HTML Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the most important
heading. <h6> defines the least important heading. In order to increase the standard font size of
the heading style tag can be used.
<h1 style="font-size:60px;">Heading 1</h1>
Heading are important because 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.
HTML Horizontal Rules
The <hr> element is used to separate content (or define a change) in an HTML page:

<p>This is some text.</p>
<hr>
<p>This is some other text.</p>
<hr>
The HTML <head> Element
The <head> element is a container for metadata. HTML metadata is data about the HTML
document. Metadata is not displayed.
In order to View HTML Source Code, the user has to Right-click in an HTML page and select
"View Page Source”. and also if you want to Inspect an HTML Element, Right-click on an element
(or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of
HTML Paragraphs
The HTML <p> element defines a paragraph. Most browsers will display HTML correctly even
if you forget the end tag. The <br> is used to have a line break (a new line) without starting a
new paragraph. As with <p> tag there is no proper formatting <Pre> tag is used. The text inside
a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces
and line breaks
Ex: <pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Style attribute
 The style of an HTML element, can be done with the style attribute.
<tagname style="property:value;">
 The background-color property defines the background color for an HTML element
<body style="background-color:powderblue;">
 The color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
 The font-family property defines the font to be used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
 The font-size property defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
 The text-align property defines the horizontal text alignment for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML Text Formatting
HTML also defines special elements for defining text with a special meaning. Formatting elements
were designed to display special types of text:
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text

<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
Example 3:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<b>This text is bold</b>
<strong>This text is strong</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<h2>HTML <small>Small</small> Formatting</h2>
<h2>HTML <mark>Marked</mark> Formatting</h2>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite <ins>color</ins> is red.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
HTML Quotation and Citation Elements
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document

<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
Example 4
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<bdo dir="rtl">This text will be written from right to left</bdo>
</body>
</html>
HTML Comments
Comment tags are used to insert comments in the HTML source code. Comments are not displayed
by the browser, but they can help document your HTML source code. With comments you can
place notifications and reminders in your HTML.

HTML colours
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
 RGB Value
In HTML, a color can be specified as an RGB value, using this formula.
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. For
example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the
others are set to 0. To display the color black, all color parameters must be set to 0, like this: rgb(0,
0, 0). To display the color white, all color parameters must be set to 255, like this: rgb(255, 255,
255).
 HEX Value
In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as
decimal 0-255). For example, #ff0000 is displayed as red, because red is set to its highest value
(ff) and the others are set to the lowest value (00).
CSS
HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core
technologies for building Web pages. HTML provides the structure of the page, CSS the (visual
and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are
the basis of building Web pages and Web Applications.
|CSS is the language for describing the presentation of Web pages, including colors, layout, and
fonts. It allows one to adapt the presentation to different types of devices, such as large screens,
small screens, or printers. The separation of HTML from CSS makes it easier to maintain sites,
share style sheets across pages, and tailor pages to different environments. This is referred to as
the separation of structure which is of HTML (or: content) from presentation with CSSS.

Topic 7: Understanding The Functionality of HTML What Is HTML?

Uploaded by

Copyright:

Available Formats

Topic 7: Understanding The Functionality of HTML What Is HTML?

Uploaded by

Document Information

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

Topic 7: Understanding The Functionality of HTML What Is HTML?

Uploaded by

Copyright:

Available Formats

Topic 7: Understanding the functionality of HTML

Main attributes used with HTML

<h1 style="font-size:60px;">Heading 1</h1>

HTML Horizontal Rules

<h1>This is heading 1</h1>

The HTML <head> Element

HTML Text Formatting

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML Quotation and Citation Elements

<abbr> Defines an abbreviation or acronym

<address> Defines contact information for the author/owner of a document

<blockquote> Defines a section that is quoted from another source

<cite> Defines the title of a work

<q> Defines a short inline quotation

In HTML, a color can be specified as an RGB value, using this formula.

rgb(red, green, blue)

In HTML, a color can be specified using a hexadecimal value in the form:

You might also like