Banyak Langkah-langkah yang harus dilakukan untuk membuat Halaman Web tersebut, berikut saya akan menunjukan bagaimana caranya :
Pertama-tama anda harus mempunyai aplikasi Notepad++ untuk membuat Web atau Dokumen HTML. Anda bisa mendownloadnya di internet.
Setelah masuk ke dalam aplikasi Notepad ++ anda harus melakukan langkah -langkah berikut untuk membuat Halaman Web HTML :
Dokumen HTML
Semua dokumen HTML harus dimulai dengan deklarasi tipe:
<DOCTYPE html>.
Dokumen HTML itu sendiri dimulai dengan <html> dan diakhiri dengan </ html>.
Terlihat bagian dari dokumen HTML adalah antara <body> dan </ body>.
contoh:
<! DOCTYPE html>
<html>
<body>
<h1> Pos Pertama saya </ h1>
<p> paragraf pertama saya. </ p>
</ body>
</ html>
HTML Pos
Judul HTML didefinisikan dengan <h1> untuk <h6> tags:
contoh:
<h1> Ini adalah heading </ h1>
<h2> Ini adalah heading </ h2>
<h3> Ini adalah heading </ h3>
HTML Paragraf
Paragraf HTML didefinisikan dengan tag <p>: contoh:
<p> Ini adalah sebuah paragraf. </ p>
<p> Ini adalah paragraf lain. </ p>
Links HTML
Link HTML didefinisikan dengan tag <a>: contoh:
<a href="http://www.w3schools.com"> Ini adalah </a> tautan
Alamat link ditentukan dalam atribut href.
Atribut yang digunakan untuk memberikan informasi tambahan tentang elemen HTML.
HTML Images
Gambar HTML didefinisikan dengan tag <img>.
File sumber (src), teks alternatif (alt), dan ukuran (lebar dan tinggi) disediakan sebagai atribut: contoh:
<img src = "w3schools.jpg" alt = "W3Schools.com" width = "104" height = "142">
CSS3
Setelah anda membuat dokumen HTML sederhana anda bisa mengaplikasikan menggunakan file CSS, karena CSS bisa membuat Backgrounds, Text, Fonts, Tables, Border dan lain-lain...
background
Properti background-color menentukan warna latar belakang dari elemen.
Warna latar belakang halaman didefinisikan dalam pemilih tubuh:
contoh
body {
background-color: # b0c4de;
}
teks
Properti text-align digunakan untuk mengatur alignment horizontal teks.
Teks dapat terpusat, atau sejajar ke kiri atau kanan, atau dibenarkan.
Ketika text-align diatur ke "membenarkan", setiap baris ditarik sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan koran).
contoh
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
Font Family
font teks yang dibuat dengan properti font-family.
Properti font-family harus memegang beberapa nama font sebagai "fallback" sistem. Jika browser tidak mendukung font pertama, ia mencoba font berikutnya.
Mulailah dengan font yang Anda inginkan, dan diakhiri dengan sebuah keluarga generik, agar browser memilih font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia.
Catatan: Jika nama suatu keluarga font yang lebih dari satu kata, itu harus dalam tanda kutip, seperti: "Times New Roman".
Lebih dari satu keluarga font yang ditentukan dalam daftar dipisahkan koma:
contoh
p {
font-family: "Times New Roman", Times, serif;
tabel
Untuk menentukan batas tabel dalam CSS, menggunakan properti perbatasan.
Contoh di bawah ini menetapkan perbatasan hitam untuk meja, th, dan elemen td:
contoh
table, th, td {
border: 1px solid black;
}
border
Properti border-width digunakan untuk mengatur lebar perbatasan.
Lebar diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang, atau tebal.
Catatan: "border-width" properti tidak bekerja jika digunakan sendiri. Gunakan "border-style" properti untuk mengatur perbatasan pertama.
contoh
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
BOOTSTRAP
Sejak Bootstrap menggunakan elemen HTML dan CSS properti yang memerlukan penggunaan DOCTYPE HTML5, termasuk DOCTYPE HTML5 pada awal halaman, bersama dengan set karakter yang benar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
Perlu diingat bahwa Bootstrap 3 adalah mobile-first. Gaya mobile-first yang ditemukan di seluruh perpustakaan Bootstrap bukan dalam file terpisah.
Untuk memastikan render yang tepat dan sentuhan zooming, juga menambahkan viewport meta tag di dalam <head> elemen:
Untuk memastikan render yang tepat dan sentuhan zooming, juga menambahkan viewport meta tag di dalam <head> elemen:
<meta name="viewport" content="width=device-width, initial-scale=1">
Menambahkan Bootstrap untuk Halaman Web Anda
Ada dua cara untuk mulai menggunakan Bootstrap di situs web Anda sendiri.
Anda dapat:
> Ambil Bootstrap dari getbootstrap.com
> Sertakan Bootstrap dari CDN, seperti MaxCDN
Ada dua cara untuk mulai menggunakan Bootstrap di situs web Anda sendiri.
Anda dapat:
> Ambil Bootstrap dari getbootstrap.com
> Sertakan Bootstrap dari CDN, seperti MaxCDN
Pasang HTML Anda Elemen dalam Kontainer
Bootstrap juga memerlukan elemen mengandung untuk membungkus isi situs.
Ada dua kontainer untuk memilih dari:
Bootstrap juga memerlukan elemen mengandung untuk membungkus isi situs.
Ada dua kontainer untuk memilih dari:
<div class="container">
...
</div>
...
</div>
2. Use the .container-fluid class for a full width container, spanning the entire width of
the viewport:
<div class="container-fluid">
...
</div>
...
</div>
Demikian Tutorial singkat sderhana ini saya buat, terimakasih telah membaca.
Referensi : http://www.w3schools.com/
Referensi : http://www.w3schools.com/
DIMAS WIBOWO
1304671095
MANAJEMEN INFORMASI DAN DOKUMEN
