Substance
- Getting to Know HTML 5 Semantic Layout
- Examples of the Latest Semantic Elements in HTML5
- Website Page Layout Examples
- Practice Creating Simple Pages with HTML5.
1. Getting to Know HTML5 Semantic Layout
Semantics, in the context of HTML, is described as giving meaning and structure to the content contained in an HTML document. In addition to the structure for the content of a document, HTML can also divide a document into a page structure in the literal sense (the layout of the document).
The section element provides the facility to divide a document into several parts. In addition, there is also an aside element to indicate side notes from a document. The header and footer elements provide the head and foot of the document respectively.
2. Examples of the Latest Semantic Elements in HTML5
- header
- no
- section
- article
- hgroup
- aside
- figcaption
- figure
- footer
3. Example of Website Page Layout
4. Practice Creating a Simple Page with HTML5
The following is an example of our practice code, along with an explanation of the function of each tag and its elements, the explanation is listed in the comment tag.
<!DOCTYPE html>
<html>
<head>
<title>Hello World, Latihan Membuat Halaman (title)</title>
</head>
<body>
<!-- element semantik harus berada diantara tag body -->
<!-- <header>...</header> Pada umumnya berisi logo, slogan, navigasi,
atau form pencarian.-->
<header>Pemrograman Web Statis (header) </header>
<!-- <nav>...</nav> element nav, digunakan untuk membuat menu link navigasi -->
<nav>
<ul>
<li><a href="www.gatewan.com">HOME (li)</a></li>
<li><a href="http://www.gatewan.com/2014/07/about-gatewawan.html">About Me (li)</a></li>
<li><a href="http://www.gatewan.com/2014/11/contact-us.html">Buku Tamu (li)</a></li>
</ul>
<!-- <article>...</article> element ini digunakan untuk konten artikel, berita atau opini.
jika dalam satu halaman hanya terdiri 1 artikel, bisa saja langsung menggunakan
konten <section>...</section>, akan tetapi itu menyalahi aturan semantik pada HTML5,
jadi meskipun artikel cuman 1 tetap harus menggunakan elemen <article>...</article> -->
<article>
<header>
<h1>
Artikel Ke-1 (h1)
</h1>
<br />
<br />
</header>
<!-- <section>...</section> element section, digunakan untuk menunjukan
bagian yang berbeda pada sebuah halaman web anda. section bisa digunakan
lebih dari satu, sesuai kebutuhan. misal section pada artikel, section
pada menu samping (a side). -->
<section>
#Artikel Pertama, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)
</section>
</article>
<br />
<br />
<article>
<header>
<!-- <hgroup>...</hgroup> element ini biasa digunakan pada artikel, untuk pengelompokan
tag heading yang lebih dari satu. -->
<hgroup>
<h1>Pemrograman Web Statis (h1) </h1>
<h2>Menggunakan HTML5 Tingkat Dasar (h2) </h2>
<h3>Oleh Wawan Beneran (Newbie) (h3) </h3>
</hgroup>
<br />
<br />
</header>
<section>
#Artikel Kedua, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)
</section>
<br />
<br />
<!-- <p>...</p> element tag paragraf ini digunakan untuk mengindikasikan suatu paragrap
dalam element artikel.-->
<p>
#Ini Paragraph pertama, dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text.
(p)
</p>
<br />
<br />
<p>
#Ini Paragraph kedua, dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text.
(p)
</p>
<br />
<br />
<!-- <aside>...</aside> element ini dirancang berada pada element artikel, biasa digunakan
untuk menampilkan berita terkait, kutipan atau gambar terkait.-->
<aside>Rekomendasi Artikel Terkait "Sejarah HTML5" (aside)</aside>
<aside>Rekomendasi Artikel Terkait "Pengembang HTML5" (aside)</aside>
</article>
<br />
<br />
<!-- <figure>...<figcaption>...</figcaption></figure> element figure ini dirancang untuk menampilkan
data personal, sedangkan figcaption untuk menampilkan keterangan gambar. -->
<figure>
<center>
<img width="150" height="150" src="https://pbs.twimg.com/profile_images/706069132270137344/Mss1UShB.jpg" alt="ini logo gatewan" />
<figcaption>
Ini merupakan Icon Aplikasi Gatewan (figcaption)
</figcaption>
</center>
</figure>
<br />
<br />
<br />
<br />
<!-- <footer>...</footer> element footer biasa digunakan untuk
navigasi link tambahan kedua, atau untuk legal /copyright suatu halaman website.-->
<footer># footer -- Copyright <a href="www.gatewan.com">GATEWAN</a> 2015 - All Right Reserved</footer>
</body>
</html>Save in *html format and check the results using a browser.
Using HTML5 Tags & Attributes
Substance
- Arranging Paragraphs With Align Attributes
- Text Manipulation with Text Markup
- Create a List with Ordered List and Unordered List
- Creating a Definition List with Definition list
- Practice (code and display)
1. Arrange Paragraphs With Align Attributes
<p> ... </p> For paragraph settings, it has 4 align attribute values (left, right, center, justify).
2. Text Manipulation with Text Markup
Text markup includes:
- <b> .. </b> atau <strong> </strong> (Cetak tebal)
- <i> .. </i> atau <em> </em> (Cetak miring)
- <u> .. </u> (Garis bawah)
3. Create a list with an order list and an unorder list
Orderlist
<ol>
<li> .. </li>
</ol>Unorderlist
<ul>
<li> .. </li>
</ul>4. Create a Definition List with Definition list
Definition List
<dl>
<dt> .. </dt>
<dd> .. </dd>
</dl>5. Practice
<!DOCTYPE html>
<html>
<head>
<title>Hello World, Latihan Membuat Halaman (title)</title>
</head>
<body>
<!-- element semantik harus berada diantara tag body -->
<!-- <header>...</header> Pada umumnya berisi logo, slogan, navigasi,
atau form pencarian.-->
<header>Pemrograman Web Statis (header) </header>
<!-- <nav>...</nav> element nav, digunakan untuk membuat menu link navigasi -->
<nav>
<ul>
<li><a href="www.gatewan.com">HOME (li)</a></li>
<li><a href="http://www.gatewan.com/2014/07/about-gatewawan.html">About Me (li)</a></li>
<li><a href="http://www.gatewan.com/2014/11/contact-us.html">Buku Tamu (li)</a></li>
</ul>
<!-- <article>...</article> element ini digunakan untuk konten artikel, berita atau opini.
jika dalam satu halaman hanya terdiri 1 artikel, bisa saja langsung menggunakan
konten <section>...</section>, akan tetapi itu menyalahi aturan semantik pada HTML5,
jadi meskipun artikel cuman 1 tetap harus menggunakan elemen <article>...</article> -->
<article>
<header>
<h1>
Artikel Ke-1 (h1)
</h1>
<br />
<br />
</header>
<!-- <section>...</section> element section, digunakan untuk menunjukan
bagian yang berbeda pada sebuah halaman web anda. section bisa digunakan
lebih dari satu, sesuai kebutuhan. misal section pada artikel, section
pada menu samping (a side). -->
<section>
#Artikel Pertama, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)
</section>
</article>
<br />
<br />
<article>
<header>
<!-- <hgroup>...</hgroup> element ini biasa digunakan pada artikel, untuk pengelompokan
tag heading yang lebih dari satu. -->
<hgroup>
<h1>Pemrograman Web Statis (h1) </h1>
<h2>Menggunakan HTML5 Tingkat Dasar (h2) </h2>
<h3>Oleh Wawan Beneran (Newbie) (h3) </h3>
</hgroup>
<br />
<br />
</header>
<section>
#Artikel Kedua, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)
</section>
<br />
<br />
<!-- <p>...</p> element tag paragraf ini digunakan untuk mengindikasikan suatu paragrap
dalam element artikel.-->
<p align="left">
<i>#Ini Paragraph Rata Kiri,</i>
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text.
(p) <br />
Atribut align memiliki 4 nilai :
<ol>
<li>left</li>
<li>right</li>
<li>center</li>
<li>justify</li>
</ol>
</p>
<br />
<br />
<p align="right">
<b>#Ini Paragraph Rata Kanan,</b>
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text.
(p) <br />
Atribut markup teks memiliki 3 bentuk :
<ul>
<li><b>Cetak Tebal</b></li>
<li><i>Cetak Miring</i></li>
<li><u>Garis bawah</u></li>
</ul>
<br />
<dl>
<dt>PHP</dt>
<dd>Merupakan singkatan dari "Hipertext Processor"</dd>
<dt>HTML</dt>
<dd>Merupakan singkatan dari "Hipertext Markup Language"</dd>
<dt>CSS</dt>
<dd>Merupakan singkatan dari "Cascading Style Sheets"</dd>
</dl>
</p>
<br />
<br />
<!-- <aside>...</aside> element ini dirancang berada pada element artikel, biasa digunakan
untuk menampilkan berita terkait, kutipan atau gambar terkait.-->
<aside>Rekomendasi Artikel Terkait "Sejarah HTML5" (aside)</aside>
<aside>Rekomendasi Artikel Terkait "Pengembang HTML5" (aside)</aside>
</article>
<br />
<br />
<!-- <figure>...<figcaption>...</figcaption></figure> element figure ini dirancang untuk menampilkan
data personal, sedangkan figcaption untuk menampilkan keterangan gambar. -->
<figure>
<center>
<img width="150" height="150" src="https://pbs.twimg.com/profile_images/706069132270137344/Mss1UShB.jpg" alt="ini logo gatewan" />
<figcaption>
Ini merupakan Icon Aplikasi Gatewan (figcaption)
</figcaption>
</center>
</figure>
<br />
<br />
<br />
<br />
<!-- <footer>...</footer> element footer biasa digunakan untuk
navigasi link tambahan kedua, atau untuk legal /copyright suatu halaman website.-->
<footer># footer -- Copyright <a href="www.gatewan.com">GATEWAN</a> 2015 - All Right Reserved</footer>
</body>
</html>Save as in *html format & see the result in browser!
Creating a Simple Form with HTML5
1. Elemen <form>
HTML forms are used to collect data entered/inputted by users. Form elements consist of various elements such as input, checkboxes, radio buttons, submit buttons, and many more.
Creating Forms with HTML5
2. Elemen <input>
It is the most important element in the form element. <input> The element has many variations, depending on the type of attribute.
The following are the types used in this chapter:
| Type | Description |
|--------|----------------------------------------------------------------|
| text | Defines normal text input |
| radio | Defines radio button input (for selecting one of many choices) |
| submit | Defines a submit button (for submitting the form) |3. Input Text
<input type = "text"> defines an input line of type text.
4. Submit button
<input type = "submit"> defines a button to submit the form to a form - handler. A form - handler is usually a server page with a script to process input data.
5. Group Data Formulir <fieldset>
- The <fieldset> element groups related data in a form.
- The <legend> element defines a description for the element
<fieldset>.
6. Atribut Form HTML
| Attribute | Description |
|----------------|-------------------------------------------------------------------------------------|
| accept-charset | Specifies the charset used in the submitted form (default: the page charset). |
| action | Specifies an address (url) where to submit the form (default: the submitting page). |
| autocomplete | Specifies if the browser should autocomplete the form (default: on). |
| enctype | Specifies the encoding of the submitted data (default: is url-encoded). |
| method | Specifies the HTTP method used when submitting the form (default: GET). |
| name | Specifies a name used to identify the form (for DOM usage: document.forms.name). |
| novalidate | Specifies that the browser should not validate the form. |
| target | Specifies the target of the address in the action attribute (default: _self). |Simple HTML5 Form Example
<!DOCTYPE html>
<html>
<!-- gatewan.com -->
<head>
<title>Membuat Formulir</title>
</head>
<body>
<h2>Isi Biodata Berikut Ini :</h2>
<form method ="post" action="">
<fieldset>
<legend>Data Pribadi : </legend>
<label for="nama">Nama Lengkap</label>
<input id ="nama" name ="nama" type="text" placeholder="Nama Lengkap Anda" pattern ="A-Z]{3}[0-9]{4}"/><br>
<br/>
<label for="Kota">Kota</label>
<input id ="Kota" type="text" name ="Kota" size ="40" list="daftarkota" placeholder="Kota Anda"/>
<datalist id="daftarkota">
<option value="Bantul">
<option value="Gunung Kidul">
<option value="Kulon Progo">
<option value="Sleman">
<option value="Yogyakarta">
</datalist>
<br>
<br/>
<label for="tgllahir">Tanggal Lahir</label>
<input id ="tgllahir" type="date" name ="tgllahir" size ="40" placeholder="Tanggal Lahir"/><br>
<br/>
<label for="jarak">Jarak Rumah Kekampus</label>
<input id ="jarak" type="number" name ="jarak" min="1" max="100" step="1" value="2"
size ="40" placeholder="Jarak"/><label>km</label>
<br>
</br>
<label for="warna">Warna Kesukaan</label>
<input id ="warna" type="color" name ="warna" size ="40" list="warna" placeholder="warna"/>
<br>
</br>
</fieldset>
<fieldset>
<legend>Kotntak Person :</legend>
<label for="email">Email Address</label>
<input id ="email" name ="email" type="email" placeholder="anything@example.com"/><br>
</br>
<label for="telp">Phone Number</label>
<input id ="telp" name ="telp" type="tel" placeholder="+xx"/><br>
</br>
</fieldset>
<fieldset>
<legend>User Akses : </legend>
<label for="uid">User ID</label>
<input id ="uid" name ="uid" type="text" required/><br><br>
<label for="key">Password</label>
<input id ="key" name ="key" type="password" required/><br>
</fieldset>
</form>
<br>
<input type ="submit" name="www" value="Kirim"/>
</body>
</html>The results are as shown in the image above.
Netizens
Q1:
- ALWAYS STIA 6 Sep 2016, 19:16:00 = very helpful...and practical...thank you
- TUKANG BUBUR 18 Jan 2017, 01:15:00 = Bro, how do you validate the date of birth on the registration form? In the form, input the date of birth with the age condition of 19 years and above
A1:
- Always Together
- Hi Porridge Seller, you can learn how to create form validation here -> Creating HTML5 Form Validation With JavaScript
Playing Audio with HTML5
Before HTML5, there was no standard for playing audio files on web pages, so audio files could only be played with plug-ins (such as flash). But now, HTML5 has provided a standard for playing audio files.
The HTML5 element <audio> defines a standard way to embed audio files into web pages.
1. Browser Support
The following are browser versions that support <audio> HTML5 elements.
2. How Does It Work
The control attribute allows audio to be controlled, such as play, pause, and volume.
The text between the <audio> and </audio> tags will be displayed in the browser as a notification "that do not support the <audio> element."
Some elements <source> can be links to different audio files. The browser will use the first initialization of the file format.
3. Format Audio HTML5
Currently, there are 3 audio formats supported by the element <audio> such as; MP3, Wav, and Ogg.
| Browser | MP3 | Wav | Ogg |
|-------------------|-----|-----|-----|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
| Browser | MP3 | Wav | Ogg |
| Internet Explorer | YES | NO | NO |4. HTML Audio -Media Type
| File Format | Media Type |
|-------------|------------|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |5. HTML Audio - Methods, Properties, dan Events
HTML5 defines DOM methods, properties, and events for the element <audio> . This allows you to load, play, and pause audio, as well as set duration and volume.
There are also DOM events that can tell you when audio starts playing, pauses, etc.
For a complete DOM reference please visit here HTML5 Audio/Video DOM Reference.
6. HTML5 Audio - Tags
| Tag | Description |
|----------|--------------------------------------------------------------------------------------|
| <audio> | Defines sound content |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |Contoh Project
<!DOCTYPE HTML>
<html>
<!-- gatewan.com -->
<head>
<title> The audio element</title>
</head>
<body>
<h1>Memutar audio</h1>
<audio controls>
<source src="audio/WiroSableng.mp3" type="audio/mpeg">
<source src="audio/WiroSableng.wav" type="audio/wav">
<source src="audio/WiroSableng.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
</body>
</html>The result:
Netizens
Q1: ABDUL HADI Apr 25, 2016, 18:26:00 = How do I make it play automatically?
A1: add the "controls autoplay" attribute to the element <audio>
Creating Canvas with HTML5
The <canvas> element in HTML5 is used to draw graphics on a web page.
The image on the left shows 4 graphic elements created using the <canvas> element: a red rectangle, a gradient rectangle, a multicolor rectangle, and multicolor text.
The HTML5 <canvas> element is used to quickly draw graphics via scripting (usually JavaScript).
Browser Support
The following are browser versions that support the HTML5 <canvas> element.
A canvas is a rectangular area on an HTML page. By default, a canvas has no borders and no content. The default markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>Note: Always specify the id attribute (to reference a script), as well as the width and height attributes to specify the canvas size. To add a border, use the style attribute:
Basic Canvas Example
Project 1:
<!DOCTYPE html>
<html>
<!-- gatewan.com -->
<head>
<title>Template Canvas</title>
<script>
function MembuatGaris() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(115,100);
ctx.lineTo(215,150);
ctx.stroke();
}
</script>
</head>
<body onload="MembuatGaris()">
<h2>Mengambar Canvas 1</h2>
<canvas id="myCanvas" width="578" height="250">Browsernya tidak support canvas </canvas>
<style type="text/css">
canvas {
border: 5px solid #00E62B;
}
</style>
</body>
</html>Result:
Project 2:
<!DOCTYPE html>
<html>
<!-- gatewan.com -->
<head>
<title>Template Canvas</title>
<script>
function MembuatPersegi() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(150,45,170,185);
/*tambah objek lingkaran*/
ctx.fillStyle = "lime";
ctx.beginPath();
ctx.arc(145,125,80,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
}
</script>
</head>
<body onload="MembuatPersegi()">
<h2>Mengambar Canvas 2</h2>
<canvas id="myCanvas" width="578" height="250">Browsernya tidak support canvas </canvas>
<style type="text/css">
canvas {
border: 5px solid #00E62B;
}
</style>
</body>
</html>Result:
Project 3:
<!DOCTYPE html>
<html>
<!-- gatewan.com -->
<head>
<title>Template Canvas</title>
<script>
function writeText() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
/* parameter : string, jarak X, jarak y */
ctx.strokeText("Belajar Canvas",170,135);
}
</script>
</head>
<body onload="writeText()">
<h2>Mengambar Canvas 3</h2>
<canvas id="myCanvas" width="578" height="250">Browsernya tidak support canvas </canvas>
<style type="text/css">
canvas {
border: 5px solid #00E62B;
}
</style>
</body>
</html>Result:
Jquery Implementation in HTML5
Substance:
- What is JQuery?
- What is the Use of JQuery?
- Execution technique with elements
- HTML Manipulation with DOM
- Customize event browser
jQuery Technology in HTML5
1. What is JQuery?
jQuery is a javascript library, jQuery has the motto "write less, do more". jQuery is designed to simplify javascript codes.
2. What is the use of JQuery?
- Easily access specific parts of a page.
- Change the appearance of certain parts of the page
- Changing the contents of a page
- Responding to user interactions within the page
- Adding animation to a page
- Fetch information from the server without refreshing the entire page
- Simplifying writing plain Javascript.
3. Execution technique with elements
Steps to learn JQuery:
1. Download jquery from the site http://www.jquery.com
2. Enter the jquery script code under the <head> tag
<script type="text/javascript" src="jquery-1.3.min.js"></script>3. Try practicing the following first exercise:
In this first exercise, I remind you to save your questions about jQuery syntax first, because we will explain them after this first practice, good luck!
Exercise1
<html>
<head>
<title>Belajar jQuery</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.show').click(function(){
$('p.jquery').show(1000);
});
$('a.hide').click(function(){
$('p.jquery').hide(1000);
});
});
</script>
</head>
<body>
<h1>Hello World With jQuery</h1>
<p><a href="#" class="show">Show</a>
<a href="#" class="hide">Hide</a></p>
<p class='jquery' style="display:none">Semboyan jQuery adalah
"write less, do more" dengan kata lain
"kesederhanaan dalam penulisan code,
tapi menampilkan banyak kelebihan</p>
</body>
</html>The result:
jQuert show-hide
Sintaks jQuery
Jquery syntax is usually created to select HTML elements and perform actions on the selected elements.
$(selector).action()Explanation:
- $, to define jQuery
- (selector), to indicate the selected or targeted element
- action(), is the jQuery action that will be performed on the selected element.
Example:
- $(this).hide() -- hides the current element
- $("p").hide() -- hides all paragraphs or content from the tag
- $(".test").hide() -- hides elements that have class="test"
- $("#test").show() -- displays the element with id="test"
Effects with jQuery
Here are the ready-to-use effects provided by jquery.
jQuery show() Effect
Functions to display hidden elements.
$(selector).show(speed,callback)| Parameter | Deskripsi |
|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| speed | (Optional). Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa : ->miliseconds (contoh : 1500) ->"slow" ->"normal" ->"fast" |
| callback | (Optional). Suatu fungsi yang akan dijalankan apabila efek show selesai dijalankan. |Exercise 2:
<html>
<head>
<title>Belajar jQuery</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.tombol').click(function(){
$('p').show(1000,tampilkanAlert);
});
});
function tampilkanAlert(){
alert("Awas, paragraph mucul!!!");
}
</script>
</head>
<body>
<h1>Latihan2</h1>
<p style="display:none">Kadang ini bisa menjadi paragraph
tersembunyi!</p>
<button class="tombol">Show</button>
</body>
</html>The result:
jQuery alert
Query hide() Effect
Functions to hide the selected element.
$(selector).hide(speed,callback)For the speed and callback parameters are the same as the show() effect.
jQuery toggle() Effect
It is a combination of hide and show functions. So toggle() functions to display what is hidden, hide what is visible.
$(selector).toggle(speed,callback,switch)Explanation:
switch: boolean
- True, just to display all elements
- False, just hides all elements
Exercise 3:
<html>
<head>
<title>Belajar jQuery</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.tombol').click(function(){
$('p').toggle(true);
});
});
</script>
</head>
<body>
<h1>Latihan3</h1>
<p style="display:none">Kadang ini bisa menjadi paragraph
tersembunyi, karena pengaruh toggle!!</p>
<button class="tombol">Show All Elements</button>
</body>
</html>The result:
jQuery toggle
4. HTML Manipulation with jQuery
jQuery has powerful capabilities in terms of manipulating, retrieving or adding content, and so on to HTML.
html()
To set the content (we usually call it innerHTML) of the selected HTML element we use .
$(selector).html(content).Exercise 4:
<html>
<head>
<title>Belajar jQuery</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#lihat').click(function(){
var isinya = $('#paragraf').html();
alert(isinya);
});
$('#isikan').click(function(){
var isilagi = $('#isi').val();
alert(isilagi);
$('#paragraf').html(isilagi);
});
});
</script>
</head>
<body>
<h1>Latihan4</h1>
<button id="lihat">Lihat</button>
<p id="paragraf">
jQuery mempunyai kemampuan yang powerfull dalam hal manipulasi,
mengambil atau menambahkan konten, dan sebagainya
terhadap HTML
</p>
Teks : <input type="text" id="isi">
<button id="isikan">Isikan</button>
</body>
</html>The result:
jQuery html
HTML Element Control
HTML Control allows us to manage standard HTML elements such as text input boxes, drop-down lists, buttons, etc. It can also be used to manage interactions with users, such as when logging in, we can control so that the password entered is not exposed.
Getting to Know HTML Element Controls
You don't need to worry, terms/components that are still unfamiliar and have not been reviewed here will be explained specifically in the HTML DICTIONARY .
1. Control Text
Used to set text box. Syntax:
<input type="text" [atribut]>| Atribut | Keterangan |
|-----------|-------------------------------------------------------------------------------------------------------------|
| Name | Nama dari control text |
| Size | Ukuran dari control text |
| Value | Text yang tertulis pada control text |
| Maxlength | Panjang Maksimal karakter yang diijinkan |
| Style | Pengaturan style/gaya/css secara inline di elemen html, propertinya bisa berupa font, border, positon, dll. |
| Dir | Pengaturan arah text dari control text, seperti rtl (right to left) atau sebaliknya ltr (left to right) |Example:
<p dir="rtl">Write this text right-to-left!</p>2. Check Password
This includes the art of keeping things secret (encryption) so that users don't have to worry about their passwords being peeked at by naughty friends.
Example:
<input type="password" name="anonimous" maxlength="10">3. Control Area
Used to provide a larger writing space than the text control. The syntax is:
<textarea [atribut]>
..text Anda..
</textarea>| Atribut | Keterangan |
|-----------|---------------------------------------------------------------------------------------------------------|
| Name | Nama dari control text area |
| Value | Nilai dari control text area |
| Maxlength | Panjang Maksimal karakter yang diijinkan |
| Rows | Julmlah baris text area |
| Cols | Jumlah kolom text area |
| Dir | Pengaturan arah text dari control text, seperti rtl (right to left) atau sebaliknya ltr (left to right) |Example:
<textarea rows="4" cols="50">
Kolaborasi gatewan.com dan w3schools.com memudahkan kami dalam belajar pemrograman berbasis web.. terimakasih.
</textarea>4. Control Image
Used to adjust image details.
| Atribut | Keterangan |
|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Align | Meratakan teks di sekeliling gambar |
| Alt | Alternatif text untuk gambar. Seketika text ini tidak akan ditampilkan, kecuali saat kursor berada diatas gambar. |
| Border | Batas tepi untuk gambar |
| Height | Mengatur ketinggian gambar |
| Width | Mengatur lebar gambar |
| Hspace | Mengatur batas (margin) horizontal gambar |
| Vspace | Mengatur batas (margin) vertical gambar |
| Ismap | Adalah atribut boolean yang bersifat server-side, berguna untuk mengatur gambar sebagai image-map. Artinya ketika gambar diklik, maka koordinat klik akan dikirim ke server sebagai query string URL. Koordinat disitu bukanlah koordinat geographic ya, tapi koordinat berdasarkan bidang gambar. Note: Atribut ismap diperbolehkan hanya jika < img > adalah keturunan dari unsur < a > dengan atribut href valid. |
| Usemap | Adalah atribut boolean yang bersifat client-side, berguna menggatur gambar sebagai image-map. Atribut usemap dikaitkan dengan elemen < map > yang dilengkapi atribut name, sehingga membentuk relasi antara < img > dengan < map >. Note: Atribut usemap tidak dapat digunakan jika < img > adalah keturunan dari elemen < a > atau < button >. |
| Name | Nama control image |
| Src | Untuk menelusuri lokasi file gambar yang digunakan |Example:
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>Understanding HTML5 Semantics in Web Templates
It's time to talk about HTML semantics, the meaning behind the naming of HTML elements.
Definition 1
Semantics is the implied meaning of a subject, such as a word or sentence. It helps humans interpret machine language.
Definition 2
Semantics is the study of the meaning of words and phrases in a language, including programming languages.
Semantics can help humans / developers in interpreting the purpose of HTML tags. HTML serves both (humans and machines), besides that it also helps to show / navigate markup easily, document more neatly and structured, so that the benefits of this convenience allow the framework to grow / be developed globally or popularly and far from the word discontinue. (in short, sells well).
An element's semantics must clearly describe the content it contains. Here we will show you what the difference is between semantics and non-semantics;
<div>...<div> dan <span>...</span>The two elements above are not semantic, because they do not clearly describe the contents contained therein, it could be an article, table, image, video, etc. The two elements above are most often found in blog or blogger templates.
<head>...</head>, <body>...<body> dan <a>...</a> misalnya,Both elements above head and body are semantic, because they clearly define what is contained in them, such as indicating a category, while the a element defines content as a link or address, marked with the main attribute href.
Below is my first assignment in the web programming course in semester 1, aimed at enabling students to understand the semantic meaning of a web template.
Do the following steps:
1). Browse the template design according to your taste, and download it.
Download Template
2). If you want to see what the template demo looks like, please open the downloaded file using the browser you have.
Demo Template
3). To edit the template structure, please open it with the notepad++ application.
Edit Template
4). The result
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <!-- Ini merupakan semantik elemen head, mendokumentasikan content di dalamnya sebagai kategori kepala web -->
<title>MusicShow</title> <!-- ini merupakan semantik elemen title, menerangkan bahwa MusicShow adalah judul dari web -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body> <!-- Ini merupakan semantik elemen body, mendokumentasikan content di dalamnya sebagai kategori badan web -->
<div id="main">
<div id="header">
<div id="menu">
<a href="http://all-free-download.com/free-website-templates/">SHOP</a> <!-- Ini merupakan semantik elemen a, mendefinisikan content sebagai link atau alamat untuk tujuan navigasi SHOP -->
<a href="http://all-free-download.com/free-website-templates/">DJS </a> <a href="http://all-free-download.com/free-website-templates/">GALLERY </a> <a href="http://all-free-download.com/free-website-templates/">AGENDA</a> <a href="http://all-free-download.com/free-website-templates/">ABOUT US</a> <a href="http://all-free-download.com/free-website-templates/">HOME</a> </div>
<div id="header-Bottom">
<div id="logoBlock">
<h1>MusicShow</h1> <!-- Ini merupakan semantik elemen h1, mendefinisikan MusicShow sebagai judul paling penting/utama/prioritas no.1 -->
<p>Free CSS Template</p> <!-- Ini merupakan semantik elemen p, mendefinisikan kalimat-kalimat di dalamnya sebagai paragraph -->
</div>
<div id="navBlock">
<h3>Sub Navigation</h3> <!-- Ini merupakan semantik elemen h3, mendefinisikan "Sub Navigation" sebagai sub judul/minor/tingkat kepentingan no.3 -->
<a href="http://all-free-download.com/free-website-templates/">Free music videos </a> <a href="http://all-free-download.com/free-website-templates/">mp3 players</a> <a href="http://all-free-download.com/free-website-templates/">videos</a> <a href="http://all-free-download.com/free-website-templates/">photos</a> <a href="http://all-free-download.com/free-website-templates/">charts </a> <a href="http://all-free-download.com/free-website-templates/">contacts</a> <a href="http://all-free-download.com/free-website-templates/">charts</a> <a href="http://all-free-download.com/free-website-templates/">forums</a> <a href="http://all-free-download.com/free-website-templates/">lyrics</a> <a href="http://all-free-download.com/free-website-templates/">song by artis</a> <a href="http://all-free-download.com/free-website-templates/">song by albums </a> <a href="http://all-free-download.com/free-website-templates/">song by aphabet </a> </div>
</div>
</div>
<div id="mainCont">
<div id="leftCol">
<div id="welcomeBox">
<h3>Free Music Downloads</h3>
<p>Want to refresh your playlist without spending a dime? Well, you're in luck because<span>MTV.com</span> has lots of free music downloads just for you. Yes, you heard us right, you can get free music downloads right here! They'll cost you nothing, nada, zip, zero! And...Want to refresh your playlist without spending a dime? Well, you're in luck because MTV.com has lots of free music downloads just for you. Yes, you heard us right, you can get free music downloads right here! </p>
<h5>Read Full Description</h5> <!-- Ini merupakan semantik elemen h5, mendefinisikan "Read Full Description" sebagai sub judul/minor/tingkat kepentingan no.5, dalam html, tingkat kepentingan judul paling bawah ditandai dengan tag h6 -->
<p>MTV podcasts are here! Score audio and video podcasts for your PC or portable media device.Get unlimited downloads from all your favorite bands and shows. Check out <span>MTV</span> on <span>Rhapsody.com.</span></p>
</div>
<div id="playListTop">
<h3>FEATURED VIDEOS</h3>
</div>
<div id="playListBody">
<div class="head">
<p class="left">PLAY</p>
<p class="centr">TRACK</p>
<p class="right">ARTIST</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Broken Heart</p>
<p class="artist">Bon Jovi</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">All i need</p>
<p class="artist">Method Man</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Jelousy</p>
<p class="artist">Bald Man</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">Soul On fire</p>
<p class="artist">Spiritualized</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Broken Heart</p>
<p class="artist">Bon Jovi</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">All i need</p>
<p class="artist">Method Man</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Jelousy</p>
<p class="artist">Bald Man</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">Soul On fire</p>
<p class="artist">Spiritualized</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Broken Heart</p>
<p class="artist">Bon Jovi</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">All i need</p>
<p class="artist">Method Man</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Jelousy</p>
<p class="artist">Bald Man</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">Soul On fire</p>
<p class="artist">Spiritualized</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Jelousy</p>
<p class="artist">Bald Man</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">Soul On fire</p>
<p class="artist">Spiritualized</p>
</div>
<div class="playListLight">
<p class="bot"> </p>
</div>
</div>
<div id="playListBot"></div>
</div>
<div id="centrCol">
<div class="banr"><img src="images/main_banr.jpg" width="275" height="182" border="0" alt="" /></div>
<div id="albmBlock">
<div id="albmBox">
<div class="topCont">
<h1><img src="images/lyf.gif" border="0" alt="" /></h1> <!-- Ini merupakan semantik elemen h1, mendefinisikan bahwa gambar tersebut sebagai gambar judul paling penting/utama/prioritas no.1 -->
<a href="http://all-free-download.com/free-website-templates/" class="headings">LYFE CHANGE <span>Lyfe Jennings</span></a></div>
<div class="botCont"> <a class="left" href="http://all-free-download.com/free-website-templates/">play</a> <a class="right" href="http://all-free-download.com/free-website-templates/">view details</a> </div>
</div>
<div id="albmBox2">
<div class="topCont">
<h1><img src="images/rock.gif" width="61" height="56" alt="" /></h1>
<a href="http://all-free-download.com/free-website-templates/" class="headings">ROCKBERRY <span>Duffy</span></a></div>
<div class="botCont"> <a class="left" href="http://all-free-download.com/free-website-templates/">play</a> <a class="right" href="http://all-free-download.com/free-website-templates/">view details</a> </div>
</div>
<div id="albmBox3">
<div class="topCont">
<h1><img src="images/that_day.gif" width="63" height="54" alt="" /></h1>
<a href="http://all-free-download.com/free-website-templates/" class="headings">THAT DAY WILL <span>Jungle. Various Artists</span></a></div>
<div class="botCont"> <a class="left" href="http://all-free-download.com/free-website-templates/">play</a> <a class="right" href="http://all-free-download.com/free-website-templates/">view details</a> </div>
</div>
<div id="albmBox4" class="totalheight">
<div class="topCont">
<h1><img src="images/lyf.gif" border="0" alt="" /></h1>
<a href="http://all-free-download.com/free-website-templates/" class="headings">ROCKBERRY <span>Duffy</span></a></div>
<div class="botCont"> <a class="left" href="http://all-free-download.com/free-website-templates/">play</a> <a class="right" href="http://all-free-download.com/free-website-templates/">view details</a> </div>
</div>
</div>
</div>
<div id="rightCol">
<div id="videoBlock">
<div id="videoBlockTop">
<h3>FEATURED VIDEOS</h3>
<p>The latest music, videos, exclusive live footage interviews and more</p>
</div>
<div id="videoBlockBody">
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>DJ DESIGN</b></p>
<p class="light">Great Album Podcast (main version)</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/dj_design.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>AMP LIVE</b></p>
<p class="light">Great Album Podcast</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/amp_live.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>BLACK SPADE </b></p>
<p class="light">Great Album Podcast</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/miller.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>DJ DESIGN</b></p>
<p class="light">Great Album Podcast (main version)</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/black.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>DJ DESIGN</b></p>
<p class="light">Great Album Podcast (main version)</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/dj_design.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>AIR BOURNE</b></p>
<p class="light">"Behind The Scene Featurette"</p>
<p class="dark">File under.Music Video</p>
</div>
<p class="rightBox"><img src="images/air_bourn.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>DJ DESIGN</b></p>
<p class="light">Great Album Podcast (main version)</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/ozo_matli.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>TOMC3</b></p>
<p class="light">Great Album Podcast</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/tomc3.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>VAN HUNT</b></p>
<p class="light">Great Album Podcast</p>
<p class="dark">File under.Interview</p>
</div>
<p class="rightBox"><img src="images/van_hint.gif" width="81" height="38" border="0" alt="" /></p>
</div>
</div>
</div>
<div id="videoBlockBot"></div>
</div>
</div>
<div id="footer">
<div id="footerMenu"> <a href="http://all-free-download.com/free-website-templates/">HOME</a><a href="http://all-free-download.com/free-website-templates/">ABOUT US</a> <a href="http://all-free-download.com/free-website-templates/">AGENDA</a><a href="http://all-free-download.com/free-website-templates/">DJS </a> <a href="http://all-free-download.com/free-website-templates/">GALLERY </a><a href="http://all-free-download.com/free-website-templates/">SHOP </a></div>
<div class="rights">Copyright © gatewan.com 2003-2008 <a href="http://www.gatewan.com/">GATEWAN<a>All Rights Reserved.</div>
<div class="rights">Designed by: <a href="http://www.elegant-templates.com">Elegant Templates</a></div>
</div>
</div>
<div align=center>This template downloaded form <a href='http://all-free-download.com/free-website-templates/'>free website templates</a></div></body>
<!-- Penjelasan tag pada komentar di atas, telah mewakili maksud dari tag-tag serupa lainnya
terimakasih, salam cendekia muda -->
</html>Reference:
- http://www.w3schools.com/html/html5_semantic_elements.asp
- http://html5doctor.com/lets-talk-about-semantics/
History of HTML Development
Starting from 1980 IBM began to create a programming language where Text and format of a document were combined in a programming language called GML (Generalized Markup Language), then in 1986 ISO began to create a standardization of the programming language and changed GML to SGML (Standard Generalized Markup Language). 3 years later, precisely in 1989, a programming language known as HTML (Hypertext Markup Language) was born which emerged from the thoughts of Caillau Tim and his colleague Banners Lee Robert. They developed this programming language and popularized it with the Mosaic browser until its existence became increasingly popular and developed from 1990 until now.
i've seen the future, it's in my browser
1. Hypertext Markup Language (HTML)
It is a programming language used to write web pages. HTML is actually an ASCII or plain text document, designed to be independent of a particular operating system.
2. HTML version 1.0
This is the first version since the name HTML itself was born and has several capabilities such as headings, paragraphs, hypertext, bold, italics, wrapping and also has support for placing images.
3. HTML version 2.0
Released on January 14, 1996, in this version there were several additional capabilities including the addition of a comment form, making it possible to interact and it was from this version that the interactive homepage became a pioneer in every development.
4. HTML version 3.0
Released on December 18, 1997, it is often referred to as HTML+, which has additional capabilities in each of its facilities, including the addition of table features in paragraphs.
5. HTML version 4.0
Released on December 24, 1999, as we know HTML today, there are additional features such as links, meta, imagemaps, images and many more, this is an improvement on the previous version.
On March 4, 2010, as the information that was developing at that time, it was explained that HTML version 5.0 was still being developed by the W3C (World Wide Web Consortium) and IETF (Internet Engineering Task Force), namely organizations that were concentrated on developing the HTML programming language since version 2.0.
6. Latest HTML 5 Features
- Adding input types & form validation
- Native Audio and Video
- Canvas
- Offline Support
- Drag & Drop
- Accessing Hardware.
- There are still some additional features such as Desktop style notifications, security, WebRTC, Microdata, PageVisibility, Fullscreen support, Web socket, History API, HTML editing, WebGL spellcheck and some web technologies that are still being developed.
7. Latest Additions to HTML 5 Tags and Attributes
Attribut HTML5
8. Latest Addition of Attributes to Input Elements
HTML5 Input Element
9. How to Validate HTML
Go to the site http://validator.w3.org/
HTML5 Validation
Validation Results
HTML5 Validation Results
Photoshop Slicing Techniques For Web Design
In general, "PSD to HTML" is a workflow, where the web page is initially designed using Photoshop (PSD) and then converted into code (HTML, CSS, and JavaScript). You can also exchange files from PSD to other image editors such as Pixelmator, GIMP, etc., but the principle remains the same.
The web page you want is initially designed as a whole, such as the Header, Sidebar, Body and Footer sections are still a single unit of several image layers. SLICE TOOL is used to divide the image / image unit into several image parts which are then exported into a web form in *html format.
Slicing Photoshop untuk Templae Web (html)
This is a good first step for a web programmer to start his project, it seems like a good idea before starting coding, because the end result will look clearer and sound like a granular or reasonable process. Unlike a programmer who starts his project directly from writing code, this will seem difficult and I think inefficient.
Below is a simple example of a Beginner's work in learning the principles of the workflow "PSD to HTML"
Photoshop Slicing Practice Results
Scheme Process
10 Aspects of Website Analysis
1. Simplicity
Many graphic design experts suggest this principle in design work. This is very logical for the sake of the ease of readers in understanding the contents of the message conveyed. In the use of letters in a news story for example. The letters of the title (headline), subtitle and body of the news (body text) should not use ornamental and complicated fonts, such as blackletter letters that are difficult to read. Graphic designers also commonly call this principle KISS (Keep It Simple Stupid). This principle can be applied by using elements of white space and not using too many accessory elements. Just as needed.
Wave.com's visual design has implemented the principle of simplicity, where there are not too many messages or texts to describe the product, because wave.com's visuals are quite interactive, with 3D images and product animations, they can represent many messages about the product.
2. Clarity (keelsan)
It is a strong / reasonable reason to use every element in an interface that is created. The use of a little will be better. The appearance of wave.com uses a dark background color (dark and light gray). The dark gray background plays a role in providing a soft appearance, while the light gray provides balance and can refresh the eyes when browsing the site.
3. Balance
There are two principles of balance, namely: formal balance (symmetrical) and informal balance. Formal balance gives the impression of perfection, official, solid, confident and prestigious. Formal balance also refers to consistency in the use of various design elements. On wave.com has a formal category logo because of its consistent design, but unfortunately the color is inconsistent on each web page, sometimes white sometimes gray, although for reasons of background but this still reduces its formal value.
4. Emphasis (accentuation)
Emphasis is intended to attract the reader's attention, so that he wants to see and read the intended design section. Emphasis is also done through repetition of size, as well as contrast between textures, color tones, lines, spaces, shapes or motifs.
5. User Interface
wove.com is a flexible smart watch manufacturer site, has a simple, elegant, responsive and user friendly visual web design.
6. Loading Time
Using Google PageSpeed Insights to test the loading speed of the wove.com page. The result is,
Some things that need to be fixed:
Javascript Enable compression, compressing resources with gzip or deflate can reduce the number of bytes sent over the network. To reduce the transfer size by 192.6 KB (a 71% reduction), enable compression for the following resources; Compressing http://www.wove.com/js/src.min.js saves 189.1 KB (a 72% reduction). Compressing http://www.wove.com/js/lib/com/bugsnag/bugsnag-2.min.js saves 3.4 KB (a 55% reduction).
CSS Optimize the delivery of the following css; http://www.wove.com/css/main.css
7. Accessibility and Compatibility
Leveraged Google Mobile-Friendly Test to test the design compatibility of the wove.com site. The results
8. Content
Wove.com does not have a wealth of content, perhaps because this company is still new, so there are not many things that can be published other than product specifications, unlike large companies, they have a wealth of content such as publications of outbound activities, new project innovations, history, blogs, communities, etc.
9. Popularity
Utilizing alexa.com to monitor SEO development and popularity of the wove.com site. The results;
Bounce Rate. Is the percentage of visitors leaving the site after opening a page without interacting (not opening another page on the same site). The worst Bounce Rate is marked with a percentage of 80% and above, while approaching 50% for the standard rate, and 30% and below is a good rate.
Daily Pageviews per Visitor and Daily Time on Site. Both are directly proportional, namely the average number of minutes a visitor spends on a particular site. If this value is greater, then the site is considered to have interesting information (the opposite of the bounce rate).
Conclusion. On the wove.com site has quite good progress, marked by green highlights on some of its parameters. Yes, even though it is not yet included in the popular site category.
10. Security
Using HTTP (without security) and HTTPS (with security) parameters.
Hypertext Transfer Protocol (HTTP) is an application layer network protocol used for distributed information systems.
Hypertext Transfer Protocol Secure (HTTPS) has the same meaning as HTTP except that HTTPS has an advantage in terms of security. The security used is Secure Socket Layer (SSL) or Transport Layer Security (TLS). Both protocols provide adequate protection from eavesdroppers and man in the middle attacks.
Website Design Analysis Example
A. Sampling
From several sites that received the most interactive design award from a site that focuses on observing website design in Amsterdam, the Netherlands, namely www.awwwards.com, I chose wove.com as a sample that I will review in this IMK assignment.
Wove is a digital company that launched a digital watch product with flexible screen material and the size can also be adjusted according to the size of the user's hand.
B. Visual Design
In this section, I adopt from the discipline of graphic design, where there are several principles that are often used as a reference for each artist's work.
C. Loading Time, Accessibility and Compatibility
In this section I refer to the principles of Google Webmaster, because this division focuses on the field of website development, one of which is by launching several tools as a guide for web developers.
D. Content
I take my content assessment based on the rules that Google often applies to its publishers, including requiring several main menus.
E. Popularity
I took the discussion about popularity based on Alexa's reference, because this company concentrates on providing accurate website analysis data, the data produced tends to be more about traffic or site traffic.
F. Security
Regarding security, I refer to the SSL standard, the characteristics of which we can know from the URL of a website, namely whether it can be accessed using https or just http.