02. pengenalan html.ppt
TRANSCRIPT
PEMROGRAMAN WEB 1
PENGENALAN HTML
Rina Dewi Indah Sari, S.Kom
STMIK Asia Malang - 2013
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 kuliah ini akan digunakan npp 5.9.3 File HTML harus berekstensi htm atau html
STMIK Asia Malang - 2013
Membuat Web HTML
TEXT EDITOR
<SCRIPT HTML>
TEXT EDITOR
<SCRIPT HTML>
WEB BROWSER
Buka file htmlTampilan berupa halaman web
WEB BROWSER
Buka file htmlTampilan berupa halaman web
Simpan dengan extention *.htm or
*.html
STMIK Asia Malang - 2013
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
STMIK Asia Malang - 2013
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>
STMIK Asia Malang - 2013
Elemen Dasar HTMLTag Keterangan
<html> Mendefinisikan sebuah dokumen HTML
<body> Mendefinisikan body dokumen
<h1> to <h6>Mendefinisikan header 1 sampai header 6
<p> Mendefinisikan sebuah paragraf
<br> Menyisipkan sebuah line break
<hr> Mendefinisikan sebuah garis horisontal
<!--> Mendefinisikan sebuah komentar
STMIK Asia Malang - 2013
Elemen HTML
HTML merupakan dokumen yang terbentuk dari elemen-elemen 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>
STMIK Asia Malang - 2013
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
STMIK Asia Malang - 2013
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
STMIK Asia Malang - 2013
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
STMIK Asia Malang - 2013
Pemformatan Teks
Tag Keterangan
<b> Mendefinisikan bold text
<big> Mendefinisikan big text
<em> Mendefinisikan emphasized text
<i> Mendefinisikan italic text
<small> Mendefinisikan small text
<strong> Mendefinisikan strong text
<sub> Mendefinisikan subscripted text
<sup> Mendefinisikan superscripted text
STMIK Asia Malang - 2013
Teks Normal
Script: Normal Text : Normal Text
Contoh Script HTML ditulis pada tag BODY
STMIK Asia Malang - 2013
Header
Tag ini biasanya digunakan untuk membuat judul untuk ditampilkan dalam halaman web
STMIK Asia Malang - 2013
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
STMIK Asia Malang - 2013
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
STMIK Asia Malang - 2013
Subscript dan Superscript
Script: Subscript : <sub>Subscript</sub><br/> Superscript :
<sup>Superscript</sup><br/> Contoh Script HTML ditulis pada tag
BODY
STMIK Asia Malang - 2013
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
Tag <blink> tidak disupport oleh Internet Explorer.
STMIK Asia Malang - 2013
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: atau lebih lengkap disini…..Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
STMIK Asia Malang - 2013
Karakter Entity
Script: Spasi : A B <br/> Copyright : ©<br/> Registered : ®<br/> TradeMark : ™<br/> Less Than : <<br/> Greater Than : ><br/> Ampersand : &<br/> Quotation : "<br/>
STMIK Asia Malang - 2013
Karakter Entity
STMIK Asia Malang - 2013
Paragraph Formatting
STMIK Asia Malang - 2013
Tag paragraph dan pemformatan teks merupakan tag yang paling sering digunakan dalam pembuatan web, sebab pada umumnya informasi berupa teks.
Tag paragraph <p> merupakan tag penunjuk setiap paragraph baru.
Secara default, tag paragraph <p> akan membuat paragraph rata kiri, untuk merubahnya dapat ditambahkan atribut align pada tag paragraph.
Paragraph Biasa
Script: <p>Ini adalah contoh paragraf biasa. Ini
adalah contoh paragraf biasa. Ini adalah contoh paragraf biasa. Ini adalah contoh paragraf biasa.Ini adalah contoh paragraf biasa. Ini adalah contoh paragraf biasa. Ini adalah contoh paragraf biasa. Ini adalah contoh paragraf biasa.</p>
Ini sama dengan <p align=left>
STMIK Asia Malang - 2013
Paragraph Rata Kanan
Script: <p align = right>Ini adalah contoh paragraf
biasa dengan alignment right. Ini adalah contoh paragraf biasa dengan alignment right. Ini adalah contoh paragraf biasa dengan alignment right. Ini adalah contoh paragraf biasa dengan alignment right.</p>
Untuk membuat rata kanan dan kiri gunakan tag <p align=justify>
STMIK Asia Malang - 2013
Paragraph Rata Tengah
Script: <p align = center>Ini adalah contoh
paragraf biasa dengan alignment center. Ini adalah contoh paragraf biasa dengan alignment center. Ini adalah contoh paragraf biasa dengan alignment center. Ini adalah contoh paragraf biasa dengan alignment center.</p>
STMIK Asia Malang - 2013
Paragraph Blockquote
Script: <blockquote>Ini adalah contoh paragraf
blockquote. Ini adalah contoh paragraf blockquote. Ini adalah contoh paragraf blockquote. Ini adalah contoh paragraf blockquote. Ini adalah contoh paragraf blockquote. Ini adalah contoh paragraf blockquote. Ini adalah contoh paragraf blockquote. Ini adalah contoh paragraf blockquote.</blockquote>
STMIK Asia Malang - 2013
Paragraph Preformatted
Script: <pre>Ini adalah contoh preformatted paragraph.
Ini adalah contoh preformatted paragraph. Ini adalah contoh preformatted paragraph.
Ini adalah contoh preformatted paragraph. Ini adalah contoh preformatted paragraph.
Ini adalah contoh preformatted paragraph. </pre>
STMIK Asia Malang - 2013
Font Formatting
STMIK Asia Malang - 2013
Size/ ukuran font:
1 .. 7 - kecil ke besar. +n - ukuran font terakhir ditambah sejumlah n. -n - ukuran font terakhir dikurangi sejumlah n.
Font Formatting
STMIK Asia Malang - 2013
Setiap browser memiliki default font setting - jenis font, ukuran dan warnanya. Defaultnya kemungkinan Times New Roman 12pt (yang sama dengan nilai 3) dan warnanya hitam
Font Formatting
STMIK Asia Malang - 2013
Jarak antar font mono-spaced font atau Typewriter Text Semua jenis huruf menggunakan lebar
yang sama Digunakan tag <tt>
Font Formatting
STMIK Asia Malang - 2013
Script: <font face = "courier new“ size = "7“ color = "red">
Ini adalah contoh font courier new ukuran 3 warna merah. </font>
Penggunaan Font Face tersebut hanya akan ditampilkan bila font di komputer, jika belum akan ditampilkan defaultnya.
Font Formatting
STMIK Asia Malang - 2013
Script: font face = "comic sans ms“ size = "+2“
color = "green"> Ini adalah contoh font comic sans ukuran +2 warna hijau.</font>
Font Formatting
STMIK Asia Malang - 2013
Script: <font face = "tahoma“ size = "-4“ color =
"blue"> Ini adalah contoh font tahoma ukuran -4 warna biru. </font>
Tips penulisan Tag
Gunakan huruf kecil untuk penulisan tag dan atribut World Wide Web Consortium (W3C)
recommends lowercase tags Selalu isikan nilai atribut yang
didefinisikan. Jika menggunakan nested tag (tag
bersusun) jangan sampai overlapping (bersilangan)
STMIK Asia Malang - 2013
Latihan 1
STMIK Asia Malang - 2013
Latihan 2
Buatlah sebuah halaman web yang berisi biodata Anda: Nim Nama Angkatan Jurusan TTL, alamat, hoby, fav, dsb
Lakukan Style dan Formating menurut kreatifitas Anda masing-masing.
STMIK Asia Malang - 2013