Professional Documents
Culture Documents
UNIT I
Fundamentals of HTML: Understanding Elements: Root Elements-Metadata
To create a Web page using HTML, you must be familiar with the HTML fundamentals,
such as elements and the content embedded within the elements, attribute and datatypes.
Elements in an HTML document instruct the Web browser about how it should interpret
the document.
The attributes of the element provide additional information about it, such as its behavior
and properties.
The content is displayed on the browser according to the properties and behaviors
defined by the element and attributes.
Basic Reference for HTML
https://www.w3schools.com/html/html_intro.asp
https://www.w3schools.com/html/html_elements.asp
https://www.w3schools.com/html/html_attributes.asp
https://www.tutorialspoint.com/html/html_overview.htm Structure
UNDERSTANDING ELEMENTS
Elements are the building blocks of an HTML document.
The browser interprets an HTML document on the basis of the element types that are added in
the document.
An HTML document is displayed with all the properties specified by the elements embedded
in it.
The structure of an HTML element consists of three basic components: an opening/starting
tag, a closing/ending tag and the content of the element enclosed between the opening and the
closing tag
e.g <p>
This is the first paragraph
</p>
The names of the tags are not case sensitive.
HTML elements are predefined
HTML Elements
The HTML element is everything from the start tag to the end tag:
Root element - category contains the main element of the HTML, which is the HTML
element.
Metadata element - category contains elements that define the presentation or behavior of
the entire HTML document.
Section elements - category contains elements that are used to represent various sections of
the HTML document.
Heading elements -category contains elements that represent headings in the HTML
document.
Flow elements - category contains elements that are used in the BODY element of an HTML
document to define the structure of the document.
Phrasing element - category contains elements that are used to display text of an HTML
document.
Embedded elements - category contains elements that are used to embed content in the
HTML
Interactive elements - category contains elements that are used for user interactivities.
HTML elements can be categorized as
1) Root
2) Metadata
3) Section
4) Heading
5) Flow
6) Phrasing
7) Embedded
8) Interactive
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories
1.ROOT ELEMENTS
Root elements represent the main or the starting element that should be present in
all HTML documents.
The <html> tag represents the root of an HTML document.
It is the first element that comes after the <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser about what
document type to expect.
Doctype stands for Document Type Declaration. It informs the web browser about
the type and version of HTML used in building the web document.
https://www.w3schools.com/tags/tag_doctype.asp
Attributes of the HTML Elements
Attribute Value Description New in
HTML 5
class Class-name Specifies the class for an element in an HTML document No
dir Ltr-left to right Specifies the direction of text for the content in an element No
Rtl- right to left
id Unique-id Specifies a unique alphanumeric identifier for an element No
contenteditable True,false Specifies whether or not you can edit the content in Yes
https://www.w3schools.com/tags/
tryit.asp?filename=tryhtml5_glob
the document
al_spellcheck
draggable True,false,auto Specifies whether or not you can drag an element Yes
https://www.w3schools.com/tags/
tryit.asp?filename=tryhtml5_glob
al_draggable
https://codescracker.com/html/html-root-elements.htm
2.Metadata Elements
The metadata elements are used to set the presentation or behavior of the remaining
content of a document.
Metadata elements are:
1) TITLE
2) BASE
3) LINK
4) COMMAND
5) META
6) NOSCRIPT
7) SCRIPT
8) STYLE
https://www.ques10.com/p/29258/list-and-explain-metadata-elements-used-in-html-5/
1.TITLE Element
The TITLE element contains the title of the HTML document, which appears in the title bar of the
web browser.
This element is used by search engines to select the document and display it in the search result
Each HEAD element should contain a TITLE element.
Attributes of the TITLE Elements
For Example Attribute Description
<!DOCTYPE HTML>
class Specifies the class of an element in an HTML document.(class attribute is
<html> mostly used to point to a class in a style sheet )
.. https://www.w3schools.com/tags/att_class.asp#:~:text=Definition%
.. 20and%20Usage,elements%20with%20a%20specified%20class
<head> Id Specifies a unique alphanumeric identifier for an element in the
document
<title> An example</title> https://www.w3schools.com/html/html_id.asp#:~:text=The%20id%
</head> 20attribute%20specifies%20a,element%20with%20the%20specific
%20id
… .
</html> Lang Specifies the language used by the element
https://www.w3schools.com/tags/att_global_lang.asp
Style Specifies an inline style to render an element in the document
https://www.w3schools.com/tags/att_global_style.asp
2. BASE Element
The Base element is used to specify a default URL and target for all the links in the
HTML document.
Set a base URL for all the links once at the top of the document by using the BASE
element.
This element appears within the HEAD element of the document and should be used
as the first element in the HEAD element.
The HTML <base> tag is used to specify a base URI, or URL, for relative links.
For example, you can set the base URL once at the top of your page, then all subsequent
relative links will use that URL as a starting point.
https://www.w3schools.com/tags/tag_base.asp
Example
<!DOCTYPE HTML>
<HTML>
<HEAD>
<base href=“base_url” target=“frame_name”>
</HEAD> Attributes of the BASE Elements
</HTML> Attribute Description
href Specifies a URL in an HTML document
https://www.w3schools.com/tags/att_href.asp
target Specifies the locations where the links of an HTML
document open.
• _blank - Opens the link in a new window
• _parent – Opens the link in the same frame the link is
clicked
• _self - Opens the link in the present frameset
• _top – Opens the link in the same window
• <framename> - Opens the link in the respective frame
https://www.w3.org/TR/html401/present/frames.html
3.LINK ELEMENT
The HTML <link> tag is used for defining a link an HTML document to other HTML
documents.
It is placed in the <head> section of the document.
It also defines the relationship between two different HTML documents
The LINK element contains the href attribute to specify the destination URL of a link
The href attribute is a required attribute that must have a valid URL
If this attribute is not specified, then the LINK element does not define a link
The LINK element also contains the rel attribute that defines the relationship of the
linked documents
https://www.tutorialspoint.com/html/html_link_tag.htm
For example:
<HEAD>
<LINK href=“file_name.html” rel=“stylesheet”>
</HEAD>
Sizes Any number Specifies the size of the linked resource. Yes
Only for rel="icon“
https://www.w3schools.com/tags/att_link_
sizes.asp
type The mime_type, for tells the browser what kind of resource No
example:text/javascript you are linking to.
text/ css
https://html.com/attributes/link-type/#ixzz6mZW0
fFME
4.META ELEMENT
<MENU label=“cars”>
<COMMAND type=“radio” radiogroup=“cars” label=“ferrari”>
<COMMAND type=“radio” radiogroup=“cars” label=“lamborghini”>
</MENU>
Attribute Value Description
type Command (default), Specifies the type of command
checkbox, radio
label Some_text Specifies the name of the command that is to be displayed on
https://way2tutorial.com/html/tag/html_ an HTML page
command_tag.php
icon URI Specifies the location of the image that is to be displayed as
https://www.w3schools.com/howto/how the icon of an HTML page
to_css_icon_buttons.asp https://fontawesome.com/v4.7.0/examples/
disabled [Empty string], disabled Specifies a value that indicates whether a command is disabled
https://www.w3schools.com/tags/att_dis or not
abled.asp
Checked [Empty string], checked used to indicate whether an element should be checked when
https://www.geeksforgeeks.org/html-che the page loads up
cked-attribute/
radiogroup Some_text Specifies a string value that represents the name of the group
https://developer.mozilla.org/en-US/doc of commands whose type attributes has radio as its value
s/Web/HTML/Element/input/radio
Title Some_text Specify extra details of element contain, this will display as a
https://www.w3schools.com/tags/tryit.as "tooltip" for an elements.
p?filename=tryhtml5_global_title
6.NOSCRIPT Element
<noscript> tag defines an alternate content to be displayed to users that have disabled scripts in
their browser or have a browser that doesn't support script.
If the JavaScript is enabled or supported by the web browser, the NOSCRIPT element is not
considered.
<SCRIPT>
document.write(“Have a good day”)
</SCRIPT>
<NOSCRIPT>JavaScript is disabled or not supported on your browser
</NOSCRIPT>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_noscript
7.SCRIPT Element
The SCRIPT element is used to declare a script, such as JavaScript, within an HTML
document.
JavaScript interact with html elements in order to make interactive web user
interface.
https://www.tutorialspoint.com/html/html_javascript.htm
Attribute Value Description
The section elements are used to define the scope of headers, footers and
various other sections of an HTML document.
Different section elements are used to define different parts of a
document. The following is a list of section elements:
BOBY
SECTION
ARTICLE
NAV
ASIDE
HEADER
FOOTER
ADDRESS
The BODY Element
• The BODY element of the HTML document contains the main content of the
document.
• It includes text, hyperlinks, images and lists.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BOBY>
</HTML>
NAV Element
Defines a set of navigation links OR group of links.
Used in footer area
Service and contact information
<nav>
</nav>
The ARTICLE Element
• The ARTICLE element -introduced in HTML5 used to represent a section that contains the
information title and date of its creation.
• You an also display news article, a blog post or user’s comment section
<ARTICLE>
<HEADER>
Some heading content
</HEADER>
<p> some article content</p>
</ARTICLE>
https://www.w3schools.com/tags/tag_article.asp
• The HEADER element is used to provide the introductory content on an HTML page
• It can contain headings, paragraphs, links and other content
<HEADER>
<H1>Heading Level 1</H1>
<A href=“http://www.w3.org/TR/sections.html>Section</a>
<NAV>
<UL>
<LI><A href=“/articles”>Articles</A>
<LI><A href=“/discussion”>Discussions</A>
<LI><A href=“/download”>Download</A>
</UL>
</NAV>
</HEADER>
The FOOTER Element
<FOOTER>
<UL>
<LI>Home</LI>
<LI>Links</LI>
<LI>About</LI>
</UL>
</FOOTER>
SECTION-https://www.geeksforgeeks.org/html-section-tag/
NAV -https://www.w3schools.com/tags/tag_nav.asp
ARTICLE -https://www.geeksforgeeks.org/html5-article-tag/
HEADER-https://www.geeksforgeeks.org/html-5-header-tag/
#:~:text=The%20tag%20in%20HTML,but%20this%20is%20not
%20required
FOOTER -https://www.w3schools.com/tags/tag_footer.asp
ADDRESS -https://www.w3schools.com/tags/tag_address.asp
4.Heading elements
category contains elements that represent headings levels in the HTML document. They are
sometimes referred to collectively as <Hn> tags, n meaning any of the available heading
levels. H1 to H6.
HTML <hgroup> element represents a multi-level heading for a section of a document
(HTML 5)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup
<hgroup>
<h1>Calculus I</h1>
<h2>Fundamentals</h2>
</hgroup>
Describing Data Types
A data type refers to a set of data classified under a specific type or range of
values
some of the data types that are commonly used in programming language are
character, integer, floating point and Boolean.
Data types defined by Request for Comments (RFC) and Internet Assigned
Numbers Authority (IANA) documentation
http://john:doe@example.com:80/over/there/index.dtb;type=animel?name=
ferret#nose
• Path- Consists of sequence of text segments that are separated by forward slash
(/).
• File Name- Refers to any name that can be given to a targeted file. (which comes
after file name followed by dot (.))
• Query-Starts with question mark (?), when the URI requests program to run rather
than file to be accessed. Query represents the parameter to be passed into the server
side program.
• Audio/basis-audio file
• Application/octet-stream-binary file
Language code
• Is used to represent the code of various literal languages, which are
used to script the html document
• It is not case sensitive and is written by using the lang attributes used
in the html elements
<html lang=“hi">
...
</html>
Screen readers supporting this tag could switch to a British accent.
List of language code
• En- English
• Hi – hindi
• El-Greek
• De- German
• Ga- Irish
Character Set
To display an HTML page correctly, the browser must know what character set
(encoding) to use.
The character set is a set of standard characters taken from several languages and
scripts of the world, and are represented with unique code points.
These code points can be defined as the unique names and integers that are
assigned to the character sets for their unique identification.
Data types defined by W3C Specifications
• W3C is an international community that develops standards to ensure
long-term growth of the Web. W3C specifies five additional data
types for HTML, which include:
• Date Time
• Red Green Blue(RGB) Triplet
• Color names
• Link types
• Media types
DATE TIME FORMAT
• Datetime uses ISO date format(ISO 8601),that is YYYY-MM-
DDThh:mm:ssTZD
ALTERENATE- Refers to the substitute for the document in which the link occurs.
STYLE SHEET- Represents the external style sheet. You can select a style from
alternate style sheets by using the style sheet and alternate link types together.
element.
These characters are called as entities. HTML enables you to include such symbols in the content of
World Wide Web consortium(W3C) calls the character entities as character encodings.
There are some characters, such as Greek and Chinese, Which do not appear on the keyboard of
the user. Therefore, you cannot write them directly from the Keyword.
However, you can overcome this problem by using character entities in an HTML document.
The character entity is composed of the following parts in the sequential
manner.
1. Ampersand symbol(&)
2. Name of the entity
3. A terminating semicolon
APOSTROPHE ‘ '
UNDERSTANDING HORIZONTAL RULES
Horizontal rules are used to draw horizontal lines across the browser
window.
It is used to divide an HTML page into different horizontal sections.
Horizontal rules are required when you need to display different types of
content in the same HTML page in an distinct manner.
The <HR> element is used to represent the horizontal rule.
<HR>
UNDERSTANDING LINE BREAKS:
while writing text, it may be required to Have a line break at certain points .
For example, a situation where you need line break is when you write an
address .
Note: that line breaks are not used to create another paragraph.
They are only used to break a continuing line.
The <BR> element is used to define a line break in an HTML document.
UNDERSTANDING A PARAGRAPH:
• Generally, a new paragraph is started by pressing the ENTER key.
• However, in HTML, the browser does not understand the space
created by the ENTER key.
• Therefore, a special element or tag, known as the paragraph
element(p element) has to be inserted at the point from where you
want to begin a new paragraph.
• The paragraph tag is a container tag, which means it has both the
opening<p>and closing </p> tags.
UNDERSTANDING CITATIONS,QUOTATIONS AND DEFINITIONS:
• In HTML, a citations is used to display text in format that is different from
normal text. The text embedded within the citation element is normally displayed
in the italic form. A citation is normally required to quote statement or remarks of
an author. The citation element is defined by an opening <CITE> tag.
• The quotation tag is used to quote certain text within the quotation marks.
The quotation starts with an operating tag <q> and ends with a closing tag</q>.
• The definition element is used to list the definition of various terms.
The definition tag is composed of the following three tags:
DL- Represents a definition list that is used to list the number of definitions.
DT- Represents the terms in a definition.
DD- Represents definitions of the terms.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink