Informatics1-2017/Practice4
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>
- Provide a title to your homepage e.g.: Homepage of XY (title tag).
- 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.
- Írjatok valamilyen linkeket listába (ol, ul, vagy dl), linkek közt lehetnek hasznos linkek, mások oldalára hivatkozó linkek, stb.
- Rakjatok ki egy képet az oldalatokra, lehetőleg magatokról, de a gyakorlat erejéig lehet valami más kép.
- 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.
- Ellenõrizzétek az oldalatokat a validátorral, ha zöld akkor minden rendben, ha piros akkor javítsátok a hibákat.
- Egészítsétek még ki és szépítgessétek az oldalt ahogy gondoljátok.
