Beginners Tutorial: Web Development Environment for Learning

xheavenlyx

xheavenlyx

@xheavenlyx-CbvN62 • Oct 21, 2024
Introduction

Date: 20/06/2012

Have you wondered about designing your website or making one just for fun or for a learning experience? This multipart tutorial will teach you the basics of servers, server side scripting, connecting to mySQL and installing a server on your personal machine. (XAMPP, WAMP, LAMP)

This tutorial will not cover specific programming and scripting languages like PHP, Ruby, .Net and others, rather it will teach you how to set up your training environment and then learn everything else by yourself at your own pace! (You will get to see a lot of "Hello Friend" examples though.)



Part 1: Very brief basics on WWW
Difficulty level: Easy
Time: 7 Minutes


Every website you see/visit on your browser (Firefox, Chrome, IE) is being served to you by dedicated computers called "Servers". These servers have a software running that 'Listen' on ports (example: 8080, 90, 23 etc) for a connecting visitor.

When you type in <a href="https://www.google.com" target="_blank" rel="nofollow noopener noreferrer">Google</a>. The request is first sent to your service provider (example: Airtel, MTNL, Reliance, Du, Etisalat, At&T, etc). They forward the request to a DNS (Domain Name System) which converts the name into it's corresponding IP address (example: <a href="https://www.example.com" target="_blank" rel="nofollow noopener noreferrer">Example Domain</a> -> 192.32.44.33).

You are then directed to the machine with it's IP number 192.32.44.33 which can be called the server for <a href="https://www.example.com" target="_blank" rel="nofollow noopener noreferrer">Example Domain</a>.

When you go to <a href="https://www.example.com" target="_blank" rel="nofollow noopener noreferrer">Example Domain</a> through your browser, it tries to connect to the server with port 8080 or 80 which is mostly used for HTML requests.

The server is "listening" on port 8080 so when you connect, the server checks for the requested page (<a href="https://www.example.com/index.html" target="_blank" rel="nofollow noopener noreferrer">Example Domain</a> or #-Link-Snipped-# etc depending on what you typed on your address bar).

If the page is found, the server processes the file to check if it has server side scripting (PHP, Ruby, .Net scripts) and does the work after which it sends the HTML to your browser.
Your browser further processes (browser scripting like Javascript) and displays the result on your screen.

In the upcoming sections of the tutorial we will learn to install our own server on our personal PC to try out websites, blogs, server side scripting like PHP and mySQL.

The next tutorial will introduce you to the exciting world of installing your own server, making your HTML pages, PHP scripts and mySQL databases! #-Link-Snipped-#
Like 0 Replies 17

Replies

Welcome, guest

Join CrazyEngineers to reply, ask questions, and participate in conversations.

Sign up Log in

CrazyEngineers powered by Jatra Community Platform

  • durga ch

    durga ch

    @durga-TpX3gO • Jun 20, 2012

    this has been a no-go land for me and I am eager to know and learn about making webpages esp. Thanks for starting this tutorial
  • Sahithi Pallavi

    Sahithi Pallavi

    @sahithi-oJZaYj • Jun 20, 2012

    Thanks and waiting for your coming worth full tutorials 😀
  • xheavenlyx

    xheavenlyx

    @xheavenlyx-CbvN62 • Jun 20, 2012

    (@durga, you can get started very easily. We will also have live Google+ sessions in the future for a group learning effort. Let's see how things go. And thanks #-Link-Snipped-#)

    Important Note: You can always Google and research ahead of these tutorials for yourself and gain some more knowledge before going through it.

    Part 2: Choosing your server package
    Difficulty level: Easy
    Time: 10 Minutes


    Installing your own server for web development is not as difficult as it sounds. There are pre-packaged server packages available for free! Many developers use these to test out their simple or complex websites on personal computers before publishing it on a paid server.

    So let’s look at some well known server package applications you can download.


    1. WAMP

    WAMP is package of independently-created programs installed on <a href="https://en.wikipedia.org/wiki/Microsoft_Windows" target="_blank" rel="nofollow noopener noreferrer">Microsoft Windows - Wikipedia</a> operating system for web development.

    WAMP is an acronym formed from the initials of the operating system Microsoft Windows and its principal components: <a href="https://en.wikipedia.org/wiki/Apache_HTTP_Server" target="_blank" rel="nofollow noopener noreferrer">Apache Http Server</a>, <a href="https://en.wikipedia.org/wiki/MySQL" target="_blank" rel="nofollow noopener noreferrer">Mysql</a> and one of <a href="https://en.wikipedia.org/wiki/PHP" target="_blank" rel="nofollow noopener noreferrer">Php</a>, <a href="https://en.wikipedia.org/wiki/Perl" target="_blank" rel="nofollow noopener noreferrer">Perl</a> or <a href="https://en.wikipedia.org/wiki/Python_(programming_language)" target="_blank" rel="nofollow noopener noreferrer">Python (Programming Language)</a>.

    Apache is the <a href="https://en.wikipedia.org/wiki/Web_server" target="_blank" rel="nofollow noopener noreferrer">Web Server</a>.
    MySQL is the open-source databa<a href="https://en.wikipedia.org/wiki/PhpMyAdmin" target="_blank" rel="nofollow noopener noreferrer">Phpmyadmin</a>
    <a href="https://en.wikipedia.org/wiki/PhpMyAdmin" target="_blank" rel="nofollow noopener noreferrer">Phpmyadmin</a>s a scripting language that can manipulate information held in a database and generate web pages dynamically each time content is requested by a browser. The script is processed on the Server side.

    Other programs may also be included in a package, such as <a href="https://en.wikipedia.org/wiki/PhpMyAdmin" target="_blank" rel="nofollow noopener noreferrer">Phpmyadmin</a> which provides a graphical user interface for the MySQL database manager, or the alternative scripting languages Python or Perl.

    Equivalent packages are <a href="https://en.wikipedia.org/wiki/MAMP" target="_blank" rel="nofollow noopener noreferrer">Mamp</a> (for the <a href="https://en.wikipedia.org/wiki/Mac_OS" target="_blank" rel="nofollow noopener noreferrer">Mac Os</a>), <a href="https://en.wikipedia.org/wiki/LAMP_(software_bundle)" target="_blank" rel="nofollow noopener noreferrer">Lamp (Software Bundle)</a> (for the <a href="https://en.wikipedia.org/wiki/Linux" target="_blank" rel="nofollow noopener noreferrer">Linux</a> operating systems) or XAMPP (Cross-platform).

    2. XAMPP

    XAMPP is package of independently-created programs that can be installed on Multiple Operating Systems. Containing mostly the same packages as WAMP.

    XAMPP is an acronym for X (Cross-Platform, Linux, Windows, Mac) and its principal components: <a href="https://en.wikipedia.org/wiki/Apache_HTTP_Server" target="_blank" rel="nofollow noopener noreferrer">Apache Http Server</a>, <a href="https://en.wikipedia.org/wiki/MySQL" target="_blank" rel="nofollow noopener noreferrer">Mysql</a> and one of <a href="https://en.wikipedia.org/wiki/PHP" target="_blank" rel="nofollow noopener noreferrer">Php</a> or <a href="https://en.wikipedia.org/wiki/Perl" target="_blank" rel="nofollow noopener noreferrer">Perl</a>.

    Just like WAMP:

    Apache is the <a href="https://en.wikipedia.org/wiki/Web_server" target="_blank" rel="nofollow noopener noreferrer">Web Server</a>.
    MySQL is the open-source database.
    PHP isthe scripting language that can manipulate information held in a database and generate web pages dynamically each time content is requested by a browser. The script is processed on the Server side.


    So which package are we going to use?

    We will be installing XAMPP for our web development environment and a few more tools to make things easier for us.

    In the next section we will see how to install XAMPP on your Windows, Linux or Mac and start with your first webpage on your own personal home server!#-Link-Snipped-#

    Homework:

    Before the next tutorial. Answer the following questions:

    1. Find the link to XAMPP package homepage. (Hint: Google Search)
    2. Find the link to download XAMPP package for your operating system.
  • durga ch

    durga ch

    @durga-TpX3gO • Jun 20, 2012

    😘 cant download at work, but I think below are the links

    #-Link-Snipped-#
    #-Link-Snipped-#
  • Sahithi Pallavi

    Sahithi Pallavi

    @sahithi-oJZaYj • Jun 20, 2012

    Homework:
    Before the next tutorial. Answer the following questions:
    😁 😁
    Find the link to XAMPP package homepage. (Hint: Google Search)
    #-Link-Snipped-#
    2. Find the link to download XAMPP package for your operating system.
    #-Link-Snipped-#
  • Saandeep Sreerambatla

    Saandeep Sreerambatla

    @saandeep-sreerambatla-hWHU1M • Jun 21, 2012

    Great tutorial #-Link-Snipped-#. Will do this starting today. Thanks a lot.
  • xheavenlyx

    xheavenlyx

    @xheavenlyx-CbvN62 • Jun 23, 2012

    (#-Link-Snipped-#, #-Link-Snipped-#, excellent! The links are correct. Now let's see how to create your first webpage.)

    Part 3: Installing, setting up and testing XAMPP

    Difficulty level: Easy
    Time: 20 Minutes

    If you could not find the link to download XAMPP, you must learn how to use internet search to look for information. This is extremely important for you to learn not just web development successfully. Remember, no one remembers every PHP function, they always look up what they need to know.

    The XAMPP website: #-Link-Snipped-#

    Scroll down a bit and click on “XAMPP for Windows”. This is the link: #-Link-Snipped-#

    Scroll down to see “Jump-off Point” and Click on Download.

    Scroll down a bit more to click on “Download” for the Installer. I am not going to post the link here, find it. You can look around their page for more information if you like.

    After you have downloaded the installer, open it and install in the default location C:/XAMPP. That's it, you are done. Your computer now has an Apache server.

    Open XAMPP from your start menu and click on Start for “Apache” (that’s your server) and Start for “mySQL” (your database server). This will start the server processes. Basically the server will start listening on your PC's port 8080 or 80 or 8888 for requests.

    To test your server. Go to your favorite browser and type “localhost”. You should see a beautiful orange XAMPP server page. Success!

    Testing HTML pages

    Now you have the server running, you would want it to serve some website, html pages etc. Where do you put these files? They are all in the htdocs folder under your XAMPP installation folder.

    Open the folder C:/XAMPP/htdocs

    Here, create a new folder, name it whatever you like, for example “practiceproject” or "mysite".

    Open your Notepad. Wait before we go any further. Download a good Notepad that will highlight your code, give you more flexibility over editing. The one I use is Notepad++. Download it from here: #-Link-Snipped-# (Installer, first link).

    In your notepad, enter your test html and save it under C:/XAMPP/htdocs/mysite , for example:

    <html>
<body>
This is my first website!
</body>
</html>
    Now open your browser and type in localhost/mysite and see the magic happen! #-Link-Snipped-#

    Homework

    I want everyone to install XAMPP and make your first page. Do something different than "This is my first website". In the next tutorial we will start with PHP and answer questions from our users. Guide your friends and forum members to this tutorial if they like to know how to start with web development.
  • durga ch

    durga ch

    @durga-TpX3gO • Jun 26, 2012

    ok,

    download xampp - check
    run apache server - check
    test the server -check
    create a webpage -check
    feeling excitec?? - check 😁
  • xheavenlyx

    xheavenlyx

    @xheavenlyx-CbvN62 • Jun 27, 2012

    #-Link-Snipped-#, EXCELLENT! Wasn't it amazing to see your page up there? 😀

    Part 4: The basics of HTML and CSS

    Difficulty level: Easy
    Time: 5 Minutes

    #-Link-Snipped-# but before that a small exercise.

    HOMEWORK

    I want everyone to think of what project they want to do. Sit down for 5 minutes and think. But keep these 2 points in mind:

    1. It should be something you always wanted to make! To solve a problem, create value not just to make money.

    2. Be ready to stick to the project and see it through, even if it looks horrible it's just for practice and you can always improve it with the help of our amazing crazy engineers!
  • durga ch

    durga ch

    @durga-TpX3gO • Jun 27, 2012

    I wanted to make my own website for 2 purposes (dual personality of mine)
    1. a tech blog about internetworks
    2. an awareness website regarding street animals.

    I have another question:
    should the script language be only html?? or there are other scripting languages what can be used??
  • xheavenlyx

    xheavenlyx

    @xheavenlyx-CbvN62 • Jun 27, 2012

    #-Link-Snipped-#, I hope the following tutorials will clear some things up regarding if HTML is scripting or just a text processing language. We will cover scripts in the coming tutorials. And good to know you want a technical blog and a Street Animal Awareness website!

    Part 4: The basics of HTML & CSS.

    Difficulty level: Easy
    Time: 30 Minutes

    HTML, HyperText markup language is a <a href="https://en.wikipedia.org/wiki/Markup_language" target="_blank" rel="nofollow noopener noreferrer">Markup Language</a> that <a href="https://en.wikipedia.org/wiki/Web_browser" target="_blank" rel="nofollow noopener noreferrer">Web Browser</a> use to interpret and <a href="https://en.wikipedia.org/wiki/Typesetting" target="_blank" rel="nofollow noopener noreferrer">Typesetting</a> text, images and other material into visual or audible web pages. It’s not a script or a programing language (cannot do logic like if/else).

    Back in the 1980’s, A system called <a href="https://en.wikipedia.org/wiki/ENQUIRE" target="_blank" rel="nofollow noopener noreferrer">Enquire</a> was created by <a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" target="_blank" rel="nofollow noopener noreferrer">Tim Berners Lee</a>, who was a contractor at <a href="https://en.wikipedia.org/wiki/CERN" target="_blank" rel="nofollow noopener noreferrer">Cern</a> to have a systematic way of sending text on their internet system.

    However, it did not help much with efficiency so in 1991 he came back to the project to include tags and thus HTML was born.​

    That is why you can run HTML pages (like test.html) on your browser even without an internet connection. Because HTML is translated by your browser (IE, Firefox, Chrome, Safari, Opera, etc) to display the “text” within it.

    Let's try this on our html file:

    <html>
 
<body>
 
<h1>This is the Title</h1>
 
This is the first paragraph
 
<h2>This is the subtitle</h2>
 
This is the second paragraph. Notice the p tags automatically press enter for you. But if you need to have a newline within a paragraph you type br/ in tags.<br/>Like<br/>This.
 
Sometimes you need to show images on your website. You will need to link to an image stored somewhere on a server. For example, take a sample image from your windows sample pictures folder and place it within your current working directory where this file is. Let’s say XAMPP/htdocs/mysite/Hydrangead.jpeg. Now you can link to your image by just using the name since your HTML file and image file are in the same directory.
 
[img]Hydrangeas.jpg[/img]
 
</body>
    To learn more about HTML visit the W3Schools: <a href="https://www.w3schools.com/html/default.asp" target="_blank" rel="nofollow noopener noreferrer">HTML Tutorial</a>

    So how do I change the font and color of my text and images on my page?

    That's done through CSS. Cascading Style Sheet. Let’s take our previous example and make it awesome looking.

    CSS uses two main parts. A selector and one or more declaration. As an example you may say:

    “I want all my headings to be blue. All my subheadings to be light blue. And my paragraphs to be light gray. I want the fonts to be clean fonts like I see on crazyengineers.com”

    This is how you would write CSS code, it’s normally placed after the <html> tag or in the <head> tag:

    <html>
 
<style type="text/css">
body { font-family: sans-serif; } /* For Clean Fonts */
h1 { color:blue; } /* Heading 1 Blue */
h2 { color:lightblue; } /* Heading 2 Light Blue */
p { color:darkgray; } /* paragraphs to be gray */
img { width:250px; height: auto;} /* resize image to 250 pixels width */
</style>
 
<body>
<h1>This is the Title</h1>
This is the first paragraph
<h2>This is the subtitle</h2>
This is the second paragraph. Notice the p tags automatically press enter for you. But if you need to have a newline within a paragraph you type br/ in tags.<br/>Like<br/>This.
Sometimes you need to show images on your website. You will need to link to an image stored somewhere on a server. For example, take a sample image from your windows sample pictures folder and place it within your current working directory where this file is. Let’s say XAMPP/htdocs/mysite/Hydrangead.jpeg. Now you can link to your image by just using the name since your HTML file and image file are in the same directory.
[img]Hydrangeas.jpg[/img]
 
</body>
</html>

    How does it work?

    The HTML <style> tag tells the browser to look for styling properties there. It takes the style declaration for each selector, h1, h2, p whatever have defined and applies it to display us the page. It’s that simple. You will need to get used to the sytax of CSS and also understand that there are many more declarations that you cannot learn by rote. you will have to Google them when you need them.

    For example I had to look up how to resize the image without squishing it. I used height: auto;

    To learn more about CSS and try out different declarations: <a href="https://www.w3schools.com/css/css_syntax.asp" target="_blank" rel="nofollow noopener noreferrer">CSS Syntax</a>
  • durga ch

    durga ch

    @durga-TpX3gO • Jul 2, 2012

    Thanks for the w3 link XHX (alright! is tht ok??).
    have gone through each and every word and through the w3 website as well over the wekend.

    ...next tutorial please 😁
  • xheavenlyx

    xheavenlyx

    @xheavenlyx-CbvN62 • Jul 2, 2012

    HOMEWORK

    Before we move on to the next tutorial. I want you to share what you have made. Even if it's really simple. We will go from there. Use this webapp to showcase your work: <a href="https://jsfiddle.net/" target="_blank" rel="nofollow noopener noreferrer">JSFiddle - Code Playground</a>

    On this page, paste your HTML code, on the right, paste your CSS code and click on RUN (top menu). It will render your page on the lower right corner!

    If you are seeing odd behaviour with CSS, like Headings 1 and 2 not big, then uncheck "Normalize" on the left hand menu.

    This is an example: <a href="https://jsfiddle.net/BCLfz/1/" target="_blank" rel="nofollow noopener noreferrer">Edit fiddle - JSFiddle - Code Playground</a>
  • monkey_007

    monkey_007

    @monkey-007-UgQZQk • Jul 7, 2012

    we can also use <marquee> tag to make an image or text scroll from right to left.
    for example
    <marquee>TEXT</marquee>
    and for image
    <marquee>
    <image src="one.jpg">
    </marquee>
    the image should be in same drive where we'll save the HTML code.
  • Kaustubh Katdare

    Kaustubh Katdare

    @thebigk • Jul 7, 2012

    <marquee> is non-standard HTML; yet major modern browsers support it.
  • siraj.mussafirr

    siraj.mussafirr

    @sirajmussafirr-UMGx7y • Jul 8, 2012

    marquee has been obsolete. So better don't use it, except when you are learning. Please try to use javascript libraries,wich give you a lot more than what marquee does.
  • xheavenlyx

    xheavenlyx

    @xheavenlyx-CbvN62 • Jul 16, 2012

    Even though marquee is a supported feature it should never be implemented. I don't know if it's possible to teach budding web developers and designers about "Good" design that's usable and simple.

    Update: The tutorial ends here for now. I need to know how many CEians are following this before going further.

    If someone needs individual help, PM me! Always there to answer your questions.