Cara Membuat Website Dengan Html Di Notepad

Langkah 3: Menyimpan dan Membuka Halaman Web

Setelah kamu menambahkan sejumlah konten, simpan file dan buka dengan browser web. Kamu sekarang harus melihat konten yang kamu buat tadi.

Sublangkah a. Menambahkan Tag Pembuka dan Penutup

Selanjutnya, kamu perlu menambahkan tag pembuka dan tag penutup .

Langkah 3 - Menyimpan Dokumen HTML

Setelah kamu puas dengan halaman HTML, sekarang waktunya menyimpannya. Klik ‘File’ lalu pilih ‘Save As’. Kemudian, di kotak ‘Save as type’, pilih ‘All Files’. Masukkan nama file dengan ekstensi .html, seperti belajar.html, lalu klik ‘Save’.

Download Template HTML dan CSS Bootstrap

Dalam panduan cara membuat website dengan html ini kita akan menggunakan salah satu template dari Start Bootstrap. Tenang, template yang digunakan gratis dan mudah untuk dioptimalkan serta dirancang dengan sangat baik.

Yuk kita download terlebih dahulu templatenya.

Langkah 1: Buka website startbootstrap.com untuk mendapatkan template html dan css Start Bootstrap secara gratis dan bebas digunakan.

Langkah 2: Klik Browse Template & Themes.

Langkah 3: Pilih salah satu template sesuai kebutuhan Anda, dalam demo ini kami memilih template Creative karena gratis dan cukup simple jika dilihat dari tampilan yang ada.

Langkah 4: Kemudian klik Free Download dan simpan filenya di lokasi yang mudah ditemukan.

Langkah 5: Setelah selesai di download, buka file tersebut dan pindahkan isinya ke direktori utama akun hosting website Anda. Sebagai permulaan, Anda bisa menggunakan web hosting murah untuk percobaan menerapkan cara membuat website dengan html ini.

Langkah 6: Setelah selesai dipindahkan, buka file tersebut. Caranya klik dua kali di file Index.html dan nantinya akan terbuka di browser chrome yang Anda gunakan.

Selanjutnya kita lanjutkan ke pembahasan selanjutnya.

Langkah 1 - Membuka Notepad

Untuk membuka Notepad, kamu bisa klik menu Start, ketik ‘Notepad’ di kotak pencarian, dan kemudian klik pada aplikasi Notepad yang muncul di hasil pencarian.

Membuat Desain Website Berbasis HTML Dengan Notepad++

Pengenalan Tag Pada HTML

Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu diawali dengan dan ditutup dengan dimana x adalah perintah dari apa yang kita inginkan.

My First HTML Project

WELCOME TO MY WEBSITE

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:

Gambar 1. Judul Tab Halaman

Tag P, Br dan Hr

Ini adalah paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga.

Ini adalah paragraf kerdua, yang berisi garis horizontal

Ini adalah garis horizontal.

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:

Gambar 2. Mengatur Paragraf

Tag Heading

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:

Gambar 3. Ukuran Huruf

format tulisan</titele></p><p><small> teks small </small><br></p><p><big> teks big</big><br></p><p><b> teks tebal </b><br></p><p><i> teks miring </i><br></p><p><u> teks bergaris bawah </u><br></p><p>Contoh superscript : x <sup>2</sup><br></p><p>Contoh subscript : H<sub>2</sub>O<br></p><p><strike> Ini teks tercoret </strike><br></p><p><font size = 5 face = verdana></p><p><body BGCOLOR =”#00FF00″></p><p>Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:</p><p>Gambar 4. Format tulisan</p><p><title> From komentar

Silahkan Berkomentar :

Komentar

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 5 berikut:

Gambar 5. From komentar

warna-warna

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 6 berikut:

Judul tab

Ini hyperlink ke wordpress

WordPress

Klik dan masuk ke yahoo Yahoo

Masuk ke facebook anda

Facebook

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 7 berikut:

Gambar 7 link halaman web lain

Judul tab

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 8 berikut:

Gambar 8. Link Antar Bagian Dalam Web

Silahkan mengisi data yang ada di bawah untuk masuk ke website saya :)

warna-warna

Hijau

Kuning

Merah

Abu-abu

Biru

Orange

Cokelat

Biru muda

Merah muda

Nama Anda:

Email Atau telepon:

Alamat:

Tanggal Lahir

http://MP3/Greenday%20-%20I%20walk%20Alone.swf

….. Dalam penggisiannya harus jujur yaa, jangan bo’onk 🙂 ……

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, background dapat anda ganti sendiri sesuai dengan kesukaan anda.

Hasilnya seperti pada gambar 9 berikut:

Gambar 9. Halaman login

~ Selamat datang di website pertama saya ~

~Dasar-dasar Membuat Website Berbasis HTML~

Nah, anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???

Nggak ada kan??? nah, maka dari itu, saya, Rian hidayat, akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum itu,? ada yang perlu diketahui.

tag <>

digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.

Tag container adalah tag yang berisi text yang akan ditampilkan

setelah tag ditutup. Contoh: <td> text yang ditampilkan

Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.

Tag yang digunakan untuk mengakhiri sintak punya karakter /(slash) sebelum sintaknya, contohnya: <td> </td>

Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.

LANGKAH 1

MEMBUKA NOTEPAD.

LANGKAH 2

MENGETIKKAN SINTAK/SYNTAX.

Berikut ini adalah syntax dasar yang membentuk suatu HTML.

pertama, ketikkan
<html>

tekan enter, kemudian ketik
<head>
Dalam container head, kita bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi seperti ini:
<head> <title> judul halaman web </title> </head>

Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.
Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:

<html>
<head>
<title> Judul Halaman Web </title>

</body>
?

Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
<body>
Contoh text yang ditampilin di halaman web, By: Rian Hidayat
</body>
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
<html>
<head>

<title> Judul Halaman Web </title>

</head>
<body>
Contoh text yang ditampilkan di halaman web, By: Rian Hidayat

kalo udah, sekarang save dengan nama dasarHTML.

kalo udah disave, buka data yang tadi di save.
?
Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???
Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.

</p><p>Enter your comments here…</p><p><input type=”submit” value=”coments” /></p><p><input type=”reset” value=”Reset” /></p><p><td width=’200′ height=’700′ bgcolor=” valign=’top’></p><p><table align=”left” width=’200′ border=’0′ bgcolor=” bordercolor=’green’></p><p><td><p><a href=”http://www.facebook.com/” target=”_blank” title=”Masuk ke Facebook”> <img src=”gambar/facebook.ico” border=”0″ width=”90″ height=”70″/></a></td></p><p><td><p><a href=”http://www.youtube.com/” target=”_blank” title=”Masuk ke youtube”> <img src=”gambar/youtube.ico” border=”0″ width=”90″ height=”70″/></a><td></p><p><table align=’left’ width=’200′ border=’0′ bgcolor=” bordercolor=’green’></p><p><td width=”200″ valign=”top”><font color=”#FFFF00″ face=”Cooper Std Black”></p><p><li><a href=”buat%20ayat%20bergerak.html” title=’membuat tulisan bergerak’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat tulisan bergerak</a></font></li></p><p><li><a href=’Menbuat%20from%20komentar.html’ title=’membuat from komentar’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat from komentar</a></font></li></p><p><li><a href=’Membuat%20login.html’ title=’membuat halaman login’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat halaman login</a></font></li></p><p></ul></font></table></td></p><p>s<td colspan=’2’background=’gambar/zz.jpg’><center><b><marquee><font face=”Cooper Std Black” color=”#00CCFF” size=”7″>~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td></tr></p><p></table><div style=”position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;”></p><p><img border=”0″ src=”gambar/twitter.ico” title=”follow my twitter” alt=”animasi bergerak gif” /></a><small><center></div></p><p><div style=”position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;”><a href=’#top’></p><p><img border=”0″ src=”gambar/top.png” width=’50’ height=’50’ title=”Kembali ke atas” alt=”animasi bergerak gif” /></a><small><center></p><p><div style=”position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;”><a href=’login.html’></p><p><img border=”0″ src=”gambar/c.png” width=’40’ height=’40’ title=”Kembali ke login” alt=”animasi bergerak gif” /></a><small><center></div></p><p><body background=’gambar/yy.jpg’></body></p><p>http://MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf</html></p><p>Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.</p><p>Hasilnya akan seperti pada gambar 10 berikut:</p><p>Gambar 10. Halaman awal</p><p><title>Profilku</title></p><p><link rel=’icon’ href=’gambar/alien.ico’></p><p><center><table width=’1000′ height=’400′ border=”0″ background=’gambar/xx.jpg’ cellpadding=”0″ cellspacing=”20″ ></p><p><td colspan=”2″ color=”white” align=’center’></p><p><img src=”gambar/1.png” width=”1000″ height=”400″></p><p><td colspan=’2′ background=’gambar/zz.jpg’ align=’left’ height=”20″></p><p><p><ul><ul><left><BLINK><b><font color=”#00CCFF” size=”5″><img src=’gambar/halo.gif’ border=’0′ width=’40’ height=’40’>~ Selamat datang di website pertama saya ~ <img src=’gambar/halo.gif’ border=’0′ width=’40’ height=’40’></font></BLINK></b></ul></ul></p></left></p><p><left><ul><a href=”home.html” title=”ke Rumah”><img src=’gambar/HOME.jpg’ BORDER=’0′ width=’80’ height=’30’></a></p><p><a href=”http://mp3skull.com/” title=”MP3″><img src=’gambar/MP3.jpg’ BORDER=’0′ width=’80’ height=’30’></font></a></p><p><a href=”profilku.html” title=”Profilku”><img src=’gambar/PROFIL.jpg’ BORDER=’0′ width=’90’ height=’30’></a></p><p><a href=”html_colors.html” title=”Kode Warna Pada HTML”><img src=’gambar/KODE WARNA.jpg’ BORDER=’0′ width=’120′ height=’30’></a></p><p><a href=”http://www.gametop.com/” title=”Tempat Game”><img src=’gambar/GAME.jpg’ BORDER=’0′ width=’80’ height=’30’></a></p><p><a href=”http://www.w3schools.com/html/html_intro.asp” title=”Tutorial HTML.w3schools.com”><img src=’gambar/TUTORIAL.jpg’ BORDER=’0′ width=’90’ height=’30’></a></p><p><a href=”kumpulan%20puisi.html” title=”kumpulan Kata-kata Mutiara”><img src=’gambar/KATA.jpg’ BORDER=’0′ width=’100′ height=’30’></a></ul></left></td></tr></p><p><tr><td width=’796′ height=’700′ background=’gambar/zz.jpg’ valign=’top’ ></p><p><p><table align=”center” border=”0″ bgcolor=”” cellpadding=”0″ cellspacing=”8″ ></p><p><td><tr><td colspan=”2″ align=”center”><font face=”Bauhaus 93″ size=”8″ color=”#0066FF”><b>PROFILKU</b></td></tr></p><p><P align=”center”><font color=”#00FFFF”></p><p><img src=”gambar/rian.JPG” border=”7″ width=”250″ height=”300″></p><p><tr><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>NAMA</p></b></td></p><p><td><font size=”5″color=”#00FFFF”>: Rian Hidayat</p></td></tr></p><p><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>ALAMAT</p></b></td></p><p><td><font size=”4″color=”#00FFFF”>: Weru, Sukoharjo</td></tr></p><p><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>TTL</p></b></td></p><p><td><font size=”5″color=”#00FFFF”>: Sukoharjo, 09-November-1993</td></tr></p><p><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>PEKERJAAN</p></b></td></p><p><td><font size=”5″color=”#00FFFF”>: Mahasiswa</td></tr></p><p><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>HOBY</p></b></td></p><p><td><font size=”5″color=”#00FFFF”>: Tidur</td></tr></p><p><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>NO.TELPONE</p></b></td></p><p><td><font size=”5″color=”#00FFFF”>: 085728282066</td></tr></p><p><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>EMAIL</p></b></td></p><p><td><font size=”5″color=”#00FFFF”>:hrian89@gmail.com</td></p><p><table><P align=”center”><font color=”#00FFFF”><img src=”gambar/bram.JPG” border=”7″ width=”250″ height=”300″></p></p><p><tr><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>NAMA</p></b></td></p><p><td><font size=”5″color=”#00FFFF”>: Bram Putra P.</p></td></tr></p><p><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>ALAMAT</p></b></td></p><p><td><font size=”4″color=”#00FFFF”>: Laweyan, Surakarta</td></tr></p><p><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>TTL</p></b></td></p><p><td><font size=”5″color=”#00FFFF”>: Surakarta, 13-April-1992</td></tr></p><p><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>PEKERJAAN</p></b></td></p><p><td><font size=”5″color=”#00FFFF”>: Mahasiswa</td></tr></p><p><td align=”right”><font size=”5″ color=”#00FFFF”><b><p align=’left’>NO.TELPONE</p></b></td></p><p><td><font size=”5″color=”#00FFFF”>: XXXXXXXXXXXXXX </td></p><p><td width=’200′ height=’700′ bgcolor=” valign=’top’></p><p><table align=”left” width=’200′ border=’0′ bgcolor=” bordercolor=’green’></p><p><tr align=’center’><td><p><a href=”http://www.facebook.com/” target=”_blank” title=”Masuk ke Facebook”> <img src=”gambar/facebook.ico” border=”0″ width=”90″ height=”70″/></a></td></p><p><td><p><a href=”http://www.youtube.com/” target=”_blank” title=”Masuk ke youtube”> <img src=”gambar/youtube.ico” border=”0″ width=”90″ height=”70″/></a><td></p><p><table align=’left’ width=’200′ border=’0′ bgcolor=” bordercolor=’green’></p><p><td width=”200″ valign=”top”><font color=”#FFFF00″ face=”Cooper Std Black”></p><p><ul><li><a href=”buat%20ayat%20bergerak.html” title=’membuat tulisan bergerak’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat tulisan bergerak</a></font></li></p><p><li><a href=’Menbuat%20from%20komentar.html’ title=’membuat from komentar’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat from komentar</a></font></li></p><p><li><a href=’Membuat%20login.html’ title=’membuat halaman login’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat halaman login</a></font></li></p><p></ul></font></table></td></tr></p><p><tr height=”50″><td colspan=’2′ background=’gambar/zz.jpg’><center><b><marquee><font face=”Cooper Std Black” color=”#00CCFF” size=”7″>~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td></p><p></tr></table><div style=”position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;”></p><p><img border=”0″ src=”gambar/twitter.ico” title=”follow my twitter” alt=”animasi bergerak gif” /></a><small><center></p><p><div style=”position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;”><a href=’#top’></p><p><img border=”0″ src=”gambar/top.png” width=’50’ height=’50’ title=”Kembali ke atas” alt=”animasi bergerak gif” /></a><small><center></div></p><p><div style=”position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;”><a href=’login.html’></p><p><img border=”0″ src=”gambar/c.png” width=’40’ height=’40’ title=”Kembali ke login” alt=”animasi bergerak gif” /></a><small><center></p><p><body background=’gambar/yy.jpg’></p><p>http://MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf</p><p>Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.</p><p>Hasilnya akan seperti pada gambar 11 berikut:</p><p>Gambar 11. Membuat data pribadi</p><p><title>Profilku</title></p><p><link rel=’icon’ href=’gambar/alien.ico’></p><p><table width=’1000′ height=’400′ border=”0″ background=’gambar/xx.jpg’ cellpadding=”0″ cellspacing=”20″ ></p><p><td colspan=”2″ color=”white” align=’center’></p><p><img src=”gambar/1.png” width=”1000″ height=”400″></p><p><td colspan=’2′ background=’gambar/zz.jpg’ align=’left’ height=”20″></p><p><p><ul><ul><left><BLINK><b><font color=”#00CCFF” size=”5″><img src=’gambar/halo.gif’ border=’0′ width=’40’ height=’40’>~ Selamat datang di website pertama saya ~ <img src=’gambar/halo.gif’ border=’0′ width=’40’ height=’40’></font></BLINK></b></ul></ul></p></left></p><p><ul><a href=”home.html” title=”ke Rumah”><img src=’gambar/HOME.jpg’ BORDER=’0′ width=’80’ height=’30’></a></p><p><a href=”http://mp3skull.com/” title=”MP3″><img src=’gambar/MP3.jpg’ BORDER=’0′ width=’80’ height=’30’></font></a></p><p><a href=”profilku.html” title=”Profilku”><img src=’gambar/PROFIL.jpg’ BORDER=’0′ width=’90’ height=’30’></a> <a href=”html_colors.html” title=”Kode Warna Pada HTML”><img src=’gambar/KODE WARNA.jpg’ BORDER=’0′ width=’120′ height=’30’></a></p><p><a href=”http://www.gametop.com/” title=”Tempat Game”><img src=’gambar/GAME.jpg’ BORDER=’0′ width=’80’ height=’30’></a> <a href=”http://www.w3schools.com/html/html_intro.asp” title=”Tutorial HTML.w3schools.com”><img src=’gambar/TUTORIAL.jpg’ BORDER=’0′ width=’90’ height=’30’></a> <a href=”kumpulan%20puisi.html” title=”kumpulan Kata-kata Mutiara”><img src=’gambar/KATA.jpg’ BORDER=’0′ width=’100′ height=’30’></a></p><p><td width=’796′ height=’700′ background=’gambar/zz.jpg’ valign=’top’ ></p><p><p><table align=”center” border=”0″ bgcolor=”” cellpadding=”0″ cellspacing=”8″ ></p><p><p><b><center><font face=”Bauhaus 93″ size=”7″ color=’#0000FF’>Galery</font></center></b></p><b></p><p><table color=”blue” align=”center” border=”9px”></p><p><tr><p align=”center”><font color=”#00FFFF” size=’6′>Album Kegiatan Teknisi</font></p><p><td><img src=”file:///D:/Tugas%20HTML/Gambar/a.png” border=”3″ width=”300″ height=”300″ /></td></p><p><td><img src=”file:///D:/Tugas%20HTML/Gambar/b.png” border=”3″ width=”300″ height=”300″ /></td></p><p><tr><td><img src=”file:///D:/Tugas%20HTML/Gambar/c.png” border=”3″ width=”300″ height=”300″ /></td></p><p><td><img src=”file:///D:/Tugas%20HTML/Gambar/d.png” border=”3″ width=”300″ height=”300″ /></td></p><p><tr><td><img src=”file:///D:/Tugas%20HTML/Gambar/e.png” border=”2″ width=”300″ height=”300″ /></td></p><p><td><img src=”file:///D:/Tugas%20HTML/Gambar/f.png” border=”3″ width=”300″ height=”300″ /></td></p></tr></p><p><td width=’200′ height=’700′ bgcolor=” valign=’top’></p><p><table align=”left” width=’200′ border=’0′ bgcolor=” bordercolor=’green’><tr align=’center’></p><p><td><p><a href=”http://www.facebook.com/” target=”_blank” title=”Masuk ke Facebook”> <img src=”gambar/facebook.ico” border=”0″ width=”90″ height=”70″/></a></td></p><p><td><p><a href=”http://www.youtube.com/” target=”_blank” title=”Masuk ke youtube”> <img src=”gambar/youtube.ico” border=”0″ width=”90″ height=”70″/></a><td></p><p><table align=’left’ width=’200′ border=’0′ bgcolor=” bordercolor=’green’></p><p><td width=”200″ valign=”top”><font color=”#FFFF00″ face=”Cooper Std Black”></p><p><b>TUTORIAL HTML</b><ul></p><p><li><a href=”buat%20ayat%20bergerak.html” title=’membuat tulisan bergerak’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat tulisan bergerak</a></font></li></p><p><li><a href=’Menbuat%20from%20komentar.html’ title=’membuat from komentar’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat from komentar</a></font></li></p><p><li><a href=’Membuat%20login.html’ title=’membuat halaman login’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat halaman login</a></font></li></p><p></ul></font></table></td></tr></p><p><td colspan=’2′ background=’gambar/zz.jpg’><center><b><marquee><font face=”Cooper Std Black” color=”#00CCFF” size=”7″>~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td></p><p><div style=”position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;”></p><p><img border=”0″ src=”gambar/twitter.ico” title=”follow my twitter” alt=”animasi bergerak gif” /></a><small><center></div> <div style=”position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;”><a href=’#top’></p><p><img border=”0″ src=”gambar/top.png” width=’50’ height=’50’ title=”Kembali ke atas” alt=”animasi bergerak gif” /></a><small><center></div></p><p><div style=”position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;”><a href=’login.html’><img border=”0″ src=”gambar/c.png” width=’40’ height=’40’ title=”Kembali ke login” alt=”animasi bergerak gif” /></a><small><center></div></p><p><body background=’gambar/yy.jpg’></p><p>http://MP3/I%20Won%27t%20See%20You%20Tonight%28Part1%29.swf</p><p>Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.</p><p>Hasilnya akan seperti pada gambar 12 berikut:</p><p><title>Cara membuat tulisan bergerak</title></p><p><link rel=’icon’ href=’gambar/alien.ico’></p><p><table width=’1000′ height=’400′ border=”0″ background=’gambar/xx.jpg’ cellpadding=”0″ cellspacing=”20″ ></p><p><td colspan=”2″ color=”white” align=’center’></p><p><img src=”gambar/1.png” width=”1000″ height=”400″></p><p><td colspan=’2′ background=’gambar/zz.jpg’ align=’left’ height=”20″></p><p><p><ul><ul><left><BLINK><b><font color=”#00CCFF” size=”5″><img src=’gambar/halo.gif’ border=’0′ width=’40’ height=’40’>~ Selamat datang di website pertama saya ~ <img src=’gambar/halo.gif’ border=’0′ width=’40’ height=’40’></font></BLINK></b></ul></ul></p></left></p><p><ul><a href=”home.html” title=”ke Rumah”><img src=’gambar/HOME.jpg’ BORDER=’0′ width=’80’ height=’30’></a></p><p><a href=”http://mp3skull.com/” title=”MP3″><img src=’gambar/MP3.jpg’ BORDER=’0′ width=’80’ height=’30’></font></a></p><p><a href=”profilku.html” title=”Profilku”><img src=’gambar/PROFIL.jpg’ BORDER=’0′ width=’90’ height=’30’></a></p><p><a href=”html_colors.html” title=”Kode Warna Pada HTML”><img src=’gambar/KODE WARNA.jpg’ BORDER=’0′ width=’120′ height=’30’></a></p><p><a href=”http://www.gametop.com/” title=”Tempat Game”><img src=’gambar/GAME.jpg’ BORDER=’0′ width=’80’ height=’30’></a></p><p><a href=”http://www.w3schools.com/html/html_intro.asp” title=”Tutorial HTML.w3schools.com”><img src=’gambar/TUTORIAL.jpg’ BORDER=’0′ width=’90’ height=’30’></a></p><p><a href=”kumpulan%20puisi.html” title=”kumpulan Kata-kata Mutiara”><img src=’gambar/KATA.jpg’ BORDER=’0′ width=’100′ height=’30’></a></p><p><td width=’796′ height=’700′ background=’gambar/zz.jpg’ valign=’top’ ></p><p><b><center><span style=”font-size: large;” align=’center’><font color=’#0066FF’ size=’5′>Tutorial Membuat Tulisan Menjadi Bergerak</font></span></center></b></p><p><br /><font color=’#00FFFF’>Marquee tag digunakan untuk menggerakkan sama ada perkataan ataupun gambar. Dalam contoh ini, saya akan tunjukkan beberapa cara untuk menggunakan Marquee tag ini untuk menggerakkan tulisan anda.</font><br /></p><p><div style=”color: #FFFF00;”></p><p><marquee direction=”down” height=”50″><center></p><p><b>Teks Bergerak Ke Bawah…</b></center></p><p><div style=”color: #FFFF00;”><marquee direction=”right”><b>Teks Bergerak Ke Kanan…</b></marquee></p><p><div style=”color: #FFFF00;”><marquee direction=”left”><b>Teks Bergerak Ke Kiri…</b></marquee></p><p><div style=”color: #FFFF00;”></p><p><marquee direction=”up” height=”50″><center></p><p><b>Teks Bergerak Ke Atas…</b></center></p><p><a name=’more’></a><br /><br /><span style=”font-size: large;”><font color=’#00FFFF’><b>1.</b></span> Seperti yang anda lihat di atas, Teks ini bergerak ke kiri dan ke kanan. Anda boleh gunakan kode dibawah ini untuk melakukan tricks tersebut.</font><br /></p><p><div class=”code”><br /><span style=”color: white;”><marquee direction=”</span></p><p><b><span style=”color: #FFFF00;”>right</span></b><span style=”color: white;”>”>This text scrolls right…</marquee></span></div><br /></p><p><br /><font color=’#00FFFF’>Apa yang anda perlukan, gantikan teks yang bewarna <b><span style=”color:#FFFF00;”>kuning</span></b> kepada arah mana anda akan teks tu Scroll. Anda boleh pilih sama ada – up, down, right, left.</font><br /><br /></p><p><div style=”color: #FF0000;”><marquee scrollamount=”30″><b>Teks ini Macam Ferari..</b></marquee></div><br /><span style=”font-size: large;”><font color=’#00FFFF’><b>2.</b></span> Anda boleh mengubah kelajuan teks dengan menggunakan kod di bawah ni.</font></p><p><div class=”code”><br /><span style=”color: white;”><marquee scrollamount=”</span><b><span style=”color:#FF6600;”>30</span></b><span style=”color: white;”>”></span><span style=”color: #FF0000;”>Teks ni Macam Ferari..</span><span style=”color: white;”></marquee></p><p></span></div><br /><br /><font color=’#00FFFF’>Ubah nomer yang bewarna <b><span style=”color:#FF6600;”>Oren</span></b> untuk mengubah kelajuan.</font></p><p><div style=”color: #f1c232;”><marquee scrolldelay=”300″><b>Teks ini seperti Siput..</b></marquee></div><br /></p><p><div class=”code”><br/><span style=”color: white;”><marquee scrolldelay=”</span><b><span style=”color:#00FF00;”>300</span></b><span style=”color: white;”>”>Teks ini seperti Siput..</marquee></p><p></span></div><br /><br /><b><span style=”font-size: large;”><font color=’#00FFFF’>3.</span></b> Ubah nomer yang bewarna <b><span style=”color:#00FF00;”>hijau</span></b> untuk mengubah kelajuan.</p><p></font><br /><br /><div style=”color: #6600CC;”><marquee behavior=”alternate”><b>Teks ini Melantun</b></marquee></p><p></div><br /><font color=’#00FFFF’>Untuk membuatkan teks anda melantun seperti di atas ini. Gunakan kode di bawah.</p><p><div class=”code”><br /><span style=”color: white;”><marquee behavior=”alternate”></span><b style=”color: #6600CC;”>Teks ini Melantun</b><span style=”color: white;”></marquee></p><p></span></div><br /><br /><b><font color=’#00FFFF’>4.</b> Ok. Seterusnya cara untuk menetapkan ruangan untuk Marquee bergerak</p><p></font><br /><br /><div style=”color: #0066FF;”></p><p><marquee width=”200″><b>Teks ini bergerak dalam kelebaran 200 width</b></marquee></div><br /><div class=”code”><br /></p><p><span style=”color: white;”><marquee width=”</span><span style=”color: #00FF00;”>200</span><span style=”color: white;”>”>Teks ini bergerak dalam kelebaran 200 width</marquee></span></div></p><p><br /><font color=’#00FFFF’>Anda boleh tentukan width mengikut kesukaan anda dengan menukarkan nomer yang bewarna <b><span style=”color: #00FF00;”>hijau</span></b>.</p><p></font><br /><br /><span style=”font-size: large;”><b><font color=’#00FFFF’>5.</b></span> Seterusnya saya akan menggabungkan beberapa kode Marquee ini bersama.</p><p><div style=”color: #33FF33;”><marquee behavior=”alternate” scrollamount=”30” width=”400”><b>Teks Paling Awesome</b></marquee></div></p><p><br /><font color=’#00FFFF’>Ini merupakan kode yang saya gunakan untuk membuat teks bergerak seperti yang di atas.</p><p><span style=”color: white;”><marquee behavior=”alternate” width=”400″ scrollamount=”30″></span><b style=”color: #33FF33;”>Teks Paling Awesome</b><span style=”color: white;”></marquee></p><p><br /><font color=’#00FFFF’>Sekarang, anda boleh coba dalam blog anda, anda juga boleh gabungkan kode-kode marquee ini mengikut kesukaan anda masing-masing.<br /></font><br /></td></p><p><td width=’200′ height=’700′ bgcolor=” valign=’top’></p><p><table align=”left” width=’200′ border=’0′ bgcolor=” bordercolor=’green’></p><p><td><p><a href=”http://www.facebook.com/” target=”_blank” title=”Masuk ke Facebook”> <img src=”gambar/facebook.ico” border=”0″ width=”90″ height=”70″/></a></td><td><p><a href=”http://www.youtube.com/” target=”_blank” title=”Masuk ke youtube”> <img src=”gambar/youtube.ico” border=”0″ width=”90″ height=”70″/></a><td></p><p><table align=’left’ width=’200′ border=’0′ bgcolor=” bordercolor=’green’></p><p><td width=”200″ valign=”top”><font color=”#FFFF00″ face=”Cooper Std Black”></p><p><ul><li><a href=”buat%20ayat%20bergerak.html” title=’membuat tulisan bergerak’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat tulisan bergerak</a></font></li></p><p><li><a href=’Menbuat%20from%20komentar.html’ title=’membuat from komentar’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat from komentar</a></font></li></p><p><li><a href=’Membuat%20login.html’ title=’membuat halaman login’><font color=’#0000FF’ face=’Times New Roman’>Cara membuat halaman login</a></font></li></p><p></ul></font></table></td></tr><tr height=”50″><td colspan=’2′ background=’gambar/zz.jpg’><center><b><marquee><font face=”Cooper Std Black” color=”#00CCFF” size=”7″>~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td></p><p><div style=”position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;”></p><p><img border=”0″ src=”gambar/twitter.ico” title=”follow my twitter” alt=”animasi bergerak gif” /></a><small><center></p><p><div style=”position: fixed; bottom: 0px; right: 0px;width:100px;height:100px;”><a href=’#top’></p><p><img border=”0″ src=”gambar/top.png” width=’50’ height=’50’ title=”Kembali ke atas” alt=”animasi bergerak gif” /></a><small><center></div></p><p><div style=”position: fixed; TOP: 0px; right: 10px;width:130px;height:160px;”><a href=’login.html’></p><p><img border=”0″ src=”gambar/c.png” width=’40’ height=’40’ title=”Kembali ke login” alt=”animasi bergerak gif” /></a><small><center></div><body background=’gambar/yy.jpg’></p><p>http://MP3/A7x_Afterlife.swf</p><p>Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.</p><p>Hasilnya akan seperti pada gambar 12 berikut:</p><p>Gambar 13. Artikel tulisan bergerak</p><p>Membuat halaman web mungkin terdengar rumit, tetapi itu sebenarnya cukup mudah. Salah satu cara belajar adalah dengan mencoba sendiri. Salah satu cara yang paling sederhana dan efektif untuk memulai adalah dengan menggunakan Notepad. Artikel ini akan memberikan panduan langkah demi langkah tentang cara membuat HTML di Notepad.</p><p>Sebelum mulai, kamu pastikan ada aplikasi Notepad di komputermu. Notepad biasanya tersedia di hampir semua versi Windows, kamu dapat menemukannya di menu Start.</p><h2>Langkah 2 - Membuat Dokumen HTML Baru</h2><p>Setelah Notepad terbuka, pertama-tama, kamu harus membuat dokumen HTML baru. Kamu cukup mengetik <!DOCTYPE html> di baris pertama. Ini adalah deklarasi yang memberitahu browser bahwa ini adalah dokumen HTML5.</p><h2>Cara Membuat Website dengan HTML</h2><p>Setelah mengetahui pengertian dan fungsi dari bahasa HTML dan juga CSS, sekarang Anda dapat mulai mencoba membuat website. Lakukan tahapan-tahapan di bawah ini:</p><p>Tahap pertama Anda perlu menginstal aplikasi Text Editor. Selain Notepad yang memang jadi bawaan Windows, ada banyak pilihan tools untuk Text Editor.</p><p>Seperti Visual Studio Code atau VSCode, Sublime Text, Vim, Komodo edit, dan Notepad ++.</p><p>Ketika memilih Text Editor pastikan dulu spesifikasi komputer Anda. Misalnya berapa besaran RAM komputer Anda. Hal ini dikarenakan bahwa untuk beberapa aplikasi Text Editor bisa dijalankan dengan baik pada komputer dengan spesifikasi tertentu. Serta pilih aplikasi yang tidak berbayar.</p><p>Karena Anda sedang belajar membuat website, sebagai pemula Anda dapat memilih Notepad ++. Aplikasi ini berbeda dengan Notepad sebelumnya karena menyediakan berbagai fitur pendukung.</p><p>Notepad ++ juga termasuk Text Editor gratis yang bisa dipakai untuk komputer dengan spesifikasi ram 2GB.</p><p>Selain Notepad ++ ada juga Text editor lain yang masih buatan Microsoft, yaitu VSCode. Meski begitu tools ini juga tersedia untuk sistem operasi Mac Os dan Linux.</p><p>Anda dapat menggunakan VSCode untuk membuat website dengan HTML dan CSS.</p><p>Setelah memilih aplikasi Text Editor, langkah selanjutnya adalah membuat file HTML untuk mulai menyusun tag. Misalnya buatlah file index.html. Pada file ini Anda akan merangkai struktur halaman website.</p><p>Secara garis besar, dalam setiap halaman tersusun atas 4 bagian yaitu:</p><p>Sehingga rangkaian tag yang Anda buat pada Text Editor, dimulai dengan mencantumkan tag DTD lalu tag HTML.</p><p>Setelah itu Anda menyusun bagian tag head untuk mengisi informasi mengenai meta tag charset, title, dan link dari file CSS yang nantinya akan dibahas lebih lanjut. Contoh penulisannya seperti ini:</p><p><!DOCTYPE html> <html> <head> <meta charset=”utf-8”> <title> Personal Blog </title> <link rel+”styesheet” type=”text/css” href=”style.css”/> </head></p><p>Baru kemudian lanjut ke tag body, untuk mengatur homepage website. Di mana biasanya berisi navigation bar, text container, paragraph, sampai bagian footer.</p><p>Selain itu jangan lupa menambahkan gambar yang sesuai. Sebelum itu pastikan Anda sudah mengumpulkan semua foto, gambar dan aset untuk membuat website dalam satu folder agar lebih mudah.</p><p>Berikut contoh penulisan pada bagian body untuk personal blog:</p><p><body> <section> <!— navigation —> <nav> <!— logo —> <a href=”#” class=”logo”>Blog Tutorial</a> <!— menu —> <ul> <li><a href=”#” class=”active”>Home</a></li> <li><a href=”#”>About Me</a></li> <li><a href=”#”>Article</a></li> <li><a href=”#”>Contact</a></li> </ul> </nav></p><p><!— text —> <div class=”text-container”> <p>Hello,</p> <p>I’M IndonesianWriter.com</p> <p>A ONE STOP CONTENT MARKETING SOLUTION FOR YOUR BUSINESS’ GROWTH</p> <p>Ready to get your content enhance with IndonesianWriter?</p> <button class=”hire-btn”>CLICK HIRE</button> </div> </section></p><p><!– footer –> <footer> <p> You can reach me on</p> <div class=”social-icons”> <a href=”#” ><i class=”fab fa-instagram”></i></a> <a href=”#” ><i class=”fab fa-twitter”></i></a> <a href=”#” ><i class=”fab fa-youtube”></i></a> </div> </footer> </body> </html></p><p>Cara membuat website dengan HTML Selanjutnya adalah dengan membuat file CSS untuk memberikan tampilan website yang lebih menarik. Pada text editor buat file dengan extension CSS misalnya style.css.</p><p>Kemudian mulailah memasukkan kode untuk menambahkan elemen pada halaman web. CSS ini akan sangat membantu karena bahasa HTML sendiri terbatas dan fokusnya lebih ke struktur isi website.</p><p>CSS terdiri dari 3 jenis jika melihat dari penempatan kode. Yaitu CSS Inline, Internal, serta External. Untuk Inline, kode CSS dicantumkan di bagian body dalam file HTML. Kode ini hanya memberikan perubahan pada satu baris saja.</p><p>Sedangkan Internal kode-kodenya diletakkan di bagian header pada file HTML. Berfungsi menentukan tampilan satu halaman website.</p><p>Terakhir ada External yaitu, kode CSS yang ditaruh di luar file HTML dalam bentuk file.css. Fungsinya yaitu mengatur tampilan untuk semua halaman website.</p><p>Sehingga bisa digunakan untuk menata beberapa halaman web sekaligus apa saja yang bisa diatur oleh CSS? Ada banyak, diantaranya yaitu menentukan bagaimana format paragraph, font, dan warna tulisan.</p><p>Kemudian membuat kotak teks, tombol link, mengubah warna link dan juga mengatur warna yang bisa berubah ketika diarahkan oleh kursor. Semua detail desain tersebut bisa dilakukan dengan menggunakan bahasa CSS.</p><p>Contoh penulisan kode CSS kurang lebih akan seperti ini:</p><p>@charset “utf-8”; /* CSS Document*/ body{ background-color:#a11111; margin:0px; padding:0px; }</p><p>ul{ list-style:none; }</p><p>a{ text-decoration:none; }</p><p>section{ width:100%; height:95vh; position: relative; }</p><p>nav{ display: flex; justify-content: space-between; align-items:center; height:60px; background-color:#FFFFFF; box-shadow:2px 2px 12px rgba(0,0,0,0.2); padding:0px 5%;</p><p>} nav ul{ display: flex; }</p><p>nav ul li a{ margin:30px; font-family:myriad pro regular; color:#505050; font-size: 15px; font-weight:700; }</p><p>.logo{ font-family:RoadTest; color:#000000; font-size: 22px; font-weight: bold; }</p><p>.active{ color:#2d2a2a; font-weight:bold; }</p><p>.text-container p:nth-child(1){ font-family: calibri; font-weight: bold; color: #ffffff; font-size: 22px; }</p><p>.text-container p:nth-child(2){ font-family: calibri; font-weight: bold; letter-spacing: 2px; color: #ffffff; font-size: 60px; }</p><p>.text-container p:nth-child(3){ font-family: myriad pro regular; color: #ffffff; font-size: 30px; line-height: 30px; }</p><p>.text-container p:nth-child(4){ font-family: calibri; color: #ffffff; font-size: 17px; margin-top: 10px; line-height: 30px; }</p><p>.text-container p{ line-height: 0px; margin: 55px 0px 25px; }</p><p>.text-container{ position: absolute; left: 13%; top: 42%; transform: translate(-13%, -42%); }</p><p>.text-container button{ width: 130px; height: 42px; border-radius: 10px; font-family: calibri; font-weight: bold; font-size: 14px; outline: none; margin: 0px 10px; }</p><p>.hire-btn{ border: 2px solid #373636; color: #373636; }</p><p>button:active{ transform: scale(1.1); }</p><p>.model{ height: 560px; position: absolute; bottom: 60px; left: 80%; transform: translateX(-70%); }</p><p>footer p{ font-family: calibri; }</p><p>footer p:nth-child(1){ font-size: 30px; font-weight:bold; color:#FFFFFF; line-height:10px; }</p><p>footer p:nth-child(2){ font-size: 16px; color:#7e7d7d; width:600px; text-align: center; }</p><p>footer{ height:300px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background-color: #191919; }</p><p>.social-icons a{ width:40px; height:40px; display: flex; justify-content: center; align-items: center; background-color:#e6e3e3; margin:20px 10px; border-radius:50%; }</p><p>.social-icons{ display: flex;</p><p>.social-icons i,.social i{ color:#000000; }</p><p>.social-icons a:hover{ background-color:#000000; box-shadow:2px 2px 12px rgba(0,0,0,0.2); transition:all ease 0.5s; }</p><p>.social-icons a:hover i, .social a:hover i{ color:#FFFFFF; transition:all ease 0.5s; }</p><p>.copyright{ color:#565555; font-size: 15px; position: absolute; left:50%; bottom:10px; transform: translateX(-50%); }</p><p>Setelah Anda membuat file HTML dan file CSS lengkap dengan tag dan kode yang sudah disusun, maka selanjutnya adalah menghubungkan kedua file tersebut.</p><p>Caranya cukup mudah. Anda tinggal memasukkan kode pada bagian head di file index.html. Dengan begitu kedua file akan langsung terintegrasi. Contohnya seperti ini:</p><p><link rel=”style sheet” href=”style.css”></p><p>Tahapan berikutnya Adalah membuka website Anda melalui web browser. Pada langkah ini bukan berarti halaman website sudah selesai.</p><p>Karena fungsi dari tahapan ini yaitu agar proses membuat website dengan HTML dan CSS bisa berjalan lebih efektif.</p><p>Buka kedua file bersamaan. Ketika Anda melakukan penambahan elemen baik pada file HTML dan juga CSS, perubahannya bisa langsung terlihat di web browser.</p><p>Namun sebelumnya Anda perlu memuat ulang halaman, setiap kali ada perubahan. Dengan begitu proses mengembangkan website jadi lebih mudah dan cepat.</p><p>Berikut ini merupakan hasil dari cara membuat website dengan HTML dan CSS secara sederhana.</p><h2>Pengertian CSS dan Fungsinya</h2><p>Sedangkan CSS merupakan kependekan dari Cascading Style Sheets, yaitu bahasa yang dipakai untuk menentukan bagaimana halaman web akan ditampilkan, elemen-elemen di dalamnya seperti apa, serta style desain web akan bagaimana.</p><p>CSS lah yang membuat tampilan website jadi atraktif dan menarik. CSS ini bukan bahasa pemrograman, lebih tepatnya disebut dengan bahasa style sheet. Namun selain berfungsi mengatur tampilan halaman web yang berbasis HTML, CSS juga memiliki fungsi lain.</p><p>Mulai dari mempercepat waktu loading website, menawarkan banyak variasi tampilan web, mempermudah mengelola kode, dan membuat tampilan website rapi di ukuran layar yang berbeda.</p><p>Sebelumnya disebut mengenai mengelola kode, karena pada bahasa CSS ini yang dipakai memang sebuah kode.</p><p>Tidak seperti HTML yang menggunakan serangkaian tag dan ditulis berulang untuk halaman yang berbeda. Pada CSS Anda cukup menuliskan kode untuk mengubah tampilan web keseluruhan.</p><p>Dalam membuat website Anda perlu menguasai HTML dan CSS. Setelah memahami cara menggunakannya, Anda bisa membuat jenis website apapun, misalnya company profile, portofolio, ataupun blog pribadi.</p><h2>Sublangkah b. Menggunakan Tag Head dan Body</h2><p>Di dalam tag html, ada dua bagian utama, yaitu head dan body. Tag <head> digunakan untuk metadata halaman web seperti judul, sementara tag <body> untuk konten utama web. Jadi, struktur dasar HTML di Notepad harus terlihat seperti ini:</p> </div> </div>  <div class="right-column"> <div class="latest-news"> <h2>Konten baru</h2> <div class="news-item"> <img src="https://kw7x.instanttrafficcreation.com/static/ikan-hiu.jpg" alt="Ikan. Hiu"> <div> <h3><a href="https://kw7x.instanttrafficcreation.com/">Ikan. Hiu</a></h3> <p>Offenbar hast du diese Funktion zu schnell genutzt. Du wurdest vorübergehend von der Nutzung dieser Funktion blockiert.</p> </div> </div> <div class="news-item"> <img src="https://avew.quebecpharmacie.org/static/rajahoki138.jpg" alt="Rajahoki138"> <div> <h3><a href="https://avew.quebecpharmacie.org/">Rajahoki138</a></h3> <p>Dikarenakan ada banyak game penghasil uang saat ini, maka kamu wajib selektif memilih mana yang terbukti membayar dan aman ya grameds. Adapun deretan game penghasil saldo terbaik di antaranya adalah sebagai berikut.</p> </div> </div> <div class="news-item"> <img src="https://ssu9.electricalmirror.in/static/situs-n.jpg" alt="Situs N"> <div> <h3><a href="https://ssu9.electricalmirror.in/">Situs N</a></h3> <p>Richard telah bekerja terus menerus di arena urusan UE sejak 1984. Dia adalah pemimpin Pemerintah & Layanan Publik untuk Deloitte di seluruh EMEA dari 2012-2019 (bisnis dengan 6.000 orang dengan pendapatan tahunan $1+ miliar – Layanan Pemerintah & Publik adalah perusahaan yang tercepat -sektor yang tumbuh, di depan Layanan Keuangan, Digital & Teknologi, Ilmu Hayati & Kesehatan, Energi, dan industri Manufaktur).</p> </div> </div> <div class="news-item"> <img src="https://r3bu.elpasodemocrats.org/static/artikan.jpg" alt="Artikan"> <div> <h3><a href="https://r3bu.elpasodemocrats.org/">Artikan</a></h3> <p>Temukan berbagai rekomendasi produk Slot Pintu Besi dengan harga terbaru Desember 2024 di UKUR. Belanja online kebutuhan bangunan terbaik paling praktis. Cukup telusuri produk Slot Pintu Besi, pilih model, ukuran, maupun ragam varian lainnya yang sesuai kebutuhan. Pastikan membaca detail dan ulasan terpercaya dari pembeli lainnya. Check Out barang belanjaan anda dan jangan lupa nikmati promo menguntungkan yang tersedia di UKUR!</p> </div> </div> <div class="news-item"> <img src="https://w9lr.keziahoriginals.com/static/dewa-tv.jpg" alt="Dewa Tv"> <div> <h3><a href="https://w9lr.keziahoriginals.com/">Dewa Tv</a></h3> <p>Para dewa dipercaya sebagai makhluk yang tak tampak dan tak dapat dijangkau. Mereka hidup di tempat-tempat suci atau tempat-tempat yang jauh dari jangkauan manusia, seperti surga, neraka, di atas langit, di bawah Bumi, di lautan yang dalam, di atas puncak gunung tinggi, di hutan belantara, tetapi dapat berhubungan dengan manusia karena manifestasi atau kekuatan supranaturalnya. Dalam beberapa agama monoteistik, Tuhan dianggap tinggal di surga namun karena kemahakuasaannya Dia juga ada di mana-mana sehingga dapat berhubungan dengan makhluq-Nya kapanpun dan di mana pun, tetapi secara kasatmata. Dalam pandangan umat beragama (monoteistik, politeistik, panteistik) sesungguhnya Tuhan ada di mana-mana, tetapi untuk memuliakannya Dia disebutkan tinggal di surga.</p> </div> </div> <div class="news-item"> <img src="https://t38n.daggerford.com/static/timur118.jpg" alt="Timur118"> <div> <h3><a href="https://t38n.daggerford.com/">Timur118</a></h3> <p>Selanjutnya ada game bernama Mobile Premier League atau lebih dikenal dengan MPL. Aplikasi penghasil saldo dana ini berisi berbagai kumpulan game yang seru untuk dimainkan. Lewat game seperti fruit dart, fruit chop, pool, chess, bloxmash, archery, fruit slice, bubble shooter dan lainnya. Maka kamu bisa mengumpulkan diamond dengan menjadi top player.</p> </div> </div> <div class="news-item"> <img src="https://5qh3.elpasodemocrats.org/static/w44-icd-10.jpg" alt="W44 Icd 10"> <div> <h3><a href="https://5qh3.elpasodemocrats.org/">W44 Icd 10</a></h3> <p>W44 - Foreign body entering into or through a natural orifice[Non-Billable]</p> </div> </div> <div class="news-item"> <img src="https://wuga.effets-stars.com/static/slot-kecil.jpg" alt="Slot Kecil"> <div> <h3><a href="https://wuga.effets-stars.com/">Slot Kecil</a></h3> <p>Slot kecil pintu terbanyak dilihat</p> </div> </div> <div class="news-item"> <img src="https://67t4.elpasodemocrats.org/static/slot-dewa.jpg" alt="Slot Dewa"> <div> <h3><a href="https://67t4.elpasodemocrats.org/">Slot Dewa</a></h3> <p>Sepertinya kami tidak dapat menemukan apa yang Anda cari. Mungkin dengan pencarian dapat membantu.</p> </div> </div> <div class="news-item"> <img src="https://ep5n.keziahoriginals.com/static/iwan-bola.jpg" alt="Iwan Bola"> <div> <h3><a href="https://ep5n.keziahoriginals.com/">Iwan Bola</a></h3> <p>Möchtest du Inhalte von aktivieren? Dazu brauchen wir deine Einwillung*.</p> </div> </div> <div class="news-item"> <img src="https://l0mo.gisjobsource.com/static/7-bintang.jpg" alt="7 Bintang"> <div> <h3><a href="https://l0mo.gisjobsource.com/">7 Bintang</a></h3> <p>Offenbar hast du diese Funktion zu schnell genutzt. Du wurdest vorübergehend von der Nutzung dieser Funktion blockiert.</p> </div> </div> <div class="news-item"> <img src="https://b1xc.effets-stars.com/static/dewa-apa.jpg" alt="Dewa Apa"> <div> <h3><a href="https://b1xc.effets-stars.com/">Dewa Apa</a></h3> <p>Para dewa dipercaya sebagai makhluk yang tak tampak dan tak dapat dijangkau. Mereka hidup di tempat-tempat suci atau tempat-tempat yang jauh dari jangkauan manusia, seperti surga, neraka, di atas langit, di bawah Bumi, di lautan yang dalam, di atas puncak gunung tinggi, di hutan belantara, tetapi dapat berhubungan dengan manusia karena manifestasi atau kekuatan supranaturalnya. Dalam beberapa agama monoteistik, Tuhan dianggap tinggal di surga namun karena kemahakuasaannya Dia juga ada di mana-mana sehingga dapat berhubungan dengan makhluq-Nya kapanpun dan di mana pun, tetapi secara kasatmata. Dalam pandangan umat beragama (monoteistik, politeistik, panteistik) sesungguhnya Tuhan ada di mana-mana, tetapi untuk memuliakannya Dia disebutkan tinggal di surga.</p> </div> </div> <div class="news-item"> <img src="https://kszb.quebecpharmacie.org/static/mpo39-baru.jpg" alt="Mpo39 Baru"> <div> <h3><a href="https://kszb.quebecpharmacie.org/">Mpo39 Baru</a></h3> <p>Membeli mobil baru tentunya adalah keputusan besar dan memerlukan persiapan yang matang. Tentunya ada beberapa hal yang perlu disiapkan sebelum Anda memutuskan untuk membeli mobil baru. Jadi, apa saja sih yang perlu dilakukan agar Anda dapat membeli mobil baru yang aman?</p> </div> </div> <div class="news-item"> <img src="https://bl6c.quebecpharmacie.org/static/77dewa.jpg" alt="77Dewa"> <div> <h3><a href="https://bl6c.quebecpharmacie.org/">77Dewa</a></h3> <p>Harga diatas berlaku pada 6 Desember 2022. Perlu kamu ketahui bahwa harga saham berubah setiap harinya, sehingga harga 1 lotnya juga akan ikut berubah.</p> </div> </div> <div class="news-item"> <img src="https://6ij8.gisjobsource.com/static/romawi-92.jpg" alt="Romawi 92"> <div> <h3><a href="https://6ij8.gisjobsource.com/">Romawi 92</a></h3> <p>Jawaban: c. Sansekerta</p> </div> </div> <div class="news-item"> <img src="https://bvqw.daggerford.com/static/ratu88.jpg" alt="Ratu88"> <div> <h3><a href="https://bvqw.daggerford.com/">Ratu88</a></h3> <p></p> </div> </div> <div class="news-item"> <img src="https://klye.elpasodemocrats.org/static/kopi-77.jpg" alt="Kopi 77"> <div> <h3><a href="https://klye.elpasodemocrats.org/">Kopi 77</a></h3> <p>On a cheque, we write 77 in words as “seventy-seven rupees only”.</p> </div> </div> <div class="news-item"> <img src="https://fgix.daggerford.com/static/wisata.jpg" alt="Wisata"> <div> <h3><a href="https://fgix.daggerford.com/">Wisata</a></h3> <p>Sumatra, pulau terbesar kedua di Indonesia, menyimpan berbagai keindahan alam yang luar biasa. Salah satu tempat yang paling terkenal adalah Danau Toba, danau vulkanik terbesar di dunia yang terletak di provinsi Sumatra Utara. Danau Toba memiliki pemandangan yang sangat indah dengan air biru jernih dan dikelilingi oleh pegunungan hijau yang mempesona. Di tengah danau terdapat sebuah pulau kecil, Pulau Samosir, yang menawarkan suasana damai dan budaya Batak yang kaya.</p> </div> </div> <div class="news-item"> <img src="https://obe7.elpasodemocrats.org/static/romawi-12.jpg" alt="Romawi.12"> <div> <h3><a href="https://obe7.elpasodemocrats.org/">Romawi.12</a></h3> <p>Hermes adalah dewa pembawa pesan. Dalam mitologi Romawi, ia lebih akrab dengan sebutan Mercury atau Merkurius. Ia memiliki begitu banyak peran selain menyampaikan pesan. Di antaranya adalah menguasai perdagangan, perantara dewa dan manusia, dan sebagai penjelajah. Selain itu, Merkurius juga terkenal licik dan suka mencuri.</p> </div> </div> <div class="news-item"> <img src="https://eg0p.instanttrafficcreation.com/static/chat-dewa.jpg" alt="Chat Dewa"> <div> <h3><a href="https://eg0p.instanttrafficcreation.com/">Chat Dewa</a></h3> <p>Để gọi cho một nhân viên hỗ trợ khách hàng, vui lòng đăng nhập vào tài khoản Payoneer của bạn và chúng tôi sẽ sẵn lòng hỗ trợ bạn.</p> </div> </div> </div> </div> </div>  <div class="related-articles"> <h2>Anda mungkin ingin melihat</h2> <div class="related-list"> <div class="related-item"> <a href="https://atte.effets-stars.com/cara-bongkar-judi-slot-online-di-indonesia-2023-terbaru.html"> <img src="https://atte.effets-stars.com/static/cara-bongkar-judi-slot-online-di-indonesia-2023-terbaru.jpg" alt="Cara Bongkar Judi Slot Online Di Indonesia 2023 Terbaru"> <h3>Cara Bongkar Judi Slot Online Di Indonesia 2023 Terbaru</h3> <p>Untuk dapatkan jackpot ada beberapa cara yang wajib pemain lakukan agar lebih mudah, disini akan disebutkan cara mudah dapatkan jackpot di permainan poker online sebagai berikut :</p> </a> </div> <div class="related-item"> <a href="https://atte.effets-stars.com/cara-menarik-uang-di-slot-777-ke-dana.html"> <img src="https://atte.effets-stars.com/static/cara-menarik-uang-di-slot-777-ke-dana.jpg" alt="Cara Menarik Uang Di Slot 777 Ke Dana"> <h3>Cara Menarik Uang Di Slot 777 Ke Dana</h3> <p>1. Apa itu 77RABBIT DAFTAR bet kecil di 77RABBIT DAFTAR?</p> </a> </div> <div class="related-item"> <a href="https://atte.effets-stars.com/situs-slot-minimal-deposit-5-ribu.html"> <img src="https://atte.effets-stars.com/static/situs-slot-minimal-deposit-5-ribu.jpg" alt="Situs Slot Minimal Deposit 5 Ribu"> <h3>Situs Slot Minimal Deposit 5 Ribu</h3> <p>Situs slot deposit 10 ribu yakni memiliki keunggulan terbaik yang menjadi pusatnya para player slot gacor depo 10k saat ini. Keunggulanya ialah memilki performa tinggi pada mesin slot bet 200 sampai 10 ribu yang mampu memberikan ledakan perkalian besar, dan dapat berputar secara maximal tanpa henti untuk memberikan jackpot dan maxwin ke seluruh pemainya. Dan kami juga akan meringkas beberapa keunggulan situs slot minimal bet 10rb, berikut ringkasanya:</p> </a> </div> <div class="related-item"> <a href="https://atte.effets-stars.com/dewanata.html"> <img src="https://atte.effets-stars.com/static/dewanata.jpg" alt="Dewanata"> <h3>Dewanata</h3> <p>Menawarkan gameplay yang ringan, putar roda merupakan game penghasil saldo dana tanpa iklan yang bisa kamu unduh gratis. Setelah diunduh, kamu bisa langsung login dengan akun media sosial.</p> </a> </div> </div> </div>  <footer> <p>© 2024 Cara Membuat Website Dengan Html Di Notepad - <a href="https://atte.effets-stars.com/sitemap.xml">Sitemap</a></p> </footer> </div> </body> </html>