Makalah Aplikasi Teknologi Informasi

Diajukan Untuk Memenuhi Tugas Mata Kuliah Aplikasi Teknologi Informasi

Fakultas DKV Universitas Putra Indonesia “YPTK” Padang

OLEH

ALIZA MUTIA PUTRI K

20101159110133

FAKULTAS DESAIN KOMUNIKASI VISUAL

UNIVERSITAS PUTRA INDONESIA “YPTK”

PADANG

2021
 KATA PENGANTAR

Puji syukur saya ucapkan atas kehadirat Allah SWT yang sudah

melimpahkan rahmat, taufik, dan hidayah- Nya sehingga saya bisa menyusun Tugas

Aplikasi Teknologi Informasi ini dengan baik serta tepat waktu. Seperti yang sudah

kita tahu “Aplikasi Teknologi Informasi” juga termasuk mata kuliah yang penting

di jurusan Desain Komunikasi Visual. Untuk itu semuanya perlu dibahas pada

makalah ini meengenai CSS dan HTML.

Tugas ini saya buat untuk memberikan ringkasan tentang CSS dan HTML

untuk memudahkan dalam mempelajarinya. Semoga makalah yang saya buat ini

bisa mempermudah dalam proses belajar dan dapat membuat pengetahuan kita jadi

lebih luas lagi. Saya menyadari kalau masih banyak kekurangan dalam menyusun

makalah ini .

Oleh sebab itu, kritik serta anjuran yang sifatnya membangun sangat saya

harapkan guna kesempurnaan makalah ini. Saya mengucapkan terima kasih kepada

Dosen pengampu mata kuliah Aplikasi Teknologi Informasi. Kepada pihak yang

sudah menolong turut dan dalam penyelesaian makalah ini. Atas perhatian serta

waktunya, saya sampaikan banyak terima kasih.

Batam , 17-03-2021
i
 DAFTAR ISI

BAB 1 PENDAHULUAN ................................................................................................ 1

A. Latar Belakang Masalah ............................................................................................ 1

1.1 LATAR BELAKANG ............................................................................................. 1

1.2 TUJUAN PENULISAN ........................................................................................... 1

1.3RUMUSAN MASALAH .......................................................................................... 1

BAB II PEMBAHASAN
A. Pengertian HTML dan CSS........................................................................................... 2

Pengertian HTML......................................................................................................... 2

Pengertian CSS............................................................................................................. 3

B. Sejarah HTML dan CSS ................................................................................................ 3

Sejarah HTML ............................................................................................................. 3

Sejarah CSS.................................................................................................................. 4

C. Kegunaan HTML dan CSS ............................................................................................ 4

Kegunaan HTML ......................................................................................................... 4

Kegunaan CSS ............................................................................................................. 5

D. Penulisan CSS dalam HTML ....................................................................................... 5

BAB III PENUTUP .......................................................................................................... 9

ii
 BAB 1
PENDAHULUAN

A. Latar Belakang Masalah

1.1 LATAR BELAKANG

Seiring perkembangan dunia teknologi yang semakin pesat, tuntutan manusia untuk
mempelajari informatika pun juga semakin meninggi. Salah satu yang patut dilirik
adalah pemograman web. Para programmer yang berkecimpung di dunia
pemograman web semakin maju dan berkembang dari waktu ke waktu. Beberapa
hal dari sekian banyak materi yang perlu dipelajari adalah HTML,CSS. Mahasiswa
yang menekuni bidang informatika pun juga semakin dituntut untuk belajar lebih
dan lebih lagi.

1.2 TUJUAN PENULISAN

1. Untuk mengetahui pengertian HTML, CSS

2. Untuk mengetahui sejarah HTML, CSS

3. Mengetahui kegunaan dari HTML

4. Mengetahui bagaimana penulisan CSS dan HTML

1.3RUMUSAN MASALAH
1. Apa pengertian HTML, CSS?

2. Bagaimana sejarah HTML, CSS?

3. Apa kegunaan HTML dan CSS?

4. Bagaimana penulisan CSS dalam HTML?

 BAB II
PEMBAHASAN
A. Pengertian HTML dan CSS

Pengertian HTML
HyperText Markup Language (HTML) merupakan suatu bahasa markah yang
digunakan untuk membuat halaman web, menampilkan berbagai informasi di dalam
sebuah browser web. HTML dibuat dengan menggunakan aplikasi pengolah kata
dan disimpan dalam format ASCII sehingga menjadi halaman web dengan
perintah-perintah HTML. HTML merupakan sebuah standar yang digunakan secara
luas untuk menampilkan halaman web. Pada saat HTML merupakan
standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World
Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM yang
diketuai oleh Berners-lee robert ketika bekerja di CERN pada tahun 1989.

Sejarah pembuatan HTML diawali pada tahun 1980, dimana IBM memikirkan
pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen
dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa
yang menggabungkan teks dengan perintah-perintah pemformatan dokumen.
Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-
tanda sebagai basisnya. Kemudian IBM menamakan sistemnya ini sebagai
Generalized Markup Language atau GML.

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen
yang sangat baik, dan kemudian mengeluarkan suatu publikasi yang menyatakan
markup language sebagai standar untuk pembuatan dokumen. ISO dalam
publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan
informasi teks dan sistem-sistem perkantoran. Selain itu SGML terutama subset
dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi
mereka yang menggunakan World Wide Web. Versi terakhir dari HTML adalah
HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan
pengembangan dari HTML. Berikut adalah contoh dokumen sederhana HTML:
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.

B. Sejarah HTML dan CSS

Sejarah HTML
Pada tahun 1980 seorang ahli fisika, Tim Berners-Lee, dan juga seorang kontraktor
di CERN (Organisasi Eropa untuk Riset Nuklir) mengusulkan dan menyusun
ENQUIRE, sebuah sistem untuk ilmuwan CERN dalam membagi dokumen.
Sembilan tahun kemudian, Berners-Lee mengusulkan adanya sistem markah
berbasis internet. Berners-Lee menspesifikasikan HTML dan menulis jaringan
beserta perangkat lunaknya di akhir 1990. Pada tahun yang sama, BernersLee dan
Robert Cailliau, insinyur sistem data CERN berkolaborasi dalam sebuah
permintaan untuk pendanaan, namun tidak diterima secara resmi oleh CERN. Di
catatan pribadinya sejak 1990 dia mendaftar "beberapa dari banyak daerah yang
menggunakan hypertext" dan pertama-tama menempatkan sebuah ensiklopedia.
Penjelasan pertama yang dibagi untuk umum dari HTML adalah sebuah dokumen
yang disebut "Tanda HTML", pertama kali disebutkan di Internet oleh Tim
Berners-Lee pada akhir 1991. Tanda ini menggambarkan 18 elemen awal mula,
versi sederhana dari HTML. Kecuali untuk tag hyperlink, yang sangat dipengaruhi
oleh SGMLguid, in-house Standard Generalized Markup Language (SGML)
berbasis format dokumen di CERN. Sebelas elemen ini masih ada di HTML.

Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat
diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak
(parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet
yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun
1996. Setelah CSS distandardisasikan, Internet Explorer dan Netscape melepas
browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati
dengan standar CSS.

C. Kegunaan HTML dan CSS

Kegunaan HTML
Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini
sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal
dengan TAG tertentu. HTML lebih menekankan pada penggambaran
komponenkomponen struktur dan format di dalam halaman web daripada
menentukan penampilannya. Sedangkan penjelajah web digunakan untuk
menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan
menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke
komputer yang menampilkan halaman web. Salah satu hal Penting tentang
eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar
komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat
tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis
Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan
yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan
Produkproduk Sun Microsystems. namun demikian pengguna-pengguna tersebut
dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan
Pranala.
 Kegunaan CSS
CSS mendeskripsikan presentasi atau tampilan sebuah halaman web. Sehingga,
kode CSS digunakan untuk mempercantik dan memperbaiki tampilan antar muka
sebuah website. Seperti, mewarnai tulisan, memberi background (latar) baik dengan
warna ataupun gambar, menentukan font, memberi animasi, mengatur tampilan
sesuai ukuran layar web browser yang digunakan, dan hal-hal lainnya yang
berkaitan dengan desain sebuah website.

D. Penulisan CSS dalam HTML

Penulisan kode CSS dalam HTML dibagi menjadi tiga cara, internal, inline, dan
eksternal. Pembagian ini berdasarkan letak kode CSS tersebut ditulis.

1. Internal CSS
Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal CSS
juga dikenal dengan sebutan Embeded CSS.

Tag <style> biasanya ditulis di dalam tag <head>. Bisa juga ditulis di
dalam <body>, namun lebih banyak ditulis di dalam <head>.

Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal CSS</title>
<!-- penulisan internal css dalam tag head -->
<style type="text/css">
p{
font-family: serif;
line-height: 1.75em;
font-size: 18px;
}
i {
font-family: sans;
color: orange;
}
</style>
</head>
<body>
<!-- penulisan internal css dalam tag body -->
<style type="text/css">
h2 {
font-family: sans;
color: #333;
}
</style>
<h2>Ini judul artikel</h2>
<p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini
hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal
css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang
ditulis langsung dalam file HTML.</p>
</body>
</html>

2. Eksternal CSS
Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML.
Eksternal CSS ditulis disebuah file khusus yang berekstensi .css.
Sebagai contoh, saya akan membuat sebuah file bernama style-ku.css. Berikut ini
cuplikan isi file style-ku.css

p {
font-family: serif;
line-height: 1.75em;
}

i {
font-family: sans;
color: orange;
}

h2 {
font-family: sans;
color: #333;
}
Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya. Ada
beberapa cara memasukkan kode CSS dari berkas eksternal:
Pertama menggunakan tag <link>

<link rel="stylesheet" type="text/css" href="style-ku.css">

Atau bisa juga bisa menggunakan @import

<style type="text/css">
@import "style-ku.css";
</style>
Penulisan pada HTML versi lengkapnya seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="style-ku.css">
</head>

<body>
<h2>Ini judul artikel</h2>
<p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini
hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal
css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang
ditulis langsung dalam file HTML.</p>
</body>
</html>
Hasilnya pun akan sama seperti contoh internal CSS, karena kode CSS-nya sama.
Hanya saja berbeda tempat penulisannya.

3. Inline CSS
Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML.
Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis.
Contohnya seperti ini:

<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>

Contoh lengkap:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Inline CSS</title>
</head>

<body>

<h2 style="color:red;font-family:sans">Ini judul artikel</h2>

<p style="color:maroon">Ini adalah paragraf yang memuat isi
artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk
mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i>
adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>
 BAB III

PENUTUP

Kesimpulan:

Dunia informatika semakin berkembang dari waktu ke waktu, berbagai hal dalam
dunia pengembangan teknologi ini sendiri juga ikut berkembang, diantaranya
adalah HTML, CSS yang terus mendapatkan pembaharuan sebagai efek dari para
programmer yang juga semakin berkembang.

Perkembangan ini juga semakin mempermudahkan manusia dalam menyelesaikan

pekerjaan yang berkaitan dengan web. Maka dari itu, para programmer semakin
berkembang dan secara otomatis materi-materi pemograman web juga terus
berkembang.

Untuk itu, sangat esensial bagi para pemula untuk terelebih dahulu mempelajari
pengertian, sejarah, serta penulisan mendasar yang sederhana dari HTML, CSS
sebelum mempelajari tahapan lebih lanjut dari materi-materi tersebut. Dan semoga
dengan adanya makalah ini dapat menambah ilmu bagi pembaca terkait materi yang
dibahas. Bila ada kekurangan dan kesalahan dalam makalah ini baik yang disengaja
maupun tidak, penulis memohon maaf sebesar-besarnya.
DAFTAR PUSTAKA

1. Wikipedia (2019, 7 September). HTML. Dikutip 12 September 2019 dari

Wikipedia: https://id.wikipedia.org/wiki/HTML#Sejarah_versi_HTML

2. Andi (2001). Desain Web dengan Microsoft FrontPage 97. Wahana Komputer &

Andi Yogyakarta. ISBN 9795335219.

3. Wikipedia (2019, 24 Agustus). Cascading Style Sheets. Dikutip 13 September

2019 dari Wikipedia: https://id.wikipedia.org/wiki/Cascading_Style_Sheets

4. Dominikus Juju & Matamaya Studio, Seri Penuntun Praktis Join Multiply,

halaman 95. Elex Media Komputindo.

5. Slamet Riyanto, Membuat Web Portal Multi Bahasa Jomla 1.5X + CD, halaman

236. Elex Media Komputindo.