1.Template
Dasar HTML dengan Bootstrap
Template dasar HTML
akan tampak seperti ini (menggunakan HTML5)
seperti dibawah ini
Skrip
template Dasar HTML
<!
DOCTYPE html>
<html>
<head>
<title>
isi sesuai yang anda mau</title>
</head>
<body>
<h1>
isi sesuai judul atau tema yang anda buat </h1>
</body>
</html>
Sedangkan dengan bootstrap kita perlu tambahkan link ke
CSS stylesheet dan Javascript sebagai berikut, perhatikan teks yang ditebalkan
:
Skrip tamplate dasar
HTML dengan Bootstrap
<! DOCTYPE html>
<html>
<head>
<title>
isi sesuai yang anda mau</title>
<mate
name= “ viewport” content=”width= device-width, initial-screen-1.0”>
<!-Bootstrap
css -- >
<link
href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<h1>
isi sesuai judul atau tema yang anda inginkan </h1>
<script
src=”js/jquery.js”></script>
<!—Bootstrap
javascript -- >
<script
src=”js/bootstrap.min.js”></script>
</body>
</html>
Keterangan skrip diatas
<! DOCTYPE html> à
bagin atas html
Dalam html ini diawalin
html dan diakhirin html
<! DOCTYPE html>
awal
<html>
<head>
<title>
isi sesuai yang anda mau</title>
</head>
<body>
</body>
akhir </html>
bagian akhir
program harus di buat tanda garis miring
(/).garis miring menandakan bahwa program yang kita buat sudah selesai.atau
bagian yang kita buat telah selesai
contoh
<head>
<title>
isi sesuai yang anda mau</title>
</head>
à
tanda garis miring ini menandakan akhir bagian program yang yang letaknya atau
posisinya di bagian head telah selesai kita buat kemudian kita masuk ke bagian body
<body>
<h1>
isi sesuai judul atau tema yang anda buat
</h1>
</body>
Setelah selesai body
atau isi bagian web.kita harus buat tanda garis miring (/) kemudian kita harus
buat </html> ini menandakan web yang kita buat telah selesai
<Html> adalah
script utama dalam html,sementara <head> akan muncul di atas browser atau
nama web yang kita buat.sementara< body> itu adalah isi dari web yang akan kita buat.sementara
html dan bootstrap memiliki perbedaan pertama letaknya di mate name dengan nama viewport.viewpor adalah bagian dari sebuah
alat (notebook,desktop,pc,handphone,tablet dan sebagainya. Mate tag viewport
ini umumnya digunakan untuk mengatur tampilan browser pada mobile device dan
juga tablet.pada tag content=”width=
device-width” berfungsi untuk mengatur lebar tampilan awal browser disesuaikan
dengan lebar layar mobile device. kemudian
tag” initial-screen-1.0”script
ini berguna untuk mengatur level zoom dari tampilan .semakin besar
initial-screen semakin besar tampilannya (zoom in)
Selanjutnya,plugin
javascript di Bootstrap membutuhkan jquery.oleh kerna itu,link ke jquery merupakan standar pada tamplate
HTML pada Bootstrap.
2.Cara
mengaktifkan fitur responsive pada bootstrap
<! DOCTYPE html>
<html>
<head>
<title>
Bootstrap 101 Tamplate </title>
<mate name= “ viewport” content=”width=
device-width, initial-screen-1.0”>
<!-Bootstrap css -- >
<link href=”css/bootstrap.min.css”
rel=”stylesheet” media=”screen”>
<!—Bootstrap responsive css -- >
<link href=”css/bootstrap-responsive.min.css”
rel=”stylesheet”>
</head>
<body>
<h1>
isi sesuai judul atau tema yang anda inginkan </h1>
<script src=”js/jquery.js”></script>
<!—Bootstrap javascript -- >
<script
src=”js/bootstrap.min.js”></script>
</body>
</html>
Tidak ada komentar:
Posting Komentar