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> <html> <head> <title>pinkpen</title> </head> <body> <h3>This is your first Heading</h3> <p>This is your first paragraph.</p> </body> </html>
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.
p 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:
<body> <p>Here is a first paragraph.</p> <p>Here is a secondparagraph.</p> </body>
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.
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> <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul>
You can use “type” to choose what items look like : <ul type=”Value”>
|circle||The item mark is hollow in a circle|
|square||The item symbol is squared|
|none||Unmarked and empty|
|disc||This option is available by default|
The ordered list will start with the <ol>tag. Each list item will start with the <li> tag.
<ol> <li>USA</li> <li>Canada</li> <li>Australia</li> </ol>
There are also different display forms in the Ordered lists, which you can see in the table below.
|1||Numerical numbering – This value is by default|
|A||Numbering in capital letters English|
|a||Numbering in lowercase English letters|
|i||Numbering 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.
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>
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">