HTML 5 - Teks akhir jadi lebih besar

Kalau kita ingin membuat tabel anggaran biaya. Biasanya teks yang akhir ditulis pada baris terakhir akan tampak lebih besar dibandingkan dengan teks lainnya. Wajar saja kalau teks akhir biasanya total atau jumlah anggaran.
Nah bagaimana caranya menebalkan teks pada baris terakhir? Kita bisa menebalkan secara manual menggunakan tag HTML, akan tetapi kalau kit ingin menggunakan css, maka kita bisa menuliskan atau menambahkan kode berikut:

tr:last-child{
    font-weight:bolder;
    font-size:24px;
}

Itu artinya, teks yang ada di table row (baris tabel) terakhir akan dibuat lebih tebal menggunakan font-weight dengan ukuran teks sebesar 24px menggunakan font-size.

Berikut script selengkapnya bisa didownload DISINI

Step by step membuat top-page pada leftbar dengan html dan css

Berikut saya mencoba share lagi tutorial tentang html dan css. Tutorial berikut merupakan request dari mahasiswaku yang ada di Universitas Suryadarma, program studi sistem informasi. Kebetulan mendapat matakuliah HTML dasar. Nah untuk mempermudah mahasiswa untuk belajar kembali, atau untuk mengulang apa yang sudah diajarkan, saya buatkan video rekamannya. Istilah kerennya mungkin video based learning.
Langsung saja lihat video tutorialnya

Link Email dengan Subject

Tutorial kali ini saya akan berbagi tentang HTML dasar, dengan membuat hyperlink dengan format seperti ini:

<a href="mailto:ilmudesain1@gmail.com"&gt

Maka jika link itu diklik, maka MS Outlok keluar dan dibagian To langsung terisi oleh alamat email yang tertera dibagian href diatas. Link diatas biasa disebut dengan istilah email hyperlink dan dibuat untuk memudahkan pengunjung untuk mengirim email tanpa harus mengingat alamat email yang dituju. Kalau teman-teman blogger ingin melengkapi email itu langsung dengan subject, maka teman-teman blogge bisa menuliskan seperti ini:

<a href="mailto:ilmudesain1@gmail.com?subject=Salam Kenal dari Saya Muryan Awaludin"&gt

Jadi, pengunjung tidak perlu menulis alamat email tujuan beserta subject-nya. Subject telah terisi otomatis dengan teks "Slaam Kenal dari Saya Muryan Awaludin" seperti diatas.

HTML 5 - Mendefinisikan Teks di dalam Website

Jika ingin menulis sebuah definisi teks pada sebuah website yang dibuat, maka paling tidak ada tiga buah tag yang harus silibatkan yaitu: ° Tag <dl> yang merupakan singkatan dari definition list, berfungsi sebagai pembuka untuk sebuah definisi. ° Tag <dt> yang merupakan singkatan dati definition term, berfungsi sebagai teks untuk menulis kata yang akan didefinisakan. ° Tag <dd> yang merupakan singkatan dari definition description, berfungsi sebagai tag untuk menulis kata definisanya. contoh script:

<h2> Definisi:</h2>
<dl>
<dt>Muryan Awaludin</dt>
<dd>Tutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3 Tutorial HTML5 dan CSS3 Tutorial HTML5 dan CSS3</dd>
<dt>Muryan Awaludin</dt>
<dd>PTutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3,Tutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3, Tutorial HTML5 dan CSS3</dd>
</dl>

HTML5, Redirect ke Situs yang lain

Terima kasih atas kunjungannya buat sahabat blogger. Kali ini saya akan mulai menulis tentang html5 dan css3 mulai dari dasar. Ada beberapa cara yang dilakukan untuk membuat pengalihan ke situs yang lain, terutama bagi sahabat blogger yang akan menghalihkan website nya dari alamat domain yang lama ke domain yang baru. salah satu caranya yaitu redirect pengunjung secara otomatis ke alamat yang baru hanya dengan menuliskan script html 5 berikut ini:

<meta http-equiv="refersh" content="3; url=http://www.ilmudesaingrafis.blogspot.com"/>

Pada contoh script diatas, setelah 3 detik (lihat untuk atribut "content"). Pengunjung akan dialihkan ke situs yang baru, pada contoh diatas ke situs www.ilmudesaiangrafis.blogspot.com.

Membuat Teks Indent ( Paragraf yang menjorok kedalam )

Dalam pembuatan kalimat biasanya agar lebih rapih kita buatkan paragraf yang menjorokl kedalam. dengan menggunakan kode HTML kita sudah bisa membuat paragraf yang kalimat pertamanya menjorok kedalam secara otomatis. Mudah-mudahan bisa bermanfaat..langsung aja ke TKP >>
1. Tuliskan teks html seperti berikut :

<html>
<head>
<title> table html</title>
</head>
<body>
<p class="MsoNormal" style="text-align: justify; text-indent: 0.5in;">Tulisan semua ada di dalam sini....</p>
</body>
</html>

2. Apabila teks HTML di tulis dengan benar maka hasilnya akan tampak seperti gambar dibawah:


DOWNLOAD
Password : www.ilmudesain.web.id

Form dan Input Element

Tutorial kali ini saya akan berbagi tentang form dan macam-macam Input Element HTML, yang pertama kita harus tahu bagaimana sih kegunaan form. Berikut ini beberapa kegunaan form sebagai berikut :
1. Memperoleh data-data user seperti nama, alamat dan data lainnya untuk mendaftar pada service yang disediakan.
2. Memperoleh informasi pembelian secara online.
3. Memperoleh feedback dari user mengenai website sendiri.
Contoh Element Tag form digunakan untuk membuat form dalam document HTML.
Berikut contoh-contoh HTML Input Element :

<html>
<head>
<title>input element</title>
</head>
<body>
<form>
<input type="button" name="button" value="kirim/submit"><br><br>

<input type="text" name="text" size="30"> <br><br>

<input type="radio" name="sex" value="male"/> Male
<br />
<input type="radio" name="sex" value="female" /> Female
<br>
<br>

Adobe Photoshop:
<input type="checkbox" name="vehicle" value=" Adobe Photoshop " />
<br />
Adobe Flash:
<input type="checkbox" name="vehicle" value="Adobe Flash" />
<br />
Adobe Dreamweaver:
<input type="checkbox" name="vehicle" value="Adobhttp://www.blogger.com/img/blank.gife Dreamweaver" />

</form>
</body>
</html>

Hasil pada Browser :

DOWNLOAD
Password : www.ilmudesain.web.id

Insert Image ke Document

Nah sekarang tutorial kali ini saya akan mengajak temen2 belajar bareng insert atau memasukan ataupun menampilkan gambar kedalam halaman browser, ya udah langsung saja biar ga kelamaan...
Ada banyak format gambar, tapi ada tiga jenis format yang paling sering digunakan :
1. JPEG ( Joint Photographic Expert Image )
2. PNG ( Portable Network Graphics )
3. GIF ( Graphical Interchange Format )

Tag img di gunakan untuk membarikan gambar ke dalam dokument HTML.
Contoh :
1. Contoh insert gambar dengan mengambil link di internet:

<html>
<head>
<title> insert gambar link </title>
</head>
<body>
<img src="http://img442.imageshack.us/img442/3669/muryanawaludin.jpg" width="104" height="142" />
</body>
</html>

Hasilnya :
KLIK DISINI

2. Contoh insert gambar pada komputer offline :
Untuk mengambil gambar di komputer offline, sebelumnya kita harus membuat folder sendiri, kemudian file html dan file gambar dimasukan dalam 1 folder tersebut.

<html>
<head>
<title> insert gambar di komputer </title>
</head>
<body>
<img src="../ilmudesain/hyperlink.jpg" />
</body>
</html>

Keterangn : "..    = mencari lokasi folder
       /ilmudesain   = nama folder
      /hyperlink.jpg"  = nama file gambar

Hasil pada browser :


DOWNLOAD
Password : www.ilmudesain.web.id

Merge Cell (colspan dan rowspan)

Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar. Colspan adalah kependekan dari “column span” yang bisa mengartikan sebagai “berapa kotak kesamping” sedangkan rowspan mengartikan “berapa kotak kebawah”.
Contoh :

<html>
<head>
<title>Colspan dan Rowspan</title>
</head>
<body>
<table bgcolor="#CCCFF" width="65%" border="1" cellpadding="0">
<tr>
<td colspan="3" align="center">Desain 1 ( Muryan Awaludin )</td>
<td colspan="3" align="center">Desain 2 ( Muryan Awaludin )</td>
</tr>
<tr align="center">
<td> Adobe Photohop</td>
<td> Adobe Dreamweaver</td>
<td> Adobe Illustrator</td>
<td> Adobe Flash</td>
<td> Adobe Pagemaker</td>
<td> Adobe InDesign</td>
</tr>
<tr align="center">
<td> Januari</td>
<td> Februari </td>
<td> Maret </td>
<td> April </td>
<td> Mei </td>
<td> Juni </td>
</tr>
<tr align="center">
<td> 9 kali pertemuan</td>
<td> 12 kali pertemuan </td>
<td> 9 kali pertemuan </td>
<td> 9 kali pertemuan </td>
<td> 9 kali pertemuan </td>
<td> 9 kali pertemuan </td>
</tr>
</table>
</body>
</html>

Hasil di browser :

DOWNLOAD TUTORIAL Merge Cell (colspan dan rowspan)
Password Rar: www.ilmudesain.web.id

Tabel HTML

Tag table digunakan untuk membuat tabel dalam document HTML. Sebuah meja dibagi ke dalam baris (dengan tag tr), dan setiap baris data dibagi ke dalam sel (dengan tag td). Surat-surat td singkatan dari "data tabel", yang merupakan isi sel data. Sebuah sel data dapat berisi teks, gambar, daftar, paragraf, form, aturan horisontal, meja, dll.
Contoh :

<html>
<head>
<title> table html</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris 1,Kolom 1</td>
<td> Baris 1,Kolom 2</td>
</tr>
<tr>
<td> Baris 2, Kolom 1</td>
<td> Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>

Hasil tampilan pada browser :

Hyperlink

1. Link Address
Absolut address merupakan full internet address (URL) yang meliputi protokol, network location, path dan nama file.
Contoh : http://profile.net84.net/profile.php

2. Link ke Document Lain
Untuk membuat link ke document lain, kita harus mempunyai minimal 2 halaman link, misalkan saya ada nama halaman1.html dan halaman2.html :
Contoh :
halaman1.html

<html>
<head>
<title> Muryan Awaludin-Halaman 1</title>
</head>
<body>
<center><h1>Creating Link</h1></center>
<br>
<center>h3><<a href="halaman2.html"> Klik disini untuk link ke halaman2</a>></h3></center>
</body>
</html>

halaman2.html

<html>
<head>
<title> Muryan Awaludin-Halaman 2</title>
</head>
<body>
<center><h1>Creating Link</h1></center>
<br>
<center><h3><a href="halaman2.html"> Klik disini untuk link ke halaman1</a></h3></center>
</body>
</html>

Hasilnya :


DOWNLOAD
Password : www.ilmudesain.web.id

Grouping Element

Tag DIV dan SPAN berfungsi untuk mengelompokan element-element HTML. SPAN digunakan untuk mendefinisikan inline content, sementara DIV digunakan untuk blok-level content.
Contoh :

<html>
<head>
<title> DIV dan SPAN</title>
</head>
<body>
<div>
Muryan Awaludin ( HTML DASAR bagian 6 )
<p>
Div tag digunakan untuk mengelompokkan group element. Biasanya untuk block level element.
</p>
<div>
<div align="right">
Muryan Awaludin ( HTML DASAR Bagian 6 - Kanan )
<p>
Tulisan ini ada didalam Muryan Awaludin ( html dasar bagian 6 rata kanan ).
</p>
</div>
<span style="font-size:30; color:red">
Baris ini merupakan didalam span yang mempunyai warna Merah.
</span>
</body>
</html>

Hasilnya :


DOWNLOAD

Performatted Text

Tag PRE berfungsi untuk menampilkan text sesuai dengan format aslinya.
Contoh :

<html>
<body>
<pre>
Ini Adalah
Tutorial tentang preformatted text.
Berbagi ilmu desain grafis dan menjadi media pembelajaran online,
website pendidikan ilmu desain grafis untuk menambah pengetahuanan.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 100
print i
next i
</pre>
</body>
</html>

Hasilnya :

Quotes / Indentasi

Indentasi adalah penulisan paragraf yang agak menjorok masuk ke dalam. Untuk membuat indenatasi paragraph kita bisa menggunakan BLOCKQUOTE dan untuk menggunakan indentasi pendek anda bisa gunakan element Q.
Contoh :

<html>
<head>
<title> Formating Font</title>
</head>
<body>
<font color="green" size="5">
Muryan Awaludin ( HTML DASAR )
</font>
<p> Berbagi ilmu desain grafis dan menjadi media pembelajaran online,website pendidikan ilmu desain grafis untuk menambah pengetahuan.
<blockquote>
Website pendidikan tentang ilmu desain grafis dan tutorial desain grafis baik dari tingkat pemula sampai tingkat lanjut semuanya dapat di download gratis namun tidak merubah atribut penulis dan bukan untuk tujuan komersial.
</blockquote>
Membahas tentang : ilmu desain grafis, desain desain, ilmu grafis, tutorial photoshop, tutorial desain, tutorial, Adobe Photohsop, Adobe PageMaker, Corel Draw,Adobe Flash CS,Tutorial CSS, CSS, Tips Trik desain grafis, ilmu grafis, Illustrator, Microsoft PAINT, e-book gratis, Graphics Design, Dreamweaver, PageMaker, Software, InDesign, Anti Virus, Download Antivirus Smadav, Download Antivirus Artav, free download ebook, facebook ,Les Private Desain grafis,Pesta Blogger, keygen, crack, skripsi, serial number, digital imaging, drawing and painting
</p>
</body>
</html>

Hasilnya :


DOWNLOAD FILE
Password : www.ilmudesain.web.id

Format Halaman Break dan Font

1. Break
Tag break digunakan untuk memulai baris baru pada document HTML, tag ini fungsingya mirip dengan carriage return.
Contoh :

<html>
<head>
<title> Break Line</title>
</head>
<body>
<h2> Muryan Awaludin HTML</h2>
<p>Berbagi ilmu desain grafis dan menjadi media pembelajaran online<br>
website pendidikan ilmu desain grafis untuk menambah pengetahuan<br>
</p>
</body>
</html>

2. Font
Dengan Tag font anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lain sebaginya.
Contoh :

<html>
<head>
<title> Format FONT</title>
</head>
<body>
<font color="blue" size="7"> Muryan Awaludin HTML</font>
<p>
<font face="verdana, arial, Courier, mono">
Berbagi ilmu desain grafis dan menjadi media pembelajaran online,website pendidikan ilmu desain grafis untuk menambah pengetahuan tentang Ilmu Desain Grafis, Tutorial Adobe Photohsop, Tutorial Adobe Illustrator, Tutorial Adobe Flash, Tutorial Adobe Dreamweaver, Tutorial Corel Draw, Tutorial Adobe Page Maker, Tutorial Paint, ebook desain grafis, font dan brush desain, free software desan grafis, Peduli Blogger, Pesta Blogger, Internet Sehat, Crack dan Keygen Software dan lain sebagainyahttp://www.blogger.com/img/blank.gif...
</font>
</p>
</body>
</html>

DOWNLOAD

LI, UL dan OL ( BASE HTML BAG-3)

Tutorial HTML DASAR ( Bagian 3 )
List Item ( LI )
List Item digunakan untuk mengelompokan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list ).
Contoh :
1. Unordered List ( Bullet )

<html>
<head>
<title> Unordered list</title>
</head>
<body>
<p>Muryan Awaludin</p>
<ul>
<li>Adobe Photoshop</li>
<li>Adobe Illustrator</li>
<li>Adobe Flash</li>
<li>Adobe Dreamweaver</li>
<li>Adobe InDesign</li>
<li>Adobe Page Maker</li>
</ul>
</body>
</html>

Maka akan tampak pada browser :


2. Ordered List ( Numbering )

<html>
<head>
<title> Ordered List</title>
</head>
<body>
<p>Muryan Awaludin</p>
<ol>
<li>Tutorial Corel Draw</li>
<li>Tutorial CSS</li>
<li>Free ebook desain</li>
<li>Free Software desain</li>
<li>Free FONT design</li>
<li>Free Brush desing</li>
</0l>
</body>
</html>

Maka akan tampak pada browser :


DOWNLOAD TUTORIAL LI, UL dan OL ( BASE HTML BAG-3)

Struktur HTML Document

Tutorial kali ini adalah lanjutan dari Tutorial HTML Dasar (Bag 1). Selanjtnya Struktur HTML Document adalah Tutorial HTML Dasar bagian ke-2. Dokument HTML dibagi menjadi 3 bagian :
1. HTML
Setiap document HTML harus diawali dan ditutup dengan tag HTML
contoh :

<html> </html>

Tag HTML diatas tersebut adalah tampilan document HTML

2. HEAD
Pada bagian header ditulis dengan tag sebagai berikut :

<head></head>

Header juga memuat tag META yang bisanya digunakan untuk menentukan informasi mengenai document HTML, kamu bisa menentukan author name, keyword, distribution, googlebot, msnbot, MSSmartTagsPreventParsing, generator, rating, robots, creator, copyright, google-site-verification dan lainnya pada tag META.
Contoh :

<META name="Author" contents="Ilmu Desain Grafis">

Author dari document tersebut adalah "Ilmu Desain Grafis"
Atribut http-equiv dapat digunakan untuk meletakkan nama HTTP Server untuk menciptakan HTTP header
contoh :

<META http-equiv="Expires" content="Wed, 1 July 2011 10:03 GMT">

yang akan menampilkan HTTP header :
Expires:Wed,1 July 2011 10:03 GMT
Sehingga jika document di cached, HTTP akan mengetahui kapan untuk mengupdate document tersebut pada cache.

3. BODY
Document body digunakan untuk menampilkan teks, image, link, dan semua yang akan ditampilkan pada halaman web

<html>
<head>
<title> Muryan Awaludin</title>
</head>
<body bgcolor="blue">
<p> Tampilan document HTML </p>
</body>
</html>

Tutorial HTML Dasar (Bag 1)

Untuk memulai bekerja dengan TAG HTML kamu bisa gunakan editor NotePad, NotePad ++, Dreamweaver atau editor lainnya....caranya sebagai berikut :




1. Ketikan tag berikut di notepad

<html>
<title>www.ilmudesain.web.id</title>
<body>
<h1> Latihan HTML Dasar </ h1>
<p> Paragraf Pertama Saya </ p>
</ body>
</ html>

2. Simpan dengan membuat folder baru misalnya html dasar dan nama file index.html ( untuk nama file bisa bebas tapi type nya harus “.html” )


3. Buka dengan browser internet explorer file atau firefox file ( tergantung browser yang ada di komputer Anda ), maka hasilnya akan tampil seperti pada gambar dibawah ini :