Menghias Website dengan CSS

Setelah kamu berhasil membuat struktur dasar dan mengisi konten, kini saatnya memberikan sedikit sentuhan pada tampilan website menggunakan CSS. CSS akan membuat website terlihat lebih menarik dan mudah dinavigasi. Contoh CSS sederhana untuk mengatur font dan warna latar belakang adalah sebagai berikut:

font-family: Arial, sans-serif;

background-color: #f4f4f4;

list-style-type: none;

text-decoration: none;

background-color: #333;

Dengan menambahkan CSS ini di dalam tag , tampilan website kamu akan lebih rapi dan profesional.

Menyiapkan Struktur Dasar HTML

Sebelum mulai menulis kode, kamu perlu tahu apa saja yang harus ada di dalam sebuah website sekolah. Struktur dasar HTML yang perlu kamu buat pertama kali adalah sebagai berikut:

Website Sekolah

Selamat datang di Website Sekolah XYZ

Tentang Sekolah

Program Pendidikan

Kontak

Tentang Sekolah

Ini adalah bagian tentang sekolah kamu…

Program Pendidikan

Informasi mengenai program pendidikan yang disediakan…

Bagian ini berisi informasi kontak sekolah…

Dengan struktur dasar ini, kamu sudah bisa membuat halaman website dengan bagian-bagian seperti header, nav, section, dan footer.

Langkah 4: Mempelajari Lebih Lanjut Tentang HTML

Untuk membuat website yang lebih kompleks dan interaktif, kamu akan perlu mempelajari lebih lanjut tentang HTML. Ada banyak tutorial online dan kursus gratis yang bisa kamu gunakan.

Untuk membuat website kamu dapat diakses oleh semua orang di Internet, kamu perlu menunggah file HTML ke server web. Ada banyak layanan hosting gratis seperti GitHub Pages dan Neocities yang bisa kamu manfaatkan.

Membuat website dengan HTML adalah suatu kegiatan yang menyenangkan dan edukatif. Dengan langkah-langkah di atas, kamu sekarang harus bisa membuat website basic sendiri. Tetapi jangan berhenti di sini, teruslah belajar dan bereksperimen untuk menjadi lebih baik lagi. Selamat mencoba!

UNMAHA – Membuat website sekolah kini menjadi hal yang penting. Website sekolah bisa digunakan untuk berbagai keperluan, mulai dari pengumuman, jadwal pelajaran, hingga pengenalan lebih jauh tentang sekolah itu sendiri. Kamu mungkin merasa bingung harus mulai dari mana? Jangan khawatir! Kali ini saya akan menjelaskan cara membuat website sekolah dengan HTML yang simpel dan mudah, bahkan bagi pemula sekalipun.

Tidak perlu kemampuan coding yang canggih untuk membuat website sekolah yang fungsional. Dengan HTML, kamu bisa membuat tampilan dasar website yang sederhana namun tetap informatif. Namun, untuk membuat website yang benar-benar menarik, tentu kamu juga perlu sedikit tambahan CSS dan JavaScript. Tapi tenang, kali ini kita akan fokus pada HTML dulu.

Pengertian HTML dan Fungsinya

Namun sebelum membahas cara membuat website dengan HTML dan CSS, Anda perlu tahu dulu apa pengertiannya.

HTML merupakan singkatan dari Hypertext Markup Language, yaitu bahasa standar yang digunakan untuk menyusun struktur dan isi konten dari halaman website.

Apa saja yang ada pada halaman web, bagaimana setiap komponen ditata, dan kemana pengunjung akan pergi ketika mereka mengklik sesuatu.

Untuk menyusun HTML Anda membutuhkan tools khusus untuk bahasa pemrograman, yang biasa disebut dengan nama Text Editor. Apabila Anda pengguna Windows pasti sudah tidak asing dengan aplikasi Notepad.

Notepad termasuk salah satu aplikasi Text Editor yang sederhana. Sekarang ini sudah muncul tools yang lebih beragam dengan fitur yang lebih lengkap.

Ketika Anda merangkai HTML di Text Editor, terdapat berbagai jenis tag yang disusun untuk membuat satu halaman website. Tag terdiri dari tag pembuka dan tag penutup, sedangkan di bagian tengah merupakan isi konten yang akan ditampilkan pada halaman web.

Ada tag untuk heading,

untuk paragraph, dan masih banyak lagi jenis tag yang lain. C

INI CONTOH H1

Terdapat dua tipe tag utama yaitu block-level dan inline tags. Block-level digunakan ketika ingin memakai ruang yang ada pada text editor dan membuat line baru dalam dokumen. Misalnya saat membuat heading atau paragraph.

Sedangkan tag inline dipakai untuk memformat konten yang masih bagian dari block level. Sehingga tidak membuat line baru.

Contoh tag yang termasuk inline yaitu untuk membuat tulisan jadi bold. Atau untuk format teks Italic.

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.

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 Desain Website Berbasis HTML Dengan Notepad</p><p>Tertarik belajar membuat website? Anda bisa memulainya dengan mempelajari cara membuat website dengan HTML.</p><p>Dengan teknik ini Anda dapat bereksperimen membuat website dari nol. Dari halaman yang masih kosong sampai berisi layout website dengan desain dan teks yang Anda inginkan</p><p>Dalam artikel ini akan dijelaskan tahapan-tahapan dalam membuat website dengan HTML dan juga CSS. Hingga akhirnya menghasilkan website yang sederhana.</p><p>Mengetahui cara membuat website dengan HTML dapat membantu Anda memahami komponen-komponen dasar pada website.</p><h2>Cara Membuat Website dengan HTML dan CSS</h2><p>Sebelum kita membahas teknikal cara membuat website dengan html dan css, ada beberapa tools yang perlu Anda persiapkan terlebih dahulu seperti web browser dan text editor. Dalam tutorial ini kami menggunakan text editor notepad++ dan web browser chrome.</p><p>Anda bisa menggunakan tools apapun selain notepad++ dan chrome, dalam tutorial kali ini kami hanya akan membuat website html dan css yang sederhana saja. Kurang lebih tampilan websitenya jika sudah jadi adalah sebagai berikut:Dalam proses pembuatan website dengan html dan css, kami akan menggunakan Bootstrap. Bootstrap adalah perangkat sumber terbuka berupa struktur dasar dokumen html dan css. Dengan Bootstrap Anda akan dengan mudah membuat struktur website yang siap untuk dioptimalkan lebih lanjut.</p><p>Intinya dengan bantuan Bootstrap, Anda tidak perlu menerapkan cara membuat website dengan html dari awal. Menarik bukan dan menghemat waktu? Yuk kita langsung mulai membuat website sederhana dengan html dan css.</p><h2>Sesuaikan Desain Web HTML dan CSS</h2><p>Setelah Anda selesai download template html dan css yang nanti akan kita gunakan sebagai desain utama website, saatnya kita lakukan modifikasi bagian beranda terlebih dahulu. Karena nantinya di template yang sudah kita download, ada beberapa bagian yang akan kita hapus dan disesuaikan dengan sketsa yang sudah kita buat dalam demo ini.</p><p>Ikuti saja langkah-langkah di bawah ini ya untuk mengetahui cara membuat website dengan html dan css yang mudah dan cepat.</p><p>Langkah 1: Pertama kami sarankan untuk membuat terlebih dahulu sketsa kasar untuk desain website yang akan di buat.</p><p>Dalam panduan ini, kami akan membuat halaman website yang simple isinya tentang profil Anda. Kurang lebih jika kita lihat sketsa di atas, minimal halaman websitenya ada menu navigasi, full headline yang ada di bawah menu, konten utama tengah dan footer.</p><p>Langkah 2: Buka file index.html, kita tentukan bagian yang akan dihapus dan bagian yang akan kita pakai. Sekarang mari kita pelajari setiap baris demi baris yang ada di file index.html dan hapus beberapa baris yang tidak diperlukan, simak penjelasannya ada di bawah ini sebagai petunjuk baris mana yang perlu Anda hapus.</p><p>Langkah 3: Sekarang kita akan ubah sedikit kode di bagian comment <! – About – >. Perhatikan kode html untuk about di bawah ini:</p><p>Pada bagian dua baris pertama tersebut diubah menjadi kode di bawah ini:</p><p><! – Main Content Section – ></p><p><section class=”page-section bg-primary” id=”main-content”></p><p>Baris tag <h2>, <hr> dan kode <a class=”btn btn-light btn-xl” href=”#services”>Get Started!</a> juga kita hapus karena tidak dibutuhkan, jadi kode akan berubah menjadi seperti ini:</p><p>Langkah 4: Simpan perubahan dan cek dengan menggunakan browser chrome, jika hasilnya seperti di bawah ini maka proses modifikasi telah berhasil.</p><p>Langkah 5: Kita buat warnanya berubah menjadi warna putih, caranya hapus bagian kode bg-primary di dalam <section> tag utama.</p><p>Semula kodenya seperti ini:</p><p><! – Main Content Section – ></p><p><section class=”page-section bg-primary” id=”main-content”></p><p><div class=”container px-4 px-lg-5″></p><p><div class=”row gx-4 gx-lg-5 justify-content-center”></p><p><div class=”col-lg-8 text-center”></p><p><p> Isi teks disini </p></p><p>Setelah bagian bg-primary (ditandai dengan bold) dihapus, kodenya akan menjadi seperti di bawah ini:</p><p><! – Main Content Section – ></p><p><section class=”page-section” id=”main-content”></p><p><div class=”container px-4 px-lg-5″></p><p><div class=”row gx-4 gx-lg-5 justify-content-center”></p><p><div class=”col-lg-8 text-center”></p><p><p> Isi teks disini </p></p><p>Langkah 6: Sekarang kita akan menambahkan beberapa paragraf, karena halaman website yang kita buat ini untuk halaman personal jadi kita tambahkan paragraf yang sesuai dengan profile personal yang ingin diperkenalkan melalui halaman ini.</p><p>Ganti Isi teks disini dengan teks versi Anda sendiri!</p><p>Panjang teks yang bisa Anda tambahkan sesuai dengan kebutuhan Anda, teks diatas hanya contoh saja dalam demo ini.</p><p>Langkah 7: Setelah menambahkan teks, langkah selanjutnya adalah menambahkan gambar. Karena website yang kita buat bertujuan untuk memperkenalkan profil, maka perlu ditambahkan gambar foto profil.</p><p>Caranya dengan menambahkan kode di bawah ini:</p><p><img src=”assets/img/profil.png” class=”rounded img-fluid”></p><p>Setelah ditambahkan, berikut tampilan kode secara lengkapnya.</p><p>Catatan: Nama file image, sesuaikan dengan file image yang Anda gunakan.</p><p>Langkah 8: Selanjutnya kita akan memodifikasi bagian portfolio, Karena website yang kita buat untuk seorang freelancer SEO Content Writer Tech, kita akan menambahkan link yang bisa di klik. Kode untuk bagian Portfolio adalah sebagai berikut:</p><p>Category bisa diganti menjadi nama kliennya.</p><p>Project Name bisa diganti dengan nama project yang pernah dikerjakan. Contohnya adalah sebagai berikut:</p><p>Dan hasilnya nanti adalah sebagai berikut:</p><p>Bagian gambar juga bisa Anda sesuaikan dengan project yang Anda kerjakan. Mengganti gambar sangat mudah, Anda hanya tinggal memasukkan gambar ke direktori template assets/img/portfolio/fullsize dan untuk gambar thumbnail ke direktori assets/img/portfolio/thumbnails.</p><p>Selanjutnya di bagian kode html ganti nama image sebelumnya dengan nama file image yang baru, perhatikan gambar di bawah ini:</p><p>Sekarang kita lanjutkan ke langkah 9 untuk memodifikasi bagian contact.</p><p>Langkah 9: Masih di file index.html, kita akan memodifikasi bagian contact yaitu menghapus bagian form contactnya. Kami menginginkan pengunjung menghubungi pemilik website secara langsung melalui nomor telepon atau email yang dicantumkan disana.</p><p>Di bagian contact yang ditandai dengan <!– Contact – > hapus semuanya dan ganti dengan kode di bawah ini:</p><p><section class=”page-section” id=”contact”></p><p><div class=”container px-4 px-lg-5″></p><p><div class=”row gx-4 gx-lg-5 justify-content-center”></p><p><div class=”col-lg-8 col-xl-6 text-center”></p><p><h2 class=”mt-0″>Get In Touch! </h2></p><p><hr class=”divider” /></p><p><p class=”text-muted mb-5″>Siap untuk memulai proyek Anda berikutnya bersama kami? Hubungi kami dan kami akan menghubungi Anda sesegera mungkin!</p></p><p><div class=”row gx-4 gx-lg-5 justify-content-center”></p><p><div class=”col-lg-4 text-center mb-5 mb-lg-0″></p><p><i class=”bi-phone fs-2 mb-3 text-muted”></i></p><p><div>+62 (nomor telepon yang dapat dihubungi) </div></p><p>Hasilnya akan seperti di bawah ini:</p><p>Langkah 10: Kami belum mengubah bagian Masthead, bagian ini adalah headline dari sebuah website. Oke kita lanjutkan langkah terakhir mengubah bagian Masthead ya, pertama ganti tulisan “Your Favorite Place for Free Bootstrap Themes” menjadi headline yang Anda inginkan.</p><p>Dalam demo ini kami mengganti tulisan “Your Favorite Place for Free Bootstrap Themes” menjadi “I Ready Write Epic Tech Content SEO”. Sedangkan untuk bagian sub contentnya berisikan deskripsi singkat tentang jasa content writer teknologi.</p><p>Misalnya kami mengubahnya menjadi seperti di bawah ini:</p><p>Bagian terakhir mengubah title dan navbar brand, cara mengubahnya Anda bisa perhatikan gambar di bawah ini:</p><p>Selesai, sekarang Anda sudah berhasil membuat halaman website sederhana menggunakan template dari Bootstrap.</p><p>Itulah cara membuat website dengan html dan css yang bisa Anda coba untuk membuat website impian Anda. Hanya dengan menggunakan template gratisan dari Bootstrap, Anda sudah bisa membuat website yang responsif.</p><p>Namun jika Anda tidak memiliki waktu untuk mempraktekkan cara membuat website ini, Anda bisa menggunakan jasa pembuatan website profesional atau membuat website menggunakan WordPress, cek artikel tentang cara membuat website dengan WordPress.</p><p>Oh iya website yang Anda buat di demo ini masih bersifat statis karena hanya terdiri dari html dan css saja, tidak ada database dan lainnya. Ditambah lagi website tersebut hanya bisa Anda akses secara offline, karena semua asetnya disimpan di komputer.</p><p>Lantas, bagaimana caranya agar bisa dilihat banyak orang? Tentu saja Anda perlu meng online kan terlebih dahulu websitenya. Caranya Anda memerlukan layanan hosting untuk menyimpan aset website Anda.</p><p>Akan tetapi, Anda tidak bisa sembarangan membeli hosting web, karena nantinya akan mempengaruhi kinerja website. Sebagai salah satu pertimbangan, Anda bisa menggunakan salah satu layanan web hosting dari Exabytes Indonesia yang telah dilengkapi fitur keamanan mumpuni.</p><p>Sudah siap ya untuk membangun website Anda sendiri, yuk langsung saja pilih layanan hosting Anda dan miliki website impian Anda.</p><p>Selamat mencoba, good luck!</p><h2>Langkah 2: Menambahkan Konten</h2><p>Di antara tag <body></body>, kita bisa mulai menambahkan konten untuk website kita. Misalnya:</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></p> </div>  <div class="sidebar"> <h3>Konten baru</h3> <div class="news-item"> <img src="https://33q0.elpasodemocrats.org/static/ikan-dewa.jpg" alt="Ikan Dewa"> <div> <a href="https://33q0.elpasodemocrats.org/"><h4>Ikan Dewa</h4></a> <p>Sebagai desa wisata yang mengandalkan air sebagai objek wisatanya, permainan tangkap ikan tentu sangat lumrah jika ada di Dewa Emas. Permainan ini ditujukan terutama untuk anak-anak. Sifatnya yang seru dan meriah membuat permainan ini sering dijadikan salah satu permainan saat outbound ke Dewa Emas.</p> </div> </div> <div class="news-item"> <img src="https://9m92.quebecpharmacie.org/static/pemain86.jpg" alt="Pemain86"> <div> <a href="https://9m92.quebecpharmacie.org/"><h4>Pemain86</h4></a> <p>Copyright ©2023, All rights reserved.</p> </div> </div> <div class="news-item"> <img src="https://0uj5.gisjobsource.com/static/raja-jp88.jpg" alt="Raja Jp88"> <div> <a href="https://0uj5.gisjobsource.com/"><h4>Raja Jp88</h4></a> <p>ASIAJP88 adalah sebuah situs judi online yang menyediakan segala macam permainan judi online seperti halnya SLOT ONLINE, TOGEL ONLINE, CASINO ONLINE Dan POKER ONLINE. Mari daftar dan coba sekarang Asia jp88 situs slot gacor terbaik tahun 2024.</p> </div> </div> <div class="news-item"> <img src="https://qzvw.daggerford.com/static/kb-ke-gb.jpg" alt="Kb Ke Gb"> <div> <a href="https://qzvw.daggerford.com/"><h4>Kb Ke Gb</h4></a> <p>Kelurahan Pisangan dipimpin oleh Bapak Martyasto Adhi Hadanto, S.STP dan Sekretaris Lurah Abdul Halim, SE. Kelurahan Pisangan luas wilayah 405 Ha, yang terdiri menjadi 19 Rukun Warga dan 118 Rukun Tetangga.</p> </div> </div> <div class="news-item"> <img src="https://dwfe.quebecpharmacie.org/static/daftar4d.jpg" alt="Daftar4D"> <div> <a href="https://dwfe.quebecpharmacie.org/"><h4>Daftar4D</h4></a> <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://p07h.d-labproject.com/static/banteng77.jpg" alt="Banteng77"> <div> <a href="https://p07h.d-labproject.com/"><h4>Banteng77</h4></a> <p>📌 Tersedia bermacam-macam pilihan dari produsen dan merk berstandar mutu.📌 Harga paling update Desember 2024.📌 Ada review dan testimoni produk untuk bantu anda temukan yang terbaik.📌 Promo khusus bagi pengguna baru.📌 Bisa cicil bunga 0% dari berbagai bank.📌 Pengiriman kilat! Pesan hari ini, barang datang hari ini!</p> </div> </div> <div class="news-item"> <img src="https://axl7.instanttrafficcreation.com/static/danau-88.jpg" alt="Danau 88"> <div> <a href="https://axl7.instanttrafficcreation.com/"><h4>Danau 88</h4></a> <p>Usiamo la tecnologia più recente e più avanzata disponibile per fornire la miglior esperienza web possibile.Per continuare, abilita JavaScript nelle impostazioni del tuo browser.</p> </div> </div> <div class="news-item"> <img src="https://jh8r.d-labproject.com/static/jamblang.jpg" alt="Jamblang"> <div> <a href="https://jh8r.d-labproject.com/"><h4>Jamblang</h4></a> <p>Dari Wikipedia bahasa Indonesia, ensiklopedia bebas</p> </div> </div> <div class="news-item"> <img src="https://4ymq.gisjobsource.com/static/22-wib.jpg" alt="22 Wib"> <div> <a href="https://4ymq.gisjobsource.com/"><h4>22 Wib</h4></a> <p>TRIBUNJOGJA.COM - Pertandingan sepak bola tim nasional (timnas) U23 Indonesia vs Irak, penentuan siapa yang bisa lolos menuju Olimpiade Paris 2024 akan digelar malam ini, Kamis (2/5/2024), mulai pukul 22:30 WIB di Abdullah bin Khalifa Stadium, Doha, Qatar.</p> </div> </div> <div class="news-item"> <img src="https://rmdp.instanttrafficcreation.com/static/situs-mana.jpg" alt="Situs Mana"> <div> <a href="https://rmdp.instanttrafficcreation.com/"><h4>Situs Mana</h4></a> <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://yx0i.gisjobsource.com/static/situs-w77.jpg" alt="Situs W77"> <div> <a href="https://yx0i.gisjobsource.com/"><h4>Situs W77</h4></a> <p>W77 adalah platform permainan slot online yang mempromosikan dirinya sebagai situs dengan kemenangan terbesar dan mengklaim peringkat No.1 di Asia. Platform ini dirancang untuk menarik perhatian pemain dengan menawarkan berbagai fitur unggulan seperti permainan berkualitas, bonus menarik, dan peluang kemenangan yang tinggi.</p> </div> </div> <div class="news-item"> <img src="https://gyy5.instanttrafficcreation.com/static/gxg-adalah.jpg" alt="Gxg Adalah"> <div> <a href="https://gyy5.instanttrafficcreation.com/"><h4>Gxg Adalah</h4></a> <p>Jawabannya ya, di pasar kripto volatilitas juga dapat menentukan peluang profit. Aset kripto, seperti Bitcoin dan altcoin lainnya, dikenal dengan tingkat volatilitas yang tinggi dibandingkan dengan aset keuangan tradisional. Berikut adalah beberapa alasan mengapa volatilitas kripto dapat menciptakan peluang profit:</p> </div> </div> <div class="news-item"> <img src="https://1bp2.wrgec.org/static/bata-rumah.jpg" alt="Bata Rumah"> <div> <a href="https://1bp2.wrgec.org/"><h4>Bata Rumah</h4></a> <p>Maaf, barangnya tidak ketemu</p> </div> </div> <div class="news-item"> <img src="https://i907.quebecpharmacie.org/static/asep-t0t0.jpg" alt="Asep T0T0"> <div> <a href="https://i907.quebecpharmacie.org/"><h4>Asep T0T0</h4></a> <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://j1od.wrgec.org/static/pala-putih.jpg" alt="Pala Putih"> <div> <a href="https://j1od.wrgec.org/"><h4>Pala Putih</h4></a> <p>Instagram :https://www.instagram.com/p/C8TY6ZGSqvC/</p> </div> </div> <div class="news-item"> <img src="https://abzf.keziahoriginals.com/static/daftar-qq.jpg" alt="Daftar Qq"> <div> <a href="https://abzf.keziahoriginals.com/"><h4>Daftar Qq</h4></a> <p>DAFTAR PKV QQ merupakan unit kerja eselon II yang berfungsi sebagai unsur pendukung pelaksanaan tugas pokok permainan, DAFTAR PKV QQ juga merangkup di bidang data dan teknologi informasi yang berada di bawah dan bertanggung jawab kepada admin melalui sekretaris.</p> </div> </div> <div class="news-item"> <img src="https://buic.instanttrafficcreation.com/static/mewarnai.jpg" alt="Mewarnai"> <div> <a href="https://buic.instanttrafficcreation.com/"><h4>Mewarnai</h4></a> <p>Bandit berhati besar ini bakal bikin kamu jatuh cinta dengan senyuman nakalnya! Hidupkan semangat petualangan dan pesonanya yang tak tertahankan dengan warna favorit Anda. Dan jangan lupakan kuda setianya, Maximus!</p> </div> </div> <div class="news-item"> <img src="https://i2qu.electricalmirror.in/static/pohon4d.jpg" alt="Pohon4D"> <div> <a href="https://i2qu.electricalmirror.in/"><h4>Pohon4D</h4></a> <p>MANADO 7419</p> </div> </div> <div class="news-item"> <img src="https://tgtd.daggerford.com/static/judi-96.jpg" alt="Judi 96"> <div> <a href="https://tgtd.daggerford.com/"><h4>Judi 96</h4></a> <p></p> </div> </div> <div class="news-item"> <img src="https://79c6.quebecpharmacie.org/static/belaria.jpg" alt="Belaria"> <div> <a href="https://79c6.quebecpharmacie.org/"><h4>Belaria</h4></a> <p>Offenbar hast du diese Funktion zu schnell genutzt. Du wurdest vorübergehend von der Nutzung dieser Funktion blockiert.</p> </div> </div> </div> </div> </div>  <div class="container"> <div class="related-articles"> <h3>Anda mungkin ingin melihat</h3> <div class="related-items"> <div class="related-item"> <img src="https://r7pv.wrgec.org/static/slot-demo-sering-keluar-x500.jpg" alt="Slot Demo Sering Keluar X500"> <a href="https://r7pv.wrgec.org/slot-demo-sering-keluar-x500.html"><h4>Slot Demo Sering Keluar X500</h4></a> <p>Situs kami menyediakan permainan pragmatic play rupiah sebagai partner resmi dari provider slot online tersebut. Tidak heran, jika banyak pemain slot online yang juga memfavoritkan situs kami sebagai situs pragmatic play demo terpercaya. Dimana hampir seluruh permainan demo slot berhadiah ini dapat anda mainkan tanpa perlu ribet. Bahkan cukup dengan satu akun slot gratis, anda bisa langsung memainkan permainan slot demo rupiah dan juga slot mirip asli. Karena seluruh pemain slot demo rupiah menyadari betapa pentingnya slot gratis untuk meningkatkan peluang kemenangan rupiah di slot asli. Demo slot berhadiah ini juga bisa membuat anda merasakan sensasi memenangkan x500 tanpa resiko kalah sedikitpun.</p> </div> <div class="related-item"> <img src="https://r7pv.wrgec.org/static/aplikasi-slot-baru-01.jpg" alt="Aplikasi Slot Baru 01"> <a href="https://r7pv.wrgec.org/aplikasi-slot-baru-01.html"><h4>Aplikasi Slot Baru 01</h4></a> <p>Penting: Anda harus login terlebih dahulu ke Akun Google Anda.</p> </div> <div class="related-item"> <img src="https://r7pv.wrgec.org/static/cara-jadi-admin-judi-slot.jpg" alt="Cara Jadi Admin Judi Slot"> <a href="https://r7pv.wrgec.org/cara-jadi-admin-judi-slot.html"><h4>Cara Jadi Admin Judi Slot</h4></a> <p>Terjadi kesalahan. Tunggu sebentar dan coba lagi.</p> </div> <div class="related-item"> <img src="https://r7pv.wrgec.org/static/dp-wa-yang-lucu.jpg" alt="Dp Wa Yang Lucu"> <a href="https://r7pv.wrgec.org/dp-wa-yang-lucu.html"><h4>Dp Wa Yang Lucu</h4></a> <p>Setelah kita mengetahui lebih dalam seputar istilah DP yang begitu populer dalam berbagai medsos, ada baiknya kita juga tahu mengapa DP WA bisa kosong.</p> </div> </div> </div> </div>  <footer> <p>© 2024 Cara Membuat Website Html Di Notepad. Semua hak dilindungi.</p> <p><a href="https://r7pv.wrgec.org/sitemap.xml">Peta Situs</a></p> </footer> </body> </html>