~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SAYA MENDENGAR LALU SAYA LUPA ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SAYA MEMBACA LALU SAYA INGAT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SAYA MELAKUKAN LALU SAYA MENGERTI~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Ads 468x60px

Featured Posts

11 April 2015

Lesson 4: Fonts in CSS


In this lesson you will learn about fonts and how they are applied using CSS. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be described:
  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font

Font family [font-family]

The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found.

There are two types of names used to categorize fonts: family-names and generic families. The two terms are explained below.
Family-name
Examples of a family-name (often known as "font") can e.g. be "Arial", "Times New Roman" or "Tahoma".
Generic family
Generic families can best be described as groups of family-names with uniformed appearances. An example is sans-serif, which is a collection of fonts without "feet".
The difference can also be illustrated like this :


When you list fonts for your web site, you naturally start with the most preferred font followed by some alternative fonts. It is recommended to complete the list with a generic font family. That way at least the page will be shown using a font of the same family if none of the specified fonts are available.

An example of a prioritized list of fonts could look like this:
 
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

Headlines marked with <h1> will be displayed using the font "Arial". If this font is not installed on the user's computer, "Verdana" will be used instead. If both these fonts are unavailable, a font from the sans-serif family will be used to show the headlines. 

Notice how the font name "Times New Roman" contains spaces and therefore is listed using quotation marks.


Font style [font-style]

The property font-style defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h2> will be shown in italics.

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;} 
 

Font variant [font-variant]

The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.

Confused ? Take a look at these examples :


If font-variant is set to small-caps and no small-caps font is available the browser will most likely show the text in uppercase instead.

h1 {font-variant: small-caps;}
h2 {font-variant: normal;} 
 
 
Font weight [font-weight]

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font.

p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;
 

Font size [font-size]

The size of a font is set by the property font-size.

There are many different units (e.g. pixels and percentages) to choose from to describe font sizes. In this tutorial we will focus on the most common and appropriate units. Examples include:
 
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

There is one key difference between the four units above. The units 'px' and 'pt' make the font size absolute, while '%' and 'em' allow the user to adjust the font size as he/she see fit. Many users are disabled, elderly or simply suffer from poor vision or a monitor of bad quality. To make your website accessible for everybody, you should use adjustable units such as '%' or 'em'.

Below you can see an illustration of how to adjust the text size in Mozilla Firefox and Internet Explorer. Try it yourself - neat feature, don't you think?

Compiling [font]

Using the font short hand property it is possible to cover all the different font properties in one single property.

For example, imagine these four lines of code used to describe font-properties for <p>:
 
p {
	font-style: italic;
	font-weight: bold;
	font-size: 30px;
	font-family: arial, sans-serif;
}

Using the short hand property, the code can be simplified:
 
p {
	font: italic bold 30px arial, sans-serif;
}

The order of values for font is:
font-style | font-variant | font-weight | font-size | font-family


by herman @smkn3buduransda


 

9 April 2015

Lesson 3: Colors and backgrounds in CSS

In this lesson you will learn how to apply colors and background colors to your websites. We will also look at advanced methods to position and control background images. The following CSS properties will be explained:
  • color
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background

Foreground color: the 'color' property

The color property describes the foreground color of an element.

For example, imagine that we want all headlines in a document to be dark red. The headlines are all marked with the HTML element <h1>. The code below sets the color of <h1> elements to red.


h1 {
 color: #ff0000;
}

Colors can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colors ("red") or rgb-values (rgb(255,0,0)).


The 'background-color' property

The background-color property describes the background color of elements.

The element <body> contains all the content of an HTML document. Thus, to change the background color of an entire page, the background-color property should be applied to the <body> element. 

You can also apply background colors to other elements including headlines and text. In the example below, different background colors are applied to <body> and <h1> elements.


body {
 background-color: #FFCC66;
}

h1 {
 color: #990000;
 background-color: #FC9804;
}

Notice that we applied two properties to <h1> by dividing them by a semicolon.


Background images [background-image]

The CSS property background-image is used to insert a background image.

As an example of a background image, we use the butterfly below. You can download the image so you can use it on your own computer (right click the image and choose "save image as"), or you can use another image as you see fit.



To insert the image of the butterfly as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.


body {
 background-color: #FFCC66;
 background-image: url("butterfly.gif");
}

h1 {
 color: #990000;
 background-color: #FC9804;
}

NB: Notice how we specified the location of the image as url("butterfly.gif"). This means that the image is located in the same folder as the style sheet. You can also refer to images in other folders using url("../images/butterfly.gif").


Repeat background image [background-repeat]

In the example above, did you notice that by default the butterfly was repeated both horizontally and vertically to cover the entire screen? The property background-repeat controls this behaviour.

The table below outlines the four different values for background-repeat.

ValueDescription
background-repeat: repeat-xThe image is repeated horizontally
background-repeat: repeat-yThe image is repeated vertically
background-repeat: repeatThe image is repeated both horizontally and vertically
background-repeat: no-repeatThe image is not repeated

For example, to avoid repetition of a background image the code should look like this:


body {
 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
}

h1 {
 color: #990000;
 background-color: #FC9804;
}
 
 
Lock background image [background-attachment]

The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.

A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page.

The table below outlines the two different values for background-attachment. Click on the examples to see the difference between scroll and fixed.

Value
Description

Background-attachment: scrollThe image scrolls with the page - unlocked
Background-attachment: fixedThe image is locked

For example, the code below will fix the background image.

 
body {
 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
}

h1 {
 color: #990000;
 background-color: #FC9804;
}
 
 
Place background image [background-position]

By default, a background image will be positioned in the top left corner of the screen. The property background-position allows you to change this default and position the background image anywhere you like on the screen.

There are numerous ways to set the values of background-position. However, all of them are formatted as a set of coordinates. For example, the value '100px 200px' positions the background image 100px from the left side and 200px from the top of the browser window.

The coordinates can be indicated as percentages of the browser window, fixed units (pixels, centimetres, etc.) or you can use the words top, bottom, center, left and right. The model below illustrates the system:



The table below gives some examples.

Value
Description

background-position: 2cm 2cmThe image is positioned 2 cm from the left and 2 cm down the page
background-position: 50% 25%The image is centrally positioned and one fourth down the page
background-position: top rightThe image is positioned in the top-right corner of the page

The code example below positions the background image in the bottom right corner:


body {
 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
}

h1 {
 color: #990000;
 background-color: #FC9804;
}
 
 
Compiling [background]

The property background is a short hand for all the background properties listed in this lesson.

With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read. 

For example, look at these five lines:

 
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

Using background the same result can be achieved in just one line of code:

 
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

The list of order is as follows:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

If a property is left out, it will automatically be set to its default value. For example, if background-attachment and background-position are taken out of the example:

 
background: #FFCC66 url("butterfly.gif") no-repeat;
 
These two properties that are not specified would merely be set to their default values which as you know are scroll and top left.


by herman @smkn3buduransda



8 April 2015

Lesson 2: How does CSS work?

 
In this lesson you will learn how to make your first style sheet. You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document.

Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes. Let us look at a concrete example.


The basic CSS syntax

Let's say we want a nice red color as the background of a webpage :

Using HTML we could have done it like this :

<body bgcolor="#FF0000">

With CSS the same result can be achieved like this :
 
body {background-color: #FF0000;}

As you will note, the codes are more or less identical for HTML and CSS. The above example also shows you the fundamental CSS model:
 


But where do you put the CSS code? This is exactly what we will go over now.

Applying CSS to an HTML document

There are three ways you can apply CSS to an HTML document. These methods are all outlined below. We recommend that you focus on the third method i.e. external.

Method 1: In-line (the attribute style)

One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the red background color, it can be applied like this:

<html>
  <head>
    <title>Example</title>
  </head>
  <body style="background-color: #FF0000;">
    <p>This is a red page</p>
  </body>
</html>


Method 2: Internal (the tag style)

Another way is to include the CSS codes using the HTML tag <style>. For example like this:

<html>
  <head>
    <title>Example</title>
    <style type="text/css">
      body {background-color: #FF0000;}
    </style>
  </head>
  <body>
    <p>This is a red page</p>
  </body>
</html>


Method 3: External (link to a style sheet)

The recommended method is to link to a so-called external style sheet. Throughout this tutorial we will use this method in all our examples.

An external style sheet is simply a text file with the extension .css. Like any other file, you can place the style sheet on your web server or hard disk.

For example, let's say that your style sheet is named style.css and is located in a folder named style. The situation can be illustrated like this :
 
 
The trick is to create a link from the HTML document (default.htm) to the style sheet (style.css). Such link can be created with one line of HTML code:

<link rel="stylesheet" type="text/css" href="style/style.css" />

Notice how the path to our style sheet is indicated using the attribute href.

The line of code must be inserted in the header section of the HTML code i.e. between the <head> and </head> tags. Like this:

<html>
  <head>
    <title>My document</title>
    <link rel="stylesheet" type="text/css" href="style/style.css" />
  </head>
  <body>
  ...


This link tells the browser that it should use the layout from the CSS file when displaying the HTML file.

The really smart thing is that several HTML documents can be linked to the same style sheet. In other words, one CSS file can be used to control the layout of many HTML documents. 
 
 
This technique can save you a lot of work. If you, for example, would like to change the background color of a website with 100 pages, a style sheet can save you from having to manually change all 100 HTML documents. Using CSS, the change can be made in a few seconds just by changing one code in the central style sheet.

Let's put what we just learned into practice.


Try it yourself

Open Notepad (or whatever text editor you use) and create two files - an HTML file and a CSS file - with the following contents :
 
default.htm

<html>
  <head>
    <title>My document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>My first stylesheet</h1>
  </body>
</html>


style.css

body {
  background-color: #FF0000;
}


Now place the two files in the same folder. Remember to save the files with the right extensions (respectively ".htm" and ".css")

Open default.htm with your browser and see how the page has a red background. Congratulations! You have made your first style sheet!


by herman @smkn3buduransda





7 April 2015

Lesson 1: What is CSS ?


Maybe you already heard about CSS without really knowing what it is. In this lesson you will learn more about what CSS is and what it can do for you.
CSS is an acronym for Cascading Style Sheets.


What can I do with CSS?

CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see! 

HTML can be (mis)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today.

After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your website a new great look.


What is the difference between CSS and HTML?

HTML is used to structure content. CSS is used for formatting structured content.

Okay, it sounds a bit technical and confusing. But please continue reading. It will all make sense to you soon.

Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web, the language HTML was only used to add structure to text. An author could mark his text by stating "this is a headline" or "this is a paragraph" using HTML tags such as <h1> and <p>.

As the Web gained popularity, designers started looking for possibilities to add layout to online documents. To meet this demand, the browser producers (at that time Netscape and Microsoft) invented new HTML tags such as for example <font> which differed from the original HTML tags by defining layout - and not structure.

This also led to a situation where original structure tags such as <table> were increasingly being misused to layout pages instead of adding structure to text. Many new layout tags such as <blink> were only supported by one type of browser. "You need browser X to view this page" became a common disclaimer on web sites. 

CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers. At the same time, separation of the presentation style of documents from the content of documents, makes site maintenance a lot easier.


by herman @smkn3buduransda




6 April 2015

Pelajaran 09 : Membuat Link Pada HTML


Untuk pembuatan link halaman web paling sedikit dibutuhkan 2 atau lebih file html, sehingga nantinya antara satu halaman dengan halaman yang lain dapat di link_kan. Tag untuk link yaitu <A HREF = "file.html"> text atau image </A>

Untuk dapat mengaplikasikan penggunaan link antara satu halaman web dengan halaman yang lain, dapat dilakukan membuat 3 buah file HTML seperti berikut:

Script file berikut simpan dengan nama file "koran-01.html"
 
<html>
<head><title>koran 01</title></head>
<body>
<H4>Putri Masako STRES</H4>
Masuk menjadi anggota keluarga kekaisaran terkadang
harus berhadapan dengan berbagai macam aturan protokoler
kekaisaran yang mengkekang. Terlebih lagi kini Putri 
Masako yang kini hidup terikat dalam Istana.

<br><br><br>

- <a href="koran-01.html"> Putri Masako </a> -
- <a href="koran-02.html"> Bedah Plastik </a> -
- <a href="koran-03.html"> Siswi Kesurupan </a> -

</body>
</html>

Script file berikut simpan dengan nama file "koran-02.html"
 
<html>
<head><title>koran 02</title></head>
<body>
<H4>Bedah Plastik</H4>
Mantan bintang serial televisi CHARLI ANGELS ini lama 
menatik perhatian. Nama Farrah menjadi topik buah bibir di 
kota dimana ia bermukim, New York. Semua itu tak lain karena 
Wajah Baru Farrah di usia 57 Farrah berhasil menyulap 
penampilannya menjadi jaulh lebih muda. Ia tercatat sebagai 
salah satu dari banyak artis bedah plastik.

<br><br><br>

- <a href="koran-01.html"> Putri Masako </a> -
- <a href="koran-02.html"> Bedah Plastik </a> -
- <a href="koran-03.html"> Siswi Kesurupan </a> -

</body>
</html>

Script file berikut simpan dengan nama file "koran-03.html"
 
<html>
<head><title>koran 03</title></head>
<body>
<H4>Siswi Kesurupan</H4>
Pagi itu, siswa siswi SMK Putra Pangandaran kabupaten 
Ciamis Barat bersip mengikuti apel pagi. Seperti biasa, 
sebelum dimulai para pelajar itu membuat baarisan. 
Namun semangat dan keceriaan mereka koyak oleh suatu kejadian 
metafisika. Dalam waktu hampir bersamaan 23 siswi sekolah 
itu kesurupan secara berantai Kesurupan Massal.

<br><br><br>

- <a href="koran-01.html"> Putri Masako </a> -
- <a href="koran-02.html"> Bedah Plastik </a> -
- <a href="koran-03.html"> Siswi Kesurupan </a> -

</body>
</html>


by herman @smkn3buduransda




5 April 2015

Pelajaran 08 : Membuat Frame Pada HTML


Untuk membuat frame tag yang digunakan <FRAMESET>. Ada tiga pengaturan frame, yaitu secara VERTIKAL dengan tag <FRAMESET COLS="FilePertama% , FileKedua%">, HORISONTAL dengan tag <FRAMESET ROWS="FilePertama% , FileKedua%">, dan KOMBINASI dari vertikal dan horisontal.

Ikuti penjelasannya sebagai berikut :
  • frame horisontal
  • frame vertikal
  • frame kombinasi
  • Penggunaan IFRAME
Sebelum dapat mengaplikasikan penggunaan frame, perlu membuat terlebih dahulu 3 buah file HTML seperti berikut:

Script file berikut simpan dengan nama file "koran.html"

<html>
<head><title>koran</title></head>
<body>
<H4>Putri Masako STRES</H4>
Masuk menjadi anggota keluarga kekaisaran terkadang
harus berhadapan dengan berbagai macam aturan protokoler
kekaisaran yang mengkekang. Terlebih lagi kini Putri 
Masako yang kini hidup terikat dalam Istana.
</body>
</html>
 
Script file berikut simpan dengan nama file "majalah.html"

<html>
<head><title>majalah</title></head>
<body>
<H4>Ramai-ramai Bedah Plastik</H4>
Mantan bintang serial televisi CHARLI ANGELS ini lama 
menatik perhatian. Nama Farrah menjadi topik buah bibir di 
kota dimana ia bermukim, New York. Semua itu tak lain karena 
Wajah Baru Farrah di usia 57 Farrah berhasil menyulap 
penampilannya menjadi jaulh lebih muda. Ia tercatat sebagai 
salah satu dari banyak artis bedah plastik.
</body>
</html>
 
Script file berikut simpan dengan nama file "tabloid.html"
 
<html>
<head><title>tabloid</title></head>
<body>
<H4>SISWI SEKOLAH KESURUPAN</H4>
Pagi itu, siswa siswi SMK Putra Pangandaran kabupaten 
Ciamis Barat bersip mengikuti apel pagi. Seperti biasa, 
sebelum dimulai para pelajar itu membuat baarisan. 
Namun semangat dan keceriaan mereka koyak oleh suatu kejadian 
metafisika. Dalam waktu hampir bersamaan 23 siswi sekolah 
itu kesurupan secara berantai Kesurupan Massal.
</body>
</html>


1. Frame Horisontal

Tag yang digunakan untuk frame horisontal <FRAMESET ROWS="FilePertama% , FileKedua%">.

Contoh penulisannya:

<html>
<head><title>frame horisontal</title></head>
<FRAMESET ROWS="40%,60%">
 <FRAME SRC="koran.html">
 <FRAME SRC="majalah.html">
</FRAMESET>
</html>
 



2. Frame Vertikal

Tag yang digunakan untuk frame vertikal <FRAMESET COLS="FilePertama% , FileKedua%">.

Contoh penulisannya:
 
<html>
<head><title>frame vertikal</title></head>
<FRAMESET COLS="30%,70%">
 <FRAME SRC="koran.html">
 <FRAME SRC="majalah.html">
</FRAMESET>
</html>





3. Frame Kombinasi

Tag yang digunakan untuk frame kombinasi, merupakan perpaduan dari frame horisontal <FRAMESET COLS="FilePertama% , FileKedua%"> dan frame vertikal <FRAMESET COLS="FilePertama% , FileKedua%">.

Contoh penulisannya:
 
<html>
<head><title>frame kombinasi</title></head>
<FRAMESET COLS="30%,70%">
  <FRAME SRC="koran.html">
  <FRAMESET ROWS="30%,70%">
    <FRAME SRC="majalah.html">
    <FRAME SRC="tabloid.html">
  </FRAMESET>
</FRAMESET>
</html>
 



4. Penggunaan IFRAME

Iframe merupakan frame yang dapat diatur tinggi dan lebarnya. Tag yang digunakan untuk iframe <IFRAME SRC="namafile" WIDTH="...." HEIGHT="...."> dan ditutup dengan </IFRAME>.

Contoh penulisannya:
 
<html>
<head><title>IFRAME</title></head>
<body>
<H4>Ramai-ramai Bedah Plastik</H4>
Mantan bintang serial televisi CHARLI ANGELS ini lama 
menatik perhatian. Nama Farrah menjadi topik buah bibir di 
kota dimana ia bermukim, New York. Semua itu tak lain karena 
Wajah Baru Farrah di usia 57 Farrah berhasil menyulap 
penampilannya menjadi jaulh lebih muda. Ia tercatat sebagai 
salah satu dari banyak artis bedah plastik.<br>
<iframe src="koran.html"  width="200" height="100"> </iframe>
</body>
</html>
 
 
by herman @smkn3buduransda
 
 
 

4 April 2015

Pelajaran 07 : Menyisipkan Gambar (Insert Image) Pada HTML


Dalam pembuatan web agar lebih menarik biasanya disipi dengan gambar (image). File gambar yang disisipkan dalam web perlu dipilih file yang mempunyai byte kecil seperti misalnya file gambar dengan extention GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Groups) agar pada saat web tersebut diload tidak lambat. Untuk menyisipkan gambar digunakan tag <IMG SRC="nama file.gambar">. Untuk mengatur letak gambar dapat menggunakan atribut ALIGN atara lain BOTTOM (bawah), CENTER (tengah), TOP (atas), LEFT (kiri) dan RIGHT (kanan). Sedangkan untuk mengatur besar kecilnya gambar dapat menggunakan atribut WIDTH (lebar) dan HEIGHT (tinggi) yang diikuti dengan angka pembesarannya.
Ikuti penjelasannya sebagai berikut :
  • menyisipkan gambar
  • mengatur lebar gambar
  • mengatur posisi penempatan kiri dan kanan
  • mengatur posisi atas , tengah , bawah
  • border dan title gambar

1. Menyisipkan Gambar

Menyisipkan gambar menggunakan tag <img src="file gambar">. Misalnya menyisipkan gambar berikut.



Contoh penulisannya:

<html>
<head><title>sisip gambar</title></head>
<body>
File gambar yang disisipkan dalam web perlu
dipilih file yang mempunyai byte kecil
seperti misalnya file gambar dengan extention <br>
GIF (Graphics Interchange Format) <IMG SRC="tutwuri.GIF"><br>
JPEG (Joint Photographic Experts Groups) <IMG SRC="garuda.JPG">
</body>
</html>
 



2. Mengatur Lebar Gambar

Mengatur lebar gambar secara horisontal (melebar kanan-kiri) menggunakan tag <img src="file gambar" width="...."> dan secara vertikal (meninggi keatas-bawah) <img src="file gambar" height="....">.

Contoh penulisannya:

<html>
<head><title>mengatur lebar gambar</title></head>
<body>
<IMG SRC="tutwuri.GIF" WIDTH="100" HEIGHT="100">
diatur dengan lebar width="100" height="100" <br>
<IMG SRC="tutwuri.GIF" WIDTH="50" HEIGHT="50">
diatur dengan lebar width="50" height="50"
</body>
</html>
 



3. Mengatur Posisi Penempatan Kiri dan Kanan

Mengatur penempatan gambar diposisi kiri menggunakan tag <img src="file gambar" align="LEFT"> dan posisi kanan menggunakan tag <img src="file gambar" align="RIGHT">.

Contoh penulisannya:

<html>
<head><title>posisi gambar</title></head>
<body>
<IMG SRC="tutwuri.GIF" WIDTH="50" HEIGHT="50" align="LEFT">
<IMG SRC="garuda.JPG" WIDTH="50" HEIGHT="50" align="RIGHT">
gambar sebelah kiri disisipkan dengan menggunakan atribut align=LEFT, 
sehingga gambar ditampilkan disebelah kiri text. 
Sedangkan gambar disebelah kanan menggunakan atribut align=RIGHT, 
sehingga gambar ditampilkan disebelah kanan. 
</body>
</html>
 


4. Mengatur Posisi Atas, Tengah, Bawah

Mengatur penempatan posisi gambar dibawah pada baris menggunakan tag <img src="file gambar" align="BOTTOM"> , posisi gambar ditengah pada baris menggunakan tag <img src="file gambar" align="CENTER"> dan posisi gambar diatas pada baris menggunakan tag <img src="file gambar" align="TOP">.

Contoh penulisannya:

<html>
<head><title>posisi gambar</title></head>
<body>
atribut <IMG SRC="garuda.JPG" align="BOTTOM"> ALIGN=BOTTOM 
<br>
atribut <IMG SRC="garuda.JPG" align="CENTER"> ALIGN=CENTER 
<br>
atribut <IMG SRC="garuda.JPG" align="TOP"> ALIGN=TOP 

</body>
</html>
 



5. Border dan Title Gambar

Membuat border pada gambar menggunakan tag <img src="file gambar" border="....."> dan membuat titel pada gambar menggunakan tag <img src="file gambar" alt="informasi titel">.

Contoh penulisannya:
 
<html>
<head><title>border dan titel</title></head>
<body>
atribut <IMG SRC="garuda.JPG" border="0" alt="gambar garuda"> 
BORDER=0 ALT="gambar garuda" <br><br>
atribut <IMG SRC="garuda.JPG" border="3" alt="garuda juga"> 
BORDER=3 ALT="garuda juga" 
</body>
</html>
 
 
by herman @smkn3buduransda 




3 April 2015

Pelajaran 06 : Tabel Pada HTML


Untuk membuat tabel menggunakan tag <TABLE> dan dengan attribut sebagai berikut.

tagnilaiketerangan
<table> memulai tabel
<tr> membuat baris
<th> membuat kolom header
<td> membuat kolom
border0 sampai 15menampilkan garis dan ketebalannya
alignleft , center , rightmengatur isi kolom secara horisontal
valigntop , middle , bottommengatur isi kolom secara vertikal
rowspanangka bulatmenggabungkan (merge) baris
colspanangka bulatmenggabungkan (merge) kolom
bgcolorkode warnamewarnai tabel atau kolom
backgroundgambar (image)membuat latar belakang tabel atau kolom
cellspacingangka bulatmengatur spasi antar baris dan kolom
cellpaddingangka bulatmengatur spasi dari baris dan kolom

Ikuti penjelasannya sebagai berikut :
  • tabel tanpa border
  • tabel dengan border
  • menggabungkan (merge) baris
  • menggabungkan (merge) kolom
  • mengatur kolom secara horisontal
  • mengatur kolom secara vertikal
  • memberi warna tabel
  • mengatur spasi baris (cellspacing)
  • mengatur jarak ke garis (cellpadding)
  • background dengan gambar

1. Membuat Tabel Tanpa Border

Pembuatan tabel diawali dengan tag <table> dan diakhiri tag </table>. Sedangkan untuk memulai membuat baris dimulai dengan tag <th> untuk baris atas dan selanjutnya menggunakan tag <td>

Contoh penulisannya:

<html>
<head><title>tabel</title></head>
<body>
Tabel tanpa border
<table>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Malang</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
 



2. Membuat Tabel Dengan Border

Pembuatan tabel dengan border menggunakan tag <table border=....> dan diakhiri tag </table>. Ketebalan garis border tergantung dari besarnya angga border.

Contoh penulisannya:

<html>
<head><title>tabel border</title></head>
<body>

Tabel dengan border = 1
<table border="1">
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Malang</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

<br><br>

Tabel dengan border = 5
<table border="5">
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Malang</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

</body>
</html>
 



3. Menggabungkan (merge) Baris

Untuk menggabungkan baris dapat dengan tag <td rowspan=....>.

Contoh penulisannya:

<html>
<head><title>rowspan</title></head>
<body>
mengabungkan baris
<table border=1>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td rowspan=2>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
 



4. Menggabungkan (merge) Kolom

Untuk menggabungkan kolom dapat dengan tag <td colspan=....>.

Contoh penulisannya:

<html>
<head><title>colspan</title></head>
<body>
mengabungkan kolom
<table border=1>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
 



5. Mengatur Kolom Secara Horisontal

Untuk mengatur dalam baris menggunakan tag <tr align=....>, sedangkan untuk setiap kolom dapat menggunakan dengan tag <td align=....>.

Contoh penulisannya:

<html>
<head><title>mengatur horisontal</title></head>
<body>
center pada baris ke 4
<table border="1">
<tr><th>Nomor Induk Siswa</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana Ningrum</td><td>Jl. Jenggolo 1C</td></tr>
<tr><td>1235</td><td>Sudarmanto</td><td>J. Blimbing 12</td></tr>
<tr align=center><td>1236</td><td>Amin</td><td>Kedurus</td></tr>
</table>

<br>

center pada baris ke 4 kolom 1
<table border="1">
<tr><th>Nomor Induk Siswa</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana Ningrum</td><td>Jl. Jenggolo 1C</td></tr>
<tr><td>1235</td><td>Sudarmanto</td><td>J. Blimbing 12</td></tr>
<tr><td align=center>1236</td><td>Amin</td><td>Kedurus</td></tr>
</table>
</body>
</html>
 



6. Mengatur Kolom Secara Vertikal

Untuk mengatur dalam baris menggunakan tag <tr valign=....>, sedangkan untuk setiap kolom dapat menggunakan dengan tag <td valign=....>.

Contoh penulisannya:

<html>
<head><title>mengatur vertikal</title></head>
<body>
menempatkan pada posisi bottom
<table border=1>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td rowspan=2 valign=bottom>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

<br>

menempatkan pada posisi top
<table border=1>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td rowspan=2 valign=top>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
 



7. Memberi Warna Tabel

Untuk memberi warna tabel dapat dengan tag <table bgcolor=....>. Untuk memberi warna pada baris dapat dengan tag <tr bgcolor=....>, sedangkan untuk memberi warna sel dapat dengan tag <td bgcolor=....>.

Contoh penulisannya:

<html>
<head><title>warna</title></head>
<body>
mewarnai tabel
<table border=1 bgcolor=#CCFFFF>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
</table>

<br>

mewarnai baris
<table border=1>
<tr><td colspan=3>data siswa</td></tr>
<tr bgcolor=#CCFFFF><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
</table>

<br>

mewarnai sel
<table border=1>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td  bgcolor=#CCFFFF>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
</table>

</body>
</html>
 



8. Mengatur Spasi Baris (cellspacing)

Untuk mengatur spasi beris dapat dengan tag <table cellspacing=....>.

Contoh penulisannya:

<html>
<head><title>cellspacing</title></head>
<body>
cellspacing = 1
<table border=1 cellspacing=1>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

<br>

cellspacing = 7
<table border=1 cellspacing=7>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
 



9. Mengatur Jarak ke Garis (cellpadding)

Untuk mengatur spasi beris dapat dengan tag <table cellpadding=....>.

Contoh penulisannya:

<html>
<head><title>cellpadding</title></head>
<body>
cellpadding = 1
<table border=1 cellpadding=1>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

<br>

cellpadding = 10
<table border=1 cellpadding=10>
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>
 



10. Background Dengan Gambar

Untuk membuat background dengan gambar dapat dengan tag <table background=....>. Gambar dapat berupa latarbelakang warna atau gambar yang lainnya seperti misalnya gambar berikut :





 

  
Contoh penulisannya:

<html>
<head><title>background</title></head>
<body>
background garuda pada baris
<table border=1 cellpadding=10 >
<tr><td colspan=3 background="garuda.JPG">data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>

<br>

background seluruh tabel
<table border=1 cellpadding=10 background="paper.GIF">
<tr><td colspan=3>data siswa</td></tr>
<tr><th>NIS</th><th>nama</th><th>alamat</th></tr>
<tr><td>1234</td><td>Ana</td><td>Sidoarjo</td></tr>
<tr><td>1235</td><td>Susilo</td><td>Sidoarjo</td></tr>
<tr><td>1236</td><td>Amin</td><td>Surabaya</td></tr>
</table>
</body>
</html>



by herman @smkn3buduransda