Sebelum saya memulai ke cara membuat HTML5,Saya akan menjelaskan terlebih dahulu apa itu HTML5.
1.HTML5 ( HyperText Markup Language )
adalah sebuah istilah yang digunakan untuk membuat sebuah halam web,menampilkan berbagai informasi dari berbagai sumber di Penjelajahan web internet dan pemformatan hypertexs secara sederhana.
Tanda yang ada di HTML
1. Struktural adalah tanda yang menentukan level atau tingkatan dalam sebuah tulisan <h></h1>
2.Presentational adalah tanda yang menetukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut <b>boldface</b>
3.Hypertext adalah tanda yang menunjukan pranala ke bagian dari dokumen tersebut
4. Elemen widget yang membuat objek-objek lain seperti list <li> ,garis horizontal <hr>
Itu sekilas tentang HTML5 .Sekarang kita mulai membuat website dengan Html
sebelu memulai membuat website kita harus membuka notepade++ tapi jika tidak ada bisa juga menggunakan notpepad biasa.Jika kalian sudah membuka notepad yang harus pertama di masukan adalah kode <!dotype html> lalu di ikuti dengan <html>,<head><title>,dan seterusnya sebagai contoh lihat gambar di bawah ini.
Sekarang kita sudah selesai membuat HTML5 selanjutnya adalah CSS3
2.CSS3
CSS adalah sebuah aturan yang di gunakan untuk mengendalikan komponen-komponen di sebuah web sehingga website akan tampil lebih terstruktus,seragam,dan rapih.CSS bukanlah bahasa pemrograman tetapi sama halnya dengan style dalam aplikasi pengolahan kata
CSS3 adalah versi terbaru darI CSS3 dapat mempercantik website seperti memberikan warna,gambar,animasidan animasi 3D
di bawah ini adalah langkah-langkah membuat CSS3
Setelah d save di dokumen ,kita bisa buka lewat mogila dan hasilnya adalah sebagai berikut
Keterangan :
1. <p></P> adalah jika kita ingin memasukan artikel kedalam web
2. <bloquote></bloquote> adalah jika kita ingin teks lebih maju kedepan
3. <bloquote class ="kuning"></blockquote> adalah jika kita ingi teks kita maju ke depan dan ingin backdraundnya berwarna kuning.untuk warna bisa di ganti sesuai dengan selera masing-masing .itu hanya sebagai contoh
3. Bootdtrap
Bootsrap adalah frame utama yang berguna untuk mendesain halaman web dan untuk mempermudah pengguna dalam mengakses CSS yang sudah siap untuk di pakai
sebelum memulai menggunakan Bootstrap anda dapat mendownloada applikasi Bootstrap d link di bawah ini :
http://getbootstrap.com/2.3.2/
setelah selesai di download filenya bisa di pindah ke dokumen kemudian di extrac all
cara membuat web menggunakan Bootstrap ada beberapa bagian yang sama dengan membuat CSS letak perbedaannya adalah setelah
<title>Bootstrap</title>
di bawahnya di ikuti dengan
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<head>
<body>
<header>
<h3>Dokumen Web menggunakan Bootstrap</h3><div class="jumbotron">
<h1><img src="./autobot2.jpg" /> Selamat Datang!</h1>
<p>Dokumen web ini dibuat dengan
menggunakan framework Bootstrap!
</p>
<p><a href="#" class="btn btn-primary tombol-jquery">Munculkan Section</a></p>
</div>
<header>
Jika anda ingin judulnya besar anda harus menambahkan" jumbotron" seperti contoh di atas,tapi jika tida ingin judulnya besar tidak perlu menggunakan kata "jumbotron"
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li><a href="#">Homepage</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Artkel</a></li>
<li><a href="#">Gosip</a></li>
</ul>
</nav>
Script-script di atas adalah jika anda ingin menambahkan menu-menu pada bootstrap
<h3><i class=glyphicon glyphicon-globe></i>Berita!<h3>
fungsi dari script di atas adalah jika ingin menu dalam bootstrap ada gambar globe misalnya ,jadi setelah glyphicon glyphicon anda bisa melanjutkan dengan -globe
<ul>
<li>Judul Berita 1</li>
<li>Judul Berita 2</li>
<li>Judul Berita 3</li>
<li>Judul berita 4</li>
</ul>
<a href="#" class=ntn-btn-primary">Berita lainnya</a>
Fungsi "li" di atas adalah untuk membuat daftar berita
Mungkin hanya itu tutorial cara membuat web menggunakan HTML,CSS3,dan Bootdtrao dari saya.Jika ada kekurangan saya minta maaf
Semoga tutorial saya ini dapat bermanfaat bagi pembaca .Selamat Mencoba
Nama : Farida Istiqomah
NPM : 1306470823
KLS : B
Tidak ada komentar:
Posting Komentar