Sebelum membahas contoh HTML, ada baiknya anda membaca pengertian html. Bahasa HTML pada umumnya diawali dengan <> dan diakhiri dengan </>. Contohnya; untuk membuat huruf bergaris bawah digunakan kode: dan diakhriri dengan kode . Jadi ketika kita menulis tulisan dibawah ini di HTML editor;
Saya sedang menulis contoh html untuk tugas kuliah teknologi informasi
maka yang muncul di browserinternet adalah;
Saya sedang menulis contoh html untuk tugas kuliah teknologi informasi
Contoh HTML dasar
Kode HTML dasar yang digunakan untuk membuat sebuah halaman website adalah sebagai berikut:
Meskipun secara umum sebuah kode html memerlukan kode pembuka dan kode penutup, namun ada pula beberapa contoh HTML yang tidak memerlukan pembuka dan penutup. Contoh HTML tesebut antara lain;
untuk membuat baris baru
sebuah paragraf yang ditulis dalam bahasa html, ketika tidak di beri tanda
maka tulisan tersebut akan tampil memanjang ke kanan dalam 1 baris. Ini tentu berbeda dengan tulisan di Microsoft word yang cukup menekan tombol enter dan baris baru akan terbentuk.
untuk membuat horizontal rule atau garis horizontal
Garis horizontal biasanya digunakan untuk memisahkan antara pembahasan bagian atas dengan penjelasan bagian bawah pada sebuah artikel.
Contoh HTML yang kangmoes bahas diatas adalah semacam menu pembuka bagi anda yang ingin sama-sama belajar tentang HTML. Pembahsan selanjutnya, mungkin kangujang akan membahas contoh HTML yang lebih kompleks, tapi kangujang ga janji ya:)?
Nama saya Ivan Kharisma, Saya lahir di
Sleman, Yogyakarta pada tanggal 30 April 1993
Saat ini saya sedang menempuh studi S1 di
STMIK AMIKOM YOGYAKARTA
Oke cukup sekian dan terimakasih...
alhamdulilah tugas saya selesai.. hehehe... :D
. Tulisan
yang saya blok bewarna biru diatas adalah kode HTML untuk memanggil file CSS
nya,, style.css bisa anda ganti dengan
nama file css yang anda buat, misalkan anda menyimpan file css dengan nama bosengaptek.css maka pemanggilanya menjadi
seperti ini bosengaptek.css" />
2.
adalah pemanggil ID header yang akan kita
buat nanti di file CSS nya.
3.
adalah pemanggil style CSS nya untuk memberikan effect/gaya
pada menu li (home,link 1,link 2,link
3).
4. untuk
yang bewarna merah silahkan diganti
sesuka hati anda ^_^
1. #header adalah style CSS yang akan saya panggil
pada kode HTML tadi. disini saya menggunakan #header untuk memanggil gambar dan mengatur panjang lebar nya.
2.#top-navigation adalah style CSS yang
saya gunakan untuk mengatur warna background dan panjang lebar nya background li
(home,link 1,link 2,link 3).
3. #top-navigation
li adalah style CSS yang saya gunakan untuk mengatur dan memasukan li (home,link
1,link 2,link 3) kenapa disitu saya tulis display:inline; ?karena saya akan
memasukan tulisan (home,link 1,link 2,link 3) kedalam style CSS background #top-navigation
yang telah saya buat pada langkah nomor 2 diatas.
4. a:hover
adalah style CSS untuk membuat effect pada tulisan li (home,link
1,link 2,link 3), kenapa disitu saya tulis color:white; font-size:20px;, agar waktu tulisan li
terkena cursor mouse, warna tulisan tersebut akan berubah menjadi putih dan
ukuran tulisan akan menjadi 20px.
5.
AMIKOM.png adalah gambar yang telah saya buat, dan akan saya masukan sebagai
background pada bagian header.
Gimana saudara-saudara ? memang rada ribet sih, saran saya sebaiknya anda
pahami dulu pengertian dari langkah-langkah yang saya tulis diatas.
Jika semua kode HTML & CSS sudah ditulis dengan benar (anda juga bisa
copy paste kode HTML dan CSS diatas ganti file.png nya dengan gambar anda),
simpan semua file HTML,CSS dan image nya dalam satu folder
seperti pada gambar dibawah ini :
Jika sudah, silahkan coba jalankan file html nya. INGAT !!! format
penyimpanan kode HTML = .html dan untuk CSS = .css .
Jika tampilan tidak seperti pada gambar "Contoh WEB saya", maka kemungkinan ada
kesalahan penulisan pada kode CSS nya, coba cek dengan lebih teliti
lagi.
Pada menu li (link 1,link 2,link 3) disitu masih kosong, dan untuk
membuatnya kita tinggal copy paste saja file HTML nya menjadi 3 file. karena
pada kode HTML tadi saya menulis seperti pada gambar dibawah ini :
maka ubahlah nama ketiga file tersebut menjadi 1.html, 2.html, 3.html. sehingga
didalam 1 folder terdapat 6 file (4 html,1 css dan 1 file image.jpg/png)
seperti gambar dibawah ini :
Kemudian ubahlah paragraf tiap file
html nya. pada gambar "Contoh WEB saya", file 3.html nyasaya tulis paragraf sebagai berikut :
Nama saya Ivan Kharisma, Saya lahir di Sleman, Yogyakarta
pada tanggal 30 April 1993
Saat ini saya sedang menempuh studi S1 di
STMIK AMIKOM YOGYAKARTA
Oke cukup sekian dan terimakasih...
alhamdulilah tugas saya selesai.. hehehe... :D
maka anda
bisa merubah paragraf file index.html, 1.html, 2.html, sesuka hati anda, cara
merubahnya, jalankan pada browser 1 per 1 file html nya >> klik kanan
>> View page source, kemudian copy dan paste kode nya di notepad, ubah
paragrafnya, dan simpan kembali dengan nama yang sama...
A.
World Wide Web (WWW) Internet
merupakan jaringan global yang menghubungkan suatu network dengan network
lainya di seluruh dunia, TCP/IP menjadi protokol penghubung antara
jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi
secara global. World
Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan
paling populer. WWW bekerja berdasar pada tiga mekanisme berikut:
•
Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer
networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW. •
Address WWW memiliki aturan penamaan alamat web yaitu URL (Uniform Resource
Locator) yang di gunakan sebagai standard alamat internet. Nah sudah tahu apa
itu URL? saya dulu juga tidak tahu. • HTML
digunakan untuk membuat document yang bisa di akses melalui web. Jadi blog,
website, dan forum semuanya itu merupakan dokumen HTML.
B.
Pengenalan HTML HTML
adalah singkatan dari Hypertext Markup Language yang merupakan standar bahasa
yang di gunakan untuk menampilkan dokumen web, yang bisa anda lakukan dengan
HTML seperti dibawah ini:
•
Mengontrol tampilan dari web page dan contentnya. •
Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh
dunia. •
Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi
secara online. Ini yang memperlancar bisnis online •
Menambahkan object-object seperti image, audio, video dan juga java applet
dalam document HTML. Untuk ngeblog ini akan mempercantik blog.
C.
Browser dan Editor •
Browser Browser
merupakan software yang di install di mesin client (komputer klien) yang
berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang
sering di gunakan biasanya mozilla firefox, opera, Internet Explorer, Netscape
Navigator dan masih banyak yang lainya.
•
Editor Program
yang di gunakan untuk membuat document HTML, ada banyak aplikasi HTML editor
yang bisa anda gunakan membuat dokumen HTML diantaranya: Microsoft FrontPage,
Dreamweaver, Notepad.
Nah
kali ini cukup pengenalan dulu, karena namanya juga tutorial HTML lengkap 1
jadi ya pengenalan, kalau yang ke 2 dan seterusnya akan dibahas tag-tag dan
kode-kode disertai contoh latihan.
HTML adalah, (HyperText Markup Language) sebuah bahasa standar yang digunakan oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. HTMLjuga dapat digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.
Baca juga Pestingan HTML Lanjutan
Sebelum membahas contoh HTML, ada baiknya anda membaca pengertian html. Bahasa HTML pada umumnya diawali dengan <> dan diakhiri dengan </>. Contohnya; untuk membuat huruf bergaris bawah digunakan kode: dan diakhriri dengan kode . Jadi ketika kita menulis tulisan dibawah ini di HTML editor;
