Membuat Web Dengan HTML
Script Membuat Web Dengan HTML
Script Membuat Web Dengan HTML - HyperText Markup Language (HTML) adalah sebuah bahasa yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.
Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. Membuat Web Dengan HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Struktur Dokumen HTML
<HTML>
<HEAD>
<TITLE>Struktur Dokumen HTML</TITLE>
</HEAD>
<BODY>
Halo, apa kabar ?
</BODY>
</HTML>
<HEAD>
<TITLE>Struktur Dokumen HTML</TITLE>
</HEAD>
<BODY>
Halo, apa kabar ?
</BODY>
</HTML>
Heading
<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>
Paragraf
<p>
PHP ditulis dan diperkenalkan pertama kali sekitar tahun 1994 oleh Rasmus Lerdorf melalui situsnya untuk mengetahui siapa saja yang telah mengakses ringkasan online-nya. PHP merupakan salah satu bahasa skrip yang terbilang baru dan tersedia secara bebas dan masih memungkinkan untuk dikembangkan lebih lanjut. PHP dapat diintegrasikan ke dalam web server, atau dapat berperan sebagai program CGI yang terpisah.
</p>
<p>
PHP ditulis dan diperkenalkan pertama kali sekitar tahun 1994 oleh Rasmus Lerdorf melalui situsnya untuk mengetahui siapa saja yang telah mengakses ringkasan online-nya. PHP merupakan salah satu bahasa skrip yang terbilang baru dan tersedia secara bebas dan masih memungkinkan untuk dikembangkan lebih lanjut. PHP dapat diintegrasikan ke dalam web server, atau dapat berperan sebagai program CGI yang terpisah.
</p>
Blockquote
<BLOCKQUOTE>
PHP ditulis dan diperkenalkan pertama kali sekitar tahun 1994 oleh Rasmus Lerdorf melalui situsnya untuk mengetahui siapa saja yang telah mengakses ringkasan online-nya. PHP merupakan salah satu bahasa skrip yang terbilang baru dan tersedia secara bebas dan masih memungkinkan untuk dikembangkan lebih lanjut. PHP dapat diintegrasikan ke dalam web server, atau dapat berperan sebagai program CGI yang terpisah.
</BLOCKQUOTE>
<BLOCKQUOTE>
PHP ditulis dan diperkenalkan pertama kali sekitar tahun 1994 oleh Rasmus Lerdorf melalui situsnya untuk mengetahui siapa saja yang telah mengakses ringkasan online-nya. PHP merupakan salah satu bahasa skrip yang terbilang baru dan tersedia secara bebas dan masih memungkinkan untuk dikembangkan lebih lanjut. PHP dapat diintegrasikan ke dalam web server, atau dapat berperan sebagai program CGI yang terpisah.
</BLOCKQUOTE>
Preformatted Text
<PRE>
------------------------
Nama : PHP MySQL Alamat : Freescriptweb.com
Email : Freescriptweb.com
------------------------
</PRE>
<PRE>
------------------------
Nama : PHP MySQL Alamat : Freescriptweb.com
Email : Freescriptweb.com
------------------------
</PRE>
Break
------------------------ <BR>
Nama : PHP MySQL <BR> Alamat : Freescriptweb.com <BR>
Email : Freescriptweb.com <BR>
------------------------ <BR>
------------------------ <BR>
Nama : PHP MySQL <BR> Alamat : Freescriptweb.com <BR>
Email : Freescriptweb.com <BR>
------------------------ <BR>
Font
<font size=”1” color=”red” face=”arial”>huruf arial ukuran satu</font><br>
<font size=”2” color=”#00ff00” face=”verdana”>huruf verdana ukuran Dua</font><br>
<font size=”3” color=”#0000ff” face=”tahoma”>huruf tahoma ukuran Tiga</font><br>
<b>cetak tebal</b><br>
<i>cetak miring</i><br>
<u>cetak garis bawah</u><br>
<font size=”1” color=”red” face=”arial”>huruf arial ukuran satu</font><br>
<font size=”2” color=”#00ff00” face=”verdana”>huruf verdana ukuran Dua</font><br>
<font size=”3” color=”#0000ff” face=”tahoma”>huruf tahoma ukuran Tiga</font><br>
<b>cetak tebal</b><br>
<i>cetak miring</i><br>
<u>cetak garis bawah</u><br>
Link
Buat file dengan nama : halaman1.html :
<H1>Halaman 1</H1>
<A HREF=”halaman2.html”>Klik di sini</A> Pindah ke halaman 2
Buat file lain dengan nama : halaman2.html :
<H1>Halaman 2</H1>
<A HREF=”halaman1.html”>Klik di sini</A> Pindah ke halaman 1
Membuat daftar/list
Buat file dengan nama : halaman1.html :
<H1>Halaman 1</H1>
<A HREF=”halaman2.html”>Klik di sini</A> Pindah ke halaman 2
Buat file lain dengan nama : halaman2.html :
<H1>Halaman 2</H1>
<A HREF=”halaman1.html”>Klik di sini</A> Pindah ke halaman 1
Membuat daftar/list
Sebuah daftar dapat memiliki penomoran atau hanya sebuah simbol berupa lingkaran atau bentuk lainnya. Dalam HTML, daftar yang menggunakan penomoran disebut dengan ordered list dan yang menggunakan simbol disebut dengan unordered list.
Ordered List
Ordered list atau Daftar berurutan dapat dibuat dengan menggunakan tag
<ol> (singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan dari list item). Sebagai contoh, perhatikan kode HTML berikut :
<h2>Yang harus dilakukan hari ini</h2>
<ol>
<li>Pergi ke pasar</li>
<li>Buat tutorial HTML</li>
<li>Mengerjakan tugas kuliah</li>
</ol>
Ordered list atau Daftar berurutan dapat dibuat dengan menggunakan tag
<ol> (singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan dari list item). Sebagai contoh, perhatikan kode HTML berikut :
<h2>Yang harus dilakukan hari ini</h2>
<ol>
<li>Pergi ke pasar</li>
<li>Buat tutorial HTML</li>
<li>Mengerjakan tugas kuliah</li>
</ol>
Penomoran daftar akan dilakukan secara otomatis ketika anda menambahkan daftar item.
Unordered List
Berbeda dengan daftar berurut, unordered list akan menandai setiap item dengan simbol. Untuk membuat daftar tidak berurut kita gunakan tag <ul> dan harus diapit dengan tag <li>.
Jika kita modifikasi contoh sebelumnya dengan merubah <ol> menjadi <ul> maka yang akan kita dapat adalah seperti berikut :
<h2>Yang harus dilakukan hari ini</h2>
<ul>
<li>Pergi ke pasar</li>
<li>Buat tutorial HTML</li>
<li>Mengerjakan tugas kuliah</li>
</ul>
Secara default, item akan ditandai dengan lingkaran.
Berbeda dengan daftar berurut, unordered list akan menandai setiap item dengan simbol. Untuk membuat daftar tidak berurut kita gunakan tag <ul> dan harus diapit dengan tag <li>.
Jika kita modifikasi contoh sebelumnya dengan merubah <ol> menjadi <ul> maka yang akan kita dapat adalah seperti berikut :
<h2>Yang harus dilakukan hari ini</h2>
<ul>
<li>Pergi ke pasar</li>
<li>Buat tutorial HTML</li>
<li>Mengerjakan tugas kuliah</li>
</ul>
Secara default, item akan ditandai dengan lingkaran.
Definition List
Berbeda dengan Ordered List dan Unordered List yang memiliki struktur sama, Data list memiliki struktur tersendiri. Biasanya data list ini digunakan untuk membuat daftar istilah beserta definisinya seperti halnya dalam kamus.
<dl>
<dt>Test</dt>
<dd>Test</dd>
</dl>
Tag dt (definition term) digunakan untuk menampung istilah yang akan didefinisikan, dan tag dd digunakan untuk menuliskan definisi dari dt sebelumnya. Berikut contoh penggunaan dari Definition List :
<dl>
<dt>Manga</dt>
<dd>Manga (baca: man-ga, atau ma-ng-ga) merupakan kata komik dalam bahasa Jepang; di luar Jepang, kata tersebut digunakan khusus untuk membicarakan tentang komik Jepang. </dd>
<dt>Mangaka</dt>
</dd>Mangaka (baca: man-ga-ka, atau ma-ng-ga-ka) adalah orang yang menggambar manga</dd>
</dl>
Berbeda dengan Ordered List dan Unordered List yang memiliki struktur sama, Data list memiliki struktur tersendiri. Biasanya data list ini digunakan untuk membuat daftar istilah beserta definisinya seperti halnya dalam kamus.
<dl>
<dt>Test</dt>
<dd>Test</dd>
</dl>
Tag dt (definition term) digunakan untuk menampung istilah yang akan didefinisikan, dan tag dd digunakan untuk menuliskan definisi dari dt sebelumnya. Berikut contoh penggunaan dari Definition List :
<dl>
<dt>Manga</dt>
<dd>Manga (baca: man-ga, atau ma-ng-ga) merupakan kata komik dalam bahasa Jepang; di luar Jepang, kata tersebut digunakan khusus untuk membicarakan tentang komik Jepang. </dd>
<dt>Mangaka</dt>
</dd>Mangaka (baca: man-ga-ka, atau ma-ng-ga-ka) adalah orang yang menggambar manga</dd>
</dl>
Nested List/Daftar bersarang
Sebuah daftar bisa saja memiliki daftar lagi di dalam itemnya, atau biasa kita sebut dengan daftar/list bersarang (nested list). Contohnya seperti pada latihan yang akan kita buat berikut. Buat file baru dengan nama file latihan-list.html lalu ketikkan kode HTML berikut
<!DOCTYPE HTML>
<HTML>
<head>
<title>List/Daftar</title>
</head>
<body>
<h2>Yang harus dilakukan hari ini</h2>
<ol>
<li>Pergi ke pasar
<ul>
<li>Beli sayuran</li>
<li>Beli kertas
<ol>
<li>A4</li>
<li>Legal</li>
</ol>
</li>
<li>Beli tinta</li>
</ul>
</li>
<li>Buat tutorial HTML</li>
<li>Mengerjakan tugas kuliah</li>
</ol>
</body>
</HTML>
Yang perlu anda perhatikan adalah di mana anda meletakkan tag <ol>atau <ul> jika anda ingin menempatkannya pada suatu item, yaitu sebelum penutup tag list item (</li>). Daftar seperti ini biasa digunakan untuk pembuatan menu website, atau keperluan lainnya yang memang membutuhkan penomoran atau sesuatu yang memiliki poin-poin.
Sebuah daftar bisa saja memiliki daftar lagi di dalam itemnya, atau biasa kita sebut dengan daftar/list bersarang (nested list). Contohnya seperti pada latihan yang akan kita buat berikut. Buat file baru dengan nama file latihan-list.html lalu ketikkan kode HTML berikut
<!DOCTYPE HTML>
<HTML>
<head>
<title>List/Daftar</title>
</head>
<body>
<h2>Yang harus dilakukan hari ini</h2>
<ol>
<li>Pergi ke pasar
<ul>
<li>Beli sayuran</li>
<li>Beli kertas
<ol>
<li>A4</li>
<li>Legal</li>
</ol>
</li>
<li>Beli tinta</li>
</ul>
</li>
<li>Buat tutorial HTML</li>
<li>Mengerjakan tugas kuliah</li>
</ol>
</body>
</HTML>
Yang perlu anda perhatikan adalah di mana anda meletakkan tag <ol>atau <ul> jika anda ingin menempatkannya pada suatu item, yaitu sebelum penutup tag list item (</li>). Daftar seperti ini biasa digunakan untuk pembuatan menu website, atau keperluan lainnya yang memang membutuhkan penomoran atau sesuatu yang memiliki poin-poin.
Gambar
<IMG SRC=”kupukupu.gif” ALT=”Ini gambar kupu-kupu”>
Tabel
<TABLE BORDER=1>
<CAPTION>Judul Tabel</CAPTION>
<TR>
<TH>Judul Kolom 1</TH>
<TH>Judul Kolom 2</TH>
</TR>
<TR>
<TD>Baris 1, Kolom 1</TD>
<TD>Baris 1, Kolom 2</TD>
</TR>
<TR>
<TD>Baris 2, Kolom 1</TD>
<TD>Baris 2, Kolom 2</TD>
</TR>
</TABLE>
Background
a.Background Warna
Pada tag <BODY> ditambahkan BGCOLOR=warna, contohnya :
<BODY BGCOLOR=”yellow”>
b.Background Gambar
Pada tag <BODY> ditambahkan BACKGROUND=nama_file, contohnya :
<BODY BACKGROUND=”kupukupu.gif”
<IMG SRC=”kupukupu.gif” ALT=”Ini gambar kupu-kupu”>
Tabel
<TABLE BORDER=1>
<CAPTION>Judul Tabel</CAPTION>
<TR>
<TH>Judul Kolom 1</TH>
<TH>Judul Kolom 2</TH>
</TR>
<TR>
<TD>Baris 1, Kolom 1</TD>
<TD>Baris 1, Kolom 2</TD>
</TR>
<TR>
<TD>Baris 2, Kolom 1</TD>
<TD>Baris 2, Kolom 2</TD>
</TR>
</TABLE>
Background
a.Background Warna
Pada tag <BODY> ditambahkan BGCOLOR=warna, contohnya :
<BODY BGCOLOR=”yellow”>
b.Background Gambar
Pada tag <BODY> ditambahkan BACKGROUND=nama_file, contohnya :
<BODY BACKGROUND=”kupukupu.gif”
Memahami Tag div (Division)
Anda dapat membuat suatu group dari tag-tag HTML yang anda buat dengan menggunakan tag <div>, seperti pada contoh kasus berikut : Setiap website/weblog yang anda buka, jika diperhatikan pasti memiliki empat bagian/group. Keempat bagian/group ini antara lain :
Anda dapat membuat suatu group dari tag-tag HTML yang anda buat dengan menggunakan tag <div>, seperti pada contoh kasus berikut : Setiap website/weblog yang anda buka, jika diperhatikan pasti memiliki empat bagian/group. Keempat bagian/group ini antara lain :
Header
Bagian kepala website yang berisi logo website, nama website, slogan website, menu website dan lainnya.
Content
Berisi isi dari website itu sendiri, jika website berupa weblog, maka contentnya berisi postingan terbaru atau informasi lainnya.
Sidebar
Berada di samping Content dan biasanya berisi iklan, kategori artikel dan widget atau hiasan situs lainnya.
Bagian kepala website yang berisi logo website, nama website, slogan website, menu website dan lainnya.
Content
Berisi isi dari website itu sendiri, jika website berupa weblog, maka contentnya berisi postingan terbaru atau informasi lainnya.
Sidebar
Berada di samping Content dan biasanya berisi iklan, kategori artikel dan widget atau hiasan situs lainnya.
Footer
Bagian kaki dari website yang pada umumnya diisi dengan tag website tersebut, misalnya copyright © 2013 by http://phpmu.com. Lebih sederhananya, bayangkanlah Surat resmi yang memiliki Kop surat, badan surat dan penutup surat.
Bagian kaki dari website yang pada umumnya diisi dengan tag website tersebut, misalnya copyright © 2013 by http://phpmu.com. Lebih sederhananya, bayangkanlah Surat resmi yang memiliki Kop surat, badan surat dan penutup surat.
Dalam HTML, kita dapat membagi bagian-bagian tersebut dengan menggunakan tag <div> (division/bagian) dan untuk menamai setiap div kita gunakan atribut id atau class. Berikut contoh penggunaan tag div jika kita terapkan pada bagian-bagian website yang telah kita sebutkan sebelumnya. Atribut ID dan Class tidak hanya digunakan dalam tag div saja melainkan dapat digunakan di setiap tag HTML untuk memberikan penamaan sebagai referensi jika diperlukan.
<div id=‟header‟> </div>
<div id=‟content‟> </div>
<div id=‟sidebar‟> </div>
<div id=‟footer‟> </div>
Jika anda menampilkannya pada browser, anda tidak akan melihat apa-apa karena tag div tidak akan menampilkan efek visual. Tag ini hanya digunakan untuk membuat dokumen HTML lebih terstruktur dengan membagi-bagi dokumen ke dalam bagian-bagian yang lebih spesifik.
Pakai ID atau Class?
Atribut ID dan Class digunakan untuk menamai tag HTML. Lalu apa perbedaan dari keduanya?
ID
Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Perhatikan contoh berikut :
<div id=‟menu‛>
<ul id=‟menu‛>
<li>Beranda</li>
<li>Tutorial</li>
</ul>
</div>
Class
Class digunakan untuk penamaan elemen yang memilik karakteristik/struktur sama dan dapat digunakan berulang kali dalam Kode HTML. Sebagai contoh, perhatikan kode HTML berikut :
<ul id=‟menu‛>
<li class=‟merah‛>Beranda</li>
<li>Tutorial</li>
<li class=‟merah‛>Berita</li>
<li>Video</li>
</ul>
Kesimpulannya adalah, ketika anda memiliki beberapa elemen dengan karakter/format yang sama, gunakan Class sebagai penamaannya dan Gunakan ID untuk elemen yang berbeda dan membutuhkan tanda pengenal lebih spesifik.
Class digunakan untuk penamaan elemen yang memilik karakteristik/struktur sama dan dapat digunakan berulang kali dalam Kode HTML. Sebagai contoh, perhatikan kode HTML berikut :
<ul id=‟menu‛>
<li class=‟merah‛>Beranda</li>
<li>Tutorial</li>
<li class=‟merah‛>Berita</li>
<li>Video</li>
</ul>
Kesimpulannya adalah, ketika anda memiliki beberapa elemen dengan karakter/format yang sama, gunakan Class sebagai penamaannya dan Gunakan ID untuk elemen yang berbeda dan membutuhkan tanda pengenal lebih spesifik.
Memahami hubungan Child, Parent dan Siblings
Ketika suatu tag memiliki tag/konten didalamnya maka hubungan antar tag-tag tersebut disebut dengan child-parent dan sibling. Perhatikan contoh berikut :
<div id=‟wrapper‛>
<div id=‟content‛>
<div id=‟article‛></div>
<div id=‟sidebar‛></div>
</div>
</div>
Studi kasus 1 : Konversi desain ke HTML
Sebagai seorang web designer, Anda harus mampu menerjemahkan suatu desain web ke dalam bahasa HTML dan CSS. Proses penerjemahan dari desain ke dalam kode HTML ini disebut dengan Pembuatan Markup, yang dilanjutkan dengan proses Styling (Penambahan CSS yang akan kita pelajari pada Training selanjutnya).
Pesiapan
Sebelum kita mulai proses pembuatan markup untuk desain web, kita buat folder baru terlebih dahulu, agar pekerjaan kita rapih dan terstruktur. Buatlah folder baru dengan nama “Latihan Markup” dan buatlah file HTML baru dengan nama “latihan-markup.html”. Dalam folder tersebut buat lagi satu buah folder dengan nama “images” untuk menyimpan seluruh gambar yang diperlukan dalam file HTML yang kita buat.
Wrapper
Kita mulai dari pembuatan sebuah div untuk menampung seluruh konten situs yang akan dibuat. Saya akan menggunakan div dengan id wrapper. Nantinya div ini akan kita buat rata-tengah, jadi setiap browser di zoom-in atau di zoom-out, konten situs tetap berada di tengah.
<!DOCTYPE HTML>
<HTML>
<head>
<title>Latihan Markup</title>
</head>
<body>
<div id=‟wrapper‛>
</div>
</body>
</HTML>
Header
Sudah ada bayangan?, pertama kita buat sebuah div dengan nama id header (atau terserah anda). Biasanya di header terdapat logo, lalu Menu (kita buat dengan unordered list) dan terakhir sebuah text input untuk pencarian.
Semuanya telah kita pelajari pada saat sebelumnya. Jadi, Markup untuk bagian header adalah seperti berikut :
<div id=‟wrapper‛>
<div id=‟header‛>
<img src=‟logo.png‛ alt=‟logo‛ />
<ul id=‟menu-utama‛>
<li><a href=‟‟>Home</a></li>
<li><a href=‟‟>Tutorial</a></li>
<li><a href=‟‟>Video</a></li>
</ul>
<form>
<input type=‟text‛ name=‟search‛ />
</form>
</div>
</div>
Sebagai seorang web designer, Anda harus mampu menerjemahkan suatu desain web ke dalam bahasa HTML dan CSS. Proses penerjemahan dari desain ke dalam kode HTML ini disebut dengan Pembuatan Markup, yang dilanjutkan dengan proses Styling (Penambahan CSS yang akan kita pelajari pada Training selanjutnya).
Pesiapan
Sebelum kita mulai proses pembuatan markup untuk desain web, kita buat folder baru terlebih dahulu, agar pekerjaan kita rapih dan terstruktur. Buatlah folder baru dengan nama “Latihan Markup” dan buatlah file HTML baru dengan nama “latihan-markup.html”. Dalam folder tersebut buat lagi satu buah folder dengan nama “images” untuk menyimpan seluruh gambar yang diperlukan dalam file HTML yang kita buat.
Wrapper
Kita mulai dari pembuatan sebuah div untuk menampung seluruh konten situs yang akan dibuat. Saya akan menggunakan div dengan id wrapper. Nantinya div ini akan kita buat rata-tengah, jadi setiap browser di zoom-in atau di zoom-out, konten situs tetap berada di tengah.
<!DOCTYPE HTML>
<HTML>
<head>
<title>Latihan Markup</title>
</head>
<body>
<div id=‟wrapper‛>
</div>
</body>
</HTML>
Header
Sudah ada bayangan?, pertama kita buat sebuah div dengan nama id header (atau terserah anda). Biasanya di header terdapat logo, lalu Menu (kita buat dengan unordered list) dan terakhir sebuah text input untuk pencarian.
Semuanya telah kita pelajari pada saat sebelumnya. Jadi, Markup untuk bagian header adalah seperti berikut :
<div id=‟wrapper‛>
<div id=‟header‛>
<img src=‟logo.png‛ alt=‟logo‛ />
<ul id=‟menu-utama‛>
<li><a href=‟‟>Home</a></li>
<li><a href=‟‟>Tutorial</a></li>
<li><a href=‟‟>Video</a></li>
</ul>
<form>
<input type=‟text‛ name=‟search‛ />
</form>
</div>
</div>
Content
Penamaan dengan Class pada div. Sebelumnya kita tulis sebuah div untuk menampung artikel yang akan kita buat dengan nama “daftar-artikel”.
<div id=‟daftar-artikel‛>
<div class=‟artikel‛>
</div>
</div>
Di dalam artikel ini terdapat sebuah gambar, judul artikel, tanggal, ringkasan dan sebuah link.
<div id=‟daftar-artikel‛>
<div class=‟artikel‛>
<img src=‟images/gambar-artikel.jpg‛ alt= „Gambar Artikel‛ />
<h1> Gates vs Jobs</h1>
<b>Feb 12, 2007</b><b>Views : 3,487,497</b>
<p>Bill Gates and Steve Jobs square off in the clean white virtual world </p>
<a href=‛‛>Watch This</a>
</div>
</div>
Penamaan dengan Class pada div. Sebelumnya kita tulis sebuah div untuk menampung artikel yang akan kita buat dengan nama “daftar-artikel”.
<div id=‟daftar-artikel‛>
<div class=‟artikel‛>
</div>
</div>
Di dalam artikel ini terdapat sebuah gambar, judul artikel, tanggal, ringkasan dan sebuah link.
<div id=‟daftar-artikel‛>
<div class=‟artikel‛>
<img src=‟images/gambar-artikel.jpg‛ alt= „Gambar Artikel‛ />
<h1> Gates vs Jobs</h1>
<b>Feb 12, 2007</b><b>Views : 3,487,497</b>
<p>Bill Gates and Steve Jobs square off in the clean white virtual world </p>
<a href=‛‛>Watch This</a>
</div>
</div>
Sidebar
Setiap item dalam sidebar memiliki judul. Pertama terdapat deskripsi singkat tentang situs, dan sebuah menu navigasi berdasarkan kategori. Sama seperti menu sebelumnya, kita buat dengan menggunakan unordered list.
<div id=‟sidebar‛>
<h2>Who we are?</h2>
<p>phpmu.com adalah tempat anda berbagi pengetahuan seputar web design serta segala informasi yang berhubungan dengan internet</p>
<h2>Artikel berdasarkan kategori</h2>
<ul>
</ul>
</div>
<li><a href=‟‟>HTML dan CSS</a></li>
<li><a href=‟‟>Javascript</a></li>
<li><a href=‚‚>Photoshop</a></li>
<li><a href=‚‚>Inspirasi</a></li>
<li><a href=‚‚>Berita</a></li>
<li><a href=‚‚>Off Topic</a></li>
</ul>
</div>
<li><a href=‟‟>Javascript</a></li>
<li><a href=‚‚>Photoshop</a></li>
<li><a href=‚‚>Inspirasi</a></li>
<li><a href=‚‚>Berita</a></li>
<li><a href=‚‚>Off Topic</a></li>
</ul>
</div>
Footer
Bagian ini hanya mempunyai text copyright :
<div id=‟footer‛>
<p>phpmu.com copyright 2013 by Robby Prihandaya</p>
</div>
Bagian ini hanya mempunyai text copyright :
<div id=‟footer‛>
<p>phpmu.com copyright 2013 by Robby Prihandaya</p>
</div>
Hasil
<!DOCTYPE HTML>
<HTML>
<head> <title>Latihan Markup</title> </head>
<body>
<div id=‚wrapper‛>
<div id=‚header‛>
<img src=‚logo.png‛ alt=‚logo‛ />
<ul id=‚menu-utama‛>
<li><a href=‚‚>Home</a></li>
<li><a href=‚‚>Tutorial</a></li>
<li><a href=‚‚>Video</a></li>
</ul>
<form>
<input type=‚text‛ name=‚search‛ />
</form>
</div>
<div id=‚daftar-artikel‛>
<div class=‚artikel‛>
<img src=‚images/gambar-artikel.jpg‛ />
<h1> Gates vs Jobs</h1>
<b>Feb 12, 2007</b><b>Views : 3,487,497</b>
<p>Bill Gates and Steve Jobs square off in the clean white virtual world of the iconic Mac ads</p>
<a href=‚‚>Watch This</a>
</div>
<div class=‚artikel‛>
<img src=‚images/gambar-artikel.jpg‛ />
<h1> Gates vs Jobs</h1>
<b>Feb 12, 2007</b><b>Views : 3,487,497</b>
<p>Bill Gates and Steve Jobs square off in the clean white virtual world of the iconic Mac ads</p>
<a href=‚‚>Watch This</a>
</div>
<div class=‚artikel‛>
<img src=‚images/gambar-artikel.jpg‛ />
<h1> Gates vs Jobs</h1>
<b>Feb 12, 2007</b><b>Views : 3,487,497</b>
<p>Bill Gates and Steve Jobs square off in the clean white virtual world of the iconic Mac ads</p>
<a href=‚‚>Watch This</a>
</div>
</div>
<div id=‚sidebar‛>
<h2>Who we are?</h2>
<p>Silahkan download script web gratis di freescriptsweb.com</p>
<h2>Artikel berdasarkan kategori</h2>
<ul>
<li><a href=‚#‚>HTML dan CSS</a></li>
<li><a href=‚#‚>Javascript</a></li>
<li><a href=‚#‚>Photoshop</a></li>
<li><a href=‚#‚>Inspirasi</a></li>
<li><a href=‚#‚>Berita</a></li>
<li><a href=‚#‚>Off Topic</a></li>
</ul>
</div>
<div id=‟footer’>
<p>copyright 2016 freescriptsweb.com</p>
</div>
</div>
</body>
</HTML>
File HTML yang ditampilkan akan terlihat plain/polos. Tapi inilah tugas dari HTML yakni Markup/Formatting.
<!DOCTYPE HTML>
<HTML>
<head> <title>Latihan Markup</title> </head>
<body>
<div id=‚wrapper‛>
<div id=‚header‛>
<img src=‚logo.png‛ alt=‚logo‛ />
<ul id=‚menu-utama‛>
<li><a href=‚‚>Home</a></li>
<li><a href=‚‚>Tutorial</a></li>
<li><a href=‚‚>Video</a></li>
</ul>
<form>
<input type=‚text‛ name=‚search‛ />
</form>
</div>
<div id=‚daftar-artikel‛>
<div class=‚artikel‛>
<img src=‚images/gambar-artikel.jpg‛ />
<h1> Gates vs Jobs</h1>
<b>Feb 12, 2007</b><b>Views : 3,487,497</b>
<p>Bill Gates and Steve Jobs square off in the clean white virtual world of the iconic Mac ads</p>
<a href=‚‚>Watch This</a>
</div>
<div class=‚artikel‛>
<img src=‚images/gambar-artikel.jpg‛ />
<h1> Gates vs Jobs</h1>
<b>Feb 12, 2007</b><b>Views : 3,487,497</b>
<p>Bill Gates and Steve Jobs square off in the clean white virtual world of the iconic Mac ads</p>
<a href=‚‚>Watch This</a>
</div>
<div class=‚artikel‛>
<img src=‚images/gambar-artikel.jpg‛ />
<h1> Gates vs Jobs</h1>
<b>Feb 12, 2007</b><b>Views : 3,487,497</b>
<p>Bill Gates and Steve Jobs square off in the clean white virtual world of the iconic Mac ads</p>
<a href=‚‚>Watch This</a>
</div>
</div>
<div id=‚sidebar‛>
<h2>Who we are?</h2>
<p>Silahkan download script web gratis di freescriptsweb.com</p>
<h2>Artikel berdasarkan kategori</h2>
<ul>
<li><a href=‚#‚>HTML dan CSS</a></li>
<li><a href=‚#‚>Javascript</a></li>
<li><a href=‚#‚>Photoshop</a></li>
<li><a href=‚#‚>Inspirasi</a></li>
<li><a href=‚#‚>Berita</a></li>
<li><a href=‚#‚>Off Topic</a></li>
</ul>
</div>
<div id=‟footer’>
<p>copyright 2016 freescriptsweb.com</p>
</div>
</div>
</body>
</HTML>
File HTML yang ditampilkan akan terlihat plain/polos. Tapi inilah tugas dari HTML yakni Markup/Formatting.
Demikianlah tutorial membuat web dengan HTML, semoga dapat bermanfaat buat rekan-rekan. Saran dan masukan silahkan tinggalkan komentar rekan-rekan pada form dibawah.
freescriptsweb php mysql download script php untuk aplikasi berbasis web, sistem pakar, sistem pendukung keputusan, sms gateway, e-commerce, belajar php, tutorial php, membuat web sederhana, web php, membuat web dengan html, cara membuat web dengan php, login php, tutorial design web, contoh data mining, data mining, clustering data mining, metode fuzzy, metode ahp, metode promethe, metode topsis, metode saw, contoh program sederhana dengan php, fungsi php, siakad, website media sosial, video tutorial php.
freescriptsweb php mysql download script php untuk aplikasi berbasis web, sistem pakar, sistem pendukung keputusan, sms gateway, e-commerce, belajar php, tutorial php, membuat web sederhana, web php, membuat web dengan html, cara membuat web dengan php, login php, tutorial design web, contoh data mining, data mining, clustering data mining, metode fuzzy, metode ahp, metode promethe, metode topsis, metode saw, contoh program sederhana dengan php, fungsi php, siakad, website media sosial, video tutorial php.
0 Response to " Membuat Web Dengan HTML "
Post a Comment