Pengertian HTML Fungsi HTML dan Contoh HTML - Apa itu HMTL ? pengertian html adalah singkatan dari Hyper Text Markup Language sebuah bahasa pemrograman yang umum digunakan untuk membuat sebuah halaman website, dimana HTML ini bisa kita gunakan untuk menginput gambar, text, audio, video dan lainnya untuk membuat sebuah website. HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. Menggunakan tag-tag tertentu untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan di web browser.

HTML hingga saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 CERN adalah lembaga penelitian fisika energi tinggi di Jenewa

Fungsi HTML

Fungsi dari HTML adalah digunakan untuk membuat sebuah halaman website dan juga menampilkan berbagai informasi yang di inputkan ke dalam html tersebut seperti gambar, teks, video, dan lainnya sehingga bisa di tempilkan melalui web browser. Selian itu HTML juga bisa digunakan untuk membuat sebuah link yang nantinya menuju ke sebuah halaman website lainnya dengan kode tertentu.

Contoh HTML

setelah mempelajari pengertian, sejarah dan fungsi dari html, selanjutnya adalah mempelajari contoh bahasa HTML yang bisa digunakan untuk membuat sebuah website. Dan dibawah ini merupakan salah satu contoh dasar HTML yang digunakan untuk membuat sebuah website sederhana

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<body bgcolor="red">

<h1>Saya Sedang Belajar HTML</h1>

<center>

<font size="13" color="black" face="arial">

<p>Membuat HTML Itu Mudah Lo</p>

<b>HTML adalah Hyper Text Markup Leanguage</b>

<i>Dan Fungsi HTML itu adalah Untuk menginput Text, Gambar, Audio, Video</i>

<u>Itu semua mudah jika anda serius mempelajarinya :)</u>

</font>

<br>

<marquee>

<img src="gambar.jpg atau memasukan URL gambar"> //* Satukan File HTML dengan gambar yg anda masukan agar dapat dibaca

</marquee>

</center>

</body>

</html>

Keterangan :

<html> : Untuk memulai sebuah HTML
<title> : Untuk memberi judul pada yang nantinya akan muncul di Tab Browser
<head> : Untuk Bagian Header atau Atas
</head> : Untuk Penutup Header dan diawali dengan garis miring "/"
<body> : Untuk Bagian Body atau Isi dalam HTML
</body> : Untuk Penutup/menutup Body dan diawali dengan garis miring "/"
</html> : Untuk Menutup Sebuah HTML dan diawali juga dengan garis miring "/"

diatas merupakan kode-kode Dasar untuk membuat sebuah HTML

Dalam HTML juga ada Tag-tag tertentu untuk mendukung membuat sebuah website dibawah ini ada beberapa Tag dasar yang harus anda ketahui dalam HTML.

<h1> : ini adalah Tag Heading, yang berlevel 1, selain <h1> ada juga <h2>, <h3>, <h4>, <h5>, <h6>

<b> : (Bold) Fungsinya untuk membuat Huruf menjadi Tebal

<i> : (Italic) Fungsinya untuk membuat Huruf menjadi Miring

<u> : (Underline) Fungsinya untuk membuat dibawah huruf berisi garis

<p> : Untuk membuat sebuah Paragraf

<br> : untuk Membuat sebuah baris baru atau enter

<hr> : untuk membuat sebuah garis Horizontal

<center> : untuk membuat tulisan atau gambar berada di tengah-tengah

<img src="gambar-anda.jpg atau Url gambar anda"> : fungsinya untuk memasukan sebuah gambar

<body bgcolor="black"> : Fungsinya untuk memberi warna untuk background atau latar belakang dan "black" bisa diganti sesuai keinginan anda, misalnya "red", "yellow"

<font color="red"> : Untuk mengatur warna Text dan ditutup dengan </font>

<font size="12"> : untuk mengatur Ukuran Sebuah Text dan ditutup dengan </font>

<font face="arial"> : Untuk mengatur jenis Font atau Text yang akan digunakan

<marquee> : untuk membuat sebuah text ataupun gambar bergerak

Pengertian dan Fungsi CSS

Pengertian dan Fungsi CSS - Setelah kita membahas tentang Pengertian HTML, rasanya kurang lengkap rasanya jika materi tentang CSS tidak disertakan. Ibarat HTML itu surat maka CSS adalah perangkonya.

Mengapa Menggunakan CSS?

Jika HTML digunakan untuk membuat struktur tampilan web. Maka CSS digunakan untuk mempercantik tampilan web. Nah lupakan CSS jika kita ingin membuat tampilan web kita biasa aja (baca: jelek) CSS focus terhadap make-up laman web. Sedangkan HTML focus terhadap konten web. Pemisahan ini membuat kita lebih mudah dan efisien dalam mengelola web kita.

Sejarah CSS

1996

CSS level 1 menjadi W3C Recommendation pada 17 December 1996.

1998-99

CSS level 2 menjadi W3C Recommendation pada 11 January 1999 (sumber lain :12 Mei 1998). Level ini ditandai dengan ditambahkannya dukungan untuk media (printers), downloadable fonts, element-positioning dan tables.

2001

Draft CSS level 3 dipublikasikan oleh W3C pada 23 Mei 2001 dan terus dikembangkan hingga sekarang. Ciri dari CSS Level 3 ini adalah dikembangkan

secara modular.

Implementasi CSS Saat ini.

Banyak fitur yang dimasukkan sejak spesifikasi pertama di tahun 2000, meskipun demikian tidak banyak browser yang mendukung fitur tersebut hingga tahun 2006.

Saat ini browser-browser besar (Opera, Firefox, Chrome, IE dan Safari) secara parsial dan bertahap (baca: lambat) mulai menyempurnakan dukungannya pada CSS3

Pengertian CSS

CSS merupakan singkatan dari Cascading Style Sheets, yaitu sebuah bahasa berbasis text yang digunakauntuk memformat tampilan dari halaman web yang dibuat dengan HTML, misalnya dalam hal pewarnaan, ukuran, posisi dsb. Jika HTML adalah dasar dan batu bata yang membentuk struktur rumah, CSS adalah plester dan cat yang menghiasinya.

Dengan CSS, memungkinkan kita untuk memberikan efek-efek khusus pada isi halaman web secara lebih spesifik. Memungkinkan kita mengubah tampilan beberapa halaman web sekaligus dengan sedikit kode.

Sebenarnya, CSS bukan bahasa pemrograman seperti Javascript, bukan juga bahasa markup seperti HTML. Jadi jangan dibandingkan CSS merupakan W3C Recommendation.

Mulai Menggunakan CSS

Cara Berfikir

Jika kita ingin memformat tampilan web kita dengan mengguanakan CSS, maka cara berfikirnya:

1. Identifikasi elemen HTML yang akan di format. Bisa melalui nama tagnya (p, a, h1),

bisa melalui nama class-nya, bisa melalui nama id nya dst.

2. Tentukan format elemen HTML yang diinginkan seperti warna, ukuran, font, border dst

3. Tentukan nilai dari format tersebut.

Misal: kita ingin semua konten dlam elemen <p> (paragraf) berwarna hijau. Maka:

1. Elemen htmlnya p

p{ }

2. Formatnya warna

p{ color: }

3. Nilai dari formatnya hijau

p{ color: green; }

Jika kode tersebut diaplikasikan kepada dokumen HTML, maka semua konten atau teks dalam elemen paragraph akan berwarna hijau. Mudah bukan?

Skema Dasar CSS

Berikut ini skema dasar dari perintah / kode CSS:

selector

{

property1:value;

property2:value;

property3:value;

}

Keterangan:

Selector => elemen HTML yang akan dikenai aturan CSS, bisa berisi nama elemen, atau identitas lain seperti ID, nilai atribut class.

Property => jenis format yang akan kita implementasikan untuk elemen HTML terpilih, misalnya warna text, warna background, jenis font, warna border dsb.

Value => Nilai masing-masing property dari elemen HTML terpilih. Nilai tergantung dari properti yang digunakan, contoh properties yang berhubungan dengan colour dapat berisi hexadecimal colours seperti #336699, RGB seperti rgb(12,134,22) atau nama colour sperti red, green atau blue. Properties yang berhubungan dengan position maka nilainya dapat berisi margins, width, height Berikut contoh sedehana:

p {:5px; margin font-family: arial; color: blue;}

Artinya: semua elemen P pada halaman HTML akan diformat tampilannya sebagai berikut:

jarak antara elemen P dengan elemen lainnya adalah 5 pixel

Jenis huruf atau font yang digunakan adalah Arial

Warna huruf yang digunakan adalah biru

Spasi Kosong Pada CSS

Sama dengan HTML spasi kosong akan diabaikan di CSS artinya nggak ada efek apapun

kecuali kode CSSmu akan lebih mudah dibaca.

{: 5px ; margin 3

font-family : arial ; :;color blue

}

Berfungsinya sama dengan:

{

margin :5px; font-family :arial;

color: blue;

}

Pengertian Javascript

Javascipt merupakan bahasa pemrograman komputer yang dinamis. Biasanya sering digunakan pada web browser untuk menciptakan halaman web yang menarik, interaktif, serta merapkan berbagai fungsi pada halaman web. Javascript merupakan salah satu pemrograman web yang harus kita pelajari (selain HTML dan CSS).

Cara Kerja Javascript

Javascript bukan sebuah compiled language, artinya javascript tidak memerlukan sebuah compiler agar kode yang ada di dalamnya bisa dijalankan. Kode dari Javascript langsung diterjemahkan oleh web browser.Untuk dapat menjalankan Javascript,Web browser harus support Javascript. Semua web browseryang ada pada masa sekarang ini umumnya sudah mendukung Javascript. Javascript biasanya ditulis pada dokumen HTML atau dengan membuat file terpisah yang kita hubungkan dengan dokumen HTML .Untuk penulisan Javascript di dalam dokumen HTML, penulisan scriptnya bisa kita tulis di dalam tag <head> </head> atau di dalam tag <body></body>. Cara penulisannya ada dengan menuliskan tag <script type="text/javascript> Kode Javascript </script>. Sedangkan apabila kita menggunakan file Javascript yang terpisah, kita bisa menambahkan tag <script type="text/javascript" src="filejavascript.js"></script>.

Contoh Penggunaan Javascript

Dari penjelasan singkat di atas, tentu masih sulit bagi kita untuk memahami bagaimana sebenarnya Javascript bekerja. Oleh karena itulah kita akan coba membuat sebuah dokumen HTML sederhana dengan menambahkan Javascript di dalamnya.Pertama - tama, kita siapkan sebuah dokumen HTML sederhana. Bisa kita tulis dari awal untuk dokumen HTML ini. Bila sudah siap, maka kita akan memiliki sebuah kode HTML dengan bentuk sebagai berikut :

<html>

<head>

<title>Belajar Javascript</title>

</head>

<body>

<div id="contoh"> Mari Belajar Javascript </div>

</body></html>

Jika anda sudah memahami bagaimana membuat HTML, maka ada bisa membuat kode sesuai dengan keinginan anda tanpa mengikuti contoh di atas.Setelah HTML siap, sekarang kita tambahkan Javascript di dalamnya. Yang akan saya contohkan adalah sebagai berikut :

<!DOCTYPE html><html>

<head>

<title>Belajar Javascript</title>

</head>

<body>

<div id="contoh"> Contoh </div>

<script>

document.getElementById("contoh").innerHTML = "Mari Belajar Javascript!!";</script>

</body>

</html>

Kemudian coba jalankan dokumen HTML tersebut dengan menggunakan browser. Kita bisa lihat hasilnya bahwa kata "Contoh" yang ada pada elemen div berubah menjadi "Mari Belajar Javascript!!". Hal ini terjadi karena pada scipt Javascript, kita memerintahkan elemen dengan id "contoh" akan berisi kata "Mari Belajar Javascript!!".

Pengertian PHP

PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang dikelola oleh The PHP Group. Situs resmi PHP beralamat di http://www.php.net.
PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti JavaScript yang diproses pada web browser (client).
Pada awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. Dalam beberapa tahun perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang powerful dan tidak hanya digunakan untuk membuat halaman web sederhana, tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia, wordpress, joomla, dll.

Saat ini PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata dimana kepanjangannya terdiri dari singkatan itu sendiri: PHP: Hypertext Preprocessor.
PHP dapat digunakan dengan gratis (free) dan bersifat Open Source. PHP dirilis dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU General Public License (GPL) yang biasa digunakan untuk proyek Open Source.

Kemudahan dan kepopuleran PHP sudah menjadi standar bagi programmer web di seluruh dunia. Menurut wikipedia pada februari 2014, sekitar 82% dari web server di dunia menggunakan PHP. PHP juga menjadi dasar dari aplikasi CMS (Content Management System) populer seperti Joomla, Drupal, dan WordPress.
Dikutip dari situs w3techs.com, (diakses pada 18 Desember 2014), berikut adalah market share penggunaan bahasa pemrograman server-side untuk mayoritas website di seluruh dunia :

Dapat dilihat dari tampilan diatas bahwa mayoritas website modern saat ini menggunakan PHP.

Fungsi PHP Dalam Pemrograman Web

Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini dikenal dengan website statis, dimana konten dan halaman web bersifat tetap.
Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan PHP adalah situs web yang bisa menyesuaikan tampilan konten tergantung situasi. Website dinamis juga bisa menyimpan data ke dalam database, membuat halaman yang berubah-ubah sesuai input dari user, memproses form, dll.
Untuk pembuatan web, kode PHP biasanya di sisipkan kedalam dokumen HTML. Karena fitur inilah PHP disebut juga sebagai Scripting Language atau bahasa pemrograman script.
Sebagai contoh penggunaan PHP, misalkan kita ingin membuat list dari nomor 1 sampai nomor 10. Dengan menggunakan HTML murni, kita bisa membuatnya secara manual seperti kode berikut ini:

<!DOCTYPE html>

<html>

   <head>

      <title>Contoh list dengan HTML</title>

   </head>

<body>

<h2>Daftar Absensi Mahasiswa</h2>

   <ol>

      <li>Nama Mahasiswa ke-1</li>

      <li>Nama Mahasiswa ke-2</li>

      <li>Nama Mahasiswa ke-3</li>

      <li>Nama Mahasiswa ke-4</li>

      <li>Nama Mahasiswa ke-5</li>

      <li>Nama Mahasiswa ke-6</li>

      <li>Nama Mahasiswa ke-7</li>

      <li>Nama Mahasiswa ke-8</li>

      <li>Nama Mahasiswa ke-9</li>

      <li>Nama Mahasiswa ke-10</li>

   </ol>

</body>

</html>

Halaman HTML tersebut dapat dibuat dengan mudah dengan cara men-copy-paste tag <li> sebanyak 10 kali dan mengubah sedikit angka-angka no urut di belakangnya. Namun jika yang kita inginkan adalah menambahkan list tersebut menjadi 100 atau 1000 list, cara copy-paste tersebut menjadi tidak efektif.

Jika menggunakan PHP, kita tinggal membuat perulangan for sebanyak 1000 kali dengan perintah yang lebih singkat seperti berikut ini:

<!DOCTYPE html>

<html>

   <head>

      <title>Contoh list dengan PHP</title>

   </head>

<body>

<h2>Daftar Absensi Mahasiswa</h2>

   <ol>

      <?php

      for ($i= 1; $i <= 1000; $i++) 

         {

            echo "<li>Nama Mahasiswa ke-$i</li>";

         }

      ?>

   </ol

</body>

</html>

Dengan menggunakan kode baris yang bahkan lebih sedikit, kita dapat membuat list tersebut menjadi 1000 kali, bahkan 100.000 kali dengan hanya mengubah sebuah variabel $i.

perbedaan penggunaan; HTML , CSS , Java Script , PHP

Selasa, 19 April 2016