Scribd
Unggah
5 tayangan

tugas coding html

HTML adalah bahasa markup standar untuk membuat dan mendesain halaman web, yang terdiri dari elemen-elemen yang didefinisikan oleh tag. HTML telah berkembang dari versi awal ke HTML5, yang menambahkan fitur modern seperti elemen video dan audio. Memahami HTML adalah dasar penting bagi pengembangan web dan mempersiapkan untuk belajar bahasa lain seperti CSS dan JavaScript.

Diunggah oleh

irpanramdani91
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
5 tayangan

tugas coding html

HTML adalah bahasa markup standar untuk membuat dan mendesain halaman web, yang terdiri dari elemen-elemen yang didefinisikan oleh tag. HTML telah berkembang dari versi awal ke HTML5, yang menambahkan fitur modern seperti elemen video dan audio. Memahami HTML adalah dasar penting bagi pengembangan web dan mempersiapkan untuk belajar bahasa lain seperti CSS dan JavaScript.

Diunggah oleh

irpanramdani91
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 11

HTML, atau HyperText Markup Language, adalah bahasa standar yang digunakan untuk membuat dan

mendesain halaman web. HTML bukanlah bahasa pemrograman, melainkan bahasa markup yang
mengatur struktur dan konten dari sebuah halaman web. Dengan menggunakan HTML, kita dapat
menentukan bagaimana teks, gambar, tautan, dan elemen lainnya ditampilkan di browser.

HTML terdiri dari serangkaian elemen yang disebut tag. Setiap tag memiliki fungsi tertentu dalam
mendefinisikan bagian dari halaman web. Tag HTML biasanya ditulis dalam pasangan, dengan tag
pembuka dan tag penutup. Misalnya, tag <p> digunakan untuk menentukan paragraf, dan ditutup
dengan tag </p>.

HTML pertama kali dikembangkan oleh Tim Berners-Lee pada akhir tahun 1980-an. Sejak itu, HTML telah
mengalami banyak perkembangan dan standar baru, seperti HTML4 dan HTML5, telah diperkenalkan
untuk mendukung fitur-fitur web modern. HTML5, versi terbaru, menambahkan banyak fitur baru
seperti elemen video dan audio, grafik SVG, dan dukungan untuk aplikasi web yang lebih kompleks.

Berikut adalah beberapa konsep dasar dalam HTML yang perlu kalian ketahui:

Elemen dan Tag: Elemen HTML adalah blok bangunan dasar dari sebuah halaman web. Elemen ini
didefinisikan oleh tag, yang biasanya terdiri dari tag pembuka dan tag penutup. Contohnya, <h1> dan
</h1> digunakan untuk membuat heading utama.

Atribut: Atribut memberikan informasi tambahan tentang elemen HTML. Mereka ditempatkan di dalam
tag pembuka dan biasanya terdiri dari pasangan nama dan nilai. Contoh atribut adalah href dalam tag
<a> untuk menentukan tautan, atau src dalam tag <img> untuk menentukan sumber gambar.

Struktur Dokumen HTML: Sebuah dokumen HTML biasanya dimulai dengan deklarasi <!DOCTYPE html>
yang memberi tahu browser tentang versi HTML yang digunakan. Dokumen kemudian terdiri dari
elemen <html>, yang dibagi menjadi dua bagian utama: <head> dan <body>. Bagian <head> berisi
informasi meta tentang dokumen, seperti judul, karakter encoding, dan tautan ke file CSS. Bagian <body>
berisi konten yang akan ditampilkan di browser, seperti teks, gambar, dan formulir.

Elemen Blok dan Inline: Elemen HTML dapat dibagi menjadi dua kategori: elemen blok dan elemen
inline. Elemen blok, seperti <div>, <h1>, dan <p>, biasanya menempati seluruh lebar kontainer dan
dimulai pada baris baru. Elemen inline, seperti <span>, <a>, dan <img>, hanya menempati lebar konten
mereka dan tidak dimulai pada baris baru.

HTML sangat penting untuk dipelajari karena ini adalah dasar dari semua halaman web. Memahami
HTML adalah langkah pertama yang penting bagi siapa saja yang ingin terjun ke dunia pengembangan
web. Dengan menguasai HTML, kalian akan memiliki fondasi yang kuat untuk belajar bahasa lain seperti
CSS (Cascading Style Sheets) dan JavaScript, yang digunakan untuk memperindah dan menambah
interaktivitas pada halaman web.

. Persiapan Alat dan Bahan

Sebelum memulai, pastikan kalian memiliki:

Sebuah komputer atau laptop

Teks editor seperti Notepad (Windows) atau TextEdit (Mac)

Browser web untuk melihat hasil kerja kalian

2. Membuat Struktur Dasar HTML

Langkah pertama dalam contoh coding HTML website adalah membuat struktur dasar. Berikut adalah
contoh kode HTML sederhana yang bisa kalian gunakan:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contoh Coding HTML Website</title>

</head>

<body>

<h1>Selamat Datang di Website Saya</h1>

<p>Ini adalah contoh website yang dibuat dengan HTML.</p>


</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contoh Coding HTML Website</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

h1 {

color: #333;

p{

color: #666;

</style>

</head>

<body>
<h1>Selamat Datang di Website Saya</h1>

<p>Ini adalah contoh website yang dibuat dengan HTML.</p>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contoh Coding HTML Website</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

h1 {

color: #333;

p{

color: #666;

img {
max-width: 100%;

height: auto;

a{

color: #007bff;

text-decoration: none;

</style>

</head>

<body>

<h1>Selamat Datang di Website Saya</h1>

<p>Ini adalah contoh website yang dibuat dengan HTML.</p>

<img src="https://via.placeholder.com/600x400" alt="Contoh Gambar">

<p>Kunjungi <a href="https://www.example.com">website lain</a> untuk informasi lebih lanjut.</p>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contoh Coding HTML Website</title>

<style>

body {
font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

h1 {

color: #333;

p{

color: #666;

img {

max-width: 100%;

height: auto;

a{

color: #007bff;

text-decoration: none;

form {

background: #fff;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

}
input, textarea {

width: 100%;

padding: 10px;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 3px;

button {

padding: 10px 20px;

background: #007bff;

color: #fff;

border: none;

border-radius: 3px;

cursor: pointer;

</style>

</head>

<body>

<h1>Selamat Datang di Website Saya</h1>

<p>Ini adalah contoh website yang dibuat dengan HTML.</p>

<img src="https://via.placeholder.com/600x400" alt="Contoh Gambar">

<p>Kunjungi <a href="https://www.example.com">website lain</a> untuk informasi lebih lanjut.</p>

<form>

<label for="name">Nama:</label>

<input type="text" id="name" name="name">


<label for="message">Pesan:</label>

<textarea id="message" name="message"></textarea>

<button type="submit">Kirim</button>

</form>

</body>

</html>

<!DOCTYPE html>: Menentukan tipe dokumen.

<html>: Tag root yang membungkus seluruh konten HTML.

<head>: Bagian yang berisi metadata seperti judul, charset, dan link CSS.

<body>: Bagian utama yang berisi konten yang akan ditampilkan di browser.

<!DOCTYPE html>

<html>

<head>

<title>Ari&Style Beranda</title>

</head>

<body>

<h1>Selamat Datang di Ari&Style</h1>

<nav>

<ul>

<li><a href="#pria">Pria</a></li>
<li><a href="#wanita">Wanita</a></li>

<li><a href="#aksesoris">Aksesoris</a></li>

</ul>

</nav>

<h2>Produk Terbaru</h2>

<footer>

<p>&copy; 2023 Ari&Style</p>

</footer>

</body>

</html>

()

<title>Judul Halaman Anda</title>

<p>Ini adalah contoh paragraf.</p>

<a href="https://www.example.com">Kunjungi Website Kami</a>

<img src="gambar.jpg" alt="Deskripsi Gambar">

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Copy
<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<strong>Teks tebal ini</strong>

<select>

<option value="opsi1">Opsi 1</option>

<option value="opsi2">Opsi 2</option>

</select>

<iframe width="560" height="315"

src="https://www.youtube.com/embed/ID_VIDEO" frameborder="0" allowfullscreen></iframe>

<table border="1">

<tr>

<th>Kolom 1</th>

<th>Kolom 2</th>

</tr>

<tr>

<td>Baris 1, Kolom 1</td>

<td>Baris 1, Kolom 2</td>

</tr>

</table>

H<sub>2</sub>O

E = mc<sup>2</sup>

<button type="button">Klik Saya!</button>

<form action="proses_form.php" method="post">

<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">

<input type="submit" value="Kirim">

</form>

<p style="font-family: Arial;">Teks dengan font Arial</

<p style="font-size: 20px;">Teks dengan ukuran 20px</p

<p style="color: red;">Teks berwarna merah</p>

<p><mark>Teks yang di-highlight</mark></p>

<blockquote>

Ini adalah kutipan atau quote.

</blockquote>

<p><s>Teks yang dicoret</s></p>

Anda mungkin juga menyukai