Hi, I am Robi Jefferson!

Hello, I'm Admin of this blog and this is my portfolio blog.
A variety of jobs I was on this blog, please see and enjoy.
Please feel free to leave your questions, comments and suggestions to me.






Karanganyar District Hospital is located in Karanganyar District, Central Java Province. 

Robi Jefferson as IT at Karanganyar District Hospital participated in website development.
 

The awards received related to the website that was developed by Robi Jefferson are as follows:

1. Management Of The Karanganyar District Government Website

2. Central Java Provincial Information Commission Award

RSUD Kabupaten Karanganyar



My next article about wordpress tutorial, please visit My blog about Wordpress Tutorial.

Consists of seven sections, ranging from installation and overall arrangements wordpress.
 
May be useful
.

Tutorial Wordpress


The Penguin's is a game created in 2013 by Robi Jefferson using the Java programming language and software editor Greenfoot.

This game tells the story of a group of penguins who will save the whole of their fish, which had been stolen by the king of the keg. Consists of 4 levels with different games expected players will enjoy the challenge on every level.

 If you want to play, please visit http://www.greenfoot.org/scenarios/8514

See The Penguin's game...

Start Game
Main Menu
About Game
 Level 1
 Level 2

 Level 3

Level 4

If Mission Failed or Succes

If you want to play, please visit http://www.greenfoot.org/scenarios/8514

Thank you.

By : Robi Jefferson

The Penguin's


SFA Group is a company engaged in two areas:  SFA general store and SFA Steak & Resto. Beginning SFA Group started with the opening of the General Store in Karanganyar since October 25, 2003. In addition Toserba SFA, SFA Steak & Resto started in 2005 which today has evolved into six branches.

Here is the link of business profile website SFA Steak & Resto : www.sfasteakresto.com

Website SFA steak & resto created in 2014 by Robi Jefferson who is also the owner of this blog.

The main page of the website SFA Steak & Resto

Website SFA Steak & Resto has a unique and simple concept that can easily convey information to visitors, with a responsive embedded feature allows users to get the maximum display for the device and comfortable to be accessed.

SFA Steak & Resto


Bagi kalian yang ingin coba-coba belajar untuk menciptakan sebuah halaman webside sendiri dengan konsep dan isi yang kalian inginkan, HTML adalah jawabannya.


Apa sih HTML itu???

HyperText Markup Language, lebih dikenal sebagai Halaman World Wide Web. Meskipun ini terdengar sangat menakutkan, HTML sebenarnya sangat mudah untuk belajar dan Anda akan dapat menggunakan editor HTML yang bekerja seperti pengolah kata.

Orang sering berpikir adalah sangat sulit untuk membuat sebuah website. Itu tidak terjadi! Setiap orang dapat belajar bagaimana membuat sebuah website. Dan jika Anda membaca, Anda akan telah membuat satu hanya dalam satu jam.

Lain percaya - seperti yang keliru - bahwa perangkat lunak mahal dan canggih diperlukan untuk membuat website. Memang benar bahwa ada banyak program yang berbeda yang mengklaim mereka dapat membuat website untuk Anda. Beberapa datang lebih dekat daripada yang lain. Tetapi jika Anda ingin dilakukan dengan benar, Anda harus melakukannya sendiri. Untungnya, itu adalah sederhana dan gratis dan Anda sudah memiliki semua software yang Anda butuhkan.

MARI KITA MULAI DARI PERTAMA YANG KITA BUTUHKAN

Kemungkinan besar Anda sudah memiliki semua yang anda butuhkan.

Anda memiliki "browser". Browser adalah program yang memungkinkan untuk mencari dan membuka situs web. Sekarang Anda melihat halaman ini dalam browser Anda.

Hal ini tidak penting yang browser yang Anda gunakan. Yang paling umum adalah Microsoft Internet Explorer. Tapi ada juga yang lain seperti Opera dan Mozilla Firefox dan mereka semua dapat digunakan.

Anda mungkin telah mendengar tentang, atau bahkan digunakan, program-program seperti Microsoft FrontPage, Macromedia Dreamweaver atau bahkan Microsoft Word, yang dapat - atau mengklaim bahwa mereka dapat - membuat website untuk Anda. Lupakan program ini untuk sekarang! Mereka bukan dari setiap membantu Anda ketika belajar bagaimana kode website Anda sendiri.

Sebaliknya, Anda memerlukan editor teks sederhana. Jika Anda menggunakan Windows Anda dapat menggunakan Notepad, yang biasanya ditemukan di start menu di bawah Program di Aksesoris:



Jika Anda tidak menggunakan Windows, Anda dapat menggunakan editor teks yang mirip sederhana. Sebagai contoh, Pico (Linux) atau TextEdit (Mac).

Notepad merupakan teks yang sangat dasar program editing yang sangat baik untuk pengkodean karena tidak mengganggu apa yang Anda mengetik. Ini memberi Anda kendali penuh. Masalah dengan banyak program yang mengklaim bahwa mereka dapat membuat website adalah bahwa mereka memiliki banyak fungsi standar, dimana Anda dapat memilih dari. The downside adalah bahwa, segala sesuatu perlu masuk ke dalam fungsi-fungsi standar. Dengan demikian, program jenis ini sering tidak dapat membuat website persis seperti yang Anda inginkan. Atau - bahkan lebih mengganggu - mereka membuat perubahan tulisan tangan kode Anda. Dengan Notepad atau editor teks sederhana lainnya, Anda hanya memiliki diri untuk berterima kasih atas keberhasilan Anda dan kesalahan.

Sebuah browser dan Notepad (atau editor teks yang mirip sederhana) adalah semua yang Anda butuhkan untuk melewati tutorial ini dan membuat website Anda sendiri.
Apakah saya perlu online?

Anda tidak harus terhubung ke Internet - baik saat membaca tutorial ini, atau sementara membuat website Anda.

Jika Anda ingin menghindari menjadi online saat membaca tutorial ini, Anda dapat mencetak keluar atau hanya lepaskan dari Internet saat membaca di layar. Anda dapat membuat website pada hard disk komputer Anda dan meng-upload ke Internet ketika selesai.
Apa selanjutnya?

Pergi ke pelajaran berikutnya dan membaca tentang HTML sebelum menyenangkan benar-benar dimulai.




PENJELASAN LEBIH DETAIL MENGENAI HTML

Pelajaran ini akan memberikan presentasi singkat dari teman baru Anda, HTML.

Apa itu HTML?


HTML adalah "bahasa ibu" dari browser Anda.


Untuk membuat cerita panjang pendek, HTML diciptakan pada tahun 1990 oleh seorang ilmuwan bernama Tim Berners-Lee. Tujuannya adalah untuk membuat lebih mudah bagi para ilmuwan di universitas yang berbeda untuk mendapatkan akses ke dokumen penelitian masing-masing lain. Proyek ini menjadi sukses lebih besar dari Tim Berners-Lee yang pernah dibayangkan. Dengan menciptakan HTML ia meletakkan dasar untuk web seperti yang kita kenal sekarang.


HTML adalah bahasa, yang memungkinkan untuk menyajikan informasi (penelitian ilmiah misalnya) di Internet. Apa yang Anda lihat ketika Anda melihat halaman di Internet adalah interpretasi browser Anda dari HTML. Untuk melihat kode HTML dari suatu halaman di Internet, cukup klik "View" pada menu atas browser Anda dan pilih "Source".



Untuk mata yang tak terlatih, kode HTML terlihat rumit namun tutorial ini akan membantu Anda memahami semuanya.
Apa yang bisa saya menggunakan HTML untuk?

Jika Anda ingin membuat website, tidak ada cara sekitar HTML. Bahkan jika Anda menggunakan sebuah program untuk membuat website, seperti Dreamweaver, pengetahuan dasar tentang HTML dapat membuat hidup jauh lebih sederhana dan website Anda jauh lebih baik. Kabar baiknya adalah bahwa HTML adalah mudah dipelajari dan digunakan. Dalam hanya dua pelajaran dari sekarang Anda akan belajar bagaimana membuat situs web pertama Anda.

HTML digunakan untuk membuat website. Ini adalah yang sederhana seperti itu!

Dalam tutorial ini Anda akan belajar yang disebut XHTML (Extensible Hypertext Mark-up Language) yang, singkatnya, adalah cara baru dan lebih baik terstruktur menulis HTML.

Sekarang Anda tahu apa HTML (dan XHTML) singkatan mari kita mulai dengan apa adalah semua tentang: membuat website.


ELEMEN DAN TAG

Anda sekarang siap untuk mempelajari esensi dari HTML: elemen.

Elemen memberi struktur dokumen HTML dan memberitahu browser bagaimana Anda ingin website Anda yang akan disajikan. Umumnya elemen terdiri dari tag pembuka, beberapa konten, dan tag akhir.
"Tag"?

Tag adalah label yang Anda gunakan untuk mark up awal dan akhir dari suatu elemen.

Semua tag memiliki format yang sama: mereka mulai dengan tanda kurang dari "<" dan diakhiri dengan tanda lebih besar daripada ">".

Secara umum, ada dua macam tag - tag pembuka: <html> dan tag penutup: </ html>. Satu-satunya perbedaan antara tag pembuka dan tag penutup adalah garis miring "/". Anda label konten dengan menempatkan antara tag pembuka dan tag penutup.

HTML adalah semua tentang unsur. Untuk mempelajari HTML adalah untuk belajar dan menggunakan tag yang berbeda.
Bisa anda tunjukkan beberapa contoh?

Oke, elemen teks penekanan mereka. Semua teks antara tag pembuka <em> dan tag penutup </ em> ditekankan dalam browser. ("Em" adalah singkatan dari "penekanan".)


Contoh 1:


<em> Emphasised teks. </ em>






Akan terlihat seperti ini di browser:
Emphasised teks.

Elemen h1, h2, h3, h4, h5 dan h6 digunakan untuk membuat judul (h singkatan dari "pos"), dimana h1 adalah tingkat pertama dan biasanya teks terbesar, h2 adalah tingkat kedua dan teks biasanya sedikit lebih kecil, dan h6 adalah keenam dan terakhir dalam hirarki dari pos dan biasanya teks terkecil.


Contoh 2:


<h1> Ini adalah heading </ h1>
<h2> Ini adalah subpos </ h2>






Akan terlihat seperti ini di browser:
Ini adalah heading
Ini adalah sebuah subpos
Jadi, saya selalu membutuhkan tag pembuka dan tag penutup?

Seperti yang mereka katakan, ada pengecualian untuk setiap aturan dan dalam HTML pengecualian adalah bahwa ada beberapa elemen yang baik membuka dan menutup pada tag yang sama. Ini disebut elemen kosong yang tidak terhubung ke suatu bagian tertentu dalam teks tapi lebih merupakan label terisolasi, misalnya, satu baris yang terlihat seperti ini: <br />.
Haruskah tag diketik dalam huruf besar atau huruf kecil?

Kebanyakan browser mungkin tidak peduli jika Anda mengetik tag Anda dalam kasus atas, lebih rendah atau campuran. <HTML>, <html> Atau <html> biasanya akan memberikan hasil yang sama. Namun, cara yang benar adalah dengan mengetikkan tag dalam huruf kecil. Jadi masuk ke dalam kebiasaan menulis tag Anda dalam huruf kecil.
Di mana saya menempatkan semua tag?

Anda ketik tag dalam dokumen HTML. Sebuah website berisi satu atau lebih dokumen HTML. Ketika Anda surfing Web, Anda hanya membuka dokumen HTML yang berbeda.

Jika Anda melanjutkan ke pelajaran berikutnya dalam 10 menit Anda akan membuat situs web pertama Anda dengan mudah.


MEMBUAT WEBSIDE PERTAMA ANDA

Dengan apa yang Anda pelajari dalam pelajaran sebelumnya, Anda sekarang hanya beberapa menit dari membuat situs web pertama Anda.
Bagaimana?


Dalam Pelajaran 1 kita melihat apa yang dibutuhkan untuk membuat website: browser dan Notepad (atau editor teks yang mirip). Karena Anda membaca ini, Anda kemungkinan besar sudah memiliki browser Anda terbuka. Satu-satunya hal yang perlu Anda lakukan adalah untuk membuka jendela browser tambahan (membuka browser sekali lagi) sehingga Anda dapat membaca tutorial ini dan melihat website baru Anda pada waktu yang sama.


Juga, buka Notepad (di Aksesoris bawah Program di menu Start):

Sekarang kita siap!
Apa yang bisa saya lakukan?
Mari kita mulai dengan sesuatu yang sederhana. Bagaimana tentang halaman yang mengatakan: "Hore Ini adalah website pertama saya." Membaca dan Anda akan menemukan betapa sederhananya adalah.
HTML adalah sederhana dan logis. Browser membaca HTML seperti Anda membaca bahasa Inggris: dari atas ke bawah dan dari kiri ke kanan. Jadi, sebuah dokumen HTML sederhana dimulai dengan apa yang harus datang pertama dan berakhir dengan apa yang harus datang terakhir.
Hal pertama yang perlu Anda lakukan adalah untuk memberitahu browser bahwa Anda akan "berbicara" dalam bahasa HTML. Hal ini dilakukan dengan tag <html> (ada kejutan di sana). Jadi sebelum Anda melakukan hal lain ketik "<html>" di baris pertama dari dokumen Anda di Notepad.
Seperti yang Anda mungkin ingat dari pelajaran sebelumnya, <html> adalah tag pembuka dan harus ditutup dengan tag penutup saat Anda selesai mengetik HTML. Jadi untuk memastikan Anda tidak lupa menutup tag HTML sekarang ketik "</ html>" beberapa baris ke bawah dan menulis seluruh dokumen antara <html> dan </ html>.
Hal berikutnya dokumen Anda butuhkan adalah "kepala", yang memberikan informasi tentang dokumen Anda, dan "tubuh", yang merupakan isi dari dokumen. Karena HTML apa-apa jika tidak logis, kepala (<head> dan </ head>) adalah di atas tubuh (<body> dan </ body>).
Dokumen Anda sekarang harus terlihat seperti ini:
<html>
<head>
</ Head>
<body>
</ Body>
</ Html>
Perhatikan bagaimana kita terstruktur dengan garis-garis tag baru (dengan menggunakan tombol Enter) serta indentasi (menggunakan tombol Tab). Pada prinsipnya, tidak peduli bagaimana Anda struktur dokumen HTML Anda. Tapi untuk membantu Anda, dan lain-lain membaca coding Anda, untuk menjaga gambaran, sangat disarankan agar Anda struktur HTML Anda dalam cara yang rapi dengan jeda baris dan indentasi, seperti contoh di atas.
Jika dokumen Anda terlihat seperti contoh di atas, Anda telah membuat website pertama Anda - website yang membosankan dan mungkin bukan apa yang Anda impikan ketika Anda memulai tutorial ini tetapi masih semacam website. Apa yang telah Anda buat akan menjadi template dasar untuk masa depan Anda semua dokumen HTML.
Sejauh ini cukup baik, tapi bagaimana saya menambahkan konten ke situs Web?
Seperti yang Anda pelajari sebelumnya, dokumen HTML Anda memiliki dua bagian: kepala dan tubuh. Di kepala bagian yang Anda menulis informasi tentang halaman, sementara tubuh berisi informasi yang merupakan halaman.
Sebagai contoh, jika Anda ingin memberi halaman judul yang akan muncul di bar atas browser, itu harus dilakukan di bagian "kepala". Elemen yang digunakan untuk judul adalah judul. Yakni menulis judul halaman antara tag pembuka <title> dan tag penutup </ title>:
<title> situs web pertama saya </ title>
Perhatikan bahwa judul ini tidak akan muncul pada halaman itu sendiri. Apa pun yang Anda ingin ditampilkan pada halaman konten dan karena itu harus ditambahkan di antara tag "tubuh".
Seperti yang dijanjikan, kami ingin halaman untuk mengatakan "Hore! Ini adalah website pertama saya." Ini adalah teks yang kita ingin berkomunikasi dan karena itu termasuk dalam bagian tubuh. Jadi di bagian tubuh, ketik berikut ini:
<p> Hurrah! Ini adalah website pertama saya. </ P>
P pada <p> merupakan kependekan dari "ayat" yang persis apa itu - sebuah paragraf teks.
Dokumen HTML Anda sekarang harus terlihat seperti ini:
<html>
<head>
<title> situs web pertama saya </ title>
</ Head>
<body>
<p> Hurrah! Ini adalah website saya. </ P>
</ Body>
</ Html>
Selesai! Anda sekarang telah membuat situs web pertama Anda yang sesungguhnya!
Berikutnya yang harus Anda lakukan adalah menyimpannya ke hard drive anda dan kemudian buka di browser anda:
  • Di Notepad pilih "Simpan sebagai ..." di bawah "File" di menu atas.
  • Pilih "All Files" di kotak "Save as type". Hal ini sangat penting - jika tidak, Anda menyimpannya sebagai dokumen teks dan bukan sebagai sebuah dokumen HTML.
  • Sekarang menyimpan dokumen Anda sebagai "page1.htm" (mengakhiri ". Htm" menunjukkan bahwa itu adalah sebuah dokumen HTML ". Html". Memberikan hasil yang sama. Saya selalu menggunakan ". Htm", tetapi Anda dapat memilih mana dari dua ekstensi yang Anda inginkan). Tidak peduli di mana Anda menyimpan dokumen pada hard drive Anda - selama Anda ingat di mana Anda menyimpannya sehingga Anda dapat menemukannya lagi.

Sekarang pergi ke browser:
  • Dalam menu atas pilih "Open" di bawah "File" (atau tekan CTRL + O).
  • Klik "Browse" di kotak yang muncul.
  • Sekarang menemukan dokumen HTML Anda dan klik "Open".

Sekarang harus mengatakan "Hore! Ini adalah website pertama saya." di browser Anda. Selamat!
Jika Anda benar-benar ingin seluruh dunia untuk melihat karya Anda segera, Anda dapat melompat ke 13 Pelajaran dan belajar bagaimana untuk meng-upload halaman Anda ke Internet. Jika tidak, bersabar dan membaca. Menyenangkan baru saja dimulai.


MARI SEDIKIT EVALUASI

Selalu mulai dengan template dasar yang kami buat pada pelajaran sebelumnya:


<html>
<head>
<title> </ title>
</ head>


<body>
</ body>


</ html>






Pada bagian kepala, selalu menulis judul: <title> Judul halaman </ title>. Perhatikan bagaimana judul akan ditampilkan di sudut kiri atas browser Anda:





Judul sangat penting karena digunakan oleh mesin pencari (seperti Google) untuk mengindeks situs web Anda dan ditampilkan dalam hasil pencarian.



Pada bagian tubuh, Anda menulis konten yang sebenarnya dari halaman. Anda sudah tahu beberapa elemen yang paling penting:


<p> Apakah digunakan untuk paragraf </ p>.
<em> teks Penekanan </ em>.
<h1> Heading </ h1>
<h2> anak judul </ h2>
<h3> Sub-anak judul </ h3>






Ingat, satu-satunya cara untuk belajar HTML adalah dengan trial and error. Tapi jangan khawatir, tidak ada cara Anda dapat merusak komputer Anda atau Internet. Jadi terus bereksperimen - yang adalah cara terbaik untuk mendapatkan pengalaman.
Apa artinya itu?

Tak seorang pun menjadi pencipta website yang baik dengan mempelajari contoh-contoh dalam tutorial ini. Apa yang Anda dapatkan dalam tutorial ini hanyalah pemahaman dasar blok bangunan - untuk menjadi baik Anda harus menggunakan blok bangunan dalam cara baru dan kreatif.

Jadi, keluar di air yang dalam dan berdiri di atas kaki sendiri ... Oke, mungkin tidak. Tetapi mencobanya dan bereksperimen dengan apa yang telah Anda pelajari.
Jadi apa yang berikutnya?

Cobalah untuk membuat beberapa halaman sendiri. Misalnya, membuat halaman dengan judul, heading, beberapa teks, anak judul dan teks lagi. Sangat oke untuk melihat di tutorial saat Anda membuat halaman pertama Anda. Tapi kemudian, lihat apakah Anda dapat melakukannya sendiri - tanpa melihat.

LEBIH LANJUT LAGI... .

Apakah Anda berhasil membuat beberapa halaman Anda sendiri? Jika tidak, berikut ini adalah contohnya:


<html>


<head>
<title> website saya </ title>
</ Head>


<body>
Sebuah <h1> Heading </ h1>
<p> teks, teks, teks </ p>
<h2> anak judul </ h2>
<p> teks, teks, teks </ p>
</ Body>


</ Html>




Sekarang apa?

Sekarang saatnya untuk mempelajari tujuh elemen baru.

Dengan cara yang sama Anda menekankan teks dengan menempatkan antara <em> openning tag dan tag penutup </ em>, Anda dapat memberikan penekanan yang lebih kuat dengan menggunakan tag <strong> openning dan tag penutup </ strong>.

Contoh 1:


penekanan <strong> kuat </ strong>.






Akan terlihat seperti ini di browser:
Penekanan kuat.

Demikian juga, Anda dapat membuat teks Anda yang lebih kecil menggunakan kecil:

Contoh 2:


<small> ini harus di kecil. </ small>






Akan terlihat seperti ini di browser:
Ini harus di kecil.
Dapatkah saya menggunakan beberapa elemen pada waktu yang sama?

Anda dapat dengan mudah menggunakan beberapa elemen pada waktu yang sama asalkan Anda menghindari tumpang tindih elemen. Hal ini diilustrasikan dengan contoh:

Contoh 3:

Jika Anda ingin menekankan teks kecil, itu harus dilakukan seperti ini:


<em> <small> Emphasised teks kecil </ small> </ em>






Dan BUKAN seperti ini:


<em> <small> Menekankan teks kecil </ em> </ small>






Perbedaannya adalah bahwa dalam contoh pertama, kami menutup tag pertama kita terakhir dibuka. Dengan cara ini kita menghindari membingungkan diri kita sendiri maupun browser.
Elemen yang lebih!

Seperti disebutkan dalam Pelajaran 3 ada unsur-unsur yang dibuka dan ditutup pada tag yang sama. Ini disebut elemen kosong yang tidak terhubung ke suatu bagian tertentu dalam teks tapi lebih merupakan label terisolasi. Sebuah contoh dari tag adalah <br /> yang menciptakan satu baris paksa:

Contoh 4:

Beberapa teks <br /> dan beberapa lagi teks dalam baris baru



Akan terlihat seperti ini di browser:
Beberapa teks
dan beberapa lagi teks dalam baris baru

Perhatikan bahwa tag ditulis sebagai kontraksi pembukaan dan tag penutup dengan ruang kosong dan garis miring di akhir: <br />.

Elemen lain yang dibuka dan ditutup pada tag yang sama <hr /> yang digunakan untuk menggambar garis horizontal ("jam" singkatan dari "aturan horisontal"):

Contoh 5:


<hr />






Akan terlihat seperti ini di browser:

Contoh unsur-unsur yang perlu kedua tag pembuka dan tag penutup - sebagai elemen yang paling lakukan - adalah ul, ol dan li. Unsur-unsur ini digunakan bila Anda ingin membuat daftar.

ul adalah singkatan dari "unordered list" dan menyisipkan peluru untuk setiap item daftar. ol adalah singkatan dari "ordered list" dan nomor masing-masing item daftar. Untuk membuat item dalam daftar menggunakan tag li ("daftar item"). Bingung? Lihat contoh:

Contoh 7:


<ul>
<li> item daftar </ li>
<li> lain item daftar </ li>
</ Ul>






akan terlihat seperti ini di browser:
Sebuah item daftar
Daftar item lain

Contoh 8:


<ol>
<li> item daftar Pertama </ li>
<li> daftar item kedua </ li>
</ Ol>






akan terlihat seperti ini di browser:
Pertama daftar item
Kedua daftar item
Fiuh! Apakah itu semua?

Itu semua untuk saat ini. Sekali lagi, percobaan dan membuat halaman Anda sendiri menggunakan beberapa dari tujuh unsur yang baru Anda pelajari dalam pelajaran ini:


<strong> penekanan kuat </ strong>
teks Kecil <small> </ small>
<br /> Garis pergeseran
<hr /> garis horisontal
Daftar <ul> </ ul>
Daftar berurut <ol> </ ol>
<li> Daftar item </ li>

PENAMBAHAN ATRIBUT

Anda dapat menambahkan atribut ke sejumlah elemen.
Apa itu atribut?

Seperti yang Anda mungkin ingat, elemen memberi struktur dokumen HTML dan memberitahu browser bagaimana Anda ingin website Anda yang akan disajikan (misalnya, <br /> menginformasikan browser untuk membuat satu baris). Dalam beberapa elemen yang Anda dapat menambahkan informasi lebih lanjut. Informasi tambahan seperti ini disebut atribut.

Contoh 1:


<h2 style="background-color:#ff0000;"> persahabatan saya dengan HTML </ h2>






Atribut selalu ditulis dalam tag awal dan diikuti oleh tanda sama dengan dan rincian atribut ditulis antara koma terbalik. Titik koma setelah atribut untuk memisahkan perintah gaya yang berbeda. Kami akan kembali ke itu nanti.
Apa yang menangkap?

Ada atribut yang berbeda. Yang pertama Anda akan belajar adalah gaya. Dengan atribut style Anda dapat menambahkan tata letak pada website Anda. Misalnya warna latar belakang:

Contoh 2:


<html>


<head>
</ Head>


<body style="background-color:#ff0000;">
</ Body>


</ Html>






akan tampil halaman benar-benar merah di browser - pergi ke depan dan lihat sendiri. Kami akan menjelaskan secara lebih rinci bagaimana sistem warna bekerja dalam beberapa saat.

Perhatikan bahwa beberapa tag dan atribut menggunakan US ejaan warna yaitu bukan warna. Adalah penting bahwa Anda berhati-hati untuk menggunakan ejaan yang sama seperti yang kita gunakan dalam contoh-contoh dalam tutorial ini - jika tidak, browser tidak akan mampu memahami kode Anda. Juga, jangan lupa untuk selalu menutup koma terbalik (tanda kutip) setelah sebuah atribut.
Bagaimana halaman menjadi merah?

Dalam contoh di atas, kami meminta untuk warna latar belakang dengan kode "# ff0000". Ini adalah kode warna untuk merah menggunakan angka heksadesimal sehingga disebut (HEX). Setiap warna memiliki nomor sendiri heksadesimal. Berikut adalah beberapa contoh:


Putih: # ffffff
Hitam: # 000000 (nol)
Merah: # ff0000
Biru: # 0000FF
Hijau: # 00ff00
Kuning: # ffff00


Sebuah kode warna heksadesimal terdiri dari # dan enam digit atau huruf. Ada lebih dari 1000 kode HEX dan tidak mudah untuk mencari tahu yang kode HEX terikat pada warna tertentu. Untuk memudahkan kami telah membuat sebuah grafik dari 216 warna yang paling umum digunakan: 216 Web Bagan Warna Aman.

Anda juga dapat menggunakan nama bahasa Inggris untuk warna yang paling umum (putih, hitam, merah, biru, hijau dan kuning).

Contoh 3:


<body style="background-color: red;">






Cukup tentang warna. Mari kita kembali ke atribut.
Elemen yang dapat menggunakan atribut?

Atribut yang berbeda dapat diterapkan pada kebanyakan unsur.

Anda akan sering menggunakan atribut dalam tag seperti tag tubuh sementara Anda jarang akan menggunakan atribut dalam, misalnya, tag br sejak line break biasanya adalah line break tanpa parameter apapun untuk menyesuaikan.

Seperti halnya ada banyak unsur yang berbeda, jadi ada atribut yang berbeda. Beberapa atribut yang dibuat khusus untuk satu elemen tertentu sementara yang lain dapat digunakan untuk elemen yang berbeda. Dan sebaliknya: beberapa elemen hanya dapat berisi satu jenis atribut sementara yang lain dapat berisi banyak.

Ini mungkin terdengar sedikit membingungkan tetapi sekali Anda berkenalan dengan atribut yang berbeda hal ini sebenarnya sangat logis dan Anda akan segera melihat betapa mudahnya mereka untuk menggunakan dan berapa banyak kemungkinan mereka sediakan.

Tutorial ini akan memperkenalkan Anda ke atribut yang paling penting.
Tepat apa yang bagian tidak elemen terdiri dari?

Umumnya merupakan elemen terdiri dari tag pembuka dengan atau tanpa satu atau lebih atribut, beberapa konten dan tag akhir. Sederhana seperti itu. Lihat ilustrasi di bawah ini.


MEMBUAT LINK

Dalam pelajaran ini, Anda akan belajar bagaimana membuat link antar halaman.
Apa yang saya perlu untuk membuat link?

Untuk membuat link, Anda menggunakan apa yang Anda selalu menggunakan ketika coding HTML: elemen. Unsur sederhana dengan satu atribut dan Anda akan dapat link ke apa saja dan segalanya. Berikut adalah contoh dari apa yang link ke HTML.net bisa terlihat seperti:
Contoh 1:


<a href="http://robijefferson.blogspot.com/"> Berikut ini adalah link ke robijefferson.blogspot.com </ a>






Akan terlihat seperti ini di browser:
Berikut ini adalah link ke robijefferson.blogspot.com

Elemen berdiri untuk "jangkar". Dan atribut href merupakan kependekan dari "hypertext referensi", yang menentukan mana link mengarah ke - biasanya alamat di internet atau nama file.

Dalam contoh di atas href atribut memiliki nilai "http://robijefferson.blogspot.com/", yang merupakan alamat lengkap robijefferson.blogspot.com dan disebut URL (Uniform Resource Locator). Perhatikan bahwa "http://" harus selalu disertakan dalam URL. Kalimat "Berikut ini adalah link ke robijefferson.blogspot.com/" adalah teks yang ditampilkan dalam browser sebagai link. Ingatlah untuk menutup elemen dengan </ a>.
Bagaimana hubungan antara halaman saya sendiri?

Jika Anda ingin membuat link antara halaman di situs yang sama, Anda tidak perlu untuk menguraikan seluruh alamat (URL) untuk dokumen tersebut. Sebagai contoh, jika Anda telah membuat dua halaman (mari kita menyebut mereka page1.htm dan page2.htm) dan menyelamatkan mereka di folder yang sama Anda dapat membuat link dari satu halaman ke halaman lain dengan hanya mengetik nama file dalam link. Dalam keadaan seperti link dari page1.htm ke page2.htm bisa terlihat seperti ini:
Contoh 2:


href="page2.htm"> <a Klik di sini untuk ke halaman 2 </ a>






Jika halaman 2 ditempatkan dalam subfolder (bernama "subfolder"), link bisa terlihat seperti ini:
Contoh 3:


href="subfolder/page2.htm"> <a Klik di sini untuk ke halaman 2 </ a>






Sebaliknya, sebuah link dari halaman 2 (dalam subfolder) ke halaman 1 akan terlihat seperti ini:
Contoh 4:


href="../page1.htm"> <a Sebuah link ke halaman 1 </ a>






"../" Poin ke level satu folder naik dari posisi file dari link yang dibuat. Setelah sistem yang sama, Anda juga dapat titik dua (atau lebih) folder sampai dengan menulis "../../".

Apakah Anda memahami sistem? Atau, Anda selalu dapat mengetik alamat lengkap untuk file (URL).
Bagaimana dengan internal link dalam suatu halaman?

Anda juga dapat membuat link internal dalam halaman - misalnya daftar isi di atas dengan link ke setiap bab di bawah ini. Yang perlu Anda gunakan adalah atribut yang sangat berguna yang disebut id (identifikasi) dan simbol "#".

Gunakan atribut id untuk menandai elemen yang ingin Anda link. Sebagai contoh:


<h1 id="heading1"> pos 1 </ h1>






Anda sekarang dapat membuat link ke elemen yang dengan menggunakan "#" di atribut link. The "#" harus diikuti dengan id dari tag Anda ingin link ke. Sebagai contoh:


<a Tautan href="#heading1"> untuk heading 1 </ a>






Semua akan menjadi jelas dengan sebuah contoh:
Contoh 5:


<html>


<head>
</ Head>


<body>


<p> Tautan href="#heading1"> untuk heading 1 </ a> </ p>
<p> href="#heading2"> link ke pos 2 </ a> </ p>


<h1 id="heading1"> pos 1 </ h1>
<p> Teks teks teks </ p>


<h1 id="heading2"> judul 2 </ h1>
<p> Teks teks teks </ p>


</ Body>


</ Html>






akan terlihat seperti ini di browser (klik dua link):

Link ke pos 1

Link ke pos 2
Heading 1

Teks teks
Heading 2

Teks teks

(Catatan: Sebuah attribut id harus dimulai dengan huruf)
Dapatkah saya link ke hal lain?

Anda juga dapat membuat link ke alamat e-mail. Hal ini dilakukan di hampir dengan cara yang sama seperti ketika Anda link ke dokumen:
Contoh 6:


href="nnn@nnn.com"> <a Kirim e-mail kepada siapa pun di robijefferson.blogspot.com/ </ a>






akan terlihat seperti ini di browser:

Kirim e-mail ke seorang pun di robijefferson.blogspot.com/

Satu-satunya perbedaan antara link ke e-mail dan link ke file adalah bahwa alih-alih mengetik alamat dokumen, Anda ketik mailto: diikuti dengan alamat e-mail. Ketika link diklik, default program e-mail terbuka dengan pesan kosong baru ditujukan ke alamat e-mail tertentu. Harap dicatat bahwa fungsi ini hanya akan bekerja jika ada program e-mail yang diinstal pada komputer Anda. Mencobanya!
Apakah ada atribut lain saya harus tahu?

Untuk membuat link, Anda selalu harus menggunakan atribut href. Selain itu, Anda juga dapat menempatkan judul pada link anda:
Contoh 7:


<a href="http://robijefferson.blogspot.com/" title="Visit robijefferson.blogspot.com/ dan belajar HTML"> robijefferson.blogspot.com/ </ a>






Akan terlihat seperti ini di browser:

robijefferson.blogspot.com/

Atribut judul digunakan untuk mengetik deskripsi singkat link. Jika Anda - tanpa mengklik - tempatkan kursor di atas link, Anda akan melihat teks "robijefferson.blogspot.com/ Kunjungi dan belajar HTML" muncul.


MENAMBAKAN TABEL

Tabel digunakan ketika Anda perlu menunjukkan "data tabular" informasi yaitu yang logis disajikan dalam baris dan kolom.
Apakah sulit?

Bangunan tabel dalam HTML mungkin pada awalnya terlihat rumit tetapi jika Anda tetap tenang dan menonton langkah Anda, hal ini sebenarnya sangat logis - seperti segala sesuatu yang lain dalam HTML.

Contoh 1:


<table>
<tr>
<td> your 1 </ td>
<td> your 2 </ td>
</ Tr>
<tr>
<td> your 3 </ td>
<td> your 4 </ td>
</ Tr>
</ Table>






Akan terlihat seperti ini di browser: your 1 your 2
3 your your 4

Apa perbedaan antara <tr> dan <td>?

Seperti yang akan Anda lihat dari contoh di atas, ini mungkin adalah contoh HTML paling rumit yang diberikan kepada Anda sejauh ini. Mari kita jatuhkan itu dan menjelaskan tag yang berbeda:

3 elemen yang berbeda yang digunakan untuk menyisipkan tabel:
Membuka tag table dan tag penutup </ table> dimulai dan berakhir meja. Logis.
<tr> singkatan dari "baris tabel" dan mulai dan berakhir baris horizontal. Masih logis.
<td> adalah singkatan dari "data tabel". Tag ini dimulai dan berakhir setiap sel dalam baris tabel Anda. Semua sederhana dan logis.

Berikut adalah apa yang terjadi dalam Contoh 1: tabel dimulai dengan <table>, diikuti oleh <tr>, yang menunjukkan awal baris baru. Dua sel dimasukkan dalam baris ini: <td> your 1 </ td> dan <td> your 2 </ td>. Baris ini selanjutnya ditutup dengan </ tr> dan <tr> baris baru dimulai segera setelah. Baris baru juga berisi dua sel. Tabel ini ditutup dengan </ table>.

Hanya untuk membuatnya jelas: baris baris horisontal dari sel-sel dan kolom adalah garis vertikal sel: your 1 your 2
3 your your 4


Sel 1 dan 2 bentuk your baris. Sel 1 dan 3 bentuk your kolom.

Dalam contoh di atas, tabel memiliki dua baris dan dua kolom. Namun, tabel dapat memiliki jumlah tak terbatas baris dan kolom.

Contoh 2:


<table>
<tr>
<td> your 1 </ td>
<td> your 2 </ td>
<td> your 3 </ td>
<td> your 4 </ td>
</ Tr>
<tr>
<td> your 5 </ td>
<td> your 6 </ td>
<td> your 7 </ td>
<td> your 8 </ td>
</ Tr>
<tr>
<td> your 9 </ td>
<td> your 10 </ td>
<td> your 11 </ td>
<td> your 12 </ td>
</ Tr>
</ Table>






Akan terlihat seperti ini di browser: your 1 your 2 your 3 your 4
Your 5 your 6 your 7 your 8
9 cell your your 10 12 11 your

Apakah ada atribut?

Tentu saja ada atribut. Sebagai contoh, atribut perbatasan digunakan untuk menentukan ketebalan dari perbatasan sekitar meja Anda:

Contoh 3:


<table border="1">
<tr>
<td> your 1 </ td>
<td> your 2 </ td>
</ Tr>
<tr>
<td> your 3 </ td>
<td> your 4 </ td>
</ Tr>
</ Table>






Akan terlihat seperti ini di browser: your 1 your 2
3 your your 4


Ketebalan perbatasan ditentukan dalam piksel (Lihat Pelajaran 9)

Seperti dengan gambar, Anda juga dapat mengatur lebar tabel dalam pixel - atau alternatif dalam persentase layar:

Contoh 4:


<table border="1" width="30%">






Contoh ini akan ditampilkan dalam browser sebagai tabel dengan lebar 30% dari layar. Cobalah sendiri.
Atribut yang lebih?

Ada banyak atribut untuk tabel. Berikut adalah dua lebih:
align: menentukan keselarasan horizontal konten dalam seluruh tabel, dalam satu baris atau dalam sebuah sel tunggal. Misalnya, kiri, tengah atau kanan.
valign: menentukan alignment vertikal dari konten dalam sel. Sebagai contoh, atas, tengah atau bawah.

Contoh 5:


<td align="right" valign="top"> your 1 </ td>




Apa yang bisa saya masukkan dalam tabel saya?

Secara teori, Anda dapat memasukkan apa pun dalam tabel: teks, link dan gambar ... NAMUN tabel dimaksudkan untuk menyajikan data tabular (yaitu data yang dapat bermakna disajikan dalam kolom dan baris) sehingga menahan diri dari meletakkan hal-hal ke dalam tabel hanya karena Anda ingin mereka untuk ditempatkan di samping satu sama lain.

Pada hari-hari tua di Internet - yaitu beberapa tahun yang lalu - tabel sering digunakan sebagai alat tata letak. Tetapi jika Anda ingin mengontrol presentasi teks dan gambar ada cara yang lebih dingin untuk melakukannya (petunjuk: CSS). Tapi lebih tentang itu nanti.

Sekarang, menempatkan apa yang baru saja Anda pelajari untuk berlatih dan desain sejumlah tabel dalam berbagai ukuran, dengan atribut yang berbeda dan konten. Ini harus membuat Anda sibuk selama berjam-jam.


LEBIH LAGI MENGENAI TABEL

Judul "lebih lanjut tentang tabel" mungkin terdengar sedikit membosankan. Tapi lihat sisi positif, ketika Anda menguasai tabel, tidak ada apa-apa tentang HTML yang akan merobohkan Anda.
Apa yang tersisa?

Kedua atribut colspan dan rowspan digunakan ketika Anda ingin membuat tabel mewah.

Colspan adalah singkatan dari "rentang kolom". Colspan digunakan pada tag <td> untuk menentukan berapa banyak kolom sel harus rentang:

Contoh 1:


<table border="1">
<tr>
<td colspan="3"> your 1 </ td>
</ Tr>
<tr>
<td> your 2 </ td>
<td> your 3 </ td>
<td> your 4 </ td>
</ Tr>
</ Table>






Akan terlihat seperti ini di browser: your 1
Sel 2 your 3 your 4


Dengan pengaturan colspan untuk "3", sel di baris pertama mencakup tiga kolom. Jika kita telah menetapkan colspan bukan ke "2", sel hanya akan berlangsung dua kolom dan itu akan diperlukan untuk menyisipkan sel tambahan di baris pertama sehingga jumlah kolom akan muat dalam dua baris.

Contoh 2:


<table border="1">
<tr>
<td colspan="2"> your 1 </ td>
<td> your 2 </ td>
</ Tr>
<tr>
<td> your 3 </ td>
<td> your 4 </ td>
<td> your 5 </ td>
</ Tr>
</ Table>






Akan terlihat seperti ini di browser: your 1 your 2
3 your your 4 your 5

Bagaimana dengan rowspan?

Seperti yang Anda mungkin sudah menebak, rowspan menentukan berapa banyak baris sel harus rentang atas:

Contoh 3:


<table border="1">
<tr>
<td rowspan="3"> your 1 </ td>
<td> your 2 </ td>
</ Tr>
<tr>
<td> your 3 </ td>
</ Tr>
<tr>
<td> your 4 </ td>
</ Tr>
</ Table>






Akan terlihat seperti ini di browser: your 1 your 2
Sel 3
Sel 4


Dalam contoh di atas rowspan diatur ke "3" dalam your 1. Hal ini menetapkan bahwa sel harus rentang lebih dari 3 baris (baris sendiri plus dua tambahan). Sel 1 dan 2 adalah demikian your pada baris yang sama, sementara your 3 dan 4 your membentuk dua baris independen.

Bingung? Yah, tidak rumit dan mudah untuk kehilangan jejak. Oleh karena itu, mungkin ide yang baik untuk menarik tabel pada selembar kertas sebelum Anda mulai dengan HTML.

Tidak bingung? Kemudian pergi ke depan dan membuat beberapa tabel dengan kedua colspan rowspan dan Anda sendiri.

LAYOUT (CSS)

Bukankah lebih bagus jika Anda bisa memberikan Anda halaman tata letak mereka layak?
Tentu, tapi bagaimana?

Untuk memberikan website Anda tata letak menggunakan Cascading Style Sheets (CSS). Dalam pelajaran ini Anda akan mendapatkan pengenalan singkat untuk CSS. Tapi kemudian Anda dapat mempelajari semua tentang CSS dari awal dalam tutorial CSS kita. Jadi silahkan pertimbangkan pelajaran ini hanya sebagai hidangan pembuka.

CSS adalah setengah lebih baik dari HTML. Dan di coding, tidak ada persamaan status: HTML mengurus hal-hal kasar (struktur), sementara CSS memberi sentuhan yang bagus (tata letak).

Seperti ditunjukkan dalam Pelajaran 7, CSS dapat ditambahkan dengan atribut style. Sebagai contoh, Anda dapat mengatur jenis font dan ukuran pada paragraf:

Contoh 1:


<p style="font-size:20px;"> ini diketik dalam ukuran 20px </ p>
<p style="font-family:courier;"> ini diketik dalam Courier </ p>
<p style="font-size:20px; font-family:courier;"> ini diketik dalam ukuran 20px Courier </ p>






Akan terlihat seperti ini di browser:

Ini yang diketik dalam ukuran 20px

Ini yang diketik dalam Kurir

Ini yang diketik dalam ukuran 20px Kurir

Dalam contoh di atas kita menggunakan atribut style untuk menentukan jenis font yang akan digunakan (dengan perintah font-family) dan ukuran font (dengan perintah font-size). Perhatikan bagaimana dalam paragraf terakhir kami menetapkan kedua jenis font dan ukuran dengan titik koma memisahkan.
Tampaknya seperti banyak pekerjaan?

Salah satu fitur cerdas dari CSS adalah kemungkinan untuk mengatur tata letak Anda terpusat. Alih-alih menggunakan atribut style pada tag masing-masing, Anda dapat memberitahu browser sekali bagaimana harus tata letak semua teks pada halaman:

Contoh 2:


<html>


<head>
<title> halaman pertama saya CSS </ title>


<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: kurir;}
p {font-size: 8px; font-family: "Times New Roman";}
</ Style>


</ Head>


<body>
<h1> halaman pertama saya CSS </ h1>
<h2> Selamat datang di halaman pertama CSS </ h2>
<p> sini Anda dapat melihat bagaimana CSS bekerja </ p>
</ Body>


</ Html>




Tampilkan Contoh

Dalam contoh di atas CSS telah dimasukkan di bagian kepala dan karena itu berlaku untuk seluruh halaman. Untuk melakukan ini, hanya menggunakan tag <style type="text/css"> yang memberitahu browser yang Anda mengetik CSS.

Dalam contoh semua judul di halaman akan di Arial di 30px ukuran. Semua akan subjudul dalam ukuran Courier 15. Dan semua teks dalam paragraf normal akan di Times New Roman ukuran 8.

Pilihan lain adalah dengan mengetikkan CSS dalam dokumen terpisah. Dengan dokumen CSS yang terpisah Anda dapat mengatur tata letak banyak halaman sekaligus. Cukup cerdas jika Anda ingin mengubah jenis font atau ukuran pada situs web besar dengan ratusan atau ribuan halaman. Kami tidak akan masuk ke yang sekarang, tetapi Anda bisa belajar nanti dalam tutorial CSS kita.
Apa lagi yang bisa saya lakukan dengan CSS?

CSS dapat digunakan untuk lebih dari menentukan jenis font dan ukuran. Misalnya, Anda dapat menambahkan warna dan latar belakang. Berikut adalah beberapa contoh untuk Anda untuk bereksperimen dengan:


<p style="color:green;"> Hijau teks </ p>


<h1 style="background-color: blue;"> Pos pada latar belakang biru </ h1>


<body style="background-image: url('http://robijefferson.blogspot.com/logo.png');">






Cobalah memasukkan contoh dalam beberapa halaman Anda - baik sebagai ditunjukkan di atas dan juga sebagai CSS dimasukkan di bagian kepala.
Apakah CSS apa-apa kecuali warna dan jenis font?

Selain menambahkan tata letak seperti warna, font jenis dll, CSS juga dapat digunakan untuk mengontrol setup halaman dan presentasi (margin, float, keselarasan, lebar, tinggi dll). Dengan mengatur unsur-unsur yang berbeda dengan CSS Anda dapat tata letak halaman Anda elegan dan tepat.

Contoh 3:


<p red;"> style="padding:25px;border:1px padat aku mencintai CSS </ p>






Akan terlihat seperti ini di browser:

Saya suka CSS

Dengan properti float elemen baik dapat melayang ke kanan atau ke kiri. Contoh berikut mengilustrasikan prinsip:

Contoh 4:


<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />


<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh ut euismod tincidunt laoreet dolore
magna Aliquam volutpat erat. Ut WISI Enim iklan veniam minim,
Quis nostrud exerci tasi ullamcorper suscipit
lobortis nisl ut aliquip mantan ea commodo consequat ...</ p>





Akan terlihat seperti ini di browser:
Adherents.com takes no position regarding the validity of Hart's rankings. Certainly ranking the relative historical influence of individuals is a subjective process. We welcome and will by happy to post comments from readers suggesting alternative ... .

Dalam contoh ini, salah satu elemen (gambar) mengapung ke kiri dan elemen lainnya (teks) mengisi lubang.

Dengan posisi kekayaan, Anda dapat menempatkan sebuah elemen persis di mana Anda inginkan di halaman Anda:

Contoh 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />


Tampilkan Contoh

Dalam contoh gambar ditempatkan 50 pixel dari bawah dan 10 pixel dari kanan dalam browser. Tapi Anda bisa menempatkannya tepat di mana Anda inginkan. Mencobanya. Cukup mudah dan cukup keren, eh?
Keren, yakin. Tapi mudah?

Anda tidak belajar CSS dalam 10 menit. Dan seperti disebutkan di atas, pelajaran ini hanya dimaksudkan sebagai pengenalan singkat. Kemudian Anda akan belajar jauh lebih banyak dalam Tutorial CSS kita.

Untuk saat ini, berkonsentrasi pada HTML, dan beralih ke pelajaran berikutnya di mana Anda akan belajar bagaimana untuk mendapatkan website Anda keluar di Internet sehingga seluruh dunia bisa melihatnya!


MENG-UPLOAD HALAMAN

Nah Sampai sekarang kan, hanya Anda memiliki kepuasan melihat halaman Anda. Sekarang saatnya bagi seluruh dunia untuk melihat karya Anda.
Apakah dunia siap untuk itu?

Dunia siap - Anda akan segera juga. Untuk mendapatkan website Anda di internet, Anda hanya perlu beberapa ruang server dan program FTP gratis.

Jika Anda memiliki akses Internet, Anda mungkin sudah memiliki beberapa ruang server gratis untuk website Anda. Ruang server Anda kemudian akan mungkin akan disebut sesuatu seperti http://home.provider.com/ ~ usernumber. Tapi Anda mungkin perlu untuk mengaktifkannya terlebih dahulu. Baca lebih lanjut tentang ini di koran dari penyedia internet Anda atau pada halaman dukungan mereka.

Pilihan lain adalah untuk mendapatkan beberapa ruang server gratis di Internet. Dengan cara yang sama bahwa Anda membuat account e-mail (di untuk Hotmail misalnya), Anda dapat mendaftar untuk ruang server gratis di Internet. Beberapa perusahaan menawarkan layanan tersebut - di antara mereka 000webhost.com (klik "Order Now" di bawah "Hosting Gratis") - hanya akan mengambil beberapa menit untuk mendaftar.

Untuk memiliki akses ke server, Anda perlu mengetahui "Host Name" (Sebagai contoh, ftp.htmlnet.site50.net) dan memiliki username dan password Anda siap.
Apakah itu semua saya butuhkan?

Untuk mengakses server dan meng-upload halaman Anda, Anda juga memerlukan program FTP. FTP adalah singkatan dari File Transfer Protocol. Sebuah program FTP digunakan untuk menghubungkan dua komputer melalui Internet sehingga Anda dapat mentransfer file dari komputer Anda ke komputer lain (server). Anda mungkin tidak memiliki program seperti ini, tapi untungnya, ini dapat didownload secara gratis.

Ada banyak program FTP yang berbeda. Salah satu yang lebih baik adalah filezilla, yang sepenuhnya bebas. Jadi sekarang Anda dapat men-download filezilla di filezilla.sourceforge.net.
Dan bagaimana saya meng-upload halaman?

Diuraikan di bawah ini adalah bagaimana Anda meng-upload halaman Anda ke account gratis di 000webhost.com dengan filezilla. Tetapi prosedur ini, lebih atau kurang, sama untuk semua provider dan program FTP.


Buka program FTP saat terhubung ke Internet. Masukkan "Host Name" ("ftp.htmlnet.site50.net" di bawah "Alamat"), nama pengguna (di bawah "Pengguna") dan password (di bawah "Password") dan klik "Connect". Anda sekarang harus memiliki akses ke server. Di satu sisi program ini Anda dapat melihat isi dari komputer Anda ("Situs Lokal"), dan di sisi lain, Anda dapat melihat isi dari server ("Remote Site"):




Temukan dokumen HTML dan gambar pada komputer Anda (pada "situs lokal") dan mentransfernya ke server (yang "situs Remote") dengan mengklik ganda pada mereka. Sekarang seluruh dunia dapat melihat mereka! (Sebagai contoh, pada http://htmlnet.site50.net/page1.htm alamat).

Salah satu halaman "index.htm" (atau "index.html") dan akan secara otomatis menjadi halaman awal nama. yaitu jika Anda mengetik http://htmlnet.site50.net (tanpa nama file apapun) Anda benar-benar akan terbuka http://htmlnet.site50.net/index.htm.

Dalam jangka panjang, mungkin ide yang baik untuk membeli domain Anda sendiri (misalnya www.your-name.com atau www.your-name.net) dan menghindari alamat panjang dan rumit Anda sedang ditugaskan oleh penyedia Internet Anda atau dari penyedia ruang server gratis. Anda dapat menemukan dan membeli domain di untuk Speednames contoh atau NetworkSolutions.


WEB STANDAR DAN VALIDASI

Dalam pelajaran ini, Anda akan mendapatkan sedikit pengetahuan tentang HTML lebih teoritis.
Apa lagi yang tahu tentang HTML?

HTML dapat dikodekan dalam berbagai cara. Dan browser dapat membaca HTML dengan cara seperti banyak. Anda bisa mengatakan bahwa HTML memiliki banyak dialek. Itulah mengapa beberapa website terlihat berbeda di browser yang berbeda.

Ada upaya untuk membuat standar umum dari HTML melalui World Wide Web Consortium (W3C) didirikan oleh Tim Berners-Lee (yep! orang besar yang menciptakan HTML). Tapi itu telah menjadi jalan panjang dan sulit.


Di hari tua - ketika browser di mana sesuatu yang Anda harus membayar untuk - Netscape adalah browser yang mendominasi. Kembali kemudian, standar HTML paling didukung di mana disebut 2,0 dan kemudian 3,2. Tapi dengan pangsa pasar lebih dari 90% Netscape tidak perlu - dan tidak - peduli tentang standar umum. Sebaliknya, Netscape menciptakan unsur-unsur mereka sendiri yang aneh, yang tidak berfungsi di browser lainnya.

Selama bertahun-tahun Microsoft hampir sama sekali diabaikan Internet. Setelah beberapa saat mereka mengambil persaingan dengan Netscape dan memperkenalkan browser. Versi pertama dari browser Microsoft, Internet Explorer, yang tidak lebih baik dari Netscape untuk mendukung standar HTML. Tapi Microsoft memilih untuk memberikan browser mereka secara gratis (selalu hal yang populer untuk melakukannya) dan Internet Explorer segera menjadi browser yang paling populer.

Dari versi 4 dan 5 Microsoft bertujuan untuk mendukung lebih banyak dan lebih dari standar HTML dari W3C. Netscape tidak berhasil mengembangkan sebuah versi baru dari browser mereka dan terus mendistribusikan 4 versi kuno.

Sisanya adalah sejarah. Hari ini standar HTML disebut 4.01 dan XHTML. Sekarang Internet Explorer yang memiliki pangsa pasar lebih dari 90%. Internet Explorer masih memiliki unsur sendiri aneh tapi itu juga mendukung standar W3C HTML. Dan begitu juga semua browser lain, seperti Mozilla, Opera dan Netscape.

Jadi, ketika Anda kode HTML mengikuti standar W3C, Anda membuat website yang dapat dilihat di semua browser - baik sekarang dan di masa depan. Dan untungnya, apa yang Anda pelajari dalam tutorial ini adalah versi baru dan lebih ketat dan bersih dari HTML disebut XHTML.
Bagaimana cara mengetahui versi yang digunakan?

Dengan semua jenis HTML Anda perlu memberitahu browser yang "dialek" adalah HTML Anda, dalam XHTML kasus Anda. Untuk melakukan itu, Anda menggunakan Document Type Deklarasi. Deklarasi Tipe Dokumen selalu ditulis di atas dokumen:

Contoh 1:

<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"!
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">


<head>
<title> Judul </ title>
</ Head>


<body>
<p> teks </ p>
</ Body>


</ Html>






Selain Deklarasi Tipe Dokumen (baris pertama dalam contoh di atas), yang memberitahu browser bahwa Anda ingin menulis XHTML, Anda juga perlu untuk memasukkan beberapa informasi tambahan pada tag html dengan dua atribut xmlns dan lang.

xmlns adalah singkatan dari "XML-Space Nama-" dan selalu harus memiliki http://www.w3.org/1999/xhtml nilai. Itu semua yang perlu Anda ketahui. Tapi jika Anda memiliki rasa lapar yang besar untuk pengetahuan rumit Anda dapat membaca lebih lanjut tentang ruang nama di situs W3C.

Dalam atribut lang Anda negara yang bahasa dokumen tertulis masuk Untuk ini standar ISO yang digunakan 639, yang berisi kode untuk semua bahasa di dunia. Dalam contoh di atas bahasa diatur ke bahasa Inggris ("en").

Dengan DTD browser tahu persis bagaimana harus membaca dan menunjukkan HTML Anda. Oleh karena itu, gunakan contoh diatas sebagai template untuk semua dokumen HTML masa depan Anda.

DTD juga penting ketika Anda ingin memvalidasi halaman Anda.
Validasi? Mengapa dan bagaimana saya harus melakukannya?

Masukkan DTD di halaman Anda dan Anda selalu dapat memeriksa HTML Anda untuk kesalahan dengan menggunakan validator W3C gratis.

Untuk menguji ini, membuat halaman dan meng-upload ke Internet. Sekarang, pergi ke validator.w3.org dan ketik alamat (URL) dari halaman Anda dan memvalidasi itu. Jika HTML Anda benar Anda akan mendapatkan pesan selamat. Jika tidak, anda akan mendapatkan laporan kesalahan memberitahu Anda persis apa dan di mana Anda telah melakukan sesuatu yang salah. Membuat beberapa kesalahan pada tujuan untuk melihat apa yang terjadi.

Validator tidak hanya membantu untuk menemukan kesalahan. Beberapa browser mencoba untuk mengkompensasi kurangnya keahlian di antara para pengembang web dengan mencoba untuk memperbaiki kesalahan dalam HTML dan menunjukkan halaman karena mereka kira itu harus terlihat. Dengan browser tersebut, Anda mungkin tidak pernah melihat kesalahan dalam browser Anda sendiri. Namun, browser lain bisa menebak berbeda atau tidak menampilkan halaman sama sekali. Validator dapat membantu Anda menemukan kesalahan Anda bahkan tidak tahu ada.

Selalu memvalidasi halaman Anda untuk memastikan bahwa mereka selalu akan ditampilkan dengan benar.


TIPS FINAL

Selamat, Anda sekarang telah mencapai akhir pelajaran.
Jadi sekarang aku tahu semuanya?

Anda telah belajar banyak dan Anda sekarang mampu membuat website Anda sendiri! Namun, apa yang Anda pelajari adalah dasar-dasar dan masih banyak lagi yang harus dikuasai. Tapi Anda sekarang memiliki dasar yang baik dari yang untuk membangun.


Dalam pelajaran terakhir, Anda akan mendapatkan beberapa tips akhir:
Pertama, itu adalah ide yang baik untuk menjaga ketertiban dan struktur dalam dokumen HTML Anda. Dengan posting dokumen diatur dengan baik Anda tidak hanya akan menunjukkan pada orang lain penguasaan Anda dari HTML, tetapi juga akan membuat jauh lebih mudah untuk diri sendiri untuk menjaga gambaran umum.
Menempel pada standar dan memvalidasi halaman Anda. Hal ini tidak dapat ditekankan cukup: Selalu menulis XHTML bersih, menggunakan DTD dan memvalidasi halaman Anda pada validator.w3c.org.
Berikan isi halaman Anda. Ingat bahwa HTML adalah alat, yang memungkinkan Anda untuk menyajikan informasi di Internet, jadi pastikan bahwa ada informasi untuk hadir. Halaman cukup mungkin terlihat bagus tapi kebanyakan orang menggunakan internet untuk mencari informasi.
Hindari overloading halaman Anda dengan gambar yang berat dan barang-barang mewah lain yang Anda telah menemukan di Internet. Ini memperlambat loading halaman dan dapat membingungkan bagi pengunjung. Halaman yang mengambil lebih dari 20 detik untuk memuat dapat kehilangan hingga 50% dari pengunjung mereka.
Ingatlah untuk menambahkan situs Anda ke mesin pencari / direktori sehingga orang lain selain keluarga terdekat Anda dapat menemukan dan menikmatinya. Pada halaman depan semua mesin pencari, Anda akan menemukan sebuah link untuk menambahkan halaman baru (Yang paling penting adalah Google, tapi ada juga orang lain seperti DMOZ, Yahoo, Altavista, AlltheWeb dan Lycos).
Dalam tutorial ini, Anda telah belajar untuk menggunakan Notepad, yang merupakan editor sederhana dan sangat mudah digunakan, tapi mungkin Anda akan merasa terbantu untuk menggunakan editor yang lebih canggih yang memberikan gambaran yang lebih baik dan lebih banyak kemungkinan. Anda dapat menemukan ringkasan dan review dari editor yang berbeda pada Download.com.
Bagaimana saya belajar lebih banyak?


Pertama-tama, penting bahwa Anda terus bekerja dan bereksperimen dengan hal-hal yang telah Anda pelajari dalam tutorial ini. Studi situs orang lain dan jika Anda menemukan sesuatu yang Anda sukai melihat bagaimana itu dibuat dengan "View Source" (Klik "View" pada menu di browser Anda dan pilih "Source").



Cari di Internet untuk contoh dan artikel tentang HTML. Ada banyak situs dengan isi yang besar pada HTML.

Membaca dan mengajukan pertanyaan di Forum. Ini adalah di mana Anda bertemu dengan para ahli yang nyata dari siapa Anda bisa belajar banyak.

Terakhir, namun tidak sedikit, Anda harus - setiap kali Anda merasa siap - terus belajar CSS di CSS Tutorial kami.

Satu-satunya yang tersisa adalah berharap Anda jam menyenangkan dengan teman baru Anda, HTML.

Lihat Anda di dunia maya. 


-SELAMAT MENCOBA-
-SEMOGA BERMANFAAT-

Knowledge About HTML