MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5

Transkripsi

1 MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5 NELI WIDI ASTUTI [email protected] Abstrak Pada kesempatan ini saya akan mencoba menjelaskan tentang membuat website sederhana dengan HTML 5 dan CSS 3, dengan semakin pesatnya teknologi dan informasi website menjadi sangat penting untuk saling berbagi informasi namun untuk orang yang belum tau dengan website pasti sangat sulit untuk membuat suatu website itu sendiri,untuk membuat suatu webite yang menarik hanya memerlukan beberapa aplikasi dasar yaitu diantaranya Notepad sebagai media untuk menulis semua codding,dan Goggle chrome untuk melihat hasil tulisan / coddingan yang kita buat di Notepad. Kata Kunci: HTML5, WEBSITE, HTML Pendahuluan Website berfungsi untuk menampilkan halaman,web terbagi menjadi dua yaitu web statis dan dinamis.yang akan kita pelajari disini adalah web statis pengertian dari web statis itu sendiri adalah media untuk menampilkan halaman statis atau tetap,tetapi yang engendalikannya adalah web browser. Tujuan saya menulis artikel ini adalah untuk mempermudah dalam proses pembelajaran dan menambah wawasan tentang Pembuatan Website. Pembahasan Sebeleum memulai membuat website ada beberapa aplikasi yang perlu disiapkan : Notepad : Sebagai media untuk menulis codding

2 Google Chrome : Untuk melihat hasil ahir website 1. Membuat Sketsa Design halaman web Sebelum kita mulai membuat website hal pertama yang harus dilakukan adalah membuat sketsa halaman web itu sendiri, untuk membuat sketsa bisa menggunakan kertas ataupun dengan photoshop. Sketsa design halaman web ini berfungsi untuk memberikan gambaran tentang layout halaman web dan bagaimana cara mengatur letaknya. Dengan adanya sketsa juga bisa mempermudah kita untuk menyiapakan Skrip HTML dan CSS apa saja yang dibutuhkan.

3 2. Menentukan Konsep Website Salah satu konsep yang akan kita gunakan adalah HTML5,teknologi ini memperkenalkan beberapa elemen baru yang memungkinkan kita untuk membagi bagian dari halaman,nama nama elemen ini sesuai dengan jenis konten yang berada di dalamanya.berikut adalah Script HTMLnya. Script HTML <div class= wrapper > <header> <h1>warung Tegal</h1> <nav> <! nav content here -- > </nav> </header> <section class= courses > <! section content here -- > </section> <aside> <! aside content here -- > </aside> <footer> </! footer content here -- > </footer> </div><! --.wrapper -- >

4 Contoh yang kita buat adalah contoh halaman website Masakan tegal yang dibangun menggunakan elemen HTML5 untuk memebuat struktur halaman ( bukan sekedar pengelompokan menggunakan elemen <div>). Sesuai dengan sketsa halaman web diatas, Header dan Footer bertempat dalam elemen <header> dan <footer>. Materi masakan dikelompokkan di dalam elemen <section> yang meiliki atribut class yang nilainya courses (unyuk membedakan dari halaman <section> yang lain pada halaman).sidebar berada didalam sebuah elemen <aside>. Setiap materi masakan berada didalam sebuah elemen <article>, dan menggunakan elemen <figure> dan <figcaption > untuk menyisipkan gambar.judul di masing masing materi masakan meiliki link judul,sehingga judul-judul ini dikelompokan dalam sebuah elemen <hgroup>.disidebar,terdapat resep dan rincian kontak yang ditempatkan terpisah didalam elemen <section>. Halaman yan kita buat diatas menggunakan CSS,dan halaman HTML berisi link ke HTML5. 3. Membuat Skrip Struktur Umum HTML Script HTML <!DOCTYPE html> <html> <head> <title>web Warung Tegal</title> <style type= text/css > </style> <! [if 1t IE 9]> <script src= ></script> <! [endif] -- > </head>

5 </body> <div class= wrapper > </div><! --.wrapper -- > </body> </html> Fungsi dari Script diatas adalah untuk memberikan judul halaman web dan menyediakan tempat untuk skrip CSS. 4. Membuat Elemen Header dan nav HTML5 Contoh kali ni,elemen <header> digunakan sebagai tempat dari nama website dan navigasi utama. Script HTML <header> <h1>warung Tegal</h1> <nav> <ul> <li><a href= class= current >beranda</a></li> <li><a href= >daftar masakan</a></li> <li><a href= >catering</a></li> <li><a href= >tentang</a></li> <li><a href= >kontak</a></li> </nav> </header> Untuk membuat navigasi kita menggunakan elemen nav. Elemen ini berfungsi untuk pembuatan navigasi,baik navigasi dibawah header atau yang terletak pada footer.

6 Pada script diatas kita telah mementukan judul halaman yang telah diletakanpada elemen <h1> juga memberikan daftar link navigasi sebagai alat navigasi untuk mempermudah dalam mengakses halaman web. 5. Membuat Elemen Article HTML5 Fungsi dari Elemen <article> adalah sebagai wadah untuk setiap bagian dari halaman yang dapat berdiri sendiri dan berpotensi Sindikasi. Bisa berupa artikel atau tulisan blog, komentar atau posting forum, atau lainnya. Jika halaman terdiri dari beberapa artikel, maka kita akan meletakkan masing-masing artikel dalam elemen <article>. Script HTML <section class= courses > <article> <figure> <img src= image/soto.jpg alt= soto /> <figcaption> soto Indonesia</ficaption> </figure> <hgroup> <h2>soto ayam</h2> <h3>makanan berkuah</h3> </hgroup> <p>soto ayam adalah makanan khas Indonesia yang didalamnya tedapat ayam dan berwarna kuning </p> </article> <article>

7 <figure> </figure> <hgroup> </hgroup> <img src= images/pecel.jpg alt= pecel /> <figcaption>pecel Indonesia</figcaption> <h2>masakan pecel </h2> <h3>aneka sayuran dengan bumbu kacang yang lezat</h3> <p>pecel adala makanan khas Indonesia yang berisi sayuran dengan bumbu kacang</p> </article> </section> Script diatas akan kita letakkan dibawah Script header yang sudah kita buat sebelumnya. Dalam script diatas kita membuat artikel masakan dengan memeberinya judul,gambar beserta penjelasannya. 6. Membuat Elemen Aside HTML 5 Tag <aside> berfungsi sebagai tempat untuk konten yang berhubungan dengan seluruh halaman artinya semua halaman akan terlink atau tersambung ke halaman berikutnya jika kita menggunakan tag <aside>. Script HTML <aside> <section class= popular-recipes > <h2>masakan popular</h2> <a href= >sayur lodeh</a>

8 </section> <a href= >sayur bayam</a> <a href= >sayur asem</a> <a href= > sayur sop</a> <section lass= contact-details > <h2>kontak</h2> <p>warung tegal<br / > Diseluruh nusantara </section> </aside> Kita akan meletakkan Script ini tepat dibawah skrip <section> diatas, tepatnya setelah skrip </section>. Skript diatas berisi informasi daftar link yang berisi menu,asakan yang popular beserta daftar kontaknya. 7. Membuat Elemen Footer HTML5 Dengan adanya footer kita bisa memberikan informasi tambahan mengenai website seperti informasi hak cipta,berupa link ke halaman kebijakan privasi atau link lainnya Script HTML <footer> 2015 warung tefal </footer> Script tadi akan kita letakkan setelah skrip <aside> diatas,tepatnya setelah skrip </aside>

9 Sampai tahap ini saya belum menggunakan script CSS sehingga gambar yang sudah kita masukan tadi belum belum di tampilan web. 8. Membuat Script CSS dan gambar Script CSS Header, section, footer, aside, nav, article, figure, figcaption, { Display: block;} Body { Color: #666666; Background-color: #f9f8f6; Background-image: url( image/dark-wood.jpg ); Background-position: center; Font-family: Georgia, Times, Serif; Line-height: 1.4em;

10 .wrapper { Header { Margin: 0px; Width; 940px; Margin: 20px auto 20px auto; Border: 20px solid #000000; Background-color: #ffffff;} Height: 160px; Background-image: url(images /header.ong);} H1 { Nav ul { Nav li { Nav li a { Text-indent: -9999px; Width: 940px; Height: 130px; Margin: 0px;} Margin: 0px; Padding: 5px 0px 5px 30px;} Display: inline; Margin-right: 40px;} Color: #ffffff;} Nav li a:hover, nav li a.current { Color: #000000;} Section.courses { Float: left; Width: 659px; Border-right: 1px solid #eeeeee;}

11 Article { Hgroup { Figure { Clear: both; Overflow: auto; Width: 100%;} Margin-top: 40x;} Float: left; Figcaption { Aside { Width: 290px; Height:220 px; Padding: 5px; Margin: 20px; Border: 1px solid #eeeeee;} Font-size: 90%; Text-align: left;} Width:230 px; Float: left; Padding: 0px 0px 0px 20px;} Aside section a { Display: block; Padding: 10px; Border-bottom: 1 px solid #eeeeee;} Aside section a; hover{ A { Color: #de6581; Background-color: #efefefef;}

12 Color: #de6581; Text-decoration: none ;} H1, h2, h3 { Font-weight: normal;} H2 { H3 { Aside h2 { Footer { Margin: 10px 0px 5px 0px; Padding: 0px;} Margin: 0px 0px 10px 0px; Color: #de6581;} Padding: 30px 0px 10px 0px; Color: de6581;} Font-size: 80%; Padding: 7px 0px 0px 20px;} 9. Tampilan Ahir Website Berikut adalah tampilan website yang sudah kita buat tadi.

13 Penutup Tidak perlu ragu lagi untuk membuat suatu website,membuat website sedehana sangatlah mudah hanya perlu menyiapkan aplikasi notepad dan google chrome sebagai media untuk membuka website kita.tutorial yang saya tulis hanya sebatas cara membuat web dengan simple dan sederhana dan hanya menggunakan web statis. Terimaksih atas kesempatan yang telah diberikan kepada saya untuk menulis artikel ini diperlukan keberanian yang tinggi,mohon maaf bila masih banyak kekurangan baik dalam hal penulisan artikel ini maupun struktur kata yang kurang tepat,semoga artikel ini bermanfaat.

14 Referensi nyekrip.com/cara-membuat-website-sederhana-denganhtml-5/ id.wikihow.com/membuat-halaman-web-sederhana-dengan-html berguruseo.blogspot.com/2013/12/cara-membuat-website-sederhana-untuk.html duniailkom.com/tutorial-belajar-html-langkah-pertama-untuk-membuat-web/ nyekrip.com/nyekrip-yuk/index.php?fdata=skrip-cara-membuat-websitesederhana-dengan-html-5 Biografi Assalamualikum nama saya neli widi astuti biasa dipanggil neli umur saya sekarang saya lahir ditahun 1996, saya salah satu mahaiswa dari perguruan tinggi swasta yang ada ditangerang dan sedang menempuh semester 6,kegiatan saya sehari hari sekarang hanya menjadi mahasiswa kelas reguller dan menjalankan bisnis online shop yang sudah berjalan sejak tahun 2016.