MODUL 1 HTML. (HyperText Mark-Up Language)

Ukuran: px

Mulai penontonan dengan halaman:

Download "MODUL 1 HTML. (HyperText Mark-Up Language)"

Leony Johan
7 tahun lalu
Tontonan:

1 MODUL 1 HTML (HyperText Mark-Up Language) Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang

2 Pertemuan Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah perintah dasar HTML 2. Mahasiswa dapat membuat beberapa halaman website sederhana 1.2 Materi : 1. Tag tag Dasar HTML 2. Atribut Tag HTML 3. Value Atribut HTML 4. LIST HTML HTML DASAR HTML (HyperText Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs Untuk belajar HTML dasar sebaiknya anda menggunakan Notepad Struktur Dasar HTML <html> <head> <title> </title> </head> <body>. </body> </html> PENGUNAAN TAG DAN ATRIBUTNYA Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri dengan tag HTML Tag HTML diapit dengan dua karakter kurung sudut ( < dan > ) Tag HTML secara normal selalu berpasangan misal (<i>...</i>) Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir. Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Misalnya : <b><i>..tebal dan Miring..</I></b> Tag HTML tidak case sensitive. Ini artinya <html> sama dengan <HTML> TAG HTML Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag pertama dalam dokumen html. Penulisan tag seperti berikut ini :

<html> pada awal dokumen dan </html> pada akhir dokumen TAG HEAD Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen

3 <html> pada awal dokumen dan </html> pada akhir dokumen TAG HEAD Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head kecuali judul dokumen tidak akan terlihat oleh pembaca dokumen tersebut. Penulisan tag seperti berikut ini : <head> di awal setelah <html> dan </head> di akhir section head. Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut : Menyediakan judul dokumen Menjembatani hubungan antar dokumen Memberitahu browser untuk membuat form pencarian Menyediakan metode untuk mengirim pesan ke tipe browser Elemen yang mungkin terdapat pada bagian head : Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah sebagai berikut : <title>judul Dokumen</title> TAG BODY : Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini. Seperti telah disebutkan di atas, bagian BODY diawali oleh tag <body> dan ditutup </body>. Tag Body mempunyai atribut

4 Elemen Heading <hn> Tag heading berfungsi untuk memformat heading (judul dan sub judul) Elemen Paragrap <p> Berfungsi pengaturan antara paragrap dalam halaman web Atribut Elemen Paragrap : Align = [ left center right ] Elemen Break <br> Berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web. Elemen Horisontal Rules<hr> Berfungsi untuk menampilkan garis horisontal di dalam halaman web. Atribut elemen horisontal rule : Align = [ left center right ] (Horizontal aligment, default center) Size = pixels (line height, default 2) Width = length ( line width, pixed or percentage, default 100%) Noshade = solid line Elemen Pemformatan Karacter <font> Font pada halaman HTML dapat diformat sesuai dengan desain yang ditentukan, baik ukuran, jenis maupun warna. Elemen Ragam Karakter <b>bold</b> <i>italic</i> <u>underline</u> Element List <li> Properties <li> digunakan untuk menampilkan informasi dalam bedua jenis yang dikenal HTML, yaitu : Unordered list <ul> = format bullet Ordered list <ol> = format bentuk nomor Atribut Ordered list Type = [ 1 a A i I, default 1 ] Atribut Unordered list Type = [ disc square circle, default disc ] 1.3 LATIHAN LATIHAN A. Dasar dasar HTML 1. Penggunaan syntak HTML, penggunaan komentar dan tag <br> untuk ganti baris

5 2. Menggunakan tag <P> untuk membuat paragraph dan menggunakan tag <H1> s.d <H6>untuk memperbesar huruf 3.Membuat garis horizontal B. PENGATURAN TEKS 4. Penggunaan tag <pre> untuk menampilkan teks apa adanya

6 5. Pengaturan Warna Background C. MENAMPILKAN DAFTAR ITEM 6. Penggunaan tag <UL> untuk daftar list, dan <LI> untuk daftar item 7. Penggunaan tag <OL>

7 8. Penggunaan <body background> TUGAS 1. Ganti tampilan pada nomor 1 (satu) dengan profil anda Nama, Nim dan jurusan anda 2. Copy isi pada body pada dokumen HTML no 2 menjadi heading <H1> <h6> 3. Buatlah Program List 4. Rangkaian program program sederhana tersebut (no 1 s.d 8)

dokumen-dokumen yang mirip

MODUL 1 HTML. (HyperText Mark-Up Language)

MODUL 1 HTML. (HyperText Mark-Up Language) MODUL 1 HTML (HyperText Mark-Up Language) Laboratorium STIMIK Komputer PPKIA Pradnya Paramita Malang PERTEMUAN PRAKTIKUM 1 1.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah perintah dasar