Scribd
Unggah
39 tayangan14 halaman

Web Belajar

Dokumen ini membahas tentang anatomi website yang terdiri dari HTML sebagai kerangka dasar, CSS untuk tampilan, dan JavaScript untuk interaksi. Juga membahas struktur dasar HTML dan berbagai elemen penting seperti head dan body.

Diunggah oleh

Sari Pudin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
39 tayangan14 halaman

Web Belajar

Dokumen ini membahas tentang anatomi website yang terdiri dari HTML sebagai kerangka dasar, CSS untuk tampilan, dan JavaScript untuk interaksi. Juga membahas struktur dasar HTML dan berbagai elemen penting seperti head dan body.

Diunggah oleh

Sari Pudin
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 14

A.

Anatomi Website

Sama seperti halnya tubuh manusia yang disusun dari kerangka tulang, HTML pada website berperan
sebagai kerangka dasar yang digunakan dalam menampilkan visual pada website. Tapi jika hanya
sebatas kerangka, seorang manusia akan terlihat menyeramkan dan aneh bukan? Maka dari itu
untuk mempercantik tampilannya kita membutuhkan sebuah kulit. Di sinilah peran CSS. Setelah
memiliki kulit dan nampak cantik, selanjutnya kita membutuhkan sebuah otak dan otot agar seorang
manusia dapat dinamis dan berinteraksi. Dalam website JavaScript-lah yang berperan dalam
membuat website yang dinamis dan interaktif.

 Website : Halaman yang menampilkan informasi kepada pengguna berupa teks atau gambar.
Website dapat diakses melalui internet dengan menggunakan browser.

 Browser : Sebuah perangkat lunak yang dapat menerjemahkan berkas HTML, CSS,
dan JavaScript yang didapat dari web server untuk ditampilkan dalam bentuk
halaman website.

 HTTP Server : Server berperan pada sebuah website sebagai sebuah software yang dapat
menerima transaksi dari HyperText Transfer Protocol.

 DNS Server : Server yang dapat mengubah/mengarahkan website melalui sebuah nama
domain.

 Client : Perangkat yang meminta (request) suatu layanan tertentu ke suatu server.

 HTML : Salah satu bahasa markup (markup language) yang digunakan untuk membuat
struktur dan menampilkan konten pada World Wide Web (Website).

 CSS : Bahasa markup yang digunakan untuk mengatur dan mempercantik tampilan pada
website.

 JavaScript : Bahasa pemrograman yang digunakan untuk membantu website menampilkan


informasi secara dinamis.

 Text Editor : Sebuah perangkat lunak yang digunakan untuk mengelola plain text. Kode
HTML, CSS, dan Javascript dituliskan menggunakan perangkat ini.

 Plain Text : Teks yang tidak terformat. Format teks ini digunakan dalam penulisan berkas
HTML, CSS, dan Javascript.

 Rich Text : Teks yang terformat. Format teks ini digunakan jika kita ingin menulis
menggunakan Microsoft Word atau teks editor berbasis WYSIWYG (What You See Is What
You Get).

 Element : Sebuah komponen pada HTML yang ditandai dengan tag pembuka dan penutup.
HTML Struktur

HTML dasarnya memiliki struktur yang nampak seperti ini:

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <title>Judul Halaman</title>

5. </head>

6. <body>

7. <h1>Heading Utama</h1>

8. <p>Sebuah Paragraph.</p>

9. </body>

10. </html>

Kita dapat melihat bahwa struktur dasar HTML dituliskan dari beberapa elemen. Pada setiap elemen
HTML terdapat dua tag, yaitu tag pembuka <> dan tag penutup </>. Lihat gambar berikut untuk lebih
jelasnya.

i antara tag pembuka dan tag penutup elemen, kita dapat meletakkan sebuah konten. Konten dapat
berupa teks ataupun sebuah elemen HTML lain. Contohnya, elemen <html> memiliki konten yaitu
elemen <head> dan juga elemen <body>. Lalu, elemen <head> memiliki konten berupa elemen
<title> yang di dalamnya memiliki konten berupa teks dari judul halaman yang ditampilkan. Begitu
pula dengan elemen lainnya,

Tetapi sejak HTML5, penggunaan <head> dapat dihilangkan. Oleh karena itu, struktur dasar berkas
HTML menjadi seperti berikut.

1. <!DOCTYPE html>

2. <html>

3. <meta charset="utf-8">

4. <title>Judul halaman</title>

5. <style> /* Style */ </style>

6. <body>

7. <h1>Heading Utama</h1>

8. <p>Sebuah Paragraph.</p>

9. </body>

10. </html>

1. Elemen <head>
Elemen <head> pada berkas HTML berfungsi sebagai tempat disimpannya informasi dari
dokumen HTML. Informasi dapat berupa elemen meta, style, atau link. Dan juga elemen
penting lainnya yang berfungsi menampilkan judul dari dokumen HTML didefinisikan dengan
menggunakan elemen <title>. Berikut contoh elemen yang berada pada konten head:
 <title>
 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>
2. Elemen <body>
Seluruh konten yang terdapat pada elemen ini akan ditampilkan pada halaman website.
Maka dari itu, elemen ini digunakan untuk menampung seluruh konten atau elemen yang
ditampilkan ke dalam jendela browser. Silakan coba tuliskan kode berikut, simpan dalam
format HTML dan jalankan pada browser.

1. <html>

2. <head>

3. <title>Ini merupakan judul dari dokumen HTML</title>

4. </head>

5. <body>

6. <h1>header yang diletakan di dalam elemen body</h1>

7. <p>Ini merupakan sebuah paragraph yang juga diletakan pada


sebuah konten body, sehingga konten ini dapat dilihat oleh pengguna
pada jendela browser.</p>

8. </body>

9. </html>

<h> </h> : Membuat Hider pada HTML


h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}
<p> </p> : membuat paragraf pada HTML
<br/> : Baris baru (enter) yang kita tulis di dalam tag <p>
<hr/> : Tag <hr /> (horzontal rule) dapat digunakan untuk membuat garis horizontal.
<pre> </pre> : jika kita menambahkan baris baru, indentasi (menjorok), spasi dan sebagainya,
Atribut HTML

Attribute Description
Menentukan tombol shortcut untuk mengaktifkan/memfokuskan pada sebuah
accesskey
element.
class Menentukan satu atau lebih classname untuk sebuah elemen.
Menentukan konten dari elemen merupakan konten yang dapat diubah atau
contenteditable
tidak.
Digunakan untuk menyimpan sebuah data pribadi khusus ke halaman atau
data-*
aplikasi.
dir Menentukan arah teks untuk konten pada suatu elemen.
draggable Menentukan apakah suatu elemen dapat di-drag atau tidak.
Menentukan apakah data yang di-drag adalah data yang disalin, dipindahkan,
dropzone
atau ditautkan saat dijatuhkan.
hidden Menentukan apakah suatu elemen ditampilkan atau tidak pada browser.
id Menetapkan id pada elemen.
lang Menentukan bahasa pada konten elemen.
Menentukan apakah elemen harus diperiksa ejaannya dan tata bahasanya atau
spellcheck
tidak.
style Menentukan styling secara satu baris untuk suatu elemen.
tabindex Menentukan urutan dari suatu elemen.
title Menentukan informasi tambahan tentang suatu elemen.
translate Menentukan apakah konten elemen harus diterjemahkan atau tidak.

Atribut ( Style )

Style color : Untuk mengubah warna latar belakang paragraf bisa menggunakan
properti CSS background-color, sedangkan untuk warna teks menggunakan color. ( Warna
huruf dan background)
Style font size : Untuk mengubah ukuran huruf paragraf, kita bisa menggunakan
properti CSS font-size. Kita bisa menggunakan satuan ukuran px, em, rem dan sebagainya.(
<p style="font-size: 20px">)

Style line-height : mengatur jarak antar baris dalam paragraf. (<p style="line-height:
35px">)

Style margin-bottom : Untuk mengatur jarak antar paragraf kita bisa menggunakan properti
CSS margin-top (jarak atas) atau margin-bottom (jarak atas). ( <p style="margin-bottom:
70px")

Style font-family : Untuk mengubah jenis huruf paragraph ( <p style="font-family:


'Times New Roman'">)
Style text-indent : Untuk membuat baris pertama menjorok ke dalam ( <p style="text-
indent: 50px">)

Unordered List
unordered list merupakan daftar yang tidak mementingkan urutan. Standarnya,
unordered list menampilkan bullet pada tiap item list-nya (tetapi kita bisa
mengubahnya dengan styling).
Untuk menetapkan konten sebagai unordered list kita gunakan <ul> </ul>
kemudian di dalam elemen tersebut kita gunakan tags <li> </li> untuk
menetapkan item pada list tersebut.

Ordered List
Ordered list digunakan untuk membuat list yang mementingkan urutan.
Contohnya, membuat daftar instruksi langkah demi langkah sehingga
dibutuhkan urutan yang sesuai. Ordered list bekerja seperti unordered list,
namun perbedaanya pada tiap item menampilkan angka bukan sebuah bullet.
Angka yang ditampilkan, otomatis berurut tiap itemnya, sehingga kita tidak
perlu menuliskan secara kasar urutan nomornya. Hal ini tentu mempermudah
kita untuk mengorganisir tiap itemnya. Untuk menetapkan konten
sebagai ordered list kita gunakan <ol> </ol>.
Sama seperti Unordered list, tiap item dalam list ditetapkan dengan
menggunakan tags <li></li>.Pada ordered list, tipe urutan angkanya dapat kita
atur melalui sebuah atribut type contoh <ol type="I"> </ol>
Nilai Type Deskripsi
1 Menggunakan angka dalam urutan item (default)
a Menggunakan huruf kecil dalam urutan item
A Menggunakan huruf besar dalam urutan item
Menggunakan huruf romawi kecil dalam urutan
i item
Menggunakan huruf romawi besar dalam urutan
I item
<ol start =”7”> </ol> : jika kita ingin memulai sebuah list dari angka 7, maka
kita tetapkan atribut start dengan nilai 7 pada elemen
<ol start="7" reversed> </ol> : membuat urutan dalam sebuah list terbalik.
Gambar HTML
Tanpa gambar sebuah website tentu tidak akan menarik, bukan? Ada beberapa
alasan mengapa website perlu gambar. Contohnya kita perlu menampilkan logo
perusahaan, ilustrasi, diagram, dan sebagainya.
ada HTML untuk menampilkan sebuah gambar kita bisa menggunakan
tag <img>. Berbeda dengan elemen lain, elemen <img> tidak menuliskan
konten diantara tag pembuka dan tag penutup sebagaimana tag
lainnya. Contoh.

<img

src="https://raw.githubusercontent.com/dicodingacademy/BelajarDasarPemrog

ramanWeb/099-shared-files/dicoding-logo.png" alt="Logo Dicoding">

Jenis Format Gambar


Ekstensi
Nama Format File Keterangan
Dapat digunakan untuk gambar animasi.
Graphics Interchange
.gif Ukuran file biasanya kecil.
Format
Kualitas gambar terbatas.
Kualitas text pada gambar dapat menjadi buruk.
.jpg, .jpeg, .jf
Joint Photographic Ukuran file lumayan kecil.
if, .pjpeg, .pj
Expert Group image Pada website biasanya digunakan untuk gambar yang tidak
p
banyak text.
Text lebih bisa terbaca dibandingkan jenis Jpeg.
Portable Network
.png Ukuran file dapat menjadi besar sehingga mengurangi
Graphics
kecepatan memuat situs.
Dibandingkan dengan gambar berkualitas sama pada jpeg
WebP .webp atau png, ukuran file pada webp dapat menjadi lebih kecil.
Namun tidak semua web browser dapat membaca webp.
Kualitas gambar terjaga dan ukuran file kecil.
Scalable Vector Namun tidak cocok untuk gambar yang terlalu kompleks
.svg
Graphics seperti foto.
Pada website biasanya digunakan untuk logo atau icon.

Mengatur ukuran gambar


Untuk mengatur ukuran gambar yang ditampilkan juga tentunya
menggunakan sebuah atribut. Untuk menentukan lebar gambar kita
gunakan atribut width, dan untuk menentukan tinggi tentu gunakan
atribut height. Contoh : width="200px" ; height="200px" />

Teks Terformat
Sejauh ini, kita sudah mengenal paragraf, heading dan juga list pada HTML. Tapi
masih ada beberapa lagi yang merupakan spesial teks format yang dapat kita
gunakan yaitu <blockquote>, <pre>, dan <figure>. ( Justify tulisan rata tengah )

Long quotations
Jika pada konten kita memiliki sebuah kutipan ataupun sebuah testimonial, kita
dapat gunakan format long quotations dengan menggunakan tags
<blockquote>. Konten di dalam elemen <blockquote> ini dapat berupa sebuah
paragraf, heading, ataupun list.
Preformatted text
Pada sub-modul sebelumnya, kita sudah mengetahui bahwa HTML akan
mengabaikan penulisan spasi yang dituliskan secara berulang dan juga line
breaks (baris baru). Tetapi pada beberapa tipe konten seperti contoh kode atau
puisi hal tersebut sangat berarti. Dengan begitu, terdapat sebuah elemen yang
dapat kita gunakan untuk menampilkan konten sesuai yang kita tulis pada text
editor. Untuk menggunakannya, kita gunakan elemen <pre> sebagai
pembungkus kontennya.
Figure
Elemen ini digunakan untuk merepresentasikan konten tersendiri (self-
contained content) seperti ilustrasi, diagram, foto atau bisa juga sebuah baris
kode. Banyak hal yang dapat digunakan dalam elemen ini.
Elemen ini digunakan untuk mengelompokkan blok konten yang dapat
dipindahkan posisinya dari blok utama sebuah dokumen tanpa mempengaruhi
arti dari induk dokumen.
Di dalam elemen figure kita dapat menuliskan elemen <figcaption> sebagai
sebuah caption (judul) untuk konten tersebut. Berikut contoh penggunaan
figure pada sebuah konten gambar.:
figure>
<img src=""">
<figcaption>Dicoding</figcaption>
</figure>

Inline Formatting Text


Pada materi kali ini, kita akan mengenal beberapa formatting text yang digunakan dalam
sebuah baris teks (inline text). Sebelum menjelaskan elemen inline untuk formatting text
yang dapat digunakan, sepertinya kita perlu membahas sekilas mengenai block dan inline.
Standarnya elemen HTML memiliki dua sifat, yaitu block dan inline. Elemen yang bersifat
block selalu membuat baris baru ketika di-render. Contohnya seperti elemen paragraf, list,
heading, dan lainnya. Lawan dari elemen tersebut, yaitu elemen inline. Elemen ini tidak
menambahkan baris baru ketika di-render. Apa saja elemen tersebut? Mari kita bahas satu
persatu.

Anchor
Apa itu anchor? Anchor (jangkar) merupakan elemen yang digunakan untuk membuat
sebuah hyperlink ke halaman atau website lain, file, alamat email, atau URL lainnya. Untuk
menggunakan elemen ini kita gunakan tag <a>...</a> bersama dengan atribut href untuk
menetapkan sebuah target yang akan dituju. Contoh :
<p>hubungi kami di</p>
<ul>
<li><a href="https://youtube.com">Website</a></li>
<li><a href="mailto:[email protected]">Email</a></li>
<li><a href="tel:+6281297367909">Telepon</a></li>
</ul>

Atribut Nilai Deskripsi


Menginstruksikan browser untuk mengunduh pada URL yang ditetapkan daripada
download filename
mengarahkannya.
Menetapkan target yang akan diarahkan/unduh ketika pengguna menekan
href URL
hyperlink.
hreflang language_code Menetapkan bahasa dari dokumen target.
Menetapkan URL yang akan diberitahu dengan mengirimkan post request ping
ping list_of_URLs pada body oleh browser (berjalan di belakang layar) ketika target URL pada
hyperlink ditekan. Biasanya atribut ini digunakan untuk pelacakan.
no-referrer-when-
downgrade,no-referrer, origin,
referrerpolicy Menetapkan referensi untuk dikirim pada target.
origin-when-cross-origin,
unsafe-url
Menetapkan lokasi ketika membuka target contohnya pada sebuah tab, window
target _blank, _parent,_self, _top
atau pada tab itu sendiri.
media media_type Menetapkan tipe media yang digunakan pada target.

Emphasized text
Gunakan elemen <em> untuk menunjukan bagian kata yang perlu kita tekankan. Elemen ini
menunjukan stress emphasis atau konten/kata yang perlu mendapatkan penekanan atau
perhatian khusus. Berikut contoh penggunaannya.

1. <p><em>Oding</em> adalah seorang pelajar</p>

2. <p>Dia adalah seorang <em>pelajar</em></p>

Standarnya pada browser sebuah kata yang ditekankan akan ditampilkan dalam gaya miring
pada teks nya.

Important text
Gunakan elemen <strong> untuk menunjukan sebuah teks yang begitu penting (strong
importance), serius, ataupun mendesak. Dalam arti teks tersebut harus dapat perhatian lebih
dari teks biasa lainnya. Contoh :

1. <p>Kesehatan merupakan hal yang penting, jaga pola makan yang


teratur dan <strong>jangan sampai makan tengah

2. malam!</strong></p>

Short quotations
Gunakan elemen <q> untuk menandai sebuah kutipan dalam sebuah teks. Elemen short
quotations berbeda dengan <blockquote>. Elemen ini digunakan untuk kutipan pendek yang
terletak di dalam baris (inline). akan ditampilkan di dalam tanda kutip
1. <p>Sebelum pulang kerja, ia berkata kepadaku: <q>Maaf saya tidak
bisa hadir dalam pertemuan nanti</q></p>

Highlighted text <Mark> </mark>


elemen <footer> digunakan sebagai informasi hak
cipta.<Footer></footer>

Struktur Dasar Tabel

<h1>Pemenang Piala Dunia Tiga Tahun Terakhir</h1>


<table>
<tr>
<th>Tahun</th>
<th>Juara 1</th>
<th>Juara 2</th>
<th>Juara 3</th>
</tr>
CSS

Anda mungkin juga menyukai