1: Important terms of HTML and there functions

First, add an extension in VS code Live Server.
Then Open settings, from the side panel choose extensions, choose live server config, and now change your default browser to chrome.
Now make a new file in VS code ===> index.html

Important terms:

There are a few important terms of HTML, these are:

1:  This is a comment in HTML. Everything within it will not be executed.

Example:

<!--This is a comment-->

2: <!DOCTYPE html> This is the starting of an HTML code.

3: <html></html> Everything is written between this in an HTML file.

4: <head></head> Information above the web page is written between this.

5: <title></title> This when written between head, give title to tab in the browser.

Example:

code:

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

browser:

6: <body></body> Information to display on a web page is written on it.

7: These all are heading types with h1 being the biggest and h6 being the smallest.

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

Example:

code:

<!DOCTYPE html>
<html>
    <head>
        <title>Website</title>
    </head>
    <body>
        <h1>Heading</h1>
        <h2>Heading</h2>
        <h3>Heading</h3>
        <h4>Heading</h4>
        <h5>Heading</h5>
        <h6>Heading</h6>
    </body>
</html>

browser:

8: <p></p> You can write any paragraph between it and it will automatically put line space before and after it.

9: lorem Write this and hit enter in VS code and it will generate a sample text.

10: <br> This will add a line break (Go to a new line) where ever it is placed whether it is between a paragraph or above or below it.

11: <hr> This will add a full horizontal line between the page ie it horizontally divides the page.

12: <a href=""></a> Anything within > < can be made a hyperlink and it will be redirected to the link entered between " " .

Example:

code

<!DOCTYPE html>
<html>
    <head>
        <title>Website</title>
    </head>
    <body>
         <a href="https://www.google.com/"><h1>Google</h1></a>
    </body>
</html> 

browser

when clicked:

13: title="" Anything written between " " will pop up when cursor hower over the hyperlink button or text.

Example:

code

<!DOCTYPE html>
<html>
    <head>
        <title>Website</title>
    </head>
    <body>
        <a href="https://www.google.com/"title="Go to Google">
            <h1>Google</h1></a>
    </body>
</html>

browser

14: target="_self"> This makes file open in the same tab. If you don't write this, it will also do the same.

15: target="_blank" This opens the file in new tab.

Example:

code

<!DOCTYPE html>
<html>

<head>
    <title>
        Online Crockery Store
    </title>
</head>

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

</html>

16: To make a new page that can be opened from the main page, make a new HTML file in VS code. Then write ! and hit enter. VS code will do the rest.

Now add, a hyperlink of page2 in the index file, so that when u click the specific button on page, it will take you to the other page.

Example:

intdex.html

<!DOCTYPE html>
<html>

<head>
    <title>
        Online Crockery Store
    </title>
</head>

<body>
    <h1>This is page 1</h1>
    <hr>
    <a href="page2.html" title="Go to Page 2" target="_self">
        <h1>Page 2</h1>
    </a>
</body>

</html>

page2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>This is page 2</h1>
    <hr>
    <a href="index.html" title="Go to page 1" target="_self"><h1>Page 1</h1></a>
</body>
</html>

17: Adding an image on the web page:

To add an image, in the body write img and hit enter: <img src="" alt="">

src here means source, and within its " " you write the name of the image shrek.jpg if the image is in the same directory as index.html. If it is in the images folder or another directory, you will also have to write its directory before it. Like : /images/puss.jpg
alt here means alternative text that will be shown on the screen if image is loading.
You can also change the size of the image by writing height and hitting enter : height="" . Now write height within " " and height is increased proportionally with the width. If you don't want this, you can also add width element.

Example:

code

<!DOCTYPE html>
<html>
    <head><title>Website</title></head>
    <body>
        <h1>This is my 1st Website</h1>
        <hr>
        <img src="/images/puss.jpg" alt="puss" height="">
        
    </body>

</html>

you can also add an image between <a href=""></a> to make it a hyperlink and redirect it on another page. Example:

<!DOCTYPE html>
<html>

<head>
    <title>Website</title>
</head>

<body>
    <h1>This is my 1st Website</h1>
    <hr >
    <a href="https://en.wikipedia.org/wiki/Puss_in_Boots" title="more about puss" target="_blank">
        <img src="/images/puss.jpg" alt="puss" height=""></a>

</body>

</html>

18: Adding an audio to a webpage :

For sample audio file, you can use yt audio library.
Download an audio file.
To add an audio to the webpage use: <audio src="" ></audio> and within " " add the directory of the audio file.
You can also add more attributes like

controls: to add controls of audio file on the webpage.
loop: audio will restart on its own once it is finished.
autoplay: the audio file will start playing once the webpage is loaded.
muted: the audio file will be muted by default.

Example:

code

<!DOCTYPE html>
<html>
    <head><title>website</title></head>
    <body>
        <h1>Audio file</h1>
        <hr>
        <audio controls muted autoplay loop src="/audio/Savior - Telecasted.mp3"></audio>
    </body>
</html>

You can also use multiple formats in case the browser does not support a specific audio file format.
<!DOCTYPE html>
<html>
<head><title>website</title></head>
<body>
<h1>Audio file</h1>
<hr>
<audio controls autoplay muted loop>
<source src="/audio/Savior - Telecasted.mp3">
<source src="/audio/Savior - Telecasted.wav">
This browser does not support HTML5 audio file
</audio>
</body>
</html>
If no format is supported by the browser "This browser does not support HTML5 audio file" will appear on the screen.

19: Add a video to a webpage:

To use a sample video go to sample-video.com
To add video file use <video src=""></video>
****(You can use width attribute to change size of video window oin the webpage.)****
code
<!DOCTYPE html>
<html>
<head><title>website</title></head>
<body>
<h1>Video file</h1>
<hr>
<video controls autoplay muted loop width="600"
src="/video/SampleVideo_720x480_2mb.mp4"></video>
</body>
</html>
To use different format of video use:
<!DOCTYPE html>
<html>
<head><title>website</title></head>
<body>
<h1>Video file</h1>
<hr>
<video controls autoplay muted loop width="600">
<source src="/video/SampleVideo_720x480_2mb.mp4">
<source src="/video/SampleVideo_720x480_2mb.mkv">
This browser does not support HTML5 audio
</video>
</body>
</html>

20: Different Text formating tags:

code

<!DOCTYPE html>
<html>
    <head><title>Webpage</title></head>
    <body>
        <h1>Different Text Formating Tags</h1>
        <hr>
        <p>This is  normal text</p>
        <p>This is  <b>bold</b> text</p>
        <p>This is  <i>itallic</i> text</p>
        <p>This is  <big>big</big> text</p>
        <p>This is  <small>small</small> text</p>
        <p>This is  <sub>subscript</sub> text</p>
        <p>This is  <sup>superscript</sup> text</p>
        <p>This is  <ins>inserted</ins> text</p>
        <p>This is  <del>deleted</del> text</p>
        <p>This is  <mark>mark</mark> text</p>
    </body>
</html>

browser

21: Making Lists in HTML:

There are three types of lists:

Unordered lists
Ordered lists
Description lists

Unordered lists:

Everything within the the list is written between <ul></ul> which means unordered list.
If you want to add list in a list ie subpoints, you can again add <ul></ul> .
Each point should be enclosed between <li></li> .
code
<!DOCTYPE html>
<html>
<head><title>Webpage</title></head>
<body>
<h1>Unordered list</h1>
<hr>
<ul>
<li>Pizza dough</li>
<li>Tomato Sauce</li>
<li>Cheese</li>
<li>Toppings
<ul>
<li>Pepperoni</li>
<li>Mushrooms</li>
<li>Pepper</li>
</ul>
</li>
</ul>
</body>
</html>
browser

Ordered list:

Everything in an ordered list is enclosed in <ol></ol>
You can number the points in 5 different ways:

1. , 2. , 3.
A, B, C
a, b, c
I, II, III
i, ii, iii

code
<!DOCTYPE html>
<html>
<head><title>website</title></head>
<body>
<h1>Ordered List</h1>
<hr>
<ol>
<li>Eat Breakfast</li>
<li>Take Shover</li>
<li>Leave for Work</li>
</ol>

<ol type="A">
<li>Eat Breakfast</li>
<li>Take Shover</li>
<li>Leave for Work</li>
</ol>

<ol type="a">
<li>Eat Breakfast</li>
<li>Take Shover</li>
<li>Leave for Work</li>
</ol>

<ol type="I">
<li>Eat Breakfast</li>
<li>Take Shover</li>
<li>Leave for Work</li>
</ol>

<ol type="i">
<li>Eat Breakfast</li>
<li>Take Shover</li>
<li>Leave for Work</li>
</ol>
</body>
</html>
browser

Discription list:

Everything in an ordered list is enclosed in <dl></dl>
<dt></dt> is used to write the title.
To add description <dd></dd> is used.
code
<!DOCTYPE html>
<html>
<head><title>Website</title></head>
<body>
<h1>Description List</h1>
<hr>
<dl>
<dt>HTML<b>:</b></dt>
<dd>This adds structure</dd>
<br>
<dt>CSS<b>:</b></dt>
<dd>This adds design</dd>
<br>
<dt>Javascript<b>:</b></dt>
<dd>This adds functionality</dd>
</dl>
</body>
</html>
browser

22: Make a table in HTML:

Everything within the table must be enclosed in <table></table>
Each horizontal row must be enclosed in <tr></tr> ie table row.
In the first row, there is always a header ie the title of the column. This header is enclosed in <th></th> .
Every other row is the data of the table and is enclosed in <td></td> .
<!DOCTYPE html>
<html>
<head><title>Website</title></head>
<body>
<h1>Store Hours</h1>
<hr>
<br>
<table>
<tr>
<th>Sunday</th>
<th>Sunday</th>
<th>Sunday</th>
<th>Sunday</th>
<th>Sunday</th>
<th>Sunday</th>
<th>Sunday</th>
</tr>
<tr>
<td>Closed</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>Closed</td>
</tr>
</table>
</body>
</html>
You can also add other attributes to the table:

If you want to color the cells use bgcolor="" and enter a color in " "

Color the row header and row data separately and then color the table tag to make boundaries.

If you want to change the width of the cells, then use width="" with each cell <th> and all the column <td> of the same row.
To change the height of the cells, use height="" with the row <tr> within which the cell is located.
If you want to align text in the center use align="center" with the row <tr> that you want to align and also with the <table> if you want to align table too.
code
<!DOCTYPE html>
<html>
<head><title>Website</title></head>
<body>
<h1>Store Hours</h1>
<hr>
<br>
<table bgcolor="black" align="center" >
<tr bgcolor="grey" height="50">
<th width="100">Sunday</th>
<th width="100">Monday</th>
<th width="100">Tuesday</th>
<th width="100">Wednesday</th>
<th width="100">Thursday</th>
<th width="100">Friday</th>
<th width="100">Saturday</th>
</tr>
<tr bgcolor="lightgrey" align="center" height="50">
<td width="100">Closed</td>
<td width="100">9-5</td>
<td width="100">9-5</td>
<td width="100">9-5</td>
<td width="100">9-5</td>
<td width="100">9-5</td>
<td width="100">Closed</td>
</tr>
</table>
</body>
</html>
browser

23: Add colors to the webpage:

To add colors to the webpage use the tag style=""
To color to text use style="color: ;" and then write the name of the color and the hover the cursor over the color box and select the specific shade of that color. It will automatically add the rgb value of that color.
You can also choose a background color in the same way by using style="background-color: black;" in the <body>.
Color can be written in three ways:
<!DOCTYPE html>
<html>
<head><title>Website</title></head>
<body style="background-color: black;">
<h1 style="color: rgb(55, 216, 154);">Colors to Webpage</h1>
<hr style="">
<p style="color: aqua;">This is sample text</p>
<p style="color: rgb(27, 127, 221);">This is sample text</p>
<p style="color: #09a5ed;">This is sample text</p>
</body>
</html>
browser
You can also choose rgb and # value from the color picker by writing rgb color picker on chrome.

23: Span and div tags:

Span:
If you want to add color or other elements to a sentence or a part of the sentence, use <span></span> tag.

Span is an in-line element
<!DOCTYPE html>
<html>
<head><title>Website</title></head>
<body style="background-color: black;">
<h1 align="center" style="color: aliceblue;">Span and Div tags</h1>
<hr>
<p><span style="color: blueviolet;">Lorem ipsum ,</span>
<span style="color: aqua;"> dolor sit amet consectetur adipisicing elit
Voluptatum</span></p>
</body>
</html>
browser

Div:
Div is exactly the same as span but it is a block-level element. Span cannot be used when you are trying to add multiple elements in multiple paragraphs at the same time.
code
<!DOCTYPE html>
<html>
<head><title>Website</title></head>
<body >
<h1 align="center" >Span and div</h1>
<hr>
<div style="color: blue; background-color: rgb(83, 228, 143);">
<p>Lorem ipsum dolorit amet consectetur adipisicing s elit. Necessitatibus animi quisquam fuga iste nostrum laudantium sunt eligendi, nesciunt minus obcaecati ipsum, praesentium distinctio quos ducimus rem ipsam? Molestiae, commodi a.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus animi quisquam fuga iste nostrum laudantium sunt eligendi, nesciunt minus obcaecati ipsum, praesentium distinctio quos ducimus rem ipsam? Molestiae, commodi a.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus animi quisquam fuga iste nostrum laudantium sunt eligendi, nesciunt minus obcaecati ipsum, praesentium distinctio quos ducimus rem ipsam? Molestiae, commodi a.</p>
</div>
</body>
</html>

24: <meta> tags:

Meta data is the data of the data.
This is the data that cannot be explained to browser using title.
It tells us the information about our website.
There is no closing tag in it

i. <meta charset="UTF-8">

...???...

ii. <meta name="description" content="Free HTML course for beginners">

...???...

iii. <meta name="keywords" content="HTML, Tutorials, Beginners">

This is used for SEO purposes.

iv. <meta name="author" content="Chaudhry">

...???...

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

Use this to optimize your webpage view with respect to different devices ie mobile.

vi. <meta http-equiv="refresh" content="30">

When used, your webpage will refresh in every 30s ie time that is written between content=" ".

25: Iframe

It is used to embed another webpage onto your HTML document or embed content from another source.
It is usually used to embed ads onto your webpage or for some hacking purposes.
Like, you can embed a banking website onto your webpage and when someone visits your website and enter his credentials, you will get them easily.
Most of the secured websites have blocked embedding for security purposes but there are still a large number of websites like Bing.com that allows embedding.

You can use <iframe src="" frameborder="0"></iframe> and in src=" " you can add the link of some website that you want to embed or an ad page that you want to embed.
To embed an ad, make a new doc in vs code let ad.html and hit ! and then press tab. A new html file will be created and now just enter the file name in the src=" ". Now write something in the body or add a video or an ad picture and save. The advertisement will be started to show on the main html page.
index.html
<!DOCTYPE html>
<html>
<head><title>website</title></head>
<body>
<iframe width="600" height="100" src="ad.html" frameborder="0"></iframe>
</body>
</html>
ad.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="background-color: aqua;"><h1>This is an advertisement</h1></div>
</body>
</html>

26: Make a simple button in HTML:

To make a simple button in HTML use <button></button> function and write between > < what you want to be shown in the button.
You can also add style to the button by changing the background color and border-radius etc.
You can redirect to some webpage when you click that button by adding a hyperlink to the button using <a href=""></a> .
code
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
</head>
<body>
<a href="https://www.google.com/" title="Go o google" target="_blank">
<button style="background-color: aqua; border-radius: 7px;">Click me</button>
</a>
</body>
</html>
browser

27: Code for basic HTML form:

<!DOCTYPE html>
<html>
    <head><title>Website</title></head>
    <body>
        <form action="">

        <div>    
            <label for="fname">First name:</label>
            <input type="text" id="fname" name="fname" placeholder="First" required>
        </div>
        <br>


        <div>
            <label for="lname">Last name:</label>
            <input type="text" name="lname" id="lname" placeholder="Last" required>
        </div>
        <br>


        <div>
            <label for="pass">Password:</label>
            <input type="password" name="pass" id="pass" maxlength="12" required>
        </div>
        <br>


        <div>
            <label for="mail">Email:</label>
            <input type="email" name="mail" id="mail" placeholder="name@gmail.com" required>
        </div>
        <br>


        <div>
            <label for="phone">Phone Number:</label>
            <input type="tel" name="phone" id="phone" placeholder="03001234567" required>
        </div>
        <br>


        <div>
            <label for="bday">Date of Birth:</label>
            <input type="date" name="bday" id="bday" required>
        </div>
        <br>


        <div>
            <label for="quan">Quantity:</label>
            <input type="number" name="quan" id="quan" min="1" max="20" value="1" required>
        </div>
        <br>


        <div>
            <label for="title">Title:</label>

            <label for="mr">Mr.</label>
            <input type="radio" name="title" id="mr">
 
            <label for="mrs">Mrs.</label>
            <input type="radio" name="title" id="mrs">

            <label for="r">    Not Specified</label>
            <input type="radio" name="title" id="r">
        </div>
        <br>


        <div>
            <label for="pay">Payment Option:</label>
            <select name="pay" id="pay"                                                                                                                                                                                                                                                 >
                <option value="mastercard">Mater Card</option>
                <option value="visa">Visa</option>
                <option value="jazzcash">Jazz Cash</option>
                <option value="easypaisa">Easy Paisa</option>
                <option value="COD">Cash on Delivery</option>
            </select>         
        </div>
        <br>


        <div>
            <label for="sub">Subscribe:</label>
            <input type="checkbox" name="sub" id="sub">
        </div>
        <br>


        <div>
            <input type="reset">
        </div>
        <br>


        <div>
            <input type="submit">
        </div>


        </form>
    </body>
</html>

To make a form you first have to use <form action=""></form> .
It is better to make <div></div> for every entity in the form.
In every entity when you have to write the name of the entity you have to use <label for=""></label> .

In this tag, write the specific name that you want to give to the entity within for=" " .
Write the name of the entity between > <

To take specific type of input use <input type="" name="" id="">

Here write the type of text that you want to take as input in type=" "
Write the same name that you write between for='' " in name=" " and id" " .

By doing this when you will click even on the name of the entity, it will let you write in the box.

Input types:

button
checkbox
color
date
datetime
datetime-local
email
files
hidden
image
month
number
password
radio
range
reset
search
submit
tel (used when a phone number is required)
text
time
url
week

Placeholder: You can add place holder placeholder="" in the input tag, and this will make sample text to show inside the box where you have to make an input.
Required: You can use a required within the input tag, due to which, you won't be able to proceed to submit before entering required data in that field.
While using password as input, you can set maximum length of character as a password using maxlength="" and between " " you can add number of maximum characters.
Date: When date is used as input type, a small calendar will be shown on the screen to choose specific date.
Number: When number is used as input type, two small arrows will be shown inside the entery box to increase or decrease the number.

You can also use min="" to set a minimum value, max="" to set a maximum value and value="" to choose a default.

Radio: Using radio as input type will make a circle on the screen that can be marked.

If you want to only to choose one option, give all radio the same name.
If you want to choose multiple options within the same div, you can set everyone's name different.
Note: In both cases, for and id should be different for each radio

Checkbox: Input type checkbox will make a box on the screen that you can tick.
List to select one option: If you want to make a list to select one option from, use the tag <select name="" id=""></select> and within > < , you can write all the option by making <option value=""></option> tag for every option in which:

You can write the option within > < .
And you can give that option a specific name within value=" " .

Reset: Input type reset will make a reset button that will remove all of your entered data.
Submit: Input type submit will let you submit your entered data.

Search This Blog

html_css_js

1: Important terms of HTML and there functions

Important terms:

Comments

Post a Comment

Popular posts from this blog

Javascript whole in one

3: HTML blog's visual content with source code

Bootstrap whole in one