Informatics1-2017/Practice4

A MathWikiből
(Változatok közti eltérés)
(Tasks)
 
74. sor: 74. sor:
 
# Provide a title to your homepage e.g.: Homepage of XY (title tag).
 
# 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 welcome messege for your homepage (h1, h2, etc. tags).
# Írjatok egy minimális önéletrajzot az oldalra, szépen formázva. Használjatok p-t, div-eket, esetleg span-t, table-t, listákat.
+
# 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.
# Írjatok valamilyen linkeket listába (ol, ul, vagy dl), linkek közt lehetnek hasznos linkek, mások oldalára hivatkozó linkek, stb.
+
# 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)
# Rakjatok ki egy képet az oldalatokra, lehetőleg magatokról, de a gyakorlat erejéig lehet valami más kép.
+
# Put a picture on your homepage, it should be a picture of you, but for the sake of practice it can be anything.
# Készítsetek egy másik oldalt, ezen egy táblázatba írjátok meg a jelenlegi órarendeteket. Rakjatok egy linket a fõoldalra ami erre az oldalra vezet és egy linket az órarend oldalra ami visszavezet a fõoldalra.
+
# 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.
# Ellenõrizzétek az oldalatokat a [http://validator.w3.org/ validátorral], ha zöld akkor minden rendben, ha piros akkor javítsátok a hibákat.
+
# Validate your page with the [http://validator.w3.org/ validator], green means okay, if there are some red errors, try to correct those.
# Egészítsétek még ki és ''szépítgessétek'' az oldalt ahogy gondoljátok.
+
# Beautify your site, write about yourself.
  
 
== Useful links ==
 
== Useful links ==

A lap jelenlegi, 2017. szeptember 25., 03:16-kori változata

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