cara membuat halaman web dengan menggunakan HTML5
- DEFINISI HTML 5 :
 |
||||
| 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/ | |||
- 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>
- Dan berikut ini adalah contoh tampilan halaman web menggunakan HTML :
Berlanjut dengan bagaimana cara membuat halaman web dengan CSS3 :
Berikut ini adalah contoh script yang memakai cara pertama, yaitu memasukan langsung script CSS di dalam tag <head>…</head>:
1
2
3
4
5
6
|
<head><title>Test 123</title><style>//script CSS yang ingin dimasukkan</style></head> |
1
2
3
4
|
<head><title>Test 123</title><link href="css/style.css" rel="stylesheet" type="text/css"></head> |
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 adalah contoh bentuk hasil halaman website menggunakan css yang saya buat dari nootepad++ :
Dan yang terakhir adalah menggunakan Bootstrap untuk membuat halaman web
- Definisi
 |
|
| Pengembang | |
|---|---|
| Rilis perdana | August 2011 |
| Rilis stabil | 2.3.2 (1 Maret 2013 [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 |
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.woff2.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
