How to change localhost to realistic domain using Virtual Host

Hi,
I’ve tried my best to set the Apache configuration so that I can use a real domain name in the web address instead of “localhost” although I’m working on a standalone computer. I’m using Virtual Host configuration, but doesn’t work. What I miss or someone here can give me some advice? Thank you all.
I put some picture to make what I mean clear.
1) Access my web server using localhost
2) Set the Virtual Host on file “httpd-vhosts. conf”
<VirtualHost *: 80>
DocumentRoot "<PATH-TO-DIRECTORY>"
ServerName mysite. loc: 80
<Directory ""<PATH-TO-DIRECTORY>">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
3) Access my web server using realistic domain instead of “localhost” but doesn’t work

This webpage is not available
