Scribd
Unggah
71 tayangan37 halaman

Pertemuan 2 - Pemrograman Web Sikc

Dokumen tersebut membahas tentang pemrograman berbasis web dengan menjelaskan beberapa bahasa pemrograman yang digunakan seperti HTML, format dasar dokumen HTML, struktur dokumen HTML, sejarah HTML, tag HTML dan elemen dasar HTML seperti heading, paragraf, garis horizontal, baris baru, komentar serta penjelasan mengenai text formatting."

Diunggah oleh

abdurohmanrouf10
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
71 tayangan37 halaman

Pertemuan 2 - Pemrograman Web Sikc

Dokumen tersebut membahas tentang pemrograman berbasis web dengan menjelaskan beberapa bahasa pemrograman yang digunakan seperti HTML, format dasar dokumen HTML, struktur dokumen HTML, sejarah HTML, tag HTML dan elemen dasar HTML seperti heading, paragraf, garis horizontal, baris baru, komentar serta penjelasan mengenai text formatting."

Diunggah oleh

abdurohmanrouf10
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/ 37

PEMROGRAMAN

BERBASIS WEB
SIKC
HTML
• HTML adalah singkatan dari Hypertext Markup Language, HTML
merupakan salah satu bahasa pengkodean atau pemograman yang
digunakan untuk membuat halaman website yang ditampilkan pada web
browser. Sebagian besar halaman yang kamu temukan pada internet
kebanyakan menggunakan Bahasa HTML.
• HyperText: Text yang ditampilkan pada komputer atau alat elektronik lainnya
dengan merujuk ke text lainnya yang dapat diakses, biasanya dengan mengeklik
mouse atau menekan tombol tertentu.HyperText tidak terbatas pada text, tapi
juga dapat berisi tabel atau gambar. HyperText merupakan dasar dari struktur
web. (http://en.wikipedia.org/wiki/Hypertext )
• Markup: Kode yang diperlukan agar dapat dibaca oleh browser.(Intro To HTML
4.01, Dawn Friedman)

2
Format Dasar HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
isi halaman web

</body>
</html>

3
• The <!DOCTYPE html> declaration defines that this document is
an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML
page
• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

4
Struktur dokumen HTML

5
HTML History

6
Tag HTML
• Instruksi atau perintah dalam HTML disebut tag
• Tidak case sensitive <element atribut=value>
ket : element = nama tag
atribut = atribut
value = nilai dari atribut
contoh : <font color=red>
FONT merupakan element,
COLOR merupakan atribut,
RED adalah nilai dari atribut.
Sumber: https://pypl.github.io/PYPL.html diakses pada tanggal 07 Desember 2021

7
ELEMEN DASAR HTML:
1. HEADING
• Heading biasa digunakan untuk membuat judul pada
halaman web
• Tag yang digunakan adalah <Hn> dengan nilai n antara 1
sampai dengan 6
• Semakin besar nilai n maka semakin kecil huruf yang
tercetak.
• Default heading adalah rata kiri.
• Jika kita ingin membuat heading rata tengah maka
tambahkan atribut ALIGN dengan nilai “center” atau “right”
untuk rata kanan.
ELEMEN DASAR HTML:
HEADING – Latihan
• Buatlah file bernama heading.html dengan menambahkan tag
headling <h1> sampai dengan <h6> dengan menyertakan atribut
ALIGN dengan value “center”,”right”,”left”
• Judul tulisan heading bebas
ELEMEN DASAR HTML: HEADING – Contoh
<html>
<head>
<title>Latihan Heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2 align="center">Heading 2</h2>
<h3 align="right">Heading 3</h3>
<h4 align=“left”>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
ELEMEN DASAR HTML:
2. PARAGRAF
• Untuk membuat paragraph pada halaman web gunakan tag
<p>….</p>.
• Sama seperti heading, kita dapat mengatur paragraph dengan
menambahkan atribut align di dalam tag <p align=“left”>, <p
align=“center”><p align=“right”>. Untuk membuat rata kiri kanan
gunakan nilai “justify”
• Contoh
• <p align=“right”>Paragraf rata kanan </p>
ELEMEN DASAR HTML:
PARAGRAF – Contoh
<HTML>
<HEAD>
<TITLE>Contoh Penataan Paragraf</TITLE>
</HEAD>
<BODY>
<!-- Catatan kode untuk penataan paragraph-->
<P>paragraf rata kiri adalah default </P>
<P align="center">paragraf di tengah </P>
<P align="right">paragraf rata kanan </P>
<PRE> Akan tampil apa adanya </PRE>
</BODY>
</HTML>
ELEMEN DASAR HTML
3 GARIS HORIZONTAL
Untuk membuat garis horizontal dalam halaman web,
gunakanlah tag <HR>.

4 BARIS BARU
Untuk membuat baris baru gunakanlah tag <BR>

5 KOMENTAR
Komentar biasanya digunakan untuk memberikan penjelasan
atau keterangan tentang script yang kita buat. Untuk
membuat komentar pada HTML gunakanlah tag <!—di sini
komentar ditulis-->. Kalimat yang berada dalam tag tsb tidak
akan tampil pada web browser.
TEXT FORMATTING
MENGATUR TULISAN (1)

• Tag <font> mempunyai beberapa atribut yang dapat digunakan untuk memberi
warna tulisan, menentukan ukuran huruf, mengatur perataan, dan jenis font

• Atribut COLOR digunakan untuk membuat tulisan menjadi berwarna. Nilai dari
atribut ini adalah warna font atau hexadecimal (#000000 - #ffffff).

• CONTOH :
• <FONT COLOR=RED> atau <FONT COLOR=”#FF0000”>
MENGATUR TULISAN (2)

• Atribut FACE digunakan untuk menentukan jenis font yang Anda inginkan.
• Nilai dari atribut ini antara lain “Arial”,”Helvetica”,”Sans-serif”,”Times New Roman”,
dll. Jika atribut FACE tidak ada maka web browser akan menampilkan jenis font
default yang ada di komputer pengguna.
• Contoh:
• <FONT FACE=”TIMES NEW ROMAN”> atau <FONT FACE=ARIAL>

• Atribut SIZE digunakan untuk mengatur besarnya font. Nilai dari atribut ini adalah
bilangan antara 1 s/d 7.
• Contoh:
• <FONT SIZE=1>
TAG LAIN UNTUK DEKORASI TEKS

TAG FUNGSI
<B>…</B> Mencetak Tebal Teks

<I>…</I> Mencetak Miring Teks

<U>…</U> Menggaris Bawahi Teks

<BIG>…</BIG> Membesarkan Teks


<SMALL>…</SMALL> Mengecilkan Teks

<STRIKE>…</STRIKE> Memberi Coretan Pada Teks

<TT>…<TT> Menampilkan Teks Seperti Mesin Ketik

<SUB>…</SUB> Membuat Teks Subscript (sedikit ke bawah)


<SUP>…</SUP> Membuat Teks Superscript (Sedikit ke atas)
<CENTER>…</CENTER> Membuat teks Rata Tengah
PREFORMATTED TEXT

• Beberapa tag yang disebutkan di atas adalah tag-tag yang digunakan


untuk memformat tampilan teks.
• Sekarang bagaimana caranya bila kita ingin menampilkan teks sesuai
dengan yang kita tuliskan? Ternyata hal tsb dapat kita lakukan dengan
menggunakan Performatted Text. Tag yang digunakan adalah
<PRE>…</PRE>.
MENGATUR TULISAN - CONTOH
<HTML>
<HEAD>
<TITLE>Contoh Pengaturan Font</TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial" SIZE="2">Font Arial ukuran 2
</FONT><BR><HR>
<FONT FACE="Verdana" COLOR="red">Font Verdana warna
merah</FONT><BR><HR>
<FONT FACE="Impact” SIZE="5" COLOR="blue">Font Impact ukuran
5 warna biru</FONT>
</BODY>
</HTML>
LIST PADA HTML
LIST HTML
List merupakan bentuk yang umum yang biasa digunakan untuk
menguraikan daftar sesuatu.
Jenis-jenis list dalam HTML
1.Unordered List (Bulleted List)
2.Ordered List (Numbering List)
List HTML: Bulleted List

• Unordered List (Bulleted List) adalah suatu daftar yang tidak


memperhatikan urutan dari item-item pada daftar tsb.
• Untuk membuat Bulleted List kita gunakan tag <UL>…</UL> dan tag
<LI>…</LI> yang menyatakan daftar item.
List HTML: Bulleted List
üTag <UL> untuk membuat bullet (unordered list)
ü Memiliki atribut TYPE untuk menentukan jenis bullets.
ü TYPE dapat bernilai

q SQUARE

• DISC

o CIRCLE
Contoh Penggunaan
Bulleted List
Bulleted List
<UL TYPE=“SQUARE”>
<LI>item pertama</LI>
<LI>item kedua</LI>
<UL TYPE=“DISC”>
<LI>sub item pertama</LI>
<LI>sub item kedua</LI>
<UL TYPE=“CIRCLE”>
<LI>sub sub item pertama</LI>
<LI>sub sub item kedua</LI>
<LI>sub sub item ketiga</LI>
</UL>
<LI>sub item ketiga</LI>
</UL>
<LI>item ketiga</LI>
</UL>
List HTML: Ordered List
• Ordered List (Numbering List) adalah suatu daftar yang diawali
dengan nomor yang berurutan.
• Untuk membuat Numbered List gunakanlah tag <OL>…</OL> dan tag
<LI>…</LI> yang menyatakan daftar item.
List HTML: Ordered List
üTag <OL> untuk numbering (ordered list)
üMemiliki atribut TYPE untuk menentukan jenis numbering.
üTYPE dapat bernilai “1”, “A”, “a”, “I”, “i“
Latihan 3 Ordered List
• Buatlah daftar
item
menggunakan
Order List (OL)
seperti pada
tampilan di
samping!
Jawaban Latihan Ordered List
<OL TYPE=“1”>
<LI>item pertama</LI>
<LI>item kedua</LI>
<OL TYPE=“A”>
<LI>sub item pertama</LI>
<LI>sub item kedua</LI>
< OL TYPE=“I”>
<LI>sub sub item pertama</LI>
<LI>sub sub item kedua</LI>
<LI>sub sub item ketiga</LI>
</ OL >
<LI>sub item ketiga</LI>
</ OL >
<LI>item ketiga</LI>
</ OL >
MENGGUNAKAN
IMAGE
Menyisipkan Gambar
• Untuk menyisipkan gambar pada sebuah halaman
web gunakan tag <IMG SRC = “NAMA FILE GAMBAR”>
• Memiliki atribut ALT yang digunakan sebagai tampilan
gambar apabila gambar tidak dapat ditampilkan.
• Contoh: <IMG SRC=“gambar.jpg” alt=“gsc” >
Mengatur Ukuran Gambar

• Untuk pengaturan ukuran tampilan dari sebuah gambar, pergunakan


atribut WIDTH dan HEIGHT.
• Nilai dari atribut Width dan Height dapat diisi dengan angka
(menyetakan pixel) atau persen.

• Contoh:
• <IMG SRC = “gambar.jpg” WIDTH=100% HEIGHT=50>
Membuat Bingkai Gambar
• Untuk membuat bingkai, pergunakan atribut BORDER dengan value
nilai angka.
• Semakin besar nilai angka, maka border akan semakin tebal

• Contoh:
• <IMG SRC = “gambar.jpg” BORDER=3>
Gambar Sebagai Background
• Apabila akan menggunakan sebuah gambar sebagai background dari
halaman web, maka tambahkan atribut BACKGROUND pada tag BODY

• Contoh :
• <BODY BACKGROUND=“gambar.jpg”>
Format Isi Tugas
Simpan dengan nama artikel.html
<judul pengalaman>
<uraian pengalaman min 2 paragraf>
Daftar Materi Praktek Paling Favorit
1. Merakit PC Secara Virtual (Cisco)
2. Penulisan Ilmiah
3. Mailing List
4. Fungsi-fungsi Excel
5. Menampilkan Grafik Dengan Excel
6. Teknik Presentasi
7. Pengenalan HTML
Daftar Dosen Matrikulasi:
o Abc
o Def
Foto Kegiatan Matrikulasi
<foto kegiatan>
Contoh Tugas
Terima Kasih

KEMENTERIAN PENDIDIKAN, KEBUDAYAAN, RISET, DAN TEKNOLOGI


POLITEKNIK NEGERI INDRAMAYU
Jalan Raya Lohbener Lama Nomor 8 Lohbener – Indramayu 45252
Telepon/Faximile: (0234) 5746464
Laman : http://www.polindra.ac.id e-mail: [email protected]

Anda mungkin juga menyukai