HTML
Introduction
Basic Terminology
● The World Wide Web (WWW or simply the Web) is an information system that enables content sharing
over the Internet.
● The Web was invented by English computer scientist Tim Berners-Lee while at CERN in 1989 and opened
to the public in 1991.
● Servers and resources on the World Wide Web are identified and located through character strings called
uniform resource locators (URLs)
● The original and still very common document type is a web page formatted in Hypertext Markup Language
(HTML).
● This markup language supports plain text, images, embedded video and audio contents, and scripts (short
programs) that implement complex user interaction.
● Web applications are web pages that function as application software.
● The information in the Web is transferred across the Internet using HTTP.
● Multiple web resources with a common theme and usually a common domain name make up a website.
● A single web server may provide multiple websites.
Basic Terminologies (cont.)
● The Internet (or internet)[a] is the global system of interconnected computer networks that uses the
Internet protocol suite (TCP/IP)[b] to communicate between networks and devices.
● It is a network of networks that consists of private, public, academic, business, and government
networks of local to global scope, linked by a broad array of electronic, wireless, and optical
networking technologies.
● The Internet carries a vast range of information resources and services, such as the interlinked
hypertext documents and applications of the World Wide Web (WWW), electronic mail, telephony,
and file sharing.
Web Browser
● The purpose of a web browser is to read HTML documents and
display them correctly.
● A browser does not display the HTML tags, but uses them to
determine how to display the document:
● Examples of Web browsers are Chrome, Edge, Firefox, Safari etc.
What is HTML?
● HTML is the standard markup language for creating Web pages.
● HTML stands for Hyper Text Markup Language
● HTML is the standard markup language for creating Web pages
● HTML describes the structure of a Web page
● HTML consists of a series of elements
● HTML elements tell the browser how to display the content
● HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.
History of HTML
Year Version Year Version
1989 Tim Berners-Lee invented www 2012 WHATWG HTML5 Living Standard
1991 Tim Berners-Lee invented HTML 2014 W3C Recommendation: HTML5
1993 Dave Raggett drafted HTML+ 2016 W3C Candidate Recommendation:
HTML 5.1
1995 HTML Working Group defined HTML
2.0 2017 W3C Recommendation: HTML5.1
2nd Edition
1997 W3C Recommendation: HTML 3.2
2017 W3C Recommendation: HTML5.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
Learn HTML Using Notepad or TextEdit
● Web pages can be created and modified by using professional HTML
editors.
● However, for learning HTML it is recommended to use a simple text
editor like Notepad (PC) or TextEdit (Mac).
● Using a simple text editor is a good way to learn HTML.
● Follow the steps below to create your first web page with Notepad or
TextEdit.
●
1. Step 1: Open Notepad (PC)/ TextEdit (Mac)
2. Step 2: Write Some HTML Code.
3. Step 3: Save the HTML Page with .html or .htm extension
4. Step 4: View the HTML Page in Your Web Browser
Example (HTML Code)
<!DOCTYPE html>
<body>
<html>
<head>
<h1>My First Heading</h1>
<title>Page Title</title>
<p>My first paragraph.</p>
</head>
</body>
</html>
Explaination
● The <!DOCTYPE html> declaration defines that this document is an HTML5
document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
● The <h1> element defines a large heading
● The <p> element defines a paragraph
HTML Documents
● All HTML documents must start with a document type declaration:
<!DOCTYPE html>.
● 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 <!DOCTYPE> declaration is not case sensitive.
● The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
● 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
An HTML element is defined by a start tag, some content, and an end tag.
Syntax:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Nested HTML Elements
● HTML elements can be nested (this means that elements can contain other
elements).
● All HTML documents consist of nested HTML elements.
● The following example contains four HTML elements (<html>, <body>, <h1> and
<p>): Example
● The <body> element defines the document's body.
● It has a start tag <body> and an end tag </body>.
● Then, inside the <body> element there are two other elements: <h1> and <p>:
● Never Skip the End Tag
● Some HTML elements will display correctly, even if you forget the end tag:
● Unexpected results and errors may occur if you forget the end tag!
● Empty HTML Elements
● HTML elements with no content are called empty elements.
● The <br> tag defines a line break, and is an empty element without a closing tag:
● HTML is Not Case Sensitive
● HTML tags are not case sensitive: <P> means the same as <p>.
● The HTML standard does not require lowercase tags, but W3C recommends lowercase in
HTML, and demands lowercase for stricter document types like XHTML.
HTML Attributes
● HTML attributes provide additional information about HTML elements.
● All HTML elements can have attributes
● Attributes are always specified in the start tag
● Attributes usually come in name/value pairs like: name="value"
● The href attribute of <a> specifies the URL of the page the link goes to.
<a href="https://www.google.com">Visit Google</a>
● The src attribute of <img> specifies the path to the image to be displayed
<img
src="https://www.google.com/imgres?q=school&imgurl=https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fstatic.vecteezy.com%2Fsyste
m%2Fresources%2Fpreviews%2F004%2F641%2F880%2Fnon_2x%2Fillustration-of-high-school-building-s
chool-building-free-vector.jpg&imgrefurl=https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwww.vecteezy.com%2Ffree-vector%2Fscho
ol-building&docid=f_Sec22alM8Z0M&tbnid=pPv6G8RMFrKNHM&vet=12ahUKEwidnuzwgYqHAxX4T2wGHU3RD44Q
M3oECFEQAA..i&w=1183&h=980&hcb=2&ved=2ahUKEwidnuzwgYqHAxX4T2wGHU3RD44QM3oECFEQAA">
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website. Example:
src="https://www.google.com/images/img_girl.jpg".
2. Relative URL - Links to an image that is hosted within the website. If the URL begins with a slash, it will be
relative to the domain. Example: src="/images/img_girl.jpg".
● The width and height attributes of <img> provide size information for images
<img src="img_girl.jpg" width="300" height="500">
● The alt attribute of <img> provides an alternate text for an image
<img src="img_girl.jpg" alt="This is text alternate to the image">
● The style attribute is used to add styles to an element, such as color, font, size,
and more
<p style="color:red;">This is a red paragraph.</p>
● The title attribute defines some extra information about an element
● The value of the title attribute will be displayed as a tooltip when you mouse over
the element:
<p title="I'm a tooltip">This is a paragraph.</p>
● HTML headings are titles or subtitles that you want to display on a webpage.
● HTML headings are defined with the <h1> to <h6> tags.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
● <h1> defines the most important heading. <h6> defines the least important heading.
● Headings Are Important
Why??
● Search engines use the headings to index the structure and content of your
web pages.
● Users often skim a page by its headings. It is important to use headings to
show the document structure.
● <h1> headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.
● Each HTML heading has a default size. But, we can specify the size for any heading
with the style attribute, using the CSS font-size property:
<h1 style="font-size:80px;">Heading 1</h1>
HTML Paragraphs
● The HTML <p> element defines a paragraph.
● A paragraph always starts on a new line, and browsers automatically add
some white space (a margin) before and after a paragraph.
<p>This is a paragraph.</p>
<p>This is Second paragraph.</p>
<p>This is Third paragraph.</p>
HTML Display
● You cannot be sure how HTML will be displayed.
● Large or small screens, and resized windows will create different results.
● With HTML, you cannot change the display by adding extra spaces or extra
lines in your HTML code.
● The browser will automatically remove any extra spaces and lines when the
page is displayed:
HTML Horizontal Rules
● 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.
● The <hr> tag is an empty tag, which means that it has no end tag.
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
● The HTML <br> element defines a line break.
● Use <br> if you want a line break (a new line) without starting a new
paragraph:
<p>This is<br>a paragraph<br>with line breaks.</p>
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font, and it
preserves both spaces and line breaks:
<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 Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and
more.
Example
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
Output
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style
attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background
color for an HTML element.
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Example–Set background color for two different elements:
<html><body>
<h1 style="background-color:powderblue;">This is a
heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body></html>
Text Color
The CSS color property defines the text color for an HTML
element:
<!DOCTYPE html> <html> <body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body></html>
Fonts-The CSS font-family property defines the font to be used for an HTML
element:
<!DOCTYPE html><html><body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body></html>
Text Size–The CSS font-size property defines the text size for an HTML
element:
<!DOCTYPE html><html><body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body></html>
Text Alignment–The CSS text-align property defines the horizontal text
alignment for an HTML element:
<!DOCTYPE html><html><body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body></html>
Summary
● Use the style attribute for styling HTML elements
● Use background-color for background color
● Use color for text colors
● Use font-family for text fonts
● Use font-size for text sizes
● Use text-align for text alignment
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
HTML <b> Elements
The HTML <b> element defines bold text, without any extra importance.
<html><body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body></html>
HTML <strong> Elements
The HTML <strong> element defines text with strong importance. The content inside is
typically displayed in bold.
<html><body>
<p>This text is normal.</p>
<p><strong>This text is important!</strong></p>
</body></html>
HTML <i> Elements
The HTML <i> element defines a part of text in an alternate voice or mood. The
content inside is typically displayed in italic.
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</html>
HTML <em> Elements
The HTML <em> element defines emphasized text. The content inside is typically
displayed in italic.
A screen reader will pronounce the words in <em> with an emphasis, using verbal
stress.
<html><body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body></html>
HTML <small> Element
The HTML <small> element defines smaller text:
<html>
<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
HTML <del> Element
The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text:
<html>
<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:
<html>
<body>
<p>My favorite color is <del>red.</del> <ins>blue</ins></p>
</body>
</html>
HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O:
<html><body>
<p>This is <sub>subscripted</sub> text.</p>
</body></html>
HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text
appears half a character above the normal line, and is sometimes
rendered in a smaller font. Superscript text can be used for footnotes,
like WWW[1]:
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
HTML Formatting Elements Summary
Formatting elements were designed to display special types of text:
● <b> - Bold text
● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text
HTML
Some more useful tags
HTML <blockquote> for Quotations
● The HTML <blockquote> element defines a section that is quoted from
another source.
● Browsers usually indent <blockquote> elements.
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive.
As the world's leading conservation organization, WWF works in
nearly 100 countries. At every level, we collaborate with people
around the world to develop and deliver innovative solutions
that protect communities, wildlife, and the places in which they
live.
</blockquote>
HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
“<p>WWF's goal is to: <q>Build a future where people live in harmony
with nature.</q></p>”
HTML <abbr> for Abbreviations
● The HTML <abbr> tag defines an abbreviation or an acronym, like
"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
● Marking abbreviations can give useful information to browsers,
translation systems and search-engines.
● Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.
“<p>The <abbr title="World Health Organization">WHO</abbr>
was founded in 1948.</p>”
HTML <address> for Contact Information
● The HTML <address> tag defines the contact information for the
author/owner of a document or an article.
● The contact information can be an email address, URL, physical
address, phone number, social media handle, etc.
● The text in the <address> element usually renders in italic, and
browsers will always add a line break before and after the
<address> element.
HTML <cite> for Work Title & <bdo> for Bi-Directional Override
● The HTML <cite> tag defines the title of a creative work (e.g. a
book, a poem, a song, a movie, a painting, a sculpture, etc.).
● The text in the <cite> element usually renders in italic.
●
● BDO stands for Bi-Directional Override.
● The HTML <bdo> tag is used to override the current text direction:
Example for <address>,<cite> and <bdo>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Example for <address>,<cite> and <bdo>
CITE
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
BDO
<bdo dir="rtl">This text will be written from right to
left</bdo>
HTML Comment Tag
● HTML comments are not displayed in the browser, but they can help
document your HTML source code.
● With comments you can place notifications and reminders in your
HTML code:
● Comments can be used to hide content.
● This can be helpful if you hide content temporarily:
● Everything between the <!-- and the --> will be hidden from the
display.
HTML Comment Tag
● Comments can be used to hide parts in the middle of the HTML
code.
● E.g
<p>This <!-- great text --> is a paragraph.</p>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
HTML Links - Hyperlinks
● HTML links are hyperlinks.
● You can click on a link and jump to another document.
● When you move the mouse over a link, the mouse arrow will turn
into a little hand.
● A link does not have to be text. A link can be an image or any other
HTML element!
● Syntax :
<a href="url">link object</a>
HTML Links - Hyperlinks
● The most important attribute of the <a> element is the href
attribute, which indicates the link's destination.
● The link object is the part that will be visible to the reader.
● Clicking on the link object, will send the reader to the specified URL
address.
● An unvisited link is underlined and blue
● A visited link is underlined and purple
● An active link is underlined and red
HTML Links - The target Attribute
● By default, the linked page will be displayed in the current browser
window. To change this, you must specify another target for the
link.
● The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
● _self - Default. Opens the document in the same window/tab as it
was clicked
● _blank - Opens the document in a new window or tab
● _parent - Opens the document in the parent frame
● _top - Opens the document in the full body of the window
Absolute URLs vs. Relative URLs
● Both examples above are using an absolute URL (a full web
address) in the href attribute.
● A local link (a link to a page within the same website) is specified
with a relative URL (without the "https://www" part):
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
<a href="Destination path of web page you want to refer">
<img src="full destination of image with its proper
extension" alt="Alternate text in case image fails to load
on web page" style="width:42px;height:42px;">
</a>
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the
user's email program (to let them send a new email):
<html><body>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let them send a new
email), use mailto: inside the href attribute:</p>
<p><a href="mailto:[email protected]">Send email</a></p>
</body></html>
Create a Bookmark in HTML
● Bookmarks can be useful if a web page is very long.
● To create a bookmark - first create the bookmark, then add a link to it.
● When the link is clicked, the page will scroll down or up to the location
with the bookmark.
Example
● First, use the id attribute to create a bookmark:
<h2 id="C4">Chapter 4</h2>
● Then, add a link to the bookmark ("Jump to Chapter 4"), from within
the same page:
<a href="#C4">Jump to Chapter 4</a>
● You can also add a link to a bookmark on another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
