Pengenalan HTML dan CSS MODUL 3

MATA SOLDER 2021 Page 1

 Pengenalan HTML dan CSS MODUL 3

I. Tujuan
1. Mahasiswa baru dapat mengetahui aplikasi pemrograman sublime text 3
2. Mahasiswa baru dapat mengetahui berbagai perintah dasar pemrograman berbasis HTML
dan CSS
3. Mahasiswa baru dapat membuat landing page menggunakan HTML dan CSS

II. Pendahuluan
Bahasa pemrograman adalah bahasa tertentu yang digunakan oleh para programmer untuk
membuat suatu aplikasi atau software pada komputer, dasar-dasar yang dipakai adalah prinsip
kerja algoritma yang sudah dipelajari sebelumnya, bahasa pemrogaman itu sendiri sudah
ditemukan pada tahun setelah diketemukannya mesin komputer, mulai generasi yang paling
pertama kali yaitu kode mesin, sampai sampai generasi sekarang yang banyak digunakan sebagai
bahasa pemrograman dalam pembuatan berbagai aplikasi, dalam konteksnya adalah setiap bahasa
pemrograman mempunyai yang namanya kode, kode tersebut akan mendasari berbagai
pemrosesan tiap step/langkah beradasarkan tipe data yang diinputkan oleh programmer, contohnya
dalam bahasa pemrograman pascal adalah penggunaan tipe data integer untuk bilangan angka yang
nantinya akan diproses dan penggunaan tipe data string untuk data-data yang terdiri dari susunan
huruf dan nantinya tidak akan diproses dalam perhitungan algoritma dan akan dimunculkan
(dicetak/write) pada akhir sequence.

Pada dasarnya bahasa pemrograman adalah hal yang sangat lumrah dikalangan para
programmer dan para pengambil keputusan/ decision maker, sebagai seorang engineer kita dituntut
untuk menyelesaikan masalah secara runtut dan sistematis, dengan menggunakan pola pikir yang
dimiliki tersebut, kita akan dengan optimal mempertimbangkan segala sesuatu yang
mempengaruhi/factor dari nilai baik tidaknya atau positif negatifnya suatu keputusan yang kita
ambil, pembahasan dalam makalah ini akan mengerucut pada pengenalan bahasa pemrograman
meliputi berbagai bahasa pemrograman berdasarkan generasi, jenis, penggunaan, dan kelebihan
ataupun kekurangan dari tiap jenis bahasa pemrograman yang kami definisikan.

III. Dasar teori

HTML merupakan sebuah dasar ataupun pondasi bahasa pemograman sebuah web page,
HTML muncul sebagai standar baru dari kemajuan dan berkembangnnya internet, pada pertama kali
muncul internet masih dalam keadaan berbasis text dimana tampilan sebuah halaman web hanya
berisikan sebuah text yang monotone tanpa sebuah format dokumen secara visual, bayangkan saja
sebuah dokument text yang dikemas dalam bungkus format seperti tipe file .txt atau sering disebut
notepad, tanpa paragraph, satu warna, satu ukuran huruf tanpa gambar serta tidak adanya visual
format dokumen seperti halnya Ms. Word, hal ini akan sangat membosankan dalam membaca. dan
selain itu pertamakali muncul internet user mengakses masih menggunakan sebuah terminal, hal itu
jelas sangatlah tidak friendly. Pemograman HTML muncul seiring perkembangan teknologi dan
informasi.

A. Sejarah HTML dan CSS

Ada awal 1990-an saat bekerja di CERN seorang ilmuwan bernama Tim Berners-Lee
mengembangkan bahasa HTML. Tujuan dasar untuk mengembangkan bahasa ini adalah untuk
berbagi informasi penting antara para ilmuwan. Tim pertama yang merancang browser web
MATA SOLDER 2021 Page 1
 Pengenalan HTML dan CSS MODUL 3

dengan nama WorldWideWeb ( Nexus ) untuk melihat dokumen ditulis dalam bahasa HTML.
Tapi standar aslinya dikembangkan oleh Organisasi W3C ( World Wide Web Consortium )
yang didirikan pada tahun 1994. Dari tahun 1994 hingga sampai saat ini W3C
memperkenalkan versi yang berbeda dari HTML dimulai dengan HTML2.0 dan kemudian ada
beberapa rilis HTML3.0 , HTML3.2 , HTML4.01 , dan XHTML1.0.
CSS pertama kali developled oleh W3C pada 17 Desember 1996 sekitar 16 tahun yang
lalu. Sampai hari ini, sudah ada beberapa rilis CSS ( CSS1.0 , CSS2.0 , CSS2.1 ) dan masing-
masing berisi sejumlah pembaruan. Saat ini, rilis CSS 3.0 , sementara belum divalidasi. Jadi,
CSS2.1 masih digunakan secara luas.

B. Pengenalan HTML
HTML atau HyperText Markup Language merupakan sebuah bahasa markah untuk
membuat halaman web. Jadi, HTML itu adalah sebuah bahasa yang menggunakan markup atau
penanda untuk membuat halaman web. Penanda atau markup ini, nanti akan kita sebut dengan
Tag. HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web. Jadi,
HTML itu adalah sebuah bahasa yang menggunakan markup atau penanda untuk membuat
halaman web. Penanda atau markup ini, nanti akan kita sebut dengan Tag. HTML berperan
untuk menentukan struktur konten dan tampilan dari sebuah web.

Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain lagi yang menjadi
pelengkapnya, yakni CSS dan Javascript. Adapun Hal-hal yang harus diperhatikan dalam
membuat website menggunakan html

a. Nama file untuk HTML

ada beberapa hal yang perlu diperhatikan dalam membuat nama file HTML
1. Extensi file HTML
Setiap file HTML harus berekstensi .html, .xhtml (untuk XHTML), dan .htm saja.
Jika tidak menggunakan ekstensi ini, maka ia tidak akan bisa dibaca oleh web browser.
Contohnya seperti ini:
Nama filenya adalah hello-world.txt.

MATA SOLDER 2021 Page 2

 Pengenalan HTML dan CSS MODUL 3

Sedah jelas, ini bukan file HTML, melainkan sebuah file teks biasa. Maka.. browser
akan menampilkan isi file tersebut apa adanya.

2. Nama khusus untuk Home Page

Ketika ingin membuat halaman untuk homepage, maka sebaiknya gunakan nama
index.html. Karena ia akan otomatis dibuka saat website dikunjungi. Contohnya, saat
kamu membuka www.petanikode.com.. maka file HTML yang akan dibuka adalah
index.html yang berada di server petanikode.

3. Hindari beberapa hal

Penggunaan Spasi,Nama file HTML biasanya akan tercantum pada URL, maka
sebaiknya hindari menggunakan spasi pada nama file HTML, agar URL yang dibentuk
lebih bagus.
Spasi pada URL, biasanya akan otomatis diubah menjadi %20.

b. Struktur dasar HTML

Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalau menuliskan tag
<html> dan di dalamnya terdapat tag <head> dan <body>.

MATA SOLDER 2021 Page 3

 Pengenalan HTML dan CSS MODUL 3

Kalau kita perhatikan.. struktur dasar kode HTML terdiri dari tiga bagian penting:
1. Bagian Deklarasi
Coba perhatikan kode pada baris pertama: <!DOCTYPE html>. Ini adalah tag
deklarasi untuk menyatakan tipe dokumen dan versinya. Pada contoh di atas, kita
menyatakan dokumen ini bertipe HTML dan versinya adalah HTML 5.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Maka cara mengatasinya menggunakan kode <!DOCTYPE html> Tapi, ini tentunya akan
melanggar aturan standar yang dibuat W3C.

Berikutnya, di bawah tag deklarasi <!DOCTYPE html> terdapat tag pembuka untuk
HTML:

<html lang="en">

Tag <html> wajib ada di setiap dokumen HTML, Pada tag ini, kita memberikan atribut
lang="en" untuk menyatakan kalau konten dokumen HTML ini akan menggunakan
bahasa inggris. Nah di dalam tag <html> ini, terdapat dua tag penting lagi.. yakni: tag
<head> dan tag <body>. Setelah itu barulah terakhir tag HTML ditutup dengan </html>.

2. Bagian head
Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag <head> dan ditutup
dengan </head>.

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

MATA SOLDER 2021 Page 4

 Pengenalan HTML dan CSS MODUL 3

<head>
<title>Belajar HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Pada bagian HEAD, biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh
mesin.
Seperti :
 Tag meta untuk SEO;
 Tag <title> untuk judul;
 Tempat menulis kode CSS dan Javascript;

3. Bagian BODY
Bagian BODY adalah bagian yang akan ditampilkan pada web browser.
Penulisannya di mulai dari tag <body> dan ditutup dengan </body>.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Di sinilah nanti kita akan banyak menuliskan konten dengan berbagai macam tag. Saat
ini kita baru mengisinya dengan tag <p>. Tag <p> adalah tag yang digunakan untuk
membuat paragraf.

c. Mengena tag, elemen dan atribut daam HTML

Tag, elemen, dan atribut merupakan tiga bagian penting yang ada di dalam HTML. Bagi
kamu yang baru belajar HTML, wajib hukumnya untuk mengetahui ketiga Hal ini.

1. TAG
Tag adalah sebuah penanda awalan dan akhiran dari sebuah elemen di HTML. Tag
dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga

MATA SOLDER 2021 Page 5

 Pengenalan HTML dan CSS MODUL 3

ditambahkan dengan atribut.

Contoh: <p>, <a>, <body>, <head>, dan sebagainya.
Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada juga
beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan
menambahkan garis miring (/) di depan nama tag.

Setiap tag memiliki fungsi masing-masing. Ada yang digunakan untuk membuat judul,
membuat link, membuat paragraf, heading, dan lain-lain.

tag Fungsi

<html> untuk memulai dokumen HTML

<head> untuk membuat bagian head

<body> untuk membuat bagian body

<h1> sampai <h6> untuk membuat heading pada artikel

<p> untuk membuat paragraf

<!-- --> untuk membuat komentar

2. Elemen
Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML.
Elemen kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang
menyusun dokumen HTML dalam diagram HTML tree.

MATA SOLDER 2021 Page 6

 Pengenalan HTML dan CSS MODUL 3

Pada diagram tersebut, terdapat tiga macam node.. yakni: Node elemen, Node atribut, dan
Node teks.

Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Kadang juga ditambahkan
beberapa atribut.
Contoh:

Pada contoh di atas, terdapat satu elemen <p> dengan atribut align="center" dan memiliki
isi berupa teks, yakni Hello World!.

Elemen tidak selalu berisi teks, kadan ia juga akan berisi elemen lain. Ini biasanya kita
sebut dengan nested element atau elemen di dalam elemen.
Bila digambarkan dalam bentuk kotak persegi, maka akan terlihat seperti ini:

MATA SOLDER 2021 Page 7

 Pengenalan HTML dan CSS MODUL 3

Elemen HTML ada banyak jenisnya. Ada elemen khusus untuk teks, ada elemen untuk
multimedia, script, tabel, metadata, dll. Beberapa elemen HTML kadang ditambahkan
atribut sebagai pelengkap.

3. Atribut
Tiap-tiap elemen kadang memiliki atribut khurus yang hanya bisa digunakan pada
elemen tersebut. Ada juga atribut yang bersifat global dan bisa ditambahkan ke semua
elemen.Berikut ini jenis-jenis atribut yang harus diketahui:
a. Atribut global
Atribut Global adalah atribut yang bisa ditambahkan pada semua elemen HTML.
Berikut ini daftar atribut global dan fungsinya:
Nama Atribut Deskripsi atau fungsi

Menentukan tombol shortcut untuk mengaktifkan

accesskey
atau fokus pada elemen

class Menentukan class CSS yang akan digunakan

contenteditable Menentukan isi elemen bisa diedit atau tidak

data-* Digunakan untuk menyimpan data

Menentukan arah teks dari elemen (kiri ke kanan

dir
atau sebaliknya)

Menentukan apakah elemen bisa di drag atau

draggable
tidak

hidden untuk menyembunyikan elemen

id Menentukan id unik untuk elemen

MATA SOLDER 2021 Page 8

 Pengenalan HTML dan CSS MODUL 3

Nama Atribut Deskripsi atau fungsi

Menentukan bahasa yang digunakan untuk isi

lang
elemen

Menentukan apakah isi elemen harus dilakukan

spellcheck
pengejaan grammer atau tudak

style Menentukan inline CSS untuk elemen

Menentukan urutan atau indeks tab dari elemen

tabindex
(saat tombol tab ditekan)

title Menentukan informasi tambahan tentang elemen

Menentukan apakah konten dari elemen bisa

translate
diterjemahkan atau tidak

b. Atribut event
Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan
dilakukan saat terjadi sesuatu pada elemen. Atribut ini nanti akan banyak digunakan pada
pemrograman Javascript.

c. Atribut khusus
Atribut khusus adalah atribut yang hanya bisa dipakai pada elemen tertentu dan kadang
atribut ini tidak bisa digunakan pada elemen yang lain.
Nama atribut Bisa dipakai di tag

src <audio>, <embed>, <iframe>, <img>, dll

href <a>, <link>

action <form>

autoplay <audio>, <video>

MATA SOLDER 2021 Page 9

 Pengenalan HTML dan CSS MODUL 3

C. Pengenalan CSS
CSS adalah bahasa kedua setelah HTML yang harus dipelajari seorang web developer.
Pengetahuan tentang CSS sangatlah penting bagi seorang web developer, karena dengan CSS
kita bisa:
 Halaman landing page yang menarik
 Template atau tema blog
 Mengubah PSD (desain web) menjadi HTML
 Dan sebagainya

Contohnya bagaimna tampilan facebook tanpa css mungkin tampilannya bakal seperti ini

a. Pengertian CSS
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur
tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk
memisahkan konten dari tampilan visualnya di situs.

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996
untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi
untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.

Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan
banyak masalah bagi developer. Karena website memiliki berbagai font, warna
background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses
yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan
masalah ini.

HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup
(fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan
tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

MATA SOLDER 2021 Page 10

 Pengenalan HTML dan CSS MODUL 3

b. Struktur kode atau syntax dasar CSS

Struktur kode css terdiri dari 3 bagian selektor, blok deklarasi, dan properti dan nilainya

1. Selektor
Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita
atur.Contohnya:

h1 {
color: red;
}

Artinya: Kita memilih semua elemen <h1>, lalu diberikan warna teks red (merah).
Selektor dapat berupa nama tag, class, id, dan atribut.
Contoh:

/* Selektor dengan nama tag */

h2 {
color: blue
}

/* Selektor degnan class */

.bg-yellow {
backgound-color: yellow;
}

/* selektor dengan ID elemen */

MATA SOLDER 2021 Page 11

 Pengenalan HTML dan CSS MODUL 3

#header {
background: grey;
}

/* Selektor dengan Atribut */

input[type=text]{
background: yellow;
}

2. Blok deklarasi
Blok deklarasi adalah tempat kita menuliskan atribut-atribut CSS yang akan diberikan
ke pada selektor.
Contoh :

p {
font-size: 18px;
}

Artinya, kita akan mengatur ukuran font dari tag <p> sebesar 18px. Blok deklarasi
dmulai dengan tanda kurung kurawa { lalu ditutup dengan }.

3. Properti dan nilainya

Properti merupakan atribut tu sekumpulan aturan yang akan diberikan kepada elemen
terpilih
ss
properti: "nilai";

setiap properti harus diakhiri dengan titik koma (;) apabila hanya terdapat satu properti,
boleh tidak menggunakan titik koma (;). Properti harus dituli didalam blok deklarasi.
Contoh :

blockquote {
background: pink;
}

Jangan tulis seperti ini :

background: pink;
p {

MATA SOLDER 2021 Page 12

 Pengenalan HTML dan CSS MODUL 3

IV. Alat percobaan

1. Laptop
2. Sublime text 3 / visual studio code
3. File gambar

V. Langkah kerja
a. Buka aplikasi

b. Setelah masuk ke aplikasi kemudian klik File >> New File >> Save (ingat file nya
harus bertype index.html)

c. Setela itu kemudian klik file lagi >> New file >> save (ingat file nya harus bertype
style.css )

MATA SOLDER 2021 Page 13

 Pengenalan HTML dan CSS MODUL 3

d. Kemudian bikin source code pada index.html

 Source code pada bagian <Head>

 Sorce code pada bagian <Body>

MATA SOLDER 2021 Page 14

 Pengenalan HTML dan CSS MODUL 3

e. Maka hasilnya akan seperti ini

MATA SOLDER 2021 Page 15

 Pengenalan HTML dan CSS MODUL 3

f. Untuk mempercantik websitenya maka kita tambahkan source code pada style.css

MATA SOLDER 2021 Page 16

 Pengenalan HTML dan CSS MODUL 3

g. Setelah file css di buat maka hasilnya akan seperti berikut

MATA SOLDER 2021 Page 17