Informatics1-2017/Practice4
(Új oldal, tartalma: „== Html == We will make our own homepage today! === Creating your homepage === Using the '''Linux''' konsole create a directory named <tt>public_html</tt> in your hom…”) |
(→Tasks) |
||
(egy szerkesztő 2 közbeeső változata nincs mutatva) | |||
13. sor: | 13. sor: | ||
Now we can check out our hompage at: '''math.bme.hu/~<username>'''. Check out the contents of 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 | ~/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. | 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 === | === Syntax === | ||
− | + | [https://en.wikipedia.org/wiki/HTML HTML] is a type of [https://en.wikipedia.org/wiki/XML XML] markup language, it consists of ''tag''s: | |
<tag> | <tag> | ||
− | ... | + | ... content |
</tag> | </tag> | ||
− | + | It usually isn't [https://en.wikipedia.org/wiki/Case_sensitivity case sensitive], but there are many types. The basic structure of HTML: | |
<!DOCTYPE ...> | <!DOCTYPE ...> | ||
<html> | <html> | ||
<head> | <head> | ||
− | ... | + | ... content descriptions, meta-data |
</head> | </head> | ||
<body> | <body> | ||
− | ... | + | ... the homepage itself |
</body> | </body> | ||
</html> | </html> | ||
− | + | There are tags that don't need to be closed, e.g.: | |
− | <pre> | + | <pre> |
− | <img ...> | + | <img ...> |
− | <br/> | + | <br/> |
− | </pre> | + | </pre> |
− | + | Instead of: | |
− | <pre> | + | <pre> |
− | <img ...>XYZ</img> | + | <img ...>XYZ</img> |
− | <br> ... </br> | + | <br> ... </br> |
− | </pre> | + | </pre> |
− | + | Some tags have optional ''attributes'': | |
− | <pre> | + | <pre> |
− | <div align="center"> ... </div> | + | <div align="center"> ... </div> |
− | <img width="100" ... /> | + | <img width="100" ... /> |
− | </pre> | + | </pre> |
− | + | 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. | |
<pre> | <pre> | ||
<body> | <body> | ||
− | + | Content | |
− | <!-- | + | <!-- Comment --> |
</body> | </body> | ||
</pre> | </pre> | ||
− | == | + | == 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> | <!DOCTYPE html> | ||
− | <html lang=" | + | <html lang="en"> |
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title> | <title> | ||
− | + | Title of the page | |
</title> | </title> | ||
</head> | </head> | ||
<body> | <body> | ||
− | + | Website | |
</body> | </body> | ||
</html> | </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 [http://validator.w3.org/ validator], green means okay, if there are some red errors, try to correct those. |
− | # | + | # Beautify your site, write about yourself. |
− | == | + | == Useful links == |
− | * [http://validator.w3.org/ | + | * [http://validator.w3.org/ validator] |
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet] | * [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet] | ||
* [http://www.w3schools.com/ http://www.w3schools.com/] | * [http://www.w3schools.com/ http://www.w3schools.com/] |
A lap jelenlegi, 2017. szeptember 25., 04: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>
- 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.