Scribd
Unggah
13 tayangan2 halaman

Bacaan 1-2 Dasar HTML & CSS

Diunggah oleh

Ananda Yakin
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 PDF, TXT atau baca online di Scribd
13 tayangan2 halaman

Bacaan 1-2 Dasar HTML & CSS

Diunggah oleh

Ananda Yakin
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 2

Bacaan 1-2: Dasar HTML & CSS

[OBJEKTIF PEMBELAJARAN]
1. Pemahaman peran server dan client.
2. Pemahaman dasar HTML dan CSS. Kita akan mempelajari dasar Bootstrap.
3. Mempelajari dasar syntax Javascript.

01-2. Dasar HTML dan CSS


• 4) Konsep HTML&CSS
• HTML: Bayangkan sebagai konten & struktur dari website kamu.
👉 HTML (HyperText Markup Language) menlayout (struktur tampilan) dan
text suatu konten di website, dimana CSS (Cascading Style Sheets)
menerapkan suatu style (gaya/design) ke elemen suatu laman website.
Kamu bisa mengatur style website menggunakan style elements di-HTML,
tapi untuk struktur kode yang lebih terbaca dan rapi serta “maintainability”
(kemudahan maintenance/perawatan), elemen style ini biasanya dituliskan
terpisah pada file CSS. Kamu menerapkan CSS ke HTML dengan
melakukan proses “import” file CSS-nya ke kode HTML.

• CSS: Tempat kamu memberikan efek-efek serta “style” untuk design dan tampilan
website kamu.
👉 CSS, seperti banyak tool, bahasa, dan library lain yang akan dibahas di kelas
ini, sangat mudah dipahami konsepnya, tetapi membutuhkan banyak praktik
dan latihan untuk menjadi expert di sini. Pada bootcamp ini, kita akan
mempelajari dasar untuk membuat website yang rapi dan terstruktur, tetapi
selanjutnya akan diserahkan ke kamu untuk berlatih secara pribadi hingga
sampai ke level yang diharapkan oleh perusahaan dan client sebagai web
designer dan web developer professional.

• 5) Dasar HTML
📂 part01 > New > HTML File > index.html > html:5

Perhatikan cuplikan video berikut ini → https://youtu.be/yByFkvJhsIA

• Dokumen HTML dasar terdiri setidaknya atas sebuah <head> dan sebuah
<body>.
• Elemen <head> merupakan kontainer untuk metadata, yaitu informasi umum
mengenai dokumen HTML itu sendiri. Bayangkanlah bagian ini sebagai data
tentang data-data kita!
👉 Bagian <head> biasanya berisi judul dokumen, scripts dan informasi metadata
lainnya. Data ini, meski sangat penting, biasanya tidak bisa dilihat oleh user.

• Elemen <body>berisi seluruh konten dari dokumen HTML dan merupakan


komponen yang akan dilihat serta berinteraksi dengan user.

▪ Elemen berikut bisa dituliskan di bagian <body>:


[Code Snippet] Dasar HTML
Kamu bisa memeriksa laman contoh ini untuk membandingkan hasil
percobaan kita nanti dan memastikan bahwa tampilannya kurang lebih
sama.
<!DOCTYPE html>
<html lang="en">

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

<body>
<!-- tags for layout -->
<div>This can group sections of document.</div>
<p>This is a paragraph.</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<ol>
<li> bullet point!3 </li>
<li> bullet point!4 </li>
</ol>

<!-- tags for contents -->


<h1>This is a heading.</h1>
<h2>This is a subheading.</h2>
<h3>h3~h6 are mini headings.</h3>
<hr>
This is a span tag: used to stylize a specific
<span style="color:red">word</span>
<hr>
This is an a tag: <a href="http://google.com/"> hyperlink </a>
<hr>
This is an image tag: <img
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp
.png" />
<hr>
This is an input tag: <input type="text" />
<hr>
This is a button tag: <button>Press me!</button>
<hr>
This is a textarea tag: <textarea>Who am I?</textarea>
</body>

</html>

o Terdapat beragam “tag” lain, tetapi kebanyakan developer tidak menghafal


seluruh tag ini. Jika kamu kesulitan untuk mengingat tag-tag ini, cukup
dengan mencari di Google maka seluruh informasi yang kamu cari sudah
tersedia! Mari kita coba lakukan hal itu sekarang...

o Perhatikan cuplikan video berikut ini → https://youtu.be/DpQJZeRsf3k

Indentasi sangatlah penting! Jika kode kamu tidak memiliki indentasi dan format
yang tepat, nanti kamu akan kesulitan untuk memeriksa kode kamu. Hal ini
tentunya akan mempersulit pencarian error yang mungkin bersembunyi di kode
kamu. Cobalah menggunakan ctrl+alt+L/SHIFT+OPTION+F untuk secara
otomatis menjalankan fungsi “reformat” atau merapikan ulang.

Perhatikan cuplikan video berikut ini → https://youtu.be/ioexRLWHej8

Anda mungkin juga menyukai