1.1 What is HTML
·
HTML is an acronym which stands for Hyper Text
Markup Language.
· Hyper Text: Hyper Text simply means
"Text within Text". A text has a link within it, is a hypertext.
Every time when you click on a word which brings you to a new web page, you have
clicked on a hypertext.
· Markup language: A markup language
is a programming language that is used make text more interactive and dynamic.
It can turn a text into images, tables, links etc.
1.2 Features
of HTML
1) It is a very easy and simple language.
It can be easily understood and modified.
2) It is very easy to make effective
presentation with HTML because it has a lot of formatting tags.
3) It is a markup language so
it provides a flexible way to design web pages along with the text.
4) It facilitates programmers to add link on
the web pages (by html anchor tag), so it enhances the interest of
browsing of the user.
5) It is platform-independent because
it can be displayed on any platform like Windows, Linux and Macintosh etc.
6) It facilitates the programmer to
add Graphics, Videos, and Sound to the web pages which makes
it more attractive and interactive.
1.3 How Markup Works
HTML is a markup language.
Writing in a markup language means that you start with the text of your page
and add special tags around words and paragraphs. The tags indicate the
different parts of the page and produce different effects in the browser.
HTML has a defined set of tags
you can use. You can’t make up your own tags to create new styles or features.
And just to make sure that things are really confusing, various browsers
support different sets of tags.
1.4 How Markup Works
HTML
is a markup language. Writing in a markup language means that you start
with the text of your page and add special tags around words and paragraphs.
The tags indicate the different parts of the page and produce different effects
in the browser.
HTML
has a defined set of tags you can use. You can’t make up your own tags to
create new styles or features. And just to make sure that things are really
confusing, various browsers support different sets of tags.
1.5 Structure of HTML Document
The main parts of our element are:
1.
The
opening tag: This consists of the name of
the element (in this case, p), wrapped in opening and closing angle
brackets. This states where the element begins or starts to take effect —
in this case where the start of the paragraph is.
2.
The
closing tag: This is the same as the
opening tag, except that it includes a forward slash before the element name.
This states where the element ends — in this case where the end of the
paragraph is. Failing to include a closing tag is a common beginner error and
can lead to strange results.
3.
The
content: This is the content of the
element, which in this case is just text.
4.
The
element: The opening tag plus the
closing tag plus the content equals the element.
1.6 Structuring Your HTML
HTML defines three tags
that are used to define the page’s overall structure and provide some simple
header information . These three tags—<html>, <head>, and
<body>—makeup the basic skeleton of every web page. They also provide
simple information about the page (such as its title or its author) before
loading the entire thing. The page structure tags don’t affect what the page
looks like when it’s displayed; they’re only there to help browsers.
The
<html>Tag
The first page structure tag in
every HTML page is the <html> tag. It indicates that the content of this
file is in the HTML language.
All the text and HTML elements in
your web page should be placed within the beginning and ending HTML tags, like
this:
The <html> tag serves as a
container for all of the tags that make up the page.
The <head>Tag
The <head> tag is a
container for the tags that contain information about the page, rather than
information that will be displayed on the page. Generally, only a few tags are
used in the <head> portion of the page (most notably, the page title,
described later). You should never put any of the text of your page into the
header (between <head> tags).
Here’s a typical example of how you properly use the <head> tag.
The <body>Tag
The content of your HTML page
(represented in the following example as ...your page...) resides within
the <body> tag. This includes all the text and other content
(links,pictures, and so on). In combination with the <html> and
<head> tags, your page will look something like this:
You might notice
here that the tags are nested. That is, both <body> and </body>
tags go inside the <html> tags; the same with both <head> tags. All
HTML tags work this way, forming individual nested sections of text. You should
be careful never to overlap tags.
Whenever you close an HTML tag,
make sure that you’re closing the most recent unclosed tag.
The Title
Each HTML page needs a title to
indicate what the page describes. It appears in the title bar of the browser
when people view the web page. The title is stored in your browser’s bookmarks
and in search engines when they index your pages. Use the<title>tag to give
a page a title.
<title> tags are placed
within the<head>tag and are normally used to describe the contents of the
page.
Each page can have only one
title, and that title can contain only plain text; that is, no other tags
should appear inside the title.
1.7 HTML Elements
·
HTML elements are the fundamentals of
HTML. HTML documents are simply a text file made up of HTML elements. These
elements are defined using HTML tags.
·
An HTML element is an
individual component of an HTML document. Any given web page consists of many
HTML elements.
·
HTML tags tell your browser which
elements to present and how to present them. Where the element appears is
determined by the order in which the tags appear.
·
There are two important categories
of elements in HTML which you should know about. They are block-level elements
and inline elements.
ü Block-level elements form
a visible block on a page — they will appear on a new line from whatever
content went before it, and any content that goes after it will also appear on
a new line. Block-level elements tend to be structural elements on the page
that represent, for example, paragraphs, lists, navigation menus, footers,
etc. A block-level element wouldn't be nested inside an inline element, but it
might be nested inside another block-level element.
ü Inline elements
are those that are contained within block-level elements and surround only
small parts of the document’s content, not entire paragraphs and groupings of
content. An inline element will not cause a new line to appear in the
document; they would normally appear inside a paragraph of text, for
example an <a> element (hyperlink) or emphasis elements such as <em> or <strong>.
Example
1.8 Attributes
·
An attribute is used to provide
extra or additional information about an element.
·
All HTML elements can have
attributes. Attributes provide additional information about an element
·
It takes two parameters: a
name and a value. These define the properties of the element and is
placed inside the opening tag of the element. The name parameter takes the name
of the property we would like to assign to the element and the value takes the
properties value or extent of the property names that can be aligned over the
element.
·
Every name has some value that must
be written within quotes
Syntax:
<element
attribute_name="attribute_value">
1. src
Attribute :If we want to insert an image into a
webpage, then we need to use the tag and the src attribute. We will need
to specify the address of the image as the attribute’s value inside the double
quote.
2. alt
Attribute : As the name goes this is an
alternate tag that is used to show or display something if the primary attribute
i.e., the tag, fails to display the value assigned to it. This can also be
used to describe the image to a developer who is actually sitting at the coding
end.
3. The
width and height Attribute: This
attribute is used to adjust the width and height of an image.
4. The id
Attribute: This attribute is used to provide a
unique identification to an element. Situations may arise when we will need to
access a particular element which may have a similar name as the others. In
that case, we provide different ids to various elements so that they can be
uniquely accessed.
5. The
title Attribute: The title attribute is used to explain an
element on hovering the mouse over it. The behavior differs with various
elements but generally the value is displayed while loading or hovering mouse
pointer over it.
6. The href
Attribute: This attribute is used to specify a
link to any address. This attribute is used along with <a> tag.
The link put inside the href attribute gets linked to the text displayed inside
the<a> tag.
On clicking on the text we will be redirected to the link. By default, the link
gets opened in the same tag but by using the attribute and setting its
value to “_blank”, we will be redirected to another tab or another
window based on the browsers configuration.
7. The style
Attribute: This attribute is used to provide
various CSS(Cascading Style Sheets) effects to the HTML elements such as
increasing font-size, changing font-family, coloring etc.
8. The lang
attribute: The language is declared with
the lang attribute. Declaring a language is can be important for accessibility
applications and search engines.
<!DOCTYPEhtml>
<htmllang="en-US">
<body>
...
</body>
</html>
|
It was a great information.Thanks for sharing this post
ReplyDeleteFull Stack Training in Chennai | Certification | Online Training Course| Full Stack Training in Bangalore | Certification | Online Training Course | Full Stack Training in Hyderabad | Certification | Online Training Course | Full Stack Developer Training in Chennai | Mean Stack Developer Training in Chennai | Full Stack Training | Certification | Full Stack Online Training Course
Thanks for the information.It was great.
ReplyDeleteFull-stack training in Nagpur