HTML CSS
Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat: Mengerti tag-tag tentang images di HTML Memahami tag-tag pembuatan Form dan Frame Mengerti tag-tag CSS dalam design web Membuat halaman web dinamis dengan CSS.
CASCADING STYLE SHEETS Feature untuk membuat dynamic HTML. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template) Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru) Support ke semua browser.
Aturan Penulisan CSS Nilai untuk property tidak boleh dalam tanda petik. contoh : color : green; Nama property bersifat case sensitive. color : green; property : color value : green
Cara Penggunaan External Style Sheet Bentuk : <link rel=“stylesheet” type=“text/css” href=“css_files.css”> <link, merupakan tag pembuka diakhiri dengan tanda “>” rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet type=“text/css”, file yang dipanggil berupa css href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Contoh External Style Sheet Contoh script efek.css body { color: green; background: white; font-family : arial; } <HTML> <HEAD> <TITLE>centranet</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css"> </HEAD> <BODY> <H1>FASILKOM</H1> <P> FASILKOM adalah fakultas ilmu komputer yang memiliki 2 Prodi yaitu Sistem Informasi dan Tehnik Informatika </BODY> </HTML>
Cara Penggunaan – Cont.1 Internal Style Sheet Bentuk umum : <HTML> <HEAD> <TITLE>centranet</TITLE> <STYLE type="text/css"> body { color: white; background: green; font-family : arial; } </STYLE> </HEAD> <BODY> <H1>FASILKOM</H1> <P>FASILKOM adalah fakultas ilmu komputer yang memiliki 2 Prodi yaitu Sistem Informasi dan Tehnik Infor </BODY> </HTML> Internal Style Sheet Bentuk umum : <style type=“text/css”> …definisi style… </style>
Cara Penggunaan – Cont.2 Inline Style sheet <HTML> <HEAD> <TITLE>centranet</TITLE> </HEAD> <BODY style="color: white; background: green; font-family : arial;“ > <H1>FASILKOM</H1> <P>FASILKOM adalah fakultas ilmu komputer yang memiliki 2 Prodi yaitu Sistem Informasi dan Tehnik Informatika </BODY> </HTML>