Best Way to Learn HTML Online for WordPress

Best Way to Learn HTML Online for WordPress Featured Image

HTML stands for Hyper Text Markup Language & we will learn HTML from beginning in this Best Way to Learn HTML Online for WordPress tutorial.

Using HTML we can create basic design website layout & to make website beautiful we will learn CSS after this Best Way to Learn HTML Online for WordPress tutorial. So in this tutorial we will learn how to make website skeleton/layout & then CSS to implement design.

For example, to make a house we need to build a structure first & then paint to make it beautiful. So here HTML is the structure of a website & CSS is the paint.

Here is an image to get a visualization.

Best Way to Learn HTML Online for WordPress Visualization

Prerequisites

Not required & anyone can learn this.

HTML Editor

Below some HTML editor’s & we can use one. Before starting HTML coding need to install it first.

Creating our first HTML document

In this Best Way to Learn HTML Online for WordPress tutorial at first let’s create a new file in editor we have just installed. Then copy below HTML code & paste it. Save it as firsthtmlcode.html

.html is the extension for HTML file.

<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
</head>
<body>
<h2>This is a Heading</h2>
<p>This is a Paragraph</p>
</body>
</html>

Editor Screenshot

Notepad++ Editor for First HTML Code Screenshot

Open this file firsthtmlcode.html in your web browser & will get below output.

Browser Screenshot

Notepad++ Editor for First HTML Code Output Screenshot

Understanding above code

<!DOCTYPE html> is the HTML document type declaration. Web browser will understand that it’s a HTML document.

<html> is the container for all other HTML tags. It has a closing sign </html>

<head> is the container of the tags those will provide current HTML document information. <title> is the one of those tags & it will define title of this document. This title you will find in your web browser tab. Both have closing sign </head> </title>

<body> is the container for visible content that will show in your browser. It has a closing sign </body>

<h2> defines heading two & closing sign </h2>. There some other headings like <h1>, <h3>, <h3>, <h4>, <h5>, <h6>.

<p> means paragraph & closing sign </p>.

Hope you are happy after creating your first HTML document. Next we will learn HTML elements & tags.

Let’s continue Best Way to Learn HTML Online for WordPress tutorial.

HTML Elements & Tags

In this Best Way to Learn HTML Online for WordPress tutorial from our previous example, h2 is an element & this consists of opening tag <h2> & closing tag </h2>.

So p is an element & it has tags <p> </p>. Same for other elements html, head, title, body.

Don’t forget to include closing tag except few elements.

There some empty elements those don’t have any closing tag like <br> (line break), <hr> (horizontal ruler), <img> (image) & some others.

HTML tags are not case sensitive that means <p> & <P> same but W3C (World Wide Web Consortium) recommends lowercase in HTML.

HTML Attributes

We will learn about HTML attributes in this Best Way to Learn HTML Online for WordPress tutorial. It provides additional information about element & should be added in starting tag in this format name=”value”.

Below some common attributes used in web page design:

HTML href Attribute

<a href="https://www.google.com" target="_blank">This is a link</a>

Here a is an element used to add link, <a> is opening tag & </a> is closing tag as previous tags. “This is a link” is content for element a. After clicking on this it will go to https://www.google.com site.

So here href is attribute name & https://www.google.com is value. Another attribute target is added with it’s value _blank & we will learn more in HTML Links section in this Best Way to Learn HTML Online for WordPress tutorial.

You can try adding this code in HTML file to see the output.

HTML src Attribute

<img src="html_image.jpg">

Here using img element we can show an image. This don’t have any closing tag but only starting tag <img>

Just use any image with name html_image.jpg to see the result.

In addition, we can add width & height attribute in <img> tag.

<img src="html_image.jpg" width="400" height="300">

By default width & height will show in pixels, so image will show as width 400px & height 300px.

Another attribute used in <img> tag is alt.

<img src="html_image.jpg" width="400" height="300" alt="this is html image">

If image source (src) not available somehow then it will show alt tag value “this is html image” rather than blank page. This alt attribute is important for good SEO (Search Engine Optimization). That means search engine can easily understand what is that image for. So this image will show in search result.

HTML style Attribute

<h2 style="color:blue;">This is a blue Heading</h2>

Using style attribute we can do some design. Like here “This is a blue Heading” will show as blue. After adding this in file below the output:

HTML style Attribute Color

This kind of styling is called inline styling. We will learn more in CSS tutorial.

HTML id Attribute

<h2 id="html">This is a Heading with id attribute which value is: html</h2>

In one web page id value will be unique. If we create same id in another tag then this will not be a valid HTML. For example, below code:

<h2 id="html">This is a Heading with id attribute which value is: html</h2>

<p id="html">This is a paragraph with id attribute which value is: html</p>

So in both h2, p element used same id & this will not be a valid HTML web page.

To make it valid can write this below:

<h2 id="htmlOne">This is a Heading with id attribute which value is: htmlOne</h2>

<p id="htmlTwo">This is a paragraph with id attribute which value is: htmlTwo</p>

Here both id is different & it’s valid HTML.

We will learn more about id in CSS tutorial as this will be mainly used to style pages.

HTML class Attribute

<h2 class="html">This is a Heading with class attribute which value is: html</h2>

class can have same value for multiple tags. So id is unique but class can be unique or not.

Like below code:

<h2 class="html">This is a Heading with class attribute which value is: html</h2>

<p class="html">This is a paragraph with class attribute which value is: html</p>

This is valid code & below another code:

<h2 class="htmlOne">This is a Heading with class attribute which value is: htmlOne</h2>

<p class="htmlTwo">This is a paragraph with class attribute which value is: htmlTwo</p>

This is also valid code.

We will learn more about class in CSS tutorial to style page mainly.

HTML title Attribute

<h2 title="Heading two title">This is Heading Two</h2>

This mainly used for element suggestion & will show after mouse over this “This is Heading Two”.

HTML Headings

Heading is used to show content in a structured way. There are 6 types of headings.

Let’s give an example in this Best Way to Learn HTML Online for WordPress tutorial.

Here is an example:

<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>

Here is the output:

HTML Headings

You can try adding code for other two headings h1 & h6.

h1 is used for most important heading & h6 is less important heading. By default browser will show h1 in larger font & h6 will show in smaller font. So based on content heading will be placed in website.

For search engine it’s very important as heading is used for indexing website content & structure.

HTML Paragraphs

Paragraph is used to add text in website & it’s defined with p element.

Here is a paragraph code:

<p>This is first paragraph</p>
<p>This is second paragraph</p>

Here is the output:

HTML Paragraphs

Paragraph will be commonly used in website.

HTML Styles

This is used to design web page & can be done with style attribute.

Let’s use some examples in our Best Way to Learn HTML Online for WordPress tutorial.

Here is the syntax:

<tagname style="property:value;"><tagname>

For h2 tag we can write:

<h2 style="color:red;">This is Heading 2<h2>

So here h2 will show red color & below the output:

HTML Styles h2

We can add more property with value in same style.

For example:

<h2 style="color:red;font-size:50px;">This is Heading 2<h2>

Below the output:

HTML Styles h2 Font

There are 3 methods to add styles in HTML. In this Best Way to Learn HTML Online for WordPress tutorial we will learn these Inline, Embedded & External styles method.

HTML Inline Style

In this method styles can be implemented under a starting tag directly & here is an example:

<h2 style="color:orange;">This is Heading 2 with Inline Style<h2>

In this code, color is orange in style property under <h2> tag. So this way adding style is called inline styles.

Below the output:

HTML Inline styles

HTML Embedded Style

If we want to make previous inline styles code in embedded styles method then we can write code like this below in full format:

<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
h2 {
color: orange;
}
</style>
</head>
<body>
<h2>This is Heading 2 with Embedded Style<h2>
</body>
</html>

So in this method under <style></style> tag design for h2 is added using second brackets { }. This will be added under <head></head>.

Here is the output:

HTML Embedded styles

So it’s showing same result like Inline styles.

HTML External Style

We will use same example for external styles method.

Before writing code need to create a CSS file first as like we have created our first HTML file firsthtmlcode.html but .css will be the file extension. To keep it organized let’s create this file under css directory with file name style.css & add below code in this file.

h2 {
color: orange;
}

Editor Screenshot

Notepad++ Editor Code for HTML External styles

So here is the final code:

<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h2>This is Heading 2 with External Style<h2>
</body>
</html>

Here in <link> starting tag style.css is included under href attribute & rel attribute is used to define the relationship between the linked file and the HTML document. As it’s a css file so rel will be stylesheet.

Here is the output:

Notepad++ Editor Code Output for HTML External styles

There is another way to load external styles using @import statement.

<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h2>This is Heading 2 with Embedded Style using @import<h2>
</body>
</html>

Below the output:

Notepad++ Editor Code Output for HTML External styles using @import

External styles is the best way to add styles. Also @import method may cause website performance issues. So in general we should avoid using @import method & should include styles using link element.

Inline styles have the highest priority & external styles is the lowest. For example, p element color is set to red in inline styles & green for external styles, in this case p will show as red color.

HTML Text Formatting

In HTML text can be formatted in different ways based on project requirements & we will learn it in this Best Way to Learn HTML Online for WordPress tutorial.

Here is an example:

<i>This text is italic</i>

Here i element defines italic text, it has starting tag <i> & closing tag </i>.

Below the output:

HTML Text Formatting italic

Here will show some commonly used HTML formatting elements.

HTML <b> & <strong> Tags

To make bold text b element will be used & here is an example:

<b>This text is bold</b>

It has starting tag <b> & closing tag </b>.

Below the output:

HTML <b>Tag

To make strong text strong element will be used, starting tag <strong> & closing tag </strong>.

Here is an example:

<strong>This text is strong</strong>

Output below:

HTML <strong> Tag

b & strong element will show same output. Only difference is for strong it will add extra importance. So text under this tag <strong></strong> will indicate strong importance in content.

HTML <i> & <em> Tags

To make italic text i element will be used with starting tag <i> & closing tag </i>.

Here is an example:

<i>This text is italic</i>

Below the output:

HTML <i> Tag

To make emphasized text em element will be used, starting tag <em> & closing tag </em>.

Here is an example:

<em>This text is emphasized</em>

Output below:

HTML <em> Tag

i & em element will show same output. Only difference is importance & em will indicate more importance in content.

HTML <big> Tag

To make bigger text big element will be used with starting tag <big> & closing tag </big>.

Here is an example:

<p>HTML <big>bigger text</big> Formatting</p>

Below the output:

HTML <big> Tag

HTML <small> Tag

To make smaller text small element will be used with starting tag <small> & closing tag </small>.

Here is an example:

<p>HTML <small>smaller text</small> Formatting</p>

Below the output:

HTML <small> Tag

Let’s learn some more HTML text formatting tags in this Best Way to Learn HTML Online for WordPress tutorial.

HTML <del> Tag

To make deleted or removed text del element will be used. Is has starting tag <del> & closing tag </del>.

Here is an example:

<p>To give more importance <del>b element</del> strong element will be used</p>

Below the output:

HTML <del> Tag

HTML <sub> Tag

To make subscript text sub element will be used with starting tag <sub> & closing tag </sub>.

Here is an example:

<p>HTML <sub>subscript text</sub> Formatting</p>

Below the output:

HTML <sub> Tag

HTML <sup> Tag

To make superscript text sup element will be used with starting tag <sup> & closing tag </sup>.

Here is an example:

<p>HTML <sup>superscript text</sup> Formatting</p>

Below the output:

HTML <sup> Tag

HTML <u> Tag

To make underlined text u element will be used with starting tag <u> & closing tag </u>.

Here is an example:

<p>HTML <u>underlined text</u> Formatting</p>

Below the output:

HTML <u> Tag

HTML <div> & <span> Tags

To make grouping content div & span elements will be used. Using <div> tag can create sections & subsections to group together.

Here is an example:

<div class="sectionOne">
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</div>
<div class="sectionTwo">
<h2>This is another heading</h2>
<p>This is another paragraph</p>
</div>

So here two sections created using <div> tag. First section has a class name “sectionOne” & second section class name “sectionTwo”. We can use other attributes as well like id, style etc. So here under both <div> tag <h2> & <p> tags placed in a group.

This code output is not that much important here. Main thing is how we can structure content in a group.

<span> tag will be used to group inline elements only.

Here is another example:

<p>HTML <span>span tag</span> Formatting</p>

HTML <cite> Tag

To identify the the source of a quotation or creative work cite element will be used with starting tag <cite> & closing tag </cite>.

Here is an example:

<cite>— Abraham Lincoln</cite>

Below some more HTML text formatting tags in this Best Way to Learn HTML Online for WordPress tutorial.

HTML <blockquote> Tag

To make a quotation blockquote element will be used with starting tag <blockquote> & closing tag </blockquote>.

Here is an example:

<blockquote>
<p>If there is anything that a man can do well, I say let him do it. Give him a chance.</p>
<cite>— Abraham Lincoln</cite>
</blockquote>

Below the output:

HTML <blockquote> Tag

HTML <address> Tag

To add contact information address element will be used with starting tag <address> & closing tag </address>.

Here is an example:

<address>
Office address<br>
Phone number<br>
Email address<br>
Website URL
</address>

<br> tag is used for line break.

Below the output:

HTML <address> Tag

HTML Comments

In this Best Way to Learn HTML Online for WordPress tutorial we will learn how to add comments. To add comments in HTML code comment tag will be used. So that it will be more understandable while writing/editing HTML codes.

Here is the syntax to write comments:

<!-- This is a comment -->

Comment starting tag <!– & closing tag –>

Example below:

<!-- heading starts here -->
<p>This is a heading</p>
<!-- paragraph starts here -->
<p>This is a paragraph</p>

Below the output:

HTML Comments

Comments are not visible in the browser.

HTML Colors

In HTML there some color formats & mostly used are predefined color names, HEX colors, RGB colors & RGBA colors. These colors can set as Background Color, Text Color, Border Color etc. We will learn more about HTML colors in this Best Way to Learn HTML Online for WordPress tutorial.

HTML Color Names

There some predefined color names & we can use those in HTML.

Here is an example:

<h2 style="background-color:red;">This is Red background using Color Name</h2>
<h2 style="background-color:white;">This is White background using Color Name</h2>
<h2 style="background-color:black;color:white;">This is Black background using Color Name (used white text color)</h2>

So here red, white & black are predefined color names.

Below the output:

HTML Color Names

HTML HEX Colors

In HTML, to declare color in hexadecimal (HEX) here is the syntax:

#rrggbb

Here rr (red), gg(green) & bb(blue) are hexadecimal values between 00 & ff.

For example, #ff0000 will show red color as rr is set to it’s highest value ff & gg, bb is 00.

#ffffff will show white color as all is set to ff & #000000 will show black color as all is 00.

Here is the HTML code:

<h2 style="background-color:#ff0000;">This is Red background in HEX format</h2>
<h2 style="background-color:#ffffff;">This is White background in HEX format</h2>
<h2 style="background-color:#000000;color:#ffffff;">This is Black background in HEX format (used white text color)</h2>

Below the output:

HTML HEX Colors

HTML RGB Colors

In HTML, colors can be declared using RGB color format & this is the syntax:

rgb(red, green, blue)

Each parameter red, green & blue defines the intensity of the color between 0 & 255.

For example, rgb(255, 0, 0) will show red color because red is set to it’s highest value 255 & green, blue is set to 0.

If we set all parameter to it’s highest value 255 then color code will be like this rgb(255, 255, 255) & it will show as white color.

If all value is set to it’s lowest value 0 then code will be rgb(0, 0, 0) & it means black color.

Here is the HTML code:

<h2 style="background-color:rgb(255, 0, 0);">This is Red background in RGB format</h2>
<h2 style="background-color:rgb(255, 255, 255);">This is White background in RGB format</h2>
<h2 style="background-color:rgb(0, 0, 0);color:rgb(255, 255, 255);">This is Black background in RGB format (used white text color)</h2>

Below the output:

HTML RGB Colors

HTML RGBA Colors

RGBA is the extension of RGB colors & it’s syntax is:

rgba(red, green, blue, alpha)

Here alpha defines opacity & it has value from 0.0 (fully transparent) to 1.0 (not transparent & it’s default value).

Here is an example:

<h2 style="background-color:rgb(255, 0, 0, 0);">This is Red background in RGBA format with opacity 0</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.1);">This is Red background in RGBA format with opacity 0.1</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.2);">This is Red background in RGBA format with opacity 0.2</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.3);">This is Red background in RGBA format with opacity 0.3</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.4);">This is Red background in RGBA format with opacity 0.4</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.5);">This is Red background in RGBA format with opacity 0.5</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.6);">This is Red background in RGBA format with opacity 0.6</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.7);">This is Red background in RGBA format with opacity 0.7</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.8);">This is Red background in RGBA format with opacity 0.8</h2>
<h2 style="background-color:rgb(255, 0, 0, 0.9);">This is Red background in RGBA format with opacity 0.9</h2>
<h2 style="background-color:rgb(255, 0, 0, 1);">This is Red background in RGBA format with opacity 1</h2>

Below the output:

HTML RGBA Colors

To get color code easily, can use “Pixie Color Picker” software or any online color picker tool.

Here is an screenshot how “Pixie Color Picker” will look like after installing it:

Pixie Color Picker

Cursor was on white background, that’s why showing rgb value (255,255,255).

Let’s learn some more HTML colors in this Best Way to Learn HTML Online for WordPress tutorial.

HTML Background Color

We have used background color in our previous examples.

Here is another example:

<p style="background-color:orange;">This is Orange background color</p>

Below the output:

HTML Background Color

HTML Text Color

We can set text color in HTML using color property.

Here is an example:

<p style="color:blue;">This is a text with Blue text color</p>

Below the output:

HTML Text Color

HTML Border Color

We can set border color in HTML using border property.

Here is an example:

<p style="border:2px solid black;">This is a text with 2px width & solid black color</p>

Below the output:

HTML Border Color

Using HTML links we can normally make a link in text, image & in this Best Way to Learn HTML Online for WordPress tutorial we will learn using some examples.

Syntax for HTML links:

<a href=”url”>link text</a>

a means anchor & it has starting tag <a> & ending tag </a>. Inside href attribute destination URL will be added.

It’s linked with a text “link text” & can be linked with an image tag as well like this:

<a href=”url”><img src=”image_url.jpg”></a>

Here is an example with text link:

<a href="https://www.google.com/" target="_blank">google.com</a>

target=”_blank” will learn in next section.

Below the output:

google.com

target attribute defines where to open the linked URL & it has following values:

_self : This is default value & this will open a new page in same window.

_blank: This will open a new page in a new window. For external URL this value will be added.

_parent: This will open a new page in it’s parent frame. You will understand more in iframe element.

_top:  This will open a new page in same window cancelling all the frames. Learn more in iframe element.

Here is an example for _self:

<a href="https://wpupskills.com/html/" target="_self">Opens in same window</a>

Below the output:

Opens in same window

Here is an example for _blank:

<a href="https://wpupskills.com/html/" target="_blank">Opens in new window</a>

Below the output:

Opens in new window

Here is an example for _parent:

<a href="https://wpupskills.com/html/" target="_parent">Opens in parent frame</a>

Below the output:

Opens in parent frame

Here is an example for _top:

<a href="https://wpupskills.com/html/" target="_top">Opens in Body</a>

Below the output:

Opens in Body

In this Best Way to Learn HTML Online for WordPress tutorial will show some more HTML links with examples below:

In this method we can create a link that will move to a specific page section after clicking on it.

Let’s create a section first & below the example:

<p id="sectionOne" style="background-color:orange;">Section One</p>

As we have learned in this tutorial id is unique, so have created a unique section. Added a background color so that will be easy to understand.

Next will create a link & here is the code:

<a href="#sectionOne">Move to Section One</a>

Inside href attribute it’s value is #sectionOne & # is used as sectionOne is an id. So after clicking on “Move to Section One” this page will move to this section “Section One”.

Here is the overall output:

Section One

Move to Section One

If you click on above link then will understand it more.

Here is an example to link with an image:

<a href="https://www.google.com/" target="_blank"><img src="https://wpupskills.com/wp-content/uploads/2020/03/HTML_Links_Image_Google.jpg"></a>

Here used target attribute with value _blank so that link will open in a new tab as it’s an external link.

Below the output:

HTML Links with Image google.com

In HTML we can make an email link using mailto & here is an example:

<a href="mailto:someone@example.com">HTML E-mail link</a>

In HTML phone number can be linked with tel: & here is an example:

<a href="tel:(000)000-0000">HTML Phone Number</a>

If we want to make a skype call then can use callto: instead of tel: & below an example:

<a href="callto:(000)000-0000">HTML Phone Number Skype Call</a>

In different browser versions this may work differently.

We can add extra information about the link using title attribute. This will show on mouse over the link.

Here is an example:

<a href="https://www.google.com/" title="Go to Google.com" target="_blank">google.com</a>

Below the output:

HTML Links title Attribute

Mouse over the link & it will show the title.

In this Best Way to Learn HTML Online for WordPress tutorial let’s learn about HTML link colors.

HTML link have three colors by default.

  • For unvisited link it’s blue color & underlined.
  • For visited link it’s purple color & underlined.
  • For active link it’s red color & underlined. Link is active when you click on it. To understand more you can just keep pressing on a link then this will appear.

Here is an example:

<a href="https://www.google.com/" target="_blank">This is a link before visiting</a>

Below the output:

HTML Link Color before visiting

After visiting this link output will like this:

HTML Link Color after visiting

After clicking on a link it will show active color & below the output:

HTML Link Color active

After mouse over any link it will show same design but we can change this functionality after adding some CSS code.

Now if we want to change this color then can change it using CSS.

Follow below code:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: brown;
text-decoration: none;
}
a:visited {
color: green;
text-decoration: none;
}
a:hover {
color: orange;
text-decoration: underline;
}
a:active {
color: navy;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.google.com/" target="_blank">google.com</a>
</body>
</html>

At first before visiting the link it will show brown color & without underline as it’s written under a:link code & output will show like this:

HTML Link Color

After visiting the link it will show green color & without underline as it’s under a:visited & output is below:

HTML Link Color

For mouse over link we have added some code under a:hover, so it will show orange color & with underline when mouse over on it & below the output:

HTML Link Color

For active link it will show navy color & with underline as it’s written under a:active & output below:

HTML Link Color

a:link means link with href & if we write only a then it will mean without href. But we can use a normally.

We can make link as a button using some CSS code.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
a {
color: black;
text-decoration: none;
background-color: orange;
padding: 20px;
display: inline-block;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
}
a:hover {
background-color: red;
}
</style>
</head>
<body>
<a href="#">This is a Button</a>
</body>
</html>

Here for href used # so that after clicking it will not go anywhere. In a there some other CSS code & we will learn more in our CSS tutorial.

This is how link will show as a button:

HTML Link as a Button

HTML File Paths

In HTML, file path describes the location of a file based on website’s folder structure. File paths are used when linking to files like:

  • Website URL
  • Image URL
  • Style sheet URL
  • JavaScript URL

There are two types of file path: Absolute File Path & Relative File Path.

In this Best Way to Learn HTML Online for WordPress tutorial let’s learn more about it.

HTML Absolute File Path

Absolute file path is the full URL & here is an example:

<img src="https://wpupskills.com/dir/subdir/images/picture.png">

Here under src it has a full URL (this is a sample URL) for an image including domain name (base URL). So this is an absolute file path.

HTML Relative File Path

Relative file path points to a file based on current page. Here your current HTML file’s location is the current page.

Let’s consider our current HTML file is located under folder name “subdir” & it has below folder structure including domain name:

https://wpupskills.com/dir/subdir/images/picture.png

Here is an example:

<img src="/images/picture.png">

In this path structure images folder will point to the root directory. In this case full URL will be:

https://wpupskills.com/images/picture.png

Here is another example:

<img src="images/picture.png">

As our current HTML file is under “subdir” folder, so full URL will be:

https://wpupskills.com/dir/subdir/images/picture.png

Another example below:

<img src="../images/picture.png">

In this case file will point to one level above the current folder. So full URL will be:

https://wpupskills.com/dir/images/picture.png

Summary: / sign means it will point to root directory & .. sign means one level above the current folder & without any of these two sign means current directory.

Best way is to use relative file path, so when you will move your computer (localhost) files to live server then all file paths will work automatically & you don’t need to change base URL.

HTML Images

In this Best Way to Learn HTML Online for WordPress tutorial we have learned before how to show an image. Some more information will include here.

In HTML <img> tag will be used to show an image & it don’t have any closing tag.

Here is the syntax:

<img src="url">

src defines the URL of the image.

Here is an example:

<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg">

HTML Image alt Attribute

alt attribute provides alternative information for the image.

Here is an example:

<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg" alt="HTML CSS Paint">

If somehow image URL is missing or slow internet connection then this alt text will show rather than a blank image. Also search engines can’t read what an image is all about, in that case using alt attribute they can understand it.

To understand it more here is another example:

<img src="" alt="HTML CSS Paint">

src is blank here, so after viewing the page it will not show blank but will show this text “HTML CSS Paint” as it’s under alt attribute.

Best practice is to add alt for all images, search engines will understand it & it’s best for SEO (Search Engine Optimization).

HTML Image Size Width & Height

width & height attribute will be used to adjust image size.

Here is an example:

<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg" width="400" height="200">

This will show a resized image & by default width & height value will be in pixels.

If don’t use any width & height attribute then image will show in it’s normal size. So you can set it based on project requirements.

There is another way we can set image size using style attribute.

Here is an example:

<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg" style="width:400px;height:200px;">

Both example will show same results.

Best practice will be using style attribute.

HTML Image Floating

We can float an image to left or right of a text using CSS.

To make float left here is an example:

<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg" style="float:left;width:200px;height:100px;">Image will float to the left of this text.

For right floating an example below:

<img src="https://wpupskills.com/wp-content/uploads/2020/03/html_css_paint.jpg" style="float:right;width:200px;height:100px;">Image will float to the right of this text.

We will learn more about float in our CSS tutorial.

HTML Background Images

In HTML, background image can be specified on almost all elements.

Here is an example:

<div style="background-image: url('https://wpupskills.com/wp-content/uploads/2020/03/html_image_featured.png');">HTML Background Image</div>

You can check how it’s showing in your screen & hope it will not show that much good. In this case we need to add some more CSS code & here is another example:

<div style="background-image: url('https://wpupskills.com/wp-content/uploads/2020/03/html_image_featured.png');background-size: cover;background-repeat: no-repeat;background-position: center;text-align: center;padding: 160px 0;background-color: #f7f7f7;color: red;font-weight: bold;font-size: 50px;">HTML Background Image</div>

Below the output:

HTML Background Image

In above code, we have added background-size with it’s value cover. This will help image to resize to cover entire container. In this way image may cut off but will cover entirely based on container width, height.

Background image can have width & height length like this:

background-size: 500px 300px;

Here width is 500px & height is 300px. If we don’t set height then it’s height will be auto based on width.

Here is all values for background-size:

background-size: auto | length | percentage | cover | contain | initial | inherit;

Here auto is the default value.

You can try changing values in your code to check how it’s showing. So you need to use one value based on your needs.

In above code, added background-repeat value no-repeat. So background will not repeat here.

Other values we can add like this:

background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;

Here repeat is the default value.

background-position: center is used to show image in center position. This have some other values like:

background-size: left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | percentage | initial | inherit;

We will learn more in our CSS tutorial.

HTML Tables

In HTML, table element will be used to show tabular data in a structured way. It has starting tag <table> & ending tag </table>.

Let’s use some example in this Best Way to Learn HTML Online for WordPress tutorial.

Here is an example:

<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>

In this example, each row is defined with tr element with it’s starting tag <tr> & ending tag </tr>. Table header is defined as th & it has starting tag <th> & ending tag </th>. Also td element is defined as table data/cell with it’s starting tag <td> & ending tag </td>.

Below the output:

HTML Tables

By default, th will show as bold & centered. To understand more here is another example:

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</body>
</html>

In this code for table width 100% is added under style element, so table will show full width.

Below the output:

HTML Table Full Width

If we want to align heading text to left then text-align property will be used for th.

Example below:

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</body>
</html>

Here for th element text-align is left, so header text will show left aligned.

Below the output:

HTML Table Left Aligned

HTML Table Border

We can add border in HTML table using border property.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</body>
</html>

In this code, under style element border is added for table, th, td in a common way. We can expand this code like this below:

table {
border: 1px solid black;
}
th {
border: 1px solid black;
}
td {
border: 1px solid black;
}

Always try to add CSS in a common way like this table, th, td { }, so it will be fast execution.

Below the output:

HTML Table Border

HTML Table Border Collapse

If we want to collapse all borders into one border then border-collapse property will be used.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</body>
</html>

Below the output:

HTML Table Border Collapse

HTML Table Cell Padding

In HTML table, padding can be added using CSS padding property.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</body>
</html>

In above code, padding is added for th, td. So output will show like this below:

HTML Table Cell Padding

HTML Table Merging Columns

To merge more than one column then colspan attribute will be used.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th colspan="2">Name</th>
</tr>
<tr>
<td>1</td>
<td>First Name 1</td>
<td>Last Name 1</td>
</tr>
<tr>
<td>2</td>
<td>First Name 2</td>
<td>Last Name 2</td>
</tr>
</table>
</body>
</html>

Below the output:

HTML Table Merging Columns

HTML Table Merging Rows

To merge more than one row then rowspan attribute will be used.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<td>1</td>
</tr>
<tr>
<th rowspan="2">Name</th>
<td>First Name 1</td>
</tr>
<tr>
<td>Last Name 1</td>
</tr>
</table>
</body>
</html>

Below the output:

HTML Table Merging Rows

HTML Table Nested Tables

We can add one table inside another table in HTML.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>
<table>
<tr>
<td>Name 1</td>
<td>Name 2</td>
</tr>
<tr>
<td>Name 3</td>
<td>Name 4</td>
</tr>
</table>
</td>
<td>60</td>
</tr>
</table>
</body>
</html>

Here we have added another table under td element & below the output:

HTML Table Nested Tables

HTML Table Styling

We can design a table using CSS code based on requirements.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
th {
background: black;
color: white;
}
table tr:nth-child(even) {
background-color: #eee;
}
table tr:nth-child(odd) {
background-color: #fff;
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
<tr>
<td>3</td>
<td>Name 3</td>
<td>80</td>
</tr>
</table>
</body>
</html>

In above code, tr:nth-child(even) means even table rows & tr:nth-child(odd) means odd table rows.

Below the output:

HTML Table Styling

HTML Table Grouped Header & Body

We can group header & body content using thead & tbody element respectively.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name 1</td>
<td>60</td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>70</td>
</tr>
</table>
</tbody>
</body>
</html>

In above code, table heading is grouped under thead element with it’s starting tag <thead> & ending tag </thead>.  Body content is grouped under tbody element & it has starting tag <tbody> & ending tag </tbody>.

Below the output:

HTML Table Grouped Header & Body

In output there is no difference but table is created in a more structured way.

HTML Lists

In HTML lists are used to present information in the most efficient way. Inside a list item we can add text, image, links etc. In this Best Way to Learn HTML Online for WordPress tutorial we will learn more about different kinds of HTML lists.

HTML Unordered Lists

An unordered list is a collection of items that have no special order or sequence. It’s starting tag <ul> & ending tag </ul>. Inside ul element each list item starts with <li> & ends with </li>.

Here is an example:

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Below the output:

HTML Unordered Lists

By default it’s showing black & round bullet marker for each items. We can change this marker by using list-style-type & it’s default value is disc.

Here is an example with default value disc:

<ul style="list-style-type:disc;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

So this code will show same output like before.

If list-style-type value is circle then code will be like this:

<ul style="list-style-type:circle;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Below the output:

HTML Unordered List Style Type Circle

If list-style-type value is square then code is below:

<ul style="list-style-type:square;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Below the output:

HTML Unordered List Style Type Square

If list-style-type value is none then code is below:

<ul style="list-style-type:none;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Below the output:

HTML Unordered List Style Type None

HTML Ordered Lists

An ordered list is a collection of items that have special order or sequence. It’s starting tag <ol> & ending tag </ol>. Inside ol element each list item starts with <li> & ends with </li>.

Here is an example:

<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

Below the output:

HTML Ordered Lists

By default it will show a marker in numbered ordering. We can change this marker by using list-style-type & it’s default value is decimal.

So below code will show same result:

<ol style="list-style-type: decimal;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

To make it uppercase letter then list-style-type value will be upper-alpha.

Here is an example:

<ol style="list-style-type: upper-alpha;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

Below the output:

HTML Ordered List style type upper-alpha

To make it lowercase letter need to add value lower-alpha for list-style-type & code is below:

<ol style="list-style-type: lower-alpha;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

Below the output:

HTML Ordered List style type upper-alpha

To make it upper roman number need to add value upper-roman for list-style-type & code is below:

<ol style="list-style-type: upper-roman;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

Below the output:

HTML Ordered List style type upper-roman

To make it lower roman number need to add value lower-roman for list-style-type & code is below:

<ol style="list-style-type: lower-roman;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

Below the output:

HTML Ordered List style type lower-roman

HTML Nested Lists

In HTML inside one unordered or ordered list can create as many underordered or ordered list.

Here is an example for unordered nested list:

<ul>
<li>List Item 1
<ul>
<li>List Item 1 Sub 1</li>
<li>List Item 1 Sub 2</li>
</ul>
</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

Below the output:

HTML Nested List Unordered

Here is an example for ordered nested list:

<ol>
<li>List Item 1
<ol>
<li>List Item 1 Sub 1</li>
<li>List Item 1 Sub 2</li>
</ol>
</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

Below the output:

HTML Nested List Ordered

HTML Block and Inline Elements

In HTML, for every element there is a display value based on element types. There are two default & mostly used display values are block & inline.

Let’s learn more in this Best Way to Learn HTML Online for WordPress tutorial.

HTML Block Elements

A block element starts on a new line & will show as full width element.

Here is an example:

<h2>This is a heading</h2>
<div style="border:1px solid #000;">This is a block element</div>

In this example, div is a block element with it’s opening tag <div> & closing </div>. So it will start on a new line after h2 element & will be full width. Added a border so that can understand it better.

Below the output:

HTML Block Elements

div is a commonly used element & it’s mainly used as a container for other elements or contents.

To understand more here is another example:

<div style="background-color:#000;color:#fff;border:5px solid #ff9933;padding:10px 20px;">
<h2>This is title</h2>
<hr>
<p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>

Below the output:

HTML Block Elements

Some other commonly used block elements tag:

<article>, <blockquote>, <footer>, <form>, <h1> to <h6>, <header>, <hr>, <li>, <main>, <nav>, <ol>, <p>, <section>, <table>, <ul>, <video>

HTML Inline Elements

An inline element don’t start on a new line but will show next to other content. Also it will not show as full width but will take space as much it’s content have.

Here is an example:

<p>HTML inline element <span style="border: 1px solid #000;">This is inline span element</span> inside a paragraph</p>

In this example, inside paragraph an inline element span is added. It has opening tag <span> & closing tag </span>. Used a border for more understandings.

Below the output:

HTML Inline Elements

Some other commonly used inline elements tag:

<a>, <b>, <big>, <br>, <button>, <cite>, <code>, <em>, <i>, <img>, <input>, <label>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>

HTML class Attribute

In HTML, class attribute will be used to design elements. For same HTML file or page there can be multple class name in different or same elements. So same class style will be implemented for those elements.

To add styles for a class, that class name will be written using dot (.) sign followed by the name of the class.

We will use some examples to make it understandable in this Best Way to Learn HTML Online for WordPress tutorial.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
.block {
background-color: #000;
color: #fff;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="block">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
</body>
</html>

In this example code, block is a class name & added some CSS for this class under style attribute.

Below the output:

HTML class Attribute

We can add same class for another div & example below:

<!DOCTYPE html>
<html>
<head>
<style>
.block {
background-color: #000;
color: #fff;
margin-bottom: 10px;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="block">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
<div class="block">
<h2>This is title 2</h2>
<p>This is text 2</p>
</div>
</body>
</html>

Here in both div declared same class name. So for both div style will be same.

Output below:

HTML class Attribute for Two div

If we want to design each div differently then need to create different class for each. Let’s create blockOne for first div & blockTwo for second div.

Here is the example:

<!DOCTYPE html>
<html>
<head>
<style>
.blockOne {
background-color: #000;
color: #fff;
margin-bottom: 10px;
padding: 10px 20px;
}
.blockTwo {
background-color: green;
color: #fff;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="blockOne">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
<div class="blockTwo">
<h2>This is title 2</h2>
<p>This is text 2</p>
</div>
</body>
</html>

Below the output:

HTML class Attribute for Two div different class

To design each elements need to add some more CSS code.

Here is another example:

<!DOCTYPE html>
<html>
<head>
<style>
.blockOne {
background-color: #000;
color: #fff;
margin-bottom: 10px;
padding: 10px 20px;
}
.blockTwo {
background-color: green;
color: #fff;
padding: 10px 20px;
}
.blockOne h2 {
color: red;
}
.blockOne p {
color: orange;
}
.blockTwo h2 {
color: black;
}
.blockTwo p {
color: white;
}
</style>
</head>
<body>
<div class="blockOne">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
<div class="blockTwo">
<h2>This is title 2</h2>
<p>This is text 2</p>
</div>
</body>
</html>

In this code, .blockOne h2 means h2 element under class name blockOne & .blockOne p means p element under class name blockOne. Same for .blockTwo h2 & .blockTwo p.

Below the output:

HTML class Attribute for Two div different class

To add class for inline element here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
.block {
background-color: #000;
color: #fff;
padding: 10px 20px;
}
.classOne {
color: red;
}
.classTwo {
color: orange;
}
</style>
</head>
<body>
<div class="block">
<h2>This is <span class="classOne">inline span element</span> title</h2>
<p>This is <span class="classTwo">inline span element</span> text</p>
</div>
</body>
</html>

In this code, created two different classes classOne & classTwo for different span elements.

Below the output:

HTML class Attribute for inline span element

We can add multile classes under same element & below an example:

<!DOCTYPE html>
<html>
<head>
<style>
.title {
background-color: #000;
color: #fff;
padding: 10px 20px;
}
.titleOne {
color: red;
}
</style>
</head>
<body>
<h2 class="title titleOne">This is title 1</h2>
<h2 class="title">This is title 2</h2>
</body>
</html>

Here in first h2 element added two classes title & titleOne. For titleOne added some CSS as well to understand it more.

Here is the output:

HTML class Attribute & multile classes

To understand more, we can add same class for different elements.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
.title {
background-color: #000;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="title">This is Heading 2</h2>
<h3 class="title">This is Heading 3</h3>
</body>
</html>

In this code, class name title is used in different elements h2 & h3 but same style will be used as class name is same.

Below the output:

HTML class Attribute & same class

class name is case sensitive, that means block & Block is two different class name. class can be used in any HTML elements.

We will learn more about class in our CSS tutorial.

HTML id Attribute

In HTML, id attribute will be used to design elements as like class attribute. One difference is, id name have to be unique in one HTML document. If we create same id for multiple elements then it will not be a valid HTML.

To add styles for an id, that id name will be written using hash (#) sign followed by the name of the id.

Let’s use some examples in this Best Way to Learn HTML Online for WordPress tutorial.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
#block {
background-color: #000;
color: #fff;
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="block">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
</body>
</html>

In this example, one id is created with it’s name block. Added some CSS for this id.

Below the output:

HTML id Attribute

Here is another example:

<!DOCTYPE html>
<html>
<head>
<style>
#blockOne {
background-color: #000;
color: #fff;
padding: 10px 20px;
margin-bottom: 10px;
}
#blockTwo {
background-color: green;
color: #fff;
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="blockOne">
<h2>This is title 1</h2>
<p>This is text 1</p>
</div>
<div id="blockTwo">
<h2>This is title 2</h2>
<p>This is text 2</p>
</div>
</body>
</html>

In this example, two id created, one is blockOne & another one blockOTwo.

Below the output:

Using id we can create a link & move to one specific page section on click.

To understand more, here is an example:

<p id="sectionPage" style="background-color:orange;padding:10px;">This is a Page Section</p>
<a href="#sectionPage">Move to Page Section</a>

In this example, created a paragraph first with it’s id sectionPage & then created a link that’s linked with that paragraph using href #sectionPage.

Below the output:

This is a Page Section

Move to Page Section

So after you will click on this link “Move to Page Section” then page will move to this “This is a Page Section”.

id name is case sensitive, that means block & Block is two different id name. id can be used in any HTML elements but it has to be unique in one HTML document.

We will learn more about id in our CSS tutorial.

HTML Iframes

In HTML, iframe is used to display a web page within a web page. It has a opening tag <iframe> & closing tag </iframe>.

In this Best Way to Learn HTML Online for WordPress tutorial let’s learn more about HTML iframes.

Syntax for iframe:

<iframe src="URL"></iframe>

URL will be added under src attribute.

Here is an example:

<iframe src="https://wpupskills.com/"></iframe>

In this example, src is used our site URL. So site will show in iframe.

Below the output:

We can set width & height of an iframe.

Here is an example:

<iframe src="https://wpupskills.com/" width="500" height="400"></iframe>

By default width & height are specified in pixels.

We can write this code using CSS as well like this below:

<iframe src="https://wpupskills.com/" style="width:500px;height:400px;"></iframe>

To make it full width but a fixed height then need to add width:100% in style sttribute.

Here is the code:

<iframe src="https://wpupskills.com/" style="width:100%;height:400px;"></iframe>

To remove border from iframe need to use border property with value zero pixel.

Here is an example:

<iframe src="https://wpupskills.com/" style="width:100%;height:400px;border:0px;"></iframe>

If we want to design it’s border then here is another code:

<iframe src="https://wpupskills.com/" style="width:100%;height:400px;border:2px solid orange;"></iframe>

Below the output:

HTML Forms

In HTML we can create a form using form element to collect information from users. It has opening tag <form> & closing tag </form>. This contains different types of form elements like:

text fields, select, check boxes, radio buttons, textarea, submit buttons and other elements.

Let’s use some examples to understand it more in this Best Way to Learn HTML Online for WordPress tutorial.

Here is an example:

<form>
<label>First Name:</label><br>
<input type="text" name="fname"><br>
<label>Last Name:</label><br>
<input type="text" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

In this example, a form is created with two text fields & one submit field. In text field added name attribute as well & this will be needed later to take those fields values after submitting the form. Added title using label element.

Below the output:

HTML Forms

HTML Form Elements

There are different types of form elements in HTML form.

HTML Form input Element

input element is commonly used HTML form element. It has type attribute with different values but default value is text.

Here is an example:

<form>
<label>First Name:</label><br>
<input type="text" name="fname"><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form input Element

HTML Form select Element

Using select element we can create drop down list & below an example:

<form>
<label>Selet from drop down:</label><br>
<select name="dropDown">
<option value="value-1">Value 1</option>
<option value="value-2">Value 2</option>
<option value="value-3">Value 3</option>
<option value="value-4">Value 4</option>
<option value="value-5">Value 5</option>
</select><br><br>
<input type="submit" value="Submit">
</form>

Under select element option element is created to show drop down content & each option has value attribute & after submitting the form this will used later. By default first option will be selected & after clicking on field other options will show up.

Below the output:

HTML Form select Element

If we want to make one option selected then can use selected attribute in option attribute. Let’s make “Value 2” selected by default.

Here is an example:

<form>
<label>Selet from drop down:</label><br>
<select name="dropDown">
<option value="value-1">Value 1</option>
<option value="value-2" selected>Value 2</option>
<option value="value-3">Value 3</option>
<option value="value-4">Value 4</option>
<option value="value-5">Value 5</option>
</select><br><br>
<input type="submit" value="Submit">
</form>

Beow the output:

HTML Form select Element Selected

To select more than one value from drop down can use multiple attribute in select attribute.

Here is an example:

<form>
<label>Selet from drop down:</label><br>
<select name="dropDown" multiple>
<option value="value-1">Value 1</option>
<option value="value-2">Value 2</option>
<option value="value-3">Value 3</option>
<option value="value-4">Value 4</option>
<option value="value-5">Value 5</option>
</select><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form select Element multiple

HTML Form textarea Element

In HTML, textarea element is used to define multiline input field. This field is used to collect long text like description or message in the form.

Here is an example:

<form>
<label>Add some message:</label><br>
<textarea name="message">Please add some message you want to send</textarea><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form textarea Element

We can change width & height of this textarea field using cols (this will specify width) & rows (this will specify height).

Here is another example:

<form>
<label>Add some message:</label><br>
<textarea name="message" cols="40" rows="5">Please add some message you want to send</textarea><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form textarea Element width & height

We can adjust this width & height using CSS as well like this below:

<form>
<label>Add some message:</label><br>
<textarea name="message" style="width:400px;height:150px;">Please add some message you want to send</textarea><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form textarea Element width & height uing CSS

HTML Form button Element

We can create a button using button element in HTML form.

Here is an example:

<form>
<label for="fname">First Name:</label><br>
<input type="text" name="fname"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>

In this code, created two buttons, one button type submit & another one type reset.

Below the output:

HTML Form button Element

HTML Form fieldset and legend Elements

In HTML form, we can group related information using fieldset element & to define a caption for that group we can use legend element.

Here is an example:

<form>
<fieldset>
<legend>Name</legend>
<label>First Name:</label><br>
<input type="text" name="fname"><br>
<label>Last Name:</label><br>
<input type="text" name="lname"><br>
</fieldset>
<fieldset>
<legend>Address</legend>
<label>Office:</label><br>
<textarea name="officeAddress" style="width:300px;height:50px;"></textarea><br>
<label>Home:</label><br>
<textarea name="homeAddress" style="width:300px;height:50px;"></textarea><br>
</fieldset><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form fieldset and legend Elements

HTML Form Input Types

In HTML form, there are various types of input element. Based on input field functionality this type will be defined.

HTML Form Input Type text

To define single line text input field text type is added.

Below an example:

<form>
<label>Name:</label><br>
<input type="text" name="name"><br>
<label>Subject:</label><br>
<input type="text" name="subject"><br><br>
<input type="submit" value="Submit">
</form>

Output below:

HTML Form Input Type text

HTML Form Input Type password

To show a password field then password input type will be used.

Here is an example:

<form>
<label>Username:</label><br>
<input type="text" name="username"><br>
<label>Password:</label><br>
<input type="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form Input Type password

After typing in password field then it will show as like asterisks or circles.

HTML Form Input Type submit

In HTML form, input type submit will be used for submitting the form.

Here is an example:

<form>
<label>Name:</label><br>
<input type="text" name="name"><br>
<label>Position:</label><br>
<input type="text" name="position"><br><br>
<input type="submit" value="Submit Button">
</form>

Using value attribute can change submit button text.

Below the output:

HTML Form Input Type submit

HTML Form Input Type reset

Input reset type button will reset all fields value to their default values.

Here is an example:

<form>
<label>First Name:</label><br>
<input type="text" name="fname"><br>
<label>Last Name:</label><br>
<input type="text" name="lname"><br><br>
<input type="submit" value="Submit Button">
<input type="reset" value="Reset Button">
</form>

Below the output:

HTML Form Input Type reset

After typing in input field then if click on “Reset Button” then all fields value will show blank again as it’s default value.

HTML Form Input Type radio

In HTML form, using radio input type we can select one option from all choices.

Here is an example:

<form>
<label>Select your favorite color:</label><br>
<input type="radio" name="color" value="black">
<label>Black</label><br>
<input type="radio" name="color" value="green">
<label>Green</label><br>
<input type="radio" name="color" value="orange">
<label>Orange</label><br><br>
<input type="submit" value="Submit">
</form>

In this code, for all three radio input field have used same name “color” as we want to select color from one of those.

Below the output:

HTML Form Input Type radio

HTML Form Input Type checkbox

Using checkbox type we can select multiple options.

Here is an example:

<form>
<label>Select your favorite color:</label><br>
<input type="checkbox" name="color" value="black">
<label>Black</label><br>
<input type="checkbox" name="color" value="green">
<label>Green</label><br>
<input type="checkbox" name="color" value="orange">
<label>Orange</label><br><br>
<input type="submit" value="Submit">
</form>

This is a modified code of previous code for radio type. Just changed radio to checkbox & all other is same. So here we can select multiple options.

Below the output:

HTML Form Input Type checkbox

HTML Form Input Type button

Using input type button we can make a button.

Here is an example:

<form>
<label>Name:</label><br>
<input type="text" name="name"><br><br>
<input type="button" value="Submit Button">
</form>

Below the output:

HTML Form Input Type button

Below will learn some more HTML form input type in this Best Way to Learn HTML Online for WordPress tutorial.

HTML Form Input Type color

To show a color option in input field then color type will be used.

Example below:

<form>
<label>Favorite color:</label><br/>
<input type="color" name="favoriteColor" value="#ff9933"><br/><br/>
<input type="submit" value="Submit">
</form>

Added a color code in value for color input type.

Below the output:

HTML Form Input Type color

After clicking on color box a popup will appear to select color.

HTML Form Input Type date

To show a date field then input type date will be used.

Example below:

<form>
<label>Select a date:</label><br/>
<input type="date" name="dateSelect"><br/><br/>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form Input Type date

After clicking on date field a calender will popup to select date from it.

HTML Form Input Type email

To add an email field then email input type should be created.

Below an example:

<form>
<label>Email:</label><br/>
<input type="email" name="email"><br/><br/>
<input type="submit" value="Submit">
</form>

Depending on browser support, email address will be automatically validated.

Below the output:

HTML Form Input Type email

You can try typing an email address or not an email address to see the output.

HTML Form Input Type file

Using file input type we can create a file selection field.

Here is an example:

<form>
<label>Select a file:</label><br/>
<input type="file" name="fileSelect"><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form Input Type file

HTML Form Input Type number

To add a numeric input field then number input type will be created.

Here is an example:

<form>
<label>Select a number:</label><br/>
<input type="number" name="numberSelect"><br/><br/>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form Input Type number

Using up & down arrow we can add a number or can directly type a number. If any other value typed except number then depending on browser support it will be validated.

To make a search field then input type search will be used.

Here is an example:

<form>
<label>Search here:</label><br/>
<input type="search" name="searchField"><br/><br/>
<input type="submit" value="Search">
</form>

Below the output:

HTML Form Input Type search

HTML Form Input Type tel

To make a telephone number tel input type will be used.

Here is an example:

<form>
<label>Phone number:</label><br>
<input type="tel" name="phone"><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form Input Type tel

HTML Form Input Type time

To make a time field then time input type will be used.

Here is an example:

<form>
<label>Select a time:</label><br/>
<input type="time" name="timeSelect"><br/><br/>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form Input Type time

HTML Form Input Type url

To make URL address field, input type url will be used. Based on browser support, this field will be automatically validated when submitted the form.

Here is an example:

<form>
<label>Type URL:</label><br/>
<input type="url" name="urlField"><br/><br/>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form Input Type url

HTML Form Input Attributes

There are different kind of input field attributes in HTML form.

Below some important & commonly used input attributes with examples.

HTML Form Input Attribute value

Using value attribute we can set initial value for an input field.

Here is an example:

<form>
<label>First name:</label><br>
<input type="text" name="firstName" value="Web Coding"><br>
<label>Last name:</label><br>
<input type="text" name="lastName" value="Academy"><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form Input Attribute value

HTML Form Input Attribute readonly

readonly attribute is used when we want to make a field read-only & in that case that field can’t be edited.

Here is an example:

<form>
<label>This field is read only:</label><br>
<input type="text" name="websiteName" value="Web Coding Academy" readonly><br><br>
<input type="submit" value="Submit">
</form>

In this example, we have added readonly attribute for input type text field. So this field we can’t edit.

Below the output:

HTML Form Input Attribute readonly

HTML Form Input Attribute disabled

disabled attribute will be used to make a disabled field.

Here is an example:

<form>
<label>This field is disabled:</label><br>
<input type="text" name="websiteName" value="Web Coding Academy" disabled><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form Input Attribute disabled

HTML Form Input Attribute size

size attribute will be used to define visible width in characters for an input field.

Here is an example:

<form>
<label>30 characters long input field:</label><br>
<input type="text" name="sizeField" size="30"><br><br>
<input type="submit" value="Submit">
</form>

For input type text field size is 30, so this field visible width will be 30 characters width.

Below the output:

HTML Form Input Attribute size

size default value is 20.

size attribute can be included in following input types: text, search, tel, url, email and password.

HTML Form Input Attribute maxlength

maxlength attribute will be used to specify maximum number characters allowed in an input field.

Here is an example:

<form>
<label>4 digit PIN:</label><br>
<input type="text" name="pin" maxlength="4" size="4"><br><br>
<input type="submit" value="Submit">
</form>

As it’s maxlength=”4″ for input type text, so if we type characters more than four then it will not be possible. Also added size=”4″, so it’s visible width will be 4 characters width.

Below the output:

HTML Form Input Attribute maxlength

HTML Form Input Attribute min and max

min and max attributes will be used to specify minimum & maximum values for an input field.

Here is an example:

<form>
<label>Enter a date before 2000-01-01:</label><br>
<input type="date" name="dateMax" max="1999-12-31"><br>
<label>Enter a date after 2000-01-01:</label><br>
<input type="date" name="dateMin" min="2000-01-02"><br>
<label>Enter a number between 1 and 10:</label><br>
<input type="number" name="numberPosition" min="1" max="10"><br>
<label>Enter a number between -1 and -10:</label><br>
<input type="number" name="numberNegative" min="-10" max="-1"><br><br>
<input type="submit" value="Submit">
</form>

Below the output:

HTML Form Input Attribute min and max

min and max attributes can be included in following input types: number, range, date, datetime-local, month, time and week.

HTML Form Input Attribute multiple

multiple attribute will be used to allow user to include more than one value for an input field.

Here is an example:

<form>
<label>Select multiple files:</label><br/>
<input type="file" name="fileName" multiple><br/><br/>
<input type="submit" value="Submit">
</form>

In this example, we can select more than one file.

Below the output:

HTML Form Input Attribute multiple

multiple attribute can be included in following input types: email and  file.

HTML Form Input Attribute placeholder

placeholder attribute includes a short description before user enters a value in an input field. We can remove field label & use this placeholder attribute instead.

Here is an example:

<form>
<input type="text" name="firstName" placeholder="First Name"><br/><br/>
<input type="text" name="lastName" placeholder="Last Name"><br/><br/>
<input type="email" name="emailAddress" placeholder="Email Address"><br/><br/>
<input type="submit" value="Submit">
</form>

After you view this result in your broswer will upderstand it more.

Below the output:

HTML Form Input Attribute placeholder

placeholder attribute can be included in following input types: text, search, tel, url, email and password.

HTML Form Input Attribute required

required attribute specifies that an input field must be filled out before submitting the form.

Here is an example:

<form>
<label>Email address (required):</label><br/>
<input type="email" name="emailAddress" required><br/><br/>
<input type="submit" value="Submit">
</form>

So if you submit this form without entering any email address it will show validation error based on your browser support.

To understand it more you can view the result in your browser.

Below the output:

HTML Form Input Attribute required

required attribute can be included in following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio and file.

HTML Form Input Attribute step

Using step attribute can add a number interval for an input field.

Here is an example:

<form>
<label>Numbers:</label><br/>
<input type="number" name="numbers" step="5"><br/><br/>
<input type="submit" value="Submit">
</form>

In this code added step value 5, so if you click on this number field up arrow then it will increase value like 5, 10, 15 so on & for down arrow will decrease value like -5, -10, -15 so on.

To understand it more you can view this in your browser.

Below the output:

HTML Form Input Attribute step

step attribute can be included in following input types:number, range, date, datetime-local, month, time and week.

HTML Form Input Attribute autofocus

To make automatically get focused in an input field when page loads then this autofocus attribute will be used.

Here is an example:

<form>
<label>First name:</label><br>
<input type="text" name="firstName" autofocus><br>
<label>Last name:</label><br>
<input type="text" name="lastName"><br><br>
<input type="submit" value="Submit">
</form>

In firstName text field autofocus is used, so mouse pointer will point in this field when page loads.

To understand more you can view this result in your browser.

HTML Form Attributes

In HTML there are various types of attributes available for form element.

HTML Form action Attribute

action attribute specifies the file URL that will process the form information when form is submitted.

Syntax for action attribute:

<form action="/action.php"></form>

So after submitting the form it will send form data to file named action.php to process information.

If action attribute value is blank then form will be processed to the same page.

HTML Form method Attribute

method attribute defines the HTTP method which browser used to submit the form.

There are two types of method available.

get method (method=”get”):

  • In this method form data will be appended to the URL in name/value format
  • It is a limit of how much data you can place in a URL & it varies between browsers
  • As all data will show in URL, so it’s not secured method when will pass sensitive information like password, credit card information

Syntax for get method:

<form method="get"></form>

post method (method=”post”):

  • In this method form data will not append to the URL
  • It has no limitations of how much data you will send
  • It’s secured method

Syntax for post method:

<form method="post"></form>

HTML Form target Attribute

target attribute defines where to display data after submitted the form.

Below added mostly used values for target attribute.

_self target (target=”_self”): response will display in current page/tab & it’s default

Syntax for _self target:

<form target="_self"></form>

_blank target (target=”_blank”): response will display in a new page/tab

Syntax for _blank target:

<form target="_blank"></form>

HTML Form novalidate Attribute

If novalidate attribute used in form then all the form data will not be validated when form is submitted.

Syntax for novalidate attribute:

<form novalidate></form>

Hope you have learned basic HTML in this Best Way to Learn HTML Online for WordPress tutorial.

Next we will move to Learn CSS For WordPress tutorial.