HTML Dr. Nyéki Lajos 2016
HTML és SGML • HTML (Hypertext Markup Language) • SGML (Standard Generalized Markup Language) ISO 8879:1986 • A HTML nyelven készült dokumentumok kiterjesztése - az Internet szerveren: .html; - a helyi számítógépen: .htm.
A HTML nyelv fejlődése • 1992. HTML Level 1 linkek, kép, hang, mozgókép kezelése • 1994. HTML Level 2 az interaktív kérdőív (form) beépítése • 1995. HTML Level 3 táblázat, matematikai képlet, ékezetes betű • 1997. HTML Level 4 nagyméretű táblázat fokozatos megjelenítése, rugalmasabb űrlapkezelés, kibővült ékezetes karakterkészlet, CSS
HTML szabványok • • • • • • •
HTML 1.0 1992, Tim Berners-Lee ötlete HTML 2.0 1995 november HTML 3.0 abbahagyva HTML 3.2 1997 január, W3 Consortium HTML 4.01 1998 április XHTML 1.0 2000 január HTML 5.0 2009 vége
A HTML dokumentum szerkezete • A HTML nyelv elemei a tag-ek. • A dokumentumok a … tag-ek között helyezkednek el. • A fejrész a … tag-ek között található. Itt adjuk meg a dokumentum címét. • A szövegtörzs a … tag-ek között van. • A kommentárok a tag-ek között helyezkednek el.
Hello World!
Hello World document Hello, World!
This is a minimal "hello world" HTML document.
Az eredmény
Címek • Minden HTML dokumentumnak van címe. • A böngésző a címet a címsorában jeleníti meg. • A kereső programok a cím alapján találják meg az oldalt. • A dokumentum címének megadása a fejrészben a
… tag-ekkel történik.
Fejlécek • A HTML-ben hatszintű bekezdés fejlécet használhatunk
és között. • A fejléc (heading) megadása a … tag-ekkel történik. • Fejlécek csak bekezdések között fordulhatnak elő, bekezdésen belül nem. • A fejlécek mindig magukban foglalnak soremelést is.
Bekezdések • A bekezdések soremeléssel vannak elválasztva. • A bekezdés (paragraph) megadása a
…
tag-ekkel történik. • Ezek hatására soremelés következik be.
Kapcsolatok • A hypertext link megadja a kapcsolódó fájl vagy dokumentum helyét az Interneten. • Két része van: - az anchor (horgony), megadása:
… ; - az URL (Uniform Resource Locator). • A link mutathat: - ugyanazon dokumentumon belülre; - másik dokumentumra; - másik dokumentum adott helyére.
A link megadása • A link megadása: … • Az URL megadása: mode : // host.domain [:port] / path / filename • A mode például lehet: - file: egy fájl a helyi rendszeren ; - ftp: egy fájl egy FTP szerveren; - http: egy fájl egy W3 szerveren; - mailto: levélküldési lehetőség megadott címre.
Képek beillesztése • A kép lehet külső (tehát egész oldalt betöltő) és belső. • A külső képek szokásos formátuma .jpg vagy .png. • Az egyszerűbb kivitelű belső képek szokásos formátuma .gif. • 
• A thumbnail képek alkalmazása.
Képformátumok
Számozatlan lista • A számozatlan lista (unordered list) egyszerű felsorolásra alkalmas. • Megadása: - Tanulmányi Osztály
- Felnőttképzési Központ …
• A listajelek megjelenítése nem szabványos, különböző böngészők esetében eltérő lehet.
Számozott lista • A számozott lista (ordered list) rendezett listák készítésére alkalmas. • Megadása: - Tanulmányi Osztály
- Felnőttképzési Központ …
• Ennek hatására a listaelemek sorszámozva (1., 2., …, stb.) jelennek meg.
Előre formázott szöveg • Időnként szükség lehet előre formázott szöveg (preformatted text) használatára. Például C# program forráskódjának beillesztése úgy, hogy az olvashatóságot biztosító bekezdések megmaradjanak. • Megadása: <pre> …
Egyéb elemek • Idézet (blockquote) Megadása: … • Sortörés (line break) Megadása:
Nem hagy ki sort, mint a tag. • Vízszintes vonal (horizontal rule) Az oldal tagolására szolgál. Megadása:
Ajánlott freeware szoftverek • • • • • • •
NoteTab 7.0 Light Easy Thumbnails 3.0 HTML Tidy Online CSS Toolbox Paint.NET 4.05 Komodo Edit 9.2.1 Aptana Studio 3.6.0
Ajánlott kereskedelmi szoftverek • • • • • •
Adobe Dreamweaver CS6 Blumental HTMLPad 2015 Coffecup HTML Editor 15.1 Microsoft Office Frontpage 2003 Microsoft Expression Web 4 NoteTab 7.0 Pro
