Pengenalan HTML (Hypertext Markup Language ) pada mata pelajaran Informatika
HTML (Hyper Text Markup Language)
Merupakan format standart untuk membuat halaman WWW. HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus (Markup Tags) Markup Tags memberitahukan Browser bagaimana menampilkan halaman WWW File HTML berupa file teks (plain text file), bukan binary file, sehingga dapat dibuat menggunakan editor teks biasa seperti Ms. Word, Word Pad, Kword, atau Notepad. Dalam sekolah ini akan digunakan npp 8.4.5 atau versi yang lainnya. File HTML harus berekstensi htm atau html.
Membuat Web HTML
Gambar contoh alur pembuatan html
Konsep Dasar HTML
Secara umum setiap elemen (tag) pembentuk HTML bekerja dengan cara yang sama. Masing-masing memiliki tag pembuka dan tag penutup, kecuali untuk tag tertentu (bukan pemformatan) Skema dasar HTML adalah informasi minimum yang diperlukan oleh dokumen web, dan semua dokumen web harus berisi komponen-komponen dasar ini.
Skema Dasar HTML
<HTML>
<HEAD>
<TITLE> Halaman Web Pertamaku</TITLE>
</HEAD>
<BODY>
<H1> My First Heading </H1>
<b> Welcome to My Page </b>
<!-- Rest of the page goes here -->
</BODY>
</HTML>
Elemen Dasar HTML
Gambar Elemen Dasar HTML
Elemen HTML
HTML merupakan dokumen yang terbentuk dari elemen-elemen HTML.
Elemen HTML dinyatakan dengan tag HTML
Elemen HTML dinyatakan dengan tag HTML
Misalnya Elemen HTML
<body>Ini web Pertamaku</body>
Elemen HTML diawali dengan <body>
Elemen HTML diakhiri dengan </body>
Atribut Tag
Tag dapat memiliki atribut
Atribut memberikan informasi tambahan pada elemen HTML
Contoh atribut untuk body: bgcolor, text, link, alink, vlink, topmargin, bootommargin, dsb.
Contoh atribut untuk font: Bold, Italic, Underline, Superscript, Subscript, dsb.
Body Atribut
BGCOLOR=colour, TEXT=colour
LINK=colour , VLINK=colour, ALINK=colour
BACKGROUND=URL > set background graphic
BGPROPERTIES=fixed > untuk mematikan background tag, sehingga tidak bergulung/diulang.
LEFTMARGIN=pixels, TOPMARGIN=pixels
RIGHTMARGIN=pixels, BOTTOMMARGIN=pixels
Web Color
Kita bisa merubah warna background pada halaman web, atau merubah warna tulisan, area (tabel, form) dsb.
216 warna Netscape WEB SAFE COLOR CHART
1536 warna dan gradasi abu-abu
Pemformatan Teks
Gambar Pemformatan Teks
Teks Normal
Script:
Normal Text : Normal Text
Contoh Script HTML ditulis pada tag BODY
Gambar contoh teks normal
Tag Header
Tag ini biasanya digunakan untuk membuat judul untuk ditampilkan dalam halaman web.
Gambar contoh tag header
Bold, Italic, Underline
Script:
Bold Text : <b>Bold Text</b><br/>
Italic Text : <i>Italic Text</i><br/>
Underline : <u>Underline</u><br/>
Contoh Script HTML ditulis pada tag BODY
Contoh hasil script Bold, Italic dan Underline
Striked, Strong, Emphasis
Script:
Striked Text : <strike>Striked Text</strike><br/>
Strong Text : <strong>Strong Text</strong><br/>
Emphasized Text : <em>Emphasized Text</em><br/>
Contoh Script HTML ditulis pada tag BODY
Contoh hasil script Striked, Strong, Emphasis
Subscript dan Superscript
Script:
Subscript : <sub>Subscript</sub><br/>
Superscript : <sup>Superscript</sup><br/>
Contoh Script HTML ditulis pada tag BODY
Contoh hasil script Subscript dan Superscript
Big, Small dan Blink
Script:
Big Text : <big>Big Text</big><br/>
Small Text : <small>Small Text</small><br/>
Blink Text : <blink>Blink Text</blink><br/>
Contoh Script HTML ditulis pada tag BODY
Contoh hasil script Subscript dan Superscript
Tag <blink> tidak disupport oleh Internet Explorer
Karakter Entity
Beberapa karakter seperti ‘<‘ memiliki makna khusus dalam penulisan HTML, karena itulah tidak dapat digunakan langsung dalam penulisan teks.
Untuk menampilkan karakter-karakter tersebut terdapat karakter entity. Ditunjukkan tabel berikut:
Gambar karakter entity
Script:
Spasi : A B <br/>
Copyright : ©<br/>
Registered : ®<br/>
TradeMark : ™<br/>
Less Than : <<br/>
Greater Than : ><br/>
Ampersand : &<br/>
Quotation : "<br/>
Gambar hasil script Entity
To be continued
Materi lanjutan bisa dicek dipostingan selanjutnya. Terimakasih
Posting Komentar