Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
HTML CSS
2
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.
3
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.
4
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
5
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
6
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>
7
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>
8
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>
Presentasi serupa
