congratulation! You have found the best and easiest way to learn html.

This training is suitable for beginners and professionals. Training start from the beginning and gradually becomes more advanced. We teach you how to make your first website. it means you learn how to add headings, how to add text and images, Edit different objects, how to use tables, Design the site template, etc.


HTML Taken from HyperText Markup Language. By defining that content as, tables, paragraphs, or images, provides content structure and meaning. Most websites are written in HTML. The code used to design the appearance of the website is CSS. To learn it, you can click this link. in HTML we will focus on teaching you how to build rather than design.

What Are HTML Tags?

Tags are used to mark up the start of a HyperText Markup Language element. they are usually placed inside <>. for example <h2> is the tag. Except for a few tags, most tags have their respective closing tags. <body> has the closing tag </body>

A Basic HTML File

I gave you this example to get a basic knowledge of HTML. You can try this program in the pink pen lab.

<!DOCTYPE html>
<h3>This is your first Heading</h3>
<p>This is your first paragraph.</p>


This is your first Heading

This is your first paragraph.

uses the following tags in our first program. Let’s learn how they work and how to use them.

!DOCTYPE  On Defines both the document type and the HTML version.

HTML   The root element of the HTML page and all the code is inside its

head Contains HTML page meta information, Things mostly meant for search engines

title Specifies the page title (which is shown in the browser’s title bar)

body This is where the page’s content goes.

h1 The heading is represented by this tag.

A paragraph is represented by this tag. 

The general structure of the program is as shown below


Create the first page of your website

step one Open Notepad or notepad+

step two after opening the Notepad copy or write the top example code


step three After that Save the HTML Page

you should Save the file to your computer therefore Select File > Save as in notepad or notepad+ and name the file index.html.

Step four Open the index.html in your Favorite browser.



Any document will start with a heading. For your headings, you can use different sizes. Here we have 6 Headings with different sizes. from to As you anticipate is the most important and is the least important.

<h1>heading one</h1>
<h2>heading two</h2>
<h3>heading three</h3>
<h4>heading four</h4>
<h5>heading five</h5>
<h6>heading six</h6>


The <p> tag is  used to define paragraphs:

<p>Here is a first paragraph.</p>
<p>Here is a secondparagraph.</p>


A link is a part of the text that will direct you to another page. Links are defined by the <a> tag.The destination of the link is specified in the href attribute and the text in the middle is the text that is linked.

<a href=https://pinkpen.net>This link will take you to the PinkPan site</a>

lists in html

How to create a list in HTML? That’s a good question, Using the list, webmasters can group the same items. There are several types of lists in HTML that we will teach you in the following tutorial.

Unordered List

In this type of list, the order of the items does not matter and starts with the
<ul> tag and each item is defined with the <li>

<p>unordered items:</p>    

You can use “type” to choose what items look like : <ul type=”Value”>

circleThe item mark is hollow in a circle
squareThe item symbol is squared
noneUnmarked and empty
discThis option is available by default

Ordered List

The ordered list will start with the <ol>tag. Each list item will start with the <li> tag.


There are also different display forms in the Ordered lists, which you can see in the table below.

1Numerical numbering – This value is by default
ANumbering in capital letters English
aNumbering in lowercase English letters
iNumbering in Romanian letters

Styles in html

Style is used in HTML when you want to change the color, font, size, etc. of an element.

Using the syntax below, you can use the style attribute in HTML.

<exampletag style="property:value;">

Text Style

Like the pattern below, you can change the color, font, and size of a text whit using the style attribute

<h2 style="color:blue; font-family:verdana;font-size:300%;">pinkpne</h2>

Text Alignment

If you want to adjust the “text alignment” of your text, use the text-align attribute. like left-align, center-align ,etc.

<p style="text-align:right;">pinkpen.net in right</p>

Insert a photo in HTML

The img tag is used to display the image in HTML, this tag must be inserted with the src attribute and src actually stands for source image source.

<img src="image url">
Alternative text for image

The next attribute that we’re going to look at is Alt. The value is meant to be a textual description of the image.

<img src="exampleimage.jpg" alt="description">

Image Size in img tag

You can use the width and height attributes to adjust the image size.

<img src="example.png" alt="pinkpen" width="1000" height="300">


I am a computer engineering student, I have been working in SEO and WordPress for almost 8 years and I also have programming skills.

Leave a Reply


Copyright © 2019 pinkpen.net