Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

Oleh: Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN.

Presentasi serupa


Presentasi berjudul: "Oleh: Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN."— Transcript presentasi:

1 Oleh: Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN

2 HTML FONT (Cascading Style Sheet)  Untuk membuat html fonts lebih baik kita menggunakan “style” atau yang lebih dikenal dengan css (Cascading Style Sheet)  CSS dapat di tambahkan kedalam tag html dengan cara berikut: Dalam elemen di bagian HTML Dalam style attribut dalam elemen HTML

3 1. Mengatur font teks Contoh ini menunjukkan bagaimana cara untuk mengatur font pada teks. This is a heading This is a paragraph.

4 2. Mengatur ukuran teks Contoh ini menunjukkan bagaimana untuk mengatur ukuran font pada teks. This is a heading This is a paragraph.

5 3. Mengatur warna teks Contoh ini menunjukkan bagaimana cara untuk mengatur warna pada teks. This is a heading This is a paragraph.

6 4. Mengatur background warna pada teks Contoh ini menunjukkan bagaimana cara untuk mengatur background warna pada teks. This is a heading This is a paragraph.

7 5. Mengatur posisi pada text Contoh ini menunjukkan bagaimana cara untuk mengatur background warna pada teks. Center-aligned heading This is a paragraph.

8 6. Mengatur background warna pada seluruh halaman web Contoh ini menunjukkan bagaimana cara untuk mengatur background warna pada halaman web. This is a heading This is a paragraph.

9 7. Menggabungkan seluruh style (font, size, color, background color, align) Contoh ini menunjukkan bagaimana cara untuk mengatur jenis teks, ukuran teks, background teks, posisi teks, dan background warna pada halaman web.

10 Look! Styles and colors This text is in Verdana and red and right This text is in Times and green and background blue This text is 30 pixels high

11 Contoh: Tulisan disini akan berjalan 8. Membuat tulisan berjalan dengan menggunakan marquee

12 Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah : bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks direction="left/right/up/down" » Mengatur arah gerakan teks

13 behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan Scroll » teks bergerak berputar Slide » teks bergerak sekali lalu berhenti Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik ) title="pesan" » Pesan akan muncul saat mouse berada di atas teks

14 scrollmount="angka“ » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya. scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik loop="angka|-1|infinite" » Mengatur jumlah loop width="lebar" » Mengatur lebar blok teks dalam pixel atau persen

15 HTML LIST  List merupakan bentuk umum yang biasa kita gunakan untuk membuat daftar sesuatu  List bisa berupa nomor, atau tanpa nomor, angka, huruf romawi, bentuk dan lain-lain

16 1. (Ordered List)  Ordered list / List memberikan nomor secara umum dimulai dengan menggunakan 1,2,3..., dst sampai dengan sejumlah item dalam list tersebut  Angka-angka tersebut bisa secara otomatis di munculkan oleh browser (yang membuatnya mudah dalam penulis)

17 Contoh: daftar pertama daftar kedua daftar ketiga daftar keempat

18 Attribute for TYPE = 1 | A | a | I | i  Atribut “type” pada berfungi untuk menampilkan list dengan berbagai macam bentuk, seperti I,II,III i,ii,iii A,B,C a,b,c 1,2,3,

19 contoh turn left on maple street turn right on clover court turn left on maple street turn right on clover court turn left on maple street turn right on clover court turn left on maple street turn right on clover court turn left on maple street turn right on clover court

20 Attribute for START = integer  Atribut “start” pada berfungi untuk mendefinisikan nomor awal yang akan digunakan pada ordered list  Contoh: mulai no lima 5 no 6 no 7

21 2. (Unordered List)  Unordered list sering disebut sebagai bulleted list, mempunyai bullet default berupa noktah.  jenis bullet tersebut dapat diubah dengan menggunakan atribut type seperti pada ordered list

22 contoh sistem bilangan: Biner Desimal Hexsadesimal

23 Attribute for TYPE = DISC | CIRCLE | SQUARE  Atribut “type” pada berfungi untuk menampilkan list dengan berbagai macam bentuk, seperti DISC (lingkaran bulat penuh) CIRCLE(lingkaran kosong) SQUARE (kotak)

24 contoh coffee tea lemonade coffee tea lemonade coffee tea lemonade

25 3. (Definition List)  Definition list digunakan untuk membuat suatu list atau urutan  Terdapat tag Definition Term dan Definition Description

26 contoh mary so what's going on tonight? dawn let's play some music jason cool man, let's jam!

27 HTML IMAGES  Gambar di dalam suatu web page merupakan sebuah daya tarik bagi pengunjung suat web site  Setiap gambar akan membutuhkan waktu tambahan untuk di download dan memperlambat penampilan suatu dokumen dalam browser. Karenanya hati-hatilah memilih gambar dan menyertakannya ke dalam suatu dokumen.

28  Cara yang termudah untuk meletakkan gambar ke suatu halaman html adalah dengan menaruh gambar yang bersangkutan ke dalam suatu folder dengan file html di luar folder gambar kemudian dipanggil melalui tag

29 Tag dan Atributnya  Tag merupakan singkatan dari IMAGE untuk menampilkan gambar pada HTML kita. Tag memiliki beberapa atribut antara lain:  SRC  WIDTH & HEIGHT  ALIGN  ALT  BORDER

30 Atribut – Atribut IMG  SRC merupakan singkatan dari SOURCE yang dalam bahasa Indonesia berarti sumber. Atribut ini berfungsi untuk memberi tahu dimana letak dari sumber gambar yang ingin ditampilkan. Sumber gambar dapat diambil dari komputer sendiri maupun dari sumber yang ada di internet.

31 ALT Atribut ini digunakan untuk memberikan keterangan tambahan dari gambar. ALT merupakan kepanjangan dari ALTERNATIVE. WIDTH & HEIGHT Atribut ini digunakan untuk menentukan ukuran dari gambar, width (lebar) height (tinggi) ALIGN Atribut ini digunakan untuk menentukan posisi dari gambar BORDER Atribut ini digunakan untuk menambahkan border pada gambar

32 CONTOH 

33

34 Membuat backround web menggunakan gambar web background images


Download ppt "Oleh: Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN."

Presentasi serupa


Iklan oleh Google