Arsip Kategori: HTML

HTML

Penilaian Akhir ekstrakurikuler TIK kelas Coding

Mei 20, 2025 smpngodean2@gmail.com Tinggalkan komentar

Soal Project Akhir Web Sederhana: Halaman Profil Sederhana
Tujuan : Membuat sebuah halaman web sederhana yang berfungsi sebagai halaman profil pribadi atau tokoh fiktif menggunakan HTML.

Membuat Project web profil pribadi

Buatlah Project web pribadi menggunakan HTML
Pada project itu, buatlah minimal tiga halaman web, yakni home, biodata, dan about. Boleh ditambah halaman lain misal : kontak, galeri dll.

Pelaksanaan :

Untuk kelas yang hari rabu, ujian dilaksanakan pada
hari Rabu 21 Mei 2025
Untuk kelas yang hari kamis, ujian dilaksanakan pada
hari Kamis 05 juni 2025

Aturan :

Akan menggunakan 3 Lab.komputer (timur,tengah dan barat)
1 komputer untuk 1 siswa
Boleh menggunakan HP dengan syarat download terlebih dahulu Aplikasi Code Studio di Playstore
Open Book (boleh buka referensi lain, buku, hp dsb)

Project ini akan dinilai berdasarkan:

Kesesuaian dengan persyaratan yang disebutkan di atas.
Struktur HTML yang valid dan rapi.
Penggunaan elemen HTML yang tepat.
Kejelasan dan keterbacaan kode
Selamat mengerjakan project akhir web sederhana.

semua materi dan contoh ada di web https://kelascoding.smpn2godean.sch.id/

HTML

MEMBUAT WEB PROFILE PRIBADI MENGGUNAKAN HTML

April 15, 2025 smpngodean2@gmail.com Tinggalkan komentar

Pada pertemuan kali ini kita akan membuat projek web profil pribadi dengan menggunakan lima halaman web, yaitu home, about, biodata, galeri dan contact.
Berikut tahapannya :

Tahap 1
1. Buat folder baru dengan nama iniwebku(atau dengan nama masing).
2. Buat folder lagi di dalam folder iniwebku dengan nama folder image, folder image ini nantinya untuk menyimpan file foto.
3. Strukturnya nanti jadi seperi ini.

4. File yang perlu dipersiapkan di tahapan ini adalah foto berformat .jpg
5. Langkah selanjutnya kita akan mulai menulis kode. Silakan buka folder iniwebku dengan Visual Studio Code. Caranya:
Klik menu File, lalu pilih Open Folder dan carilah folder iniwebku dengan begini kita sudah siap menuliskan kode.

Tahap 2

1.Membuat halaman home

Buat file baru bernama index.html di dalam folder iniwebku,
Setelah itu, isi dengan kode berikut:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iniwebku</title>
    <style>
        /* Global Styles */
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to right, #00c6ff, #0072ff);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }

        /* Container */
        .container {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            width: 80%;
            max-width: 600px;
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            font-weight: 700;
        }

        p {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        .button {
            background-color: #ff6f61;
            color: white;
            padding: 15px 30px;
            font-size: 1.2rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
        }

        .button:hover {
            background-color: #e95c4b;
        }

        footer {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            color: white;
            font-size: 0.8rem;
        }

    </style>
</head>
<body>

    <div class="container">
        <h1>Selamat Datang di Personal Website saya!</h1>
        <p>Terima kasih telah mengunjungi website saya. saya senang dapat memberikan informasi dan layanan terbaik untuk Anda.</p>
        <a href="about.html" class="button">Jelajahi website Saya</a>
    </div>

    <footer>
        <p>&copy; exsan | 2025</p>
    </footer>

</body>
</html>

Jangan lupa untuk mengubah nama exsan dengan nama kamu.

Jika kita coba membuka file index.html, maka hasilnya akan seperti ini:

2. Membuat halaman about

Buat file baru dengan nama about.html

Kemudian tulis kode berikut :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aboutme</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 20px 0;
        }

        .container {
            width: 100%;
            margin: 20px auto;
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #333;
        }

        .bio-detail {
            margin-bottom: 15px;
        }

        .bio-detail label {
            font-weight: bold;
        }

        .bio-detail p {
            font-size: 16px;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 5px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="biodata.html">Biodata</a> |
        <a href="galeri.html">Galeri</a> |
        <a href="about.html">About Me</a> |
        <a href="contact.html">Contact</a> |
       
    </nav>

    <hr />

    <header style="text-align: center;">
        <img src="image/foto1.jpg" width="200" height="200" style="border-radius: 50%;"/>
        <h1>Muhammad Ichsanudin</h1>
        <p>(Software Engineer)</p>
    </header>

    <hr />

    <article style="text-align: center;">
        <h2>Overview</h2>
        <p>
            Haloo, saya adalah software engineer yang berdomisili di yogyakarta. </br>
            Saat ini sedang belajar HTML di SMPN 2 Godean bergabung dikelas coding
        </p>
    </article>

    <div style="max-width: 500px; margin: 3em auto">
        <table border="1" width="100%">
            <thead>
                <tr>
                    <th>Skill</th>
                    <th>Pengalaman</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <ul>
                            <li>HTML (Expert)</li>
                            <li>CSS (Beginner)</li>
                            <li>Javascript (Beginner)</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>Freelancer di Internet</li>
                            <li>Leader Local Linux Community</li>
                            <li>Leader Local Linux Community</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; 2025 exsan.</p>
    </footer>
</body>
</html>


 maka hasilnya akan seperti ini:

3. Membuat halaman biodata

Buat file baru dengan nama biodata.html

Kemudian tulis kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Biodataku</title>
	<link rel="stylesheet" type="text/css" href="style.css">
 
</head>
<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="biodata.html">Biodata</a> |
        <a href="galeri.html">Galeri</a> |
        <a href="about.html">About Me</a> |
        <a href="contact.html">Contact</a> |
    </nav>
	<div class="kotak">
 
		<div class="judul">
			<h1>BIODATA DIRI</h1>
		</div>
 
		<div class="blok">
 
			<h2>Informasi</h2>			
			
			<div class="kiri">
				<img src="image/foto1.jpg">				
			</div>
 
			<div class="kanan">
				<table>
					<tr>
						<th>Nama</th>
						<th>:</th>
						<td>M. Ichsanudin</td>
					</tr>
					<tr>
						<th>Tempat</th>
						<th>:</th>
						<td>Sleman</td>
					</tr>
					<tr>
						<th>Tgl.Lahir</th>
						<th>:</th>
						<td>DD MM YYYY</td>
					</tr>
					<tr>
						<th>Agama</th>
						<th>:</th>
						<td>Islam</td>
					</tr>
					<tr>
						<th>Alamat</th>
						<th>:</th>
						<td>Jl. Godean, Yogyakarta</td>
					</tr>
					<tr>
						<th>Email</th>
						<th>:</th>
						<td>xsn@fullstackdev.com</td>
					</tr>
					<tr>
						<th>No.HP</th>
						<th>:</th>
						<td>+62812-3456-7890</td>
					</tr>
					<tr>
						<th>Website</th>
						<th>:</th>
						<td><a href="https://www.iniwebku.com">www.iniwebku.com</a></td>
					</tr>
				</table>
				
			</div>
 
		</div>		
 
		<div class="blok">
 
			<h2>Pendidikan</h2>			
			
			<div>
				<ul>
					<li><b>2000 - 2006</b> SD </li>
					<li><b>2006 - 2009</b> SMP </li>
					<li><b>2009 - 2012</b> SMA </li>
					<li><b>2012 - 2016</b> Sekolah Tinggi</li>
				</ul>
			</div>
 
		</div>
 
		<div class="blok">
 
			<h2>Pengalaman Kerja</h2>
			
			<div>
				<ul>
					<li>
						<b>2017 - 2019</b> - <i>Back-End Developer</i> - di Di PT. Teknologi Indonesia
					</li>
					<li>
						<b>2020 - Now</b> - <i> Software Engineer</i> - di Di SMPN 2 Godean
					</li>
				</ul>
			</div>
 
		</div>
 
		<div class="blok">
 
			<h2>Keahlian</h2>			
			
			<div>
				<ul>
					<li>HTML</li>
					<li>CSS</li>
					<li>JavaScript</li>
					<li>PHP</li>
						
				</ul>
			</div>
 
		</div>
	</div>
</body>
</html>



maka hasilnya akan seperti ini :

4. Membuat halaman galeri

Buat file baru dengan nama galeri.html

Kemudian tulis kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeri Foto dan Video</title>
    <style>
        /* Global Styles */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4CAF50;
            color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 2rem;
            font-weight: bold;
        }

        .container {
            padding: 30px;
            width: 90%;
            margin: 0 auto;
        }

        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }

        /* Grid Layout for Gallery */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        /* Photo and Video Styling */
        .gallery-item {
            background-color: #fff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        .gallery-item img, .gallery-item video {
            width: 100%;
            height: auto;
            display: block;
        }

        .gallery-item video {
            border-radius: 8px;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        /* Overlay Effect for Hover */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
            text-align: center;
            padding: 10px;
        }

        .overlay h3 {
            font-size: 1.5rem;
            margin: 0;
        }

        footer {
            text-align: center;
            background-color: #333;
            color: white;
            padding: 10px 0;
            margin-top: 40px;
        }

    </style>
</head>
<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="biodata.html">Biodata</a> |
        <a href="galeri.html">Galeri</a> |
        <a href="about.html">About Me</a> |
        <a href="contact.html">Contact</a> |
       
    </nav>
    <header>
        <h1>Galeri Foto dan Video</h1>
    </header>

    <div class="container">
        <h2>Jelajahi Koleksi Saya</h2>

        <!-- Galeri Grid -->
        <div class="gallery">
            <!-- Foto 1 -->
            <div class="gallery-item">
                <img src="image/roy.jpg" alt="Foto 1">
                <div class="overlay">
                    <h3>Foto 1</h3>
                </div>
            </div>
            <!-- Foto 2 -->
            <div class="gallery-item">
                <img src="image/ronaldo.jpg" alt="Foto 2">
                <div class="overlay">
                    <h3>Foto 2</h3>
                </div>
            </div>
            <!-- Video 1 -->
            <div class="gallery-item">
                <iframe width="420" height="315"
                    src="https://youtu.be/T_3h_TIJA64?si=1th7rY1AfiMduva6?controls=0">
                 </iframe>    
               
                <div class="overlay">
                    <h3>Video 1</h3>
                </div>
            </div>
            <!-- Foto 3 -->
            <div class="gallery-item">
                <img src="image/eric.jpg" alt="Foto 3">
                <div class="overlay">
                    <h3>Foto 3</h3>
                </div>
            </div>
            <!-- Video 2 -->
            <div class="gallery-item">
                <iframe width="420" height="315"
                src="https://youtu.be/BiWafKt68eI?si=wR2Oh7s9ivZo2RTx?controls=0">
             </iframe> 
                <div class="overlay">
                    <h3>Video 2</h3>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p>&copy; exsan | 2025</p>
    </footer>

</body>
</html>

maka hasilnya akan seperti ini :

5. Membuat halaman kontak

berikutnya membuat halaman kontak, sama seperti sebelum2nya buat file baru dengan nama contact.html

tulis kode seperti berikut :

!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>contactme</title>
</head>

<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="biodata.html">Biodata</a> |
        <a href="galeri.html">Galeri</a> |
        <a href="about.html">About Me</a> |
        <a href="contact.html">Contact</a> |
        
    </nav>

    <hr />

    <div>
        <h1>Contact Me</h1>
        <form>
            <label for="email">Email</label><br />
            <input type="email" name="email" placeholder="alamat email"/>
            <br />
            <label for="message">Pesan</label><br />
            <textarea name="message" placeholder="Tulis pesan anda..." rows="4" cols="80"></textarea>
            <br />
            <br />
            <input type="submit" value="Kirim" />
        </form>
    </div>

    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; XSN 2025.</p>
    </footer>
</body>
</html>

Hasilnya :

Form contact ini belum bisa berfungsi, karena kita belum membuat kode untuk mengirim data.

HTML

Pre Test

Februari 13, 2025 smpngodean2@gmail.com Tinggalkan komentar

Buatlah halaman web sederhana seperti berikut ini :

gunakan pemformatan teks
Warna dan font bebas

<!DOCTYPE html>
<html lang=”en”>

<HEAD>
<TITLE>pretest</TITLE>
</HEAD>
<BODY BGCOLOR=”lime” TEXT=”maroon”>
<font face=”algerian”> <B> Konsep Dasar Apa itu HTML </B> </font><br>
Sebelum belajar <i> HTML </i> dasar, kamu harus tahu apa itu <i> HTML </i>. <br>
Jadi, <i>HTML</i> yang merupakan singkatan dari <U> Hypertext Markup Language </U> <br>
adalah bahasa markup yang mendefinisikan <B><I><U>struktur dasar halaman website</B></I></U>. <br>

<p> <font color=”blue”> Nama dan kelas : …………… , </font> </p>

</BODY>
</html>

HTML

Membuat Tabel di HTML

Februari 11, 2025 smpngodean2@gmail.com Tinggalkan komentar

Tabel terdiri dari 4 unsur utama:
Baris
Kolom
Sel
Garis

Berikut beberapa tag yang digunakan untuk membuat tabel di HTML:

Tag <table> untuk membungkus tabelnya
Tag <thead> untuk membungkus bagian kepala tabel
Tag <tbody> untuk membungkus bagian body dari tabel
Tag <tr> (table row) untuk membuat baris
Tag <td> (table data) untuk membuat sel
Tag <th> (table head) untuk membuat judul pada header
Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan <td>. Sementara tag yang lain adalah tambahan (opsional), boleh digunakan boleh tidak.

Baris

Kolom

Sel

Garis

Berikut beberapa tag yang digunakan untuk membuat tabel di HTML:

Tag <table> untuk membungkus tabelnya

Tag <thead> untuk membungkus bagian kepala tabel

Tag <tbody> untuk membungkus bagian body dari tabel

Tag <tr> (table row) untuk membuat baris

Tag <td> (table data) untuk membuat sel

Mari kita lihat contohnya:

!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tabel HTML</title>
</head>
<body>

<table>
<tr>
<td>Baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>

</body>
</html>

Hasilnya :

Pada hasil diatas tidak muncul garisnya, untuk menampilkan garis silakan tambahkan atribut border=”1″ di dalam tag <table>.

Sehingga akan menjadi seperti ini:

Mengatur Jarak Sel dengan Cellpadding

Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.

Atribut ini dapat kita berikan kepada tag <table>.

Contoh:

<tr>

<td>Baris 1 kolom 1</td>

<td>baris 1 kolom 2</td>

</tr>

<tr>

<td>Baris 2 kolom 1</td>

<td>baris 2 kolom 2</td>

</tr>

</table>

Hasil :

Menambahkan Warna pada Sel dan Baris

Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).

Contoh:

<tr>

<td bgcolor=”yellow”>Baris 1 kolom 1</td>

<td>baris 1 kolom 2</td>

</tr>

<td>Baris 2 kolom 1</td>

<td>baris 2 kolom 2</td>

</tr>

</table>

Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal atau nama warna dalam bahasa inggris.

Maka hasilnya akan seperti ini:

HTML

Paragraf dan Pemformatan Teks

Januari 7, 2025 smpngodean2@gmail.com Tinggalkan komentar

Penulisan paragraf

Penulisan paragraf bisa menggunakan tag<p>. Adapun untuk memformat tulisan/text bisa menggunakan berbagai macam tag sesuai dengan keperluannya sesuai dengan tabel berikut ini :

Tag	Deskripsi
<b>	Membuat teks tercetak tebal
<i>	Membuat teks tercetak miring
<small>	Membuat teks tercetak kecil
<em>	Membuat penekanan pada teks (emphasized)
<strong>	Menyatakan bahwa teks tersebut penting
<sub>	Membuat teks tercetak sebagai subscript
<sup>	Membuat teks tercetak sebagai superscript (pangkat)

Buka notepad kemudian ketik kode berikut :

<HTML>

<HEAD>

</HEAD>

<BODY>

Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen, apa saja. <br>

Ketiga tipe tersebut ialah tulisan <B>tebal</B>, tulisan <I>miring</I> dan tulisan <U>bergaris bawah</U>. <br>

Bisa pula dua tipe huruf dipadukan misalnya tulisan <B><I>tebal dan miring</B></I>, <br>

tulisan <B><U>tebal dan bergaris bawah</B></U> atau tulisan <I><U>miring dan bergaris bawah</I></U>. <br>

Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan<br>

<B><I><U>tebal, miring dan bergaris bawah</B></I></U>.

</BODY>

</HTML>

Simpan dan diberi nama teks.html kemudian bukalah teks.html menggunakan browser

Untuk ganti baris gunakan tag <br>

Contoh ganti baris dan penggunaan tipe-tipe font :

<HTML>

<HEAD>

</HEAD>

<BODY>

<font face=”verdana”>Jenis Font<br></font>

verdana <br>

<font face=”arial”>arial <br>

<font face=”algerian”>Algerian <br>

<font face=”helvetica”>helvetica <br>

</p>

</BODY>

</HTML>

Warna pada background dan teks

Buka notepad dan ketikan kode berikut :

<HTML>

Tulisan ini akan tampak dalam browser.

</BODY>

</HTML>

Simpan file dan beri nama background.html kemudian bukalah menggunakan browser.

Selanjutnya, ini adalah contoh kode warna menggunakan hex

black	#000000	blue	#0000FF	Olive	#808000
White	#FFFFFF	fuchsia	#FF00FF	Green	#008000
Red	#FF0000	Gray	#808080	Teal	#008080
Yellow	#FFFF00	Silver	#C0C0C0	Navy	#000080
lime	#00FF00	Maroon	#800000	purple	#800080

Buka notepad dan tulislah kode berikut ini :

<HTML>

<HEAD>

<TITLE>Karya Pertamaku</TITLE>

</HEAD>

Tulisan ini akan tampak dalam browser.

</BODY>

</HTML

Simpan file kemudian bukalah menggunakan browser.

HTML

Belajar HTML 3 Membuat Paragraf pada HTML

November 7, 2024 smpngodean2@gmail.com Tinggalkan komentar

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.

Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>, dan <pre>.

Contoh:

Hasilnya:

Atribut untuk Paragraf

Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.

Contoh:

Hasilnya:

Atribut align merupakan atribut yang digunakan untuk pertaan teks pada paragraf. Namun, menurut validator W3C.. penggunaan tag ini sebaiknya diganti dengan CSS.

Mengapa demikian?

Karena atribut align dapat merubah tampilan dari web. Ini sebenarnya tugas dari CSS. Tugas utama dari HTML adalah membuat struktur dasar dari web.

Contoh perataan menggunakan CSS:

Hasilnya

Tag <br>

Tag <br> untuk Membuat Paragraf

Tag <br> sebenarnya bukanlah tag untuk membuat paragraf. Tapi tag ini, biasanya digunakan untuk membantu tag <p>.

Fungsi utama tag <br> adalah untuk membuat baris baru.

Contoh:

Misalkan kita ingin menampilkan pantun, bisa saja kita buat seperti ini di dengan tag <p>.

Hasilnya :

Meskipun pada kode HTML kita sudah menulis tiap bait pantun dalam baris yang baru. Tapi ia akan tetap ditampilkan seperti baris.

Di sinilah saatnya kita harus menggunakan tag <br>. Maka, kode di atas.. bisa kita perbaiki menjadi seperti ini:

Hasilnya :

tag <br> adalah tag yang tidak memiliki pasangan penutup. Cara menutupnya, tambahkan saja garis miring seperti ini <br />.

Tag <br> boleh ditutup, boleh juga tidak. Namun, sebaiknya ditutup agar valid menurut validator W3C.

Tag <hr> untuk Membuat Garis

Sama seperti tag <br>, tag <hr> juga bukanlah tag untuk membuat paragraf.

Tag <hr> merupakan tag yang digunakan untuk membuat garis lurus secara horizontal (horizontal rule). Biasanya digunakan untuk memisahkan beberapa konten atau paragraf.

Contoh:

Hasilnya:

Tag <pre>

Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik. Contohnya seperti pantun dan puisi yang paragrafnya diulis dengan garis baru dan juga indentasi.

Hal ini bisa dilakukan dengan bantuan tag <br>. Namun ada juga tag lain yang bisa jadi alternatif, yakni tag <pre>.

Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.

Contoh:

Hasilnya :

Coba perhatikan!

Paragraf yang kita buat di dalam kode HTML akan ditampilkan dengan format yang sama seperti yang kita tulis di sana.

Biasanya tag <pre> sering digunakan untuk menampilkan source code. Karena, tag ini menggunakan font Monospace atau Courier New (di Windows).

Tag <p> vs Tag <div>

Tag <p> dan Tag <div>, memiliki perilaku yang hampir sama. Tapi tag <div> sebenarnya bukanlah tag untuk membuat paragraf, melainkan tag untuk membuat layout web.

Kadang tag <div> sering ‘disalahgunakan’ untuk membuat paragraf.

Contoh:

Haislnya :

Ini boleh-boleh, saja. Tapi hasilnya tidak akan sama seperti tag <p>.

Paragraf yang dibuat dengan tag <div> tidak akan memiliki jarak margin antar paragraf.

Tag <div> biasanya digunakan untuk membungkus teks yang ada di luar artikel. Contoh seperti teks pada footer, header, sidebar, dll.

Contoh :

Haislnya :

Paragraph Style

Sebenarnya ini ranah pembahasan tentang CSS bukan HTML. Karena itu, kamu boleh baca dan juga boleh tidak.

Paragraph Style adalah style CSS yang kita berikan kepada paragraf agar tampil lebih menarik.

Berikut ini beberapa style yang bisa diberikan pada paragraf:

1. Baris Pertama Masuk ke Dalam

Baris pertama pada paragraf kadang sering ditulis masuk ke dalam atau ini juga disebut dengan indentasi.

Contoh:

Bagaimanakah cara membuat yang seperti itu di HTML?

Gampang!

Kita bisa memanfaatkan style CSS.

Hasilnya :

Atribut style merupakan atribut untuk menambahkan style CSS. Pada contoh di atas kita menambahkan text-indent dengan nilai 45px, nilai ini akan menentukan jarak (ke dalam) dari baris pertama.

2. Warna untuk Paragraf

Warna bisa kita berikan kepada teks dan background. Properti CSS yang digunakan untuk memberikan warna adalah color (untuk teks) dan background-color (untuk background).

Contoh:

Hasilnya :

3. Mengubah Jenis Font

Tidak suka dengan jenis font yang digunakan, kamu bisa menggantinya dengan style CSS.

Caranya..

Kita bisa gunakan properti font-family lalu diberikan nilai dengan nama font yang akan digunakan.

Contoh:

Hasilnya :

Pada pertemuan kali ini, kita sudah belajar beberapa tag:

<p> untuk membuat paragraf;

<hr> untuk membuat garis lurus;

<br> untuk membuat baris baru;

<div> untuk membuat paragraf di luar artikel atau layaout;

<pre> untuk membuat paragraf dengan format yang sudah ditentukan.

Tag diatas adalah tag-tag dasar yang perlu diingat dalam membuat paragraf di HTML.