HTML | Tutorials | HTML Tutorial
- What is HTML | A brief introduction to HTML
- Why learn HTML?
- is html a programming language | what is html
Introduction
After studying this tutorials you will be able to build a basic website that having all the advanced functions.Who is target audiences?
All Students or any beginner who want to develop websites, this tutorials are advanced level so all the professional advanced level website developers can take help from these tutorials.
HTML | To Build your own website Tutorials
Introduction
Here are Basic Tags and introduction
HTML with this series of tutorial you will be able to make basic webpages and will be able to links these pages internal and external this is use full for a beginners as well as advanced level website developers.
HTML
 |
| HTML | Tutorials | HTML Tutorial |
The platform or IDE for HTML is notepad, and notepad++ are commonly used.
Example of HTML is
<!DOCTYPE html>
<html>
<body>
<h1> Hello world! </h1>
</body>
</html>
-----------------------------------------------------------------------------
Hypertext refers to the way in which web-pages (HTML documents) are linked together.
HTML is Markup Language which means you use HTML to simply “mark up” a text document with tags that tell a web browser how to structure it to display.
HTML TAGS:
What are HTML tags? ƒ
HTML tags are used to mark-up HTML elements.HTML tags are surrounded by the two characters ‘<’ and ‘>’. The surrounding characters are called angle brackets. HTML tags normally come in pairs like <b> and </b>.The first tag in a pair is the start tag, the second tag is the end tag. The text between the start and end tags is the element content. HTML tags are not case sensitive, <b> means the same as <B>.
HTML Basic Tags.
Tag
|
Description
| |
<html>
|
Defines an HTML document
| |
<body>
|
Defines the document's body
| |
<h1> to <h6>
|
Defines header 1 to header 6
| |
<p>
|
Defines a paragraph
| |
<br>
|
Inserts a single line break
| |
<hr>
|
Defines a horizontal rule
| |
<!-->
|
Defines a comment
| |
An HTML element usually consists of starting and ending tag.
For example
<h1> My first Heading </h>
<p> My first Paragraph </h>
Html Logical And Physical Tags
Logical tags Physical Tags
TAGS
|
Description
|
<abbr>
|
Defines an abbreviation
|
<acronym>
|
Define acronym
|
<address>
|
Defines an address element
|
<cite>
|
Define a citation
|
<code>
|
Define computer code text
|
<blockquote>
|
Defines a long quotation
|
<del>
|
Defines text
|
<dfn>
|
Defines a definition term
|
<em>
|
Defines emphasized text
|
<ins>
|
Defines inserted text
|
<kbd>
|
Defines keyboard text
|
<pre>
|
Defines preformatted text
|
<q>
|
Defines a short quotation
|
<samp>
|
Defines sample computer code
|
<strong>
|
Defines strong text
|
<var>
|
Defines a variable
|
Tags
|
Description
|
<b>
|
Define bold text.
|
<big>
|
Define BIG text.
|
<i>
|
Define Italic text.
|
<small>
|
Define small text.
|
<sup>
|
Define superscripted text.
|
<sub>
|
Define subscripted text.
|
<tt>
|
Define teletype text.
|
<u>
|
Deprecated. Use style instead
|
These are the basic tags and some mostly used logical tags used in HTML. Character tags like <strong> and <em> produce the same physical display as <b> and <i> but are more uniformly supported across different browsers.
HTML Tutorials
HTML Tutorial 1 Day 1
We
will learn html by doing working so
let’s start and do some working. First install Dreamweaver in your computer.
You
can see above there is html tag, head tag, title tag, body tag, and paragraph
tag.
Second
task, we will add link tag, as you can see in figure below
In
this figure it showing the linking tag, where you can add according to your
demand. The output of this code can be seen in figure below
You
can see “This is a link” in a blue color, new link will be whenever you click
on this. Do more practice for better result.
In
above figure heading tags are starting from h1 to h6. Heading tags can be used
for heading of any paragraph. The output of heading tag can be seen in figure
below.
It
can be seen “Heading 1” is the output of h1 and further more font size
decreases to “Heading 6”. You must try it by yourself.
Its
4th task about paragraph, in above section had discuss about
“heading”, It’s clear that heading can write for some paragraph. You can see in
figure paragraph tag in figure below.
In
figure, it showing heading tags and then paragraph tag below the heading tags. Do it by yourself.
You
can see here is “Heading 1” and “This is a paragraph”.
Here
is the code of changing the color of our text, changing size of text.
You
can see in figure there is normal color or default color text, then pink and
then orange. And the increment in text size, you can choose your own color by
entering color code instead of entering color name. You can a find a color code
from ( https://htmlcolorcodes.com/ )
Background
color will be changed from body tag, as shown in figure. The output of this
color can be seen by just moving your eyes on figure given below
 |
In above
section of text-color and in this section you can change the color of
background according to your requirement.
For
any queries just comment below and for more learning html go to next tutorial.
Keep visiting us for more interesting tips and tricks.
Overview
In
previous tutorial we had discussed about headings, paragraph, styling, Text
color and Background color.
In
this HTML Tutorial we will discuss about more interesting features of HTML.
Task
1
Text formatting e.g. italic, bold, strong, marked, small text, you can in
figure below how to do text formatting.
You
can see how to italic and bold the text and also subscript and superscript
text. The output of this code is showing below.
You can see bold text, italic text,
subscript and superscript text.
Other
text formatting tags are here:
<b>
- Bold text
<strong>
- Important text
<i> - Italic text
<em>
- Emphasized text
<mark>
- Marked text
<small>
- Small text
<del>
- Deleted text
<ins>
- Inserted text
<Sub>
- Subscript text
<sup> - Superscript text
Task
2
In this task we will discuss about quotation, The HTML <q> element
defines a short quotation. Browsers usually insert quotation marks around the
<q> element. The HTML <blockquote> element defines a section that
is quoted from another source. Browsers usually indent <blockquote>
elements.
As
you can see in figure
You
can see in figure the quotation tags for short and long text.
The
output of this text can be seen in figure below.
Output
showing the result of code we entered. You can also write your own text as your
requirements.
Other tags for this segment with description are
given below you try it by yourself.
<abbr>
- Defines an abbreviation or acronym.
<address>
- Defines contact information for the author/owner of 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.
Task
3
In
third task we will discuss about comments in html.
Comments are not
displayed by the browser, but they can help document your HTML source code. There
is an exclamation mark (!) in the opening tag, but not in the closing tag.
Code of this section
you can see in figure given below.
In
figure you can see that there is an exclamation mark in opening tag but not in
closing tag. There is an output of this code then will understand this segment
well.
This
output shows the comment.
Task 4
HTML Colors
Now
we will move on to next task that is too much interesting.
That is html colors. HTML
colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA
values.
We will perform a task
just move your eyes on figure and also do it by yourself.
You
can see we have mentioned the color name in tags.
The
output is colorful as you can see below.
It’s
showing different colors as we have mentioned their names.
Just
do more & more practice and do some different task to be a better html
designer.
Thank
you so much for visiting us.
For
any question just comment below.
Keep
visiting us for more knowledge.
No comments
Note: Only a member of this blog may post a comment.