irwan budimanPENGAYAAN KONTENWEB DRUPAL1. HTML2. Fitur dari Internet
Pembuatan Artikel Web tentang kegiatanSKPD pada “BIMTEK Pembuatan Web diUnlam”Konten Basic Page Menggunakan Full HTMLKo...
HTML
HTML atau Hypertext Marksup Languagemerupakan format yang digunakan dalampembuatan dokumen dan aplikasi yangberjalan diha...
 Tag HTML merupakan tanda pada elemen HTML Tag HTML diapit dua buah karakter < dan > Biasanya terdiri dari sepasang tan...
STRUKTUR HTML
HTML PADA DRUPAL
PENGATURAN TEXT
Biasanya digunakan judul dan sub judul. H1adalah yang terbesar dan H6 yang terkecil.Format penulisan <H1> ........ </H1>...
Membuat baris paragrafFormat penulisan : <P> ....... </P>Latihan<p>Ini sebuah paragraph baris 1.</p><p>Ini sebuah parag...
 Digunakan untuk pengaturan perataan teks Format penulisan: <P Align=“left”> untuk rata kiri Format penulisan: <P Align...
Memberikan efek ENTER dalam pemenggalankalimat dalam sebuah paragraf.Format penulisan : <BR>Latihan:<p>Untuk memotong <...
Memberikan efek cetak tebal pada huruf.Format penulisan : <B> ......... </B>Latihan:<b>HURUF TEBAL</B>BOLD (CETAK TEBAL)
Memberikan efek cetak miring pada huruf.Format penulisan : <I> ......... </I>Latihan<I>HURUF MIRING</i>ITALIC (CETAK MI...
Memberikan efek garis bawah pada huruf.Format penulisan : <U> ....... </U>Latihan<u>GARIS BAWAH</u>UNDERLINE (GARIS BAW...
Memberikan efek coretan pada teks.Format penulisan : <STRIKE> ..... </STRIKE>Latihan:<STRIKE>CORET YANG TIDAK PERLU</ST...
Membuat garis horizontalFormat penulisan : <HR>Format Atribut Align:<HR align=“left”|”right”|”center”>Format Atribut W...
Membuat tulisan berkedipFormat penulisan: <BLINK> ........ </BLINK>Latihan:<BLINK>KEGIATAN PELATIHAN HTML</BLINK>TULISA...
 Memberikan efek tulisan berjalan Format penulisan <MARQUEE> ....... </MARQUEE>Default: kanan ke kiri AtributDirection=...
 Untuk mengatur jenis, ukuran huruf dan memberikanwarna sesuai dengan keinginan kalian. Format penulisan : <FONT> </FONT...
Warna HeksadesimalWhite #FFFFFFBlack #000000Red #FF0000Green #00FF00Blue #0000FFMagenta #FF00FFCyan #00FFFFYellow #FFFF00K...
Hyperlink digunakan untuk menghubungkanantar halaman (page) web.Format penulisan: <A> ........ </A>.Latihan:<A HREF ="h...
PENOMORAN
Tag <UL> Untuk membuat daftar item dengantanda bullet.Tag <LI> Untuk mendefinisikan List entries.Atribut Type=“disc”|”s...
 Tag <OL> digunakan untuk membuat penomoranangka. Tag <LI> Untuk mendefinisikan List entries. Atribut Type=“I”|”1”|”i”|...
 Tag <DL> digunakan untuk mendefinisikan suatuistilah. Tag <DT> digunakan untuk data Term, Tag <DD> digunakan untuk dat...
TABEL
Tabel terdiri atas kolom dan barisTag <Table> membuat tabelFormat Penulisan : <TABLE> </TABLE>Tag <TR> membuat baris....
<table border="10"><tr> <td>Nomor</td> <td>Kabupaten/Kota</td> <td>Ibu Kota</td></tr><tr> <td>1</td> <td>Kabupaten Banjar<...
PENGAYAAN KONTENWEB DGN FITURINTERNET
YOUTUBE
 1.silahkan masuk ke alamat http://www.youtube.com/2. Jika anda sudah memiliki akun email gmail atau accountgoogle bisa l...
EMBED VIDEO YOUTUBE
SLIDESHARE
1. Kunjungi http://www.slideshare.net/​upload2. Jika belum terdaftar di slideshare.net, maka klik signupuntuk mendaftar, t...
EMBED FILE SLIDESHARE
FLICKR
 1.Klik www.flickr.com. Lalu klik Create yout account .2.Silakan sig in dengan email yahoo anda . klo misalnya anda belum...
EMBED FILE FLICKR
Irwan.run@gmail.comSEKIANTERIMA KASIH
Upcoming SlideShare
Loading in...5
×

Pengayaan web

221

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
221
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pengayaan web

  1. 1. irwan budimanPENGAYAAN KONTENWEB DRUPAL1. HTML2. Fitur dari Internet
  2. 2. Pembuatan Artikel Web tentang kegiatanSKPD pada “BIMTEK Pembuatan Web diUnlam”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 BimtekTARGET
  3. 3. HTML
  4. 4. HTML atau Hypertext Marksup Languagemerupakan format yang digunakan dalampembuatan dokumen dan aplikasi yangberjalan dihalaman web.Dokumen HTML terdiri dari File Text yangdibuat dengan berbagai elemen (unsur/dasar)HTML. Elemen-elemen HTML didefenisikandengan menggunakan berbagai TagHTML
  5. 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 besaratau kecil <b> artinya sama dengan <B>TAG HTML
  6. 6. STRUKTUR HTML
  7. 7. HTML PADA DRUPAL
  8. 8. PENGATURAN TEXT
  9. 9. Biasanya digunakan judul dan sub judul. H1adalah 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. 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. 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. 12. Memberikan efek ENTER dalam pemenggalankalimat dalam sebuah paragraf.Format penulisan : <BR>Latihan:<p>Untuk memotong <br>baris <br>dalamsebuah <br>paragraph <br>gunakan tag br.</p>BREAK
  13. 13. Memberikan efek cetak tebal pada huruf.Format penulisan : <B> ......... </B>Latihan:<b>HURUF TEBAL</B>BOLD (CETAK TEBAL)
  14. 14. Memberikan efek cetak miring pada huruf.Format penulisan : <I> ......... </I>Latihan<I>HURUF MIRING</i>ITALIC (CETAK MIRING)
  15. 15. Memberikan efek garis bawah pada huruf.Format penulisan : <U> ....... </U>Latihan<u>GARIS BAWAH</u>UNDERLINE (GARIS BAWAH)
  16. 16. Memberikan efek coretan pada teks.Format penulisan : <STRIKE> ..... </STRIKE>Latihan:<STRIKE>CORET YANG TIDAK PERLU</STRIKE>STRIKE
  17. 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. 18. Membuat tulisan berkedipFormat penulisan: <BLINK> ........ </BLINK>Latihan:<BLINK>KEGIATAN PELATIHAN HTML</BLINK>TULISAN BERKEDIP
  19. 19.  Memberikan efek tulisan berjalan Format penulisan <MARQUEE> ....... </MARQUEE>Default: kanan ke kiri AtributDirection= “left”|”right”Behavior= “scroll”|”slide”|”alternate”Width=“angka%” dalam persenScrollamount=“angka” kecepatanScrolldelay=“angka” delayLoop=“angka” Latihan: <MARQUEE>KEGIATAN PELATIHAN HTML</MARQUEE>TULISAN BERJALAN
  20. 20.  Untuk mengatur jenis, ukuran huruf dan memberikanwarna 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. 21. Warna HeksadesimalWhite #FFFFFFBlack #000000Red #FF0000Green #00FF00Blue #0000FFMagenta #FF00FFCyan #00FFFFYellow #FFFF00KODE WARNARed Green BlueFF FF 00
  22. 22. Hyperlink digunakan untuk menghubungkanantar halaman (page) web.Format penulisan: <A> ........ </A>.Latihan:<A HREF ="http://www.google.com/" >Click Here !!!</A>HYPERLINK
  23. 23. PENOMORAN
  24. 24. Tag <UL> Untuk membuat daftar item dengantanda 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. 25.  Tag <OL> digunakan untuk membuat penomoranangka. 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. 26.  Tag <DL> digunakan untuk mendefinisikan suatuistilah. 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. 27. TABEL
  28. 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. 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. 30. PENGAYAAN KONTENWEB DGN FITURINTERNET
  31. 31. YOUTUBE
  32. 32.  1.silahkan masuk ke alamat http://www.youtube.com/2. Jika anda sudah memiliki akun email gmail atau accountgoogle bisa langsung menekan menu yang ada di pojok kananatas “sign in” dan masukkan alamat email gmail sertapassword. Tapi, apabila anda tidak memiliki akungoogle/gmail silahkan tekan pada menu “Create Account” disitu anda kemudian bisa mengisi data-data anda untukmelakukan pendaftaran menjadi member youtube.3. jika anda sudah berhasil sign in ke youtube kemudiantemukan menu “Upload” di bagian atas sebelah kanannyakotak pencarian. Kemudian akan dibawa ke halaman denganUPLOAD VIDEO DI YOUTUBE
  33. 33. EMBED VIDEO YOUTUBE
  34. 34. SLIDESHARE
  35. 35. 1. Kunjungi http://www.slideshare.net/​upload2. Jika belum terdaftar di slideshare.net, maka klik signupuntuk mendaftar, tapi jika sudah maka ketik alamatemail/user name serta password pada tempat yang telahdisediakan lalu klik login, tunggu hingga proses downloadberlangsungKlik“Browse and select files…”3. Pilih file yang ingin di upload4. Tunggu sampai proses upload selesai5. Jika sudah klik “Publis” judul file andaUPLOAD FILE DI SLIDESHARE
  36. 36. EMBED FILE SLIDESHARE
  37. 37. FLICKR
  38. 38.  1.Klik www.flickr.com. Lalu klik Create yout account .2.Silakan sig in dengan email yahoo anda . klo misalnya anda belummemiliki email di yahoo . silakan klik SIGN UP yang ada di bawah .3.Isikan Nama untuk akun Flickr anda Pada Form "Choose your newFlickr 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 andaupload .5.Setelah anda memilih File gambar yang akan di upload Centang padachex Box "Public" Lalu Klik "Upload Photos and Videos". Tunggubeberapa saat sampai file ter-upload .6.Setelah file Ter-upload Klik "add a description" jika anda tidakmembutuhkan Description Langsung saja klik "save" yang ada di bawah.UPLOAD PHOTO DI FLICKR
  39. 39. EMBED FILE FLICKR
  40. 40. Irwan.run@gmail.comSEKIANTERIMA KASIH
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×