yang paling mutlak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Template Dasar HTML5</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
========================================================================
Penjelasan dari script di atas :
<html lang="en">
Menunjukkan bahasa yang digunakan situs ini adalah bahasa Inggris
jika mengunakan bahasa Indonesia script di ganti id atau in
<html lang="id "> atau <html lang="in">
<meta charset="utf-8">
menunjukkan character encoding yang digunakan dalam hal ini adalah Unicode utf-8
<meta http-equiv="X-UA-Compatible" content="IE=edge">
memaksa browser IE menampilkan dokumen html menggunakan versi terkini (edge) dari rendering enginernya
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport adalah bagian dari sebuah alat (Notebook, desktop pc, handphone dan sebagainya) yang dapat menampilkan halaman web (window)
content="width=device-width
adalah mengatur lebar tampilan awal browser di sesuaikan lebar layar
initial-scale=1
mengatur level zoom semakin besar skala semakin besar tampilan (zoom in)
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
html5shiv.min.js
semua browser mendukung elemen HTML 5 browser lama IE6, IE7, IE8 tidak mendukung versi lama pada browser
dan script html5shiv.min.js berisi skrip singkat untuk mengatasi problem tersebut.
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
mengaktifkan fitur responsive pada browser yang tidak mendukung fitur mediaqueries dalam CSS khususnya browser IE8 dan sebelumnya.
<!-- adalah catatan dan dapat terlihat jika di view source code
========================================================================
Code yang kedua
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport adalah bagian dari sebuah alat (Notebook, desktop pc, handphone dan sebagainya) yang dapat menampilkan halaman web (window)
content="width=device-width
adalah mengatur lebar tampilan awal browser di sesuaikan lebar layar
initial-scale=1
mengatur level zoom semakin besar skala semakin besar tampilan (zoom in)
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
html5shiv.min.js
semua browser mendukung elemen HTML 5 browser lama IE6, IE7, IE8 tidak mendukung versi lama pada browser
dan script html5shiv.min.js berisi skrip singkat untuk mengatasi problem tersebut.
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
mengaktifkan fitur responsive pada browser yang tidak mendukung fitur mediaqueries dalam CSS khususnya browser IE8 dan sebelumnya.
<!-- adalah catatan dan dapat terlihat jika di view source code
========================================================================
Code yang kedua
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Template Dasar</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
bisa di tambahkan
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
bisa di tambahkan
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script-->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
========================================================================
Penjelasan script warna Hijau di atas :
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
Elemen HTML digunakan untuk me link ke file css bootstrap
diletakan di baris elemen script file HTML5shiv. min.js dan respon.min.js.
sedangkan link css bootstrap themes merupakan optional
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
plugin Javascript di Bootstrap membutuhkan JQuery, maka Link ke JQuery merupakan standar pada HTML template pada bootstrap
<script src="js/bootstrap.min.js"></script>
Link ke plugin javascript bootstrap diletakkan paling bawah dari skrip,
hal ini untuk mempercepat browser dalam merender halaman web sesuai rekomendasi dari
https://developer.yahoo.com/performance/rules.html
========================================================================
Penjelasan script warna Hijau di atas :
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
Elemen HTML digunakan untuk me link ke file css bootstrap
diletakan di baris elemen script file HTML5shiv. min.js dan respon.min.js.
sedangkan link css bootstrap themes merupakan optional
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
plugin Javascript di Bootstrap membutuhkan JQuery, maka Link ke JQuery merupakan standar pada HTML template pada bootstrap
<script src="js/bootstrap.min.js"></script>
Link ke plugin javascript bootstrap diletakkan paling bawah dari skrip,
hal ini untuk mempercepat browser dalam merender halaman web sesuai rekomendasi dari
https://developer.yahoo.com/performance/rules.html
Tidak ada komentar:
Posting Komentar