Informatics1-2017/Practice5

A MathWikiből
(Változatok közti eltérés)
77. sor: 77. sor:
 
<pre>
 
<pre>
 
<body>
 
<body>
−
  <div>Első sor</div>
+
  <div>First line</div>
−
  <div class="my_pink_style">Második sor</div>
+
  <div class="my_pink_style">Second line</div>
−
  <div>Harmadik sor</div>
+
  <div>Third line</div>
 
</body>
 
</body>
 
</pre>
 
</pre>
−
Ezzel együtt a css fájlban:
+
And now the CSS file:
 
  div{
 
  div{
 
   color: black;
 
   color: black;
89. sor: 89. sor:
 
   color: pink;
 
   color: pink;
 
  }
 
  }
−
Különböző <tt>div</tt>-elet definiálhatunk, mindegyiknek saját formátummal, és bármilyen tag-nek lehet többfajta formátuma, <tt>class</tt>-okkal megkülönböztetve:
+
We can create all kinds of <tt>div</tt>s, all with their own styles. And not only <tt>div</tt>s, we can use <tt>class</tt>es to format any tag:
 
<pre>
 
<pre>
−
  <a class="kicsi_link"  href="index.hu">Index</a>
+
  <a class="small_link"  href="index.hu">Index</a>
−
  <a class="fontos_link" href="bme.hu"  >BME</a>
+
  <a class="important_link" href="bme.hu"  >BME</a>
 
</pre>
 
</pre>
−
Ahol a css fájlban:
+
CSS:
−
  a.kicsi_link{
+
  a.small_link{
 
   color: blue;
 
   color: blue;
 
   font-size: small;
 
   font-size: small;
 
  }
 
  }
−
  a.fontos_link{
+
  a.important_link{
 
   color: red;
 
   color: red;
 
   font-size: large;
 
   font-size: large;
 
  }
 
  }
  
−
Erre egy másik módszer, ha elnevezzük a tag-eket és azokkal hivatkozunk rájuk a css-ben:
+
Another method is to name tags and reference them in the CSS:
 
<pre>
 
<pre>
−
<div>Első sor</div>
+
<div>First line</div>
−
<div id="first_pink">Második sor</div>
+
<div id="first_pink">Second line</div>
−
<a  id="pink_link" href="#valami">egy link</a>
+
<a  id="pink_link" href="#something">a linkk</a>
 
</pre>
 
</pre>
−
és a css fájlban:
+
CSS::
 
  #pink_link{
 
  #pink_link{
 
   color: pink;
 
   color: pink;
119. sor: 119. sor:
 
   font-size: large;
 
   font-size: large;
 
  }
 
  }
−
Ha class-ként adjuk meg a stílust, akkor a <tt>div class="xyz"</tt> tag-ből több is lehet, mind a <tt>div.xyz</tt>-nek megfelelő stílusban.
+
When using classes we can create as many tags with the same class as we want, but ids are unique. For example only one tag may have the id <tt>pink_link</tt>
−
Míg az <tt>id</tt> egyedi, ez esetben csak az adott tag-et formázzuk vele.
+
  
−
=== Táblázatok ===
+
=== Tables ===
−
Nézzünk egy alap táblázatot html-ben:
+
Basic table in HTML:
 
<pre>
 
<pre>
 
<table>
 
<table>
−
  <tr><th>Ez az 1. oszlop</th><th>Ez meg a 2. oszlop</th></tr>
+
  <tr><th>First column</th><th>Second column</th></tr>
 
  <tr><td>a</td><td>b</td></tr>
 
  <tr><td>a</td><td>b</td></tr>
−
  <tr><td class="kozepre" colspan="2"2 széles példa elem</td> </tr>
+
  <tr><td class="center" colspan="2">2 wide data</td> </tr>
 
  <tr><td rowspan="2">c</td><td>d</td></tr>
 
  <tr><td rowspan="2">c</td><td>d</td></tr>
 
  <tr> <td>d</td></tr>
 
  <tr> <td>d</td></tr>
 
</table>
 
</table>
 
</pre>
 
</pre>
−
Ehhez a css-ben:
+
CSS:
 
  td, th {
 
  td, th {
 
   border: 1px solid black;
 
   border: 1px solid black;
140. sor: 139. sor:
 
   border-collapse: collapse;
 
   border-collapse: collapse;
 
  }
 
  }
−
  td.kozepre {
+
  td.center {
 
   text-align: center;
 
   text-align: center;
 
  }
 
  }
−
Így lesz szegélye a táblázatnak. Figyeljük meg a középre igazítást is.
+
This way the table will have a border. Check out the center align as well.
  
 
=== Selector ===
 
=== Selector ===
−
Egy link többéle képen nézhet ki, más ha "friss" a link, vagy ha már egyszer rákattintottunk, vagy ha éppen rajta áll a kurzor. Ezt a következő képen formázhatjuk:
+
A link can have more than one style, it looks different when it has already been visited, when the cursor is over the link and lastly when the mouse button is pressed over the link:
 
  a {text-decoration: underline;}
 
  a {text-decoration: underline;}
 
  a:active  {color: red;}
 
  a:active  {color: red;}
152. sor: 151. sor:
 
  a:link    {color: blue;}
 
  a:link    {color: blue;}
 
  a:hover  {text-decoration: line-through;}
 
  a:hover  {text-decoration: line-through;}
−
Ekkor minden link alá lesz húzva, de azon belül több féle színű lehet és ha rajta van az egér, akkor át lesz húzva.
+
This way every link is underlined, but the different states have different styles.
  
−
Lehet megadni olyan stílus osztályt, ami nem egy konkrét tag-re vonatkozik. A css fájlban:
+
We can specify a class that doesn't reference a given tag, but globally a class:
−
  .kozepre {
+
  .center {
 
   text-align: center;
 
   text-align: center;
 
  }
 
  }
−
Ekkor az <tt>index.html</tt>-ben így tudjuk használni:
+
Using it in HTML:
 
<pre>
 
<pre>
−
<h1  class="kozepre">ez a cím középen van</h1>
+
<h1  class="center">title centering</h1>
−
<div class="kozepre">ez a szöveg középen van</div>
+
<div class="center">text centering</div>
−
<a  class="kozepre" href="math.bme.hu">ez a link is középen van</a>
+
<a  class="center" href="math.bme.hu">link centering</a>
 
</pre>
 
</pre>
  
−
=== Hasznos linkek ===
+
=== Useful links ===
−
* Nézzük meg a többi hallgató vagy tanár oldalát, ha tetszik valamelyik honlap, akkor próbáljuk meg a forrás alapján lemásolni.
+
* Check out the other students or teachers websites. Feel free to copy stuff that you like.
−
* [http://www.w3schools.com/css/default.asp leírás css-ről]
+
* [http://www.w3schools.com/css/default.asp CSS documentation]
 
* [http://jigsaw.w3.org/css-validator/ css validator]
 
* [http://jigsaw.w3.org/css-validator/ css validator]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVeDdVTXZWbnBOdEk CSS3 Cheat Sheet]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVeDdVTXZWbnBOdEk CSS3 Cheat Sheet]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet]
 
* [https://docs.google.com/open?id=0Bwk5mjaCfPlVaEVLZ0swU0xCU2M HTML5 Cheat Sheet]
  
−
== Ha még nincs oldalatok ==
+
== If you don't have a webpage yet ==
  
−
A mai gyakorlat a múlthetire épít, így ha ez valakinek nincs meg, akkor mentse a kövektezõ file-okat a public_html mappájába:
+
Save these files in your <tt>public_html</tt> folder:
  
 
* [http://math.bme.hu/~kkovacs/info1/index.html index.html]
 
* [http://math.bme.hu/~kkovacs/info1/index.html index.html]
 
* [http://math.bme.hu/~kkovacs/info1/orarend.html orarend.html]
 
* [http://math.bme.hu/~kkovacs/info1/orarend.html orarend.html]
  
−
== Feladatok ==
+
== Tasks ==
  
−
Készítsetek egy új file-t a public_html mappátokba style.css névvel, mellette nyissátok meg az index.html-t is.
+
Create a new file in the <tt>public_html</tt> folder named <tt>style.css</tt>, open this file and <tt>index.html</tt> as well.
  
 
# Elõször csak inline írjunk CSS kódot az index.html-ünkbe, valahol változtassátok meg a betûk méretét ( style = "font-size:large" )
 
# Elõször csak inline írjunk CSS kódot az index.html-ünkbe, valahol változtassátok meg a betûk méretét ( style = "font-size:large" )

A lap 2017. október 2., 04:19-kori változata

Tartalomjegyzék

CSS

CSS is an optional formatting companion to HTML. We can make much better looking websites using CSS than just using HTML.

Creating the CSS file

For an HTML to use CSS it has to conatin a link to a CSS file (.css extension), where the formatting is found. For example: 

public_html
 |
 +- index.html
 | 
 +- style.css

Where the contents of index.html is: 

<!DOCTYPE html>
<html>
 <head>
  <title>...</title>
  <link type="text/css" rel="stylesheet" href="style.css">
 </head>
<body>
 ...
</body>
</html>

Let's look at the webpage:

and the associated CSS file:

Contents of a CSS file

In a CSS we can modify the attributes of any HTML tag: 

html{
 background: white;
}

What this means is for the HTML files where this CSS is linked, the <html> tag will have the background: white attribute. Thus the background of the webpage will be white. 

a{
 color: blue;
}

This makes all a tags (links) blue.

Some attributes:

attribute possible values
color black, red, #E0E0E0
backround-color black, red, #E0E0E0
font-size small, large, 12px, 200%
text-align center, left, right
font Roman, Latin
font-style italic
font-weight bold

Classes

What if we only want to modify a specific line and not all tags of a kind? For example here: 

<body>
 <div>First line</div>
 <div>Second line</div>
 <div>Third line</div>
</body>

Making only the second line pink: 

<body>
 <div>First line</div>
 <div class="my_pink_style">Second line</div>
 <div>Third line</div>
</body>

And now the CSS file: 

div{
 color: black;
}
div.my_pink_style{
 color: pink;
}

We can create all kinds of divs, all with their own styles. And not only divs, we can use classes to format any tag: 

 <a class="small_link"  href="index.hu">Index</a>
 <a class="important_link" href="bme.hu"  >BME</a>

CSS: 

a.small_link{
 color: blue;
 font-size: small;
}
a.important_link{
 color: red;
 font-size: large;
}

Another method is to name tags and reference them in the CSS: 

<div>First line</div>
<div id="first_pink">Second line</div>
<a   id="pink_link" href="#something">a linkk</a>

CSS:: 

#pink_link{
 color: pink;
 text-decoration: underline;
}
#first_pink{
 color: pink;
 font-size: large;
}

When using classes we can create as many tags with the same class as we want, but ids are unique. For example only one tag may have the id pink_link

Tables

Basic table in HTML: 

<table>
 <tr><th>First column</th><th>Second column</th></tr>
 <tr><td>a</td><td>b</td></tr>
 <tr><td class="center" colspan="2">2 wide data</td> </tr>
 <tr><td rowspan="2">c</td><td>d</td></tr>
 <tr>	<td>d</td></tr>
</table>

CSS: 

td, th {
 border: 1px solid black;
}
table {
 border-collapse: collapse;
}
td.center {
 text-align: center;
}

This way the table will have a border. Check out the center align as well.

Selector

A link can have more than one style, it looks different when it has already been visited, when the cursor is over the link and lastly when the mouse button is pressed over the link: 

a {text-decoration: underline;}
a:active  {color: red;}
a:visited {color: grey;}
a:link    {color: blue;}
a:hover   {text-decoration: line-through;}

This way every link is underlined, but the different states have different styles.

We can specify a class that doesn't reference a given tag, but globally a class: 

.center {
  text-align: center;
}

Using it in HTML: 

<h1  class="center">title centering</h1>
<div class="center">text centering</div>
<a   class="center" href="math.bme.hu">link centering</a>

Useful links

If you don't have a webpage yet

Save these files in your public_html folder:

Tasks

Create a new file in the public_html folder named style.css, open this file and index.html as well.

  1. Elõször csak inline írjunk CSS kódot az index.html-ünkbe, valahol változtassátok meg a betûk méretét ( style = "font-size:large" )
  2. Írjatok pár span-t az index.html-be, és adjátok õket valamilyen névvel hozzá egy osztályhoz. ( class = "kiemelt" )
  3. A style.css-t kapcsoljátok be az index.html-be és az orarend.html-be is. ( <link rel="stylesheet" href="style.css"> a head-be )
  4. A style.css segítségével érjétek el, hogy a 2. pontban definiált osztályba tartozó span-ek dõlt betûvel legyenek. (9. előadás)
  5. Most érjétek el, hogy az összes p-ben levõ szövegetek dõlt betûvel legyen.
  6. Mivel így már nem látszik mely szövegrészek voltak a kiemelt span-ben, így változtassátok meg, hogy a kiemeltek ne legyenek dõltek, legyenek félkövérek.
  7. Próbáljátok a szövegetek adott részeit máshova igazítani, pl a címet középre. Használjatok a címhez id-t, ne class-t. (9. előadás)
  8. Térjünk át az órarendre. Érjétek el, hogy jelentõs margója legyen a táblázatotok head (th) celláinak. Arra vigyázzatok, hogy ilyenkor a border="1"-et ki kell venni a html kódból. (9. előadás)
  9. Csináljatok szép keretet a táblázatnak, ne fekete legyen, próbáljátok meg hogy néz ki a dupla, esetleg ha vastagabb. (9. előadás)
  10. Térjünk vissza az index.html-re. Érjétek el, hogy ne a hagyományos módon legyen kiírva a listátok, mondjuk gyémántok legyenek a jelölõk, vagy római számok a számok. (9. előadás)
  11. Változtassátok meg a linkeket, pl ne legyenek aláhúzva, vagy más színnel legyenek. (pl: a:link {font-size:small;}, van még a:visited, a:hover, a:active)
  12. Éljétek ki magatokat, tegyétek olyanná az oldalt amilyenné szeretnétek.
A lap eredeti címe: „http://wiki.math.bme.hu/index.php?title=Informatics1-2017/Practice5&oldid=12923”
Személyes eszközök