DESAIN WEB

MAKALAH
HTML

Disusun oleh:

Kelompok 1
1. Nelia Safenita 18050022
2. Asmarita 19050024

Dosen Pembimbing :
Satrio Junaidi, S.Pd. M.Kom

PROGRAM STUDI PENDIDIKAN MATEMATIKA

SEKOLAH TINGGI KEGURUAN DAN ILMU PENDIDIKAN
STKIP PGRI SUMATERA BARAT
PADANG
2021

KATA PENGANTAR
 Puji syukur penulis panjatkan kehadirat Allah SWT yang telah memberikan rahmat serta
karunia-Nya kepada kami sehingga kami berhasil menyelesaikan Makalah ini yang alhamdulillah
tepat pada waktunya yang berjudul CSS dan HTML.

Tujuan penulisan makalah ini adalah untuk memenuhi salah satu tugas mata pelajaran
kompetensi kejuruan.

Makalah ini berisikan tentang informasi Pengertian CSS dan HTML.Diharapkan Makalah
inidapat memberikan informasi kepada kitasemua.

Penulis menyadari bahwa Makalah ini masih jauh dari sempurna, oleh karena itu kritik
dan saran dari semua pihak yang bersifat membangun selalu kami harapkan demi kesempurnaan
Makalah ini.

Akhir kata, kami sampaikan terima kasih kepada semua pihak yang telah berperan serta
dalam penyusunan Makalah ini dari awal sampai akhir. Semoga Allah SWT senantiasa meridhai
segala usaha kita. Amiin.

Padang ,29 September 2021

Penyusun

DAFTAR ISI
BAB I PENDAHULUAN........................................................................................

A. Latar Belakang..........................................................................................

B. Rumusan Masalah............................................................................................

C. Tujuan Makalah...........................................................................................

D. Kegunaan Makalah...........................................................................................

E. Prosedur Makalah...........................................................................................

BAB II PEMBAHASAN...........................................................................................

A. Perkembangan HTML..............................................................................................

B. Elemen dasar HTML..............................................................................................

C. Bahasa dan pendeklarasian yang digunakan di

HTML..............................................................................................

D. Kegunaan HTML..............................................................................................

E. Contoh Program...........................................................................................

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

A. Kesimpulan......................................................................................

B. Saran................................................................................................

C. Referensi..........................................................................................

BAB I
 PENDAHULUAN

A. Latar Belakang

Web merupakan media untuk menanpilkan halaman. Web terbagi menjadi dua yaitu web statis dan
web dinamis. Web statis adalah media untuk menampilkan halaman statis atau tetap, tetapi yang
mengatur nya adalah web browser. Contoh teknologi yang berkaitan dengan web statis adalah Client Side
seperti HTML, Java script.

Dibuat nya makalah ini adalah untuk mempermudah dalam pembelajaran, maksudnya walaupun kita
tidak begitu mrngerti terhadap pembahasan tetapi kita sudah mengenal dan mngetahui nya. Hal ini telah
memudahkan bagi pelajar yang mempelajari tentang bab ini karena sudah dikelompokkan sesuai dengan
bahasannya. Tetapi disamping itu kita haru rajin berlatih terus mencoba membuat web, baik yang statis
ataupun dinamis. Berdasarkan kenyataan diatas penyusun tertarik untuk membuat makalah yang berjudul
HTML dan Java Script.

BAB II
 PEMBAHASAN

A. Pengertian HTML

HTML (Hypertext Mark up Language) merupakan suatu metode untuk mengimplementasikan

konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa
pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan
bukan sebagai program. HTML atau HyperText Markup Language merupakan protokol yang digunakan
untuk mentransfer data atau dokumen dari web server ke dalam browser (Internet Explorer atau Netscape
Navigator).

Pengertian HTML bila di jabarkan berdasarkan kata-kata penyusunannya HTML dapat diartikan
lebih dalam lagi menjadi :

Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen
dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web
browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

Markup

Pada pengertiannya disini markup menunjukan bahwa pada file HTML berisi suatu intruksi tertentu yang
dapat memberikan suatu format pada dokumen yang akan ditampilkan pada WWW.

Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari
beberapa intruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Pada awalnya HTML dikembangkan sebagi subset SGML (Standard Generalized Mark-up Language).
Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih
sederhana dari pada SGML yang lebih di tekankan pada format dokumen yang berorientasi pada aplikasi.

B. Fungsi HTML
 Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga
suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu :

· Membuat halaman web.

· Menampilkan berbagai informasi di dalam sebuah browser Internet.

· Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

· Membentuk tata letak dokumen, dalam hal ini menentukan jenis huruf, gambar, dan komponen
dokumen lainnya.

· Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa komputer yang termasuk
dalam katagori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file
standar ASCII yang berisi kode-kode untuk mengatur dokumen.

· Menentukan ukuran dan alur tulisan.

· Mengintegerasikan gambar dengan tulisan.

· Membuat Pranala.

· Mengintegerasikan berkas suara dan rekaman gambar hidup.

· Membuat form interaktif.

· Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk
judul, heading dan sebagainya.

· Kita dapat menampilkan tulisan dalam bentuk cetakan tebal

· Kita dapat menampilkan sekelompok kata dalam bentuk miring.

· Kita dapat menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik.

· Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

C. Kegunaan HTML
Dengan menggunakan HTML anda dapat membuat antara lain :

a. Membuat link

Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau
frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita
gunakan :

- Link menuju bagian lain dari page

- Link menuju page lain dalam satu web site

- Link menuju resource atau web site yang berbeda

b. Memodifikasi format teks

Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan
kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format
dokumen ini adalah :

· Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk
judul, heading dan sebagainya.

· Kita dapat menampilkan teks dalam bentuk cetakan tebal

· Kita dapat menampilkan sekelompok kata dalam bentuk miring

· Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik

· Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.

c. Menampilkan daftar sesuatu dalam bentuk point-point (item)

Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga
lebih mudah dibaca dan dipahami Membuat link.

Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau
frase untuk menuju ke bagian manapun dalam World Wide Web.

Ada tiga macam link yang dapat kita gunakan :

1. Link menuju bagian lain dari page

2. Link menuju page lain dalam satu web site

3. Link menuju resource atau web site yang berbeda

d. Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informatif untuk
mendukung data-data lainnya dalam bentuk teks.

e. Menampilkan informasi dalam bentuk tabel

Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca untuk memahami informasi
yang kita tawarkan. Penggunaan tabel ini juga dapat dilakukan untuk menambah nilai estetika dari page
yang akan kita rancang.

D. Bahasa-Bahasa Pemprograman HTML

Bahasa HTML adalah bahasa yang digunakan untuk membangun sebuah website atau blog. Bahasa
HTML yang mempunyai kepanjangan Hyper Text Markup merupakan bahasa yang paling dasar dalam
pemrograman sebuah website atau blog dan juga bahasa yang paling mudah dipelajari atau di aplikasikan
dalam pemubuatan website atau blog. Tidak hanya pembuatan website atau blog saja, bahasa HTML juga
terkadang dapat digunakan untuk pembuatan bagian perangkat lunak (software) tertentu.

Tutorial singkat ini mengenai beberapa bahasa pemrograman web:

1. Hyper Text Markup Language (HTML)

—–> Ekstensi file: .html, .htm, .html4

Bahasa HTML adalah bahasa yang sederhana dan hanya memiliki sedikit kesulitan. Bahasa yang
merupakan dasar dari framework Internet ini ditemukan oleh Tim Berners-Lee pada tahun 1989. Hampir
setiap situs web menggunakan bahasa ini, entah sekedar menampilkan texs, animasi, tampilan grafis
ataupun suara.

Bahasa HTML sebenarnya berasal dari bahasa lama yang disebut dengan SGML (Standard Generalized
Markup Language). Namun perkembangan HTML sudah dimulai sejak kurang lebih 10 tahun bahasa
tersebut diperkenalkan.

Berikut ini struktur dasar bahasa HTML:

<HTML> Tanda bagi browser untuk mengenali bahea itu adalah bahasa html.

<HEAD> Informasi header halaman. Di dalam tag inilah kita bisa meletakkan tag-tag TITLE, BASE,
ISINDEX, LINK, SCRIPT, STYLE & META.

<TITLE> Sebagai judul halaman. Text yang anda letakkan didalam tag ini akan muncul pada title bar
(Bagian paling atas browser).

<BODY> Di dalam bagian inilah semua atribut diletakkan seperti Font, bgcolor, background dll..
Berikut ini contoh halaman web sederhana:

<HTML>

<HEAD>

<TITLE>Hallo dunia</TITLE>

</HEAD>

<BODY bgcolor=”#000000″ background=”images/dark.gif” text=”aqua”>

<p align=”Justify”>Ini contoh halaman web</p>

</BODY>

</HTML>

2. Dynamic HTML (DHTML)

—–> Ekstensi file: .dhtml

DHTML adalah bahasa yang bisa diakses dan dimodifikasi oleh bahasa script seperti Vbscript, Javascript.
DHTML sering dimanfaatkan untuk menampilkan animasi-animasi seperti efek text, perubahan warna,
dan lain sebagainya (bahkan untuk game!!). Bahasa ini sering juga disebut sebagai versi objek dari
HTML.

3. eXtensible Markup Language (XML)

—–> Ekstensi File: .xml

XML adalah bahasa yang sifatnya lebih terbatas daripada elemen-elemen HTML. Dengan XML, orang
bisa menentukan elemen-elemennya sendiri lalu kemudian mengembangkannya.

Menentukan elemennya sendiri? Yeah, semuanya berpusat pada Document Type Definitions atau biasa
disingkat DTD. DTD-lah yang telah menentukan tag awal dan tag akhir dari suatu file XML sehingga
data yang ditampilkan dapat dipahami.

4. XHTML
—–> Ekstensi File: .XHTML

Bahasa ini masih dalam pengembangan. XHTML merupakan gabungan dari bahasa HTML dan XML.
Seperti halnya XML, bahasa ini juga masih tergolong baru namun diramalkan akan sangat berperan
dalam mewarnai dunia web di masa depan. Info selengkapnya mengenai bahasa ini bisa kamu temukan di
www.w3r.org.

5. Personal Home Page (PHP)

—–> Ekstensi File: .php, php3, atau tanpa ekstensi

PHP ditulis oleh Rasmus Lerdorf yang pada awalnya ia gunakan untuk mencatat jumlah pengunjung situs
yang membuka halaman resumenya. Ia kemudian menulis ulang kode-kodenya dengan bahasa C yang
kemudian menjadikan bahasa itu menjadi lebih kaya kemampuan.

Barulah setelah itu banyak bermunculan tokoh-tokoh yang berjasa dalam perkembangan PHP seperti
Zeev Suraski dan Andi Gutmans yang menulis kembali parsing Engine unuk menciptakan PHP versi 3.
PHP kemudian menjadi modul Apache yang paling sering digunakan. Berikut ini contoh script PHP yang
akan menampilkan text Hallo Dunia.

<html>

<head>

<title>PHP menampilkan Halo Dunia</title>

</head>

<?php

echo “<br><br><h1>Hallo dunia<br><br></h1>”;

?>

</html>

6. CGI (Common Gateway Interface)

—–> Ekstensi File: .cgi, .pl

CGI (Common Gateway Interface) merupakan standar Internet tertua dan paling berkembang sebagai
suatu alat lewatnya informasi dari web server ke suatu program dan mengembalikan hasilnya ke browser.

Suatu program CGI dapat ditulis dengan bahasa-bahasa berikut:

- Perl
- Java

- C, C++

- Script-script UNIX

- Visual Basic

- MacOS atau AppleScript

Karena itulah CGI sebenarnya kurang tepat jika dikategorikan sebagai bahasa karena program CGI
sendiri dapat ditulis menggunakan beragam bahasa.

7. PERL (Practical Extraction and Report Language)

—–> Ekstensi File: .pl atau bisa apa saja

PERL merupakan bahasa pemrograman tingkat tinggi yang ditemukan oleh Larry Wall (1987). PERL
memiliki kemampuan untuk dapat diterapkan pada hampir semua jenis Operating System dan yang
terpenting, perl bisa didapatkan secara GRATIS!!

Pada Web, eksekusi perl biasa dijalankan dengan CGI (Common Gateway Interface) sebagai mkanisme
untuk menampilkan output text ke browser. Lebih jauh tentang Perl dan keamanannya dapat anda
temukan di www.w3.org.

8. ColdFusion

—–> Ekstensi File: .cfm

Coldfusion adalah sistem pengembangan aplikasi yang dikembangkan oleh Alaire. Komponen utama
Coldfusion adalah:

1) ColdFusion Application Server

2) ColdFusion Markup Language

3) ColdFusion Studio

File-file CFM disimpan dalam bentuk plain text, sama halnya seperti PERL dan PHP sehingga siapapun
dapat melihat isinya. Informasi lanjut tentang ColdFusion dapat ditemukan di www.alaire.com.

9. ASP (Active Server Page)

—–> Ekstensi file: .asp

ASP diciptakan khusus bagi server IIS milik microsoft. Bahasa ini merupakan bahasa pemrograman web
yang dinamis. ASP dapat digunakan untuk mengeksekusi beragam request terhadap suatu database atau
perintah-perintah pada system lokal.

Berikut contoh sederhana berikut yang akan menampilkan tanggal dan jam pada sebuah halaman web
untuk server-side:

<%@ language=”VBSCRIPT” %>

<html>

<body>

<h1>Tanggal:</h1>

<% =date %>

<h1>Jam</h1>

<% =time %>

</body>

</html>

Sedangkan fungsi yang sama pada Client-Side:

<html>

<body>

<script type=”text/vbscript”>

document.write(“<h1>Tanggal:</h1>”)

document.write(“<br>” & date() & “<br>)

document.write(“<h1>Jam:</h1>”)

document.write(“<br>” & time() & “<br>)

</script>

<body>

</html>

10. JAVA
—–> Ekstensi File: Tidak ada

Baca artikel sebelumnya tentang sejarah Java untuk berkenalan dengan bahasa ini.

11. JHTML

—–> Ekstensi File: .jhtml

Bahasa standard JavaSoft keluaran SUN yang dicptakan untuk mengikutsertakan Java dalam sebuah file
HTML ini memiliki tag tersendiri yang diproses sebelum mengirimkan output pada browser. JHTML
hampir mirip dengan HTML, hanya saja memiliki tambahan tag <Java> . Berikut contoh sangat-sangat
sederhana dari kode JHTML yang akan mengeluarkan tampilan “Hallo Dunia, Saya datang dari cyber”

<Java>

out.print(“Hallo Dunia, Saya datang dari cyber”);

</java>

BAB II
 PENUTUP

KESIMPULAN

Dalam pembuatan website, dikenal dua komponen penting yaitu www dan HTML. Dimana www
merupakan suatu protokol standar dari internet, sedangkan HTML merupakan script atau program standar
yang dijalankan oleh www atau internet. Proyek HTML ini dibuat dengan menggunakan media web
editor notepad.

Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan bagian tubuh (body).
Pembuatan proyek web/HTML sekolah dengan menggunakan notepad ini dimulai dengan pembuatan
bahasa HTML dalam notepad. Yang kemudian untuk setiap baris dalam proyek ini selalu dibuat dengan
bahasa HTML tersendiri sesuai dengan apa yang akan kita buat.

Daftar Pustaka
http://peasc76.blogspot.co.id/2011/12/makalah-html.html

http://cssdanhtm.blogspot.co.id/2013/04/makalah-tentang-css-dan-html.html