• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html for xi grade
 

Html for xi grade

on

  • 299 views

 

Statistics

Views

Total Views
299
Views on SlideShare
299
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html for xi grade Html for xi grade Presentation Transcript

    • Web Programming With HTML Sri Mulyani ICT For XI Grade
    • Contents What is HTML Basic Operation in HTML Text Formatting Table FrameWeb Programming with HTML ICT For XI Grade
    • What is HTML HTML = HyperText Markup Language Is a set of special codes that you embed in text to add formatting and linking information. Based on Standard Generalized Markup Language (SGML). By convention, all HTML information begins with an open angle bracket (<) and ends with a closing angle bracket (>). It‟s call TAG. For example, <html>. This tag tells an HTML interpreter (browser) that the document is written and marked up in standard HTML.Web Programming with HTML ICT For XI Grade
    • Struktur HTML <HTML> <HEAD> …………….. </HEAD> <BODY> …………….. </BODY> </HTML>Web Programming with HTML ICT For XI Grade
    • Aturan Penulisan dalam HTML Penulisan tag harus diapit tanda „<„ dan „>‟ Case insensitive (huruf besar ataupun kecil tidak pengaruh) Tag tunggal dan Tag berpasangan Spasi / baris baru akan diabaikan oleh browser Dokumen html harus disimpan dalam bentuk text murni dan berekstensi .html atau .htmWeb Programming with HTML ICT For XI Grade
    • Penjelasan Tag HTML  Tag <html> merupakan tanda awal untuk dokumen HTML.  Tag </html> merupakan tanda akhir untuk dokumen HTML.  Tag <head>....</head> merupakan informasi header untuk halaman HTML dan informasi ini tidak akan ditampilkan pada browser  Tag <body>.....</body> merupakan teks yang akan ditampilkan pada browser  Tag <title> ... </title> Digunakan untuk memberikan keterangan / judul pada title bar web browser. Letak penulisan tag <title> ... </title> berada pada bagian <head> ... </head>Web Programming with HTML ICT For XI Grade
    • Contoh HTML <html> <head> <title>Web Pertama</title> </head> <body> Ini web pertamaku. </body> </html>Web Programming with HTML ICT For XI Grade
    • Tag <BR> Tag <br> Digunakan untuk membuat sebuah baris baru dan tidak memiliki tag penutup. Penulisan isi web untuk membuat baris baru dengan menggunakan enter, baris baru tersebut akan diabaikan oleh browser. <html> <head> <title>Web Pertama</title> </head> <body> Hyper Text Markup Language<br> Hyper Text <br> Markup Language </body> </html>Web Programming with HTML ICT For XI Grade
    • Tag <HR> Tag <hr> Digunakan untuk menampilkan sebuah garis horisontal sepanjang jendela browser dan tidak memiliki tag penutup. Pada tag ini terdapat properti width untuk mengatur panjang garis horisontal. Contoh : <html> <head> <title>Web Pertama</title> </head> <body> Garis pertama <br> <hr> Garis kedua <br> <hr width=”100” > </body> </html>Web Programming with HTML ICT For XI Grade
    • Tag <body>  Tag <body> … </body> Digunakan untuk menampilkan teks pada browser dan tag ini memiliki atribut sebagai berikut : TAG KETERANGAN Untuk menentukan warna latar belakang bgcolor teks di browser Untuk menentukan latar belakang teks di background browser berdasarkan file gambar Untuk menentukan gambar latar belakang bgproperties teks ikut tergulung atau tidak. Nilai atribut ini adalah fixed text Untukmenentukan warna dari teksWeb Programming with HTML ICT For XI Grade
    • Contoh Tag Body <html> <head> <title>Contoh atribut body</title> <body background="Jellyfish.jpg" text="red"> <p>Test untuk atribut body</p> </body> </html>Web Programming with HTML ICT For XI Grade
    • Format Teks  Teks dalam HTML tidak sesederhana yang dibayangkan, banyak komponen yang menyertainya agar teks ditampilkan sesuai yang dikehendaki. HTML menyediakan bermacam-macam elemen, diantaranya :  PARAGRAF, untuk membuat suatu paragraf  BLOCKQUOTE, untuk membuat suatu kutipan teks  DIVIDER, untuk mengelompokan teks tertentuWeb Programming with HTML ICT For XI Grade
    • Format PARAGRAF  Suatu paragraf dalam dokumen HTML ditandai dengan pasangan elemen <P>…</P>. Atribut yang digunakan dalam paragraf ALIGN mempunyai tiga nilai, yaitu :  LEFT, untuk meratakan teks ke margin kiri  RIGHT, untuk meratakan teks ke margin kanan  CENTER, untuk meratakan teks ke tengah margin  JUSTIFY, untuk meratakan teks ke kanan dan kiri marginWeb Programming with HTML ICT For XI Grade
    • Contoh Tag Paragraf <HTML> <HEAD> <TITLE>ENTER, TAB DAN SPASI DALAM HTML</TITLE> </HEAD> <BODY> <P ALIGN=”LEFT”>Paragraf satu</P> <P ALIGN=”CENTER”>Paragraf dua</P> <P ALIGN=”RIGHT”>Paragraf tiga</P> </BODY> </HTML>Web Programming with HTML ICT For XI Grade
    • Blockquote  Tag <BLOCKQUOTE> digunakan untuk menuliskan suatu kutipan teks.  Tag <BR> digunakan untuk membuat teks pada baris berikutnya. Contoh : <html> <head> <title>membuat dokmen html</title> </head> <body bgcolor=lightgrey> <p>baris pertama<br>baris kedua<br>baris ketiga<br> <cite>membuat dokumen html</cite> </body> </html>Web Programming with HTML ICT For XI Grade
    • Heading dan HR  Untuk menyatakan suatu heading, digunakan tag <Hx> dimana x adalah nomor level heading dari 1 sampai 6. pemakaian heading diawali dengan tag<Hx> dan diakhiri dengan tag </Hx>  Garis pemisah antara satu baris dengan baris lainnya, digunakan elemen HR. Elemen ini akan membuat garis horisontal sepanjang lebar jendela browser. Atribut yang menyertai adalah :  ALIGN, dapat diset dengan nilai LEFT, CENTER ,RIGHT dan JUSTIFY  WIDTH, untuk mengatur panjang garis horisontal yang dapat ditentukan dengan nilai pixel atau persen.  SIZE, untuk mengatur ketebalan garis horisontal mempunyai nilai dalam satuan pixel.  NOSHADE, menampilkan garis horisontal tanpa bayang- bayang 3-D.  COLOR, memberi warna pada garis horisontal.Web Programming with HTML ICT For XI Grade
    • Contoh Heading dan HR <html> <head> <title>pemakaian tag HR</title> </head> <body bgcolor=lightgrey> <h1 align=center>Contoh Pemakaian Heading1</h1> <br> <h2 align=left>Program Penjurusan</h2> <hr noshade> XI IPA<br> XI IPS<br> XI Olim<br> <hr width=50% size=6 align=left color=black> </body></html>Web Programming with HTML ICT For XI Grade
    • Tag DIV  Tag <DIV>…..</DIV> digunakan untuk membagi dokumen HTML dalam hirarki yang terstruktur.  Contoh : <html> <head><title>paragraf</title> </head> <body bgcolor=lightgrey> <div align=center> <h1>header rata tengah</h1> <img src="Jellyfish.jpg" width="15%"><br> gambar berada diatas baris teks.<br> <p align=right>baris teks ini rata kanan</p></div> <div style="color:blue"> <h1>heading warna blue</h1> <p>teks dalam paragraf berwarna blue</p> </div></body></html>Web Programming with HTML ICT For XI Grade
    • Tag ADDRESS  Tag ADDRESS digunakan untuk memberikan informasi pembuat situs web, seperti nama, e- mail, organisasi atau tanggal terakhir update halaman web.  Contoh : <html><body> <address> <h5>Author:</h5> Sri Mulyani<a href="mailto:sri_mulyani15@yahoo.com"><br> sri_mulyani15@yahoo.com</a><br> </address> </body></html>Web Programming with HTML ICT For XI Grade
    • Logical Formatting Adalah jenis format yang menggolongkan teks dari isi atau fungsi teks tersebut. Elemen yang termasuk dalam kategori ini adalah :  <EM>…</EM> Digunakan untuk memberikan penekanan pada suatu kata atau kalimat. Elemen ini biasanya dinyatakan dalam teks dengan bentuk miring.  <STRONG>…</STRONG> Menyatakan penekanan yang kuat pada suatu kata atau kalimat, biasanya ditampilkan dalam teks tebal.  <CITE>…</CITE> Digunakan untuk menampilkan suatu citation dan menampilkan teks dalam bentuk miring.Web Programming with HTML ICT For XI Grade
    • Logical Formatting  <DFN>…</DFN> Digunakan untuk menandai suatu istilah yang untuk pertama kalinya muncul dalam suatu paragraf. Teks ditampilkan dalam bentuk miring.  <CODE>…</CODE> Digunakan untuk menampilkan suatu contoh kode program secara logikal dan biasanya ditampilkan dalam font fixed pitch atau monospaced.  <SAMP>…</SAMP> Merupakan elemen sampel untuk menyatakan sekumpulan karakter-karakter literal, biasanya ditampilkan dalam font monospaced.Web Programming with HTML ICT For XI Grade
    • Logical Formatting  <KBD>…</KBD> Merupakan elemen keyboard yang menyatakan teks yang diketikan ditampilkan dalam font monospaced. Elemen ini sering digunakan dalam pembuatan buku manual/petunjuk.  <VAR>…</VAR> Untuk menyatakan suatu nama variabel, biasanya dinyatakan dengan bentuk miring.  <ABBR>…</ABBR> Untuk menyatakan bentuk singkatan misalnya www, http, url dan lainnya.  <ACRONYM>…</ACRONYM> Untuk menyatakan bentuk sebuah akronim, misalnya radar, WAC.  <!……..> Teks dalam elemen ini dinyatakan sebagai komentar dan tidak ditampilkan dalam browser.Web Programming with HTML ICT For XI Grade
    • Contoh Logical Formatting <html> <head> <title>Paragraf</title> </head> <body bgcolor=lightgrey> <h1>Pemakaian elemen teks</h1> <pre> <h2> &lt;DFN&gt; untuk menandai suatu <DFN>Definisi</DFN> &lt;EM&gt; untuk menandai suatu <EM>Penekanan</EM> &lt;CITE&gt; untuk menandai suatu <CITE>Citation</CITE> &lt;CODE&gt; untuk menandai suatu <CODE>Kode Program</CODE> &lt;KBD&gt; untuk menandai suatu <KBD>Keyboard</KBD> &lt;SAMP&gt; untuk menandai suatu <SAMP>Contoh</SAMP> &lt;STRONG&gt; untuk menandai suatu <STRONG>Penekanan</STRONG> &lt;VAR&gt; untuk menandai suatu <VAR>Variabel</VAR> &lt;ABBR&gt; untuk menandai suatu <ABBR>Singkatan : www</ABBR> &lt;ACRONYM&gt; untuk menandai suatu <ACRONYM>Akronim : SMAGA</ACRONYM> </h2> </pre></body> </html>Web Programming with HTML ICT For XI Grade
    • Physical Formatting  Adalah suatu jenis format yang diberikan pada teks tanpa tergantung jenis dari elemen dasar teks tersebut.  Elemen yang termasuk kategori ini adalah :  <B>…</B> Untuk menebalkan teks  <I>…</I> Untuk membuat teks tampil miring  <U>…</U> Untuk membuat teks tampil bergaris- bawah  <STRIKE>…</STRIKE> Untuk membuat efek coretan pada teks  <BLINK>…</BLINK> Untuk membuat teks tampil berkedip, hanya ditampilkan pada NetscapeWeb Programming with HTML ICT For XI Grade
    • Physical Formatting  <S>…</S> Berfungsi sama dengan elemen <STRIKE>  <TT>…</TT> Untuk menampilkan teks dalam font typewriter  <BIG>…</BIG> Untuk memperbesar teks  <SMALL>…</SMALL> Untuk memperkecil teks  <SUB>…</SUB> Untuk membuat teks subscript  <SUP>…</SUP> Untuk membuat teks superscriptWeb Programming with HTML ICT For XI Grade
    • Physical Formatting <html> <head> <title>Paragraf</title> </head> <body bgcolor=lightgrey> <h1>Pemakaian elemen teks</h1> <pre> Tag &lt;B&gt; ...&lt;/B&gt; untuk <B>Menebalkan</B> Teks Tag &lt;I&gt; ...&lt;/I&gt; untuk <I>Memiringkan</I> Teks Tag &lt;U&gt; ...&lt;/U&gt; untuk <U>Menggaris bawah</U> Teks Tag &lt;S&gt; ...&lt;/S&gt; untuk <S>Memberi coretan</S> Teks Tag &lt;STRIKE&gt; ...&lt;/STRIKE&gt; untuk <STRIKE>Memberi coretan</STRIKE> Teks Tag &lt;TT&gt; ...&lt;/TT&gt; untuk <TT>Font Typewriter</TT> Teks Tag &lt;Big&gt; ...&lt;/Big&gt; untuk <B>Memperbesar</BIG> Teks Tag &lt;SMALL&gt; ...&lt;/SMALL&gt; untuk <SMALL>Mengecilkan</SMALL> Teks Tag &lt;SUB&gt; ...&lt;/SUB&gt; Untuk subscript teks H<SUB> 2</SUB>0 Tag &lt;SUP&gt; ...&lt;/SUP&gt; Untuk superscript teks E=mc<SUP>2</SUP> </pre> </body></html>Web Programming with HTML ICT For XI Grade
    • FLOATING OBJECT  Gambar dan objek bisa ditampilkan sejajar dengan teks atau menggantung diantara teks  Contoh : <html><head> <title>Floating Objek</title> </head> <body bgcolor=lightgrey> <h3>Floating Objek</h3> <IMG align="right" src="cita.jpg" width="20%"> SMA Negeri 3 Semarang merupakan salah satu rintisan sekolah bertaraf internasional yang berlokasi di Jalan Pemuda nomor 149 Semarang. Tahun ini SMA Negeri 3 Semarang atau yang dikenal dengan SMAGA merayakan ulang tahunnya yang ke-137. <HR><BR>Web Programming with HTML ICT For XI Grade
    • Lanjutan Contoh Floating Object <IMG align="left" src="sekolah.gif" width ="15%"> TIK adalah salah satu mata pelajaran yang mendukung dalam pengembangan dan pembelajaran teknologi dan komunikasi untuk kemanfaatan yang lebih baik. Kurikulum yang digunakan menggunakan KTSP yang sesuai dengan perkembangan teknologi saat ini. Dan dengan memasukkan pendidikan karakter bagi para siswa dan guru diharapkan mampu membangun generasi yang tetap berkarakter, memegang teguh nilai- nilai budaya di tengah kemajuan zaman. </body> </html>Web Programming with HTML ICT For XI Grade
    • Tag Font face  Digunakan untuk mengatur jenis font yang dipakai untuk menampilkan teks pada browser.  Bentuk tag nya : <font face=”tipe_font” size=”ukuran” color=”warna”> … </font>  Untuk ukuran font, nilainya antara 1 sampai 7 untuk ukuran normal.  Tetapi dapat juga ditambahkan dengan tanda + atau - untuk mengatur besar dan kecil ukuran huruf.Web Programming with HTML ICT For XI Grade
    • Contoh Font face <html> <head> <title>Format Teks</title> </head> <body bgcolor=lightgreen text=brown> <h1>Pemakaian Font</h1> <h2> <font face="Times New Roman" size="+2"> Font Times New Roman</font><br> <font face="Arial black" size="-2"> Font Arial Black</font><br> <font face="Aharoni"> Font Aharoni</font><br> <font face="Arial Narrow" size="+3"> Font Arial Narrow</font><br> </h2> </body> </html>Web Programming with HTML ICT For XI Grade
    • Tag Pre  Tag <pre> … </pre>  Digunakan untuk menampilkan teks pada browser seperti apa yang tertulis pada editor html.  Contoh : <html> <head> <title>Contoh tag pre</title> </head> <body bgcolor="lightgreen" text="brown"> <pre> ABCDEF ABCDE ABCD ABC AB A </pre></body> </html>Web Programming with HTML ICT For XI Grade
    • List  Informasi dapat disampaikan dengan mudah jika ditampilkan dengan menggunakan daftar. HTML menyediakan beberapa jenis daftar, yaitu :  Ordered List/Numbered List  Unordered List/Bulleted List  Menu List  Directory List  Definition ListWeb Programming with HTML ICT For XI Grade
    • Ordered List  Adalah suatu daftar dimana item-item yang ada dalam daftar memiliki nomor secara urut. Ordered List dimulai dengan tag awal <OL> dan diakhiri dengan tag </OL>, dan diantara kedua tag tersebut terdapat tag <LI> yang menyatakan list item.  Contoh : <html> <head> <title>Contoh ordered list</title> </head> <body bgcolor="lightgreen" text="brown"> <ol type="1" start="4"> <li>Ubuntu <li>SuSE <li>Fedora Core <li>Mandriva </ol> </body></html>Web Programming with HTML ICT For XI Grade
    • Order List Mengatur Atribut Order List ATRIBUT FUNGSI COMPACT Untuk menyatakan bahwa item dalam daftar pendek, sehingga browser menampilkan dalam bentuk yang lebih padat TYPE = A Membuat daftar berurut dengan huruf besar ( A,B,C,..) TYPE = a Membuat daftar berurut dengan huruf kecil (a,b,c,…) TYPE = I Membuat daftar berurut dengan huruf romawi besar (I,II,III,…) TYPE = i Membuat daftar berurut dengan huruf romawi kecil (i,ii,iii,…) TYPE = 1 Default nilai daftar berurut (1,2,3,…) START = n Menentukan nilai awal dari item dalam daftar, n = adalah nilai awalWeb Programming with HTML ICT For XI Grade
    • Contoh Order List <html><head> <title>Nested Ordered List</title> </head><body bgcolor="lightgreen" text="brown"> <OL> <LH><EM>Computer System and Telecommunication</EM><BR><BR> <LI>Hardware <OL TYPE = A> <LI>Input Device <LI>CPU <LI>Storage Device <LI>Output Device </OL> <LI>Software <OL TYPE = a> <LI>Application <LI>Language Programming <LI>UtilityWeb Programming with HTML ICT For XI Grade
    • Contoh Order List </OL> <LI>Brainware <OL TYPE = I> <LI>Programmer <LI>Administrator <LI>User </OL> <LI>Network <OL TYPE = i> <LI>Wire <LI>Wireless = <OL START = 1> <LI>Satelit <LI>Mobile </OL> </OL></OL></body></html>Web Programming with HTML ICT For XI Grade
    • Unorder List  Adalah daftar dimana urutan item tidak diutamakan. Item-item tampil dalam sembarang urutan. Setiap item dalam Unordered List biasanya ditandai dengan bulatan, kotak atau lingkaran.  Penggunaan Unordered List diawali dengan tag <UL> dan diakhiri dengan tag </UL>, dan didalamnya ditandai dengan tag <LI>.  Tambahan atribut pada tag <UL> : ATRIBUT FUNGSI TYPE = circle Membuat tanda lingkaran O untuk item TYPE = square Membuat tanda kotak □ untuk item TYPE = disc Membuat tanda cakram ● untuk itemWeb Programming with HTML ICT For XI Grade
    • Contoh Unorder List <html><head> <title>Nested Ordered List</title> </head><body bgcolor="lightgreen" text="brown"> <UL> <LH><EM>Computer System and Telecommunication</EM><BR><BR> <LI>Hardware <OL TYPE = square> <LI>Input Device <LI>CPU <LI>Storage Device <LI>Output Device </UL> <LI>Software <UL TYPE = circle> <LI>Application <LI>Language Programming <LI>Utility </UL>Web Programming with HTML ICT For XI Grade
    • Contoh Unorder List <LI>Brainware <UL TYPE = disc> <LI>Programmer <LI>Administrator <LI>User </UL> <LI>Network <UL TYPE = square> <LI>Wire <LI>Wireless = <UL START = 1> <LI>Satelit <LI>Mobile </UL> </UL></UL></body> </html>Web Programming with HTML ICT For XI Grade
    • Menu List  Adalah suatu daftar item yang pendek yang tidak disertai dengan nomor ataupun penanda item. Menu List menggunakan tag awal <MENU> dan tag akhir </MENU>, didalamnya menggunakan tag <LI>. Browser secara otomatis akan mengidentifikasi setiap item yang ada dalam menu list. Menu List biasanya digunakan untuk menampilkan item-item yang mempunyai link ke page lain. Untuk membuat link ini digunakan tag <A> yang akan membuat link ke halaman lain. Penggunaan tag <A> adalah <A HREF “page.html”> link ke halaman page.html </A>.  Contoh :Web Programming with HTML ICT For XI Grade
    • List <html> <head> <title>Menu List</title> </head> <body bgcolor="lightgreen" text="brown"> <MENU> <H1>Daftar Latihan HTML </H1><BR> <LI><A HREF="body.html">Fungsi Dasar Body</A> <LI><A HREF="paragraf.htm">Pengaturan Paragraf</A> <LI><A HREF="hr.htm">Pemberian Garis Bawah</A> <LI><A HREF="div.htm">Pembagian Tampilan</A> <LI><A HREF="address.htm">Contoh Identifikasi </A> <LI><A HREF="logicalformat.htm">Contoh Format Logika</A> <LI><A HREF="fisikformat.htm">Contoh Format Fisik</A> <LI><A HREF="objek.htm">Contoh Penampilan Objek</A> <LI><A HREF="font2.htm">Contoh Penggunaan font</A> </MENU> </body> </html>Web Programming with HTML ICT For XI Grade
    • Directory List  Adalah daftar item yang kurang dari 24 karakter (seperti file direktori UNIX atau DOS yang menggunakan parameter / w). Direktori List menggunakan tag awal <DIR> dan tag akhir </DIR>. Penggunaan tag <LI> juga diperlukan.  Contoh :Web Programming with HTML ICT For XI Grade
    • Contoh Directory List <html> <head> <title>Directory List</title> </head> <body bgcolor="lightgreen" text="brown"> <DIR> <H1>Warna Pelangi : </H1><BR> <LI>Merah <LI>Jingga <LI>Kuning <LI>Hijau <LI>Biru <LI>Nila <LI>Ungu </DIR> </body> </html>Web Programming with HTML ICT For XI Grade
    • Definision List  Adalah suatu jenis daftar khusus yang berbeda jauh dengan daftar-daftar sebelumnya. Definition List digunakan untuk mendefinisikan atau menjelaskan istilah-istilah yang disebut juga Glossary List (daftar istilah).  Definition List dinyatakan dengan tag awal <DL> dan tag akhir <M/DL>. Dalam tag tersebut ada dua bagian, yaitu:  Istilah yang akan didefinisikan, dinyatakan dengan tag tunggal <DT> atau Definition Term  Definisi dari istilah tersebut dinyatakan dengan tag tunggal <DD> atau Definition DataWeb Programming with HTML ICT For XI Grade
    • Tag Definition List  Tag <dl> … </dl> / Definition List  Adalah tag yang memiliki keterangan untuk tiap itemnya. Untuk tiap item pada definition list menggunakan tag <dt> sedangkan untuk keterangan dari tiap item menggunakan tag <dd>  Contoh: <html> <head> <title>Definition ist</title> </head> <body bgcolor="lightgreen" text="brown"> <H3>Istilah dalam Internet </H3>Web Programming with HTML ICT For XI Grade
    • Contoh Definition List <DL> <DT>Hacker <DD>Hacker adalah orang yang mempelajari, mencoba masuk menerobos jaringan sistem komputer dengan tujuan untuk keuntungan atau karena menjawab tantangan. <DT>Download <DD>Download merupakan kegiatan mengambil atau mengunduh file dari jaringan internet ke unit penyimpanan lokal komputer kita misalnya mengambil gambar dari jarringan internet ke harddisk lokal. <DT>Surfing <DD>Surfing adalah kegiatan menjelajahi dunia internet. </DL> </body> </html>Web Programming with HTML ICT For XI Grade
    • Tag IMG Tag ini digunakan untuk menampilkan gambar pada browser sehingga dapat menambah keindahan dari halaman web. Tag <img> memiliki atribut seperti berikut ini : ATRIBUT KETERANGAN Align Menetukan posisi gambar (left,right,center) Width Menentukan ukuran lebar dari gambar Height Menentukan ukuran tinggi dari gambar Alt Menampilkan teks jika gambar tidak muncul / tampil Src Menunjukkan file gambarWeb Programming with HTML ICT For XI Grade
    • Contoh IMG <html> <head> <title>Contoh gambar</title> </head> <body> <img src="sekolah.gif" alt="visualisasi sekolah" width="30%"> </body> </html>Web Programming with HTML ICT For XI Grade
    • TABLE  Ada kalanya dalam pembuatan web, informasi yang ditampilkan dalam bentuk tabel. Dan dengan menggunakan tabel, penyajian informasi akan jauh lebih mengena dan mudah.  Tag untuk membuat tabel terdiri dari :  <table> … </table> Merupakan tag pembuka / utama pendefinisian tabel  <tr> … </tr> Merupakan tag pembuat baris  <td> … </td> Merupakan tag pembuat kolom  <th> … </th> Merupakan tag pembuat judul kolom  <caption> … </caption> Merupakan tag pembuat judul tabelWeb Programming with HTML ICT For XI Grade
    • Atribut Tag Table Tag <table> memiliki atribut : ATRIBUT KETERANGAN Align Meratakan tabel secara mendatar, nilai dari atribut ini : Left, Right, Center. Secara default, perataan dari tabel adalah Left Bgcolor Memberikan warna background pada tabel Background Memberikan gambar latar belakan pada tabel Border Menunjukan lebarnya batas dalam satuan pixel Bordercolor Menentukan warna bingkai dari tabel Cellpadding Menentukan luas yang tak terlihat diantara isi sel dan aktual dinding sel dalam satuan pixel Cellspacing Menentukan luas yang aktual diantara dua sel dalam satuan pixel Width Menentukan lebar keseluruhan tabel dalam satuan pixel Heigth Menentukan tinggi keseluruhan tabel dalam satuan pixelWeb Programming with HTML ICT For XI Grade
    • TR Tag TR mempunyai atribut: ATRIBUT KETERANGAN Align Meratakan isi baris / row secara mendatar, nilai dari atribut ini : Left, Right, Center. Secara default, perataan dari tabel adalah Left Bgcolor Memberikan warna background dari baris Valign Meratakan secara vertikal isi dari baris, nilai dari atribut ini : Top, Middle, Bottom.Web Programming with HTML ICT For XI Grade
    • TD Tag TD mempunyai atribut: ATRIBUT KETERANGAN Align Meratakan isi sel secara mendatar, nilai dari atribut ini : Left, Center, Right. Nilai default dari atribut ini adalah Left Valign Meratakan isi sel secara vertikal, nilai dari atribut ini : Top, Middle, Bottom. Nilai default dari atribut ini adalah Middle Bgcolor Memberikan warna background pada sel Background Memberikan gambar latar belakan pada sel Colspan Menentukan jumlah kolom yang digabung Rowspan Menentukan jumlah baris yang digabung Nowrap Menentukan teks agar tetap satu baris Border Menentukan tebal bingkai sel Bordercolor Menentukan warna bingkai sel Width Menentukan lebar sel dalam satuan pixel Heigth Menentukan tinggi sel dalam satuan pixelWeb Programming with HTML ICT For XI Grade
    • Contoh Table <html> <head><title>Tag Tabel</title></head> <body> <table align="center" border="1"> <caption>Contoh Tabel</caption> <tr> <th align="right">Judul 1</th> <th align="left">Judul 2</th> <th>Judul 3</th> </tr> <tr>Web Programming with HTML ICT For XI Grade
    • Contoh Table <td width="300" height="50" align="center">isi 1</td> <td width="300" height="50" align="right">isi 2</td> <td width="300" height="50">isi 3</td> </tr> <tr> <td width="300" height="50" valign="top">isi 4</td> <td width="300" height="50" valign="bottom">isi 5</td> <td width="300" height="50" >isi 6</td> </tr> <tr> <td>isi 7</td> <td colspan="2">isi 8</td> </tr> <tr>Web Programming with HTML ICT For XI Grade
    • Contoh Table <td rowspan="2">isi 9</td> <td>isi 10</td> <td>isi 11</td> </tr> <tr> <td>isi 12</td> <td>isi 13</td> </tr> </table> </body> </html>Web Programming with HTML ICT For XI Grade
    • Link  Untuk menghubungkan sebuah halaman web dengan halaman yang lain, dimana tag ini merupakan kemampuan yang demikian besar dari web, digunakan tag <a> atau anchor. Bentuk dari tag <a> ini adalah :  <a href=”url”> … </a>  Atribut href digunakan untuk menghubungkan sebuah halaman web ke halaman yang lain. Atau sebagai link antar dokumen web  <a name=”bookmark”> … </a>  Atribut name digunakan untuk menghubungkan bagian halaman web ke bagian lainnya yang masih berada dalam 1 halaman web.  Contoh :Web Programming with HTML ICT For XI Grade
    • Contoh Link <html> <head><title>contoh link / anchor</title></head> <body> <h3>Contoh Link dan Name</h3> <a href="paragraf.htm">Contoh tag paragraf</a> <br> <h4>Bab 1</h4> Ini bab 1, isinya pengantar<br> latar belakang masalah, perumusan masalah<br> batasan masalah, sistematika penulisan<br> <a href="#bab4">ke bab 4</a>Web Programming with HTML ICT For XI Grade
    • Contoh Link <h4>Bab 2</h4> Ini bab 2, isinya dasar-dasar<br> teori yang digunakan untuk meneliti<br> <h4>Bab 3</h3> Ini bab 3, isinya pengantar obyek<br> penelitian jika konsentrasi pembuatan adalah<br> perancangan sistem<br> Jika konsentrasi pembuatan<br> adalah pembuatan software, isinya adalah<br> analisa kebutuhan user<br> <a name=bab4><h4>Bab 4</h4></a> Ini bab 4, isinya adalah perancangan sistem baru<br> </body> </html>Web Programming with HTML ICT For XI Grade
    • Frame  Frame merupakan fasilitas tambahan untuk html yang memungkinkan dalam satu browser menampilkan beberapa halaman web sekaligus. Tag untuk membuat frame terdiri dari :  <frameset> … </frameset>  Merupakan tag awal pembentukan frame  <frame> … </frame>  Merupakan tag untuk mengisi frameWeb Programming with HTML ICT For XI Grade
    • Frameset Tag <frameset> memiliki atribut : ATRIBUT KETERANGAN Cols Untuk membagi bidang menjadi beberapa kolom, satuannya dapat berupa persen (%), pixel dan * Rows Untuk membagi bidang menjadi beberapa baris, satuannya dapat berupa persen (%), pixel dan * Border Untuk menentukan tebal batas antar frame Bordercol Untuk menentukan warna pembatas antar or frame Framebor Untuk mengatur muncul atau tidaknya der pembatas antar frame dengan nilai atribut : yes atau noWeb Programming with HTML ICT For XI Grade
    • Frame Tag Frame mempunyai atribut: ATRIBUT KETERANGAN Name Untuk memberikan nama frame Src Merupakan url yang akan digunakan untuk menampilkan halaman web / gambar pada frame Marginwidth Menentukan lebar margin pada frame Marginheigth Menentukan tinggi margin pada frame Scrolling Menentukan ada atau tidaknya scroll bar pada frame, nilai atributnya : yes Bordercolor Menentukan warna pada border frame Noresize Berfungsi agar border pada frame tidak dapat berubah-ubah Framespacing Menetukan jarak antar sel frame Frameborder Menentukan muncul atau tidaknya pembatas antar frame dengan nilai atribut yes atau no.Web Programming with HTML ICT For XI Grade
    • Contoh Frame <frameset cols="40%,60%"> <frame src="cth15.htm" name="kiri"> <frame src="cth14.htm" name="kanan" </frameset>Web Programming with HTML ICT For XI Grade
    • Latihan Praktik Buatlah halaman web personal yang menampilkan tentang bio data diri dengan komposisi sebagai berikut: 1. Halaman utama berupa perkenalan 2. Halaman kedua berisi hoby dan kegiatan sehari-hari 3. Halaman ketiga berisi kontak dan informasiWeb Programming with HTML ICT For XI Grade
    • ICT For XI Grade