Follow by Email

Jumat, 08 Maret 2013

Materi tentang Desain HTML

Materi Jaringan Komputer

Di tengah-tengah perkembangan yang begitu pesat dari ilmu pengetahuan dan penerapannya yang disebut teknologi  –khususnya teknologi informasi dan komunikasi– berimplikasi ilmu tentang jaringan (network) komputer  menjadi kebutuhan kita, paling tidak hal itu wajib menjadi pengetahuan kita.

Jaringan komputer secara sederhana dapat diartikan sebagai sebuah sistem yang terdiri atas dua atau lebih komputer beserta software dan  perangkat jaringan lainnya yang bekerja bersama-sama untuk mencapai suatu tujuan yang sama, seperti (1) membagi sumber daya: contohnya berbagi pemakaian printer, hardisk, CPU, (2) komunikasi: contohnya e-mail, chat, social-network, seperti facebook, twitter, skype, dsb., dan (3) Akses informasi: contohnya web browsing, dan sebagainya.

Jaringan komputer adalah himpunan "interkoneksi" antara 2 komputer autonomous atau lebih yang terhubung dengan media transmisi kabel atau tanpa kabel(wireles). Bila sebuah komputer dapat membuat komputer lainya restart, shutdown, atau melakukan kontrol lainya, maka komputer komputer tersebut bukan autonomous (tidak melakukan kontrol terhadap komputer lain dengan akses penuh).

Secara lebih detail tentang jaringan komputer, berikut ini saya unggah materi ajar untuk 
   


Dasar Html

Sebelumnya mari kita mengenal dulu dasar sintax-sintax html,
silakan di simak kawan-kawan semua :)
<html>
<head>
isi dari kepala html
</head>
<br></br>
<body>
isi dari badan html
</body>
</html>
#maka akan tampil sperti ini

Setiap membuat file html selalu di awali dengan sintax <html> dan </html>. Di tengah-tengah sintax tersebut barulah di isi tag head and body. ingatlah setiap tag pembuka harus di tutup dengan tag penutup. Tag <body> adalah tag pembuka dan tag </body> adalah tag penutup. Sangat gampang, setiap tag penutup hanya perlu tanda slash </> dari tag pembuka. Halaman dari web akan di buat di bagian body. coba perhatikan sintax HTML berikut.

maka akan tampil sperti ini:

#selamat menikmati teman-teman ^_^

Incoming search terms for the article:

Contoh Html Dasar

Kode HTML dasar yang digunakan untuk membuat sebuah halaman website adalah sebagai berikut:

<html>
<head>
<title>
ini adalah contoh title
</title>
</head>
<body>
ini adalah body html. body html adalah
tempat bersemayamnya segala tulisan,
gambar, dan informasi yang dibaca
oleh semua orang di internet.
secara umum, jika kita ingin menulis
apapun di situs kita, kita perlu
memasukkan tulisan tersebut
pada area body ini.
</body>
</html>
(http://fredinaelsie.blogspot.com/2012/02/contoh-html-dasar.html)

Incoming search terms for the article:

STRUKTUR DASAR DOKUMEN HTML

HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Dibawah ini juga di berikan latihan-latihan untuk melatih kita dalam proses belajar HTML.
Selamat menyimak sodara and sodari :)
Struktur dasar dokumen HTML adalah sebagai berikut:




Disini penulisan informasi Web


Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:
a. Tag
Adalah teks khusus (markup) berupa dua karakter “<" dan ">“, sebagai contoh adalah tag dengan nama body.
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter “/” setelah karakter “<"), sebagai contoh ini adalah tag pembuka isi dokumen HTML, dan ini adalah tag penutup isi dokumen HTML.
b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana:
ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar

…………….

Contoh penulisan tag-tag yang salah

…………….

c. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
……………..
Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah
d. Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:

……….

e. Element HEAD
Merupakan kepala dari dokumen HTML. Tag dan tag terletak di antara tag dan tag .
Sintaks:

………..

f. Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag terletak di antara tag dan tag .
Sintaks:

g. Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag dan tag terletak di bawah tag dan tag .
Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser.
Sintaks:

…………..

Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latarbelakang dokumen HTML, background memberikan latarbelakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.
LATIHAN
Gunakan teks editor misalkan “Notepad” untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.
Latihan 1:
Menampilkan teks:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_1.html




Belajar bahasa pemrograman web ternyata mudah juga :)


Latihan 2:
Merubah warna teks menjadi merah:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_2.html




Belajar bahasa pemrograman web ternyata mudah juga :)


Latihan 3:
Merubah warna background menjadi hitam.
Nama file: latihan1_3.html




Belajar bahasa pemrograman web ternyata mudah juga :)


Latihan 4:
Merubah background dengan suatu gambar.
Nama file: latihan1_4.html




Belajar bahasa pemrograman web ternyata mudah juga :)


catatan:
./images/ = nama direktori file gambar disimpan
image027.jpg = nama file gambar
(http://hans.polinpdg.ac.id/html/html_1/index.html)

Incoming search terms for the article:

Dasar – Dasar HTML I

Kali ini kita akan ngerefresh sejenak ingatan kita mengenai HTML. Yah, artikel ini mungkin cocok buat yang baru mendalami pemrograman web.
HTML atau Hyper Text Markup Language. Adalah bahasa yang digunakan untuk mendisain dan
memformat halaman web. Kita mungkin sudah mendengar tentang bahasa program seperti C,
C++, Java, dan Visual basic. Masing-Masing bahasa ini terdiri dari perintah sintak
dan programming . Sintak ini adalah yang programmer gunakan untuk memanggil kode.
Sangatlah penting mengetahui bagaimana cara menulis kode menggunakan bahassa yang
relevan.
Lebih dari itu, kita harus konvensional dengan aturan menyangkut bahasa tertentu.
Didalam HTML, sintak ini disebut tag.Tag ditulis dengan tanda-kurung bersudut< dan
>.Ada kelompok tag yang sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tujuan.
Sebagai contoh, dalam rangka memodifikasi satu baris teks ke dalam Bold, kita menerapkan
tag bold dengan suatu tag <b>, kemudian tulis beberapa teks atau suatu paragrap yang
berisi beberapa teks,dan tutup tag menggunakan tag </b> seperti dalam contoh listing 1.
Semua tag didalam HTML harus ditutup menggunakan sintak </>.Tetapi ada beberapa perkecualian pada aturan ini, yang mana kita akan mendiskusikanya nanti.Kita memakai tag ini
sebab HTML bukanlah bahasa yang sensitip seperti C++ dan Java.
Struktur
Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan
Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih
baik
mempraktekan langsung struktur ini sbg perancangan halaman web kita.
Listing 1 menunjukkan struktur suatu halaman HTML sederhana:
Listing 1
<!– Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser–>
<HTML>
<HEAD>
<TITLE>
Welcome to HTML
</TITLE>
</HEAD>
<BODY>
<!–halaman CONTENT dimulai –>
<B>Yang ditampilkan di browser, cuma tulisan ini.
</BODY>
</HTML>
Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya?
Listing 2
<B>Untuk menampilkan tulisan cetak tebal</B><BR>
<I>Untuk menampilkan tulisan cetak miring (italic) </I><BR>
<U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR>
<BR> digunakan untuk menampilkan baris baru.
Listing 3
<Pon> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya.
</P>
Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup
tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan.
Listing 4
Bekerja dengan Heading
Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai
tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah:
<H1>Level – 1 </H1>
<H2>Level – 2 </H2>
<H3>Level – 3 </H3>
<H4>Level – 4 </H4>
<H5>Level – 5 </H5>
Listing 5
Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML.
sebagai berikut
o Ordered List
o Unordered List
Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan
Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet.
Cobalah kode di bawah ini:
<OL>
<LI>Java
<LI>C++
</OL>
kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita
menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL>
sebagai di bawah ini:
Listing 6
<UL>
<LI>Java
<LI>C++
</UL>
Listing 7
Penerapan Definisi List
Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>
dan <DT> seperti ditunjukkan listing 7 dibawah ini.
<DL>
<DT>Java
<DD>Developed by Sun Microsystems Inc
<DT>Yang kedua
<DD>Developed by saya sendiri
</DL>
Listing 8
Indenting Text
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara
otomatis dari kiri ke kanan. Cobalah contoh berikut :
<BLOCKQUOTE>
You can use Sound Recorder to record, play, and edit sound files.
To use Sound Recorder, you must have a sound card and speakers
installed on your computer. If you want to record live sound,
you also need a microphone.
</BLOCKQUOTE>
Membuat Links
Suatu website bukanlah halaman tunggal.Terdiri dari beberapa halaman yang saling
berhubungan. Sebagai contoh,ketika kita klik suatu link nama ” About Us”,
pada browser secara otomatis Kita ke halaman web itu .
Bagaimana sihir ini terjadi? Itu merupakan suatu konsep Hyperlinks
Kita dapat menciptakan Hyperlinks menggunakan tag <a>.Dan harus ditutup menggunakan
tag </a> dan itu mewakili anchor.
Listing 9
<A href =“http://www.rumahweb.com”>Rumahweb </A>
href adalah suatu atribut yang digunakan untuk menetapkan link dan mewakili
Teks Reference. Atribut lain meliputi suatu target opsional, yang mana menandakan
bagaimana cara membuka link. Nilai atribut ini jadi kosong. Sebagai contoh,
kode berikut memanggil lokasi Rumahweb.com didalam suatu jendela browser baru
ketika seseorang mengklik teks.
Listing 10
<A href = http://www.rumahweb.com target = “_blank”>Rumahweb </A>
Selalu ingat untuk menyimpan file yang telah dibuat dalam ekstensi .html :)
bersumber dari (http://www.rumahweb.com/journal/dasar-dasar-html-i.htm)

Incoming search terms for the article:

Dasar-Dasar Membuat Web Dengan HTML

tag <>
digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.
Tag container adalah tag yang berisi text yang akan ditampilkan setelah tag ditutup. Contoh: <td> text yang ditampilkan </td>.
Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.
Tag yang digunakan untuk mengakhiri sintak punya karakter / (slash) sebelum sintaknya, contohnya: <td> </td>
Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.
LANGKAH 1
  • MEMBUKA NOTEPAD.
LANGKAH 2
  • MENGETIKKAN SINTAK/SYNTAX.
Berikut ini adalah syntax dasar yang membentuk suatu HTML.
pertama, ketikkan
<html>
tekan enter, kemudian ketik
<head>
Dalam container head, kita bisa mengetikan beberapa sintak, tapi yang paling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi seperti ini:
<head> <title> judul halaman web </title> </head>
Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.
Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
</body>
?
Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
<body>
Contoh text yang ditampilin di halaman web, By: C.H.I.P. Sensei
</body>
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
<html>
<head>
<title> Judul Halaman Web </title>
</head>
<body>
Contoh text yang ditampilkan di halaman web, By: C.H.I.P. Sensei
</body>
</html>
kalo udah, sekarang save dengan nama dasarHTML.
kalo udah disave, buka data yang tadi di save.
?
Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???
Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.
?
(http://www.ilmuwebsite.com/tutorial-html/dasar-dasar-membuat-sebuah-web-html)

Incoming search terms for the article:

Tidak ada komentar:

Poskan Komentar