HTML¶

Az alábbi példák az órákon elhangozottakhoz tartozó emlékeztetők.

Egy „csontváz” HTML oldal az alábbi. A VSCode-ban a fájl típusának beállítása után egy ! karakter leütésével automatikusan beilleszthető.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello!
</body>
</html>

HTML elemek¶

<tag>, </tag>
<tag paraméter=”érték” paraméter=”érték”>

HTML fejléc:¶

<title>Fejléc tartalma</title>

Bekezdés:¶

<p align="center" margin-left="5px", text-indent="40px", line-height="150%">lorem ipsum dolor...</p>

lorem ipsum dolor...

Sortörés:¶

<p>Mauris vulputate justo id pharetra condimentum.<br>
   Class aptent taciti sociosqu ad litora torquent per conubia</p>

Mauris vulputate justo id pharetra condimentum.
Class aptent taciti sociosqu ad litora torquent per conubia

Vízszintes elválasztó:¶

<p>Mauris vulputate justo id pharetra condimentum.</p>
<hr noshade color="red" align="center" size="4" width="50%">
<p>Mauris vulputate justo id pharetra condimentum.</p>

Mauris vulputate justo id pharetra condimentum.

Betűtípus:¶

<p>Mauris vulputate justo
  <font size="5" color="navy" face="arial">id pharetra</font>
  condimentum.</p>

Mauris vulputate justo id pharetra condimentum.

Karakterek formázása:¶

<b>félkövér</b>
<strong>félkövér</strong>
<i>dőlt</i>
<u>aláhúzott</u>
H<sub>2</sub>U
3 m<sup>2</sup>
<code>for i in seq 1 1 10 ; do</code>

félkövér félkövér dőlt aláhúzott H₂U 3 m² for i in seq 1 1 10 ; do

Megjegyzések:¶

<!-- Ez egy megjegyzés a HTML kódban. -->

Színek kezelése:

color="#FFFFFF"
color="blue"

Az oldal body tagje:¶

<body bgcolor="#FFFFFF" background="h1.jpg" text="#AAAAAA" link="darkblue" vlink="red" alink="yellow" topmargin="10" leftmargin="10">

Címsorok:¶

<h1>Címsor1</h1>
<h2>Címsor2</h2>

<h6>Címsor6</h6>

Címsor1

Címsor2

Címsor6

Listák:¶

<ol start="10">
  <li>Kávé</li>
  <li>Tea</li>
  <li>Tej</li>
</ol>

Kávé
Tea
Tej

<ul>
  <li>Kávé</li>
  <li>Tea</li>
  <li>Tej</li>
</ul>

Kávé
Tea
Tej

Képek:¶

<img
  src="https://api.spgnordic.com/wp-content/uploads/2021/04/nvh2q1tu03-01-s.png"
  border="1"
  border-color="red"
  alt="Vespa"
  float="right"
  width="300px"
  height="300px"
  margin-left="50px"
>

Igazítások:¶

<center>
<img
  src="https://api.spgnordic.com/wp-content/uploads/2021/04/nvh2q1tu03-01-s.png"
  alt="Vespa"
  width="300px"
  height="300px"
>
</center>

Linkek:¶

<a href="https://vespanordic.com/no/products/gts-300" target="_blank" cursor="hand">A Vespa weboldala</a>

A Vespa weboldala

Könyvjelző:¶

<href="#bookmark">Lábjegyzetek</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies euismod mi, at fermentum lectus accumsan eget. Maecenas maximus fermentum sapien a pulvinar. Nam vestibulum euismod est. Etiam fermentum leo id neque mollis venenatis. Fusce at risus vitae ipsum varius ultricies sit amet ac nunc. Suspendisse mattis, diam non venenatis accumsan, orci mi lobortis metus, ac varius tellus mauris eu nunc. Sed ut libero nec turpis viverra hendrerit et sed arcu. Fusce consectetur sodales ante id congue. Quisque rutrum purus justo, sit amet eleifend purus ornare at. Donec a ullamcorper nibh. Integer tortor erat, finibus nec efficitur sed, fermentum non diam.

<p id="bookmark">Lábjegyzetek</p>
Sit amet eleifend purus ornare at.

Lábjegyzetek Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies euismod mi, at fermentum lectus accumsan eget. Maecenas maximus fermentum sapien a pulvinar. Nam vestibulum euismod est. Etiam fermentum leo id neque mollis venenatis. Fusce at risus vitae ipsum varius ultricies sit amet ac nunc. Suspendisse mattis, diam non venenatis accumsan, orci mi lobortis metus, ac varius tellus mauris eu nunc. Sed ut libero nec turpis viverra hendrerit et sed arcu. Fusce consectetur sodales ante id congue. Quisque rutrum purus justo, sit amet eleifend purus ornare at. Donec a ullamcorper nibh. Integer tortor erat, finibus nec efficitur sed, fermentum non diam.

Lábjegyzetek

Sit amet eleifend purus ornare at.

Táblázatok:¶

<table border="1" width="80%">
  <tr>
    <th>Név</th>
    <th>Osztály</th>
  </tr>
  <tr>
    <td align="center">Kiss Lajos</td>
    <td align="right">2.a.</td>
  </tr>
  <tr>
    <td>Szabó József</td>
    <td>2.b.</td>
  </tr>
  <tr>
    <td bgcolor="red" align="center" colspan="2">Kivételek</td>
  </tr>
  <tr>
    <td>Kiss István</td>
    <td>N/A</td>
  </tr>
</table>

Emlékeztető a vscode-hoz:

table>tr>td

<table>
  <tr>
      <td></td>
  </tr>
</table>

table.center>tr>td*2

<table class="center">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

table>(tr*2>td*3)*2

<table>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
  </tr>
</table>

Név	Osztály
Kiss Lajos	2.a.
Szabó József	2.b.
Kivételek
Kiss István	N/A

Űrlapok:¶

<form method="post" action="processit.php">
  Név: <input type="text" name="nev" value="Kiss Lajos"><br>

  Jelszó: <input type="password" name="jelszo" value=""><br>

  Renault: <input type="radio" name="marka" value="renault" selected>
  Dacia: <input type="radio" name="marka" value="dacia"><br>

  Vegetariánus: <input type="checkbox" name="vega" value="t" checked><br>

  Lakhely: &nbsp;
  <select name="lakohely">
    <option>Főváros</option>
    <option>Megyeszékhely</option>
    <option>Község</option>
    <option>Falu</option>
    <option>Egyéb</option>
  </select><br>

  Megjegyzés:<br>
  <textarea name="megjegyzes">Adja meg a megjegyzést!</textarea><br>

  <input type="hidden" name="rejtett_ertek" value="23">
  <input type="submit" name="submit" value="Beküldés">
  <input type="reset" name="reset" value="Törlés">
</form>

IFrame¶

<iframe width="600px" height="300px" src="https://www.uni-nke.hu"></iframe>

Kiemeltük a veszélyeit!<br>

Multimédia:¶

<video width="640" height="480" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="https://ia601506.us.archive.org/3/items/onkenyes-20170320/onkenyes-20170320.mp3" type="audio/mpeg">
</audio>

Meta tagek¶

meta name="copyright|author|keywords|expires|"
http-equiv="PRAGMA" content="NO-CACHE".

Redirect:

<head>
  <meta http-equiv="REFRESH" content="5; URL=http://www.uni-nke.hu">
</head>

HTML Validátorok¶

https://validator.w3.org (url, feltöltött fájlok)

Publikálás¶

A szerverünkre FTP-n kell feltölteni a website fájljait:

Szerver: 193.6.216.152
User: <NEPTUNKOD>
Jelszó: <NEPTUNKOD>
HTML mappa: public_html

A public_html mappán belül újabb mappák hozhatók létre az egyes feladatoknak.

Feladatok¶

Készítsen egy egyoldalas weblapot a saját önéletrajzával! Az oldal tartalmazzon egy képet is önről!
Készítse el a heti órarendjének táblázatát! A dupla órákhoz használja a rowspan attribútumot!
Készítsen egy két-három oldalas szöveget, melyben alkalmazza a címsorokat, a karakterstílusokat, valamint helyezzen el benne felsorolást is! Az oldalba illesszen be képet, egy videót és egy mp3 fájlt is! A szövegeket a Lorem Ipsum generátorral hozza létre! Az oldal alján szepepeljen egy link, amely az oldal tetejére viszi az olvasót, valamint adjon meg egy-két kapcsolódó linket is!
Töltse fel a szerverre az előző feladatban elkészített website-ot úgy, hogy az a http://193.6.216.152/~NEPTUNKOD/1 linken legyen elérhető!
Készítsen egy űrlapot, melyet kitöltve egy céges vacsorára lehet jelentkezni! Az űrlap tartalmazza a beküldő nevét, e-mail címét, lehessen kiválasztani, hogy az illető vegetariánus, vagy vegán menüt kér, és írhasson egy pár soros szabad szöveget is megjegyzésként. Az űrlapot a processit.php nevű programnak kell majd feldolgoznia. Az elkészített űrlap legyen megtekinthető a a http://193.6.216.152/~NEPTUNKOD/urlap linken!
Validálja az elkészíett lapok tartalmát, és javítsa az esetleges hibákat!