Proyek web html menggunakan notepad

22
PROYEK WEB HTML UNIVERSITAS MUHAMMADIYAH SORONG NAMA: SAMSURI SAMSUDDIN NIM : 20156121006 KELAS : A PRODI : MANAJEMEN 2015/2016 FAKULTAS : EKONOMI DI TERBITKAN : 23 JUNI 2016

Transcript of Proyek web html menggunakan notepad

Page 1: Proyek web html menggunakan notepad

PROYEK WEB HTML

UNIVERSITAS MUHAMMADIYAH SORONG

NAMA: SAMSURI SAMSUDDIN

NIM : 20156121006

KELAS : A

PRODI : MANAJEMEN 2015/2016

FAKULTAS : EKONOMI

DI TERBITKAN : 23 JUNI 2016

Page 2: Proyek web html menggunakan notepad

 Mengenal HTML (hyper text mark up language)

• HTML merupakan singkatan dari hyper text mark up language yang berfungsi untuk menampilkan informasi yang akan kita tampilkan ke dalam website atau halaman web kita. HTML dapat menampilkan informasi dalam bentuk hyper text.

Page 3: Proyek web html menggunakan notepad

Sejarah dan Dasar-dasar HTML (Hypertext Markup Language) menurut kevin claudio

• HTML  (Hypertext  Markup  Language)  merupakan bahasa  yang  digunakan  untuk  membuat  website. Menggunakan  tag untuk mendeklarasikan  sesuatu dan  tag  tersebut  tidak  ditampilkan  tetapi  tag tersebut  memberi  tahu  browser  bagaimana  cara menampilkan dokumen website. Serta dapat saling berhubungan  dengan  dokumen  HTML  lain  yang dikenal dengan istilah link, dan diantaranya yaitu :

Page 4: Proyek web html menggunakan notepad

Bagian-Bagian Dari Dokumen HTML

• Dokumen Html terdiri atas 2 bagian. Bagian “kepala” memberikan informasi mengenal peranti lunak browser (penjelajah)web. 

• Bagian “tubuh” memberitahukan apa yang akan dilihat oleh pengguna di layar. Informasi pada bagian kepala mencangkup judul halaman web. Judul ini ditampilkan paling atas pada baris biru di browser web. Kata kunci yang akan berguna dalam pencarian web. 

Page 5: Proyek web html menggunakan notepad

• Dan bagian “tubuh” berisikan bagian yang sebagian besar orang kira merupakan halaman web, gambar,tabel,daftar,dan link. Pada bagian tubuh tertulis perintah-perintah Html. (yang diwakili kata-kata dalam kurung). Serta teks dan gambar yang akan ditampilkan dalam web. Dan tersedia Html yang berguna.2k Comunications memberikan serangkaian tutorial dan intruksi Html.(www.2kweb.net/html tutorial), w3Schools(www.w3SCHOOLS.COM/HTML) 

Page 6: Proyek web html menggunakan notepad

Membuat Dokumen Notepad

• Mulailah mem dan buka notepad dan membuat dokumen notepad. 

• Klik perintah “start” dan pilihlah sub perintah “Programs”, maka program notepad akan muncul dalam daftar.

• Atau mengklik subperintah “Accessories” sebelum pilihan notepad muncul. 

Page 7: Proyek web html menggunakan notepad

Langkah –Langkah Cara Menyimpan Doc.HTML

• a. Klik Start-Program-Accessoris-Notepad• b. Setelah berada pada editor notepad lengkapi

struktur umum HTML yang ada di jawaban soal no 3

• c. simpan file tersebut dengan cara, klik menu File-Save as (pada kolom file name beri nama file, sedangkan pada kolom save as type cari dan klik all file)-save

• d. untuk membukanya, aktifkan internet explorer lalu tekan tombol F5 pada keyboard

Page 8: Proyek web html menggunakan notepad

Melihat halaman web • Setelah halaman web disimpan, anda dapat

melihatnya untuk memeriksa apakah halaman tersebut bekerja dengan baik. Dan tidak perlu menutup program notepad. Bukalah browser web dan pilihlah subperintah “file” diikuti subperintah “open”ketikan nama “file” untuk menemukan klik OK.maka halaman web anda akan muncul pada browser lain.

Page 9: Proyek web html menggunakan notepad

Figur 3.4 jenis dan pengkodean “save as”

Page 10: Proyek web html menggunakan notepad

Kelebihan dan kelemahan pengguna notepad

• Kelemahan membuat halaman web dengan editor teks seperti notepad adalah keharusan untuk mempelajari perintah-perintah HTML dan proses pembuatan kode HTML. Meskipun sederhana pengkodean di notepad memakan banyak waktu. Tetapi ada dua keuntungan membuat kode notepad yaitu kode yang dibuat efesien, dan manajer dapat lebih memahami bagaimana halaman web bekerja. 

Page 11: Proyek web html menggunakan notepad

Jenis kelebihan dan kelemahan notepad

Page 12: Proyek web html menggunakan notepad

Langkah-Langkah pembuatannya adalah sebagai berikut :

1.  Dalam  pembuatan  file HTML,  kita  harus mengawalinya  dengan  tag <HTML>  dan  diakhiri dengan tag </HTML>.

Page 13: Proyek web html menggunakan notepad

• 2.  Setelah  diawali  dengan  tag  <HTML>,  lalu  kita tuliskan tag <HEAD> yang mana tag  ini menandakan bahwa  teks  beserta  tag-tag  pengaturannya  yang berada didalam tag <HEAD>  ini akan menjadi bagian “kepala”  dari  file  HTML  yang  akan  kita  buat.  Dan jangan  lupa  tag  <HEAD>  ini  diakhiri  dengan  tag </HEAD>.

Page 14: Proyek web html menggunakan notepad

• 3. Dalam pemecahan masalah yang saya buat disini, didalam  tag  <HEAD>   letakkan  tag  <TITLE>  yang berguna menampilkan nama homepage atau apapun teks  yang  kita  letakkan  didalam  tag  <TITLE> ini sehingga  akan  terlihat  di  bagian  Titlebar  browser sebagai berikut :

• Dan  jangan  lupa  mengakhiri  tag  ini  dengan  tag </TITLE>.

Page 15: Proyek web html menggunakan notepad

4.  Berikutnya  adalah membuat  bagian  “tubuh”  file HTML  yang  akan  kita  buat. Dalam  membuat  bagian  ini menggunakan  tag  <BODY> sebagai  tag  pembukanya  dan diakhiri  dengan  tag  </BODY> sebagai penutupnya.

Page 16: Proyek web html menggunakan notepad

• 5. Dalam pemecahan masalah yang saya buat disini, didalam  tag  <BODY> saya  gunakan  tag  <P>  yang berguna  untuk  pembuatan  paragraph.  Dalam container  tag  <P> ini  saya  letakkan  komentar  untuk pengaturan perataan paragraph yaitu tag ALIGN dan diikuti  dengan  “CENTER”  sebagai  pengaturannya untuk perataan tengah.

Page 17: Proyek web html menggunakan notepad

• 6.  Kemudian  di  dalam  tag  <P>    juga  menambahkan  tag <FONT> untuk pengaturan font dan saya menambahkan komentar yang berupa tag FACE untuk mengatur bentuk font  yang  diinginkan  dan  diikuti  dengan  “TAHOMA” sebagai bentuk huruf yang sesuai dengan masalah. Lalu ketik teks yang akan kita tampilkan dalam homepage kita setelah  tag  <FONT> dan  diakhiri  dengan  tag  </FONT> dan saya tambah tag <B> sebelum dan sesudah teks tadi saya  tambah  tag  </B>  agar  teks  tersebut  tertampil dengan  berhuruf  tebal  (bold).  Tag  <P> yang  saya  tulis diawal tadi harus juga diakhiri dengan tag </P>.

Page 18: Proyek web html menggunakan notepad

• Hasil dari langkah 5 dan 6 akan terlihat sebagai berikut :

Page 19: Proyek web html menggunakan notepad

• Catatan Penting :• Dalam  mengetikan  nama  file  HTML  anda,  harus 

menggunakan  huruf  kecil  dan  jangan  menggunakan spasi.

• Jika  ada  kata  terpisah  dalam  memberi  nama  file, sebaiknya menggunakan tanda strip ,atau strip bawah 

• Setiap membuat halaman Web pertama kali, simpanlah file tersebut dengan nama “index.html” selanjutnya bisa memakai  nama  lain  sesuai  keinginan  anda  seperti “about-me.html” atau “contact_us.html”.

• Sebaiknya gunakan  Notpad,  karena akan memudahkan anda  meng  Edit  lebih  cepat  tag-tag  HTML  daripada Notepad biasa. 

Page 20: Proyek web html menggunakan notepad

Elemen HTML

• Dokumen  HTML  disusun  oleh  elemen-elemen  atau komponen  dasar  HTML.  Untuk  menandai  berbagai elemen  dalam  suatu  dokumen  HTML,  digunakan  tag. Tag  adalah  kode  yang  digunakan  untuk  me-mark-up (memoles) teks ASCII. Setiap tag memiliki  fungsi sendiri dan  selalu  diawali  dengan  tanda  '<'  diakhiri  dengan tanda  '>'.  Pada  umumnya  sebuah  tag  mempunyai pasangan penutup, gunanya agar teks ASCII yang dipoles dapat  diketahui  batas-batasnya.  Tag  penutup  selalu diawali  dengan  tanda  ''.  Format  penulisannya  adalah sebagai berikut :

Page 21: Proyek web html menggunakan notepad

• HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan proposal mengenai starndarisasi web dapat dilihat di http://www.w3.org. Standar untuk HTML terbaru adalah HTML 4.0 yang telah didukung oleh bermacam-macam browser seperti Microsoft Internet Explorer, NetsHTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic.

Page 22: Proyek web html menggunakan notepad

Mendesain HTML dapat dilakukan dengan dua cara:

– 1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Kalian juga dapat menggunakan Editor NotePad yang telah tersedia di windows komputer kalian.

– 2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.