Introduction to HTML || Learn- Basics of Html || Html Interview Question...
“Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.” (Patrick McKenzie)
Introduction
Hello
everyone…! Welcome to TechEx BriHa. Today is the day of HTML! HTML is all about
structuring the data. It doesn’t concern itself with how something looks;
that’s what CSS is for, which we’ll learn through next videos.
Just
like a building is merely as strong as its foundation, HTML is that the
skeleton that holds everything together. to place it during a more web-based
context, HTML makes sure the page is usable on a spread of devices and browsers
and provides a structure for adding CSS, JavaScript, and therefore the content
of the web site or application itself.
What are we going to do today?
Learn about HTML. HTML Tags.
Learn about the various HTML elements and Attributes.
Create the basic structure using Tags Elements and Attributes
1.
HTML
We’ve
already learned that HTML may be a sort of language that structures content; in
other words, it labels different elements like images and text so as to inform
your browser the way to display the content and in what order.
we
wrote some HTML and worked with a couple of HTML elements, too—but we haven’t
really understood them. Let’s change that. We’ll check out what HTML is formed
up of—in other words, HTML elements—and then use them.
2.
HTML Tags, documents, Comment tag, headings, Paragraphs, images and links.
HTML
Tags
HTML
tags are element names enclosed by angle brackets:
<tagname>content
goes here...</tagname>
HTML
tags generally come in pairs like <p> and </p>
The
former 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 added before
the tag name
HTML
Documents
All
HTML documents must begin with a document type declaration: <!DOCTYPE
html>.
The
HTML document itself begins with <html> and ends with </html>.
The
visible section of the HTML document is between <body> and </body>
Example:
<!DOCTYPE
html>
<html>
<body>
<h1>This
is my Heading</h1>
<p>My
first Paragraph</p>
</body>
</html>
The
<!DOCTYPE> declaration represents the document type, and helps browsers
to display website correctly.
It
must only appear once, at the top of the page (before any HTML tags).
The
<!DOCTYPE> declaration isn’t case sensitive.
HTML
Comment Tags
You
can add comments to your HTML source by using the subsequent syntax:
<!--
Write your comments here. -->
Notice
that there's an exclamation mark (!) within the opening tag, but not within the
closing tag.
Note:
Comments aren't displayed by the browser, but they will help document your HTML
ASCII text file(source code).
With
comments you'll place notifications and reminders in your HTML: Example:
<!--
This is a comment -->
<p>Here
is paragraph</p>
<!—You
can add more information here -->
HTML
Headings
HTML
headings are stated with the <h1> to <h6> tags.
<h1>
defines the most important heading. <h6> defines the least important
heading:
Example:
<h1>This
is heading 1</h1>
<h2>This
is heading 2</h2>
<h3>This
is heading 3</h3>
<h4>Heading
4</h4>
<h5>Heading
5</h5>
<h6>Heading
6</h6>
Bigger
Headings
Each
HTML heading has a default size. However, you can specify the size for any
heading with the style attribute:
Example
<h1
style="font-size:60px;">Heading 1</h1>
HTML
Paragraphs
HTML
paragraphs are labeled with the <p> tag:
Example:
<p>This
is first paragraph</p>
<p>One
more paragraph</p>
HTML
Images
HTML
images are defined with the <img> tag.
The
source file (src), alternative text (alt), width, and height are provided as
attributes:
Example:
<!DOCTYPE
html>
<html>
<body>
<img src="flower.jpg"
alt="flower" width="102" height="134">
</body>
</html>
HTML
Links
HTML
links are defined with the <a> tag:
Example:
<!DOCTYPE
html>
<html>
<body>
<a
href="https://www.google.com">Google</a>
</body>
</html>
The
link's terminus is specified in the href attribute.
Attributes
are used to specify additional information about HTML elements.
3.
Learn about the various HTML elements and Attributes.
HTML
Elements
An
HTML element generally consists of a start tag and end tag, with the content
inserted next to:
<tagname>Content
specified here...</tagname>
The
HTML element is everything from the start tag to the end tag:
<p>This
is my first paragraph</p>
Empty
HTML Elements
HTML
elements with no content are stated as empty elements.
<br>
is an empty element without a closing tag (the <br> tag defines a line
break). Empty elements can be "closed" in the opening tag itself like
this: <br />.
<p>This
is a <br> paragraph with a line break</p>
HTML5
does not require empty elements to be closed. But if you want stricter
validation, or if you need to make your document readable by XML parsers, you
must close all HTML elements properly.
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
width and height Attributes
Images
in HTML have a set of size attributes, which specifies the width and height of
the image: Example
<img
src="img_girl.jpg" width="500" height="600">
The
style Attribute
The
style attribute is used to specify the styling of an element, like color, font,
size etc. Example
<p
style="color:red">I am a paragraph</p>
------------------------------------------------------------------------------------
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: Example
<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>
HTML
Line Breaks
The
HTML <br> element defines a line break.
Use
<br> if you want a line break (a new line) without starting a new
paragraph:
Example
<p>This
is<br>a paragraph<br>with line breaks.</p>
The
HTML <pre> Element
The
HTML <pre> element defines preformatted text.
The
text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
Example
<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>
View
HTML Source Code:
To
find out, right-click in the page and select "View Page Source" (in
Chrome) or "View Source" (in IE), or similar in other browsers. This
will open a window containing the HTML source code of the page.
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 (you will see both the HTML
and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or
Styles panel that opens.
***CONNECT WITH TECHEX BRIHA ON SOCIAL MEDIA***
Instagram: https://www.instagram.com/techexbriha/
Facebook: https://www.facebook.com/TechExBriHa
TechEx BriHa Blog: https://techexwebdevelopment.blogspot.com/
Youtube Channel: https://youtube.com/channel/UCCTy7GUFizNbV2QSoJ9V1Sw
***********************************************************************************
*DISCLAIMER: As per 3rd Section of Fair use guidelines Borrowing small bits of material/information from an original work is more likely to be considered fair use. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for fair use
great information of Html coads but for best website you have to hire developers.
ReplyDeleteanyone can hire-xamarin-developers or other developers from Inwizards for best results.
This is an informative post review. I appreciate your efforts and all the best. I am so pleased to get this post article and nice information. I was looking forward to getting such a post which is very helpful to us. Best Steam Presses A big thank for posting this article on this website.
ReplyDeleteEcommerce web design company bhubaneswar