Membuat Halaman Web dengan Menggunakan HTML5, CSS3 dan Bootstrap: Tutorial mengenai "Membuat Halaman Web dengan Menggunakan HTML5, CSS3 dan Bootstrap"

Berikut ini adalah tutorial membuat halaman web dengan menggunakan HTML5, CSS3 dan Bootstrap dengan menggunakan layanan blogspot. Pertama-tama saya akan membahas bagaimana cara membuat halaman web dengan menggunakan HTML5.

cara membuat halaman web dengan menggunakan HTML5

DEFINISI HTML 5 :

HTML5
(HyperText Markup Language)

Ekstensi berkas	`.html, .htm`
Jenis MIME	`text/html`
Type code	TEXT
Uniform Type Identifier	public.html
Dikembangkan oleh	Konsortium Waring Wera Wanua dan WHATWG
Jenis format	Bahasa markah
Pengembangan dari	SGML
Dikembangkan menjadi	XHTML5
Situs web	whatwg.org/html www.w3.org/TR/html5/

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.(Refrensi http://id.wikipedia.org/wiki/HTML5).

Cara membuat halaman web dengan menggunakan HTML5

Pastikan ada aplikasi notepad++ pada komputer anda. Jika belum memiliki notepad++ bisa di download di( http://notepad-plus-plus.org/download/v6.6.9.html ).
Hal yang harus pertama anda lakukan setelah membuka notepad++ yaitu tulislah <!doctype html> pada baris pertama.
Lalu selanjutnya adalah ketik <html> .
Ketik <head> didalam tag <head> terdapat <title> dan meta name.
lalu ketik </head> lalu <body>.
Lalu ketik <header> setara dengan <title> yang telah diketik lalu tutup dengan </header> .
Jangan lupa melakukan penyimpanan dengan save file dengan format save nya menggunakan .html contoh : (latihan1.html) .
Setalah itu ketik <article>.
Setelah muncul seperti gambar di bawah ini lalu lanjutkan dengan ketik </ol> dan </li> untuk menutup tag.
Dan berikut ini adalah contoh tampilan notepad++nya :
Jika masih ingin menambahkan ketik lagi dari <li type="square"><u>..........</u> lalu tutup lagi dengan </ul> dan </li>
Gunakan <ol> tutup dengan </ol> untuk angka dan <ul> dengan tutup</ul> untuk gambar bulat kosong.
Dan langkah terakhir yaitu ketik <ul> lalu </article>
kemudian </body> dan terakhir </html>

Berikut ini terakhirnya:

Dan berikut ini adalah contoh tampilan halaman web menggunakan HTML :

Berlanjut dengan bagaimana cara membuat halaman web dengan CSS3 :

Untuk penggunaan CSS sendiri, ada dua cara yang bisa dipakai, yaitu dengan cara memasukan langsung script CSS di dalam tag <head>…</head>, atau bisa juga dengan memasukkan link yang menghubungkan antara file HTML dengan file CSS.
Berikut ini adalah contoh script yang memakai cara pertama, yaitu memasukan langsung script CSS di dalam tag <head>…</head>:

<head>

<title>Test 123</title>

<style>

//script CSS yang ingin dimasukkan

</style>

</head>

Lalu cara kedua yaitu menyisipkan link yang menghubungkan file HTML ke file CSS yaitu sebagai berikut:

<head>

<title>Test 123</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

Dan jika anda menyimpan file didalam folder CSS, maka link yang ditulis harus href=”css/style.css”, namun jika file CSS yang dibuat ada didalam satu folder dengan file HTML, maka cukup dengan href=”style.css” saja. sumber : http://script-media.net/news/membuat-layout-website-dengan-css.
sumber: (http://script-media.net/news/membuat-layout-website-dengan-css)
Berikut langkahnya:

Hal yang harus pertama anda lakukan setelah membuka notepad++ yaitu tulislah <!doctype html> pada baris pertama.
Lalu selanjutnya adalah ketik <html> .
Ketik <head> didalam tag <head> terdapat <title> dan meta name. Contoh: <title>Menggunakan CSS</title>
<meta name="Author" content="Aldea Triani putri"/>
<meta name="keywords" content="HTML, CSS" />
<style type="text/css">
Tambahakan blockquote untuk ukuran dan warna pada css disini bisa mengganti warna tulisannya sesuai keinginan anda.Contoh saya menggunakan warna PINK.
Setelah itu masukan rumus css nya seperti gambar dibawah lalu tutup dengan </style> , </head> dan </html>.
Ketik <body> lalu <heder> didalam header ketik <h1> dan tutup </h1> dan </header>.
Lalu langkah selanjutnya ketik article .
Masukan article sesuai keinginan sebelum menulis article jangan lupa buka dengan <p> dan tutup lagi dengan </p> untuk format paragraf.
Ketik blockquote lagi sebanyak yang anda butuhkan jika ingin menambahkan blockquote lagi .

Berikut ini saya akan membuat contoh nya pertama kita buat dari notepad++

Maka tampilan akan seperti ini:

Berikut adalah contoh bentuk hasil halaman website menggunakan css yang saya buat dari nootepad++ :

Dan yang terakhir adalah menggunakan Bootstrap untuk membuat halaman web

Definisi

Bootstrap

Pengembang	Twitter
Rilis perdana	August 2011; 3 tahun yang lalu
Rilis stabil	2.3.2 (1 Maret 2013; 19 bulan yang lalu ^[1])
Status pengembangan	Aktif
Bahasa pemograman	HTML, CSS, LESS dan JavaScript
Sistem operasi	Lintas-platform
Ukuran	79.2 KB (terarsip)
Jenis	Templat desain berbasis HTML dan CSS
Lisensi	Apache License 2.0
Situs web resmi	twitter.github.io/bootstrap

Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.(sumber : http://id.wikipedia.org/wiki/Twitter_Bootstrap)
Bootstrap dikenal lebih dekat dengan nama Twitter Bootstrap, mengapa twitter? Karena memang framework ini dibangun oleh para webdesigner yang bernaung dalam perusahaan twitter. Bootstrap menjadi populer dan banyak website yang menggunakan twitter bootstrap ini. Sama dengan framework lainnya dengan bootstrap Anda bisa membuat jenis tampilan website apapun yang Anda inginkan.(sumber:http://www.ilmuwebsite.com/cara-gampang-membuat-template-website-responsive)
Langkah-langkahnya adalah:

Buatlah 1 folder bernama template_bootstrap. kemudian untuk awalnya buat 4 folder didalamanya yakni css (untuk file css), js (untuk file js), img (untuk file gambar), dan fonts (untuk folder font).
Masuk ke web : http://twitter.github.io/bootstrap/ .
Download bootstrap versi terakhir. Setelah anda download dan ekstrak anda akan menapatkan 3 buah folder, yakni css, fonts, js.
Kemudian masukan isi css ke dalam folder css yang telah anda buat di folder template_bootstrap , begitu juga dengan folder js, dan fonts (atau anda replace aja biar cepet).

isi folder css, font, dan js dari bootstrap yang telah kita download adalah

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Jangan lupa, anda juga perlu mendownload file js jquery nya dan meletakan file javascript jquery di folder js, anda dapat mendownload file jquery tsb di http://jquery.com/ saat artikel ini ditulis versi terakhir adalah versi v 1.11.0 (jquery-1.11.0.min.js) sumber : ( http://www.linkdesain.com/2014/04/cara-memulai-menggunakan-twitter.html )
untuk contoh template html basic nya adalah seperti berikut :

Dan berikut adalah contoh tampilan halaman web bootstrap nya :

Sekian dari saya kurang lebihnya mohon maaf jika ada salah penulisan dan yang lainnya. Semoga bermanfaat untuk kita semua :)

Aldea Triani Putri-1306470773-Kelas B

Membuat Halaman Web dengan Menggunakan HTML5, CSS3 dan Bootstrap

Selasa, 28 Oktober 2014

Tutorial mengenai "Membuat Halaman Web dengan Menggunakan HTML5, CSS3 dan Bootstrap"

Tidak ada komentar:

Posting Komentar