PROYEK WEB HTML
UNIVERSITAS MUHAMMADIYAH SORONG
NAMA: SAMSURI SAMSUDDIN
NIM : 20156121006
KELAS : A
PRODI : MANAJEMEN 2015/2016
FAKULTAS : EKONOMI
DI TERBITKAN : 23 JUNI 2016
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.
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 :
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.
• 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)
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.
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
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.
Figur 3.4 jenis dan pengkodean “save as”
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.
Jenis kelebihan dan kelemahan
notepad
Langkah-Langkah pembuatannya
adalah sebagai berikut :
1. Dalam pembuatan file
HTML, kita harus
mengawalinya dengan tag
<HTML> dan diakhiri
dengan tag </HTML>.
• 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>.
• 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>.
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.
• 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.
• 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>.
• Hasil dari langkah 5 dan 6 akan terlihat sebagai
berikut :
• 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.
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 :
• 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.
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.

Proyek web html menggunakan notepad

  • 1.
    PROYEK WEB HTML UNIVERSITASMUHAMMADIYAH SORONG NAMA: SAMSURI SAMSUDDIN NIM : 20156121006 KELAS : A PRODI : MANAJEMEN 2015/2016 FAKULTAS : EKONOMI DI TERBITKAN : 23 JUNI 2016
  • 2.
    Mengenal HTML (hypertext 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.
  • 3.
    Sejarah dan Dasar-dasarHTML (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 :
  • 4.
    Bagian-Bagian Dari DokumenHTML • 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.
  • 5.
    • 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)
  • 6.
    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.
  • 7.
    Langkah –Langkah CaraMenyimpan 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
  • 8.
    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.
  • 9.
    Figur 3.4 jenisdan pengkodean “save as”
  • 10.
    Kelebihan dan kelemahanpengguna 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.
  • 11.
    Jenis kelebihan dankelemahan notepad
  • 12.
    Langkah-Langkah pembuatannya adalah sebagaiberikut : 1. Dalam pembuatan file HTML, kita harus mengawalinya dengan tag <HTML> dan diakhiri dengan tag </HTML>.
  • 13.
    • 2. Setelahdiawali 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>.
  • 14.
    • 3. Dalampemecahan 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>.
  • 15.
    4. Berikutnya adalah membuatbagian “tubuh” file HTML yang akan kita buat. Dalam membuat bagian ini menggunakan tag <BODY> sebagai tag pembukanya dan diakhiri dengan tag </BODY> sebagai penutupnya.
  • 16.
    • 5. Dalampemecahan 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.
  • 17.
    • 6. Kemudiandi 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>.
  • 18.
    • Hasil darilangkah 5 dan 6 akan terlihat sebagai berikut :
  • 19.
    • 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.
  • 20.
    Elemen HTML • DokumenHTML 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 :
  • 21.
    • HTML danhal-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.
  • 22.
    Mendesain HTML dapatdilakukan 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.