membuat website sederhana dengan html 5 · 2018-02-18 · membuat website sederhana dengan html 5...

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

[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


• 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.


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 -- >


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>


</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.


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>


<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>


<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>


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;


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;}


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;


Aside section a {

Display: block;

Padding: 10px;

Border-bottom: 1 px solid #eeeeee;}

Aside section a; hover{

Color: #de6581;

Background-color: #efefefef;}

A {


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%;


9. Tampilan Ahir Website

Berikut adalah tampilan website yang sudah kita buat tadi.


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.


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.

membuat website sederhana dengan html 5 · 2018-02-18 · membuat website sederhana dengan html 5...

Documents