Html 2
This presentation is the property of its rightful owner.
Sponsored Links
1 / 21

HTML (2) PowerPoint PPT Presentation


  • 109 Views
  • Uploaded on
  • Presentation posted in: General

HTML (2). Pemrograman Web. Andy Haryoko, ST. <HTML> <HEAD> <TITLE>Latihan HTML</TITLE> </HEAD> <!-- Ini merupakan suatu komentar --> <BODY> Selamat Belajar HTML<BR> Semoga Sukses ! </BODY> </HTML>. <HTML> <HEAD> <TITLE>Contoh Pengaturan Judul</TITLE> </HEAD> <BODY>

Download Presentation

HTML (2)

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html 2

HTML (2)

Pemrograman Web

Andy Haryoko, ST


Html 2

<HTML>

<HEAD>

<TITLE>Latihan HTML</TITLE>

</HEAD>

<!-- Ini merupakan suatu komentar -->

<BODY>

Selamat Belajar HTML<BR>

Semoga Sukses !

</BODY>

</HTML>


Html 2

<HTML>

<HEAD>

<TITLE>Contoh Pengaturan Judul</TITLE>

</HEAD>

<BODY>

<H1 ALIGN = CENTER><font color = red> Pesona Tanaman Hias </font></H1>

<P>

Keindahan tanaman hias<BR>

membawa suatu pesona tersendiri<BR>

Warna-warni bunga

</P>

</BODY>

</HTML>


Html 2

<HTML>

<HEAD>

<TITLE>Atribut NOSHADE pada Tag HR</TITLE>

</HEAD>

<BODY>

<H1>KEBUN PESONA</H1>

<HR SIZE = "10">

Jl. Solo Km 14<BR>

Surabaya <BR>

Indonesia<BR>

</BODY>

</HTML>


Html 2

<HTML>

<HEAD>

<TITLE>Praformat </TITLE>

</HEAD>

<BODY>

<H2>Daftar Harga Keladi:</H2>

<Pre>

Red Flash.........35.000

Red Fire..........60.000

Fannie Munson.....60.000

</Pre>

Harga sewaktu-waktu bisa berubah.

</BODY>

</HTML>


Html 2

<HTML>

<HEAD>

<TITLE>Jenis Font</TITLE>

</HEAD>

<BODY>

Normal: 012345ABCD<BR>

<FONT COLOR="blue" FACE = "Arial">

Arial: 012345ABCD</FONT>

<BR>

<FONT COLOR="green" FACE = "Courier" SIZE="5">

Courier: 012345ABCD</FONT>

<BR>

</BODY>

</HTML>


List html 1

LIST HTML (1)

List merupakan bentuk yang umum yang biasa digunakan untuk menguraikan daftar sesuatu.

Jenis-jenis list dalam HTML

  • Unordered List (Bulleted List)

  • Ordered List (Numbering List)


List html 2

List HTML (2)

  • Unordered List (Bulleted List)

    Adalah suatu daftar yang tidak memperhatikan urusan dari item-item pada daftar tsb. Untuk membuat Belleted List kita gunakan tag <UL>…</UL> dan tag <LI> yang menyatakan daftar item.


List html 3

List HTML (3)

2. Ordered List (Numbering List)

Adalah suatu daftar yang diawali dengan nomor yang berurutan. Untuk membuat Numbered List gunakanlah tag <OL>…</OL> dan tag <LI> yang menyatakan daftar item.


Html 2

<HTML>

<HEAD>

<TITLE>Contoh Pemakaian Tag UL dan LI</TITLE>

</HEAD>

<BODY>

<H2>Daftar Jurusan di Fakultas Teknik Unirow :</H2>

<UL>

<LI>Teknik Perangkat Lunak<BR>

<LI>Teknik Industri <BR>

</UL>

</BODY>

</HTML>


Html 2

<HTML>

<HEAD>

<TITLE>Tag OL dengan TYPE</TITLE>

</HEAD>

<BODY>

<B>Dengan huruf kapital:</B>

<OL TYPE = "A">

<LI>Yogya<BR>

<LI>Solo<BR>

</OL>

<HR>

<B>Dengan angka romawi:</B>

<OL TYPE = "i">

<LI>Yogya<BR>

<LI>Magelang<BR>

</OL>

</BODY>

</HTML>


Menyisipkan gambar

Menyisipkan Gambar

  • format gambar yang digunakan dalam halaman web yaitu : .GIF, .JPEG, dan .PNG

  • Cara untuk menyisipkan gambar yaitu dengan menggunakan tag

    <IMG SRC=”nama_file_gambar”>

  • Tag <IMG> memiliki beberapa atribut diantaranya sbb:

  • ALT memberikan alternative teks atau keterangan pada gambar.

  • HEIGHT mengatur tinggi gambar

  • WEIGHT mengatur lebar gambar

  • ALIGN meletakkan gambar pada posisi tertentu

  • HSPACE mengatur jarak kosong horisontal antara gambar dengan objek di sekitarnya

  • VSPACE mengatur jarak kosong vertikal antara gambar dengan objek di sekitarnya


Html 2

<HTML>

<HEAD>

<TITLE>Menampilkan Gambar </TITLE>

</HEAD>

<BODY>

<IMG SRC="FISH.GIF">

</BODY>

</HTML>


Html 2

<HTML>

<HEAD>

<TITLE>Menampilkan Gambar Yang Sudah Diedit </TITLE>

</HEAD>

<BODY>

<IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25">

</BODY>

</HTML>


Html 2

<HTML>

<HEAD>

<TITLE>Menampilkan Posisi Gambar/TITLE>

</HEAD>

<BODY>

<P>sebuah gambar

<IMG SRC="Images1.jpeg" WIDTH="50" HEIGTH="25" ALIGN="bottom">

Ikan mujair

<P>Sebuah gambar

<IMG SRC="Images3.jpeg" WIDTH="50" HEIGTH="25" ALIGN="middle">

ikan lele

<P> Sebuah gambar

<IMG SRC="Images5.jpeg" WIDTH="50" HEIGTH="25" ALIGN="top">

ikan nemo

</P>

</BODY>

</HTML>


Html 2

<HTML>

<HEAD>

<TITLE>Menampilkan Posisi Gambar left dan right</TITLE>

</HEAD>

<BODY>

<P>

<IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25" ALIGN="left">

Ikan merupakan salah satu sumber protein hewani yang sangat baik untuk kesehatan.

Selain mengandung protein, beberapa ikan juga mengandung OMEGA-3 yang sangat berguna bagi kesehatan

. <BR><BR><BR><BR><BR><BR>

<P>

<IMG SRC="FISH.GIF" WIDTH="50" HEIGTH="25" ALIGN="right">

Ikan merupakan salah satu sumber protein hewani yang sangat baik untuk kesehatan.

Selain mengandung protein, beberapa ikan juga mengandung OMEGA-3 yang sangat berguna bagi kesehatan

</P>

</BODY>

</HTML>


Html 2

<HTML>

<HEAD>

<TITLE>Jarak teks dengan gambar</TITLE>

</HEAD>

<BODY>

<P>

<IMG SRC="FISH.JPEG" WIDTH="50" HEIGHT="25" ALIGN="left" VSPACE="25" HSPACE="25">

Ikan merupakan salah satu sumber protein hewani yang sangat baik untuk

kesehatan.

Selain mengandung protein, beberapa ikan juga mengandung OMEGA-3 yang sangat berguna bagi kesehatan.

Ada ikan yang hidupnya di air tawar, seperti ikan mas, gurame, dll. Banyak pula ikan yang hidup di air laut

diantaranya ikan tuna, tongkol, cumi, dan lain-lain. Namun ada pula ikan yang hidup di air payau, contohnya

adalah bandeng. Cara pengolahan ikan supaya baunya tidak anyir adalah dengan memberikan perasan jeruk

nipis sebelum ikan di simpan di dalam lemari pendingin.

</P>

</BODY>

</HTML>


Hyperlink 1

HYPERLINK (1)

  • Tag yang digunakan untuk membuat link adalah <a>…</a>.

  • Pada browser sebuah link dinyatakan dalam bentuk teks yang ada garis bawahnya. Secara default link akan berwarna biru dan setelah diklik warnanya berubah menjadi ungu.

  • <a href=“namafile.html”>Tulisan yang akan tampil di layar</a>


  • Login