HTML | Tutorials | HTML Tutorial

HTML | Tutorials | HTML Tutorial

  1. What is HTML | A brief introduction to HTML 
  2. Why learn HTML?
  3. is html a programming language | what is html


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

 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 | Tutorials | HTML Tutorial
HTML | Tutorials | HTML Tutorial
HTML stands for Hyper Text Markup Language; HTML is most widely used language for web pages builds. HTML was created by Berners-Lee in late 1991 but “HTML 2.0” was first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Through HTML 4.01 version is widely used but currently we having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

The platform or IDE for HTML is notepad, and notepad++ are commonly used.
Example of HTML is
<!DOCTYPE  html>
<h1>  Hello world! </h1>

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.


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.
Defines an HTML document
Defines the document's body
<h1> to <h6>
 Defines header 1 to header 6
Defines a paragraph
Inserts a single line break
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
Defines an abbreviation
Define acronym
Defines an address element
Define a citation
Define computer code text
Defines a long quotation
Defines text
Defines a definition term
Defines emphasized text
Defines inserted text
Defines keyboard text
Defines preformatted text
Defines a short quotation
Defines sample computer code
Defines strong text
Defines a variable
Define bold text.
Define BIG text.
Define Italic text.
Define small text.
Define superscripted text.
Define subscripted text.
Define teletype text.
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.
Now we do some coding like this as we discuss in our first tutorial.

HTML Tutorials

You can see above there is html tag, head tag, title tag, body tag, and paragraph tag.
The output of this code can be seen in figure below.

HTML Tutorials

Second task, we will add link tag, as you can see in figure below

HTML Tutorials

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

HTML Tutorials

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 3rd task we will discuss about heading, in heading tags these starting from h1 to h6. As you can see in figure below

HTML Tutorials

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.

HTML Tutorials

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.

HTML Tutorials

In figure, it showing heading tags and then paragraph tag below the heading tags. Do it by yourself.
The output of this tag can be seen in figure below.

HTML Tutorials

You can see here is “Heading 1” and “This is a paragraph”.
You can write different paragraph and can give heading according to your paragraph.
These tasks were simple and easy for beginners, now it’s 5th task and  we will do something interesting like styling of text and increasing/decreasing size of text. We will change the color of our text and maximize the size of our text without heading tag. Move your eyes on figure below

HTML Tutorials

Here is the code of changing the color of our text, changing size of text.
The output of our text can be seen in figure

HTML Tutorials

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 ( )
In styling we can change the background color as shown in figure below

HTML Tutorials

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

HTML Tutorials

 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.


HTML Tutorial 

HTML Tutorial 2    Day 2 

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.

HTML Tutorials

You can see how to italic and bold the text and also subscript and superscript text. The output of this code is showing below.

HTML Tutorials

 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

HTML Tutorials

You can see in figure the quotation tags for short and long text.
The output of this text can be seen in figure below.

HTML Tutorials

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.

HTML Tutorials

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.

HTML Tutorials

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.

HTML Tutorials

You can see we have mentioned the color name in tags.
The output is colorful as you can see below.

HTML Tutorials

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