Wednesday, 29 June 2016

Tutorial HTML Lengkap : Dasar-Dasar HTML



STRUKTUR HTML
CungukBlogger~Di  setiap  perbuatan  khususnya  perbuatan  yang  dilakukan  oleh  manusia  pasti  selalu memiliki suatu  aturanbaik  peraturan  tertulis  maupun  yang  tidak  tertulis,  dimana  aturan  inilah  yang mengatur manusia akan seperti apakah nanti perbuatan itu dilakukan, seperti apa yang terjadi jika aturan  itu diikuti dan apa yang akan terjadi jika  peraturan  dilanggar. Dan  tentunya  peraturan ini diciptakan oleh sang ahli.

Begitu  pula  dengan  bahasa  pemrogaman  internet  HTML. Terdapat  peraturan  terstruktur  yang harus  diikuti  guna menghasilkan  suatu  tampilan  berikut  konten si websiteitu  sendiri. Dan  akan aneh bahkan tidak tampil sama sekali dalam browser jika struktur HTML ini tidak diikuti.Strukturdari HTML adalah sebagai berikut :
<html>
<head>
<title>Judul</title>
</head>
<body>
...Isi halaman web...
</body>
</html>

Tag HTML
Untuk  memprentasikan  halaman  web  dalam  hal  ini  html  maka  perlu  adanya  induk  tag, dan  <html> ini berlaku sebagai induk tag yang mana tag html ini harus diletakan pada awal document dan begitu juga tag html penutup yang diletakkan diakhir document.
<html>
... halaman web ...
</html>

Tag Head
Head atau “<head>” biasanya digunakan oleh title dari sebuah website. Dan seringkali digunakan untuk menempatkan deklarasi awal script-script bahasa lain, seperti javascript misalnya. Fungsi-fungsinya diletakkan disini, dan implementasi dari fungsi tersebut ditempatkan pada tag <body>. Selain  itu  kebanyakan  juga  digunakan  untuk  meletakkan  meta  tag.  Yang  mana meta  tag  ini berfungsi  untuk memberikan  informasi  berkenaan  dengan  halaman  web  tersebut. Contohnya seperti :
<meta http-equiv="CONTENT-LANGUAGE" content="EN-US">
Yang  digunakan  untuk  memberikan informasi  mengenai  bahasa  apa  yang  digunakan  dalam  web tersebut.Yang biasanya tag-tag ini dibaca oleh bot-bot yang merecord web/situs kita di internet. Contoh penggunaanya kira-kira seperti ini  :
<html>
<head>
<title>Title atau judul dari website anda</title>
</head>...halaman web...</html>

Tag Body
Digunakan sebagai inti dari halaman web, seperti tampilan website, kemudian content yang berisi link, images, text, video, dan banyak lagi.
<html>
<head>
<title>Title atau judul dari website anda</title>
</head>
<body>...halaman web...</body>
</html>

Title, Berikan Gambaran web anda melalui Judul/Title
Setiap   halaman   website   membutuhkan   judul/title,   dimana   judul   ini   yang   berfungsi   untuk memberikan gambaran dari isi halaman sebuah website. Sebagai contoh :
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<h1><font color="red">Selamat datang di Rustan5797</font></h1>
</body>
</html>



Dan  perlu  dicatat,  sebuah  halaman  website  hanya  dapat  menyimpan  satu  title. Title ini  hanya dapat menyimpan  informasi berbentuk plain text/text biasa,  dan  tidak dapat menyimpan  gambar ataupun dari tipe file yang lain.

Buat Headline dengan menggunakan Tag Heading
Heading biasanya digunakan dalam headline konten web maupun judul dari artikel. Terdapat
beberapa ukuran heading dan size paling besar biasanya menggunakan <h1>.
<h1>Heading ukuran h1</h1>
<h2>Heading ukuran h2</h2>
<h3>Heading ukuran h3</h3>
<h4>Heading ukuran h4</h4>

Membuat Kalimat dengan paragraph“ <p>”
Tidak dapat dipungkiri jika penggunaan paragraph itu diperlukan dalam memperindah konten dari suatu web disamping memisahkan paragraph yang satu dengan yang lain dimana didalamnya terdapat informasi yang saling melengkapi.
Penggunaan paragraph dalam html cukup dengan menggunakan “<p>” sebagai pembuka dan “</p>” sebagai penutupnya dimana satu pasang <p></p> dianggap sebagai satu paragraph.
Contoh :
<p> Dimana ada kemauan disitu ada jalan. Begitulah kata pepatah yang memang benar-benar
mempengaruhi banyak orang dalam mewujudkan cita-citanya. Begitupun seorang Nicholas Copernicus disalah satu kata-kata bijaknya. 99 % menentukan keberhasilan dari usaha adalah kemauan dan kerja keras, 1 % -nya bakat.</p>
<p>Kegagalan bukanlah akhir dari suatu kehidupan, justru dengan kegagalanlah seseorang menjadi advanced dalam medan tempur yang dihadapi. Hadapi masalah, kemudian cari solusi, lalu selesaikan.</p>
Lists dan More list, Berikan penomoran untuk konten situs Dalam aplikasi wordprocessing, List anda More List ini  dikenal dengan Bullet and Numbering.
Contoh list :
Contoh buah-buahan yang termasuk kedalam vitamin C :
·         Mangga
·         Pisang
·         Jeruk

Dalam html dapat dijabarkan sebagai berikut :
<p> Contoh buah-buahan yang termasuk kedalam vitamin C : </p>
<ul>
<li>Mangga</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>



Numbered Lists
Jika lists itu adalah bullet dalam html, maka Numbered Lists adalah numbering dalam html. Contoh Numbered Lists:
<p>Cara Membuat Telur Matasapi :</p>
<ol>
<li>Beli Telurnya.</li>
<li>Panaskan kompornya</li>
<li>Siapkan Minyak dalam penggorengan.</li>
<li>Masak telurnya</li>
</ol>



Di numbered lists ini tag <ol> memiliki sebuah sub tag yang dapat didefinisikan sesuai dengan yang anda butuhkan. Diantaranya :
"1" mewakili 1, 2, 3, 4, dan seterusnya
"a" mewakili a, b, c, d, dan seterusnya
"A" mewakili A, B, C, D, dan seterusnya
"i" mewakili i, ii, iii, iv, dan seterusnya
"I" mewakili I, II, III, IV, dan seterusnya

Contoh :
<p>Nama-nama bulan : </p>
<ol type="1" start="3">
<li>Maret</li>
<li>April</li>
<li>Mei</li>
<li>Juni</li>
<li>Juli</li>
<li>Agustus</li>
</ol>



Comments, Gunakan Komentar untuk menjelaskan struktur kode-kode html. Penggunaan komentar terkadang perlu untuk menggambarkan alur-alur mengenai kode yang berkaitan. Hal ini akan memudahkan jika nanti akan dilakukan perubahan mengenai kode-kode yang ada. Komentar ini tidak akan ditampilkan dalam browser, tapi kedudukan dalam kode html tetap ada. Contoh penggunaan komentar :
<!--Ini adalah komentar-->

0 comments

Post a Comment