Replies

• 

  durga ch

  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

  Thanks and waiting for your coming worth full tutorials 😀
• 

  xheavenlyx

  (@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 Microsoft Windows - Wikipedia operating system for web development.
  
  WAMP is an acronym formed from the initials of the operating system Microsoft Windows and its principal components: Apache Http Server, Mysql and one of Php, Perl or Python (Programming Language).
  
  Apache is the Web Server.
  MySQL is the open-source databaPhpmyadmin
  Phpmyadmins 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 Phpmyadmin which provides a graphical user interface for the MySQL database manager, or the alternative scripting languages Python or Perl.
  
  Equivalent packages are Mamp (for the Mac Os), Lamp (Software Bundle) (for the Linux 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: Apache Http Server, Mysql and one of Php or Perl.
  
  Just like WAMP:
  
  Apache is the Web Server.
  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

  😘 cant download at work, but I think below are the links
  
  #-Link-Snipped-#
  #-Link-Snipped-#
• 

  Sahithi Pallavi

  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

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

  xheavenlyx

  (#-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:
  
  

  
  
  This is my first website!
  
  

  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

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

  xheavenlyx

  #-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

  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

  #-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 Markup Language that Web Browser use to interpret and Typesetting 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 Enquire was created by Tim Berners Lee, who was a contractor at Cern 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:
  
  

  
   
  
   
  This is the Title
   
  This is the first paragraph
   
  This is the subtitle
   
  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.
  Like
  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]
   
  

  To learn more about HTML visit the W3Schools: HTML Tutorial
  
  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 tag or in the tag:
  
  

  
   
  
   
  
  This is the Title
  This is the first paragraph
  This is the subtitle
  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.
  Like
  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]
   
  
  

  
  How does it work?
  
  The HTML