Materi X: Get HTML Basic
Sebelumnya kita sudah memulai simple project di awal latihan, selanjutnya kita coba memperdalamnya berikut pembahasannya:
List Pembahasan Materi:
- Ketentuan Penulisan
Dokumentpada HTML - Penggunaan
Headingpada HTML - Penggunaan
Paragraphpada HTML - Penggunaan
Linkpada HTML - Penggunaan
Gambarpad HTML - Menambahkan
iconpadaTitlebarWeb Browser
Berikut pembahasannya.
- Semua dokumen
HTMLharus dimulai dengandeklarasi tipedokumen:<! DOCTYPE html>. - Dokumen HTML itu sendiri dimulai dengan
<html>dan diakhiri dengan</ html>. -
Bagiandokumen HTML yangterlihatadalah antara<body>dan</ body>.
Simple Sourcecode:
<!doctype html>
<html>
<head>
<title>SIMPLESITE'S</title>
</head>
<body>
Hello! Rabbaanii..
</body>
</html>Result:
- Setip Judul pada
HTMLdidefinisikan dengan tag dengan tinggkat<h1>sampai<h6>. -
<h1>mendefinisikan judul yang paling penting.<h6>mendefinisikan judul yang palingtidak penting:
Simple Sourcecode 2:
<!doctype html>
<html>
<head>
<title>SIMPLESITE'S</title>
</head>
<body>
<h4>Praktikum Latihan:</h4>
<li><a href="http://192.168.2.40/PRAK-300118/LAT2/filedocument.html">File Document HTML</a></li>
<li><a href="http://192.168.2.40/PRAK-300118/LAT2/header.html">Penggunaan Header pada HTML</a></li>
</body>
</html>Result:
Simple Sourcecode 2:
<!doctype html>
<html>
<head>
<title>SIMPLESITE'S</title>
</head>
<body>
<h1>Tingkatan 1</h1>
<h2>Tingkatan 2</h2>
<h3>Tingkatan 3</h3>
<h4>Tingkatan 4</h4>
<h5>Tingkatan 5</h5>
<h6>Tingkatan 6</h6>
</body>
</html>Result:
-
Paragraf HTMLdidefinisikan dengan tag<p>dan ditutup dengan</p>, berikut contohnya:
Simple Sourcecode 3:
<!doctype html>
<html>
<head>
<title>SIMPLESITE'S</title>
</head>
<body>
<p>
<b>Paragraph 1: Product Speed</b><br>
The first is product speed, which is an aspect of user experience. User experience (UX) refers to
how the app responds in the moment as the user interacts with it.
A quality UX is key since it means retaining users and receiving five-star reviews.
</p>
<p>
<b>Paragraph 2: Iteration Speed</b><br>
Iteration speed is a team’s ability to repeatedly learn and then act on those learnings through code or design.
If your team isn’t familiar with the languages you use, your iteration speed will slow down.
</p>
</body>
</html>Result:
-
Tautan HTMLditentukan dengantag <a href="[link]"> dan ditutup dengan </a>, berikut contohnya:
Simple Sourcecode 4:
<!doctype html>
<html>
<head>
<title>SIMPLESITE'S</title>
</head>
<body>
<a href="https://github.com/septiyadii">GitHub Saya</a>
</body>
</html>Result:
-
Gambar HTMLdidefinisikan dengan tag<img>dan diakhiri dengan . - File
sumber (src),teks alternatif (alt),lebar, dantinggidisediakan sebagaiatribut, berikut contohnya, sebelumnya tambahkan contoh gambar pada project disini saya tambahkan folderpicuntuk semua file gambar dan berikut:
Simple Sourcecode 4:
<!doctype html>
<html>
<head>
<title>SIMPLESITE'S</title>
</head>
<body>
<img src="http://192.168.2.40/PRAK-300118/LAT2/pic/facebook.png">My Facebook</img>
</body>
</html>Result:
Untuk menambahkan Icon pada Titlebar di Web browser kita hanya cukup menambahkan
...
...
...
<head>
<link rel="icon" type="image/gif/png" href="img/pavicon.png">
</head>
...
...
...
Done. Nah Tugas Akhirnya Bisa Dilihat Seperti Contoh Berikut: Klik Link Ini
Setelah cara diatas coba praktikkan pembelajaran diatas dan kemudian coba implementasikan kedalam aplikasi webserver kamu, dan tuangkan ke dalam tulisan, tulisan boleh di simpan di WiKi, Website atau Tulisan bentuk Softcopy dalam aplikasi Word.
- Dikumpulkan Paling Lambat Besok Pada Jam Pertama Kelas