We will make our own homepage today!
Creating your homepage
Using the Linux konsole create a directory named public_html in your home directory:
$ cd ~ $ mkdir public_html $ cd public_html
~/public_html$ wget math.bme.hu/~kkovacs/sample.html ~/public_html$ mv sample.html index.html
Now we can check out our hompage at: math.bme.hu/~<username>. Check out the contents of index.html:
~/public_html$ gedit index.html
Every browser has a View source function. This is the raw HTML data of the site, when you open a webpage this is the first thing that gets downloaded to show you the site.
<tag> ... content </tag>
It usually isn't case sensitive, but there are many types. The basic structure of HTML:
<!DOCTYPE ...> <html> <head> ... content descriptions, meta-data </head> <body> ... the homepage itself </body> </html>
There are tags that don't need to be closed, e.g.:
<img ...> <br/>
<img ...>XYZ</img> <br> ... </br>
Some tags have optional attributes:
<div align="center"> ... </div> <img width="100" ... />
We can provide comments in the source code. These don't appear on the webpage itself, but can be read through the source of the webpage.
<body> Content <!-- Comment --> </body>
Before starting these tasks rename your index.html to sample.html and start with a new file named index.html that only includes this HTML code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Title of the page </title> </head> <body> Website </body> </html>
- Provide a title to your homepage e.g.: Homepage of XY (title tag).
- Write a welcome messege for your homepage (h1, h2, etc. tags).
- Write a short CV for your homepage, it doesn't have to be perfect, but try to use nice formatting with div, p, table, list tags.
- Write some links, maybe a list of links (ol, ul, dl these are list tags), you can write links that point to useful sites, or someone else's homepage. (a tag for links)
- Put a picture on your homepage, it should be a picture of you, but for the sake of practice it can be anything.
- Create another page (a separate .html file), on this page create a table with your current timetable. Provide a link on your main page (index.html) that points to this page. And another from this timetable page to the main page.
- Validate your page with the validator, green means okay, if there are some red errors, try to correct those.
- Beautify your site, write about yourself.