Scribd
Unggah
16 tayangan

Modul 2

Modul 2 membahas pengenalan dasar HTML. Materi ini menjelaskan struktur dasar HTML, tag-tag dasar seperti paragraf dan judul, serta pengaturan warna dan teks. Modul ini juga memperkenalkan penggunaan list ordered, unordered, dan definition dalam membuat konten halaman web.

Diunggah oleh

dellya manafe
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
16 tayangan

Modul 2

Modul 2 membahas pengenalan dasar HTML. Materi ini menjelaskan struktur dasar HTML, tag-tag dasar seperti paragraf dan judul, serta pengaturan warna dan teks. Modul ini juga memperkenalkan penggunaan list ordered, unordered, dan definition dalam membuat konten halaman web.

Diunggah oleh

dellya manafe
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

Modul 2

Dasar Pemrograman Web

Pengenalan HTML

Gloria Ch Manulangga
Deskripsi Singkat
Deskripsi Singkat mengenai Topik
Materi ini berisi penjelasan mengenai pengenalan dasar HTML.

Tujuan Pembelajaran
1. Mahasiswa mengetahui stuktur dasar HTML
2. Mahasiswa memahami penggunaan tag-tag HTML
3. Mahasiswa mampu menjalankan baris perintah HTML

Alat yang digunakan


4. Browser (Chrome, Mozzilla, dll)
5. Editor (Sublime Text, Notepad++, dll)

Materi Yang akan disampaikan:


6. Pengenalan HTML
7. Struktur Dasar HTML
8. Pengaturan warna dan teks
9. Heading
10.List
Pengenalan HTML

HTML (Hypertext Markup Language ) merupakan salah satu format yang di gunakan
dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web.

Untuk membuat dokumen HTML dibutuhkan sebuah aplikasi teks editor dan sebuah
browser .
Struktur Dasar HTML
<html> Tag Pembuka
<head>
<title> Judul </title>
</head>
<body>
“ Isi dari halaman Web”
</body>
</html> Tag Penutup

Ket:
<html>..</html> Dalam penulisan dokumen html harus di awali dengan tag pembuka
dan diakhiri dengan tag penutup.

<title>..</title> title atau judul halaman/form. Kalimat yang terletak pad tag ini akan
muncul pada bagian browser (title bar)

<body>..</body> tag ini digunakan untuk menampilkan isi dari halaman web.
Tag dalam HTML

<B> untuk huruf tebal


<U> untuk garis bawah
<I> untuk huruf miring
<P> Untuk paragraf baru atau untuk pindah alinea.
<br> untuk baris baru
<font> untuk mengatur ukuran font, warna font dan jenis font.
<hr> garis horizontal
<background> untuk mengatur latar belakang dengan gambar
<bgcolor> untuk mengatur warna latar belakang
<align> untuk menempatkan posisi tulisan. (kanan, kiri, tengah)
<html>

Contoh
<head>
<title> Belajar Web </title>
</head>
<body>
<b> Belajar Web </b>
</body>
</html>
Latihan

1. Gunakan tag html untuk menampilkan


kalimat di bawah ini :
Belajar Web

2. Gunakan tag html untuk menampilkan


kalimat di bawah ini :
Belajar Web
Pengaturan Halaman Web dan Teks

<html>
<head>
<title> Belajar Web </title>
</head>
<body>
<font size=5 color= blue face=arial> Saya senang belajar Web </font>
</body>
</html>
<html>
<head>
<title> Belajar Web </title>
</head>
<body bgcolor=lightgreen>
<font size=5 color= blue face=arial> <center> Saya senang belajar Web </
center> </font>
<hr width=275 size=4 align= center>
</body>
</html>
Heading

Digunakan untuk mengatur ukuran huruf


pada header. Heading mempunyai nilai
dari 1-6 atau antara <H1> sampai <H6>.
Dengan<H1>ukuran terbesar dan <H6>
ukuran terkecil.
<html>
<head>
<title> Heading </title>
</head>
<body >
<h1> Belajar Web </h1>
<h2> Belajar Web </h2>
<h3> Belajar Web </h3>
<h4> Belajar Web </h4>
<h5> Belajar Web </h5>
<h6> Belajar Web </h6>
</body>
</html>
Lists
Lists merupakan kumpulan teks yang disusun
sedemikian rupa sehingga ite-item yang ada memiliki
nomor urut, tanda-tanda atau symbol.

Terdapat tiga tipe List yaitu :


1. Ordered List <OL> digunakan untuk membuat daftar
item bernomor, bisa dalam angka arab atau romawi.
didalam ordered list terdapat tag <li> list entries.
Atribut pada ordered list adalah type.
Untuk atribut type, dapat menggunakan :
1- default number untuk 1,2,3 dstnya.
A- Huruf besar A,B,C dstnya.
a- Huruf kecil a,b,c dstnya.
I- Romawi huruf besar I,II,III dstnya.
i- Romawi huruf kecil i,ii,iii dstnya.
<html>
<head>
<title> Heading </title>
</head>
<body >
<font size=4 face=arial> <center> <b> Biodata Saya : </b> </center>
<hr size=3 width=125>
<ol type=1>
<li> Nama : </li>
<li> Tempat Tanggal Lahir : </li>
<li> Hobby : </li>
</ol>
</body>
</html>
2.Unordered List <UL> digunakan untuk
membuat daftar item dengan tanda
bullet (tidak bernomor). Atribut type yang
digunakan berupa circle, square dan disk.
<html>
<head>
<title> Heading </title>
</head>
<body >
<font size=4 face=arial> <center> <b> Hobby Saya : </b> </center>
<hr size=3 width=125>
<ul type=circle>
<li> Jalan-jalan </li>
</ul>

<ul type=square>
<li> Jalan-jalan </li>
</ul>
<ul type=disc>
<li> Jalan-jalan </li>
</ul>

</body>
</html>
3. Definition Lists <DL> digunakan untuk
menjelaskan istilah. Di dalam definition
list terdapat tag <DT>definiton term dan
tag <DD> definition data.
definition Term untuk menjelaskan istilah
sedangkan definition data un-
tuk
menjabarkan istilah.
<html>
<head>
<title> Heading </title>
</head>
<body >
<font size=4 face=arial> <center> <b> Istilah </b> </center>
<hr size=3 width=125>
<DL>
<DT> HTML
<DD> Hypertext Markup Language
<DT> HTTP
<DD> Hypertext Transfer Protocol
</DL>

</body>
</html>
Latihan 1
Rumah Makan

1. Menu Makanan
• Nasi Goreng
• Ayam Bakar
• Sate
2. Menu Minuman
o Es Teh
o Es Jeruk
o Es Campur
Latihan 2

Tipe-tipe Tulisan Sandi :


1. Sandi Koordinat
2. Sandi Angka
3. Sandi Morse
sandi rumput
 sandi bangun
 sandi kimia
4. Sandi Semaphore
5. Sandi Jam

Anda mungkin juga menyukai