pemrograman HTML: Belajar membuat template website sederhana

IDENTITAS

LANGKAH-LANGKAH MEMBUAT TEMPLATE SEDERHANA

1. Langkah Awal

Buatlah sebuah kode HTML sederhana yang dibuat melalui Notepad dan Save dengan nama belakang "html". Jika anda keberatan, bisa kita pakai dengan Element sederhana dibawah ini:

<html>

<head>

<style>
/* CSS di tag ini */
</style>

</head>


<body>

<div id='wrapper'>


<div class='bagian-kepala'>
<h1>Judul BLOG</h1>
</div>


<div class='bagian-post'>
<h3>Ini adalah Judul Posting anda </h3>
</div>

Tulis artikel disini atau sebuah kalimat


<div class='bagian-widget'>
<h2> Judul Widget </h2>

Tulis kalimat disini atau kata-kata yang anda inginkan

</div>
</div>

<div style='clear:both'>


<!-- anda juga harus membuat element DIV terlebih dahulu –>

</body>

<!-- end of Bagian badan –>

</html>

Save kode diatas dengan nama Project.html

2. Berikan CSS pembentuk Tata Letak Sederhana.

Coba anda preview dengan membuka melalui Browser, pasti tidak terbentuk bukan? untuk itu, anda diharuskan memberikan Properties Sederhana terlebih dahulu guna memberikan letak yang anda inginkan.
Tata letak didasarkan pada css "float" dan juga "width" , serta dibatasi dengan "clear: both" didasar kedua element tersebut untuk meratakan bahwa element telah disamakan.
Misalkan kita akan membuat tata letak seperti ini :
KepalaBadanWidget

Maka CSS yang akan kita gunakan adalah seperti ini:

#wrapper{width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}

3. Preview, lalu EDIT!

Lihatlah dahulu jadinya, kemudian Edit beberapa item, tambahkan beberapa tag sesuka kalian ;)
Maksudnya apa? Anda diharapkan untuk menggandakan Project.html sebelum proses ke-4 untuk menghindari kesalahan template pada blog. Periksalah kembali sebelum melanjutkan langkah berikutnya!

4. Berikan beberapa tag XML template Blog

Karena blog menggunakan XML untuk template, kita harus merubah Tag HTML tersebut menjadi tag HTML.
Perhatikan kode template berikut :

<html>

<head>
<style>
/* CSS HERE */

</style>
</head>

<body>
<div id='wrapper'>.....

Ganti kode bercetak miring dan tebal diatas dengan kode seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Insert CSS Here */
]]></b:skin>
</head>

Jangan lupa untuk memberikan CSS yang tadi kita tulis, sehingga menjadi seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Start CSS HERE */
#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}
/* End CSS HERE */
]]></b:skin>
</head>

<body>
<div id='wrapper'>.....

5. Memberi Blogger Tag

Anda diharuskan untuk merubah Static Content dengan Dinamic Content yang telah disediakan oleh Blogger.

Untuk lebih lengkapnya, silahkan pergi ke Link http://support.google.com/blogger/bin/answer.py?hl=en&answer=46888 Cara ini dilakukan agar anda dapat lebih leluasa dalam mengedit dan mengatur dalam "Tata Letak". Selain itu, Dynamic Content juga berfungsi agar Post yang anda publikasi bisa Muncul pada Blog anda. Jika template tidak diberikan Blogger Tag, maka template akan Static, maksudnya ketika anda melakukan pengeditan pada template, post, ataupun widget anda, maka semua tidak akan berubah.

a. Tambahkan element Judul Blog.

Ganti kode yang berwarna biru dengan kode berikut :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>

b. Tambahkan element Post.

Ganti kode yang berwarna hijau diatas dengan kode berikut :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

c. Tambahkan element Widget.

Ganti kode yang berwarna merah dengan kode dibawah ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

Sehingga akan terlihat seperti ini :

<body>
<div id='wrapper'>

<div class='bagian-kepala'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section></div>

<div class='bagian-post'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section></div>

<div class='bagian-widget'><b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section></div>
</div>
<div style='clear:both'>
</body>

6. Save dan Upload

Simpanlah proyek anda, dan kemudian anda coba penerapannya pada Blog anda. Sehingga anda dapat melihat hasilnya! hmmm, untuk refreshing coba anda minum teh anda dahulu, kemudian lanjut lagi ;)

Anda harus backup template terlebih dahulu. Atau anda bisa membuat blog baru untuk bereksperiment.

HASIL DARI PEMBUATAN TEMPLATE WEBSITE SEDERHANA

<title>ANITA DAHAR</title>
<style>
/* CSS */
#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */

}
.header{
height: 100px;
background-color:#ff0000;
margin: 10px 10px 1px 10px;
padding: 10px;
border: 2px solid #000000;
}

.bagian-post{
float: right; /* Gunakan untuk memposisikan Widget di kiri */
width: 525px;
height:400px;
margin: 0 10px 1px 0;
padding: 10px;
background-color: #ffffff;
border: 2px solid #000000;
}

.bagian-widget{
float: left; /* Gunakan untuk memposisikan Widget di Kanan */
width: 205px;
height:400px;
margin: 0 1px 1px 10px;
padding: 10px;
background-color:#FFFF33;
border: solid 2px #000000;
}

.footer{
width: 800x;
background-color: #00FF00;
margin: 0 10px 10px 10px;
padding: 10px;
text-align: center;
border: 2px solid #000000;
}
</style>
</head>

<body bgcolor="#777">
<div id='wrapper'>

<div class='header'>
<h1>ANITA DAHAR</h1>
</div>

<div class='bagian-post'>
<h3>Inilah Template Buatan Pertaman Saya</h3>
<p>Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!!</p>
</div>

<div class='bagian-widget'>
<h2>Menu Navigasi</h2>
<ul type="square">
<li><a href="tugas lab.html">Beranda</a></li>
<li><a href="Halaman about me.html">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Daftar isi</a></li>
<li><a href="#">Buku Tamu</a></li>
</ul>
</div>

<div style='clear:both'>

<div class='footer'>
<p>Copyright 2013. Desain template by anita dahar"sederhana"</p>
</div>

</body>

</html>

PENJELASAN

1. Dokumen dan Penamaan HTML.

Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML. Karena merupakan file teks, maka HTML dapat dibuat dengan menggunakan teks editor yang sederhana, misalnya notepad. Dapat juga menggunakan HTML editor yang bersifat WYSIWYG ( What You See Is What You Get ), misalnya Frontpage atau Dreamwaver. Untuk menandai bahwa sebuah file teks merupakan file HTML, maka ciri yang paling nampak jelas adalah ekstensi filenya, yaitu .htm atau .html. Dalam pemberian nama sebuah dokumen bersifat case sensitive sehingga dokumen dengan nama a.html akan berbeda dengan dokumen A.html.

2. Elemen dan Tag HTML.

Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML. Untuk menandainya. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya. Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan tag. Tag HTML terdiri dari sebuah simbol lebih kecil ( < ) dan dan lebih besar ( > ). Nama elemen ditunjukkan oleh nama dari tagnya. Suatu elemen biasanya ditandai dengan pasangan tag, walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa harus berpasangan. Diantaranya: • Image ( <img /> )

• Ganti Baris – Break ( <br /> )
• Horizontal Rule ( <hr /> )
• Input Field ( <input /> )

Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag tersebut. Atribut
digunakan untuk mengubah default pemformatan dokumen dengan tag yang
bersangkutan.

Struktur Element

<p align="center"> ..... </p>

Struktur Dasar H T ML

<html>
<head>
....informasi dokumen....</head>
<body>
....konten yang di tampilkan
pada halaman browser.....</body>
</html>

3. Penggunaan Tag dan Atributnya.

Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag HTML, memiliki syarat penulisan yaitu :

• Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
• Tag HTML secara normal selalu berpasangan misal (<i>...</i>)
• Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir.
• Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>
• Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>

HASIL (screnshot layout)

pemrograman HTML

Minggu, 04 Desember 2016

Belajar membuat template website sederhana

Tidak ada komentar:

Posting Komentar