Scribd Logo
Upload

Welcome to Scribd!

  • Materi HTML

    Uploaded by

    Chandz ChanDra Erryandari
    66 views11 pages
    materi

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    materi

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    66 views11 pages

    Materi HTML

    Uploaded by

    Chandz ChanDra Erryandari
    materi

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    HTML ( HYPERTEXT MARKUP LANGUAGE )

    HTML merupakan bahasa yang umum digunakan untuk membuat suatu web page (halaman web). Isi HTML dapat dilihat pada setiap halaman web dengan cara melihat pada bagian source kodenya

    Cara menampilkan Source kode HTML

    Isi source HTML

    Materi TIK HTML Kelas XI IPA / IPS

    Bahasa HTML ini berbasis pada text mode sehingga dalam penulisannya menggunakan programprogram yang berbasis pada text, contohnya : Notepad, Textpad, wordpad, Microsoft word dll. Sebenarnya tanpa menggunakan penulisan HTML, halaman web juga dapat dibuat selain dengan program text mode, pembuatan halaman web bisa juga dilakukan dengan program berbasis Graphics User Interface (GUI), contohnya : Macromedia Dreamweaver, Macromedia Flash, Microsoft Frontpage, Microsoft Publisher dll.

    Elemen Dasar Bahasa HTML html head title body Menandakan jenis Bahasa html yang digunakan Header Judul pada header Isi dari halaman web

    Penulisan elemen dasar HTML adalah sebagai berikut : <html> <head> <title> . </title> </head> <body> </body> </html>

    Note : setiap elemen dasar diawali dengan tanda pembuka < > dan diakhiri dengan tanda penutup </ > sesuai jenis elemen.

    Contoh :

    <html> <head> <title> Percobaan Membuat Halaman Web </title> </head> <body> Ini adalah salah satu cara membuat web </body> </html>

    Materi TIK HTML Kelas XI IPA / IPS

    Hasil pada web browser Bagian pada title

    Bagian pada body Pengaturan font & paragraph dalam format HTML Dalam bahasa HTML, pengaturan font & paragraf tidak bisa dilakukan dengan cara mengubah langsung. Pengaturan harus dilakukan dengan menuliskan tag-tag HTML. Berikut ini adalah beberapa tag-tag HTML dalam pengaturan font.

    Tag <B> .. </B> <I> </I> <U> . </U> <center> . </center> <sub> </sub> <sup> </sup> &nbsp Bold / Huruf Tebal Italic / Huruf Miring

    Fungsi

    Underline / huruf dengan garis bawah Menempatkan pada tengah halaman Subscript / huruf dibawah Superscript / huruf diatas Spasi ( dilakukan utk menambah spasi yg lebih dari satu spasi )

    <br> <p> . </p> <HR> <marquee> </marquee> <font> .. </font> <Align> <IMG> . </IMG>
    Materi TIK HTML Kelas XI IPA / IPS

    Pindah baris Membuat Paragraph Membuat garis pemisah Membuat tulisan bergerak Pengaturan spesifik font / character Pengaturan spesifik paragraph Pengaturan penyisipan Gambar/image
    3

    Lihat kedua contoh berikut ini :

    Kode HTML

    Hasil pada web browser

    Kode HTML

    Hasil pada web browser

    Materi TIK HTML Kelas XI IPA / IPS

    Pengaturan FONT dan Garis secara spesifik

    Tag Face

    Fungsi Jenis Font / Huruf

    Keterangan Ditulis setelah tag font Contoh : <font face=Arial> .. </font>

    Size

    Menentukan Ukuran ( huruf,garis dll )

    Utk ukuran huruf, ditulis setelah tag font <font size=14> . </font> <font color=RED> .. </font>

    Color

    Menentukan warna (huruf, garis dll)

    Dari ketiga pengaturan font diatas, bisa disatukan dalam satu tag font dengan tambahan spasi tiap tag. Contoh : <font face=Algerian size=18 color=BLUE> PERCOBAAN </font>

    Note : utk ukuran dan warna pada garis bisa dituliskan setelah tag HR Contoh : <HR size=3 color=YELLOW>

    Pengaturan Letak Paragraf / Text / Gambar secara spesifik

    Tag CENTER LEFT RIGHT

    Fungsi Rata Tengah Rata kiri Rata kanan

    Contoh pemakaian <Align=center> <Align=left> <align=kanan>

    Materi TIK HTML Kelas XI IPA / IPS

    Pengaturan Background Untuk mengatur / mendesain background agar tidak terlihat halaman warna putih biasa, bisa dilakukan dengan mengedit pada tag body.

    Tag Bgcolor

    Fungsi Memberi warna background

    Keterangan Ditulis setelah tag body. Contoh : <body bgcolor=RED> . </body>

    Background

    Memberi background berupa gambar

    <body background=xxxxx.yyy> Xxxxx merupakan nama file gambar Yyy merupakan file type image Contoh : <body background=pinokio.jpg>

    Note : memberi gambar pada background berarti file gambar tersebut harus ada pada lokasi tempat penyimpanan file html yg dibuat. Kalau misalkan file tersebut ada pada sub folder pada tempat penyimpanan file html maka sub folder tersebut ikut dituliskan. Contoh : File gambar berada pada folder lain dgn nama folder image yg berada dlm tempat penyimpanan file html, maka dituliskan : <body background=image\gambar.jpg>

    Kalau misalkan file gambar ada pada alamat web lain (mengambil dari internet) maka yang dituliskan adalah alamat web tempat menyimpan gambar tersebut. Contoh : <body background=http://www.detik.com/gambar.gif>

    Materi TIK HTML Kelas XI IPA / IPS

    Menginputkan dan menampilkan Gambar Disamping sebagai background, file gambar juga dapat diinputkan kedalam halaman web. Tag yang diberikan utk menginputkan dan menampilkan gambar adalah IMG

    Pengaturan Image yang diinput dan ditampilkan Tag SRC Input gambar Fungsi dari lokasi penyimpanan Keterangan Menentukan lokasi file gambar yg diinputkan setelah tag IMG <img src=gambar.jpg>

    gambar ( Image Source ) WIDTH Mengatur Lebar ukuran gambar yg akan ditampilkan HEIGHT Mengatur Tinggi ukuran gambar yg akan ditampilkan

    Misalnya terdapat file image : badak.jpg yang memiliki ukuran 1024x600 pixel, file tersebut ingin diinputkan tetapi di resize ke ukuran 240x200 maka bisa dituliskan di HTML sbg berikut : <IMG SRC=badak.jpg width=240 height=200>

    Kalau misalkan file image tersebut ada pada sub folder pada tempat penyimpanan file html maka sub folder tersebut ikut dituliskan. Contoh : File gambar berada pada folder lain dgn nama folder image yg berada dlm tempat penyimpanan file html, maka dituliskan : <IMG SRC="Picture Motor\gs.jpg">

    Materi TIK HTML Kelas XI IPA / IPS

    Note : Jika ukuran width dan height tidak dituliskan maka ukuran gambar yang ditampilkan adalah ukuran sebenarnya dari file gambar tersebut Fungsi tag Align dapat ditambahkan pada tag image untuk menentukan lokasi di kiri, center maupun dikanan halaman Seperti halnya obyek lain, gambar juga bisa dibuat bergerak dengan menambahkan tag <marquee> sebelum tag <img> JARAK SPASI antar Obyek. Untuk memberikan jarak spasi antar obyek agar obyek memiliki jarak yang cukup tepat maka dapat digunakan dengan atribut HSPACE dan VSPACE Tag HSPACE VSPACE Fungsi Memberikan spasi Horisontal Memberikan spasi vertikal Diberikan Keterangan setelah tag obyek, misalkan

    gambar. Contoh : <img src=xtr.jpg vspace=200>

    Membuat Link ke halaman lain Untuk membuat Link ke halaman lain tag yang digunakan adalah <a href> .. </a> Contoh : <a href=dua.html> Link ke halaman 2 </a>

    Note : Teks dalam tanda merupakan lokasi tempat menyimpan file yang di link / dituju Jika lokasi link ada pada halaman web di internet maka yang dituliskan adalah alamat internet tersebut diawali dengan http:// Contoh : <a href=http://www.google.com> Link ke halaman Google </a>

    Materi TIK HTML Kelas XI IPA / IPS

    Manipulasi Daftar Item dalam HTML A. Ordered List ( memberikan penomoran otomatis secara berurutan ) Tag yang digunakan untuk membuat Ordered List adalah <OL> .. </OL>

    Diantara pembukadan penutup tag OL, diberikan tag <LI> utk menyatakan list nomor tersebut Contoh : <OL> <LI> Menulis angka berurutan dari 1 <LI> Ini adalah yang nomor 2 <LI> Dan yang ini adalah nomor 3 <OL>

    Secara default (awal mula), Ordered List yang digunakan adalah urutan dari angka 1 sampai seterusnya. Tetapi angka tersebut bisa dirubah sesuai dengan type-type pengurutan yang lain. Cara pembuatannya adalah dengan menambahkan atribut Type setelah Tag OL

    TYPE=A TYPE=a TYPE=I TYPE=i TYPE=x

    Membuat daftar berurutan dengan huruf abjad kapital Membuat daftar berurutan dengan huruf abjad kecil Membuat daftar berurutan dengan huruf Romawi besar Membuat daftar berurutan dengan huruf romawi kecil Membuat daftar berurutan dengan huruf awal x

    Contoh : <B>Penomoran dengan Angka Romawi</B> <OL TYPE=I> <LI> Nomor Romawi I <LI> Nomor Romawi II <LI> Nomor Romawi III <LI> Nomor Romawi IV </OL>
    Materi TIK HTML Kelas XI IPA / IPS 9

    B. Unordered List Selain penomoran dengan angka / abjad yang berurutan, dalam html juga bisa digunakan untuk menampilkan list tanpa penomoran berurutan alias dengan bullets. Tag yang digunakan adalah UL. Sama halnya dengan Ordered List, maka tiap list item diberi atribut <LI>. Type-type bullet yang bisa ditampilkan sebagai berikut :

    TYPE=CIRCLE TYPE=SQUARE TYPE=DISK

    Bullets berupa lingkaran tiap item list Bullets berupa tanda kotak tiap item list Bullets berupa tanda piringan tiap item list

    <UL TYPE=circle> <LI> Pengertian <LI> Pembahasan <LI> Kesimpulan </UL>

    Materi TIK HTML Kelas XI IPA / IPS

    10

    Membuat Frame dengan HTML

    Membuat frame atau membagi jendela browser menjadi beberapa bagian baik vertical maupun horizontal. Tag yang digunakan adalah <FRAMESET> .. </FRAMESET>. Tag frame ini bisa dikatakan untuk menggantikan posisi isi halaman atau pada bagian tag body. Pembuatan Frame ini bisa diatur dengan pembagian dalam %.

    COLS ROWS

    Pembagian frame berdasarkan kolom Pembagian frame berdasarkan baris

    Contoh :

    <FRAMESET COLS=25%,75%> <FRAME SRC=satu.htm> <FRAME SRC=dua.htm> </FRAMESET>

    Membagi halaman 2 bagian, bagian 1 25% bagian 2 75%

    Halaman yang ditampilkan

    Copyright Ahmad Ardian SN,S.Kom

    Materi TIK HTML Kelas XI IPA / IPS

    11

    You might also like