Informatics1-2017/Practice4

A MathWikiből
(Változatok közti eltérés)
18. sor: 18. sor:
  
 
=== Syntax ===
 
=== Syntax ===
−
A [https://hu.wikipedia.org/wiki/HTML HTML] az [https://hu.wikipedia.org/wiki/XML XML] jelölőnyelv egy fajtája, ú.n. ''tag''-ekből áll:
+
[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>
−
  ...  tartalom
+
  ...  content
 
  </tag>
 
  </tag>
−
Általában nem [https://hu.wikipedia.org/wiki/Kisbet%C5%B1-nagybet%C5%B1_%C3%A9rz%C3%A9kenys%C3%A9g case sensitive], de több szabvány is van. Egy html fájl alapvető felépítése:
+
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>
−
   ... fejléc, tartalom leírók, meta-adatok
+
   ... content descriptions, meta-data
 
   </head>
 
   </head>
 
   <body>
 
   <body>
−
   ... maga a honlap
+
   ... the homepage itself
 
   </body>
 
   </body>
 
  </html>
 
  </html>
−
Egyes tag-eket nem kell bezárni, vagy elég egy kacsacsőrrel írni, például:
+
There are tags that don't need to be closed, e.g.:
−
<pre>
+
<pre>
−
<img ...>
+
<img ...>
−
<br/>
+
<br/>
−
</pre>
+
</pre>
−
Nem pedig:
+
Instead of:
−
<pre>
+
<pre>
−
<img ...>XYZ</img>
+
<img ...>XYZ</img>
−
<br> ... </br>
+
<br> ... </br>
−
</pre>
+
</pre>
−
Egyes tag-ekhez tehetünk ''attribútum''okat:
+
Some tags have optional ''attributes'':
−
<pre>
+
<pre>
−
<div align="center"> ... </div>
+
<div align="center"> ... </div>
−
<img width="100" ... />
+
<img width="100" ... />
−
</pre>
+
</pre>
−
A forráskódba tehetünk ''komment''-eket, ezek nem jelennek meg a böngészőben, de a forrás megtekintésével láthatóak.
+
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>
−
   szép szöveg
+
   Content
−
   <!-- kevésbé szép szöveg -->
+
   <!-- Comment -->
 
</body>
 
</body>
 
</pre>
 
</pre>
  
−
== Feladatok ==
+
== Tasks ==
  
−
A feladatok elõtt nevezzétek vissza az '''index.html'''-t '''minta.html'''-re és tiszta lappal induljatok egy új '''index.html'''-el, ezzel a html kóddal:
+
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="hu">
+
  <html lang="en">
 
     <head>
 
     <head>
 
         <meta charset="utf-8">
 
         <meta charset="utf-8">
 
         <title>
 
         <title>
−
             Oldal neve
+
             Title of the page
 
         </title>
 
         </title>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
−
         Weboldal.
+
         Website
 
     </body>
 
     </body>
 
  </html>
 
  </html>
  
−
# Érjétek el, hogy az oldalatok címe megfelelõ legyen pl. XY weboldala (a title tag tartalmát kell átírni).
+
# Provide a title to your homepage e.g.: Homepage of XY (title tag).
−
# Írjatok a weboldalon valami köszöntõ címet, pl. XY weboldala (használjátok a h1, h2, stb tag-ek egyikét).
+
# 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 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.
 
# Írjatok valamilyen linkeket listába (ol, ul, vagy dl), linkek közt lehetnek hasznos linkek, mások oldalára hivatkozó linkek, stb.
81. sor: 81. sor:
 
# Egészítsétek még ki és ''szépítgessétek'' az oldalt ahogy gondoljátok.
 
# Egészítsétek még ki és ''szépítgessétek'' az oldalt ahogy gondoljátok.
  
−
== Hasznos linkek ==
+
== Useful links ==
  
−
* [http://validator.w3.org/ validátor]
+
* [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 2017. szeptember 25., 04:07-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. Í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.
  4. Írjatok valamilyen linkeket listába (ol, ul, vagy dl), linkek közt lehetnek hasznos linkek, mások oldalára hivatkozó linkek, stb.
  5. Rakjatok ki egy képet az oldalatokra, lehetőleg magatokról, de a gyakorlat erejéig lehet valami más kép.
  6. 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.
  7. Ellenõrizzétek az oldalatokat a validátorral, ha zöld akkor minden rendben, ha piros akkor javítsátok a hibákat.
  8. Egészítsétek még ki és szépítgessétek az oldalt ahogy gondoljátok.

Useful links

A lap eredeti címe: „http://wiki.math.bme.hu/index.php?title=Informatics1-2017/Practice4&oldid=12896”
Személyes eszközök