Informatics1-2017/Practice4

A MathWikiből

Tartalomjegyzék

Html

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

Important

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.

Syntax

HTML is a type of XML markup language, it consists of tags:

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

Instead of:

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

Tasks

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>
  1. Provide a title to your homepage e.g.: Homepage of XY (title tag).
  2. Write a welcome messege for your homepage (h1, h2, etc. tags).
  3. 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.
  4. 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)
  5. Put a picture on your homepage, it should be a picture of you, but for the sake of practice it can be anything.
  6. 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.
  7. Validate your page with the validator, green means okay, if there are some red errors, try to correct those.
  8. Beautify your site, write about yourself.

Useful links

Személyes eszközök