Daftar Isi Dasar-Dasar HTML Cara Membuka Notepad dan Structure Dasar HTML 1 Heading dan Cara Menyimpan dengan Ekstensi HTML 4 Basic HTML Code 6 Style 11 Formating 18
Dasar Dasar HTML Cara Membuka Notepad dan Structure Dasar HTML 1 HTML atau hyper text mark up Language merupakan jenis bahasa pemrograman untuk mengem-bangkan sebuah website. Dalam tutorial ini, menyajikan dasar-dasar membuat website menggunakan bahasa HTML dengan text editor notepad dengan sistem operasi windows. Berikut tahapan membuka notepad Klik Start Pilih All-program Pilih Accessories
2 Pilih Note Pad Tampilan Notepad Dalam tahap dasar, untuk memahami HTML. Kita harus memahami dulu structure dasar dalam HTML. Berikut structure dasar dalam HTML. :
<!doctype html> <html> <head> <title>judul</title> </head> <body> Konten Website </body> </html> 3 Kode <!doctype html> menerjemahkan tipe dokumen pada website yaitu HTML Kode <html> untuk memulai menuliskan kode HTML dan diakhiri dengan kode </html> setelah menuliskan kode HTML Kode <head> untuk memulai menuliskan informasi tentang dokumen HTML mulai dari judul, deskripsi, dan simbol dokumen (pavicon) dan sebagainya diakhiri dengan kode </head> Kode <title> untuk menegaskan judul dokumen HTML dan diakhiri dengan kode </title> Kode <body> untuk memulai menuliskan konten website diakhiri dengan kode </body>
Dasar Dasar HTML Heading dan Cara Menyimpan dengan Ekstensi HTML (Sebagai File HTML ) 4 Dalam HTML ada kode khusus untuk judul dari sebuah artikel. Kode tersebut adalah <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Didalam penulisan kode harus terdapat pembuka kode dan penutup kode. Misalkan untuk kode heading. Diawal kode dibuka dengan kode <h1> dan ditutup dengan kode </h1>. Contoh Simpan dengan mengklik file lalu save Langkah selanjutnya klik tanda segitiga pada save as type lalu klik all file
Beri nama file dengan menambahkan ekstensi html. Contoh : contohkodeheading.html 5 Klik save dan buka file yag sudah dibuat
Dasar Dasar HTML Basic HTML Code (Heading, Paragraphs,Image,Link) 6 Heading Didalam HTML terdapat fasilitas untuk menuliskan judul yang disebut heading. Heading terdapat 6 tingkatan dari yang paling besar yaitu H1 dan yang paling kecil H6. Untuk mengetahui tingkatan heading, silahkan buka note pad dan tuliskan kode berikut : <h1> heading 1 </h1> <br> <h2> heading2 </h2> <br> <h3> heading3 </h3> <br> <h4> heading4 </h4> <br> <h5> heading5 </h5> <br> <h6> heading6 </h6> <br> Tampilan pada note pad Save dengan ekstensi html Tampilan pada browser
Paragraphs 7 Dalam membuat website tentunya membutuhkan kumpulan kalimat untuk menyajika informasi kepada pengunjung website. Kode untuk membuat paragraphs ada dua kode yaitu : <p> dan <pre>. Kode <p> memungkinkan kita menyusun kalimat didalam website yang membutuhkan kode <br> untuk membuat kalimat turun kebawah. Sedangkan, kode <pre> tidak membutuhkan kode <br> untuk menurunkan kalimat kebawah karena kode <pre> menampilkan kalimat sesuai dengan yang ditulis pada text editor. Untuk lebih jelasnya tuliskan kode berikut pada notepad <p> ini contoh kalimat satu ini contoh kalimat dua <br> ini contoh kalimat tiga <br><br> Ini contoh kalimat empat <br><br><br> ini contoh kalimat lima </p> <pre> ini contoh kalimat enam ini contoh kalimat enam Ini contoh kalimat tujuh Ini contoh kalimat delapan Ini contoh kalimat sembilan </pre> Tampilan pada note pad : Save sebagai file HTML
8 Tampilan pada browser : Image Gambar sangat penting sebagai media penyampai pesan. Untuk menyisipkan gambar pada halaman HTML gunakan kode <img src = nama gambar.ekstensi file gambar > contoh : Kami menggunakan gambar berikut : Dengan nama dan ekstensi : contohgambar.png
Contoh kode : <img src= contohgambar.png > 9 Tampilan pada note : Tampilan pada browser : Link Untuk membuat link pada halaman HTML gunakan kode : <a href = url yang dituju > link </a> Atau <a href = halaman yang dituju > link </a>
Contoh kode : 10 <a href = http://carabikinwebsite.com > link ini menuju www.carabikinwebsite.com </a> <br> <a href = sampelcodegambar.html > link ini menuju ke halaman sampelcodegambar.html </a> Tampilan pada notepad : Tampilan pada browser :
Dasar Dasar HTML Style 11 Style merupakan fasilitas kode untuk memberikan sentuhan gaya pada hasil pemrograman seperti mewarnai huruf atau text, mewarnai background, memilih gaya font atau font family, mengatur ukuran huruf dan mengatur align (rata tengah/rata kiri/rata kanan/rata kiri kanan) pada text. Penulisan kode style = < kode + style = property : value > Berikut jenis property dan value yang bisa digunakan dalam style HTML Property Background - color Color Font-family Font-size Text-align Value Warna untuk background websit Warna Jenis Huruf Ukuran huruf aligment Penggunaan Property Style Background-color Untuk property background color bisa berlaku untuk mewarnai background website secara keseluruhan atau bagian tertentu dari website. Untuk mewarnai background website secara keseluruhan, masukkan property background color pada tag atau kode <body>. Contoh : <body style= background color : red > Ini contoh mewarnai background </body> Tampilan pada notepad
Tampilan pada browser : 12 Untuk mewarnai bagian tertentu pada website, kita bisa memasukkan property style pada tag <div> contoh : <div style = background-color:red > Ini bagian yang backgroundnya berwarna merah </div> <div style = background-color:blue > Ini bagian yang backgroundnya berwarna biru </div> Tampilan pada notepad :
Tampilan pada browser : 13 Color Untuk property color bisa berlaku untuk mewarnai tag atau kode pada html contoh : <h1 style = color:blue > Ini diwarnai biru </h1> <p style= color:red > Ini diwarnai merah </p> Tampilan pada notepad :
Tampilan pada browser : 14 Font-Family Property font-family digunakan untuk memilih penggunaan jenis huruf. Contoh : <p style= font-family:times new roman > Ini menggunakan jenis huruf times new roman </p> <p style= font-family:monotype corsiva > Ini menggunakan jenis huruf monotype corsiva </p> Tampilan pada notepad :
Tampilan pada browser : 15 Font-size Property font-size digunakan untuk mengatur ukuran huruf pada text. Contoh : <p style = font-size : 28 > Ini menggunakan ukuran 28 </p> <p style = font-size : 14 > Ini menggunakan ukuran 14 </p> Tampilan pada notepad :
Tampilan pada browser : 16 Text-align Property text-align digunakan untuk mengatur aligment pada website. Contoh <p style = text-align:left > Kalimat ini rata kiri </p> <p style = text-align:right > Kalimat ini rata kanan </p> <p style = text-align:center > Kalimat ini rata tengah </p> <p style = text-align:justify > Kalimat ini rata kanan-kiri Kalimat ini rata kanan-kiri Kalimat ini rata kanan-kiri Kalimat ini rata kanan-kiri Kalimat ini rata kanan-kiri Kalimat ini rata kanan-kiri Kalimat ini rata kanan-kiri </p>
Tampilan pada notepad : 17 Tampilan pada browser :
Dasar Dasar HTML Formating 18 Formating Untuk menyajikan sebuah informasi dalam media website, dibutuhkan formating seperti untuk menebalkan text, memiringkan text, menandai text dan lain sebagainya. Dalam bahasa HTML terdapat fasilitas tag atau perintah formating sebagai berikut : Tag Formating <b> dan <strong> <em> dan <i> <small> <sub> <sup> <ins> <del> <mark> Keterangan Menebalkan huruf Memiringkan huruf Mengecilkan huruf Subscript Superscript Menyisipkan huruf atau menggaris bawahi Menghapus Huruf Menandai huruf Menebalkan Huruf Penebalan huruf biasanya digunakan untuk menadai kata-kata yang ditekankan dalam kalimat. Untuk menebalkan huruf didalam bahasa HTML digunakan tag <b> (bold) atau <strong>. Contoh : <b> ditebalkan dengan tag bold </b> <strong> ditebalkan dengan tag strong </strong> Tampilan pada notepad :
Tampilan pada browser : 19 Memiringkan Huruf Memiringkan huruf dalam html bisa menggunakan tag <em> (emphasized) atau <i> (italic). Contoh : <em> dimiringkan dengan emphasized </em> <br> <i> dimiringkan dengan italic </i> Tampilan pada notepad
Tampilan pada browser : 20 Mengecilkan Huruf Untuk mengecilkan huruf menggunakan tag <small>. Contoh Ini normal <small> dikecilkan </small> Tampilan pada browser :
Subscript dan Superscript 21 Contoh Kode : Normal text <sub> ini subscript </sub> Normal text <sup> ini superscript </sup> Tampilan pada notepad Tampilan pada browser : Menyisipkan, menghapus, menandai huruf Contoh kode : <ins> ini menyisipakan atau menggaris bawahi huruf </ins> <br> <del> menghapus huruf </del> <br> <mark> menandai huruf </mark>
Tampilan pada notepad : 22 Tampilan pada browser :