Struktur Dokumen HTML: Pelajari Struktur Dasar HTML

Diterbitkan: 2020-12-14

HTML telah digunakan sebagai bahasa mark-up standar untuk dokumen yang dapat diakses di internet melalui data browser. HTML terdiri dari serangkaian elemen pendek, tag, dan kode, yang ketika dikompilasi bersama dalam format terstruktur, membuat halaman web yang dapat dilihat siapa saja dengan akses internet yang tepat.

Ini telah mengubah cara orang bekerja. HTML dan CSS digunakan untuk membuat dan memanipulasi elemen pada halaman web bersama dengan javascript, pembuat HTML mari menentukan peran yang berbeda untuk setiap elemen yang memberikan kebebasan penyesuaian penuh dalam proses pembuatan.

HTML adalah singkatan dari Hyper Text Markup Language, dan digunakan untuk mendesain halaman web yang ditampilkan di situs web.

Ada tiga aspek utama yang, jika disatukan, membantu membangun halaman web.

Struktur HTML —mendukung elemen struktural
Gaya CSS —membantu mendesain dan memberi gaya pada elemen struktural tersebut
Interaksi JS —memungkinkan interaksi antara elemen-elemen itu

Dalam struktur HTML, elemen dan tag dipasangkan satu sama lain untuk menandai konten.

Setiap halaman yang tersedia di internet menyertakan tag HTML. Tag ini membantu menampilkan konten online dengan perspektif yang jelas dan terbuka, yang selalu dapat dimoderasi dan diubah. Untuk menjelaskan hal-hal secara lebih sederhana, mari kita jelaskan bagaimana elemen dan tag digunakan dalam program.

Elemen pembuka dan penutup berubah, tetapi tag tetap sama. Tag disisipkan sebelum dan di akhir kalimat, memungkinkan mereka untuk diformat pada halaman. Halaman web yang ideal terdiri dari tiga bagian utama dan esensial:

Judul
Kepala
Tubuh

Elemen Head digunakan untuk menyorot awal/judul bagian kepala. Bagian kepala selalu membantu sebagai deskripsi tentang halaman. Konten di dalam tag kepala, yaitu judul, adalah apa yang digunakan sebagai sumber untuk mengidentifikasi konten halaman.

Tercantum di bawah ini adalah semua tag yang dapat digunakan di elemen kepala:

<dasar>
<tautan>
<meta>
<noskrip>
<skrip>
<gaya>
<judul>

Sebagai contoh:

<TITLE> Contoh Halo dunia dalam HTML<TITLE>

</ KEPALA>

Elemen level blok digunakan untuk mengidentifikasi bagian tertentu dari halaman web, baik itu paragraf, sub-judul, atau beberapa daftar yang akan dibuat.

Paragraf: <P>dan </P>

Judul, tingkat satu:<H1>Judul, tingkat dua:<H2>dan </H2>

Aturan horizontal:<HR> Center:<CENTER>

Footer : Tidak ada tag khusus untuk menunjukkannya tetapi tetap disarankan untuk memiliki footer di halaman web untuk membantu mengidentifikasi bagian yang memerlukan kontak dengan penulis. Mereka mungkin menyertakan bagian FAQ atau email untuk berlangganan buletin.

<HTML>

<TITLE>Perusahaan Sepatu <TITLE>

</ KEPALA>

<BODY>

<H1>Selamat datang di Sepatu Menakjubkan! </H1>: </H2>

<CENTER> Mengapa tidak mengunjungi <A HREF =..http://www.example1.com/..>Contoh Situs Web

</A>

</ PUSAT>

</BODY>

</HTML>

Bagian di atas menjelaskan elemen utama dalam halaman web dari struktur HTML.

Sekarang, kita beralih ke sumber HTML dan mencoba memahami bagaimana seseorang dapat menggunakannya untuk memahami struktur program dan elemen-elemennya.

Sebagai seorang pemula, ini sangat membantu untuk memahami bagaimana halaman lain dikembangkan, dan mereka dapat digunakan sebagai referensi untuk membuat versi yang disesuaikan untuk halaman web Anda sendiri.

Klik tombol kanan di manapun pada halaman web dan kemudian pilih 'lihat sumber halaman.' Ini akan membuka jendela yang berisi kode sumber halaman.

Untuk memeriksa halaman

Klik tombol kanan di mana saja di halaman web, lalu pilih 'Periksa' untuk melihat daftar dan jenis elemen yang digunakan untuk membuat halaman web tertentu. Ini akan mencakup HTML dan CSS, yang dapat dimodifikasi melalui panel gaya.

Dengan menjelaskan struktur dasar HTML dan tag-tagnya, sekarang mari kita beralih ke pemahaman elemen dasar yang diperlukan untuk menulis konten dalam HTML.

<p> Tag ini digunakan di halaman web ketika ada kebutuhan untuk sebuah paragraf, dan untuk mengakhirinya digunakan tag </p>.

<br> Tag ini digunakan untuk memutus baris dan kebanyakan digunakan untuk menulis satu baris, baik itu kontak maupun alamat.

<hr> Tag ini digunakan untuk memisahkan isi halaman web menjadi dua bagian.

Semua tag di sini diterapkan dalam contoh kode halaman web

Pelajari: 21 Ide Proyek Pengembangan Web

MEMASUKKAN

<html>

</head>

<tubuh>

<h1>Struktur HTML</h1>

<p>

Oleh upGrad Education<br>

<hr>

Pelajari dasar-dasarnya <br>

<hr>

Oleh upGrad Education<br>

</p>

</tubuh>

</html>

Atribut

Untuk semua tag yang disebutkan, atribut digunakan ketika ada kebutuhan untuk informasi tambahan. Atribut didefinisikan dengan dua parameter, yaitu 'nilai' dan 'nama'.

Di sini, parameter 'name' memiliki fungsi untuk mengambil nama properti yang dianggap ditugaskan. Dan parameter 'nilai' memiliki fungsi yang sama untuk mengambil nilai dari nama properti yang sejajar dengan elemen.

<img> Atribut ini digunakan untuk menambahkan/menyematkan gambar ke dalam halaman web. Tag ini akan membantu menentukan jalur gambar. Dan <height> dan <width> masing-masing menunjukkan tinggi dan lebar gambar.

<alt> Atribut ini diterapkan ketika gambar tidak dapat dimuat karena kesalahan koneksi atau karena alasan lain. Tag alt berfungsi sebagai subtitle untuk gambar.

Mendaftar di Kursus Rekayasa Perangkat Lunak dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.

Baca: 8 Ide & Topik Proyek Full Stack yang Menyenangkan

Contoh

<html>

<tubuh>

<h2>Atribut src</h2>

<p>Gambar HTML didefinisikan dengan tag img, dan nama file sumber gambar ditentukan dalam atribut src:</p>

</tubuh>

</html>

Untuk mengubah gaya teks, ukuran, font, dan fungsi lain yang terkait dengan teks, tag <style> digunakan

Contoh

<html>

<tubuh>

<h2>Atribut gaya</h2>

<p>Atribut digunakan untuk mengubah gaya, seperti warna:</p>

<p style="color:red;”>Ini adalah paragraf merah.</p>

</tubuh>

</html>

Dengan aplikasi modifikasi teks, HTML juga menyediakan tag untuk memodifikasi teks menjadi permintaan yang disesuaikan menggunakan tag ini.

<b> – teks tebal
<strong> – Teks penting
<i> – Teks miring
<em> – Teks yang ditekankan
<mark> – Teks yang ditandai
<small> – Teks lebih kecil
<del> – Teks yang dihapus
<ins> – Teks yang disisipkan
<sub> – Teks subskrip
<sup> – Teks superskrip

Untuk meringkas artikel, kami mempelajari fitur dan dasar-dasar HTML berikut:

struktur HTML
Tag, elemen, dan jenisnya
Tag dasar dan aplikasinya

Semua fitur, tag, dan atribut ini membantu memahami kebutuhan akan HTML.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan perangkat lunak tumpukan penuh, lihat Program PG Eksekutif upGrad & IIIT-B dalam Pengembangan Perangkat Lunak Tumpukan Penuh yang dirancang untuk para profesional yang bekerja dan menawarkan 500+ jam pelatihan yang ketat, 9+ proyek, dan penugasan, status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.

Persiapkan Karir Masa Depan

Daftar Sekarang untuk Magister Rekayasa Perangkat Lunak