Pengertian HTML
HTML atau Hypertext Markup Language adalah bahasa markup yang digunakan untuk membuat struktur halaman website agar dapat ditampilkan pada web browser. Jadi, HTML dapat dianalogikan sebagai pondasi awal dalam menyusun kerangka halaman web secara terstruktur sebelum membahas terkait tampilan desain dan sisi fungsionalitas.
- Apache
- MySQL
.png)
Lalu ke file explorer ke local disk C ,klik xampp
_LI.jpg)
Double klik file xampp lalu double klik file htdocs
.png)
Lalu buat folder baru klik folder dan buat file dokumen index,langkah selanjutnya tambahkan foto pribadi dan background dengan cara di copy paste
.png)
Setelah itu klik kanan dokumen index klik open with notepad.
Lalu langkah selanjutnya dichrome ketik "w3school" lalu klik HTML Editor disebelah kiri
salin kalimat dibawah ini
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Rubah kalimat di atas seperti dibawah ini,lalu paste kan di notepad
<!DOCTYPE html>
<html>
<head>
<title>TJKT</title>
</head>
<body>
<h1>Nama: agnia supi </h1>
<p>Kelas : XI TJKT B.</p>
.png)
Setelah itu di w3shcool klik HTML Image,fungsinya untuk menambahkan foto pribadi kita ,dengan cara kita meng copy kan kalimat dibawah ini
<img src="pic_trulli.jpg" alt="Italian Trulli">
rubah kalimat di atas menjadi seperti dibawah,fungsinya untuk menyamakan nama rename foto kita yang sudah di copy kan di folder
<h1 style="text-align:center;"><img src="agnia.jpg" alt="agnia"
.png)
Lalu kita atur ukuran foto pribadi kita dengan cara copy kalimat di bawah ini
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
rubah kalimat di atas menjadi seperti dibawah ini
<h1 style="text-align:center;"><img src="agnia.jpg" alt="agnia"width="350" height="250">
<style>
body {
.png)
Setelah menambahkan foto dan mengatur ukuran foto tersebut ,selanjutnya menambahkan background dengan cara di w3shcool HTML Image Background, copy kalimat dibawah dan paste kan di notepad index
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
rubah kalimat di atas menjadi
background-image: url('laut 2.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</body>
</html>
.png)
lalu ke chrome ketikkan "localhost/supi"
.png)
.png) |
| INDEX-NOTEPAD |
.png)
Tidak ada komentar:
Posting Komentar