cara membuat website sederhana

7/25/2019 Cara Membuat Website Sederhana

http://slidepdf.com/reader/full/cara-membuat-website-sederhana 1/11

Cara membuat website sederhana

Oh ya, dalam tutorial cara membuat website sederhana ini kita menggunakan HTML

versi 5 dan juga sedikit CSS versi ! "an se#erti biasanya alat yang digunakan dalammembuat website #ada tutorial ini ada dua, yaitu$

• Google Chrome sebagai browser

• Notepad++ sebagai tem#at menulis skri#

%ika anda belum mem#unyai alat&alat tersebut, anda bisa download chrome dan note#ad'

' secara gratis #ada halaman web mereka! Mari kita mulai tutorial cara membuat websitesederhana yang terdiri dari ( langkah!

Langkah 1: Membuat Sketsa Desain halaman web

)ita akan memulai membuat web dengan mem#ersia#akan sketsa halaman web dulu,untuk membuat sketsa halaman web kita bisa menggunakan kertas dulu baru setelah itukita bisa mem#erhalusnya dengan #hotosho#! *erikut adalah sketsa halaman web yang

kita akan gunakan sebagai latihan!

http://www.google.com/chrome/

http://notepad-plus-plus.org/

http://www.google.com/chrome/

http://notepad-plus-plus.org/



Sketsa +ebsite Sederhana

Sketsa desain halaman web da#at memberikan gambaran mengenai layout halaman webdan bagaimana cara mengatur letaknya! "engan adanya sketsa juga bisa mem#ermudah

kita untuk menyia#kan skri# HTML dan CSS a#a saja yang dibutuhkan!

Langkah 2: Menentukan Konsep membuat website

)ita akan menggunakan HTML5, teknologi ini mem#erkenalkan bebera#a elemen baru

yang memungkinkan kita untuk membagi bagian dari halaman! ama&nama elemen inisesuai dengan jenis konten yang berada didalamnya!

Skri# HTML

-

.

/

0div class12wra##er23

0header3 0h-3+arung Tegal04h-3

0nav3

http://i2.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara-Membuat-Website-Sederhana-dengan-HTML-5-Sketsa-Nyekrip.png



5

6

(

7

-8--

-.

--/

-5

--6

09&& nav content here &&3

04nav3 04header3

0section class12courses23

09&& section content here &&3

04section3 0aside3

09&& aside content here &&3

04aside3 0:ooter3

09&& :ooter content here &&3

04:ooter304div309&& !wra##er &&3

Contoh #ada kali ini yaitu membuat web masakan yang dibangun menggunakan elemen

HTML5 untuk membuat struktur halaman ;bukan sekedar #engelom#okan menggunakan

elemen <div><!

Sesuai dengan sketsa halaman web diatas, Header dan :ooter bertem#at di dalamelemen <header> dan <footer>! Materi masakan dikelom#okkan bersama di dalam

elemen <section> yang memiliki atribut class yang nilainya courses ;untuk

membedakannya dari elemen <section> yang lain #ada halaman<! Sidebar berada di

dalam sebuah elemen <aside> !

Setia# materi masakan berada di dalam sebuah elemen <article>, dan menggunakan

elemen <figure> dan <figcaption> untuk menyisi#kan gambar! %udul #ada masing&

masing materi masakan memiliki sub&judul, jadi judul&judul ini dikelom#okkan dalam

sebuah elemen <hgroup>! "i sidebar, terda#at rese# dan rincian kontak yang ditem#atkanter#isah di dalam elemen <section>!

Halaman dikelola dan ditata menggunakan CSS! =gar CSS bisa bekerja di versi >? 7kebawah, halaman HTML5 berisi link ke HTML5 shiv %avaScri#t ;host di server @oogle<

di dalam komentar bersyarat!

Oke, kita sudah menentukan konse# dari membuat web sederhana, mari kita lanjutkandengan membuat skri# HTML dan skri# CSS!

Langkah : Membuat Skrip Struktur !mum "#ML

Aembuatan skri# struktur umum HTML memudahkan kita untuk memulai dalam

membuat website, jika anda belum mengetahui a#a itu struktur umum HTML, anda bisamem#elajari terlebih dahulu di B $engenalan "#ML: Struktur !mum $art 1 !

*erikut Skri# Struktur Dmum HTML!

Skri# HTML

https://www.google.com/


http://www.nyekrip.com/pengenalan-html-struktur-umum-part-1/


http://www.nyekrip.com/pengenalan-html-struktur-umum-part-1/



-

.

/

5

6

(

7-8

--

-.-

-/

-5

09"OCTEA? html3

0html30head3

0title3+eb +arung Tegal04title3

0style ty#e12teFt4css23

04style309&&Gi: lt >? 73

0scri#t src12htt#I44html5shiv!googlecode!com4svn4trunk4html5!js2304scri#t3

09Gendi:&&304head3

0body3

0div class12wra##er2304div309&& !wra##er &&3

04body3

04html3

Skri# HTML diatas terda#at baris skri# <style type="text/css">, didalam skri# inikita nantinya akan menaruh skri# CSS untuk mengatur layout halaman web! Sedangkan

#ada skri# <title>Web Warung Tegal</title> ber:ungsi untuk memberikan title

halaman web! "ibawah tag <style> kita memberikan skri# HTML!H# yang berguna

agar website kita berjalan dengan baik dalam browser >? versi 7 kebawah!

Skri# <div class="$rapper"> ber:ungsi untuk membungkus elemen halaman web, B

bungkusan B ini kita beri class $rapper, dengan class ini kita bisa mengatur semua

elemen yang berada didalamnya dengan skri# CSS!

)esim#ulan dari skri# diatas adalah kita telah memberikan judul halaman web dan

menyediakan tem#at untuk skri# CSS!

Langkah %: Membuat &lemen header dan na' "#ML(

"alam contoh ini, ?lemen <header> digunakan untuk tem#at dari nama website dan

navigasi utama! *erikut skri# header, letakkan #ersis dibawah <div class="$rapper">!

Skri# HTML

-

.

/

5

6

(7

-8

0header3

0h-3+arung Tegal04h-3 0nav3

0ul3

0li30a hre:122 class12current23beranda04a304li30li30a hre:1223da:tar masakan04a304li3

0li30a hre:1223katering04a304li3

0li30a hre:1223tentang04a304li30li30a hre:1223kontak04a304li3

04ul3



--

-.

04nav3

04header3

)ita menggunakan elemen <nav> untuk membuat navigasi ! ?lemen ini bisa digunakan

di berbagai ke#erluan dalam #embuatan navigasi, baik navigasi yang berada te#at

dibawah header, atau navigasi yang terletak #ada :ooter!

"alam skri# diatas kita menentukan judul halaman yang telah kita letakkan #ada elemen<h%> dan memberikan da:tar link navigasi sebagai alat navigasi untuk mem#ermudah

dalam mengakses halaman web!

Langkah (: Membuat &lemen arti)le "#ML(

?lemen <article> bertindak sebagai wadah untuk setia# bagian dari halaman yang

da#at berdiri sendiri dan ber#otensi Sindikasi!

*isa beru#a artikel atau tulisan blog, komentar atau #osting :orum, atau lainnya! %ika

halaman terdiri dari bebera#a artikel, maka kita akan meletakkan masing&masing artikel

dalam elemen <article>! *erikut skri#nya, dan kita bungkus skri# ini dengan elemen

<section>!

Skri# HTML

-

.

/

5

6

(7

-8

--

-.-

-/

-5-

-6

-(-7

.8

.-

..

.

./

0section class12courses23

0article3 0:igure3

0img src12images4soto!j#g2 alt12soto2 43

0:igca#tion3Soto >ndonesia04:igca#tion3 04:igure3

0hgrou#3

0h.3Soto =yam04h.30h3Makanan *erkuah04h3

04hgrou#3

0#3Soto ayam adalah makanan khas >ndonesia yang beru#a

sejenis su# ayam dengan kuah yang berwarna kekuningan!04#304article3

0article3

0:igure30img src12images4#ecel!j#g2 alt12#ecel2 43

0:igca#tion3Aecel >ndonesia04:igca#tion3

04:igure3 0hgrou#3

0h.3Masakan Aecel04h.3

0h3Makanan dengan *umbu )acang04h3 04hgrou#3

0#3Aecel adalah makanan yang menggunakan bumbu sambal

kacang sebagai bahan utamanya yang dicam#ur dengan aneka jenis sayuran!04#3



.5

.

04article3

04section3

Letakkan skri# diatas te#at dibawah skri# header yang sudah kita buat sebelumnya!?lemen <section> digunakan untuk mengelom#okkan elemen konten yang terkait , dan

biasanya setia# bagian akan memiliki judul tersendiri!

?lemen <figure> digunakan untuk menyisi#kan gambar sedangkan elemen

<figcaption> digunakan untuk memberi keterangan dalam gambar tersebut! Sedangkan

tujuan dari elemen <hgroup> adalah mengelom#okkan satu atau lebih elemen <h%>

sam#ai <h&> sehingga mereka di#erlakukan sebagai satu judul tunggal!

)esim#ulannya dalam skri# diatas kita membuat artikel masakan dengan memberinya judul, gambar beserta #enjelasan!

Langkah *: Membuat &lemen side "#ML(

?lemen <aside> bertindak sebagai tem#at4wadah untuk konten yang berhubungan

dengan seluruh halaman! Sebagai contoh, elemen ini bisa berisi link ke halaman web lain,da:tar #osting terbaru, kotak #encarian, atau widget&widget lainnya! *erikut skri# dari

elemen =side! Letakkan skri# ini dibawah skri# <section> diatas, te#atnya setelah skri#

</section>!

Skri# HTML

-

.

/

5

6

(

7-8

--

-.-

-/

0aside3

0section class12#o#ular&reci#es23

0h.3Masakan Ao#uler04h.3 0a hre:1223Sayur So#04a3

0a hre:1223Sayur =sem04a3

0a hre:1223Sayur Lodeh04a3 0a hre:1223Sayur *ayam04a3

04section3

0section class12contact&details23 0h.3)ontak04h.3

0#3+arung Tegal0br 43

di seluruh indonesia 04section3

04aside3

"alam skri# diatas, kita meletakkan in:ormasi da:tar link yang berisi menu masakan yang

#o#uler dan da:tar kontak!

Langkah ,: Membuat &lemen -ooter "#ML(



Setia# website akan #unya :ooter, elemen <footer> berguna untuk membuat :ooter,

dengan :ooter kita bisa memberikan in:ormasi tambahan mengenai website se#erti

in:ormasi hak ci#ta, link ke halaman kebijakan #rivasi atau link lainnya! *erikut skri#:ooter! Skri# Jooter diletakkan setelah skri# <aside> diatas, te#atnya setelah skri#

</aside>!

Skri# HTML

-

.

0:ooter3

Kco#y$ .8-5 +arung Tegal

04:ooter3

Aada taha# ini kita sudah membuat Jile HTML dan belum dilengka#i dengan skri# CSSdan @ambar, sehingga #ada taha# ini web sederhana kita se#erti gambar dibawah ini!



+ebsite *elum Menggunakan Skri# CSS dan @ambar

Langkah .: Membuat Skrip CSS dan Gambar

*erikut skri# CSS yang nantinya kita insert ke dalam elemen <style

type="text/css">!

Skri# CSS

-.

/

header, section, :ooter, aside, nav, article, :igure, :igca#tion dis#layI block$

body

colorI N$

http://i0.wp.com/www.nyekrip.com/wp-content/uploads/2015/02/Cara_Membuat_Website_Sederhana_dengan_HTML_5_-belum_css_dan_gambar_-nyekrip.png



5

6

(

7

-8--

-.

--/

-5

--6

-(

-7

.8

.-..

.

./

.5

.

.6

.(

.78

-

./

5

6

(

7/8

/-

/.

///

/5

//6

/(

/758

background&colorI N:7:(:$

background&imageI url;2images4dark&wood!j#g2<$ background&#ositionI center$

:ont&:amilyI @eorgia, Times, seri:$

line&heightI -!/em$

marginI 8#F$!wra##er

widthI 7/8#F$

marginI .8#F auto .8#F auto$ borderI .#F solid N888888$

background&colorI N::::::$

header heightI -8#F$

background&imageI url;images4header!#ng<$

h-

teFt&indentI &7777#F$

widthI 7/8#F$heightI -8#F$

marginI 8#F$nav, :ooter

clearI both$

colorI N::::::$ background&colorI Naeaca($

heightI 8#F$

nav ul marginI 8#F$

#addingI 5#F 8#F 5#F 8#F$

nav li dis#layI inline$margin&rightI /8#F$

nav li a

colorI N::::::$nav li aIhover, nav li a!current

colorI N888888$

section!courses :loatI le:t$

widthI 57#F$

border&rightI -#F solid Neeeeee$

article clearI both$

over:lowI auto$

widthI -88$hgrou#

margin&to#I /8#F$

:igure :loatI le:t$



5-

5.5

5/

55

556

5(

578

-

.

/

5

6(

768

6-

6.6

6/

656

66

6(67(8

(-

(.(

(/

(5(

widthI .78#F$

heightI ..8#F$ #addingI 5#F$

marginI .8#F$

borderI -#F solid Neeeeee$

:igca#tion :ont&siPeI 78$

teFt&alignI le:t$

aside widthI .8#F$

:loatI le:t$

#addingI 8#F 8#F 8#F .8#F$aside section a

dis#layI block$

#addingI -8#F$

border&bottomI -#F solid Neeeeee$

aside section aIhover colorI N7(5da$

background&colorI Ne:e:e:$a

colorI Nde5(-$

teFt&decorationI none$h-, h., h

:ont&weightI normal$

h. marginI -8#F 8#F 5#F 8#F$

#addingI 8#F$

h marginI 8#F 8#F -8#F 8#F$colorI Nde5(-$

aside h.

#addingI 8#F 8#F -8#F 8#F$colorI Nde5(-$

:ooter

:ont&siPeI (8$ #addingI 6#F 8#F 8#F .8#F$

Aenjelasan dari skri# CSS tidak dibahas disini, melainkan akan dibahas dalam artikel

membuat website sederhana bagian ., untuk gambar anda bisa mendownload&nyasekaligus beserta source code #ada tombol download diatas!

Cuku# sam#ai disini tutorial )ara membuat website sederhana dengan "#ML (, Aadataha# ini kita sudah membuat website meski#un sangat sederhana, sim#le dan terbilang

cuku# mudah, web sederhana ini hanya terdiri dari satu halaman web saja! )ita bisa

menambahkan halaman lain dengan cara du#likat halaman web yang sudah dibuat dan

isinya kita ganti dengan yang lain!



Tutorial diatas masih sebatas cara membuat web sim#el dan biasa, yang #erlu diketahui

bahwa website sim#el ini masih bersi:at statis tidak dinamis! Tutorial cara membuat

website sederhana ini sangat jauh dari kesem#urnaan, maka dari itu kami sangatmenghara#kan saran dan kritikan yang membangun!

cara membuat website sederhana

Documents