. .

WEB DESIGN : Memulai Membangun WEBSITE Dengan HTML

Posted by CHRISTIANTO D,WIBOWO | D3MI-2016 STMIK BUMI GORA On Senin, Desember 05, 2016 No comments

Pemrograman web diambil dari 2 suku kata yaitu pemrograman dan web. Pemrograman diartikan proses, cara, perbuatan program. Definisi Web : jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi melalui protokol transfer hypertext. Orang banyak mengenal web dengan istilah WWW (world wide web).
Terimakasih pada sumber pembelajaran ini :
Pada pembelajaran ini, kita akan melalui dasar-dasar HTML (termasuk perkembangan terbaru dari HTML5 dan CSS3). Ada juga ' HTML5 Cheat Sheet ' di bawah Anda dapat menggunakan untuk referensi di masa mendatang.
HTML5 Cheatsheet Courtesy Of  websitesetup.org 
Pengantar HTML
website dasar diciptakan dengan HTML, CSS dan Javascript. Teknologi 'front-end' ini mengontrol tampilan, struktur, dan fungsi sebuah website. Sebelumnya bahasa HTML ini lebih terisolasi dan terbatas, sebatas:
  • HTML menggambarkan format dokumen
  • CSS menjelaskan bagaimana dokumen akan terlihat
  • Javascript mendefinisikan bagaimana mereka bertindak
Tapi hal telah berevolusi dengan HTML5. Bahasa ini lebih terintegrasi sekarang, memungkinkan kita untuk melakukan hal-hal yang kompleks tanpa menggunakan teknologi yang rumit 'back-end' seperti PHP, Perl atau Ruby on Rails.
Mereka juga telah menyederhanakan hal sehingga untuk pemula tidak perlu khawatir. Sebagai contoh, beberapa tag HTML telah dihapus atau diambil; digabung menjadi satu, yang membuat mereka mudah diingat.
Step #1. Mulai Dengan Download Text Editor.
Sebelum membahas tag HTML, kita akan membutuhkan tempat untuk menulis itu. Microsoft Word atau Apple Pages sangat baik untuk menulis surat atau dokumen, prosesor kata - word processors seperti ini tidak bisa menangani HTML. Tentu saja, kita bisa mencobanya. Tetapi kita akan menerima informasi yang berlebihan (atau elemen acak tambahan) menambahkan bahkan akan mengacaukan format kita. Itu artinya ketika kita akhirnya membuka halaman dalam browser Chrome, Safari, atau Internet Explorer apa saja, akan terlihat terputus-putus dan kacau.
Sebaliknya, kita perlu membuat bare-bones (atau /plain text - 'teks biasa') file. File-file ini dibuat dengan Editor Teks, seperti Notepad pada Windows. Kita benar-benar bisa menggunakannya, namun kita tidak akan merekomendasikannya. Programmer dan web designer harus menggunakan editor teks yang dirancang khusus untuk menulis kode.

Memilih Text Editor
Jika kita berada di Windows, kita dapat memeriksa Notepad ++ atau TSW WebCoder. Beberapa distribusi Linux datang dengan Gedit, yang juga merupakan pilihan editor teks yang sangat baik. Sementara TextMate adalah pilihan yang cocok untuk pengguna Mac, atau Sublime Text 2, yang tersedia pada OS X, Linux dan Windows (meskipun mereka juga memiliki versi baru, 3. Silahkan download dan install sekarang sebelum kita mulai menyelam menulis beberapa baris HTML.
Bagaimana Membuat HTML Markup Bekerja.
HTML adalah singkatan dari Hypertext Markup Language. Ini menentukan struktur atau tata letak halaman web. Namun itu tidak menambahkan estetika visual /style atau interaktivitas. CSS dan Javascript yang akan menanganinya (jadi sedikit banyak nanti kita akan bahas tentang CSS dan Javascript). Mari kita lihat penataan dokumen kita.
Buat folder baru di mana kita akan menyimpan semua kode. Membuka Notepad ++ (kita pakai Notepad ++) dan membuat file baru. Simpan dengan ekstensi teks "signup.html", dan pastikan itu disimpan dalam folder yang telah kita buat. Sekarang, mari kita menambahkan beberapa kode.
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html> 
Kita akan melihat bahwa kita punya dua <html> tag disekitarnya, dan yang lainnya. Kemudian di antara mereka, sepasang <head> dan <body> tag. Apa yang mereka lakukan ?
<head> adalah di mana kita menyimpan hal-hal seperti Meta Tags.
Meta Tags = Metadata adalah data (informasi) tentang data. tag <meta> memberikan metadata tentang dokumen HTML. Metadata tidak akan ditampilkan pada halaman, tetapi akan mesin pengurai. elemen Meta biasanya digunakan untuk menentukan deskripsi halaman, kata kunci, penulis dokumen, dan dokumentasi terakhir diubah metadata lainnya. metadata dapat digunakan oleh browser (bagaimana untuk menampilkan konten atau reload halaman), mesin pencari (kata kunci), atau layanan web lainnya. HTML5 memperkenalkan metode untuk membiarkan web desainer mengambil kontrol atas viewport (area yang terlihat pengguna dari halaman web), melalui <meta> tag.
Dimana merupakan daftar judul halaman kita, setiap CSS eksternal dan file Javascript untuk referensi, serta informasi tambahan untuk membantu mendapatkan situs kita pada di mesin pencari (Search Engine). Jika kita sudah akrab dengan versi HTML, kita akan melihat beberapa elemen seperti 'charset' kini telah disederhanakan dan dimasukkan dalam meta tag juga.

<Body> adalah di mana segala sesuatunya berjalan. Tetapi pertama-tama, mari kita berpikir tentang bagaimana website yang terstruktur. Jika kita mengunjungi situs-situs organisasi berita seperti The Guardian, BBC, CNN atau Fox News, kita mungkin melihat bahwa mereka berbagi beberapa fitur yang sama. Mereka semua memiliki header, footer, artikel, dan sidebars. Mereka sering juga memiliki kotak berisi informasi terkait, tetapi ini bukan merupakan bagian integral dari sebuah artikel.
Ada tag HTML yang menentukan semua elemen ini adalah halaman umum, memberikan kita cara untuk secara logis mengatur kode untuk membuatnya mudah untuk memahami dan mengikuti.
Terbaik dari semua, Markup Semantic ini berarti bahwa tag kita menggunakan seperti apa yang mereka gunakan.

Step #2. Pengertian Dasar Dengan Structural Elements
HTML mendikte struktur atau bentuk. Jadi unsur-unsur umum, seperti header atau navigasi dari sebuah situs web, semua ditentukan oleh tag HTML yang terdengar persis seperti nama mereka. Ini juga merupakan elemen yang akan ditempatkan di dalam <body> tag yang kita lihat, yang mulai menguraikan setiap halaman yang akan ditampilkan.
Courtesy Of https://madebymike.com.au/html5-periodic-table/
Header <header> biasanya di mana kita akan menyimpan logo untuk website Anda.
Nav <Nav> adalah untuk navigasi bar, atau menu website utama, di mana kita akan menempatkan link ke halaman utama website.
Artikel <Article> tag berisi potongan konten mandiri, seperti posting blog, berita, video, atau gambar.
Pikirkan cara ini ... jika kita memiliki sejumlah item konten, masing-masing akan cocok untuk membaca dirinya sendiri. Sehingga akan masuk akal untuk sindikasi sebagai pos mereka sendiri yang terpisah, contohnya RSS feed.
Section <Section> Konten utama pada halaman biasanya terletak di antara <Section> tag. Pikirkan ini seperti sebuah bab dalam sebuah buku, di mana masing-masing mencakup sekelompok informasi. Itu berarti <Section> tag dapat berisi beberapa artikel, diagram, gambar, dll
Aside < Aside > adalah tag yang berguna untuk informasi terkait yang membantu menjelaskan (tapi tidak diperlukan) konteks sekitar topik halaman kita. Ini biasanya digunakan untuk membuat sebuah sidebar kecil di konten untuk teks atau link terkait.
Footer < Footer > adalah di mana kita menyimpan informasi kontak, informasi hak cipta dan kadang-kadang beberapa link tambahan seperti Persyaratan Layanan atau Kebijakan Privasi.
Setiap elemen struktural terlihat dan terdengar persis seperti apa yang dilakukannya. Jadi mereka mudah diingat. Sekarang bahwa kita memahami tata letak dasar dari sebuah dokumen HTML, mari kita membuat halaman pertama kita.

Step #3. Membuat Web Page Dengan Blog Post
Elemen dasar dari setiap halaman web adalah konten. Konten dapat berarti informasi berbasis teks sederhana atau file multimedia seperti gambar dan video. Contohnya Charlie dan situs Roundheads perlu untuk menampilkan informasi tur terbaru sehingga fans mereka tahu persis di mana untuk menemukan mereka berikutnya. kita dapat dengan mudah membuat ini dengan posting blog sederhana, menciptakan tempat bagi band untuk cepat menuliskan beberapa catatan untuk menerbitkan dalam beberapa menit setiap. Jadi mari kita membuat dokumen posting blog di editor teks kami disebut 'index.html'.
Kita akan mulai dengan menambahkan boilerplate yang sama seperti sebelumnya, untuk set-up dasar dasar dan elemen struktural yang telah kita pelajari sejauh ini.
Dalam pemrograman komputer , kode boilerplate atau boilerplate mengacu bagian dari kode yang harus dimasukkan di banyak tempat dengan sedikit atau tanpa perubahan. Hal ini sering digunakan ketika mengacu pada bahasa yang dianggap verbose , yaitu programmer harus menulis banyak kode untuk melakukan pekerjaan minimal.
Kebutuhan boilerplate dapat dikurangi melalui mekanisme tingkat tinggi seperti metaprogramming (yang memiliki komputer secara otomatis menulis kode boilerplate yang diperlukan atau masukkan pada saat run ), konvensi di atas konfigurasi (yang memberikan nilai default yang baik, mengurangi kebutuhan untuk menentukan program yang rincian dalam setiap proyek) dan model-driven engineering (yang menggunakan model dan generator model-to-kode, menghilangkan kebutuhan untuk boilerplate panduan code). .... DOWNLOAD boilerplate dan extract file zip-nya kemudian buka file (open with) index.html-nya menggunakan Notepad ++
Default boilerplate
Selanjutnya, kita akan menambahkan <article> tag, yang baru saja kita pelajari dibuat khusus untuk posting blog dan artikel berita. Kemudian di dalam itu, kita akan membuat paragraf terpisah menggunakan <p> tag. (Dapatkan? 'P' untuk Paragraf.)
Kemudian turun di beberapa konten placeholder disebut 'lorem ipsum' atau apa saja dan anggap itu artikel baru kita.

Langkah # 4. Menambahkan Tipografi untuk Konten Situs Web Anda
Kata 'tipografi' mungkin membawa kembali kenangan dari informasi rahasia yang kita pelajari di sekolah dasar tentang mesin cetak. Tapi dalam kasus ini, mengacu pada 'seni mengatur dan stylizing teks' untuk membuat konten website kita lebih menarik. Sementara itu terdengar sederhana dalam teori, itu benar-benar akan sangat kompleks dan canggih. Namun, untuk mempelajarinya kita membutuhkan waktu yang lama dengan menguasaan CSS yang baik, untuk itu, jadi mari kita melewati semua teori dan langsung melompat ke dalam membuat teks kita terlihat baik.

Komputer dan web browser penuh dengan font mereka sendiri. kita mungkin sudah melihat dan digunakan banyak dari mereka saat membuat dokumen Word atau Pages.
Desain-Geeks juga telah menciptakan perpustakaan mereka sendiri font kustom yang dapat kita gunakan secara online. Banyak yang indah, berbeda, dan terbaik dari semua - gratis. Google Font, misalnya, berisi satu ton gaya font elegan untuk dipilih.
Mari kita gunakan salah satu favorit, Droid Sans, untuk memberikan posting blog pertama kita yang memiliki beberapa karakter.

Bagaimana sebenarnya? CSS.
CSS membuat struktur halaman kita atau HTML terlihat baik, memungkinkan kita untuk mengontrol estetika visual halaman. CSS bekerja dengan memilih elemen di halaman (seperti <body>, <P> atau <Section> tag), dan kemudian menambahkan aturan. Jadi, mari kita pilih semua konten dalam <Section> tag dan memberikan semua itu gaya font Droid Sans.

Membuka file HTML yang telah dibuat sejauh ini, dan copy & paste baris berikut ini di antara <head> tag:
< link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css‘ >
Link ini akan mereferensi font yang ingin kita gunakan (dalam hal ini, Droid Sans), ditentukan oleh dokumen CSS kita.  Sekarang buat file bernama style.css baru dan menambahkan ini:
section {

font-family: 'Droid Sans', sans-serif;

}
Sekarang memiliki style halaman pertama dengan tipografi. Tampilan sekarang sedikit lebiih baik, kita perlu menambahkan link ke setiap halaman, menambahkan beberapa latar belakang dan menambahkan beberapa perbatasan. Namun, sebagian besar situs memiliki dasar-dasar desain tambahan seperti warna dan perbatasan. Berikut adalah cara untuk menambahkan hal-hal tersebut.

Langkah # 5. Menambahkan Warna, Borders dan Dasar-dasar CSS Lainnya
Tapi di luar posting blog pertama, kita akan ingin menambahkan beberapa halaman lagi dan memberikan beberapa warna sehingga menyerupai situs yang lengkap untuk para pengunjung web.
Pertama, mari kita membuat sebuah bar navigasi bagi pengunjung untuk dengan mudah meng-klik dari halaman ke halaman. Akan menjadi banyak hal yang terjadi di sini, cukup mudah jika kita dapat mengikuti bersama.

  1. Di atas <Section> tag pada setiap halaman, kita akan membuat <Nav> tag baru.
  2. Dan didalamnya, kita akan membuat daftar unordered. Hal ini diidentifikasi oleh <ul> ('Unordered List’ sederhana). daftar unordered seperti poin-poin, di mana sebagai daftar memerintahkan termasuk nomor untuk menunjukkan urutan atau prioritas.
  3. Dalam <ul> tag yang baru, kita memiliki <li> tag untuk setiap item baris atau poin-poin (dalam hal ini, menandakan halaman baru).
  4. Karena ini akan menjadi menu navigasi, setiap halaman harus menghubungkan dengan URL. Ini ditambahkan dengan menggunakan <a href> tag. Berikut format bagi mereka: <a href="yourpageurl.html"> Nama Halaman Kita </a>.

Ketika semua sudah dilakukan, kita akan melihat seperti <nav> elemen tercantum di bawah ini:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Christianto Dharma Wibowo</title>
<link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css‘>
    <link rel="stylesheet" type="text/css" href=style.css>
</head>
<body>
     <nav>
         <ul>
            <li><a href="media.html">Media</a></li>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="Signup.html">Signup</a></li>

         </ul>
     </nav>  
     <Section>
   <form action="">
     Email <input type="email" required>
 Zip Code <input type="number" name="number" required>
 <textarea rows="4" columns="50">
 </textarea>
 <input type="submit" value="submit">
</form>  
</Section>  
</body>
</html>
Seperti yang kita lihat, masing-masing tag navigasi (atau halaman) yang mengalir ke bawah (vertikal). Namun, jika kita berpikir tentang sebagian besar menu navigasi situs, mereka semua terdaftar horizontal dalam satu baris. Jadi mari kita mengubah itu. Kembali ke file CSS yang baru saja dibuat dan tambahkan baris berikut.
li {

display: inline;

}
Masih berkutat di file CSS, mari kita edit teks blog untuk memberikan style yang lebih baik. Secara khusus, mari kita memberikan font lebar tetap (fixed width) 100% piksel,, perbatasan (thick) berbayang tebal (shaded border), dan beberapa warna latar belakang (background color).
Jadi, mari kita mengedit file CSS lagi. Kita akan menambahkan baris kode berikut. Sementara sebagian besar harus relatif cukup jelas, #CCFFFF adalah kode warna hex.
Section {
font-family: 'Droid Sans', sans-serif;
}
li {
display: inline;
}
article {
       border-style: solid;
       border-width: medium;
       background-color: #CCFFFF;
       width: 100%;
}
Mari kita tambahkan warna latar belakang seragam yang akan muncul di semua halaman kita. Karena kita ingin warna background ini muncul di semua halaman, kita akan membuatnya untuk <body>.
Latar belakang blok warna solid tidak terlihat terlalu panas. latar belakang bertekstur lakukan. Mari kita pergi ke CSSMatic dan menghasilkan tekstur yang kita sukai. pilih pengaturan warna, dan kemudian klik 'Download Noise Texture'. dan jadikan image yang di download tersebut menjadi warna latar belakang kita (background body).
section {
       font-family: 'Droid Sans', sans-serif;
}
li {
  display: inline;
}
article {
  border-style: solid;
  border-width: medium;
  background-color: #CCFFFF;
  width: 100%;
}
body {
background-image:url('img-noise-640x640.png');
}

Sekarang, kita sudah menerapkan latar belakang. Mari selami file CSS dan menambah/merubah pemilih background untuk 'body'. Kita juga bisa menerapkan latar belakang dari gambar. Sebelum bergerak maju, pastikan bahwa gambar tersebut berada dalam direktori yang sama dengan file HTML kita.
section {
       font-family: 'Droid Sans', sans-serif;
}
li {
  display: inline;
}
article {
  border-style: solid;
  border-width: medium;
  background-color: #CCFFFF;
  width: 100%;
}
body {
background-image:url('abstrak.png');
}

Setelah diedit, halaman kita akan terlihat seperti tampilan diatas. Seperti yang kita tahu, ada lebih banyak cara dan gaya/style untuk dilakukan disini. Ini hanya tampilan yang sangat dasar di editing dan merancang konten dengan CSS & HTML5.

Form
Sekarang kita telah belajar tentang berbagai jenis markup semantik yang HTML5 telah ditawarkan, kita akan menggunakan beberapa untuk menambahkan beberapa fitur yang diperlukan untuk Website ini. Dan kita mulai dengan membuat Form.
Karena kita tidak menambahkan posting blog atau berita, kita akan menggunakan <Section> Tag. Di mana kita akan menulis kode untuk Form. Sebelum kita melanjutkan, penting untuk menambahkan peringatan bahwa untuk melakukan sesuatu yang benar-benar berguna dengan data dari Form, kita harus menggunakan teknologi back-end. Teknologi back-end adalah sedikit keluar dari ruang lingkup untuk pembelajaran ini. Namun, jika kita tertarik dalam teknologi back-end, kita bisa mencoba teknologi back-end PHP. Sangat mudah dan digunakan oleh jutaan pengembang di seluruh dunia.

Pertama-tama, mari kita bicara tentang data kita akan mencoba dan merekam data. Website ingin tetap berhubungan dengan fans melalui email. Website mengumpulkan kode ZIP/Post. Akhirnya, fans mungkin ingin meninggalkan pesan untuk Website.
Dengan pemikiran ini, mari kita mulai bekerja pada Form pertama kita, dan membawa konsep dari HTML5 . Form terdiri dari label, input dan button, dan berada pada <form> tag.
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Christianto Dharma Wibowo</title>
<link href=’http://fonts.googleapis.com/css?family=Droid+Sans’ rel=’stylesheet’ type=’text/css‘>
    <link rel="stylesheet" type="text/css" href=style.css>
</head>
<body>
     <nav>
         <ul>
            <li><a href="media.html">Media</a></li>
            <li><a href="index.html">Homepage</a></li>
            <li><a href="signup.html">SignUp</a></li>

         </ul>
     </nav>  
     <Section>
   <form action="">
     Email <input type="email" required>
 Zip Code <input type="number" name="number" required>
 <textarea rows="4" columns="50">
 </textarea>
 <input type="submit" value="submit">
</form>  
</Section>  
</body>
</html>
Masukan pertama yang akan diterima adalah untuk alamat email. Untuk melakukan itu, kita menambahkan tag dari <input> dan tidak menutupnya. 'Email:'. kitaa memberikan tag 'input' dan 'email', seperti yang terlihat pada contoh di diatas. Kita juga ingin membuat ini wajib diisi, jadi kita akan memberikan atribut lain dari 'required'. Bila seorang pengguna mengirimkan formulir ini dengan bidang kosong email, itu akan merespon dengan pesan kesalahan yang mengatakan "Silakan masukkan alamat email". Ini juga akan dilakukan jika pengguna mencoba untuk mengirimkan sesuatu yang bukan email yang valid. Akhirnya, kita juga harus memberikan nama untuk mengidentifikasi field, harus kita akhiri dengan menulis beberapa kode back-end. Hal ini dilakukan dengan menambahkan atribut 'name' dengan nilai 'email'.   Email <input type="email" required>

Sekarang, mari kita menambahkan kolom untuk kode pos dan pesan. Seperti yang kita bayangkan, kita tidak dapat menggunakan jenis 'email' untuk ini. Jadi, apa yang kita ketahui tentang kode Zip?, mereka selalu diwakili oleh nilai numerik.  Zip Code <input type="number" name="number" required>
  
Akhirnya, mari kita lihat bagaimana kita akan menerima pesan. Seperti yang kita harapkan, Website memiliki fans yang mungkin ingin menulis isi pesan dan ini tidak menggunakan tag input, melainkan sesuatu yang lain, yaitu <textarea> tag digunakan ketika masukan cenderung span beberapa baris. Sementara ini akan sesuai untuk pesan dari fans, <Textarea> dapat mengambil sejumlah atribut. Kita juga ingin mendefinisikan beberapa baris dan kolom; ini menentukan seberapa besar area teks. Akhirnya, kami ingin menentukan apakah itu diperlukan atau tidak. Dengan pemikiran ini, kita telah memutuskan untuk memberikan nama yang bermakna dan membuatnya cukup besar (4 kolom x 50 Baris). kita tidak ingin membuatnya diperlukan (required), karena kita berpikir bahwa tidak setiap fans akan ingin meninggalkan pesan untuk Website.
<textarea rows="4" columns="50">
  </textarea>
  <input type="submit" value="submit"> 
Kita akan melihat menambahkan media yang kaya untuk website kita. 
Music and Videos
HTML5 efektif mengaplikasikan ini dengan sesuatu yang jauh lebih baik. kita akan membuat suatu tempat bagi Music dan Video (multimedia) untuk mempublikasikan dan berbagi musik dan video. Ini terdengar rumit, tapi itu sebenarnya sangat mudah, kita akan membahas sedikit mengenai dreaded codecs. Berikut ini adalah <aside> :.
Sebuah codec mengacu pada kompresi/dekompresi, sebuah algorithrm yang digunakan untuk membantu kita. Awalnya membuat file besar lebih kecil untuk penyimpanan lebih mudah dan mentransfer, maka membuat file yang lebih besar lagi ketika seseorang melihatnya.

Seperti yang kita tahu, ada sejumlah besar browser web sekarang. Internet Explorer dengan Microsoft, Chrome oleh Google, Firefox oleh Mozilla, Safari Apple dan Opera. Masing-masing mampu menangani musik dan video walaupun ada sedikit perbedaaan. Misalnya, sementara Internet Explorer mampu memainkan musik dan video dikodekan dengan codec H.264 MOV, tetapi tidak dapat menggunakan codec Theora yang bisa dimainkan oleh Opera dan Firefox. Jadi, bagaimana kita harus menyandikan musik dan video dalam sejumlah cara yang berbeda.
CODEC
BROWSER
WebM VP 8
Android, Chrome, Konqueror, Firefox, Opera
WebM VP 9
Chrome, Opera
H.264 MOV
Chrome, Internet Explorer, Firefox, safari
Theora
Chrome, Firefox, Opera
Seperti yang kita lihat pada tabel tersebut, sangat dianjurkan untuk menggunakan browser Google Chrome untuk aktifitas browsing kita, karena Chrome mampu menampung semua codec multimedia tersebut.
Mari kita membuat file baru menggunakan HTML5 boilerplate yang sama kita gunakan sebelumnya. Mari juga menambahkan tag semantik Section media.html.
Sekarang, kita siap untuk menambahkan beberapa musik dan video. Sekarang kita perlu menambahkan file video. Semua yang kita lakukan di sini adalah menambahkan sebuah wadah bagi media. Jadi, mengingat apa yang kita ketahui di atas, kita akan menambahkan H.264 MOV dan media WebM8. kita akan memiliki placeholder sehingga harus seseorang mengunjungi halaman dengan browser web lama, mereka akan melihat pesan yang menginformasikan mereka bahwa mereka harus meng-upgrade browsernya. Menambahkan video mudah. kita hanya mengetikkan <source> tag untuk setiap video yang ingin dipasang.
Kita juga ingin memiliki beberapa musik. Tidak seperti video, hanya ada dua codec yang harus ada.
CODEC
BROWSER
MP3
Chrome, Internet Explorer, Firefox, safari, Opera
Ogg Vorbis
Chrome, Firefox, Opera

Seperti yang kita harapkan, tag untuk audio adalah <audio> dan dapat menambahkan sumber kita dengan cara yang sama kita lakukan dengan video.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href=style.css>
</head>
<body>
<nav>
<ul>
<li><a href="media.html">Media</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="signup.html">Signup</a></li>

</ul>
</nav>
<section>
<video>
<source src="video.mp4"></source>
<source src="video.webm"></source>
Sorry, your browser doesn't seem to support HTML5 video
</video>
<audio>
<source src="song.mp3"></source>
<source src="song.ogg"></source>
Sorry, your browser doesn't seem to support HTML5 audio
</audio>
</section>
</body>
</html>

Sekarang kita punya kebutuhan terakhir untuk website ini. Mari kita rekap apa yang telah kita pelajari sejauh ini. Kita telah memperkenalkan markup semantik, bentuk HTML5 dan embedding media yang kaya. Ini hanya cara singkat dalam mendesain web menggunakan teknologi HTML5, serta beberapa HTML dan CSS teknik standar. Sementara saya harap kita sudah efektif mengajarkan kita tentang dasar-dasar desain web, Selanjutnya kita akan lebih detail langkah demi langkah, agar pemahaman lebih akurat dan pengaplikasiannya juga akan lebih baik. Web Design Course

Berikut ini ada video tutorial yang sangat baik untuk kita lihat dan pelajari semoga akan menambah wawasan kita tentang HTML5 dan WEB DESIGN.

0 komentar:

Posting Komentar