Emmanuel Benoist Home Page

Exercise: Install Xampp, write an HTML page and its corresponding CSS

Install Xampp

Software Requirements

  • Download XAMPP from ApacheFriends server:
    download xampp (versions exist for windows, Mac and Linux)
    According to my experience, Mac and Linux users can install this software easily (if you still have problems, ask me), the instructions are only given to Windows users.
  • Extract the content of this file in any of your directories. For instance Q:\MyDir\.
  • Execute the file setup-xampp.bat in the installation directory (in our example Q:\MyDir\xampp\).
  • You can start xampp using the programm: xampp_start.exe
  • You can stop xampp using the programm: xampp_stop.exe
  • You can restart xampp using the programm: xampp_restart.exe
  • Test your server by clicking on : http://localhost.
Advanced users may find useful to install themeselves the different softwares: Apache, PHP and MySql. This is also possible, if you know how to do it(it is also very easy on most unix distributions).

Write your first file

  • You can now install your php arborescence in the directory Q:\MyDir\xampp\htdocs\.
  • Write a file called hello.html in the directory Q:\MyDir\xampp\htdocs\.
    Content of the file: 
    <html><body>
<h1>Hello World</h1>
</body></html>
    Now test that it works: http://localhost/hello.html
Be carefull, XAMPP is not intended for a productive environment. In a productive environment, you have to setup everything and control everything.

Write a small HTML file

Enhance the file hello.html by adding content in your page. You should have at least one title <h1> and 3 headings <h2>. One of them should belong another to the class "red".

Write a small CSS file

Create a css file style.css. Include this file in your html file. Use the CSS to define that all <h1> tags must have a light blue background, all <h2> must be underlined and all <h2> of the class red must be red ;-)

Solutions

BACK TO TOP © 2014-2021 Emmanuel Benoist