Lectures List
capscom technology computer course almora

HTML tutorial

Network of networks

What is called the internet?

Internet is simply called network of networks, it is connection of computers around the world.

Sharing resources

The internet started in the 1960s as the project for government researchers to share information. the computers in the 60s were large and immobile, till the innovation of internet, information shared using magnetic computer tapes.

Another reason for the innovation of internet was the heating up of the cold war, the soviet union's launched the sputnik satellite and it forces the U.S defence department to consider the development of the system that can share information even after the nuclear attack.

It was the ARPANET(Advanced Research Projects Agency Network), currently known as the Internet.

In that time it had limited membership to certain academic and research organization who had contracts with the defence department.

January 1, 1983 is considered as the official birthday of the internet.

Before the internet, computer networks did not have a standard way to communicate with each other, a new communications protocol was established that is called TCP/IP (Transfer control protocol/Internet protocol).

it allowed different kinds of computers on the difference network to talk to each other.

Types of internet protocol

There are different ways to retrieve information from the networks, www is one of the way, other connections are called protocol.

In other word, protocol is also called rules and regulation to share information.

 

File sharing protocol

FTP (File transfer protocol)

It was the first service of the internet to share file from one computer to other.

Nowadays putty is one the software that uses FTP to access files from one computer to other computer.

 

Communication protocol

Email

This method of internet communication protocol allow users to communicate with each other.

Multimedia information protocol

Hypertext transfer protocol

  1. It become the most popular protocol among peoples when it was developed in the late 1980s by the european lab for the particle physics in switzerland.
  2. it is most popular way to access information from the internet.
  3. it does not offer to download the file, also allow to jump from one site to other site through hyperlinks.
  4. the most sparkling feature of web is formated text. 

Browsers and navigation

In the web files are access through the software that is called browser, it is an application software to run or view the web page,

Some of the popular browsers are

  1. Google chrome
  2. Mozilla firefox
  3. Edge
  4. Opera

 

Navigation

 

Uniform resource location(URL) is an address of the resource over the internet, when the user surfing the internet, there is the location at the top of the browser that is also called the address bar, here user type the address of computer for that the user required to access information.

 

Example

  • https://www.capscom-technology.com
  • http://www.capscom-technology.com(Turned into https)

http

Hypertext transfer protocol that tells the browser to look for the included web address over the internet.

 

  1. capscom-technology - domain name
  2. .com - domain

HTML

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">
Author/Written by: Mr Hemant Singh (Founder)
Terms & Conditions CAPSCOM TECHNOLOGY Pvt. Ltd. का बेहतर रूप से संचालन करने के लिए यहॉ कुछ नियमें और शर्ते लागू है अगर आप कैप्सकॉम टैक्नोलॉजी में पढ़ रहे है तो यह आप पर लागू होता है।