Contoh html sederhana dengan notepad

Untuk membuat website sangat diperlukan adanya text editor dimana text editor ini merupakan cara untuk kita membuat baris-baris kode yang akan di tampilkan ke dalam website.

Table of Contents Show

Membuat Tampilan Menarik di HTML dengan Notepad
Struktur Dasar HTML5
Kode HTML apa saja?
Bagaimana cara membuat HTML?
Notepad ++ aplikasi apa?
Bagaimana langkah langkah membuat web HTML di Android?

Banyak sekali macam pilihan text editor diluar sana tetapi karena kali ini kita hanya akan membahas bagaimana cara membuat html 5 di notepad yang keren dan menarik di notepad.

jadi kita hanya akan menggunakan text editor yang tidak perlu kita download dan cari lagi

karena sudah tersedia di dalam os apapun jenisnya.

Disini kita akan membuat halaman website dengan kode html 5 dan sedikit css yang menarik dan sangat keren.

Persiapan

Langkah pertama buat sebuah folder terlebih dahulu di dalam komputer kamu masing-masing.

setelah itu buat sebuah folder dengan nama latihanhtml5

Buka folder latihanhtml5 yang telah kita buat tadi kemudian buat sebuah file baru dengan nama index.html dan style.css

Ingat format file nya harus sesuai yaitu index.html (format html) dan file style.css (format css)

Jika file masih berekstensi txt buka notepad terlebih dahulu kemudian save dimana folder latihanhtml5 kita tadi kemudian pilih type nya All Files.

Jika sudah kamu bisa melanjutkan tutorial ini.

Membuat Tampilan Menarik di HTML dengan Notepad

Sekarang saat nya kita koding yuhu

Buka notepad kamu masing-masing . sudah tau kan ya cara buka notepad di windows.

Jika belum ada dua cara membuka notepad di windows yaitu cara pertama klik logo windows di samping pojok kiri lalu ketik “notepad”.

atau kamu juga bisa menggunakan cara kedua yaitu dengan cara tekan logo windows + r dan ketik “notepad” pada keyboard kamu.

Setelah itu drag file index.html yang telah kita buat sebelumnya tadi ke browser kamu. seperti ini :

Tampilan website kita sudah terbuka namun masih blank alias kosong .

lah kenapa? ya jelas karena kita belum memasukkan apa-apa.

untuk mengetes apakah website kita sudah berjalan dengan baik ketik apapun di file index.html disini saya contohkan “afrizatul.com”.

Kemudian save dan mari kita refresh website kita tadi.

Bagus tulisan afrizatul.com yang sudah kita ketikkan tadi ke dalam file index.html sekarang sudah tampil di website kita.

Itu artinya file index.html kita sudah terhubung ke website kita.

Tetapi kan kita mau buat tampilan yang menarik?

mari kita hapus kembali tulisan tersebut karena itu hanya untuk pengetesan saja.

Struktur Dasar HTML5

Buka notepad kita tadi lalu paste kode dibawah ini

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h2>This is a Heading</h2>
<p>This is a paragraph.</p>
</body>
</html>

Save kembali kemudian refresh website kita maka tampilan nya akan seperti ini

itu adalah struktur awal dari bahasa pemograman html5 karena kita membutuhkan itu .

This is a Heading merupakan sebuah Heading di dalam html5.

Ada 6 jenis heading yang ada pada html5 yaitu :

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Supaya lebih jelas coba hapus kode ini

<h2>This is a Heading</h2>

Lalu ganti dengan kode ini

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h2>This is a Heading 1</h2>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>
<p>This is a paragraph.</p>
</body>
</html>

Save dan mari kita refresh lagi browser kita

Nah sudah terlihat jelas kan perbedaannya? lagi lagi kita masih belajar tentang dasar html nya saja.

yuk sekarang buat tampilan yang menarik dan keren di html 5 dengan notepad.

hapus semua kode di index.html

kemudian copy kode dibawah ini lalu paste ke index.html

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Afrizatul.com</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
	<div class="header-atas">
	<header>
		<nav>
			<ul>
				<li>Beranda</li>
				<li>Kontak</li>
			</ul>
		</nav>
	</header>
	</div>
	<section>
	
		<article>
			<header>
				<h2>Judul Postingan</h2>
			</header>
			<p>Contoh isi artikel...</p>
		</article>
		
	</section>
	<aside>
		<h2>Tentang</h2>
		<p>Afrizatul.com Merupakan Blog tentang belajar bahasa pemograman dan ilmu komputer terbaru</p>
	</aside>
	<footer>
		<p>Copyright 2019 Afrizatul.com</p>
	</footer>
</div>
</body>
</html>

save lalu buka file style.css kemudian copy dan paste kode berikut ini kedalamnya

.wrapper {
	background-color: #333;
	color: #fffffffa;
	padding:10px;
	width: 700px;
	height: auto;
	margin: 0 auto;
	font-family: arial;
}

Oke sekarang simpan lagi semua file kita . refresh lagi browser kita dan tampilannya sudah sedikit lebih menarik seperti ini

Tidak sampai situ saja. coba kita buat lagi supaya lebih menarik dan keren lagi.

Hapus semua kode di dalam file style.css tadi kemudian copy dan paste kode dibawah ini :

.wrapper {
	background-color: #333;
	color: #fffffffa;
	padding:0px;
	width: 700px;
	height: auto;
	margin: 0 auto;
	font-family: arial;
}
.header-atas ul{
	margin: 0;
	padding: 0;
	list-style: none;
	
}
.header-atas ul li {
	float: left;
	padding: 5px;
}
.header-atas {
    margin: 0;
    padding: 2px;
    width: auto;
    height: 30px;
    background-color: red;
}

Simpan lalu lihat lagi perubahan yang terjadi website kita.

Uh lumayan lah ya lanjut lagi deh.

Sekarang copy kode ini ke file index.html kita tadi . jangan lupa hapus terlebih dahulu ya

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Afrizatul.com</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
	<div class="header-atas">
	<header>
		<nav>
			<ul>
				<li>Beranda</li>
				<li>Kontak</li>
			</ul>
		</nav>
	</header>
	</div>
	<div class="artikel">
	<section>
	
		<article>
			<header>
				<h2>Bayu Afrizatul Rizki</h2>
			</header>
		</article>
		
	</section>
	</div>
	<div class="about">
	<aside>
		<h2>Tentang</h2>
		<p>Afrizatul.com Merupakan Blog tentang belajar bahasa pemograman dan ilmu komputer terbaru</p>
	</aside>
	</div>
	<footer>
		<p>Copyright 2019 Afrizatul.com</p>
	</footer>
</div>
</body>
</html>

Save. selanjutnya copy kode style.css dibawah ini. jangan lupa hapus juga semuanya sebelum di paste ya

body {
    background-color: #d8d0d0;
}
.wrapper {
	background-color: #333;
	color: #fffffffa;
	padding:0px;
	width: 700px;
	height: auto;
	margin: 100px auto;
	font-family: arial;
}
.header-atas ul{
	margin: 0;
	padding: 0;
	list-style: none;
	
}
.header-atas ul li {
	float: left;
	padding: 5px;
}
.artikel h2 {
    font-weight: 100;
}
.header-atas ul li:hover {
	float: left;
	background-color: #9a3cab;
	transition: 0.3s;
	cursor: pointer;
}
.header-atas {
    margin: 0;
    padding: 8px;
    width: auto;
    height: 30px;
    background-color: #8900a2;
}
.artikel {
    background-color: #3e1246;
    text-align: center;
    padding: 5px;
    text-transform: uppercase;
}
.about {
    background-color: #f1f1f1;
    border-left: solid 1px #8900a2;
    border-right: solid 1px #8900a2;
}
.about p {
    font-size: 13px;
    text-align: center;
    padding-bottom: 10px;
    color: #3e1246;
}
.about h2 {
    text-align: center;
    font-size: 18px;
    color: #3b393c;
    margin: 0;
    padding: 7px;
    text-transform: uppercase;
}
footer {
    font-size: 12px;
    text-align: right;
    padding: 2px;
    margin: 0;
    background: #8900a2;
}
footer p {
    padding: 0 5px;
}

Simpan kembali . terakhir liat hasil nya di browser..

Tara… tampilan website kita yang sederhana menjadi lebih menawan dan menarik serta enak di pandang mata. ciha. wkwk

Penutup

Mungkin segitu aja dulu ya untuk belajar membuat html 5 di notepad . jangan lupa ikuti tutorial tentang html dan bahasa pemograman lainnya di blog ini.

jika ada yang ingin ditanyakan silahkan komentar dibawah.

Kode HTML apa saja?

Berikut adalah 9 kode HTML dasar untuk blog dan arti coding tersebut:.

Title Tag. Tag HTML yang pertama yaitu title tag. ... .

Meta Description. Berikutnya, ada meta description. ... .

3. Heading Tag. ... .

4. Anchor Text dan Link. ... .

Nofollow. ... .

6. Image Alt Text. ... .

7. Tag Kanonikal. ... .

9. Tag Huruf Tebal (Bold).

Bagaimana cara membuat HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.

Buka editor teks. ... .

Atur jenis dokumen untuk HTML. ... .

Tambahkan tab judul untuk halaman web kamu. ... .

Ketik di bawah tag "Head" yang tertutup. ... .

Selanjutnya membuat judul halaman. ... .

Tambahkan judul tambahan jika kamu mau. ... .

Membuat paragraf. ... .

Mengubah warna teks..

Notepad ++ aplikasi apa?

Notepad++ adalah sebuah penyunting teks dan penyunting kode sumber yang berjalan di sistem operasi Windows. Notepad++ menggunakan komponen Scintilla untuk dapat menampilkan dan menyuntingan teks dan berkas kode sumber berbagai bahasa pemrograman. Notepad++ didistribusikan sebagai perangkat lunak bebas.