Tutorial HTML5 Lengkap (Part 2)


Ada tiga jenis daftar. Dua yang pertama bullet dan daftar bernomor. Dengan tag terebut digunakan untuk membuat daftar list, dengan CSS3 tag tersebut dapat dimodif sedemikina rupa, seperti mengganti bullet dengan image. tapi disini saya tidak akan memberi penjelasannya, saya akan memberikan contoh dasar saja.
UL – Unordered lists:
Contoh:

  •     Apel
  •     Jeruk
  •     Pisang
Kode untuk UL:
  1. <ul>
  2. <li></code>List item 1<code></li>
  3. <li></code>List item 2<code></li>
  4. </ul>
OL – Ordered Lists:
Contoh:
  1.     Satu
  2.     Dua
  3.     Tiga
Kode untuk OL:
  1. <ol>
  2. <li></code>List item 1<code></li>
  3. <li></code>List item 2<code></li>
  4. </ol>
Daftar dapat “bersarang” atau masukkan ke dalam satu sama lain.
    Buah-buahan :
  •         Jeruk
  •         Pisang
    Sayur-sayuran:
  •         Sawi
  •         Bayam
Hati-hati untuk menutup tag dalam urutan terbalik mereka dibuka, dan dengan daftar itu bisa membingungkan. Caranya adalah dengan indent kode Anda. Lihatlah kode sumber halaman ini dan Anda akan melihat apa maksud saya.

Daftar definisi:
Daftar definisi adalah sedikit lebih rumit daripada tag ul atau ol. Daripada memiliki  bullet atau angka itu indentasi seperti ini

DL Code:
  1. <dl>
  2.    <dt>Term 1</dt>
  3.      <dd>Definition of term 1</dd>
  4.    <dt>Term 2</dt>
  5.     <dd>Definition of term 2</dd>
  6. </dl>
Ingat, pengunjung cenderung terpaku dengan halaman pertama dan kemudian, jika tertarik, melanjutkan untuk membacanya. Daftar adalah salah satu cara untuk cepat memberitahu audiens Anda apakah konten Anda relevan dengan apa yang mereka inginkan. Jika Anda akan; “apakah itu menggaruk gatal mereka?” Mungkin tidak (kenyataannya sering tidak), tetapi jika tidak itu harus jelas dalam sekejap!

Membuka halaman baru dalam Notepad atau editor teks apapun yang Anda gunakan dan paste apa yang Anda hanya disalin ke dalam halaman dan menyimpannya sebagai-kedua webpage.html mana pun Anda menyimpan-pertama  webpage.html (mungkin desktop Anda).

Cobalah mengubah kode untuk menyertakan daftar bersarang. Pindahkan beberapa hal di sekitar dan melihat apa yang terjadi. Selalu ingat untuk menutup tag dengan urutan mereka dibuka dan ketika Anda membuat perubahan pastikan untuk menyimpan file sebelum Anda membukanya di browser Anda.

Membuat Hyperlink, atau link :
Hyperlink, atau link, adalah bagaimana Anda bergerak di sekitar web. Sebuah tag Anchor adalah bagaimana Anda membuat hyperlink dalam HTML.

Tag Anchor adalah alat yang sederhana dan elegan yang kuat – dengan nama yang sama sekali berlawanan.

Tidak diragukan lagi seseorang entah dimana memiliki beberapa alasan untuk nama itu “Anchor” tapi aku tidak bisa membayangkan mengapa. Dictionary.com mendefinisikan Anchor sebagai “perangkat untuk berpegang teguh atau memeriksa bergerak”. Tag anchor melakukan apa pun tanpa kecuali.

Sementara ia bisa dilakukan dengan kamus, siapa pun berpikir itu brilian. Dia membuat internet lebih dari mungkin.

Bila Anda klik pada link komputer Anda (klien) dan meminta komputer lain (server) untuk mengirim file. Ketika semua dikatakan dan dilakukan itu saja yang benar-benar terjadi.

Selalu diingat fakta bahwa segala sesuatu di internet disimpan sebagai file di komputer yang terhubung ke internet. Ada “local” file, atau file di komputer Anda, dan kemudian ada miliaran file pada server di seluruh planet ini.

Bagi Anda untuk mendapatkan ke halaman ini Anda mengklik link pada beberapa halaman lainnya dan mengirim sebuah permintaan untuk pergi ke sebuah komputer (server saya) bernama : misal “css-weaver.com” * untuk mengirimkan file yang bernama “tag-htm “..

Komputer Anda tahu bahwa file “a-tag.htm” adalah halaman Web karena memiliki “htm”. Ekstensi (html bekerja sama.) Dan membukanya di browser Anda untuk memudahkan anda.

Kode untuk link (a-tag) untuk halaman ini terlihat seperti ini:
  • <a href="http://terusmaju-asthok.blogspot.com/">a tag</a>

Ini mencakup ** URL unik dari halaman ini: (http://terusmaju-asthok.blogspot.com/)

Mana yang apa yang Anda lihat di address bar di bagian atas halaman ini.

Ketika Anda tidak mengubah domain (mis. server berubah), Anda dapat mempersingkat link untuk hanya menyertakan *** nama file:
  • <a href="anchor-tag-tutorial-html5-untuk-pemula">a tag tutorial</a>
Jika tidak ada nama file yang disertakan dalam URL diasumsikan untuk menjadi indeks atau halaman home.
  • <a href="http://terusmaju-asthok.blogspot.com/"> XYZ </a>
Teks atau gambar (akan kita lihat nanti), bisa dilihat ke mana saya menulis “XYZ”. “XYZ” – apa yang di dalam tag a – tidak berpengaruh pada di mana link tersebut akan membawa Anda. Namun itu tidak memberitahu pengunjung di mana mereka akan pergi jika mereka mengklik link.

Sekarang kita akan menempatkan keterampilan baru Anda ke dalam suatu tindakan.

Pada titik ini Anda telah membuat dua halaman: my-first-webpage.html dan my-second-webpage.html. Idealnya Anda telah save dengan baik di tempat yang sama dan suatu tempat Anda akan dapat menemukan mereka lagi. Jika tidak, Anda dapat menemukan mereka dalam source code ini halaman.

Pergi ke desktop Anda dan buat folder bernama “my-page-Web” kemudian pindahkan kedua halaman Web Anda ke folder itu.

Sekarang buka my-first-webpage.html dalam editor teks (bukan MS Word) dan setelah

halaman web pertama saya ditambahkan :
  • <a href="Aripasola.htm" target="_blank">  </a>

Meskipun Anda berada di dalam itu mengubah Webpage Kedua Saya untuk my-first-webpage .

save my-first-webpage.html dan buka di browser Anda. Untuk melakukan itu pada PC pergi ke desktop Anda, klik pada folder “my-first-webpage” dan klik pada file “my-first-webpage.html“. Klik pada link “Halaman Web Kedua Saya” dan harus terbuka pada browser Anda.

Sekarang buka “Aripasola.html” dan menambahkan link ke “Aripasola1.html”. Buka (atau refresh) my-second webpage.html pada browser Anda dan sekarang Anda dapat beralih bolak-balik antara dua halaman. Saya memiliki contoh di bawah ini masing-masing:

Aripasola.htm
Aripasola1.htm

Saya telah menambahkan sedikit kode: target = “_blank” untuk memiliki halaman terbuka di tab terpisah. Tutup tab tersebut untuk kembali ke sini.

Jika Anda mengalami masalah pastikan Anda menyelamatkan mereka sebagai html (bukan txt atau sesuatu yang lain.), Pastikan mereka berada di folder yang sama dan penggunaan yang tak kalah editor teks -. bukan dengan MS Word.

Anda akan melihat saya memiliki semua link di situs ini dalam daftar unordered. Sebagai latihan mengubah link Anda berada dalam tag

Akhirnya membuat halaman ketiga dengan link ke dua halaman sebelumnya. Tambahkan link dari semua tiga halaman untuk ketiga, Anda memiliki awal dari situs web pertama Anda. Dasar mereka mungkin, tapi Anda pasti di jalan!

Membuat Tag tabel :
Tag tabel digunakan untuk menampilkan informasi dalam baris dan kolom. Meskipun tidak sulit untuk dimengerti, itu dapat sedikit sulit untuk mempelajari semuanya, membuka dan menutup dengan urutan yang benar.
Table Code :
  1. <table>
  2. <tr>
  3. <td>Row 1 - Col 1</td>
  4. <td>Row 1 - Col 2</td>
  5. </tr>
  6. <tr>
  7. <td>Row 2 - Col 1</td>
  8. <td>Row 2 - Col 2</td>
  9. </tr>
  10. </table>

hasilnya akan seperti berikut :
Row 1 – Col 1     Row 1 – Col 2
Row 2 – Col 1     Row 2 – Col 2

tampilan di atas ini merupakan tampilan yang mengikuti css dari theme blog ini, jika diketikkan pada html hasilnya akan membentuk table bergaris seperti dibawah ini :
 table
tableDi dalam tag table ada <tr> atau tag  baris tabel yang pada gilirannya berisi tag <td> atau sel tabel.

Data yang masuk sel <td>. Bahwa data dapat berupa teks, tag lain atau apa pun. Ingat bahwa pertama datang table, maka <tr>, dan selanjutnya <td>.

Salin tabel di atas dan paste ke salah satu halaman yang Anda buat sebelumnya. Jika Anda melewatkan pelajaran itu (…) kita lihat beberapa kode dibawah ini. Copykan pada file html. dan lihat hasilnya :
Multiple Rows (baris) :
  1. <table>
  2. <tr>
  3. <td>Row 1 - Col 1</td>
  4. <td rowspan="2">Row 1 & Row 2 - Col 2</td>
  5. </tr>
  6. <tr>
  7. <td>Row 2 - Col 1</td>
  8. </tr>
  9. </table>
Multiple Columns (kolom): 
  1. <table>
  2. <tr>
  3. <td colspan="2">Row 1 - Col 1 & Col 2</td>
  4. </tr>
  5. <tr>
  6. <td>Row 2 - Col 1</td>
  7. <td>Row 2 - Col 2</td>
  8. </tr>
  9. </table>
Combination (kombinasi) = Ruwet :
  1. <table>
  2. <tr>
  3. <td>Row 1 - Col 1</td>
  4. <td>Row 1 - Col 2</td>
  5. <td>Row 1 - Col 3</td>
  6. <td rowspan="4">Row 1, 2, 3 & 4 - Col 4</td>
  7. </tr>
  8. <tr>
  9. <td>Row 2 - Col 1</td>
  10. <td colspan="2" rowspan="3">Row 2, 3 & 4 - Col 2 & 3</td>
  11. </tr>
  12. <tr>
  13. <td>Row 3 - Col 1</td>
  14. </tr>
  15. <tr>
  16. <td>Row 4 - Col 1</td>
  17. </tr>
  18. <tr>
  19. <td colspan="2">Row 5 - Col 1 & 2</td>
  20. <td colspan="2">Row 5 - Col 3 & 4</td>
  21. </tr>
  22. <tr>
  23. <td colspan="4">Row 6 - Col 1, 2, 3 & 4</td>
  24. </tr>
  25. </table>
Seperti yang saya katakan, tabel bisa rumit – dan tidak mudah dilakukan. Selain tag <tr> dan <td> ada:
  1.          <th> – header Tabel
  2.          <colgroup> – Grup Kolom
  3.          <thead> – Kepala Tabel
  4.          <tbody> – body Tabel
  5.          <tfoot> – Tabel foot



Nanti akan datang ketika Anda ingin membuat tabel dengan semua lonceng dan peluit “berbunyi”, sehingga ada baiknya untuk tahu bahwa tag table itu ada, tapi sebagai pemula Anda tidak membutuhkan tag ini.

Juga, Anda harus tahu bahwa dalam HTML 4.01 tabel bisa memiliki berbagai atribut. Tag table pembukaan tampak seperti ini:
1
   
<table cellpadding="5" cellspacing="5" border="1">

html5 logo tutorial pemulaDalam HTML5 atribut-atribut (warna kuning) telah dieliminasi. Gunakan CSS sebagai gantinya. Hal ini tentu saja mengasumsikan Anda tahu CSS (yang mungkin anda tidak ketahui) tetapi mengambil info dari log ini, desain web adalah lebih baik tanpa nya. Saya akan memperkenalkan CSS pada halaman berikutnya.

Seperti yang saya katakan di atas, mendapatkan tabel yang tepat dapat menjadi sakit di leher. Salah satu atribut yang akan dihilangkan tetapi tidak bisa adalah atribut perbatasan. Saya sering menambahkan atribut perbatasan (<table border=”1″>) untuk mendapatkan meja debugged dan kemudian lepaskan (table) ketika siap untuk menerbitkan. Jika Anda ingin menempatkan perbatasan di penggunaan CSS tabel.

Ambil dan sisihkan waktu dan bermain lah dengan tabel. Salin dan sisipkan tabel di atas ke dalam halaman web Anda, kemudian mengedit nya dan lihat apa yang terjadi. Seperti halaman web biasanya dirancang dalam kolom dan baris itu tergoda untuk menggunakan tabel untuk layout halaman (jangan gunakan table untuk layout).

web pages tidak selalu membaca tabel juga, sehingga mereka dapat secara negatif mempengaruhi SEO. Tabel harus benar-benar didownload sebelum ditampilkan dan dapat meninggalkan pengunjung menatap layar kosong. Sebuah table besar yang rumit bisa menjadi mimpi buruk untuk debug, terutama jika Anda belum melihat untuk sementara waktu.

Tabel adalah cara yang bagus untuk meletakkan data yang keluar. Orang terbiasa melihat informasi dalam baris dan kolom. tabel adalah alat penting dan kuat – tetapi jangan mencoba untuk melakukan terlalu banyak. Tetap sederhana.

memperkenalkan HTML simantik :
kemajuan besar dari HTML 4.01. Kedua elemen tag membuat teks tebal. Dalam hal presentasi mereka adalah identik. Jadi mengapa memiliki dua elemen yang melakukan hal yang sama?

Mereka mungkin terlihat sama bagi manusia, tetapi web crawler atau bot berbeda – kedua audien penting tetapi- melihat sesuatu yang sangat berbeda. Ketika spider mesin pencari menganalisa sebuah halaman, teks dalam tag strong dianggap penting. tetapi bagi audien kebanyakan tag b dan tag strong adalah sama.

silahkan coba script ini:
  1. <strong>Ini adalah teks tebal dalam tag strong.</strong>
  2. <b>Ini adalah teks tebal dalam tag b. </b>
  3. <strong> Teks ini ditebalkan </strong> adalah dalam tag strong.
  4. <b> Teks ini ditebalkan </b> adalah dalam tag b.

Hasilnya seperti berikut:
  1. Ini adalah teks tebal dalam tag strong.
  2. Ini adalah teks tebal dalam tag b.
  3. Teks ini ditebalkan adalah dalam tag strong.
  4. Teks ini ditebalkan adalah dalam tag b.

Dengan menempatkan “Sebuah kata” adalah dalam tag strong Anda mengatakan bahwa crawler “Kata Tersebut” penting dari segi makna halaman, dalam tag strong, Menempatkan “Sebuah Kata” dalam tag strong memberi “kata kuat” berat semantik.

Kamus mendefinisikan semantik sebagai “studi tentang makna“. Pada semantik web menempatkan yang berarti ke dalam HTML – yang berarti mesin pencari dapat digunakan untuk mengevaluasi suatu halaman SEO.

Semantik tidak baru di HTML5. Web desainer selalu memiliki tingkat kontrol dari apa yang bot lakukan dan tidak menilai signifikan. Misalnya, apa saja dalam tag telah dianggap lebih penting dari pada sesuatu tanpa tag, tetapi HTML5 mengambil semantik ke tingkat yang baru.

Salah satu perubahan terbesar di HTML5 lebih dari versi sebelumnya adalah penambahan elemen baru “bagian”: header, nav, artikel, footer, samping dan div. Untuk pengunjung situs mereka bekerja sama sebagai tag strong dan div (yang kita belajar berikutnya, diikuti oleh unsur-unsur bagian).

secara semantik netral. Unsur-unsur bagian baru memberi makna pada konten mereka.

Sayangnya apa yang berarti bahwa tidak semua jelas – setidaknya belum. Saya pikir kita bisa menganggap sesuatu di header membawa lebih berat daripada sesuatu di footer, tapi saya belum menemukan aturan mana yang dinyatakan secara eksplisit. **

Dugaan saya adalah bahwa dengan waktu, penggunaan akan membentuk apa berarti apa. Memasukkan semantik ke HTML5 adalah ide yang baik – sebuah gagasan yang perlu harus lebih dewasa dan berkembang.

Tidak perlu menunggu untuk mengambil keuntungan dari semantik HTML5, bahkan jika itu adalah sedikit samar-samar. Anda dapat menggunakan unsur-unsur strong dan b (dalam tag stong) seperti yang saya sarankan dan mengadopsi unsur-unsur bagian baru sekarang akan membuat situs Anda ke depan kompatibel untuk tahun-tahun mendatang. Dengan satu peringatan kecil (lihat di bawah ***), unsur-unsur bagian baru yang kompatibel dengan semua browser modern.

Selamat datang di kancah persaingan semantik web. Perlu diingat bahwa Anda belajar HTML5 sementara masih dalam tahap desain – dan sekarang adalah waktu untuk melakukannya, tetapi setiap perangkat lunak “dalam versi beta” memiliki Kinks dalam karya.


Sejak awal internet hampir semua situs telah memiliki “header”. Di situs ini, seperti dengan sebagian besar situs, header adalah di bagian atas setiap halaman. Di sana Anda akan melihat apa halaman sekitar – apa yang dilakukannya. Praktek ini telah menjadi begitu luas, HTML5 memiliki elemen <header> baru untuk menggantikan tag div yang sebagian besar mengisi peran sejauh ini.

Catatan dibahwa ini adalah elemen yang sama sekali baru dengan tujuan yang berbeda dibandingkan baik “tag header” (<h1> untuk <h6>) atau tag <head>. Ya, itu membingungkan.

Ini adalah salah satu dari sejumlah elemen baru HTML5 yang bagian, bagian penting dari semantik web HTML5 * Mereka adalah “bagian” dengan cara yang sama bahwa pemasaran atau departemen sumber daya manusia adalah “bagian” dari sebuah bisnis.. Tag seperti mendefinisikan apa bagian yang berbeda dari konten halaman dan bagaimana mereka berbagai bagian terkait. Dengan berjalannya waktu hampir semua halaman akan memiliki <header>, <nav>, <article> dan bagian <footer> minimal.

Tidak diragukan lagi Anda telah mendengar banyak tentang bagaimana HTML5 akan merevolusi internet – elemen baru yang menarik dan kuat yang akan mengubah segalanya. Ini semua benar, namun elemen header terlalu menjemukan untuk mengobarkan semangat banyak. Maaf, saya bisa menjadi orang yang menyenangkan akhirnya … tapi belum.

Kita akan mulai dengan sesuatu yang mungkin kurang kehebohan, tetapi jauh lebih penting:

Itu fakta menyedihkan bahwa ada puluhan jutaan situs web (banyak beberapa pengisap miskin membayar uang untuk) dengan segala macam lonceng dan peluit yang hampir tidak ada. Masalah mereka adalah bahwa mereka tidak muncul cukup tinggi dalam hasil pencarian. Mereka menjadi peringkat buruk dengan mesin pencari karena SEO buruk. Kebenaran yang sederhana adalah bahwa situs web dengan lalu lintas tidak ada artinya.
 
Mengenal header :
Ketika Anda membuat situs selalu tetap keberatan dengan kenyataan bahwa website memiliki dua penonton. Salah satunya adalah manusia, web crawler atau bot lainnya, seperti Googlebot. Manusia pandai menilai halaman web dengan cepat -. Terutama bila dirancang dengan baik ** Namun itu tidak begitu mudah untuk bot. Elemen header yang memberitahu crawler apa yang ada di header. Sampai sekarang mereka harus menebak.

Dengan kata lain, unsur-unsur baru ini membantu bots melihat situs lebih seperti orang. Para bots sekarang dapat mengevaluasi relevansi blok teks berdasarkan pada elemen di mana mereka ditemukan. Pada risiko terlalu menyederhanakan sesuatu yang sangat kompleks, sesuatu di header membawa lebih berat dalam hal SEO daripada itu akan berada dalam mengatakan, footer. ***

Mesin pencari ingin memberikan hasil pencarian yang paling relevan pertama. Anda ingin bahwa untuk menjadi situs Anda. Tag header dan elemen bagian Anda akan belajar pada beberapa halaman berikutnya adalah alat yang dapat digunakan untuk membantu Google dan mesin pencari lainnya melakukan hal itu.
Diposkan oleh di
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)