Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5
NELI WIDI ASTUTI
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
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
• 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.
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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 -- >
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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=”http:??html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<! [endif] -- >
</head>
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
</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.
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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>
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
<figure>
<img src=”images/pecel.jpg” alt=”pecel />
<figcaption>pecel Indonesia</figcaption>
</figure>
<hgroup>
<h2>masakan pecel </h2>
<h3>Aneka sayuran dengan bumbu kacang yang lezat</h3>
</hgroup>
<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>
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
<a href=””>sayur bayam</a>
<a href=””>sayur asem</a>
<a href=””> sayur sop</a>
</section>
<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>
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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;
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Margin: 0px;
.wrapper {
Width; 940px;
Margin: 20px auto 20px auto;
Border: 20px solid #000000;
Background-color: #ffffff;}
Header {
Height: 160px;
Background-image: url(images /header.ong);}
H1 {
Text-indent: -9999px;
Width: 940px;
Height: 130px;
Margin: 0px;}
Nav ul {
Margin: 0px;
Padding: 5px 0px 5px 30px;}
Nav li {
Display: inline;
Margin-right: 40px;}
Nav li a {
Color: #ffffff;}
Nav li a:hover, nav li a.current {
Color: #000000;}
Section.courses {
Float: left;
Width: 659px;
Border-right: 1px solid #eeeeee;}
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Article {
Clear: both;
Overflow: auto;
Width: 100%;}
Hgroup {
Margin-top: 40x;}
Figure {
Float: left;
Width: 290px;
Height:220 px;
Padding: 5px;
Margin: 20px;
Border: 1px solid #eeeeee;}
Figcaption {
Font-size: 90%;
Text-align: left;}
Aside {
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{
Color: #de6581;
Background-color: #efefefef;}
A {
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Color: #de6581;
Text-decoration: none ;}
H1, h2, h3 {
Font-weight: normal;}
H2 {
Margin: 10px 0px 5px 0px;
Padding: 0px;}
H3 {
Margin: 0px 0px 10px 0px;
Color: #de6581;}
Aside h2 {
Padding: 30px 0px 10px 0px;
Color: de6581;}
Footer {
Font-size: 80%;
Padding: 7px 0px 0px 20px;}
9. Tampilan Ahir Website
Berikut adalah tampilan website yang sudah kita buat tadi.
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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.
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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-website-
sederhana-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.