1. irwan budiman
PENGAYAAN KONTEN
WEB DRUPAL
1. HTML
2. Fitur dari Internet

2. Pembuatan Artikel Web tentang kegiatan
SKPD pada “BIMTEK Pembuatan Web di
Unlam”
Konten Basic Page Menggunakan Full HTML
Konten Artikel 1
Menampilkan Video Kegiatan SKPD pada Bimtek
Konten Artikel 2
Menampilkan Slide Presentasi materi Bimtek
Konten Artikel 3
Menampilkan Foto Kegiatan Bimtek
TARGET

3. HTML

4. HTML atau Hypertext Marksup Language
merupakan format yang digunakan dalam
pembuatan dokumen dan aplikasi yang
berjalan dihalaman web.
Dokumen HTML terdiri dari File Text yang
dibuat dengan berbagai elemen (unsur/dasar)
HTML. Elemen-elemen HTML didefenisikan
dengan menggunakan berbagai Tag
HTML

5.  Tag HTML merupakan tanda pada elemen HTML
 Tag HTML diapit dua buah karakter < dan >
 Biasanya terdiri dari sepasang tanda seperti <b> dan
</b>
 Tag yang pertama dari pasangan tersebut adalah
“start tag”, dan yang kedua adalah “end tag”.
 Tulisan (text) diantara start dan end tags adalah
“element content”.
 Atribut TAG sbg pengaturan detil TAG
 Tag HTML tidak mempermasalahkan huruf besar
atau kecil <b> artinya sama dengan <B>
TAG HTML

6. STRUKTUR HTML

7. HTML PADA DRUPAL

8. PENGATURAN TEXT

9. Biasanya digunakan judul dan sub judul. H1
adalah yang terbesar dan H6 yang terkecil.
Format penulisan <H1> ........ </H1>
Latihan:
<h1> Ini contoh dari sebuah heading 1</h1>
<h2> Ini contoh dari sebuah heading 2</h2>
HEADING

10. Membuat baris paragraf
Format penulisan : <P> ....... </P>
Latihan
<p>Ini sebuah paragraph baris 1.</p>
<p>Ini sebuah paragraph baris 2.</p>
<p>Ini sebuah paragraph baris 3.</p>
PARAGRAF

11.  Digunakan untuk pengaturan perataan teks
 Format penulisan: <P Align=“left”> untuk rata kiri
 Format penulisan: <P Align=“right”> untuk rata kiri
 Format penulisan: <P Align=“justify”> untuk rata kiri
 Format penulisan: <P Align=“center”> untuk rata kiri
 Latihan:
<P align=“justify”> isi content artikel </p>
ATRIBUT PARAGRAF ALIGN

12. Memberikan efek ENTER dalam pemenggalan
kalimat dalam sebuah paragraf.
Format penulisan : <BR>
Latihan:
<p>Untuk memotong <br>baris <br>dalam
sebuah <br>paragraph <br>gunakan tag br.
</p>
BREAK

13. Memberikan efek cetak tebal pada huruf.
Format penulisan : <B> ......... </B>
Latihan:
<b>HURUF TEBAL</B>
BOLD (CETAK TEBAL)

14. Memberikan efek cetak miring pada huruf.
Format penulisan : <I> ......... </I>
Latihan
<I>HURUF MIRING</i>
ITALIC (CETAK MIRING)

15. Memberikan efek garis bawah pada huruf.
Format penulisan : <U> ....... </U>
Latihan
<u>GARIS BAWAH</u>
UNDERLINE (GARIS BAWAH)

16. Memberikan efek coretan pada teks.
Format penulisan : <STRIKE> ..... </STRIKE>
Latihan:
<STRIKE>CORET YANG TIDAK PERLU</STRIKE>
STRIKE

17. Membuat garis horizontal
Format penulisan : <HR>
Format Atribut Align:
<HR align=“left”|”right”|”center”>
Format Atribut Width:
<HR width=“75%”> panjang 75%, dst...
Latihan:
<hr width=“75%” align=“left”>
GARIS HORIZONTAL

18. Membuat tulisan berkedip
Format penulisan: <BLINK> ........ </BLINK>
Latihan:
<BLINK>KEGIATAN PELATIHAN HTML</BLINK>
TULISAN BERKEDIP

19.  Memberikan efek tulisan berjalan
 Format penulisan <MARQUEE> ....... </MARQUEE>
Default: kanan ke kiri
 Atribut
Direction= “left”|”right”
Behavior= “scroll”|”slide”|”alternate”
Width=“angka%” dalam persen
Scrollamount=“angka” kecepatan
Scrolldelay=“angka” delay
Loop=“angka”
 Latihan:
 <MARQUEE>KEGIATAN PELATIHAN HTML</MARQUEE>
TULISAN BERJALAN

20.  Untuk mengatur jenis, ukuran huruf dan memberikan
warna sesuai dengan keinginan kalian.
 Format penulisan : <FONT> </FONT>
 Face: “ARIAL”, jenis huruf
 Size: “angka”, ukuran 1 sd 7
 Color: “RED”, warna
 Latihan:
<FONT FACE ="ARIAL" SIZE="5" COLOR="red">
Pengaturan Teks
</FONT>
HURUF

21. Warna Heksadesimal
White #FFFFFF
Black #000000
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
KODE WARNA
Red Green Blue
FF FF 00

22. Hyperlink digunakan untuk menghubungkan
antar halaman (page) web.
Format penulisan: <A> ........ </A>.
Latihan:
<A HREF ="http://www.google.com/" >
Click Here !!!</A>
HYPERLINK

23. PENOMORAN

24. Tag <UL> Untuk membuat daftar item dengan
tanda bullet.
Tag <LI> Untuk mendefinisikan List entries.
Atribut Type=“disc”|”square”|”circle”
Latihan:
<ul type=“disc”>SEDIA:
<li>Coffee</li>
<li>Milk</li>
</ul>
PENOMORAN DENGAN BULLET

25.  Tag <OL> digunakan untuk membuat penomoran
angka.
 Tag <LI> Untuk mendefinisikan List entries.
 Atribut Type=“I”|”1”|”i”|”A”|”a”
 Latihan:
<ol type=1>
<li>Sekolah Dasar
<li>Sekolah Lanjutan Pertama
<li>Sekolah Lanjutan Atas
</ol>
PENOMORAN DENGAN ANGKA

26.  Tag <DL> digunakan untuk mendefinisikan suatu
istilah.
 Tag <DT> digunakan untuk data Term,
 Tag <DD> digunakan untuk data Definition.
 Latihan:
<dl><dt> Bagian Pertama.
<dd> Sub Bagian Pertama.
<dt> Bagian Kedua.
<dd> Sub Bagian Kedua
</dl>
DAFTAR DEFINISI

27. TABEL

28. Tabel terdiri atas kolom dan baris
Tag <Table> membuat tabel
Format Penulisan : <TABLE> </TABLE>
Tag <TR> membuat baris.
Format Penulisan : <TR> </TR>
Tag <TD> Digunakan untuk membuat kolom.
Format Penulisan : <TD> </TD>
TABEL

29. <table border="10">
<tr> <td>Nomor</td> <td>Kabupaten/Kota</td> <td>Ibu Kota
</td></tr>
<tr> <td>1</td> <td>Kabupaten Banjar</td>
<td>Martapura</td></tr>
<tr> <td>2</td> <td>Kabupaten HSS</td> <td>Kandangan </td></tr>
<tr> <td>3</td> <td>Kabupaten HST</td> <td>Barabai</td></tr>
<tr> <td>4</td> <td>Kabupaten HSU</td> <td>Amuntai </td></tr>
<tr> <td>5</td> <td>Kabupaten Tapin</td> <td>Rantau</td></tr>
<tr> <td>6</td> <td>Kabupaten Tabalong</td> <td>Tanjung
</td></tr>
<tr> <td>7</td> <td>Kabupaten Tanah Laut
</td><td>Pelaihari</td></tr>
</table>
MEMBUAT TABEL SEDERHANA

30. PENGAYAAN KONTEN
WEB DGN FITUR
INTERNET

31. YOUTUBE

32.  1.silahkan masuk ke alamat http://www.youtube.com/
2. Jika anda sudah memiliki akun email gmail atau account
google bisa langsung menekan menu yang ada di pojok kanan
atas “sign in” dan masukkan alamat email gmail serta
password. Tapi, apabila anda tidak memiliki akun
google/gmail silahkan tekan pada menu “Create Account” di
situ anda kemudian bisa mengisi data-data anda untuk
melakukan pendaftaran menjadi member youtube.
3. jika anda sudah berhasil sign in ke youtube kemudian
temukan menu “Upload” di bagian atas sebelah kanannya
kotak pencarian. Kemudian akan dibawa ke halaman dengan
UPLOAD VIDEO DI YOUTUBE

33. EMBED VIDEO YOUTUBE

34. SLIDESHARE

35. 1. Kunjungi http://www.slideshare.net/​upload
2. Jika belum terdaftar di slideshare.net, maka klik signup
untuk mendaftar, tapi jika sudah maka ketik alamat
email/user name serta password pada tempat yang telah
disediakan lalu klik login, tunggu hingga proses download
berlangsungKlik“Browse and select files…”
3. Pilih file yang ingin di upload
4. Tunggu sampai proses upload selesai
5. Jika sudah klik “Publis” judul file anda
UPLOAD FILE DI SLIDESHARE

36. EMBED FILE SLIDESHARE

37. FLICKR

38.  1.Klik www.flickr.com. Lalu klik Create yout account .
2.Silakan sig in dengan email yahoo anda . klo misalnya anda belum
memiliki email di yahoo . silakan klik SIGN UP yang ada di bawah .
3.Isikan Nama untuk akun Flickr anda Pada Form "Choose your new
Flickr screen name" Lalu Klik "Create A New Account"
4.Setelah itu klik "Upload your first photos" Setelah itu klik lagi
"Choose Photos and videos" Kemudian pilih gambar yang ingin anda
upload .
5.Setelah anda memilih File gambar yang akan di upload Centang pada
chex Box "Public" Lalu Klik "Upload Photos and Videos". Tunggu
beberapa saat sampai file ter-upload .
6.Setelah file Ter-upload Klik "add a description" jika anda tidak
membutuhkan Description Langsung saja klik "save" yang ada di bawah
.
UPLOAD PHOTO DI FLICKR

39. EMBED FILE FLICKR

40. Irwan.run@gmail.com
SEKIAN
TERIMA KASIH