MAKALAH APLIKASI IT

MAKALAH APLIKASI IT

Diajukan untuk memenuhi salah satu tugas mata kuliah

Aplikasi IT tentang web menggunakan Css dan Html

Disusun Oleh:

Nama:

1.Edwin Aulia Nugraha/10112696

2.Kristo Lamhot Siallagan/10112687

3. Jujur Soaloon Sitanggang/10112672

FAKULTAS TEKNIK DAN ILMU KOMPUTER

UNIVERSITAS UNIKOM INDONESIA

2012/2013

KATA PENGANTAR

Dengan nama Allah yang maha pengasih dan maha penyayang. Segala puji dan syukur bagi Allah  yang dengan ridho-Nya kita dapat menyelesaikan makalah ini dengan baik dan lancar. Sholawat dan salam tetap kami haturkan kepada junjungan kita Nabi besar Muhammad saw dan untuk para keluarga, sahabat dan pengikut-pengikutnya yang setia mendampingi beliau. Terima kasih kepada keluarga teman-teman dan yang terlibat dalam pembuatan makalah ini yang dengan do'a dan bimbingannya makalah ini dapat terselesaikan dengan lancar.

Dalam makalah ini, kami menguraikan tentang ”Membuat web dengan menggunakan Css dan Html” yang kami ambil dari berbagai sumber, diantaranya buku dan internet. Makalah ini diharapkan bisa menambah wawasan dan pengetahuan yang selama ini kita cari. Kami berharap bisa dimafaatkan semaksimal mugkin.

Tidak ada gading yang tak retak, demikian pula makalah ini, oleh karena itu saran dan kritik yang membangun tetap kami nantikan dan kami harapkan demi kesempurnaan makalah ini.

   

Bandung, Januari 2013

Penyusun

DAFTAR ISI

KATA PENGANTAR     i

DAFTAR ISI    ii

DAFTAR GAMBAR    iii

BAB I PENDAHULUAN    1

1.1 Pendahuluan    1

1.2 Latar Belakang    1

1.3 Maksud dan Tujuan    2

1.3.1 Maksud    2

1.3.2 Tujuan    2

1.4 Rumusan / Batasan Masalah    3

BAB II LANDASAN TEORI    4

2.1 Menu    4

2.2 HTML (Hyper Text Markup languange)    4

2.2.1 HTML Secara Umum    4

2.2.2 HTML Secara Khusus    5

2.3 CSS  (Cassading style sheet)    5

2.3.1 CSS Secara Umum    5

2.3.2 CSS Secara Khusus    6

BAB III IMPLEMENTASI    7

3.1 Hasil Web Site    7

3.2 Penggunaan Syntax HTML    7

3.3 Penggunaan Syntax CSS    12

BAB IV PENUTUP    15

4.1 Kesimpulan    15

4.2 Penutup………………………………………………………………………...15    

DAFTAR GAMBAR

Gambar 3.1 Tampilan Home    10

Gambar 3.2 Tampilan Menu    11

Gambar 3.3 Tampilan Menu Home Sebelum Diklik    11

Gambar 3.4 Tampilan Menu Home Setelah Diklik    12

Gambar 3.5 Tampilan Bagian Menu jika #nav-v li Tidak di gunakan    13

BAB I

PENDAHULUAN

1.1     Pendahuluan

Dewasa ini,penggunaan website sebagai salah satu media penyampain informasi sudah sedemikian luasnya.Biaya yang murah, kemudahan akses dan efesiensi menjadi salah satu alasan semakin luasnya penggunaan website tersebut. Kebutuhan akan sebuah informasi juga menjadi salah satu faktor pendorong perkembangan website.

Sebagai salah satu organisasi yang bersifat nasional,segala informasi  yang berhubungan dengan website menyediakan berbagai media yang mungkin untuk memenuhi kebutuhan akan informasi mengenai website.Dengan alasan tersebut, maka dikembangkanlah sebuah website yang bertujuan sebagai media penyampaian informasi mengenai segala sesuatu yang erhubungan dengan website. Diharapkan dengan adanya website ini masyarakat akan semakin mengenal siapa itu website berikut sepak terjangnya.

Selain sebagai media informasi,website website juga bertujuan menjadi salah satu media komunikasi bagi anggota-anggotanya. website yang bersifat  nasional,tentunya memiliki anggota-anggota dari berbagai pelosok daerah.tentunya dengan hambatan berupa jarak dan waktu,menyebabkan terhambatnya komunikasi.Diharapkan dengan adanya website website,hambatan komunikassi tersebut dapat diatasi.

Saat ini,website website telah dilauncing.untuk menjelaskan bagaimana penggunaan dan pengoperasian dari website website.

1.2     Latar Belakang   

Era intenet yang berkembang kian pesat telah melahirkan sebuah tutunan terhadap penguasaan dalam pembuatan css dan html. Sebuah html maupun css menarik dan interaktif dapat digunakan sebagai salah satu cara meningkatkan sebuah web site. Banyak bahasa yang digunakan untuk membangun web site antaralain adalah HTML,CSS,JavaScrip,dan XML.Maka dari itu penulis membuat web untuk memudahkan dalam membuat web site tanpa harus membuat di content.banyak orang yang membuat web site dengan tidak memerhatikan desain dari web sitenya tersebut dan terkadang web site tersebut tidak berfungsi sebagai mestinya yang dibutuhkan oleh sipembuat website,karena banyaknya content yang harus diketik,maka dari itu css dapat mempersingkat penulisan content tersebut.

1.3    Maksud dan Tujuan

    1.3.1 Maksud

Maksud dibuatnya web menggunakan Css dan Html ini adalah

• Sebagai salah satu syarat untuk memenuhi tugas besar yang diberikan bapak erik wijaya. S.kom
• Sebagai salah satu tahap syarat untuk lulus semester dua
• Untuk memperoleh pengetahuan tentang web yang dibuat dengan menggunakan Css dan Html.

2. Tujuan

   Selama membuat tugas besar web menggunakan Css dan Html ini memiliki tujuan sebagai berikut:                                                                                                         

• Meningkatkan dan memperluaskan pendidikan dibidang teknologi dan informasi khususnya Web site
• Memberi pengalaman nyata dalam membuat Web menggunakan Css dan Html
• Melatih kemampuan berfikir dalam mendesain sebuah Web

1.4          Rumusan / Batasan Masalah

• Bagaimana agar web site yang akan kita buat berfungsi sesuai dengan yang kita inginkan?
• Bagaimana membuat suatu menu itu beraturan?
• Bagaimana agar menu tersebut dapat berfungsi sesuai dengan yang kita inginkan?
• Bagaimana agar web site tersbut terlihat bagus dan mempunyai desain yang menarik ?

BAB II

LANDASAN TEORI

2.1     Menu

    Menu adalah serangkaian pilihan-pilihan yang dapat di klik atau dipilih unutuk melakukan tugas tertentu.

    Menu dan elemen - elemen menu :

• Menu Bar : baris menu utama yang terletak dibagian atas suatu aplikasi.menu utama ini mengandung pilihan pilihan menu.
• Pilihan Menu : pilihan menu yang dapat dipilih oleh user.
• Submenu : pilihan menu didalam menu.
• Superator : garis pemisah antara menu.
• Tanda Cek : symbol yang menendakan menu tersebut sedang dipilih.
• Shortcut : tombol kombinasi yang dapat ditekan pada keyboard untuk menjalankan perintah menu.

   

2.2     HTML (Hyper Text Markup Languange)

    2.2.1 HTML Secara Umum

Salah satu elemen teknologi informasi ialah perangkat lunak yang mendukung operasi perangkat keras computer. Secara umum HTML (Hyper Text Markup languange)  yaitu untuk memanipulasi browser sehingga dapat dibaca oleh pengguna computer.Tampilan tersebut dilakukan melalui tag-tag yang ditulis dalam HTML. Dengan demikian browser akan menghasilkan tampilan yang sesuai dengan perintah-perintah yang sudah dibuat atau ditetapkan terlebih dahulu. Fungsi utama Html adalah memberi perintah kepada browser untuk melakukan manipulasi tampilan melalui tag – tag yang di tulis dalam Html dengan demikian browser akan menghasilkan tampilan yang sesuai dengan perintah – perintah yang sudah di buat atau di terapkan terlebih dahulu. Untuk menuliskan suatu dokumen Html dapat di gunakan perangkat lunak sederhana atau pun yang khusus , di antaranya adalah :

• Note pad
• Dreamweaver
• Ultraedit , dll.

Setelah menulliskan dokumen tersebut di atas lakukan perintah save as dengan nama dan .HTML dan pada bagian perintah save as types pilih all files.

2.2.2 HTML Secara Khusus

Format Html yang kami buat dalam website ini yaitu:

<html>

    <head>

    <title>

    </title>

    </head>

<body>

</body>

</html>

Keterangan :

• <Html> sebagai tag pembuka pada html
• <HTML> sampai  dengan </HEAD> disebut sebagai bagian pertama.
• Antara <BODY> sampai dengan </HTML> disebut sebagai bagian kedua atau isi.

2.3     CSS  (Cassading Style Sheet)

2.3.1 CSS Secara Umum

Secara umum CSS (Cassading style sheet) adalah standard pembuatan dan pemakaian style untuk dokumen terstuktur,CSS digunakan untuk mempersingkat tag HTML dan menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. Css juga digunakan untuk mengatur tampilan suatu website, baik letaknya, jenis huruf, warna dan semua yang berhubungan dengan tampilan. Sebagai ilustrasi bahwa HTML diibaratkan adalah orang dan CSS yang membuat orang tersebut menjadi tampil cantik atau tampan dengan menggunakan pakaian yang bagus, perhiasan, make-up dan sebagainya. CSS dapat diimplementasikan dalam 3 cara yaitu :

• Inline Style yaitu menjadi atribut dalam tag HTML, atributnya adalah style. Cara pendefinisian property dan nilainya adalah sebagai berikut :

• Internal Style Sheet atau Embed Style yaitu berada di dalam tag <HEAD> yakni untuk CSS didefinisikan sebagai berikut :

• External Style Sheet yaitu style CSS berada terpisah pada sebuah file .CSS sedangkan untuk pemanggilannya dalam dokumen HTML yang akan menggunakannya dilakukan dengan cara :

2.3.2 CSS Secara Khusus

Css didalam adalah sebagai pengatur warna dan tampilan agar website terlihat lebih bagus dan dalam website yang kami buat ini yang lebih di tonjolkan adalah desain website dan image,dalam css ini kami juga membuat aturan penggunaan css seperti selector,property dan lain sebagainya.

BAB III

IMPLEMENTASI

3.1    Hasil Web Site

Sesuai dengan Tugas yang di berikan oleh Bapak yaitu membuat web menggunakan Css , maka hasil kerja tidak dapat di lihat dalam makalah ini , karena menggunakan alat komputerisai dan hanya dapat di lihat dalam computer makalah ini hanya menjelaskan secara teori saja, maka dari itu kami juga melaporkan web dalam bentuk CD . Sehingga dapat di lihat secara detail dan keseluruhan dalam web site sederhana ini .

3.2    Penggunaan Syntax HTML

Dalam pembuatan sebuah web ini kami menggunakan tag Html sebagai berikut :

<html>     Diawali dengan pembuka yaitu html.

<head>    Berfungsi untuk menulisakan keterangan tentang web yang akan di tampilkan.

<title>saroha</title>                       yaitu judul dari web site tersebut dan tanda / adalah sebagai penutup.

Fungsi <link rel="stylesheet" href=”isi yang akan dipanggil” >untuk memangil sebuah Css yang telah di buat.

</head>                       tanda / adalah sebagai penutup head

<body>                      Merupakan section utama dalam dokumen web dan semua isi dokumen akan ditampilkan didalam browser.

<table border="1" width="1000">                         untuk menebalkan table

<tr>

   <td colspan="3" width="1000" height=100 align="center" background="sipiso-piso.jpg">            untuk menampilkan gambar

<font size=16 face="DigifaceWide" Color="00FF00">APLIKASI IT</font>

</tr> _                untuk menampilkan kata “APLIKASI IT” dengan warna hijau muda.

<tr>   

   <td colspan="3" width="1000" height="30" align="center" bgcolor="grey">

 <center>  

 <font face="gabriola" color="#00FF00">            untuk menentukan jenis huruf.

 <div id="nav-h">               Untuk nge-Link ke tab lain.

   <a href="aplikasi1.html">Home </a>

   <a href="aplikasi2.html"> Pengenalan <i>HTML</i> </a>

   <a href="aplikasi3.html"> Dasar-dasar <i>HTML</i></a>

   <a href="aplikasi4.html"> Menyisipkan Gambar Dan Link</a>

   <a href="aplikasi5.html"> Membuat Tabel Pada <i>HTML</i></a>

            Sebagai isi dari link Tab.

 </font>                         / tag penutup font

 </div>

 </center>  

   </td>

</tr>

<tr>

   <td width=200 height=400 valign="top" bgcolor="black"><font face="gabriola">            Sebagai  warna huruf

   <div id="nav-v">                Sebagai Nge-ngelink ke tab lain

       

Sebagai isi dari link Tab.Dan telah mempunyai isinya masing-masing,ini akan dipanggil sehingga dapat ditampilkan menjadi menu.

   

    </div> <font face="Old English Text MT" color="red" size="8"><center>H<br>A<br>N<br>D<br></font><font color="white">of</font><font face="Old English Text MT" color="red" size="8"><br>G<br>O<br>D<br></font>

     </td>

   <td height=400 valign="top" bgcolor="00FF00">

<font face="Gabriola" size="4"><h1>Pengenalan<i> HTML</i></h1> <hr width="700" align="left"><img src="html.jpg" width="150" align="left">

        Sebagai ukuran huruf,warna dan gambar pada awal dari teks.

(Pendahuluan secara umum internet merupakan suatu jaringan komputer yang terdiri dari berbagai macam ukuran jaringan komputer diseluruh dunia mulai dari sebuah PC, jaringan lokal skala kecil,jaringan skala menengah,hingga jaringan utama yang menjadi backbound internet. Cara agar dapat mengakses internet adalah dengan menggunakan browser, yaitu software atau perangkat lunak yang digunakan untuk menampilkan hamalan-halaman web yang berada di internet. Salah satu elemen dari internet yang paling populer,cepat berkembang dan selalu digunakan oleh browser adalah WWW(word wide web).WWW bekerja berdasarkan 3 mekanisme,yaitu : -Protokol –Address –HTML Pengenalan HTML Hyper Text Markup Languange(HTML) adalah bahasa pengkodean yang digunakan untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di WWW atau menampilkan sebuah halaman dokumen web. HTML terlihat seperti bahasa pengkodean lama, yang diawali dan diakhiri dengan command-command HTML dimana menunjukkan bagaimana keluarannya pada saat dijalankan pada sebuah web browser. Yang membedakan dokumen HTML dengan dokumen-dokumen lainnya adalah adanya elemen HTML yang disebut  juga dengan  Command HTML dan biasa disebut dengan TAG yang digunakan untuk menentukan tampilan dari dokumen HTML. Setiap dokumen HTML diawali dan diakhiri denga tag HTML.)                     Ini adalah isi dari body

</pre></font><hr width="600"></td>            sebagai tag penutup.

Bagaimana Menurut Anda Web Ini?

<input type="radio" name="saroha"> Sangat Bagus

<input type="radio" name="saroha"> Bagus

<input type="radio" name="saroha"> Cukup

<input type="radio" name="saroha"> Kurang Bagus

<input type="radio" name="saroha"> Sangat Buruk

<input type="submit" name="Kirim" Value="Kirim"> <input type="reset" name="batal" value="Cancel">           radio untuk menentukan suatu pilihan dari teks yang kita ingingkan.

<hr><img src="apple.jpg" width="120">                Untuk memunculkan gambar dengan lebar 120.

<hr><img src="apple.jpg" width="120">

</pre></font>

<hr></td>

</tr>

<tr>

   <td colspan="3" width="1000" height="20" align="center" bgcolor="00FF00"> <marquee behavior="alternate"> <img src="w1.png"><img src="w2.png"><img src="w3.png"><img src="w4.png"><img src="w5.png"><img src="w6.png"><img src="w7.png"><img src="w8.png"><img src="w9.png"><img src="w10.png"><img src="w11.png"><img src="w12.png"><img src="w13.png"><img src="w14.png"><img src="w15.png"></marquee></td>               Untuk memunculkan gambar bergerak.</tr>

</table>   

</body>

</html>                  Sebagai tag penutup akhir dari tag Html.

Dari sintak diatas maka akan muncul gambar seperti dibawah ini.

Gambar 3.1 Tampilan Home

Untuk tampilan menu syntak nya adalah sebagai berikut :

   

Dari tag diatas akan menampilkan gambar seperti dibawah ini,

Gambar 3.2 Tampilan Menu

Seperti yang telah di jelaska sebelumnya fungsi dari <a href= “nama.html” yaitu untuk mengelink ke halaman atau conten yang berbeda . Maka jika mengeklik menu Home, dsb akan pindah ke halaman yang berbeda dari sebelumnya dan akan berubah warna tulisan / menu jika saat di klik .Sebagai  contoh

Gambar 3.3 Tampilan Menu Home Sebelum Diklik

Gambar 3.4 Tampilan Menu Home Setelah Diklik

3.3    Penggunaan Syntax CSS

Dalam syntak web yang kami buat diatas CSS yang di gunakan adalah sebagai berikut:

<style type="text/css">           sebagai alamat CSS,jika diperlukan dapat di panggil dengan menggunakan sintak

#nav-v {            Untuk Tab baru sebagai Nge-Link ke tab lain

       width: 150px;         Sebagai memperbesar ukuran sesuai dengan yang kita butuhkan         font-family:gabriola;

       }

#nav-v ul{             Untuk Tab baru sebagai Nge-Link ke tab lain

list-style:none;

margin: 0;        sebagai pengatur (rata tengah,kiri,maupun tengah)

padding:0;

}

 #nav-v li {

border-bottom:1px solid #ED9F9F;             Mempertebal tulisan dan warna tulisan

padding-top:5px;

}

#nav-v li a:link, #nav-v li a:visited {

display: block;

padding:5px 5px 5px 0.5em;

border-left: 12px solid #FF8040;             tebal rata kiri

border-right: 12px solid #FF8040;               tebal rata kanan

background-color: #940732;            sebagai warna background

color: #FFFFFF;           sebagai warna dari tampilan

text-decoration:none; }

#nav-v li a:hover { Untuk Tab baru sebagai Nge-Link ke tab lain

background-color: #00FF00;

color: #FF0000;

font-weight:bold;

}        Sebagai background dan warna font dari tulisan

</style>         sebagai tag penutup dari css

Syntak ini lah yang kami buat menggunakan Css untuk membangun sebuah website tersebut ,

jika : #nav-v li  dihilangkan,maka tab untuk nge-link tidak akan berfungsi sesuai dengan yang kita butuhkan,seperti yang terlihat pada gambar yang ditunjuk oleh pointer tersebut tidak akan berfungsi lagi sesuai fungsinya.

Gambar 3.5 Tampilan Bagian Menu jika #nav-v li Tidak di gunakan

Maka menu dari CSS tersebut tidak dapat di klik sebagai mana fungsinya Oleh karena itu tag  #nav-v li  dibutuhkan agar dapat nge link atau pun nge tab pada tab  menu lain .

Demikianlah syntax CSS yang kami buat dalam membangun sebuah web site sederhana ini dengan berbagai keterangan yang telah di jelaskan beserta fungsi – fungsinya semoga dapat dipahami dan bermanfaat untuk suatu pembelajaran mengenai web . Kelebihan menggunakan CSS ini yaitu jika suatu saat nanti syntax tersebut di butuhkan lagi , kita tidak perlu lagi membuat syntax CSS dari awal kita hanya tinggal memanggil alamat CSS yang telah di buat .  

BAB IV

KESIMPULAN DAN PENUTUP

4.1    Kesimpulan

    Dari isi makalah ini maka dapat di simpulkan bahwa tidak semua orang dapat membuat sebuah web, maka dibuatlah    pembelajaran membuat web sederhana dengan menggunakan tag HTML, dan CSS , seiring dengan perkembangan teknologi maka web pun dapat di buat dan di miliki secara pribadi dengan mudah dan tidak perlu megeluarkan biaya untuk mendisain sebuah web yaitu dengan menggunakan web template atau wordpress, bloger dan lain sebagainya.Sehingga User hanya memilih theme yang di inginkan dan mengedit sebagian yang diperlukan saja , jadi user tidak perlu repot dalam membuat web site dan tidak perlu membuat disain untuk web tersebut karena semua sudah di sediakan di dalamnya .

4.2    Penutup

Demikian yang dapat kami paparkan mengenai materi yang menjadi pokok bahasan dalam makalah ini, tentunya masih banyak kekurangan dan kelemahannya, kerena terbatasnya pengetahuan dan kurangnya rujukan atau referensi yang ada hubungannya dengan judul makalah ini.
Penulis banyak berharap para pembaca yang budiman dapat memberikan kritik dan saran yang membangun kepada penulis demi sempurnanya makalah ini dan dan penulisan makalah di kesempatan-kesempatan berikutnya. Semoga makalah ini berguna bagi penulis pada khususnya juga para pembaca yang budiman pada umumnya.