Author: junaidte14

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

<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>

<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>

Video Tutorial (Urdu Language):

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:

<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>

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:

<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:

<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):

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:

<meta name="keywords" content="portfolio, personal, website, resume">

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:

<meta name="description" content="My online resume">

Meta Author:

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:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The meta viewport tag with the above values makes sure that the web page is displayed correctly on all devices thus making the web page responsive.

Video Tutorial (Urdu Language):

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:

<p>The following form consists of two input fields.</p>
<form>
    <input type="text" />
    <input type="number" />
</form>

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.

<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>

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:

<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>

Note: The value attribute of the input[type=submit] defines the text inside the submit button.

Video Tutorial (Urdu Language):

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 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:

<!--<iframe src="http://blog.codoplex.com" width="360" height="500"></iframe>

Embed Youtube Video using iFrame:

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:

<iframe width="350" height="280" src="https://www.youtube.com/embed/Wnv28LT9WPQ" title="iFrame Video Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You can adjust the width and height of the frame by changing the values of the width and height attributes of the iframe.

Got Stuck? Any Questions?

In case of any questions, please feel free to contact in the comments section below. Thanks

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)

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 add a line break, strong and italicized text, div and span tags, and style attributes. 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.

<!DOCTYPE html>
<html>
<head>
    <title>My First Website!</title>

    <style>
        h4{
            color: red;
        }
    </style>
</head>
<body>
   <h4>A red colored heading</h4>
</body>

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).

<!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:

<!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:

<!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>

<!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):

Got Stuck? Any Questions?

In case of any questions, please feel free to ask in the comments section. Thanks