CodeTextPro | Free Web Tutorial

CodeTextPro | Free Web Tutorial

Codetextpro Provides free Web tutorial, HTML, CSS, C, C++, Java, JavaScript, PHP, MySql, Python, Program, Programming Notes, Programming Questions and more.

Programming

Breaking

Tuesday, July 16, 2019

Memory Management in OS || Memory Management Techniques in OS

8:52 AM 0
Memory Management in OS || Memory Management Techniques in OS
Memory Management

In a mono programming or uni programming system, the main memory is divided into two parts, one part for the operating system and another part for a job which is currently executing. Consider the following figure below.


memory management
memory management in operating system notes


Partition-1 is allowed for Operating system and partition-2 is allowed for the user process. But some part of partition 2 wasted, it is indicated by black color.

In a multiprogramming environment, the user space is divide into the number of the partition. Each partition is for one process.

The task of the subdivision is carried out dynamically by the operating system, this task is known as “Memory Management”.


Memory Management Unit (MMU):

It is a hardware component that handles all memory and caching operation associated with the processor. So MMU is responsible for all overactivity of memory management.



Logical Address Space and Physical Address Space:
An address generated by CPU is called logical address, whereas an address generated by MMU is called Physical address.

For example, J1 is a program, written by the user, the size of the program is 100KB. But program loaded in main memory from 2100 to 2200 KB. This actual loaded address in main memory is called physical address.

The set of all logical address is generated by a program is referred to as a “Logical address space”.

The set of the physical address corresponding these logical address referred to as a “Physical address space”.



Logical and Physical address space in OS



In our example from 0 to 100KB is the logical address space and from 2100 to 2200KB in the physical address space.

So, Physical address space = Logical address space + Contents of relocation register/ Base value
2200= 100 + 2100


The run-time mapping from logical to physical address is done by the memory management unit (MMU). The relocation register is also known as the base register. The value of the relocation register is added to every address generated by a user process at the time it is sent to the memory.

For example, the base is at 2100, then the attempt by the user to address location 0 is dynamically related to location 2100. An access location 100 is mapped to location 2200.


Swapping:

A process needs to be in memory for execution. But sometimes there is not enough main memory to hold all the currently active processes in a timesharing system. So, the excess process is kept on disk and brought in to run dynamically. Swapping is the process of bringing in each process in main memory, running it for a while and then putting it back to the disk.

Swap in- switch a process from disk to main memory.

Swap out- switch a process from main memory to disk.


Memory Allocation:

Memory allocation is a process by which computer programs are assigned memory or space. It is of three types:

1. First Fit
The first hole that is big enough is allocated to the program.

2. Best Fit
The smallest hole that is big enough is allocated to the program.

3. Worst Fit
The largest hole that is big enough is allocated to the program.



Memory Partitioning:

1. Fixed Partitioning: Main memory is divided into a no. of static partitions at system generation time. A process may be loaded into a partition of equal or greater size. Memory Manager will allocate a region to a process that best fits it unused memory within an allocated partition called internal fragmentation Advantages: Simple to implement Little OS overhead Disadvantages: Inefficient use of Memory due to internal fragmentation. Main memory utilization is extremely inefficient. Any program, no matter how small, occupies an entire partition. This phenomenon, in which there is wasted space internal to a partition due to the fact that the block of data loaded is smaller than the partition, is referred to as internal fragmentation.

Two possibilities of Partitioning:
a). Equal size partitioning 
b). Unequal size Partitioning

Unequal size partitioning is not suitable for systems in which process memory requirements not known ahead of time; i.e. timesharing systems.


Fixed Memory Partition


When the queue for a large partition is empty but the queue for a small partition is full, as is the case for partitions 1 and 3. Here small jobs have to wait to get into memory, even though plenty of memory is free An alternative organization is to maintain a single queue as in above Fig. (b).
Whenever a partition becomes free, the job closest to the front of the queue that fits in it could be loaded into the empty partition and run.

Sunday, July 14, 2019

Introduction to Socket Program in Networking By CodeTextPro || Hanif Miah

2:50 PM 0
Introduction to Socket Program in Networking  By CodeTextPro || Hanif Miah
Socket Programming in Networking



socket program


The client-server model
Most interprocess communication uses the client-server model. These terms refer to the two processes which will be communicating with each other. One of the two processes, the client, connects to the other process, the server, typically to make a request for information. A good analogy is a person who makes a phone call to another person. Notice that the client needs to know of the existence of and the address of the server, but the server does not need to know the address of (or even the existence of) the client prior to the connection
being established. Notice also that once a connection is established, both sides can send and receive information.

The system calls for establishing a connection are somewhat different for the client and the server, but both involve the basic construct of a socket. A socket is one end of an interprocess communication channel. The two processes each establish their own socket.


TCreate a socket with the socket() system call

1. Connect the socket to the address of the server using the connect() system call
2. Send and receive data. There are a number of ways to do this, but the simplest is to use the

read() and write() system calls.



The steps involved in establishing a socket on the server-side are as follows:

1. Create a socket with the socket() system call
2. Bind the socket to an address using the bind() system call. For a server socket on the
Internet, an address consists of a port number on the host machine.
3. Listen for connections with the listen() system call
4. Accept a connection with the accept() system call. This call typically blocks until a client connects with the server.



Send and receive data he steps involved in establishing a socket on the client side are as follows:

3. Create a socket with the socket() system call
4. Connect the socket to the address of the server using the connect() system call
5. Send and receive data. There are a number of ways to do this, but the simplest is to use the

read() and write() system calls.



The steps involved in establishing a socket on the server-side are as follows:

1. Create a socket with the socket() system call
2. Bind the socket to an address using the bind() system call. For a server socket on the
Internet, an address consists of a port number on the host machine.
3. Listen for connections with the listen() system call
4. Accept a connection with the accept() system call. This call typically blocks until a client connects with the server.
5. Send and receive data.



Socket Types

When a socket is created, the program has to specify the address domain and the socket type. Two
processes can communicate with each other only if their sockets are of the same type and in the
same domain. There are two widely used address domains, the Unix domain, in which two processes
which share a common file system communicate, and the Internet domain, in which two processes

running on any two hosts on the Internet communicate. Each of these has its own address format.

• The address of a socket in the Unix domain is a character string which is basically an entry in the file system.

• The address of a socket in the Internet domain consists of the Internet address of the host machine (every computer on the Internet has a unique 32-bit address, often referred to as its IP address). In addition, each socket needs a port number on that host. Port numbers are 16-bit unsigned integers. The lower numbers are reserved in Unix for standard services. For example, the port number for the FTP server is 21. It is important that standard services be at
the same port on all computers so that clients will know their addresses. However, port numbers above 2000 are generally available.

• There are two widely used socket types, stream sockets, and datagram sockets. Stream sockets treat communications as a continuous stream of characters, while datagram sockets have to read entire messages at once. Each uses its own communications protocol. Stream sockets use TCP (Transmission Control Protocol), which is a reliable, stream-oriented protocol and datagram sockets use UDP (Unix Datagram Protocol), which is unreliable and
message-oriented.



Coding technique

The server code uses a number of ugly programming constructs, and so we will go through it line by line.
#include <stdio.h>
This header file contains declarations used in most input and output and is typically included in all C programs. 
#include <sys/types.h>
This header file contains definitions of a number of data types used in system calls. These types are used in the next two include files. 
#include <sys/socket.h>
The header file socket.h includes a number of definitions of structures needed for sockets.
#include <netinet/in.h>
The header file netinet/in.h contains constants and structures needed for internet domain addresses. 
int main(int argc, char *argv[]){int sockfd, newsockfd, portno, clilen, n;
sockfd and newsockfd are file descriptors, i.e. array subscripts into the file descriptor table.
These two variables store the values returned by the socket system call and the accept system call. 

portno stores the port number on which the server accepts connections.

clilen stores the size of the address of the client. This is needed for the accept system call.

n is the return value for the read() and write() calls; i.e. it contains the number of characters read or written.

Each running process has a file descriptor table which
contains pointers to all open i/o streams. When a process
starts, three entries are created in the first three cells of
the table. Entry 0 points to standard input, entry 1 points
to standard output, and entry 2 points to standard error.
Whenever a file is opened, a new entry is created in this

table, usually in the first available empty slot.


char buffer[256];
 The server reads characters from the socket connection into this buffer.

struct sockaddr_in serv_addr, cli_addr;
A sockaddr_in is a structure containing an internet address. This structure is defined in <netinet/in.h>. 
Here is the definition:
struct sockaddr_in {short sin_family;u_short sin_port;struct in_addr sin_addr;char sin_zero[8];};
An in_addr structure, defined in the same header file, contains only one field, an unsigned long called s_addr. The variable serv_addr will contain the address of the server, and cli_addr will contain the address of the client which connects to the server. 
sockfd = socket(AF_INET, SOCK_STREAM, 0);if (sockfd < 0)error("ERROR opening socket");
The socket() system call creates a new socket. It takes three arguments. The first is the address domain of the socket. Recall that there are two possible address domains, the Unix domain for two processes which share a common file system, and the Internet domain for any two hosts on the Internet. The symbol constant AF_UNIX is used for the former, and AF_INET for the latter (there
are actually many other options which can be used here for specialized purposes). The second argument is the type of socket. Recall that there are two choices here, a stream socket in which characters are read in a continuous stream as if from a file or pipe, and a datagram socket, in which messages are read in chunks. The two symbolic constants are SOCK_STREAM and SOCK_DGRAM. The third argument is the protocol. If this argument is zero (and it always should be except for unusual circumstances), the operating system will choose the most appropriate protocol. It will choose TCP for stream sockets and UDP for datagram sockets.

The socket system call returns an entry into the file descriptor table (i.e. a small integer). This value
is used for all subsequent references to this socket. If the socket call fails, it returns -1. In this case,

the program displays an error message and exits. However, this system call is unlikely to fail.
bzero((char *) &serv_addr, sizeof(serv_addr));
The function bzero() sets all values in a buffer to zero. It takes two arguments, the first is a pointer to the buffer and the second is the size of the buffer. Thus, this line initializes serv_addr to zeros. 
portno = atoi(argv[1]);
The port number on which the server will listen for connections is passed in as an argument, and this statement uses the atoi() function to convert this from a string of digits to an integer. 
serv_addr.sin_family = AF_INET;
The variable serv_addr is a structure of type struct sockaddr_in. This structure has four fields. The first field is short sin_family, which contains a code for the address family. It should always be set to the symbolic constant AF_INET.
serv_addr.sin_port = htons(portno); 
The second field of serv_addr is unsigned short sin_port, which contain the port
number. However, instead of simply copying the port number to this field, it is necessary to convert this to network byte order using the function htons() which converts a port number in host byte order to a port number in network byte order. 
serv_addr.sin_addr.s_addr = INADDR_ANY;
The third field of sockaddr_in is a structure of type struct in_addr which contains only a single field unsigned long s_addr. This field contains the IP address of the host. For server code, this will always be the IP address of the machine on which the server is running, and there is a symbolic constant INADDR_ANY which gets this address. 
if (bind(sockfd, (struct sockaddr *) &serv_addr,sizeof(serv_addr)) < 0)error("ERROR on binding");
The bind() system call binds a socket to an address, in this case, the address of the current host and port number on which the server will run. It takes three arguments, the socket file descriptor, the address to which is bound, and the size of the address to which it is bound. The second argument is a pointer to a structure of type sockaddr, but what is passed in is a structure of type
sockaddr_in, and so this must be cast to the correct type. This can fail for a number of reasons, the most obvious being that this socket is already in use on this machine. 
listen(sockfd,5);
The listen system call allows the process to listen on the socket for connections. The first argument is the socket file descriptor, and the second is the size of the backlog queue, i.e., the number of connections that can be waiting while the process is handling a particular connection. This should be set to 5, the maximum size permitted by most systems. If the first argument is a valid socket, this call cannot fail, and so the code doesn't check for errors. 
clilen = sizeof(cli_addr);newsockfd = accept(sockfd, (struct sockaddr *) &cli_addr, &clilen);if (newsockfd < 0)error("ERROR on accept");
The accept() system call causes the process to block until a client connects to the server. Thus, it wakes up the process when a connection from a client has been successfully established. It returns a new file descriptor, and all communication on this connection should be done using the new file descriptor. The second argument is a reference pointer to the address of the client on the other end of the connection, and the third argument is the size of this structure. 
bzero(buffer,256);n = read(newsockfd,buffer,255);if (n < 0) error("ERROR reading from socket");printf("Here is the message: %s\n",buffer);
Note that we would only get to this point after a client has successfully connected to our server. This code initializes the buffer using the bzero() function and then reads from the socket. Note that the read call uses the new file descriptor, the one returned by accepting (), not the original file descriptor returned by socket(). Note also that the read() will block until there is something for it to read in the socket, i.e. after the client has executed a write(). It will read either the total number of characters in the socket or 255, whichever is less and return the number of characters read. 
return 0;}
This terminates main and thus the program. Since main was declared to be of type int as specified by the ASCII standard, many compilers complain if it does not return anything.
n = write(newsockfd,"I got your message",18);if (n < 0) error("ERROR writing to socket"); 
 Once a connection has been established, both ends can both read and write to the connection. Naturally, everything written by the client will be read by the server, and everything written by the server will be read by the client. This code simply writes a short message to the client. The last argument of write is the size of the message.


perror() produces a short error message on the standard

error describing the last error encountered during a call to a system or library
function. If _s is not a NULL pointer and does not point to a null string,
the string it points to is printed, followed by a colon, followed by a space,
followed by the message and a NEWLINE. If _s is a NULL pointer or points to a
null string, just the message is printed, followed by a NEWLINE. To be
of most use, the argument string should include the name of the program that
incurred the error. The error number is taken from the external variable
errno (see intro(2)), which is set when errors occur but not cleared when

non-erroneous calls are made.
void error(char *msg){perror(msg);exit(1);}

This function is called when a system call fails. It displays a message about the error on stderr and then aborts the program.



Thursday, July 11, 2019

Introduction to Packet Tracer || Cisco Packet Tracer || CodeTextPro || Hanif Miah

9:03 AM 0
Introduction to Packet Tracer || Cisco Packet Tracer || CodeTextPro || Hanif Miah
What is Packet Tracer?
Packet Tracer is a protocol simulator developed by Dennis Frezzo and his team at Cisco Systems. Packet Tracer (PT) is a powerful and dynamic tool that displays the various protocols used in networking, in either Real-Time or Simulation mode. This includes layer 2 protocols such as Ethernet and PPP, layer 3 protocols such as IP, ICMP, and ARP, and layer 4 protocols such as TCP and UDP. Routing protocols can also be traced.

Purpose: The purpose of this lab is to become familiar with the Packet Tracer interface. Learn how to use existing topologies and build your own.

Requisite knowledge: This lab assumes some understanding of the Ethernet protocol. At this point, we have not discussed other protocols but will use Packet Tracer in later labs to discuss those as well.

Version: This lab is based on Packet Tracer 4.0 Beta, Test1.

Introduction to the Packet Tracer Interface using a Hub Topology


Step 1: Start Packet Tracer and Entering Simulation Mode



cisco packet tracer



Step 2: Choosing Devices and Connections

We will begin building our network topology by selecting devices and the media in which to connect them.

Several types of devices and network connections can be used. For this lab, we will keep it simple by using End Devices, Switches, Hubs, and Connection.


A single click on each group of devices and connections to display the various choices.



packet tracer

packet tracer




Step 3: Building the Topology – Adding Hosts


A single click on the End Devices.


cisco packet tracer


Move the cursor into topology area. You will notice it turns into a plus “+” sign.
Single-click in the topology area and it copies the device.






Step 4: Building the Topology – Connecting the Hosts to Hubs and Switches

Adding a Hub

Select a hub, by clicking once on Hubs and once on a Generic hub.






Perform the following steps to connect PC0 to Hub0:
1. Click once on PC0
2. Choose FastEthernet
3. Drag the cursor to Hub0
4. Click once on Hub0 and choose Port 0
5. Notice the green link lights on both the PC0 Ethernet NIC and the Hub0 Port 0 showing that the link is active.



active link






Adding a Switch

Select a switch, by clicking once on Switches and once on a 2950-24 switch.



Add the switch by moving the plus sign “+” below PC2 and PC3 and click once.




Add the switch by moving the plus sign

Connect PC2 to Hub0 by first choosing Connections.

choosing Connections

Click once on the Copper Straight-through cable.


Copper Straight-through cable



Copper Straight-through cable



Perform the following steps to connect PC2 to Switch0:
1. Click once on PC2
2. Choose FastEthernet
3. Drag the cursor to Switch0
4. Click once on Switch0 and choose FastEthernet0/1
5. Notice the green link lights on PC2 Ethernet NIC and amber light Switch0 FastEthernet0/1 port. The switch port is temporarily not forwarding frames, while it goes through the stages for the Spanning Tree Protocol (STP) process.
6. After about 30 seconds the amber light will change to green indicating that the port has entered the forwarding stage. Frames can now forward out the switch port.



pc connect switch

pc connect switch




Step 5: Configuring IP Addresses and Subnet Masks on the Hosts

Before we can communicate between the hosts we need to configure IP Addresses and Subnet Masks on the devices.

Click once on PC0.






Choose the Config tab: It is here that you can change the name of PC0. It is also here where you would enter a Gateway IP Address, also known as the default gateway. We will discuss this later, but this would be the IP address of the local router. If you want, you can enter the IP Address 172.16.1.1, although it will not be used in this lab.





Click on FastEthernet: Although we have not yet discussed IP Addresses, add the IP Address to 172.16.1.10. Click once in the Subnet Mask field to enter the default Subnet Mask. You can leave this at 255.255.0.0. We will discuss this later.






Also, notice this is where you can change the Bandwidth (speed) and Duplex of the Ethernet NIC (Network Interface Card). The default is Auto (auto-negotiation), which means the NIC will negotiate with the hub or switch. The bandwidth and/or duplex can be manually set by removing the check from the Auto box and choosing the specific option.
Bandwidth - Auto
If the host is connected to a hub or switch port which can do 100 Mbps, then the Ethernet NIC on the host will choose 100 Mbps (Fast Ethernet). Otherwise, if the hub or switch port can only do 10 Mbps, then the Ethernet NIC on the host will choose 10 Mbps (Ethernet).
Duplex - Auto
Hub: If the host is connected to a hub, then the Ethernet NIC on the host will choose Half Duplex.


Switch: If the host is connected to a switch, and the switch port is configured as Full-Duplex (or Autonegotiation), then the Ethernet NIC on the host will choose Full Duplex. If the switch port is configured as Half Duplex, then the Ethernet NIC on the host will choose Half Duplex. (Full Duplex is a much more efficient option.) The information is automatically saved when entered.







Repeat these steps for the other hosts. Use the information below for IP Addresses and Subnet Masks.






Verify the information

To verify the information that you entered, move the Select tool (arrow) over each host.




Deleting a Device or Link

To delete a device or link, choose the Delete tool and click on the item you wish to delete.




Step 6: Connecting Hub0 to Switch0

To connect like-devices, like a Hub and a Switch, we will use a Cross-over cable. Click once the Cross-over Cable from the Connections options.



Hub and a Switch



Move the Connections cursor to Switch0.






Click once on Switch0 and choose FastEthernet0/4 (actual port does not matter).








The link light for switch port FastEthernet0/4 will begin as amber and eventually change to green as the Spanning Tree Protocol transitions the port to forwarding.
Spanning Tree Protocol








Monday, July 8, 2019

The Complete HTML tags with HTML Example for Beginners to Advanced

9:30 AM 0
The Complete HTML tags with HTML Example for Beginners to Advanced
Learn the complete HTML tags with HTML example for beginners to advanced. In this content, all the HTML tags are writing sort and simple with proper HTML example.


html complete tag sheet with example

   

<html> ..... </html>
This tag specifies that the webpage is written
in HTML. It appears at the starting and end
of the webpage. It is mainly used to show that
the page uses HTML5 – the latest version of
the language. Also known as the root element,
this tag can be thought of as a parent tag for
every other tag used in the page.

<head> ..... </head>
This tag is used to specify metadata about
the webpage. It includes the webpage name,

its dependencies (JS and CSS scripts), font usage, etc.

<title> ..... </title>
As the name suggests, this tag contains
the title/name of the webpage. You can see this
in your browser’s title bar for every webpage open
in the browser. Search engines use this tag to
extract the topic of the webpage, which is quite

convenient when ranking relevant search results.

<body> ..... </body>
Everything the user sees on a webpage is written
inside the body tag. It is a container for all the contents

of the webpage.




Example

<html>
<head>
<title>My First Website</title>
</head>
<body>
Everything is possible, 
when you try your best.
</body>
</html>




html website
First website 


<base>
This tag is used to specify the base URL of your site,
this tag makes linking to internal links on your
site cleaner.

<meta>
This is the metadata tag for the webpage.
Can be useful for mentioning the page’s author,

keywords, original published date, etc.

<link>
This is used to link to scripts external to
the webpage. Typically utilized for including

stylesheets.

<style> ..... </style>
The style tag can be used as an alternative to
an external style sheet, or complement it.

Includes the webpage’s appearance information.

<script> … </script>
This tag is used to add code snippets, typically in JavaScript,
to make webpage dynamic. It can also be used to

just link to an external script.


Example

<html>
<head>
<meta charset="utf-8">
<base href="http://codetextpro.com"
target="_blank" />
<title>My Beautiful Website</title>
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript">
var codetextpro = 0;
</script>
</head>
<body>
Don't think too much
</body>

</html>




base and meta tag
Beautiful website



<h1..h6> ..... </h1..h6>
Six different variations of writing a heading.
<h1> has the largest font size, while <h6> has
the smallest font size.

<html>
<head>
<title>My Beautiful 
Website</title> 
</head>
<body>
<h1>CodeTextPro</h1>
<h2>CodeTextPro</h2>
<h3>CodeTextPro</h3>
<h4>CodeTextPro</h4>
<h5>CodeTextPro</h5>
<h6>CodeTextPro</h6>
</body>
</html>



h1 to h6
h1 to h6



<div> ..... </div>
A webpage’s content is usually divided into
blocks, specified by the div tag.



<span> … </span>

This tag injects inline elements, like an image,
icon, emoticon without ruining the formatting
/ styling of the page.


<p> ..... </p>
Plain text is placed inside this tag.


<br>
This tag is used for line break for webpages. Is used when
wanting to write a new line.


<hr>
Similar to the above tag. But in addition to
switching to the next line, this tag also draws
a horizontal bar to indicate the end
of the section.


<tt> ..... </tt>
Formatting for typewriter-like text. No longer
supported in HTML5.


<strike> ..... </strike>
Another old tag, this is used to draw a line at
the center of the text, so as to make it appear
unimportant or no longer useful.


<cite> ..... </cite>
Tag for citing author of a quote.


<del> ..... </del>
Pre-formatted, ‘monospace’ text laid out with
whitespace inside the element intact.


<ins> ..... </ins>
Denotes text that has been inserted into
the webpage.


<blockquote> ..... </blockquote>
Quotes often go into this tag. It's used in tandem with
the <cite> tag.


<q> ..... </q>
Similar to the above tag, but for shorter quotes.


<abbr> ..... </abbr>
Denotes abbreviations, along with the full forms.


<acronym> ..... </acronym>
Tag for acronyms. No HTML5 support.


<address> ..... </address>
Tag for specifying author’s contact details.


<dfn> ..... </dfn>
Tag dedicated for definitions.


<code> ..... </code>
This is used to display code snippets within
a paragraph.


<sub> ..... </sub>
Used for writing a subscript (smaller font just
below the mid-point of normal font).


<sup> ..... </sup>
Similar to the above tag, but for superscripting.


<small> ..... </small>
Reduces text size. In HTML5, it often refers to
redundant or invalid information.


<strong> ..... </strong>
Makes text bold. Used to emphasize a point


<b> ..... </b>
Alternative to the above tag, also creates bold text.


<em> ..... </em>
Another emphasis tag, but this displays text
in italics.


<i> ..... </i>
Also used to display text in italics, but does not
emphasize it like the above tag.



Example

<html>
<head>
<title>CodeTextPro</title>
</head>
<body>
<p><strong>Bold Text</strong> Regular Text
<em>some words in italics</em> regular text
once again.</p>
<blockquote>
Anyone who has never made a mistake has never
tried anything new.<cite> - Albert Einstein</cite>
</blockquote>
<pre>
Some pre-formatted text
</pre>
<p>A code snippet: <code>some code</code></p>
</body>
</html>



html example output



<a href=” ”> ..... </a>
Anchor tag. Primarily used for including
hyperlinks.


<a href=”mailto:”> ..... </a>
This tag is used to sending emails.


<a href=”tel://###-###”> ..... </a>
Anchor tag for mentioning contact numbers.
As the numbers are clickable, this can be
particularly beneficial for mobile users.


<a name=”name”> ..... </a>
This tag can be used to quickly navigate to
a different part of the webpage.


<a href=”#name”> ..... </a>
A variation of the above tag, this is only meant

to navigate to a div section of the webpage.


<img />
A tag to display images in the webpage.


src=” URL”
The URL or path where the image is located on
your drive or on the web.


alt=” text”
The text written here is displayed when the user
hovers the mouse over the image. Can be used to
give additional details of the image.


height=” ”

Specifies image height in pixels or percentages.


width=” ”
Specifies image width in pixels or percentages.


align=” ”
The relative alignment of the image. Can change
with changes to other elements in the webpage.


border=” ”
Specifies border thickness of the image. If not
mentioned, defaults to 0.


<map> ..... </map>
Denotes an interactive (clickable) image.


<map name=””> ..... </map>
Name of the map associated between the image
and the map.


<area />
Specifies image map area.


shape=” ”
The shape of the area.


coords=” ”
Coordinates of the vital information of the shape.
Example: vertices for rectangles, center/radius
for circles.


Example

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

<body>
<img src="tree.gif" width="150" height="130"
alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,60,100"
href="green.html" alt="Green">
<area shape="circle" coords="90,58,3"
href="mercur.html" alt="Mercury">
<area shape="circle" coords="124,58,8"
href="venus.html" alt="Venus">

</map>
</body>
</html>




<ol> ..... </ol>
This tag used for ordered list or numbered list of items.


<ul> ..... </ul>
This tag, used for unordered list of items.


<li> ..... </li>
Individual item as part of a list.


<dl> ..... </dl>
This tag used for list of items with definitions.


<dt> ..... </dt>
The definition of a single term inline with
body content.


<dd> ..... </dd>
The description for the defined term.



Example

<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ol>

<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>

<dl>
<dt>Toyota</dt>
<dd>Japanese car brand</dd>
<dt>Armani</dt>
<dd>Italian fashion brand</dd>

</dl>



<form> ..... </form>
The parent tag is used for an HTML form.


action=” URL”
The URL listed here is where the form data
will be submitted once the user fills it.


method=” ”
It specifies which HTTP method (POST or GET)

would be used to submit the form.


enctype=” ”
Only for the POST method, this dictates the data
encoding scheme to be used when the form
is submitted.


autocomplete
Determines if the form has to autocomplete enabled.


novalidate
Determines whether the form should be validated
before submission.


accept-charsets
Determines character encodings when the form
is submitted.


target
After submission, the form response is displayed
wherever this refers to, usually has the following
values: _blank, _self, _parent, _top


<fieldset> ..... </fieldset>
Identifies the group of all fields on the form.


<label> ..... </label>
This is used to label a field in the form.


<legend> ..... </legend>
This operates as a caption for the <fieldset>
element.


<input />
This tag is used to take input from the user.

The input type is determined by a number of attributes.


type=” ”
Determines which type of input (text, dates,
password) is requested from the user.


name=” ”
Specifies the name of the input field.


value=” ”
Specifies the value contained currently in
the input field.


size=” ”
Determines the input element width

(number of characters).


maxlength=” ”
Specifies the most input field characters allowed.


required
Makes an input field compulsory to be filled by
the user. The form cannot be submitted if a required
field is left empty.


width=” ”
Determines the width of the input element,
in pixel values.


height=” ”
Determines the height of the input element,
in pixel values.


placeholder=” ”
Can be used to give hints to the user about nature
of the requested data.


pattern=” ”
Specifies a regular expression, which can be used to
look for patterns in the user’s text.


min=” ”
The minimum value allowed for an <input> element.


max=” ”
The maximum value allowed for an <input> element.


autofocus
Forces focus on the input element when the webpage
loads completely.


disabled
Disables the input element. User can no longer
enter data.


<textarea> ..... </textarea>
This tag is used for longer strings of input. Can be used to get
a multi-sentence text from the user.


<select> ..... </select>
This tag specifies a list of options which the user

can choose from.


name=” ”
The name of a particular list of options.


size=” ”
The total number of options given to the user.


multiple
States whether the user can choose multiple

options from the list.


required
Specifies whether choosing options is
necessary for form submission.


autofocus
Specifies that a drop-down list automatically
comes into focus after a page load.


<option> ..... </option>
This tag is used for listing individual items in the list

of options.


value=” ”
The text is visible to the user for any given option.


selected
Determines which option is selected by default
when the form loads.


<button> ..... </button>

This tag is used for creating a button for form submission.



Example

<form action="form_submit.php" method="post">
<fieldset>
<legend>Bio:</legend>
First name:<br>
<input type="text" name="first-name"
value="John" placeholder="Please
enter your first name here"><br>
Last name:<br>
<input type="text" name="last-name"
value="Doe" placeholder="Please
enter your last name here"><br><br>
Favorite sport:<br>
<select>
<option value="soccer">Soccer
</option>
<option value="tennis">Tennis
</option>
<option value="golf">Golf
</option>
</select>
<textarea name="description">
</textarea>
<input type="submit" value="Submit">
</fieldset>

</form>



<table> ..... </table>
Marks a table in a webpage.


<caption> ..... </caption>
Description of the table is placed inside this tag.


<thead> ..... </thead>
Specifies information pertaining to specific
columns of the table.


<tbody> ..... </tbody>
The body of a table, where the data is held.


<tfoot> ..... </tfoot>
Determines the footer of the table.


<tr> ..... </tr>
Denotes a single row in a table.


<th> ..... </th>
The value of a heading of a table’s column.


<td> ..... </td>
A single cell of a table. Contains the actual
value/data.


<colgroup> ..... </colgroup>
Used for grouping columns together.


<col>

Denotes a column inside a table.



Example

<table>
<colgroup>
<col span="2">
<col>
</colgroup>

<tr>
<th>Name</th>
<th>Major</th>
<th>GPA</th>
</tr>

<tr>
<td>Bob</td>
<td>Law</td>
<td>3.55</td>
</tr>

<tr>
<td>Alice</td>
<td>Medicine</td>
<td>3.61</td>
</tr>

</table>