irwan budiman
PENGAYAAN KONTEN
WEB DRUPAL
1. HTML
2. Fitur dari Internet
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
HTML
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
 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
STRUKTUR HTML
HTML PADA DRUPAL
PENGATURAN TEXT
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
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
 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
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
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 MIRING)
Memberikan efek garis bawah pada huruf.
Format penulisan : <U> ....... </U>
Latihan
<u>GARIS BAWAH</u>
UNDERLINE (GARIS BAWAH)
Memberikan efek coretan pada teks.
Format penulisan : <STRIKE> ..... </STRIKE>
Latihan:
<STRIKE>CORET YANG TIDAK PERLU</STRIKE>
STRIKE
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
Membuat tulisan berkedip
Format penulisan: <BLINK> ........ </BLINK>
Latihan:
<BLINK>KEGIATAN PELATIHAN HTML</BLINK>
TULISAN BERKEDIP
 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
 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
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
Hyperlink digunakan untuk menghubungkan
antar halaman (page) web.
Format penulisan: <A> ........ </A>.
Latihan:
<A HREF ="http://www.google.com/" >
Click Here !!!</A>
HYPERLINK
PENOMORAN
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
 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
 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
TABEL
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
<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
PENGAYAAN KONTEN
WEB DGN FITUR
INTERNET
YOUTUBE
 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
EMBED VIDEO YOUTUBE
SLIDESHARE
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
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
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
EMBED FILE FLICKR
Irwan.run@gmail.com
SEKIAN
TERIMA KASIH

Pengayaan web

  • 1.
    irwan budiman PENGAYAAN KONTEN WEBDRUPAL 1. HTML 2. Fitur dari Internet
  • 2.
    Pembuatan Artikel Webtentang 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.
  • 4.
    HTML atau HypertextMarksup 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 HTMLmerupakan 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.
  • 7.
  • 8.
  • 9.
    Biasanya digunakan juduldan 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 Formatpenulisan : <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 untukpengaturan 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 ENTERdalam 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 cetaktebal pada huruf. Format penulisan : <B> ......... </B> Latihan: <b>HURUF TEBAL</B> BOLD (CETAK TEBAL)
  • 14.
    Memberikan efek cetakmiring pada huruf. Format penulisan : <I> ......... </I> Latihan <I>HURUF MIRING</i> ITALIC (CETAK MIRING)
  • 15.
    Memberikan efek garisbawah pada huruf. Format penulisan : <U> ....... </U> Latihan <u>GARIS BAWAH</u> UNDERLINE (GARIS BAWAH)
  • 16.
    Memberikan efek coretanpada teks. Format penulisan : <STRIKE> ..... </STRIKE> Latihan: <STRIKE>CORET YANG TIDAK PERLU</STRIKE> STRIKE
  • 17.
    Membuat garis horizontal Formatpenulisan : <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 Formatpenulisan: <BLINK> ........ </BLINK> Latihan: <BLINK>KEGIATAN PELATIHAN HTML</BLINK> TULISAN BERKEDIP
  • 19.
     Memberikan efektulisan 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 mengaturjenis, 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 untukmenghubungkan antar halaman (page) web. Format penulisan: <A> ........ </A>. Latihan: <A HREF ="http://www.google.com/" > Click Here !!!</A> HYPERLINK
  • 23.
  • 24.
    Tag <UL> Untukmembuat 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.
  • 28.
    Tabel terdiri ataskolom 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.
  • 31.
  • 32.
     1.silahkan masukke 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.
  • 34.
  • 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.
  • 37.
  • 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.
  • 40.