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 <html> </html> tag-ek között helyezkednek el. A fejrész a <head> </head> tag-ek között található. Itt adjuk meg a dokumentum címét. A szövegtörzs a <body> </body> tag-ek között van. A kommentárok a <!-- --> tag-ek között helyezkednek el.
Hello World! <!DOCTYPE html> <html> <head> <title> Hello World document </title> </head> <body> <h1> Hello, World! </h1> <p> This is a minimal "hello world" HTML document. </p> </body> </html>
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 <title> </title> tag-ekkel történik.
Fejlécek A HTML-ben hatszintű bekezdés fejlécet használhatunk <h1> és <h6> között. A fejléc (heading) megadása a <hn> </hn> 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 <p> </p> 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: <a > </a>; - 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: <a href = url > </a> 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. <img src = portrait.gif alt = Lajos > A thumbnail képek alkalmazása.
Képformátumok
Számozatlan lista A számozatlan lista (unordered list) egyszerű felsorolásra alkalmas. Megadása: <ul> <li> Tanulmányi Osztály <li> Felnőttképzési Központ </ul> 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: <ol> <li> Tanulmányi Osztály <li> Felnőttképzési Központ </ol> 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> </pre>
Egyéb elemek Idézet (blockquote) Megadása: <bq> </bq> Sortörés (line break) Megadása: <br> Nem hagy ki sort, mint a <p> tag. Vízszintes vonal (horizontal rule) Az oldal tagolására szolgál. Megadása: <hr>
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