Tugas Pengantar Komputer
1. Pengantar HTML
HTML (Hypertext Markup Language) adalah istilah dari internet. Ini adalah media untuk desainer web pada dasarnya menjelaskan kepada web browser bagaimana untuk menyajikan informasi bagi pengguna internet. Menurut dictionary.com, satu definisi untuk desain adalah: untuk berniat untuk tujuan tertentu. Apakah anda pernah frustrasi oleh penampilan artikel Anda ketika Anda mengirimkannya ke direktori artikel? Apakah Anda merasa kehilangan karena Anda mencoba mencari cara untuk memformat teks Anda sehingga artikel Anda lebih mudah dibaca?
Hal pertama yang perlu anda pahami adalah "Apa adalah email teks biasa?" dan "Apa itu HTML email?" email HTML adalah sebuah email yang diformat seperti halaman web, menggunakan warna, grafik, kolom tabel dan link. Perintah form utama dalam HTML adalah tag bentuk. Tag ini adalah di mana Anda menetapkan nama bentuk, bagaimana bentuk itu sendiri akan berperilaku dan bentuk apa yang akan dilakukan setelah proses informasi. Sebuah artikel HTML meliputi isi dan tag yang memberikan informasi ke browser tentang bagaimana untuk menulis artikel. Salah satu sifat utama dari HTML adalah teks hyperlink yang memungkinkan penulis HTML untuk menjelaskan halaman untuk menghubungkan atau melompat ke halaman lain. World WideWeb telah menjadi suatu kekuatan yang harus diperhitungkan dengan kebanyakan universitas sekarang akhirnya melakukan pengajaran secara online. Cyberspace telah pada waktunya warga menawarkan cara yang bagus untuk belajar tentang praktis apa saja dan segalanya. Bentuk umum dari tampilan pop-up HTML jendela pop-up. Jenis layar pop-up yang mudah untuk menciptakan, Anda hanya perlu memiliki pengetahuan tentang HTML untuk bisa membuat satu. Tidak ada keraguan bahwa peta situs HTML sangat penting untuk website Anda. Itu membuat website andasangat ramah bagi bots dan manusia. Ini adalah tampilan yang sangat acuh tak acuh pada kode HTML situs web, bagi mereka yang tidak pernah melakukan segala macam Ilmu Komputer di sekolah dan tidak pernah memiliki kebutuhan atau kesempatan untuk melihat 'di bawah rok' website rata-rata. HTML pembuatan form digunakan untuk keamanan tambahan dan untuk meningkatkan interaksi dengan pengunjung. Ada beberapa manfaat pembuatan form dan itu adalah cara sempurna untuk melepaskan potensi. Apakah itu adalah sebuah blog pribadi atau website bisnis yang Anda miliki, belajar tentang dasar-dasar istilah-istilah ini akan membantu dalam pertumbuhan dan memaksimalkan potensi penghasilan. Hypertext Markup Language umumnya disimpan dalam format teks dan secara khusus diciptakan untuk dilihat dan diedit pada sistem operasi apapun komputer 'yang mampu menghubungkan ke internet. HTML terdiri dari tag dan tag set, satu set yang dua tag yang berkaitan: tag awal dan tag akhir. HTML adalah agak seperti manusia, kepala lebih dulu, maka tubuh. Ketika datang ke pemrograman komputer, kode menjadi sangat bagian penting. Bahkan, semua program komputer akan datang dengan kode masing-masing. Daftar tag html menyediakan fondasi untuk desain halaman web. Memberikan fleksibilitas yang lebih dengan desain HTML, atribut yang telah didefinisikan untuk HTML tag untuk mengubah perilaku dari setiap tag HTML tertentu. HTML Validasi Service di validator.w3.org. W3C adalah badan standar yang menawarkan spesifikasi dan pedoman untuk meningkatkan aksesibilitas situs web dan menentukan spesifikasi standar HTML.
2. Contoh HTML
Heading
Heading digunakan untuk penulisan huruf besar atau pemberian nama bab. Heading memiliki enam level mulai dari yang terbesar sampai yang terkecil yaitu tag <h1> sampai tag <h6>. Contoh Sebagai berikut :
<html>
<head><title> Contoh Heading</title></head>
<body >
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<h6>Ini adalah heading 6</h6>
</body>
</html>
Posisi heading dapat diletakkan di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag heading yang diinginkan.
Paragraf
Untuk membuat paragraph dalam web, HTML menyediakan Tag <p> sebagai tag pembuka dan tag </p> sebagai tag penutup. Paragraph dapat diletakkan di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag <p> yang diinginkan Berikut ini contoh pembuatan paragraph.
<html>
<head> <title>Penggunaan Paragraf</title> </head>
<body>
<p>Paragraf ini mengandung spasi dan baris tetapi browser mengabaikannya.</p>
<p align=”center”>
Sedangkan yang ini memiliki spasi panjang.
Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser Anda.
</p>
</body>
</html>
Line Break
Untuk membuat satu baris baru di halaman web maka HTML menyediakan tag <br>. Berikut ini contoh pembuatan baris baru atau line break:
<html>
<head> <title>Penggunaan Line Break</title> </head>
<body>
<p align=”center”>
Ini adalah baris pertama, dan <br/> Ini Baris kedua <br/> Kemudian ini baris ke Tiga
</p>
</body>
</html>
Horisontal Dan Komentar Tersembunyi
Tag <hr> digunakan untuk membuat garis horisontal menggunakan sepanjang yang nilai lebar yang diberikan pada tag tersebut. Tag <hr> dapat berada di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag <hr> yang di inginkan. Tag <hr> dapat ditentukan tinggi garisnya dengan atribut SIZE dan dapat dihilangkan bayangan garisnya dengan penggunaan atribut NOSHADE.
berikut ini contoh membuat garis horizontal tanpa bayangan, tinggi = 2 dengan
lebar separuh atau 50% pada layar web browser.
<html>
<head> <title>Penggunaan Horisontal Line</title> </head>
<body>
<hr color=”green” >
Tag hr dengan properties
<hr width=”80%” size=”10” align=”left” noshade>
</p>
<!— Ini adalah komentar yang tidak akan ditampilkan di layar browser –>
</body>
</html>
Pemformatan Teks Dan Preformat
Agar penulisan kode HTML web ditampilkan di web browser seperti dengan format penulisan apa adanya maka digunakan tag <pre> kemudian ditutup dengan tag </pre>. Berikut ini contoh penggunaan tag <pre>.
<html>
<head> <title>Penggunaan Format Text</title> </head>
<body>
<b>Teks ini tebal </b>
<br>
<strong> Teks ini juga tebal </strong>
<br>
<big> Teks ini hurufnya besar </big>
<br>
<i> Teks ini miring </i>
<br>
<small> Teks ini hurufnya kecil </small>
<br>
Teks ini berisi <sub> subscript </sub>
<br>
Teks ini berisi <sup> superscript </sup>
<p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
List unordered, ordered list, Definition List, Daftar Menu
Unordered List digunakan untuk menandai setiap item dari daftar/list menggunakan bullet berupa tiga simbol yaitu : Disk (Cakram), Circle (Linkaran), Square (Kotak)
Penulisan unordered list diawali tag <ul> serta diikuti <li> dan ditutup dengan tag </li></ul>.
Ordered List digunakan untuk menandai setiap item dari daftar/list menggunakan penomoran.
Ordered List diawali tag <ol> serta diikuti tag <li> dan ditutup dengan tag </li> dan tag </ol>.
Definition List untuk memberi keterangan pada setiap item dari daftar/list. Definition List diawali tag <dl> serta diikuti tag <dt> dan ditutup dengan tag <dd> dan tag </dl>.
Daftar menu digunakan untuk membuat daftar menu dengan menggunakan tag <menu> dengan diikuti tag </menu>
<html>
<body>
<h4>Sebentuk list unordered:</h4>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
<br>
<h4>Sebentuk list ordered:</h4>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
<h4>Sebentuk Definition List :</h4>
<dl>
<dt>Sistem</dt>
<dd>Kumpulan beberapa usnsur dan saling terkait </dd>
<dt>Informasi</dt>
<dd>Sekumpulan data yang mempunyai makna </dd>
<dt>Manajemen</dt>
<dd>Proses untuk mencapai tujuan </dd>
</dl>
</body>
</html>
Untuk property dari list order dan unorder, silahkan anda kembangkan sendiri.
Membuat Link
Agar halaman web dapat mengakses ke halaman satu dengan yang lainnya atau mengakses website yang lain, HTML menyediakan pasangan tag <a> di sertai atribut HREF dan diakhiri </a> dan link juga bisa anda tambah dengan title untuk memberikan informasi tentang link yang dibuat, title ini akan muncul saat link disorot. Link bisa anda buat dengan 2 macam, yaitu link text dan link gambar. Berikut contoh penggunaan link :
<html>
<head> <title>Contoh Link dengan Text dan Gambar</title> </head>
<body>
<h3 color=”blue” align=”center”> Link Gambar</h3>
<hr color=”green”>
Kunjungi Web Gianto
<a href=”http://www.giantowidodo.com” title=”Website Gianto”><img src=”gambar.png”> </a>
<h3 color=”blue” align=”center”> Link Text</h3>
<hr color=”green”>
Atau Klik ini Untuk mengunjungi web gianto
<a href=”http://www.giantowidodo.com” >Klik Gianto</a>
</body>
</html>
Membuat table
Berikut adalah tag yang dipakai untuk membuat table pada halaman web yang nantinya akan kita buat, table ini biasanya dipakai untuk desain website yang akan kita buat.
<html>
<body>
<h4>Satu baris satu kolom dengan border normal:</h4>
<table border=”1″>
<tr><td>100</td></tr>
</table>
<h4>Satu baris dan tiga kolom dengan border tebal:</h4>
<table border=”8″>
<tr><td>100</td><td>200</td><td>300</td></tr>
</table>
<h4>Dua baris dan tiga kolom dengan border sangat tebal:</h4>
<table border=”15″>
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>400</td><td>500</td><td>600</td></tr>
</table>
<h4>Tabel ini tidak memiliki border:</h4>
<table border=”0″>
<tr><td>100</td><td>200</td></tr>
<tr><td>300</td><td>400</td></tr>
</table>
</body>
</html>
Tag DIV
Tag <div> mempunyai perbedaan dengan tag <p> yaitu tag <div> tidak membuat paragraph baru hanya melakukan pergantian baris terhadap kalimat. Tag <div> dapat membuat dokumen berada di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag <div> yang di inginkan. Dengan ditambahkan atribut CSS tag div ini biasanya juga digunakan untuk desain layout website yang akan dibuat.
Berikut ini contoh penggunaan tag <div>:
<html>
<head>
<title>Contoh Penggunaan Tag div</title>
</head>
<body>
<h3 align=”center”>Web Programming</h3>
<div align=justify> Selain HTML dan CSS untuk mahir mendesain web maka harus mempunyai keahlian dalam desain dan kepekaan terhadap kombinasi warna yang akan ditampilkan dalam website yang akan dibangun.
</div>
<div align=”left”> Untuk menguasai pemrograman website harus memahami logika dan pemrograman serta proses logika matematika.
</div>
<div align=”center”>
Jika ingin mahir memprogram website maka yang diperlukan adalah ketekunan dan pantang menyerah untuk selalu explorasi. </div>
<div align=”right”>
Tulisan ini akan berada di kanan
</div>
</body>
</html>