Teknik informatika: 2016

Jumat, 03 Juni 2016

tugas Desain Web(Dreamweaver)

TUGAS

DESAIN WEB(Macromedia Dreamweaver)

Sintax link home

$F:\gambar\tugas\home\1.png$

$F:\gambar\tugas\home\2.png$ $F:\gambar\tugas\home\3.png$

Hasilnya:

$F:\gambar\tugas\home\hasil home.png$

Sintax untuk link Profil

$F:\gambar\tugas\profil\4.png$

$F:\gambar\tugas\profil\5.png$

$F:\gambar\tugas\profil\6.png$

$F:\gambar\tugas\profil\7.png$

$F:\gambar\tugas\profil\hasilprofil.png$

Sintax untuk link Teknik

$F:\gambar\tugas\teknik\8.png$

$F:\gambar\tugas\teknik\9.png$

$F:\gambar\tugas\teknik\10.png$

Hasilnya:

$F:\gambar\tugas\teknik\hasilteknik.png$

Kamis, 19 Mei 2016

Tugas Desain WEB (Modul 3,4,5)

MODUL 3

MEMBUAT HEADING, BREAK DAN PARAGRAF, STYLE DOKUMEN

1. Heading

Heading sangat diperlukan dalam suatu dokumen. Karena heading disini merupakan format tertentu dalam suatu paragraph dan bisa juga dikatakan sebagai judul dari suatu paragraf.

Komponen Heading dalam HTML dimulaidengan<H1>, <H2>, <H3>, <H4>, <H5>dan<H6>. Jadi ukuran dari heading dapat diatur dengan menuliskan salah satu dari komponentersebut. Janganlupasupaya heading tidakmerambahkedokumenlainnyadiperlukan TAG penutup. Misal<H1>JUDUL</H1>

Contoh penggunaan Heading:

$D:\semester02\desain web\modul3\gambar\1.png$

2. Break

Jikamenulisdokumen yang panjangtentudiperlukanpemenggalankalimatuntukmengefisiensikannya. Dalamdokumen HTML pun berlakusama. Dalam program HTML komponenatau TAG yang diperlukanuntukmemengalataumemotongkalimat yang panjangadalah break ditulisdengan<Br>

Contoh:

$D:\semester02\desain web\modul3\gambar\2.png$

3. Paragraf

Penulisankomponenparagrafdalamdokumen HTML disingkat<p>Contoh :

$D:\semester02\desain web\modul3\gambar\3.png$

4. Mengatur Style Font

Dalammenulis style font harusdiawalidengan<Nama_Tag>danditutupdengan</Nama_Tag>

Contoh:

$D:\semester02\desain web\modul3\gambar\4.png$

5. ELEMENT FONT

Element FONT berfungsiuntukmerubahjenis, ukurandanwarnadaritampilanhuruf. Element inimempunyai attribute color untukmerubahwarnahuruf, face untukmerubahjenishuruf (jikalebihdarisatujenishuruf, harusdibatasidengankoma), dan size untukmerubahukuranhuruf (pixel).

Sintaks:

..........................

</font>Contoh:

$D:\semester02\desain web\modul3\gambar\5.png$

6. Mengenal Bullet

Ada 2 jenis bullet yaitu : Unordered List <UL>yaitumembuat bullet sajadan Ordered list <OL>, untuk

membuat bullet nomor.

Untukmembuat listharusmenggunakan<LI>

Contoh :

$D:\semester02\desain web\modul3\gambar\6.png$

MODUL 4

MEMBUAT TABEL

1. Tabel Border

Border adalah yang akanmengelilingi data dalamtabel. Denganmenggunakanperintah<Table Border>. Tabel border bisadiaturketebalannya :

Border 0 :digunakanapabilatidakmenggunakan border
Border 1 :digunakanbilamenggunakannilai border standar
Border 2 :digunakanbilaukuran border tebal.

Contoh :

$D:\semester02\desain web\modul04\gamba\1.png$

2. MengaturTabel

Align=left untukmenempatkan table disebelahkiri

Align=right untukmenempatkan table disebelahkanan

Align=center untukmenempatkan table ditengah-tengah.

Contoh: $D:\semester02\desain web\modul04\gamba\2.png$

3. WARNA

Untukmengaturwarnadalamsuatudokumenatau program HTML kode yang digunakanBGCOLOR(Background Color). Penulisanwarnabisamenggunakannilaiheksadesimal, danbiasanyaakanmenyesuaikandenganbrowsernya.

Contoh:

$D:\semester02\desain web\modul04\gamba\3.png$

MODUL 5

GAMBAR DAN ANIMASI

Dalammembangun website selainmenampilkanteks juga harusmenampilkangambar, sehinggadokumen HTML lebihkomunikatifdantidakmembosankan. Tidakhanyaitugambar yang ditampilkan pun bisabermacam-macamtergantungkebutuhan .Bahkan agar lebihmenarikgambar yang ditampilkantersebutbisadibuatbergeraksesuaikebutuhan yang dinamakandengananimasi.

1. Menampilkan gambar

Untuk menampilkan dan memasukkan gambar kedalam dokumen HTML banyak yang bias dilakukan, antara lain dengan memanfaatkan Image dengan tanda<IMG>. Dan kemudian diikuti dengan SCR(Source) dan nama gambar lengkap dengan akhirannya, seperti gambar.JPEG, Gambar.BMP, Gambar.GIF dll. Image atau gambar yang akan ditampilkan sebaiknya menggunakan perintah TABLE agar penempatannya tidak berubah-rubah. Contohpemakaian :<IMG SRC=Nama_Gambar.GIF> Format gambar yang bisa ditampilkan antara lain : JP, JPEG, GIF, PCX dll.

Sebaiknya gambar ditempat

Contoh :

$D:\semester02\desain web\modul5\gs\1.png$

2.gambar

Contoh :

<html>

<H2><Font size=+3>MenggunakanTeksdanGambar<BR></H2>

Dalamwaktudekatbuku Microsoft Office Xpakanterbit. Di

sampingitu juga akanterbitbuku Share Point Team Service yang

sayatulis.

$D:\semester02\desain web\modul5\gs\2.png$

SELESAI

Jumat, 29 April 2016

Tugas Modul2(Desain Web)

MODUL 2

( FORM + TABLE)

HTML Form

Form digunakan untuk mengumpulkan data dari pengunjung suatu website. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, form advertiser, form sitemap, bahkan untuk mengirimkan data antar halaman web. Pada tutorial belajar HTML: cara membuat form di HTML ini kita akan membahas cara penggunakan tag form di dalam HTML.

Text Field

Input yang digunakanakanberupakotak text

$D:\semester02\desain web\modul02\GAMBAR\1.png$

Password Field

Password field adalahkotak yang ketikaandamenuliskan password disitumaka huruf akan diganti dengan symbol lingkaran untuk melindungi tulisan password yang diketik.

$D:\semester02\desain web\modul02\GAMBAR\2.png$

Radio Button

Digunakanuntukmemilihinputanhanyasatupilihansaja. Contoh: Jeniskelamin

$D:\semester02\desain web\modul02\GAMBAR\3.png$

Drop Down List / Combo box

$D:\semester02\desain web\modul02\GAMBAR\4.png$

Check box

Perbedaan dengan radio button adalah dapat mencentang / memilih lebih dari satu pilihan .

$D:\semester02\desain web\modul02\GAMBAR\5.png$

Submit Button

<input type="submit">mendefinisikansebuah submit button.

$D:\semester02\desain web\modul02\GAMBAR\6.png$

Text Area

Text Areaseperti text field namun bedanya adalah text area dapat terdiri dari beberapa line/baris dan kolom

$D:\semester02\desain web\modul02\GAMBAR\7.png$

HTML Tables style

$D:\semester02\desain web\modul02\GAMBAR\8.png$

HTML Table dengan attribute Border dan Width

Penggunaan border padagambar 2.10, digunakan untuk memberi kangaris di sekitar table sedangkan style=”width 100%” menunjukkan lebar table tersebut adalah 100% darilebar pixel layar monitor yang digunakan saat membuka browser.

$D:\semester02\desain web\modul02\GAMBAR\9.png$

HTML Table dengan span row (menggabungkan beberapabaris)

Gunakan attribute rowspan = “ banyakbaris>” untuk menggabungkan beberapa baris dari tabel.

$D:\semester02\desain web\modul02\GAMBAR\10.png$

HTML Table dengan span column (menggabungkan beberapa kolom)

Gunakan attribute colspan = “ banyak kolom ” untuk menggabungkan beberapa baris dari tabel.

$D:\semester02\desain web\modul02\GAMBAR\11.png$

HTML Table dengan caption / judul

Gunakan tag caption/caption untuk membuat judul pada table Tag <caption..</caption>harusdimasukkansetelah tag <table>.

$D:\semester02\desain web\modul02\GAMBAR\12.png$

HTML Table dengan background color

Penggunaan attribute bgcolor dapat menggunakan bilangan hexa atau dengan namawarna yang sudahumumseperti “Red”, “Yellow”, Green”, “Light Green”, dan lain-lain.

$D:\semester02\desain web\modul02\GAMBAR\13.png$

Tugas Modul1(Desain Web)

MODUL 1

(BASIC ATTRIBUT + ELEMENT)

HTML

Pengertian HTML Fungsi HTML dan Contoh HTML - Apa itu HMTL ? pengertian html adalah singkatan dari Hyper Text Markup Language sebuah bahasa pemrograman yang umum digunakan untuk membuat sebuah halaman website, dimana HTML ini bisa kita gunakan untuk menginput gambar, text, audio, video dan lainnya untuk membuat sebuah website. HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. Menggunakan tag-tag tertentu untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan di web browser.