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
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
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
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
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
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
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
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
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