Lectures List

HTML tutorial

HTML learn to design web page

HTML stands for HyperText Markup Language, which is used to create web pages.

HTML defines the structure of the web page, HTML was created by Tim Berner Lee, also known as the inventor of WWW (World Wide Web).

Software required to develop web pages?

  • Code Editor
  • Web Browser

Code editor

This software is used to write the code of programming languages like HTML, PHP, Python, etc.

Some of the most popular code editors are Notepad, Notepad++Sublime Text 3Visual Code Studioatom

Web browsers

This software is used to run web pages.

Structure of web page

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Structure of web page</title>
</head>
<body>
<p>
Structure of web page.
</p>
</body>
</html>

Note:

Save the file as First_page.html

Where

<!DOCTYPE html> tells to browser about the standard of the web page and ensures to support all HTML5 tags.

<html lang=”en”> define web page language to english, it is also root of web page.

 

<head>
it is called meta section of web page which contain all meta tags and resource file links like <title>, <link>, <script>, etc.

<title>
define the title of the web page that displays at the title bar of the browser.

<body>
it is the main part of the web page where actual data of application displayed and <body> tag define sectioning root of the application.

Content sectioning tags in HTML

  • <address>
  • <aside>
  • <article>
  • <header>
  • <footer>
  • <h1> to <h6> all heading tags
  • <main>
  • <nav>
  • <section>

<address> tag

This tag indicates about enclosing tag contain contact informatioin, address about person, people’s, and organisation.

Example

<address>
24 Floor, Gandhi Road Delhi.
</address>

<aside> tag

This tag indicates the enclosing tag contains information that is indirect to the main content.

Example

<aside>
Find best resource at https://www.freecodepoint.com
</aside>

<article> tag

This tag can be used to show forum posts, blog posts, and stories.

Example

<article>
…. here can write story, post 
</article>

<header> tag

This tag contains introductory information about the web page and company logo, search form, etc.

Example

<header>
<h1>FreeCodePoint.com</h1>
</header>

<footer> tag

This tag contains website copyright data, about the author, links to related documents.

Example

<footer>
2020 All rights are reserved.
</footer>

<h1> to <h6> heading tags

Heading tags are used to writing the heading of web pages. <h1> is top-level heading and <h6> is lower-level heading.

Example

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>

<main> tag

This tag contains the dominant content of the body of a document.

<nav> tag

This tag represent a section that contains navigation links.

Example

<nav>
<a href=’/login’>Login</a>
<a href=’/register’>Register</a>
</nav>

<section> tag

Represents a section of the web page.

Example

<section>
A part of section
</section>

Text tags

These text tags define data.

  • <blockquote>
  • <div>
  • <dl>, <dt>, <dd>
  • <ol>,<li>
  • <ul>,<li>
  • <p>
  • <hr>
  • <pre>
  • <figure>
  • <figcaption>

<blockquote> tag

used to quote a message or passage.

Example

<blockquote>
<p>
 I am not handsome but I can give my hand to someone who need help.. Because beauty is required in heart not in face!
</p>
<footer>
– A. P. J. Abdul Kalam
</footer>
</blockquote>

<div> tag

It is called a division tag, also called a container tag, that has no effect on content like <p> tag.

Example:

<div>
Dream is not that which you see while sleeping it is something that does not let you sleep
</div>

<dl>,<dt>, <dd> tag

<dl> create description list

<dt> create data terms

<dd> describe data or terms.

Example:

<dl>
<dt>Dream, Dream Dream. Dreams transform into thoughts and thoughts result in action.</dt>
<dd>- A. P. J. Abdul Kalam</dd>

<dt>My Lord,
Never let me climb so high
That I am unable to embrace another stranger,
Deliver me ever from such arrogance</dt>
<dd>- Atal bihari vajpayee</dd>
</dl>

<ol>,<li> tag

<ol> tag stands for ordered list, that is display an ordered list, and <li> stands for list.
Note: <ol> tags has attributes type, start

the type attribute has value one of the given value [1, a, A, i, I]

Example

<h2>Popular Web Browsers</h2>
<ol type=”A” start=”3″>
<li>Google Chrome</li>
<li>Microsoft Edge</li>
<li>Opera</li>
<li>Mozilla Firefox</li>
</ol>

<ul>,<li> tag

<ul> tag stands for unordered list, that is display unordered list, and <li> stands for list.
Note: <ul> tag has attributes type

The type attribute has value of the given value [“disk”, “circle”, “square”]

Example

<h2>List of application softwares</h2>
<ul>
<li>MS Word</li>
<li>MS Excel</li>
<li>MS Power point</li>
</ul>

<p> tag

This is called paragraph tag, mainly used to write paragraphs, posts, articles, it is also called a container tag.

Example

<p>
All physical components which are attached to the computer are called Hardware.
</p>

<hr> tag

<hr> tag stands for Horizontal tag, this tag insert an horizontal tag.

<pre> tag

This tag display data as write within this tag, it can be used to display formatted text on the web page.

Example

<pre>
   *
  ***
 *****
</pre>

<figure> tag

This tag represents self-contained content, with optional <figcaption> tag.

<figcaption> tag

Describe the rest of the content of its parent tag, also represents caption or legend for content.

Example

<figure>
<img src=”yoga.jpg” alt=”Yoga”>
<figcaption>Yoga</figcaption>
</figure>

Inline semantic tags

Inline tags mean a tag that has an effect in a line and has no 100% width is called inline tags.

and those tags that describe its meaning to both browser and developer are called semantics tags.

Popular semantics tags are:

  • <small>
  • <strong>
  • <a>
  • <span>
  • <code>
  • <time>
  • <mark>
  • <em>
  • <br>
  • <abbr>
  • <cite>

<small> tag

use to write small text line print, copyright content in small format.

Example:

<small>
&copy; All rights are reserved.
</small>

<strong> tag

<strong> tag create the importance of text and makes text some bold, it is also used to display a text for seriousness, urgency, and important text.

Example

<p>
Welcome to <strong>FreeCodePoint.com</strong>
</p>

<a> tag

It is called an anchor tag, which is used to create an internal, external link.

<a> tag has three main attributes.

  1. href   [ used to create a link ]
  2. name [used to create bookmark ]
  3. target [used to open a page in same, new tab ], has two value _blank (open a link in a new tab), _self (open a link in the same tab)

Example

<a href=”https://freecodepoint.com” target=”_blank”>Freecodepoint.com</a>

where href is hypertext reference which specifies an address of source where the user will visit after clicking on this link and target=”_blank” specify where a link will open, as you can see we have write _blank, it means this link file will open in new tab.

<span> tag

This tag is an inline tag, has an effect in a current line, can be used to format some text within a line, and it has no special effect like italic, underline, and bold tags.

Example

<span>Category: News</span>

<code> tag

This tag format a text and display content as computer code, it is used to write any computer code within it.

Example

<code>
var a,b,c;
a=10;
b=20;
c=a+b;
document.write(“sum:”+c);
</code>

<time> tag

This tag used to display time content.

Example

<time>11:09:23 AM</time>

<mark> tag

This is also called a highlighter tag, it highlights contained text.

Example

<mark>H<sub>2</sub>O</mark>

<em> tag

Display emphasizes text like italic or screw text.

Example

<em>Welcome to freecodepoint.com</em>

<br> tag

This tag breaks a line.

<abbr> tag

Abbreviation element used to write acronym and abbreviation of words.

<abbr>Central Processing Unit</abbr>

<cite> tag

Used to describe creative work

Example:

Inventor of WWW was <cite>Tim Berners LEE</cite>

Demarcating tags

  • <del> tag
  • <ins> tag

<del> tag

Pass a line through a text

Example

Jeans Rs. 3,000 Rs. 2,000

<span>Jeans <del>Jeans Rs. 3,000</del> Rs. 2,000</span>

<ins> tag

Insert an underline line for selected text.

Example

A computer is an electronic machine.

<p>A computer is an <ins>electronic machine</ins></p>

Table tags

Table has number of tags to define table structure on the web page.

  • <table>
  • <thead> – Table head
  • <tbody> – Table body
  • <tr> – Table row
  • <th> – Table heading
  • <td> – Table data
  • <caption> – Table caption, contain text or title about table data.
  • <tfoot> – Table footer

Example

<table border=”1″ width=”100%”>
  <caption>Product prices</caption>
  <thead>
   <tr>
    <th>Sr no</th>
    <th>Product</th>
    <th>Price</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>1</td>
    <td>Mouse</td>
    <td>Rs. 300</td>
   </tr>

   <tr>
    <td>2</td>
    <td>Monitor</td>
    <td>Rs. 3000</td>
   </tr>

   <tr>
    <td>1</td>
    <td>Keyboard</td>
    <td>Rs. 800</td>
   </tr>
  </tbody>
  <tfoot>3 Rows</tfoot>
 </table>

Interactive elements tags

  • <details>
  • <summary>

Interactive tags provide tools collapse show hide content.

Example

<details>
     <summary>Computer</summary>
     A Computer is an electronic machine.
</details>

It will provide output as when the user will click on the summary text that is Computer, then the definition of the computer will show to the user.

HTML form

Form tag

tag:
<form>

Attributes

name Define name of form
action Define where form data will submit
method Submit method it can be either GET OR POST
enctype has value "multipart/form-data", it is need when form contain file input field.

Input tag

This tag is used to get data from user.

<input />

Attributes

Attribute name Used for Values
type Define type of input field
text
password
radio
checkbox
submit
number
date
time
color
url
button
email
file
range
search
hidden


name To get data from form input field name of input field (user defined)
value To set default data in the input field predefined value of input field(user defined)

Special input attributes

placeholder Display ghosted text
required Make input field value required
disabled Make input field not editable/accessible
min Define input field minimum value
max Define input field maximum value
step Define step value
multiple Define number of items can be selected
maxlength Define maximum no of characters can be input in input field
minlength Define minimum no of characters can be input in input field
checked Make checkbox in checked state
selected Make option selected
accept

audio/*
image/*
video/*

readonly

Make input field value to be read only.

Audio/Video 

<audio>
     <source src="" type="audio/mp3"/>
     Your browser does not support audio tag, please update browser or install another one
</audio>

 

<video>
   <source src="" type="audio/mp4"/>
   Your browser does not support video tag, please update browser or install another one
</video>

Audio Attributes

controls  
autoplay  
loop  
muted  
src  
preload  

Video Attributes

width  
height  
controls  
autoplay  
loop  
muted  
src  
preload  
poster  

iframe tag

Embed other document within current document.

<iframe src="other document source" width="100%" height="500">
Terms & Conditions CAPSCOM TECHNOLOGY Pvt. Ltd. का बेहतर रूप से संचालन करने के लिए यहॉ कुछ नियमें और शर्ते लागू है अगर आप कैप्सकॉम टैक्नोलॉजी में पढ़ रहे है तो यह आप पर लागू होता है।