In the previous post, we have learned the difference between the class and id attributes and why/when we use them. In this post, we will do an exercise utilizing the knowledge that we have already learned in the previous lessons.
Exercise:
You need to create an HTML page with:
a title as “My Portfolio” (use <title> tag)
A heading which states “My Online Portfolio” (use <h2> tag)
Four links i.e. Home, About, Blog, Contact using unordered list and anchor tags (use <ul>,<li>,<a> tags)
Show profile picture (use <img> tag)
Show your name below the profile picture (use <h4> tag)
Show tagline below the name (use <p> tag)
Display your four recent experiences using the heading i.e. “My Experience” and an unordered list <ul>
Display your four recent education degrees using the heading i.e. “My Education” and an unordered list <ul>
Display your four hobbies using the heading i.e. “My Hobbies” and an unordered list <ul>
Display your contact information using the heading i.e. “Contact Information” and an unordered list <ul>
Video Demo (Urdu Language)
Exercise – Learn HTML and HTML5
After completing the above exercise, you can host your code on GitHub or any other free hosting service and send us a link in the comments section below for a review/feedback.
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section below. Thanks
In the previous post, we have learned how to set up a new WordPress project in the localhost Wamp Server. This post is the last post of the current module (i.e. Course Overview and Set-Up). In this post, we will have a recap of what we have learned and will discuss some review questions. The review questions are helpful for the candidates to decide whether they are ready to move on to the next module or not?
Recap:
In this module, we have covered the following topics:
WordPress project set up on localhost wampserver (episode 006)
Recap and review questions (episode 007)
Review Questions:
Before moving to the next module, the candidate must be able to fulfill the following requirements:
The candidate must be able to understand what is localhost and why we use it?
The WampServer must be correctly installed and working on the computer/laptop of the candidate and it must turn green when it is started
A WordPress project is set up on the localhost WampServer (as we did in episode 006) and the candidate must be able to log in to the WordPress website dashboard using the login credentials
If you fulfill the above three requirements, then you are ready to move on to the next module i.e. WordPress Core. If not, then start the lessons again until you are ready.
Video Tutorial (Urdu Language):
Recap and Review Questions – Learn WordPress
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section below. Thanks
In the previous post, we have presented an exercise to validate the knowledge learned in the previous course episodes/posts. In this post, we will learn about Meta Tags and why/how we use them on an HTML page.
Meta Tags:
You can think of the meta tags as properties/characteristics of an HTML page. These meta tags are added in the Head Tag <head>. The information added through meta tags is only readable to the browsers/ search engines and is not displayed on the actual web page.
Following are some of the meta tags commonly used on the HTML pages:
Meta Charset:
The meta charset tag is used to define the character encoding of the HTML page. The commonly used charset is “UTF-8”. See the following code example:
<meta charset="UTF-8">
Meta Keywords:
The meta keywords tag is used to define keywords for the HTML page. The keywords define what kind of content is presented on the HTML page. These keywords are used by the search engines e.g. Google, Bing, etc. to search for the relevant content on the Internet. The search query is matched to the keywords by the search engines to prepare the search results. The following code snippet shows how to add the keywords to an HTML page:
Now when a user searches for the terms portfolio, personal, etc. then your web page will be listed in the search results. The position of your page in the search results is based on the relevancy of the content and other search engine algorithms.
Meta Description:
The meta description tag is used to define a short summary of the content presented on the HTML page. This descriptive content tells the browsers/search engines about the type of content available on the page. The following snippet shows how to add a description tag to an HTML page:
The meta author tag is used to tell the browsers/search engines about the author of the HTML page. The following code snippet shows how to add an author meta tag to an HTML page:
<meta name="author" content="Junaid Hassan">
Meta Viewport:
The meta viewport tag is used to define the page properties like screen-width or initial zoom level etc. The following snippet defines the initial screen-width as device-width (responsive) and the initial zoom level as 1.0:
In the previous post, we have learned about meta tags and how to use them on an HTML page. In this post, we will learn about iFrames and how we can use them on an HTML page.
iFrame:
The iFrame tag <iframe> tag is used to show other websites on your own website in a frame. The other website can only be shown on your website if that website allows embedding features. The source attribute src is used to add the URL of the external website. The width and height attributes are used to define the width and height of the frame.
The following example code shows how to show an external website in a frame:
The iframe tag can also be used to embed YouTube videos in your own website. To embed any YouTube video, visit the YouTube video in the browser, then “Right Click” inside the video and click the “Copy Embed Code” option. Now you can place this copied code into your website page. The following code example shows the copied Embed Code of a YouTube video:
In the previous post, we have learned about the iframe tag and how we can use it on an HTML page to embed external web pages/content. In this post, we will learn the difference between the Block and Inline elements/tags.
Block Elements:
The block or block-level elements/tags are those HTML tags that 1) cover the 100% available width on the screen and 2) always start from a new line. For example the <div>, <p>, <h1>-<h6>, <form>, <ol>, <ul>, <li>, <table>, <video> tags etc. are the block-level elements/tags.
Inline Elements:
The inline elements/tags cover only the width required by the inner content of the tag and start from where the previous inline element is completed. For example the <span>, <a>, <img>, <br>, <i>, <strong> tags are the inline elements.
Example
Code:
<h3>The following two paragraphs will start from a new line because they are enclosed in p tag which is a block-level element.</h3>
<p>The is a block-level element.</p>
<p>This is another block-level element.</p>
Output:
The following two paragraphs will start from a new line because they are enclosed in p tag which is a block-level element.
The is a block-level element.
This is another block-level element.
Code:
<h3>The following two paragraphs will start from where the previous element is ended because they are enclosed in span tag which is an inline element.</h3>
<span>The is an inline element. </span>
<span>This is another inline element.</span>
Output:
The following two paragraphs will start from where the previous element is ended because they are enclosed in span tag which is an inline element.
The is an inline element. This is another inline element.
Video Tutorial (Urdu Language):
Block vs Inline Elements – Learn HTML and HTML5
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section below. Thanks
In the previous post, we have learned about the difference between block and inline elements. In this post, we will learn about the form and input tags as well as the placeholder attribute of the input tag.
Form Tag:
The form tag <form> is used to add a form on an HTML page. The HTML form consists of input fields. We will discuss the input fields in the next section. The following code example shows how to use the <form> tag:
<form>
</form>
Input Tag:
The input tag <input> is used to add input fields in an HTML form. The type attribute of the input tag defines the type of the input field e.g. text, number, email, password, etc. The following code example shows how to add input fields to an HTML form:
Code:
<p>The following form consists of two input fields.</p>
<form>
<input type="text" />
<input type="number" />
</form>
Output:
The following form consists of two input fields.
Placeholder Attribute:
The placeholder attribute can be added in any input field tag to display a placeholder text inside the input field. The placeholder text tells the user about the kind of information the user needs to insert in the input field.
Code:
<p>The following form consists of two input fields with placeholder texts.</p>
<form>
<input type="text" placeholder="Add text here ..." />
<input type="number" placeholder="Add number here ..." />
</form>
Output:
The following form consists of two input fields with placeholder texts.
Label Tag:
The label tag is used to define a label for any input field. The following example shows how to add a label for any input field:
Code:
<p>The following form consists of three input fields with labels and placeholder texts.</p>
<form>
<label>Username: </label>
<input type="text" placeholder="Add username here ..." /><br>
<label>Password:</label>
<input type="password" placeholder="Add password here ..." /><br>
<input type="submit" value="Click to Submit" />
</form>
Output:
The following form consists of three input fields with labels and placeholder texts.
Note: The value attribute of the input[type=submit] defines the text inside the submit button.
Video Tutorial (Urdu Language):
HTML Forms (1) – Learn HTML and HTML5
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section below. Thanks
In the previous post, we have learned about the form, input, label tags, and the placeholder attribute. In this post, we will learn about the name attribute, form action, and method attributes.
Input Name Attribute:
The name attribute of the input tag is used to access the value of the input field entered by the user. Please note that the name attribute should be unique for each input field. The following code example shows how to add the name attributes in the input fields:
Code:
<form>
<label>Username: </label>
<input type="text" placeholder="Add username here ..." name="username" /><br>
<label>Password:</label>
<input type="password" placeholder="Add password here ..." name="password" /><br>
<input type="submit" value="Click to Submit" />
</form>
Output:
Now when we submit the form, the values entered by the user will be shown in the URL of the page and those values can then be accessed by server-side languages like PHP or NodeJS (we will discuss these in other courses).
Form Action Attribute:
The form action attribute defines the URL to which the form will be submitted. For example, if you want to submit the form values to a specific page/file in your website, then the URL of that page/file will be added in the form action attribute. See the following example:
Code:
<form action="/yourpage.php">
<label>Username: </label>
<input type="text" placeholder="Add username here ..." name="username" /><br>
<label>Password:</label>
<input type="password" placeholder="Add password here ..." name="password" /><br>
<input type="submit" value="Click to Submit" />
</form>
We will discuss the form action attribute in detail when we will learn PHP in another course.
Form Method Attribute:
The form method attribute defines how the data will be submitted to the page/file defined in the action attribute. The most common method types are GET and POST. By default, the value of the method attribute is GET. See the following example:
Code:
<form action="/yourpage.php" method="GET">
<label>Username: </label>
<input type="text" placeholder="Add username here ..." name="username" /><br>
<label>Password:</label>
<input type="password" placeholder="Add password here ..." name="password" /><br>
<input type="submit" value="Click to Submit" />
</form>
GET vs POST Mothod:
The GET method is the default method value for any HTML form. The GET method is used when the data to be submitted is not sensitive and can be shown publicly. For example page/post IDs. In the case of the GET method, the form data is submitted through the query parameters shown in the page URL:
/?category=web&id=12345
The POST method is used when the data to be submitted is sensitive and cannot be shown publicly. For example username, passwords, etc. In that case, we use the POST method. In the POST method, the form data is not shown in the URL rather it’s transferred securely and can only be accessed through the server-side language like PHP or NodeJS.
We will discuss the form method attribute in detail in the PHP or NodeJS course.
Video Tutorial (Urdu Language):
Input Name Attribute, Form Action, and Method Attributes
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section below. Thanks
If you are using SCEditor as a rich text editor in your Angular/React application and you are trying are seeing that the iFrame tag is removed from the editor then I have a solution for your problem.
Problem:
The SCEditor is removing the iFrame tags to avoid the XSS attacks. How to allow the iFrame tags in SCEditor?
Solution:
So basically you need to tell the SCEditor that we have a list of allowed URLs that need to be whitelisted for iFrames. This can be done by providing an array of strings to the SCEditor instance as shown in the following code:
In the previous post, we have learned how to add a line break, strong and italicized text, div and span tags, and styleattributes. In this post, we will learn how to use style tag, link tag, and script tag and why we use them?
Style Tag:
The style tag <style> is used to add page-level Cascading Stylesheet (CSS) styles to design different parts and sections of the website. The style tag is usually placed inside the <head> tag. The following example shows how we can define the color of the h2 tag using the <style> tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<style>
h4{
color: red;
}
</style>
</head>
<body>
<h4>A red colored heading</h4>
</body>
Output:
My First Website!
A red colored heading
Link Tag:
In the previous section, we have learned how to add page-level CSS styles using the <style> tag. But what if our styles are defined in an external CSS file and we want to link it with our HTML page? Well, in that case, we use the <link> tag. The following code example shows how to link an external CSS file (style.css) to our HTML page (index.html).
Folder Structure:
My Website Project Folder
index.html
style.css
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h2>A red colored heading</h2>
</body>
The above example shows how to link an external CSS file (style.css) to an HTML page provided that both files are residing in the same root directory. The following example shows how to link an external CSS file placed in another directory called css:
Folder Structure:
My Website Project Folder
css
style.css
index.html
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<h2>A red colored heading</h2>
</body>
Script Tag:
The script tag <script> is used to 1) add page-level JavaScript code 2) to link external JavaScript files to an HTML page. The script tags are usually added before the closing body tag </body> to improve the page loading speed. The following code example shows how to add page-level JavaScript code and how to link an external JavaScript file to an HTML page:
Page-Level JavaScript Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
</head>
<body>
<h2 id="myheading">The color of this heading is changed using the JavaScript code</h2>
<script>
document.getElementById("myheading").style.color = "blue";
</script>
</body>
Output:
My First Website!
The color of this heading is changed using the JavaScript code
Linking External JavaScript File (myscript.js):
My Website Project Folder
index.html
myscript.js
The folder structure is as above.
Output:
<!DOCTYPE html>
<html>
<head>
<title>My First Website!</title>
</head>
<body>
<h2 id="myheading">The color of this heading is changed using the JavaScript code</h2>
<script src="myscript.js"></script>
</body>
Video Tutorial (Urdu Language):
Style, Link, and Script Tags
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section. Thanks
In the previous post, we have learned how to add images and videos to an HTML page. In this post, we will learn how to add tables with rows and columns to an HTML page.
Table Tag:
A table is a collection of rows and columns. To add a table to an HTML page, we use the <table> tag. To define a row inside the table we use the <tr> tag and to define a column inside a row, we use the <td> tag. See the following code example:
As you can see above that even though the table is correctly displaying the rows and columns but it’s not looking like a table. So let’s add a border to the table. The “border” attribute is used to add a border to the table. See the following code example:
To define head/header for the table, we can use the <thead> tag. The cells/columns inside the <thead> tag are added using the <th> tag. See the following code example:
The table body defines the main content of the table other than the table header or table footer. To define the table body area, we use the <tbody> tag.
In the previous post, we have learned how to download and set up localhost using Wamp Server Software. In this post, we have discussed how to set up a new WordPress project on the localhost Wamp Server.
Download WordPress:
First, you need to visit the official WordPress website https://wordpress.org/. Now click on the Get WordPress button to download the latest stable version of WordPress.
WordPress Website:
When the WordPress is completely downloaded, copy the zip and paste it inside C://wamp64/www folder. Now extract that zip file inside that folder. Then open the extracted folder and inside that folder, you will find a folder named ‘wordpress’. Now cut that folder and paste it inside the root directory i.e. C://wamp64/www. Then rename that folder to whatever name you want e.g. ‘mywebsite’.
Start Wamp Server Localhost:
Now start the Wamp Server localhost and wait until the Wamp Server icon turns green. When the icon is turned green, it means that Wamp Server is successfully started and is now ready to serve the hosted websites from the C://wamp64/www directory.
Database Creation:
Click on the Wamp Server icon and click on the phpMyAdmin. It will ask for login credentials. Enter the credentials if you have defined them. If you are visiting it for the first time then ‘root’ is the username and empty space is the password. When you are logged in to the phpMyAdmin, then from the left sidebar, click the New icon, define database name and click the Create button. The database is created, now you need to assign a user to it. Click the Privileges tab from the menu. Click the Add New User account link from the bottom of the section. Define username, password, re-type password, and assign Global Privileges by checking the icon next to it. Then click the Go button and the user will be created with assigned privileges.
WordPress Installation:
Now open your favorite website browser e.g. Google Chrome and type http://localhost/mywebsite and the WordPress installation will get started. First, you need to select the language and click the Continue button. Then it will ask for the Database credentials e.g. database name, username, password, host, etc. Enter the database credentials, you have created in the previous step. Then move to the next step and enter the Website information e.g. Site Title, WordPress admin username (create a new one), password, and click the Next button. That’s it. The installation process is completed and now you can log in to the WordPress admin dashboard using the login credentials.
Video Tutorial:
WordPress Project Set-up
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section below. Thanks
In the previous post, we have learned how to add tables with columns and rows to an HTML page. In this post, we will learn how to add line breaks, strong and italicized texts, div and span tags, and style attributes.
Line Break:
A line break is added to move the elements to the next line. The text after the line break is moved to a new line. We use the <br> tag to insert a line break. See the following example:
Code:
<p>Hello World! <br> This text will be displayed on new line.</p>
Output:
Hello World! This text will be displayed on new line.
Strong and Italic Text:
We use the <strong> tag to make the text bold. To italicize the text, we use the <i> tag. See the following code example:
Code:
<p><strong>Hello World!</strong> Starting from here, <i>the text will be italicised</i>.</p>
Output:
Hello World! Starting from here, the text will be italicised.
Div and Span Tags:
Both the div and span tags are used as container tags. We group other HTML tags inside the container tags.
The div tag/element is block-level element which means that it will cover the 100% available width and the next elements/tags will start from a new line.
Whereas, the span tag/element is an inline tag which means that it will only cover the width as needed by the inner contents and the next text/elements will start from where the span element is ended.
See the following code example:
Code:
<div>
This div tag covers the 100% width and the next element starts from a new line. Whereas, the span element only covers the width as needed by the contents of the span element.
</div>
<br>
<span>Text 1</span>
<span>Text 2</span>
Output:
This div tag covers the 100% width and the next element starts from a new line. Whereas, the span element only covers the width as needed by the contents of the span element.
Text 1Text 2
Style Attribute:
The style attribute can be added in any HTML element/tag to add different styles to the HTML element/tag e.g. text color, background color font size etc. See the following example:
Code:
<div style="color: blue;">
This text is written in div tag. If we apply a style to this div tag, it will be applied to all text inside this div tag. For exmaple, we have added a style to change the text color to blue.
</div>
<br>
<div>
Now what if we want to apply text color to specific text inside this div tag/element? In that case we can wrap <span style="color: red;">that text</span> inside a span tag/element and apply the text color to it.
</div>
Output:
This text is written in div tag. If we apply a style to this div tag, it will be applied to all text inside this div tag. For exmaple, we have added a style to change the text color to blue.
Now what if we want to apply text color to specific text inside this div tag/element? In that case we can wrap that text inside a span tag/element and apply the text color to it.
Video Tutorial (Urdu):
Line Break, Strong and Italic text, DIV and SPAN tags, and Style Attribute
Got Stuck? Any Questions?
In case of any questions, please feel free to ask in the comments section below. Thanks
CODOWPPOSTS is a WordPress plugin to show posts, pages, or custom posts on the frontend in tabular format with client-side filters and pagination. Select post type, add/re-order/delete columns with post attributes e.g. title, excerpt, author, category, or any custom post meta boxes. Define column widths, link permalinks, enable/disable client-side filters for each column. Define number of posts per page (default: 10) with client-side pagination functionality.
The plugin is reviewed by the CodeCanyon team and is approved and published on the CodeCanyon marketplace.
Today, we are starting a new course titled “Learn WordPress in Urdu”. This blog post gives an overview of the course and provides information about the contents of the course. This course is prepared using the latest version of WordPress (5.8). Each lecture consists of a written blog post (like this) and a video hosted on Youtube and Facebook pages. The video from Youtube will be embedded in the blog posts as well.
Video Episode:
Episode #001 – Course Overview
Course Contents:
The course is mainly divided into three (3) modules i.e. WordPress Core, WordPress Theme Development, and WordPress Plugin Development. Following is a list of topics covered in each section:
WordPress Core (WordPress CMS features and Website Development using Core WordPress CMS)
Posts
Pages
Media
Comments
Themes
Widgets
Customizer
Theme Options
Plugins
Users
Tools
Settings
WordPress Theme Development (Developing custom themes from scratch)
Classic vs Block Themes
Required files for theme development
Styles and Functions
Template Pages and Custom Templates
Translations
Security
Performance
Theme Options Page
Global Styles and Them JSON file
WordPress Plugin Development (Developing custom plugins from scratch)
In the previous post, we have briefly given the introduction to the course titled “Learn WordPress in Urdu”. In this post, we have discussed the course objectives, course pre-requisites/requirements, why we are learning WordPress, and what the are the learning outcomes of this course.
Course Objectives:
How to design and develop a website, blog, or an e-commerce website using WordPress CMS
How to design a custom WordPress theme
How to develop a custom WordPress plugin
Course Pre-Requisites/ Requirements:
Personal computer/laptop
Basic understanding of English language and terms
Basic understanding of how to use Internet
Why WordPress?
WordPress was started back in 2003 and now it’s very mature content management system (CMS) to design and develop websites
WordPress is an open-source software i.e. anyone can download it, customize and extend it by using themes and plugins
To design and develop a website, you don’t need to learn programming languages
Course Learning Outcomes/Benefits:
Become a freelancer and sell your services online as a freelance WordPress designer and developer
Become a theme author/seller and sell your custom WordPress themes online
Become a plugin developer and sell your custom WordPress plugins online
Video Episode:
Course Requirements
Conclusion:
In this post, we have briefly discussed the course objectives, pre-requisites/requirements, why we are learning WordPress, and what are the course learning outcomes. If you have any questions, please feel free to ask in the comments sections. Happy Learning!
In the previous blog post, we have learned what is HTML and in this blog post, we will learn how to create a simple HTML page from scratch.
To get started, just create a new folder and name it “my-website” and inside that folder create a new Text Document (.txt) file and save it as index.html and add the following code to it.
The above code is a very basic and standard code that basically adds necessary HTML tags for a web page.
<!DOCTYPE html>: tells the browser that the document type of this file is HTML
<html></html>: The <html> tag tells the browser that contents added in between these tags are HTML tags
<head></head>: The <head> tag is used to define meta data for the web page. The contents inside the head tag are not displayed on the website
<title></title>: The <title> tag defines the title of the web page which is shown in the browser tab
<body></body>: The <body> tag actually define the contents of the web page visible inside the browser
<h1></h1>: The heading tag (<h1>-<h6>) is used to add different level headings in the web page
<p></p>: The paragraph tag (<p>) is used to add paragraph in the web page
Now save this document and open it inside the browser e.g. Google Chrome and you will see the following output:
Hello World!
Welcome to my web page.
Congratulations! You have just created your first web page using HTML. In the next tutorials, we will learn about the other HTML tags and how to use them. Stay tuned!
Video Tutorial:
How to Create a Simple HTML Page
If you have any questions, please feel free to ask in the comments section.
In the previous blog post, we have learned how to create a simple HTML page. In this blog post, we will learn how to add paragraphs, headings, and anchor tags (links) to an HTML page.
How to Add Paragraphs to HTML Page?
Paragraphs are used to show text-based information on the website pages. To add paragraphs to the website page, we use the <p> tag. Open the index.html file that you have created in the previous lesson and inside the <body> tag add the following code:
<p>Hello World! I'm learning HTML & HTML5</p>
This code will add a paragraph to the page. Similarly, you can add as many paragraphs as you want. Now save the index.html file and open the file in any browser (e.g. Google Chrome) and you will see the text “Hello World! I’m learning HTML & HTML5”.
How to Add Headings to HTML Page?
Headings are used for adding titles to the website pages. HTML provides six heading variations (H1-H6). H1 is the biggest possible heading and H6 is the smallest possible heading. The following code snippet shows how to add different heading levels to the website page using HTML tags.
Now save the index.html file and open the file in any browser (e.g. Google Chrome) and you will see the headings added to the page.
How to Add Anchor Links to HTML Page?
Anchor links are used to internal or external links to the website pages. The links can be connected to the internal sections of the website or they can be linked to any external website. The <a> tag is used to add links to the HTML website pages. The following code snippet shows how to add an external website link to a website page.
In the previous blog posts, we have briefly discussed the course help material and where to ask in case of any questions. In this blog post, we will learn what is localhost, why we need to use it, and how to set up localhost on your computer/laptop.
What is Localhost?
According to Wikipedia, “In computer networking, localhost is a hostname that refers to the current computer used to access it”.
Why We Need to Set Up Localhost?
In simple words, we want our computer/laptop to work as a hosting server for our website project. By default, our computer/laptop doesn’t have the functionality to act as a hosting server for our website. So we need to install software on our computer e.g. WampServer, XamppServer, or Local for WP to make our computer ready to host our WordPress website project. You can use any of these options to get started with the WordPress development project. I have installed WampServer on my computer so I will take it as a reference in future conversations. But installing/configuring Wamp Server or Xampp Server may produce some errors/warnings. So I will recommend installing Local for WP because it’s easier to install and configure your WordPress project.
How to Set Up Localhost?
You can download and install any of the 3 software mentioned above to set up localhost on your computer/laptop. In the next video, we will learn how to set up localhost using WampServer and optionally in another video, we will learn how to set up localhost using Local for WP as well. You don’t need to install both software. You can either install WampServer or Local for WP.
Got Stuck? Any Questions?
If you got stuck at any point or if you have any questions, please feel free to ask in the comments section below. Thanks for reading!
In the previous post, we have learned what is localhost? why we use it? and how we can set up localhost on our computer/laptop. We have learned that we can install Wamp Server, Xampp Server, or Local for WP software to set up localhost on our computer/laptop. In this post, we will discuss how to install Wamp Server to set up localhost on our computer.
Download Wamp Server
Visit the official Wamp Server website https://www.wampserver.com/en and click the Download button to download the latest stable version of Wamp Server.
Download Wamp Server
Install Wamp Server
When the Wamp Server is downloaded, double click on the downloaded .exe file and follow the instructions to install the Wamp Server on your computer/laptop.
Verfication
After the installation is completed, a new Folder will be created in your C:// drive named Wamp or Wamp64. Run the installed Wamp Server (Start Menu -> Wamp), and see the icon in the taskbar. At the start the icon will be red, then it will turn orange, and eventually, it will turn green. The green icon means that the Wamp Server is correctly configured and running all its services. Now we are ready to set up a new WordPress project in Wamp Server (Next Episode).
Video Episode:
Wamp Server Installation
Got Stuck? Any Questions?
In case of any questions, feel free to ask in the comments section below. Thanks!
In the previous post, we have discussed paragraphs, headings, and anchor tags. In this post, we will learn about how to add ordered lists, unordered lists, quotations (Blockquotes), and HTML comments.
Lists:
Lists are used to group related items. Lists can be ordered or unordered.
Ordered Lists:
To add ordered lists in an HTML page, we use <ol> tag. Then to add items to the ordered list we can use the <li> tag. See the following example code:
To add unordered lists in an HTML page, we use <ul> tag. Then to add items to the unordered list we can use the <li> tag. See the following example code:
Blockquotes are used when text is copied from an external source/author. To add blockquote to an HTML page, we use the <blockquote> tag. See the following example with an output:
Example Code:
<blockquote>Some quotation from external source</blockquote>
Output:
Some quotation from external source
HTML Comments:
HTML comments are written inside the HTML page for reference and they are not displayed on the actual web page. The HTML comments are helpful when you are working with a team. The other members of the team can understand why a particular piece of code was added by seeing the HTML comments. See the following example:
Example Code:
<!--This is a sample HTML comment-->
Output:
The output is empty because HTML comments are not displayed on the actual page.
Video Tutorial:
Got Stuck? Any Questions?
In case of any questions, please free to ask in the comments section below. Thanks for reading!
