TM03 - Pengenalan HTML Dasar

Desain Web
Oleh: Arif Basofi

Politeknik Elektronika Negeri Surabaya
Konten Bahasan
- Mengenal arsitektur WWW
- Mengenal struktur & tag dasar dokumen HTML
- Memahami format dan entitas karakter HTML
World Wide Web (WWW)
• Internet: jaringan global yang menghubungkan suatu network dengan network lainnya
diseluruh dunia melalui suatu protokol yang disebut TCP/IP.
• World Wide Web (WWW): kumpulan situs web yang berisi berbagai konten yang
terhubung ke perangkat lokal (komputer, laptop, ponsel dan mobile device lain) melalui
jaringan internet.
• WWW bekerja berdasarkan pada 3 (tiga) mekanisme dasar, yaitu:
1. Protocol: standar aturan yang digunakan dalam berkomunikasi antar jaringan
komputer.
HyperText Transfer Protocol (HTTP) adalah protocol yang digunakan untuk
WWW.
2. Address: alamat web yang diatur melalui URL (Uniform Resource Locator), yang
digunakan sebagai standar alamat dalam internet.
3. HTML: dokumen web yang diakses melalui internet.
• HTML: adalah bahasa standar yang digunakan untuk menampilkan dokumen
di web
• Dengan HTML, anda dapat:
• Mengontrol tampilan dari web page beserta contentnya.
• Mempublikasikan document secara online pada server, sehingga bisa di
akses oleh client.
• Membuat online form yang bisa digunakan
untuk menangani berbagai proses aplikasi
seperti pendaftaran ataupun transaksi secara
online.
• Menambahkan object-object (rich-content)
lain seperti image, audio, video dan juga java
applet dalam document HTML.
• Untuk dapat mengakses (menjelajahi) alamat-alamat web site di internet,
dibutuhkan suatu aplikasi yaitu web browser (browser).
• Browser: software yang di-install pada komputer (client) yang berfungsi
sebagai media untuk menampilkan dokumen web yang tersimpan pada
komputer server.
• Dengan browser, perintah-perintah (tag-tag) dalam dokumen web akan
diterjemahkan dan ditampilkan menjadi sebuah informasi yang dapat dibaca
oleh user.
Contoh: Google Chrome, Microsoft Edge, Firefox, Internet Explorer (IE),
Netscape Navigator, Modzilla, dll.
• Web Developer: software yang digunakan dalam membangun dokumen web.
Contoh: Visual Studo Code, Sublime Text, Atom, Bracket, Macromedia
Dreamweaver, Microsoft FrontPage, notepad, dll.
• Bagaimana WWW Bekerja:
1. User (WebClient) melakukan permintaan
(request) informasi ke web server dengan
cara menuliskan URL atau alamat didalam
Web Browser. Contoh URL:
http://www.example.com/examples/exam
ple.html
2. Melalui jaringan internet, permintaan tsb
akan diarahkan ke web server yang sesuai
dengan URL atau alamat yang dituju.
3. Web sever akan mencari direktory dan file
yang sesuai di dalam harddisk
4. Melalui jaringan internet, web server akan
mengirimkan file tersebut ke web client.
5. Dalam Web Client ,File tersebut (yang
berupa kode html) akan diterjemahkan
oleh aplikasi web browser menjadi suatu
dokumen yang dapat disajikan ke hadapan
user.
Dokumen HTML
• HTML : HyperText Markup Language
• Dokumen HTML (disebut dokumen web) adalah file teks murni yang dapat dibuat dengan berbagai
editor teks.
• Ada dua cara pembuatan sebuah web page: dengan editor HTML atau dengan editor teks biasa
(Notepad)
• Penamaan file dokumen HTML: dengan memberikan ekstensi “.htm” atau “.html”.
• Dokumen HTML terdiri atas berbagai tag, sebagai penanda berbagai elemen dalam dokumen
HTML.
• Tag HTML terdiri atas:
▪ Sebuah kurung sudut kiri (<, tanda lebih kecil)
▪ Sebuah nama tag, dan
▪ Sebuah kurung sudut kanan (>, tanda lebih kecil)
Syntax: < nama_tag >
• Contoh Tag : <html>, <head>,<body>, .. dst.
Dokumen HTML
• Tag, umumnya berpasangan, yang terdiri atas tag awal dan tag akhir. Tag akhir sebagai
pasangannya biasanya diawali dengan tanda (/,garis miring)
• Contoh: <H1> … </H1>, <title> … </title>
• Ada beberapa elemen tag yang tidak diharuskan untuk berpasangan, diantaranya:
 Paragraf dengan tag <p>
 Ganti baris (break line, <br>)
 Garis datar (horizontal rule, <hr>)
 List item dengan tag <li>
Penggunaan Visual Studio Code
1. Download Visual Code Studio di website: https://code.visualstudio.com/
2. Lakukan installasi
3. Siapkan folder kerja terlebih dahulu
Untuk menyimpan project kita
Misal. di direktori C
C:\MyWorkspace\PrakWebDesign\Pertemuan_02
4. Open Folder
1) Cari pada menu kiri
2) Pilih Open Folder
5. Arahkan pada folder yang sudah
disiapkan tadi, lalu tekan Select
Folder
5. Install extension penting
1) Cari pada menu kiri paling bawah
2) Pastikan terkoneksi internet dan cari ext:
• Live Server: untuk melihat hasil editing code
secara live tanpa perlu refresh
• Auto rename tag: membantu mengganti suatu
tag pada tag pembukanya
• Beautify: membantu formatting coding,dengan 2
cara:
1) Men-select code yang akan di format – klik kanan
– format selection
2) Memformat Ketika di save, dengan setting terlebih
dahulu: File –Prefeence – Setting – pada bagian
user setting (window kanan) – pilih Text Editor –
Formatting – cari Format on Save (di centang)
Basic Tag HTML
• Beberapa bentuk Tag dasar HTML:
• Untuk mencoba pertama kali dokumen web, buka Notepad, lalu ketik scritp HTML berikut:
• Simpan file dengan nama dan ekstensi:
WebPertamaku.html
Basic Tag HTML : Paragraf <P> & Line Break <BR>
Paragraf:
• Satu pikiran utama dalam dokumen HTML, disimpan dalam satu paragraf.
• Tag paragraf dapat didefinisikan dengan memberi awalan tag <p>, diakhir paragraf tidak diharuskan
menggunakan akhiran tag </p>.
• Syntax: <p> … </p> atau <p>…
Line Break:
• Line Break digunakan sebagi ganti baris pada dokumen web dengan menggunakan tag <br>
• Ganti baris <br> berarti menyajikan informasi pada baris tersendiri tanpa berganti paragraf.
• Syntax: …….… <br> atau <br>………
……………… ………….
Contoh:
Contoh: Tampilan
Basic Tag HTML : Heading <H1_H6>
• Teks dalam dokumen web umumnya memiliki judul topik, yang disebut
heading.
• Heading text ditampilkan dengan huruf besar atau tebal (bold).
• Format heading text digunakan sebagai kebutuhan dan pentingnya text atau
informasi yang ditampilkan dengan prioritas tertentu.
• Terdapat 6 tingkatan tag heading, dengan tag heading 1 merupakan heading
yang terbesar dan dianggap paling penting (informasi).
Basic Tag HTML : Heading <H1_H6>
Syntax heading:
<hn> t e x t </hn>, dengan n : nomor heading 1…6
Contoh heading:
Basic Tag HTML : Heading <H1…H6>
Format Letak Heading:
Format penempatan heading diatur dalam align:
 Kiri (left) : <h1 align=“left”> Heading 1 Left </h1>
 Tengah (center) : <h1 align=“center”> Heading 1 Center </h1>
 Kanan (right) : <h1 align=“right”> Heading 1 Right </h1>
• Contoh letak heading:
Basic Tag HTML : Horizontal Rule <HR>
• Horizontal Rule (garis mendatar) dapat disisipkan pada dokumen web sebagai pemisah
antar suatu bagian/paragraf.
• Syntax Horizontal Rule: <hr> ….
• Contoh:
Basic Tag HTML : Komentar
• Komentar dalam script dokumen web, digunakan sebagai catatan atau komentar tentang
dokumen itu sendiri dan tidak ditampilkan.
• Syntax komentar: 
• Contoh:
<html>
<head>
<title>Horizontal Rule</title>
<head>
<body>

<p>Ini normal paragraf
<body>
</html>
Format HTML : Format Teks
Pemformatan Teks:
• Pemformatan teks dalam dokumen HTML (web) dapat berupa:
 Huruf tebal (bold) : <b> … </b>
 Huruf miring (italic) : <i> … </i>
 Garis bawah : <u> … </u>
 Pemberian tekanan pada teks (emphasize) : <em>…</em>
 Mengecilkan huruf (small) : <small> … </small>
 Superscript : <sup> … </sup>
 Subscript : <sub> … </sub>
 Dll
 …
Format HTML : Format Teks
Contoh:
Format HTML : Teks Preformat
Teks Preformat:
• Teks preformat adalah susunan teks yang ditampilkan sesuai dengan dokumen web
tersebut dalam editor.
• Teks preformat digunakan : menampilkan source code program
• Syntax tag preformat : <pre> … </pre>
• Dengan tag preformat, akan menjaga spasi, baris baru, dan tab sesuai dengan aslinya
saat ditampilkan.
Contoh Teks Preformat:
<html>
<head>
<title>Teks Preformat</title>
<head>
<body>
<h2> Trigger secure_emp </h2>
<hr>
<pre>
CREATE OR REPLACE TRIGGER secure_emp
BEFORE INSERT ON employees
BEGIN
IF (TO_CHAR(SYSDATE,'DY') IN ('SAT','SUN')) OR
(TO_CHAR(SYSDATE,'HH24:MI') NOT BETWEEN '08:00' AND '18:00')
THEN RAISE_APPLICATION_ERROR (-20500,'Penyisipan data pada table
EMPLOYEES hanya diperbolehkan selama jam kerja');
END IF;
END;
/
</pre>
<body>
</html>
Contoh Teks Preformat:
Tampilan Teks Preformat:
Format HTML : Address
• Tag Address digunakan dalam menampilkan alamat.
• Syntax Address: <address> … </address>
• Contoh :
Entity Karakter HTML
• Beberapa karakter memiliki arti khusus dalam tag HTML, seperti tanda tag
awal (<) dan tag akhir (>).
• Jika browser ingin menampilkan karakter dari tag-tag dokumen web
tersebut, maka harus menyisipkan entitas karakter kedalam source HTML.
• Entitas karakter memiliki 3 bagian:
1. Sebuah ampersand (&)
2. Sebuah nama entitas atau sebuah # dan nomor entitas
3. Sebuah tanda titik koma (; atau semicolon)
• Entitas karakter HTML memilikisifat case-sensitive
Contoh:
Beberapa entitas karakter yang sering digunakan:
Hasil Keterangan Nama Entitas Nomor Entitas
© Copyright © ©
 registered trademark ® ®
 trademark ™
non_breaking space ¡
& ampersand & &
<< angle quote mark (left) « «
>> angle quote mark (right) » »
" tanda kutip " "

< lebih kecil < <
> lebih besar > =
x tanda kali × ×
 tanda bagi ÷ ÷

Links
• Untuk menghubungkan antar dokumen web digunakan link.
• Link (hypertext link atau hyperlink) pada dokumen web dapat berupa teks
atau gambar, browser akan menyorot (highlight) teks atau gambar yang
diidentifikasi sebagai link dengan warna atau garis bawah.
• Tag link yang digunakan adalah tag anchor : <a> dan atribut href sebagai
definisi lokasi link.
• Syntax tah link: <a href=“”> …text link… </a>
• Ada 3 (tiga) jenis link:
1. Link relatif
2. Link absolut
3. Link dalam dokumen yang sama
Links
Link Relatif
• Link relatif dibuat dengan penempatan dokumen web pada direktori yang
sama.
• Contoh: <a href=“page-2.html”>Halaman kedua</a>
Link Absolut
• Link absolut dibuat dengan mengarahkan link pada dokumen web site lain di
internet, dalam hal ini menuliskan suatu alamat internet secara lengkap.
• Contoh:
<a href=http://www.google.com>Search engine Google</a>
Links
Link ke Bagian Lain dalam Dokumen
• Link jenis ini dibuat jika dokuemn web terlalu panjang,sehingga user harus
merlakukan scroll layar berulang-ulang.
• Navigasi penelusuran dokumen dapat dibuat mudah per-antar bagian dengan
memberikan penanda pada setiap bagian.
• Biasanya digunakan untuk index, daftar isi, link ke gambar, link ke bagian top (atas),
dll.
• Cara pemberian tanda / nama pada bagian dokumen:
1. Letakkan cursor pada baris atau teks yang menjadi awal dari bagian tersebut
2. Sisipkan nama bagian tersebut dengan tag:
<a name=“nama_bagian”>
• Untuk membuat link pada bagian lain pada dokumen web yang sama, tambahkan
tanda # :
<a href=#nama_bagian>Bagian tentang link</a>
Links <HTML>
<title>Coba Link</title>
<head>
<body>
<a name="top">
<a href="#B3"> Lihat Bab 3 </a>
</a>
<p>
<h2> Bab 1 </h2>
Making a link requires have two HTML pages. So make two and name them "page1.html" and "page2.html" (make sure
you save them in the same folder). The link tag, a is often called an anchor tag, we'll talk more about anchors
later.
In "page1.html" put the following someplace between your body and /body tags.
</p>
<p>
<h2> Bab 2 </h2>
Link to page 2.
The page2.html means to make a link to page2.html when you click on the information following it. The /a part of
the link tells the browser to stop the link continue with regular text. The link you just made should look
something like
the following:
</p>
<a name="B3">
<h2> Bab 3 </h2>
<p>
Try it and see if the link goes to the other HTML file.
There are a couple different kinds of links, relative and absolute. Most of the links you make, like the one
we just made, will be relative. Relative pathnames point to files based on their locations relative to the
current file,
while absolute pathnames point to files based on their absolute location on the file system. We could make
our link
absolute by changing it to
</p>
<a href="#top"> Kembali ke atas </a>
<body>
</HTML>
Links
Contoh:
Latihan
Silahkan dicoba semua latihan diatas agar bisa
mempraktekkan dengan mengenal tag-tag HTML tersebut.

TM03 - Pengenalan HTML Dasar

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

TM03 - Pengenalan HTML Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

Desain Web

Oleh: Arif Basofi

© Copyright © ©

 registered trademark ® ®

& ampersand & &

<< angle quote mark (left) « «

>> angle quote mark (right) » »

" tanda kutip " "

 tanda bagi ÷ ÷

<a href="#B3"> Lihat Bab 3 </a>

<h2> Bab 1 </h2>

<h2> Bab 2 </h2>

<h2> Bab 3 </h2>

<a href="#top"> Kembali ke atas </a>

Anda mungkin juga menyukai

TM03 - Pengenalan HTML Dasar

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

TM03 - Pengenalan HTML Dasar

Diunggah oleh

Hak Cipta:

Format Tersedia

Desain Web

Oleh: Arif Basofi

© Copyright &copy; &#169;

 registered trademark &reg; &#174;

& ampersand &amp; &#38;

<< angle quote mark (left) &laquo; &#171;

>> angle quote mark (right) &raquo; &#187;

" tanda kutip &quot; &#34;

 tanda bagi &divide; &#247;

<a href="#B3"> Lihat Bab 3 </a>

<h2> Bab 1 </h2>

<h2> Bab 2 </h2>

<h2> Bab 3 </h2>

<a href="#top"> Kembali ke atas </a>

Anda mungkin juga menyukai

© Copyright © ©

 registered trademark ® ®

& ampersand & &

<< angle quote mark (left) « «

>> angle quote mark (right) » »

" tanda kutip " "

 tanda bagi ÷ ÷