Setelah sebelumnya di postingan Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript Bagian 3 kita telah membuat pemutar musiknya, maka pada postingan terahir di dalam topik ini kita akan memperbaiki beberapa element serta sedikit memberi efek untuk mempercantik tampilan antarmuka.

Pertama-tama kita akan mengedit pada bagian panel header dimana content dari panel header akan kita bagi menjadi 2, yaitu panel header saat posisi SlidingUpPanel terbuka dan panel header saat posisi SlidingUpPanel tertutup atau berada dibagian dibawah layar.
Ubah bagian sliding-up-panel-header menjadi seperti berikut

SlidingUpPanel Music Player




        












            
            
        

Sekarang tambahkan css berikut kedalam file sliding-up-panel.css.

#sliding-up-panel-header.expanded .panel-header-content__expanded{
    transition:opacity 300ms;
    opacity:1;
}
#sliding-up-panel-header .panel-header-content__expanded{
    position: absolute;
    transition: opacity 300ms;
    opacity:0;
    text-align: left;
    padding:20px;
    pointer-events: none;
}
#sliding-up-panel-header .panel-header-content__collapsed{
    pointer-events: none;
}
#sliding-up-panel-header.expanded .panel-header-content__collapsed{
    display: none;
}

Sekarang kita akan memperbaiki beberapa bug yang mungkin telah Anda lihat saat kita mendrag panel header lebih dari tinggi layar maka panel header akan overflow dan tidak nampak dilayar, untuk mengatasinya kita perlu menambahkan statement if saat user mendrag header dengan mengecek apakah posisi sumbu y saat ini kurang dari ukuran saat SlidingUpPanel pada posisi terbuka dan apakah posisi sumbu y saat ini lebih dari 0. Tambahkan 2 baris statement if berikut pada fungsi update di file sliding-up-panel.js tepat sebelum this.slidingPanel.style.transform = `translateY(${to}px)`;

//prevent the header to overflow the screen height when dragging
if(to < this.expandedY) to = this.expandedY;
if(to > 0) to = 0;

Selanjutnya masih di file yang sama, ubah fungsi animateSlidingPanelIntoPosition menjadi seperti berikut.

animateSlidePanelIntoPosition (target) {
    if(!target){
        return;
    }
    // create new function variable to excecute when the transition has ended
    const onAnimationComplete = evt => {
        const panel = evt.target;
        panel.removeEventListener('transitionend', onAnimationComplete);
        panel.style.transition = '';
    };
    // create and set panel to current slidingPanel
    const panel = target;
    //check if current state is expanded
    if(this.isExpanded){
        //add event listener when the transition has ended.
        panel.addEventListener('transitionend', onAnimationComplete);
        //set the panel transition to transform with duration 200 miliseconds
        panel.style.transition = `transform 200ms`;
        //set the panel transform to position when it's in expanded state
        panel.style.transform = `translateY(${this.expandedY}px)`;
        //add class expanded to panel header
        this.panelHeader.setAttribute('class','expanded');
    }else{
        //add event listener when the transition has ended.
        panel.addEventListener('transitionend', onAnimationComplete);
        //set the panel transition to transform with duration 200 miliseconds
        panel.style.transition = `transform 200ms`;
        //set the panel transform to position when it's not in expanded state
        panel.style.transform = `translateY(0px)`;
        //remove class attribute from panel header
        this.panelHeader.removeAttribute('class')
    }
    // user has finish dragging the header, set target to null
    if(!this.draggingHeader)
        this.target = null;
    }

Selanjutnya kita akan menampilkan preloader saat playlist masih kosong dan menyembunyikannya saat playlist telah terisi. Disini kita juga akan memberikan sedikit efek fade in dan slide.
Tambahkan tag div dengan nama class preloader tepat setelah tag audio.

Sekarang ubah css .playlist ul li serta tambahkan .playlist.loading ul li dan .preloader dalam file player.css menjadi seperti berikut.

.preloader{
    position: absolute;
    width:46px;
    height:46px;
    top:calc(50% - 23px);
    left:calc(50% - 23px);
    background-image: url(../assets/img/ajax-loader.gif);
}
.playlist ul li{
    display: block;
    border-bottom: 1px solid black;
    transform: translate3d(0,0,0);
    opacity:1;
}
.playlist.loading ul li{
    transform: translate3d(100%,0,0);
    opacity:0;
}

Selanjutnya buat variabel baru pada fungsi construct untuk menyimpan element preloader dan ubah fungsi loadPlaylistMetadata dan getPlaylist pada file player.js menjadi seperti berikut.

this.preloader = document.querySelector('.preloader');

getPlaylist(){
    var self = this;
    var xhr = new XMLHttpRequest();
    xhr.onload = function(e){
        e.preventDefault();
        if(xhr.status == 200 || xhr.status == 409){
            var data = JSON.parse(xhr.response.match(/\[.*\]/ig, "")[0]);
            data.forEach(function(item,index){
                self.loadPlaylistMetadata(item,index,data.length);
            });
            self.songs = Array.from(document.querySelectorAll('.song a'))
        }else{
            console.log('cant get playlist, error with status code ' + xhr.status);
        }
    }
    xhr.open('get', '\songlist', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send();
}
loadPlaylistMetadata(path,index,length){
    var self = this; 
    // create new li element for the playlist item and set the attribute
    var li = document.createElement('li');
    li.setAttribute('class','song');
    li.setAttribute('data-index',index);
 
    // create new link element and set the href attribute to the file path
    var a = document.createElement('a');
    a.setAttribute('href',path);
 
    // create new image element
    var img = document.createElement('img');
    img.className = 'cover';
    img.style.cssFloat = 'left';
         
    //create new container for title and artist metadata
    var meta = document.createElement('div');
    meta.className = 'metatag playlist';
 
    //create new span element to set title from the file metadata
    var title = document.createElement('span');
    title.className = 'title';
    title.style.whiteSpace = 'nowrap';
 
    //create new span element to set artist name from the file metadata
    var artist = document.createElement('span');
    artist.className = 'artist';
    //insert link/anchor element to li element
    li.appendChild(a);
    //insert img element to link/anchor element
    a.appendChild(img);
    //insert meta container to the link/anchor element
    a.appendChild(meta);
    /* create new p element and insert title and artist to it then append it to meta container, 
    *  this element is necessary if we want the title or artist to 
    *  be marqueed if the width is more than container width.*/
    var p = document.createElement('p').appendChild(title);
    meta.appendChild(p);
    p = document.createElement('p').appendChild(artist);
    meta.appendChild(p);
    // listen to link click event
    a.onclick = function(e){
        e.preventDefault(); 
        self.player.setAttribute('src',path);
        self.songChanged(self.currentSong,li.getAttribute('data-index'));
        self.currentSong = parseInt(li.getAttribute('data-index'));
        self.playPauseBtn[0].children[0].click();                
    };
    //append li element to playlist
    this.playlist.children[0].appendChild(li);
    // read meta data from the file using jsmediatags
    jsmediatags.read(path, {
        onSuccess: function(tag) {
            var url = path;
            var filename = url.split('/');
            filename = filename[filename.length-1];            
            if(tag.tags.picture != undefined){
                 var base64String = "";
                for (var i = 0; i < tag.tags.picture.data.length; i++) {
                    base64String += String.fromCharCode(tag.tags.picture.data[i]);
                }
                img.setAttribute('src',"data:"+ tag.tags.picture.format +";base64," + window.btoa(base64String));
            }else{
                img.setAttribute('src',"assets/img/albumart_mp_unknown.png");
            }
            // if the artist name in metadata is undefined or null, set it to unknown.
            artist.innerHTML = tag.tags.artist || 'unknown';
            // if the title in metadata is undefined or null, use filename instead.
            title.innerHTML = tag.tags.title || filename;
 
            // setup marquee animation    
            self.setupMarqueeAnimation(titles[i],artists[i]);

            if(index == length - 1){
                //hide the preloader
                self.preloader.style.display = 'none';
                //get all li element in playlist
                let list = self.playlist.querySelectorAll('li');
                list.forEach(function(item,index){
                    //add transition with diffrent delay for each item in list depend on item index/position in the list
                    item.style.transition = `transform 300ms ease-in ${index*0.2}s, opacity 300ms ease-in ${index*0.2}s`;
                });
                //change playlist class name, this will remove loading class
                self.playlist.setAttribute('class','playlist');
            }
        },
        onError: function(error) {
            console.log(error);
        }
    });
}

Terakhir tambahkan class loading pada playlist di dalam file index.html menjadi seperti berikut.

Untuk file preloader Anda dapat menggunakan gambar berikut dan menyimpannya di folder assets > img.



Mungkin sampai disini saja pada postingan terakhir dalam topik Membuat SlidingUpPanel Dengan HTML,CSS Dan Javscript ini, jika terdapat pertanyaan dapat menggunakan kotak komentar dibawah.

Pada postingan sebelumnya tentang Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript Bagian 2 kita telah selesai SlidingUpPanel, di postingan kali ini kita akan membuat javascript untuk memainkan lagu dari yang disimpan dalam folder songs.

Buatlah file javascript baru di dalam folder proyek Anda beri nama player.js. Seperti sebelumnya ssaat membuat sliding-up-panel.js buatlah class MusicPlayer pada file tersebut kemudian tambahkan constructor pada kelas MusicPlayer dan inisialisasikan variable yang akan digunakan.

'use strict';
class MusicPlayer{
    constructor(){
        this.player = document.querySelector('audio');
        this.playlist = document.querySelector('.playlist');
        this.playPauseBtn = Array.from(document.querySelectorAll('.play-btn'));
        this.nextBtn = document.querySelector('.next-btn');
        this.prevBtn = document.querySelector('.prev-btn');

        this.songs = Array.from(document.querySelectorAll('.song a'));
        this.currentSong = 0;
        
        this.onPlayPause = this.onPlayPause.bind(this);
        this.onNextClick = this.onNextClick.bind(this);
        this.onPreviousClick = this.onPreviousClick.bind(this);
        this.onProgress = this.onProgress.bind(this);
        this.onMetadataLoaded = this.onMetadataLoaded.bind(this);
        this.onSongEnded = this.onSongEnded.bind(this);
        this.songChanged = this.songChanged;
        this.setupMarqueeAnimation = this.setupMarqueeAnimation.bind(this);
        this.addEventListeners();
        this.initPlaylist();

    }
}
window.addEventListener('load',() => new MusicPlayer());

Sekarang buat fungsi untuk menginisialisasikan daftar putar dengan melakukan XMLHttpRequest ke sisi server dan menerima semua nama file yang ada dalam folder songs.

initPlaylist(){
    this.getPlaylist();
}
getPlaylist(){
    var self = this;
    return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.onload = function(e){
            e.preventDefault();
            if(xhr.status == 200 || xhr.status == 409){
                //parse the response to JSON Array
                var data = JSON.parse(xhr.response.match(/\[.*\]/ig, "")[0]);
                // loopping through all item in array, where each item contain link to the file.
                data.forEach(function(item,index){
                    // load metadata from the file
                    self.loadPlaylistMetadata(item,index);
                });
                resolve(data);
            }else{
                reject('cant get paylist');
            }
        }
        // open XMLHttpRequest with GET method
        xhr.open('get', '\songlist', true);
        // set header Content-Type to JSON
        xhr.setRequestHeader('Content-Type', 'application/json');
        // send the request to server
        xhr.send();
    });
}
loadPlaylistMetadata(path,index){
    self =this; 
    // create new li element for the playlist item and set the attribute
    var li = document.createElement('li');
    li.setAttribute('class','song');
    li.setAttribute('data-index',index);

    // create new link element and set the href attribute to the file path
    var a = document.createElement('a');
    a.setAttribute('href',path);

    // create new image element
    var img = document.createElement('img');
    img.className = 'cover';
    img.style.cssFloat = 'left';
        
    //create new container for title and artist metadata
    var meta = document.createElement('div');
    meta.className = 'metatag playlist';

    //create new span element to set title from the file metadata
    var title = document.createElement('span');
    title.className = 'title';
    title.style.whiteSpace = 'nowrap';

    //create new span element to set artist name from the file metadata
    var artist = document.createElement('span');
    artist.className = 'artist';
    //insert link/anchor element to li element
    li.appendChild(a);
    //insert img element to link/anchor element
    a.appendChild(img);
    //insert meta container to the link/anchor element
    a.appendChild(meta);
    /* create new p element and insert title and artist to it then append it to meta container, 
    *  this element is necessary if we want the title or artist to 
    *  be marqueed if the width is more than container width.*/
    var p = document.createElement('p').appendChild(title);
    meta.appendChild(p);
    p = document.createElement('p').appendChild(artist);
    meta.appendChild(p);
    // listen to link click event
    a.onclick = function(e){
        e.preventDefault(); 
        self.player.setAttribute('src',link);
        self.songChanged(self.currentSong,li.getAttribute('data-index'));
        self.currentSong = parseInt(li.getAttribute('data-index'));
        self.playPauseBtn[0].children[0].click();                
    };
    //append li element to playlist
    this.playlist.children[0].appendChild(li);
    // read meta data from the file using jsmediatags
    jsmediatags.read(path, {
        onSuccess: function(tag) {
            var url = path;
            var filename = url.split('/');
            filename = filename[filename.length-1];            
            if(tag.tags.picture != undefined){
                 var base64String = "";
                for (var i = 0; i < tag.tags.picture.data.length; i++) {
                    base64String += String.fromCharCode(tag.tags.picture.data[i]);
                }
                img.setAttribute('src',"data:"+ tag.tags.picture.format +";base64," + window.btoa(base64String));
            }else{
                img.setAttribute('src',"assets/img/albumart_mp_unknown.png");
            }
            // if the artist name in metadata is undefined or null, set it to unknown.
            artist.innerHTML = tag.tags.artist || 'unknown';
            // if the title in metadata is undefined or null, use filename instead.
            title.innerHTML = tag.tags.title || filename;

            // setup marquee animation    
            self.setupMarqueeAnimation(titles[i],artists[i]);
                
        },
        onError: function(error) {
            console.log(error);
        }
    });
}

Buatlah fungsi baru untuk menambahkan animasi marquee pada title/artist jik lebarnya melebihi container/parent.

setupMarqueeAnimation(title,artist){
    if(title.offsetWidth > parseInt(title.parentNode.style.width.replace('px',''))){
        title.className += ' marquee-title';
    }else{
        title.style.willChange = 'initial';
        title.className = 'title';
    }
    if(artist.offsetWidth > parseInt(artist.parentNode.style.width.replace('px',''))){
        artist.className += ' marquee-artist';
    }else{
        artist.className = 'artist';
    }
}

Setelah itu buat fungsi untuk menambahkan event listener yang dibutuhkan.

addEventListeners(){
    this.player.ontimeupdate = this.onProgress;
    this.player.onended = this.onSongEnded;
    this.player.onloadedmetadata = this.onMetadataLoaded;
    for(var i in this.playPauseBtn){
        this.playPauseBtn[i].addEventListener('click',this.onPlayPause);
    }
    this.nextBtn.addEventListener('click',this.onNextClick);
    this.prevBtn.addEventListener('click',this.onPreviousClick);
}

Sekarang buat fungsi-fungsi yang digunakan di event listener diatas.

onSongEnded(e){
    this.moveToNext();
}
onNextClick(e){
    this.moveToNext();
    e.preventDefault();
}
onPreviousClick(e){
    this.moveToPrevious();
    e.preventDefault();
}
onPlayPause(e){
    if(this.player.getAttribute('src') == ''){
        this.player.setAttribute('src',this.songs[0].getAttribute('href'));
        this.currentSong = 0;
        this.songChanged(null,0);
    }
    if(this.player.paused){
        this.player.play().then().catch(function(error){
            console.log(error);
        });
        for(var i in this.playPauseBtn){
            this.playPauseBtn[i].children[0].setAttribute('src','assets/icons/pause-btn.svg');
            this.playPauseBtn[i].setAttribute('state','play');
        }
    }else{
        try{
            this.player.pause();
            for(var i in this.playPauseBtn){
                this.playPauseBtn[i].children[0].setAttribute('src','assets/icons/play-btn.svg');
                this.playPauseBtn[i].setAttribute('state','play');
            }
        }catch(error){
            console.log(error);
        }   
    }              
    e.preventDefault();
    }
onMetadataLoaded(e){
    var self = this;
    var artists = document.querySelectorAll('.meta .artist');
    var titles = document.querySelectorAll('.meta .title');
    var covers = Array.from(document.querySelectorAll('img.coverart'));
    jsmediatags.read(e.target.src, {
        onSuccess: function(tag) {
            var url = e.target.src;
            var filename = url.split('/');
            filename = filename[filename.length-1]
            if(tag.tags.picture != undefined){
                for(var j in covers){
                    var base64String = "";
                    for (var i = 0; i < tag.tags.picture.data.length; i++) {
                        base64String += String.fromCharCode(tag.tags.picture.data[i]);
                    }
                    covers[j].setAttribute('src',"data:"+ tag.tags.picture.format +";base64," + window.btoa(base64String));
                }
            }else{
                for(var j in covers){
                    covers[j].setAttribute('src',"assets/img/albumart_mp_unknown.png");
                }
            }
            for(var i = 0; i < artists.length;i++){
                titles[i].parentNode.style.width = 200;
                artists[i].parentNode.style.width = 200;
                artists[i].innerHTML = tag.tags.artist;
                titles[i].innerHTML = tag.tags.title;

                // if the artist name in metadata is undefined or null, set it to unknown.
                artist.innerHTML = tag.tags.artist || 'unknown';
                // if the title in metadata is undefined or null, use filename instead.
                title.innerHTML = tag.tags.title || filename;

                // setup marquee animation    
                self.setupMarqueeAnimation(titles[i],artists[i]);
            }
                
        },
        onError: function(error) {
            console.log(error);
        }
    });
}
    
moveToNext(){
    var next = this.currentSong + 1,link;
    if(next < this.songs.length){
        link = this.songs[next].getAttribute('href');
        this.songChanged(this.currentSong,next);
        this.currentSong = next;
        this.player.setAttribute('src',link);
                  
    }else{
        link = this.songs[0].getAttribute('href');
        this.songChanged(this.currentSong,0);
        this.currentSong = 0;
        this.player.setAttribute('src',link);
    }
    this.player.load();
    this.player.play();
}
moveToPrevious(){
    var prev = this.currentSong - 1,link;
    if(prev >= 0){
        link = this.songs[prev].getAttribute('href');
        this.songChanged(this.currentSong,prev);
        this.currentSong = prev;
        this.player.setAttribute('src',link);
                    
    }else{
        prev = this.songs.length - 1;
        var link = this.songs[prev].getAttribute('href');
        this.songChanged(this.currentSong,prev);
        this.currentSong = prev;
        this.player.setAttribute('src',link);
    }
    this.player.play();
}

Kemudian buat fungsi baru lagi untuk mengubah warna background dari item yang saat ini sedang dimainkan.

songChanged(before,current){
    //if the song before the current one is not null, remove active class from that element
    if(before != null){
        this.songs[before].removeAttribute('class');
    }
    // set the current song item class in playlist to active
    this.songs[current].setAttribute('class','active');
}

Sampai disini pembuatan pemutar musiknya telah selesai, sekarang buka cmd/terminal kemudiang ketikkan perintah supervisor index.js kemudian buka browser dan ubah url menjadi http:/localhost:3000 untuk melihat hasilnya. Kurang lebih hasilnya menjadi akan seperti berikut.



untuk postingan selanjutnya kita akan memperbaiki beberapa tampilan termasuk panel header yang akan kita buat berganti tampilan saat kita membuka panel. :)

Pada postingan sebelumnya tentang Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript Bagian 1 kita telah selesai membuat desain awal aplikasi, di postingan kali ini kita akan bermain dengan javascript untuk membuat SlidingUpPanel yang kita buat sebelumnya dapat bekerja sesuai apa yang kita inginkan.

Pertama buatlah file javascript baru beri nama sliding-up-panel.js kemudian tuliskan "use strict";. Mode use strict ini berguna untuk menempatkan program atau fungsi dalam operasi konteks yang strict (ketat). konteks yang ketat ini mencegah tindakan-tindakan tertentu dan melempar lebih banyak exception/pengecualian.

Disini kita akan membuat kelas baru dengan nama SlidingUpPanel dan memuat kelas pada event window onload.

"use strict";
class SlidingUpPanel{
    constructor(){
       
    }
}
window.addEventListener('load',() => new SlidingUpPanel());

Untuk mengetes apakah kelas yang kita buat bekerja kita akan menulis ke console, menjadi seperti berikut.

"use strict";
class SlidingUpPanel{
    constructor(){
       console.log('Hello World!')
    }
}
window.addEventListener('load',() => new SlidingUpPanel());

Sekarang buka cmd/terminal di dalam folder proyek Anda kemudian ketikan perintah berikut dan buka browser ketikkan url http://locahost:3000.
supervisor index.js
Kemudian tekan CTRL + SHIFT + I untuk membuka panel alat pengembang dan melihat hasilnya di bagian console.


Jika Anda melihat tulisan "Hello World!" di console seperti yang terlihat pada gambar diatas, artinya kelas SlidingUpPanel yang kita buat bekerja. Sekarang kita perlu menginisialisasikan variabel yang dibutuhkan didalam fungsi constructor() dan mengganti console.log yang kita buat sebelumnya.

class SlidingUpPanel{
    constructor(){
        this.slidingPanel = document.querySelector('#sliding-up-panel');
        this.panelHeader = document.querySelector('#sliding-up-panel-header');
        this.panelBody = document.querySelector('#sliding-up-panel-body');
        this.mainContent = document.body.children[0];
        this.mainContent.style.marginBottom = `${this.panelHeader.offsetHeight}px`;
        this.slidingPanel.style.height = window.innerHeight;
        this.slidingPanel.style.top = window.innerHeight - this.panelHeader.offsetHeight;

        this.target = null;
        this.targetBCR = null;
        this.panelBCR = this.slidingPanel.getBoundingClientRect();

        this.startY = 0;
        this.currentY = 0;
        this.screenY = 0;
        this.targetY = 0;
        this.collapsedY = this.panelBCR.height - this.panelHeader.offsetHeight;
        this.expandedY = -this.panelBCR.height + this.panelHeader.offsetHeight;
        
        this.draggingHeader = false;
        this.isExpanded = false;
    }
}

Sekarang kita akan membuat beberapa fungsi baru untuk mendengarkan event yang kita butuhkan diantaranya adalah :

• Event mousedown
• Event mousemove
• Event mouseup
• Event touchstart
• Event touchmove
• Event touchend
• Event Window Resize

Event touch digunakan agar nantinya support untuk perangkat layar sentuh. Namun pada dasarnya isi dari fungsi touch dan mouse sama, sedangkan event Window resize digunakan untuk mengubah posisi top pada SlidingUpPanel saat jendela browser berubah ukuran.
Sekarang buatlah fungsi baru seperti berikut di dalam class SlidingUpPanel.

addEventListeners(){
        document.addEventListener('touchstart', this.onStart);
        document.addEventListener('touchmove', this.onMove);
        document.addEventListener('touchend', this.onEnd);
        
        const self = this;
        window.addEventListener('resize',function(e){
            self.slidingPanel.style.top = window.innerHeight - self.panelHeader.offsetHeight;
            self.expandedY = -window.innerHeight + self.panelHeader.offsetHeight;
            self.animateSlidePanelIntoPosition(self.slidingPanel);
            e.preventDefault();
        });

        document.addEventListener('mousedown', this.onStart);
        document.addEventListener('mousemove', this.onMove);
        document.addEventListener('mouseup', this.onEnd);
    }

Sekarang kita buat 3 fungsi yang akan digunakaan yaitu onStart, onMove dan onEnd.

onStart (evt) {
        if (this.target)
            return;
        
        //if current target id is not sliding-up-panel-header, don't execute the next code.
        if (evt.target.id != 'sliding-up-panel-header')
            return;
        //set target to current touched/clicked target
        this.target = evt.target;
        //set targetBCR to current touched/clicked target Bounding Client Rectangle
        this.targetBCR = this.target.getBoundingClientRect();
        //set startY to current touched/clicked Y position on page
        this.startY = evt.pageY || evt.touches[0].pageY;
        //set currentY equal to startY
        this.currentY = this.startY;

        //set draggingHeader to true
        this.draggingHeader = true;
        /* because we will change the panel position based on Y axis using translateY 
        *  set property will-change to transform */
        this.slidingPanel.style.willChange = 'transform';
        
        evt.preventDefault();
    }
    onMove(evt){
        if (!this.target)
            return;
        //set currentY to current touched/clicked Y position on page when we drag the header
        this.currentY = evt.pageY || evt.touches[0].pageY;
    }
    onEnd(evt){
        if (!this.target)
            return;
        
        this.targetY = 0;
        //create new variable screenY and set current header panel position to it.
        let screenY = this.currentY - this.startY;
        /* threshold variable is used to check if user has drag more then 1/4 of panel height size
        *  you can change this to half or whatever you want the slider to be expanded or not 
        *  when user drag more then threshold */
        const threshold = this.panelBCR.height * 0.25;
        if (Math.abs(screenY) > threshold) {
            /* set targetY to panel bounding client rectangle height subtract by panel header height if screenY is 
            *  positive value and set to negative value of panel bounding client rectangle height add by 
            *  panel header height */
            this.targetY = (screenY > 0) ?
                (this.panelBCR.height - this.panelHeader.offsetHeight) :
                (-this.panelBCR.height + this.panelHeader.offsetHeight);
        }
        //set draggingHeader to false
        this.draggingHeader = false;
    }

Setelah semua fungsi telah dibuat sekarang kita akan melakukan bind pada fungsi yang kita buat tadi ke variabel dalam konteks kelas SlidingUpPanel. Tambahkan script berikut ke dalam fungsi constructor.

this.onStart = this.onStart.bind(this);
this.onMove = this.onMove.bind(this);
this.onEnd = this.onEnd.bind(this);
this.addEventListeners();

Sekarang kita akan masuk ke bagian animasi dimana kita menggerakan sliding panel berdasarkan sumbu y saat kita melakukan drag pada panel header.
Untuk menganimasikan panel disini saya menggunakan requestAnimationFrame agar browser dapat megoptimasikan animasi sehingga animasi menjadi lebih halus saat objek bergerak. buatlah fungsi baru seperti berikut.

update () {
        requestAnimationFrame(this.update);
        
        if (!this.target)
            return;

        if (this.draggingHeader) {
            this.screenY = this.currentY - this.startY;
        } else {
            this.screenY += (this.targetY - this.screenY) / 4;
        }
        /* create new variable to and set the value to where we want the sliding panel to move based on Y axis.
        *  if current panel state is expanded then we move it to expandedY add by screenY 
        *  if not then use screenY instead */
        let to = (this.isExpanded) ? (this.expandedY + this.screenY) : this.screenY;
        this.slidingPanel.style.transform = `translateY(${to}px)`;
        
        // Check if user still dragging the header or not, if true don't execute the next code.
        if (this.draggingHeader)
            return;
        const panel = this.target.parentNode;
        const isNearlyAtStart = (!this.isExpanded)?(Math.abs(this.screenY) < Math.abs(panel.offsetHeight/4)):(Math.abs(this.screenY) > Math.abs(panel.offsetHeight/4));
        const isNearlyExpanded = (!this.isExpanded)?(Math.abs(this.screenY) > Math.abs(panel.offsetHeight/4)):(Math.abs(this.screenY) < Math.abs(panel.offsetHeight/4));
        // If the panel is nearly expanded and current state is not expanded.
        if (isNearlyExpanded && !this.isExpanded) {
            // Bail if there's no target or it's not attached to a parent anymore.
            if (!this.target || !this.target.parentNode)
                return;
            // set isExpanded to true
            this.isExpanded = true;
        } else if (isNearlyAtStart) {
            // set isExpanded to false
            this.isExpanded = false;      
        }
        // animate the panel to the position where we want it based on its state expanded or not.
        this.animateSlidePanelIntoPosition(this.target.parentNode);
    }

Selanjutnya tambahkan script berikut ke dalam fungsi construct.

this.update = this.update.bind(this);
requestAnimationFrame(this.update);

Sekarang kita akan membuat fungsi baru untuk menggerakkan panel pada posisinya berdasarkan keadaan panel yang disimpan dalam variabel isExpanded.

animateSlidePanelIntoPosition (target) {
        if(!target){
            return;
        }
        // create new function variable to excecute when the transition has ended
        const onAnimationComplete = evt => {
            const panel = evt.target;
            //remove current listener from the panel
            panel.removeEventListener('transitionend', onAnimationComplete);
            panel.style.transition = '';
           
        };
        // create and set panel to current slidingPanel
        const panel = this.slidingPanel;
        //check if current state is expanded
        if(this.isExpanded){
            //add event listener when the transition has ended.
            panel.addEventListener('transitionend', onAnimationComplete);
            //set the panel transition to transform with duration 200 miliseconds
            panel.style.transition = `transform 200ms`;
            //set the panel transform to position when it's in expanded state
            panel.style.transform = `translateY(${this.expandedY}px)`;
        }else{
            //add event listener when the transition has ended.
            panel.addEventListener('transitionend', onAnimationComplete);
            //set the panel transition to transform with duration 200 miliseconds
            panel.style.transition = `transform 200ms`;
            //set the panel transform to position when it's not in expanded state
            panel.style.transform = `translateY(0px)`;
        }
        // animation has ended, set target to null 
        this.target = null;
    }

Sekarang buka kembali browser Anda kemudian lihat hasilnya di http://localhost:3000, kurang lebih hasilnya akan seperti berikut. Sampai disini Anda telah berhasil membuat SlidingUpPanel Layout, untuk posting selanjutnya kita akan mulai membuat javascript untuk pemutar musiknya. So stay Tuned ;)!! Untuk gambar-gambar yang digunakan dalam tutorial ini dapat di download disini.

Pada potingan kali ini saya akan membahas tentang Polymer yang dikembangkan oleh google dan baru dirilis pada 27 mei 2015.

Apa itu Polymer

Polymer merupakan Javascript library open-source yang dapat Anda gunakan untuk membangun aplikasi web menggunakan komponen web. library ini sedang dikembangkan oleh Google dan kontributor di GitHub. prinsip desain yang modern diimplementasikan sebagai proyek terpisah menggunakan prinsip-prinsip desain dari Google Material Design.

Polymer digunakan di sejumlah layanan dan situs web milik Google , termasuk YouTube Gaming dan website Google I/O.

pengembangan dari Polymer dimulai pada 14 November 2013 dengan merilis sebuah Polyfill. Project ini terus berkembang menjadi sebuah perpustakaan desain web yang meliputi pedoman gaya visual (melalui Material Design), data binding, dan sejumlah komponen web "Core" dan "Paper". komponen Core awalnya direncanakan akan mencakup fungsi generik yang akan menjadi penting untuk sebagian besar situs, sementara komponen Paper dimaksudkan untuk menyediakan komponen yang lebih khusus dengan konsep Material Design yang membentuk bagian penting dari desain-desainnya. Sebuah tonggak utama dicapai dengan merilis versi 0.5, yang dianggap sebagai versi pertama dari proyek ini dan siap digunakan oleh pengadopsi awal.

Google terus merevisi desain Polymer setelah merilis Polymer versi 0.5, dengan pertimbangan khusus diberikan kepada masalah kinerja yang ditemukan oleh sejumlah pengembang. Proyek ini memuncak dengan merilis Polymer 1,0 pada tahun 2015, yang merupakan versi pertama "siap produksi". Versi 1.0 secara signifikan meningkatkan kinerja Polymer, mengurangi beban hingga 7 kali lipat. Dengan versi 1.0 Google membagi elemen dari proyek Polymer dan membedakan katalog elemen dari Polymer polyfill & webcomponents-sugaring.

Itu tadi sedikit penjelasan tentang proyek Polymer yang dikembangkan oleh Google. Sekarang saya akan memberikan petunjuk langkah demi langkah ntuk memulai membuat proyek menggunakan polymer.

Menginstall Polymer Cli(Command Line Interface)

Untuk mempermudah kita akan menggunakan polymer-cli yang dapat diinstall melalui npm, untuk dapat menggunakan npm Anda perlu menginstall Nodejs pada PC/Mac Anda yang dapat di download di nodejs.org.
Setelah Anda menginstall Nodejs bukalah terminal/cmd kemudian gunakan perintah berikut untuk menginstall polymer-cli.

Mac :

sudo npm install -g polymer-cli

Windows :

npm install -g polymer-cli

Tunggu hingga proses instalasi selesai. Jika telah selesai ada baiknya kita menginstall bower terlebih dahulu, bower digunakan untuk mendownload beberapa komponen dari proyek polymer termask beberapa library pihak ketiga yang dibutuhkan, Anda juga dapat mendownload library lain menggunakan bower.

Untuk menginstall bower gunakan perintah berikut pada terminal/cmd.

Mac :

sudo npm install -g bower

Windows :

npm install -g bower

Setelah Anda menginstall bower, buatlah folder baru untuk menempatkan proyek polymer lalu buka terminal/cmd pada folder tersebut. Gunakan perintah berikut untk menginisialisasikan proyek polymer.

polymer init

Saat Anda menjalankan perintah diatas tunggulah beberapa saat, nantinya akan ada 4 pilihan :
element : template kosong untuk membat elemen.
application : template aplikasi kosong.
shop : template toko online.
app-drawer-template : template dengan menu drawer dan 3 tampilan berbeda.

Anda dapat memilih yang mana saja untuk memulai kemudian tekan Enter pada keyboard.  Setelah itu Anda akan diminta menentukan nama aplikasi, nama elemen utama dan penjelasan tentang project Anda. Tunggulah beberapa saat hinga proses inisialisasi selesai. Proses ini akan memakan waktu beberapa menit terlebih jika Anda memilih template shop. Disini polymer-cli akan otomatis mendownload beberapa library dan template yang akan digunakan pada proyek Anda.

Mungkin itu saja yang dapat saya jelaskan pada postingan kali ini, untuk pembahasan lebih lanjut tentang penggunaan polymer mungkin akan saya teruskan pada posting-postingan selanjutnya.

Semoga bermanfaat ...!! :)

Seperti janji saya sebelumnya pada postingan kali ini kita akan bermain dengan animasi css serta mengkombinasikannya dengan javascript. Pada postingan kali ini saya akan membahas tentang cara penggunaan keyframes untuk menganimasikan objek.

Animasi pada CSS3 biasanya di deklarasikan menggunakan property animation, setiap animasi dapat dijadikan satu menggunakan keyframes. Seperti layaknya pada beberapa software animasi 3D dimana setiap pergerakan objek memiliki keyframes.

Move To Right Animation (Animasi Bergerak Ke Kanan)

Sekarang kita akan mencoba menggerakan sebuah objek HTML dari posisi awal menuju posisi bagian kanan. terdapat beberapa cara untuk membuat animasi ini kita dapat mengubah margin/padding dari objek atau kita juga dapat mengubah posisi dari objek tersebut. Disini saya menggunakan posisi objek dengan property left, perlu diingat bahwa ketika kita ingin menggunakan property left,right,top atau bottom kita harus terlebih dahulu mendeklarasikan properti position jika tidak maka properti yang Anda deklarasikan tidak akan dieksekusi.
berikut contoh animasi CSS3 menggunakan keyframes yang bergerak ke kanan.

button{
  position:relative;
  display:block;
  margin:10px auto;
}
@keyframes ltr {
  0% {
    left:0px;
  }
  50% {
    left:70px;
  }
  100% {
    left:0px;
  }
}

Pada CSS diatas saya membuat keyframes yang saya beri nama ltr dan terdapat 3 keyframes dimana saya hanya mengubah posisi left dari objek dimana objek yang saya gunakan adalah sebuah button. Ada 2 Cara dalam menggunakan keyframes yaitu menggunakan persentasi atau menggunakan from dan to. Namun disini saya hanya membahas yang menggunakan persen. Pada keyframes kedua objek digerakkan 70px ke kanan, kemudian pada keyframes ketiga objek dikembalikan ke posisi semula.

Untuk mengimplementasikan animasi tersebut ke sebuah objek kita perlu menambahkan properti animation pada objek yang akan kita animasikan, terdapat 2 cara, membuat class baru di CSS atau menambahkannya pada attribut style di sebuah objek HTML. Namun dalam kasus ini saya memakai cara yang kedua yaitu menambahkan properti animation pada attribut style.

Pertanyaan yang ada di benak Anda mungkin adalah "Lalu, bagaimana cara melakukannya ?" untuk melakukannya kita akan menggunakan javascript, javascript sangat berguna untuk membuat website menjadi lebih responsive, banyak situs-situs besar seperti misalnya Twitter yang memiliki framework bootstrap, kemudian jQuery dan jQuery Mobile serta masih banyak lagi framework javascript lainnya.

Lanjut ke pembahasan, jadi untuk menambahkan properti animation kita memerlukan javascript terutama apabila kita ingin memicu animasi pada kondisi tertentu, misal saat objek diklik atau saat objek menyentuh kursor mouse dan lain sebagainya. disini saya akan memicu animasi saat objek menyentuh kursor mouse. Untuk mengakses objek menggunakan javascript kita dapat menggunakan id, class atau tag dari objek tersebut, jadi jika Anda ingin mengubah suatu objek dengan tag yang sama maka ada baiknya Anda menggunakan class atau id agar objek tidak mengeksekusi perintah yang sama. Disini saya memberikan id btn pada objek yang akan diubah.

var tombol = document.getElementById('btn');
tombol.onmouseover = function(){
   tombol.setAttribute("style","animation: ltr 2s");
}
setTimeout(function() {
   tombol.removeAttribute("style");
}, 2000);

Saya akan sedikit menjelaskan tentang script diatas melalui tabel berikut

tombol	Variabel yang kita buat untuk mengakses objek yang akan diberikan animasi
document	Representasi halaman HTML
onmouseover	Event yang kita gunakan untuk memicu pengubahan attribute pada objek yaitu saat kursor mouse menyentuh objek tersebut
setAttribute("style","animation: ltr 2s")	fungsi yang digunakan untuk menambahkan attribute pada objek dimana parameter pertama adalah nama attribute sedangkan parameter kedua adalah value dari attribute dimana terdapat 2 argument, nama keyframes dan lama waktu animasi
setTimeout	Digunakan untuk mengeksekusi suatu perintah setelah kurun waktu tertentu

Pada script diatas saya menggunakan setTimeout untuk menghapus attribute style setelah animasi telah selesai, tujuannya adalah agar saat event onmouseover dipicu kembali objek akan tetap dianimasikan. Untuk membuat animasi yang bergerak dari Kanan ke Kiri Anda hanya perlu mengubah properti left pada keyframes menjadi right

Full Code

Rotate Animation(Animasi Berputar)

Untuk membuat animasi berputar tidak berbeda jauh dengan animasi sebelumnya, yang berbeda hanya pada keyframes nya saja dimana pada keyframes saya menggunakan property transform kemudian memutar objek pada sumbu Z sebanyak 360 derajat.

Move To Bottom Animation(Animasi Bergerak Ke Bawah)

Animasi ini hampir sama seperti yang pertama, perbedaannya hanya pada properti left dimana saya mengubahnya menjadi top.




Itu tadi 3 variasi animasi yang dapat digunakan untuk menganimasikan objek HTML di web Anda. Bagaimana ? mudah bukan ? tidak ada yang sulit selama Anda mau belajar :). Untuk hasil akhir dapat dilihat disini

Semoga bermanfaat ...!!

Setelah di postingan sebelumnya saya sudah sedikit menjelaskan tentang apa itu javascript, maka di postingan kali ini kita akan mencoba beberapa fitur yang ada di CSS3 sekaligus mengkombinasikannya dengan javascript.

Rounded Corners (Sudut Tumpul)

Pertama kita mulai dengan Sudut Tumpul atau yang sering disebut dengan Rounded Corners.
Di CSS3 kita dapat membuat suatu objek memiliki sudut tumpul atau rounded corners dengan menambahkan properti border-radius. berikut contoh penggunaan border-radius pada tombol dengan css yang ditulis menggunakan cara penulisan Embadded Stylesheet.

<html>
<head>
<style>
.btn{
   border-radius: 5px;
}
</style>
</head>
<body>
<button class="btn">button</button>
</body>
</html>

Hasil Output :

button

Color Gradient (Warna Gradien)

Jika Anda sering bermain dengan software editing foto seperti Photoshop mungkin Anda sudah tidak asing dengan apa yang disebut dengan warna gradien. warna gradien(sering disebut dengan warna ramp atau warna deret) menentukan berbagai warna tergantung dari posisi, biasanya digunakan untuk mengisi suatu objek. Warna yang dihasilkan bervariasi terus-menerus dengan posisi, sehingga menghasilkan transisi warna yang halus. Terdapat beberapa variasi warna gradien yang dapat kita gunakan di CSS3 namun disini saya hanya menunjukkan cara penggunaan warna gradien yang biasa yaitu dari atas kebawah.

berikut contoh cara penggunaan warna gradient di CSS3 :

<html>
<head>
<style>
.gradient{
   background: linear-gradient(cyan, whitesmoke); 
   height: 50px; 
   width: 100%;
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>

Hasil output :

Shadows(Bayangan)

Pada CSS3 juga terdapat efek bayangan yang dapat kita gunakan untuk memberikan efek bayangan pada suatu objek atau teks Berkut contoh efek bayangan pada text

<html>
<head>
<style>
span{
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<span></div>
</body>
</html>

Hasil output :
Teks Dengan efek bayangan

kemudian untuk memberikan efek bayangan pada sebuah objek biasanya menggunakan properti box-shadow.

<html>
<head>
<style>
.shadow{
height: 50px; 
width: 50px;
box-shadow:10px 10px;
}
</style>
</head>
<body>
<span></div>
</body>
</html>

Hasil Output :

Itu tadi beberapa fitur baru di CSS3, untuk postingan selanjutnya saya akan membahas tentang properti Transform,Animaton dan Transition serta menggabungkannya dengan javascript.

Semoga bermanfaat !!!

Setelah Sebelumnya saya telah membahas tentang CSS pada artikel CSS(Cascading Stylesheet) dimana disana saya menjelaskan beberapa dasar cara menggunakan CSS, maka pada postingan kali ini saya akan sedikit membahas tentang CSS3 dimana CSS3 merupakan pengembangan dari CSS, sehingga dalam dasar penggunaanya tidak berbeda dengan CSS.

Di CSS3 terdapat beberapa penambahan fitur diantaranya adalah :

• Box Model
• Efek Teks
• Transformasi 2D/3D 
• Animasi
• Layout multi kolom
• dll.

Apa itu Javascript ?

Javascript adalah bahasa pemrograman tingkat tinggi yang banyak digunakan di internet dan dapat bekerja di beberapa web browser populer seperti Internet Explorer/Edge, Netscape, Opera, Mozilla Firefox dan Chrome.

Kode javascript biasanya dituliskan dalam bentuk fungsi diantara tag
<script type="text/javascript"> dan </script > atau ditulis didalam file yang berbeda.

Sejarah Javascript

JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape di bawah nama Mocha, yang tadinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.

Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.

JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX(Asynchronus Javascript XMLHTTP). JavaScript adalah bahasa yang digunakan untuk AJAX.

Itu tadi sedikit penjelasan tentang Apa itu Javascript dan sejarah singkatnya, saya akan mulai menjelaskan bagaimana cara menggunakan Javascript bersama dengan HTML dan CSS3 pada postingan selanjutnya.

Pada artikel sebelumnya saya saya telah membahas tentang Pengertian HTML dan Dasar Penggunaan HTML. Dan pada tahap ini saya anggap bahwa Anda telah memahami cara penggunaan HTML sehingga saya akan melanjutkan ke tahap selanjutnya yaitu CSS (Casading Style Sheet).

Pengertian CSS

CSS (Cascading Style Sheet) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading,subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian body pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
CSS adalah bahasa Style Sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Cara Penulisan CSS

Inline style sheet
Penulisan di dalam elemen HTML.

Contoh script 1






Embedded Style Sheet
Penulisan CSS di dalam dokumen HTML dan menggunakan tag <style></style>

Contoh script 2



Linked Style Sheet
Penulisan skrip CSS dihalaman berbeda atau terpisah dari html.

Contoh script 3


Contoh script style1.css

Aturan Penulisan CSS

Selector
Terdiri dari tag,class,ID

Declaration
Mendeskripsikan property dan value
Contoh

H1 

{ 

Color : #0000FF 

} 

Keterangan :
Selector : H1
Properti : Color
Value : #0000FF

Macam-macam Selector

Tag/Elemen
Setiap tag yang ada pada HTML bisa dijadikan selector

Class
Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class
style1.css

h1

{

color:red;

}

.isiteks

{

font-family:arial,halvetica;

font-size:24px;

color:#6699FF;

}

contoh script

<html> 

<head> 

<link href='style1.css' rel="stylesheet" type='text/css'> 

</head> 

<body> 

<p class='isiteks'>Contoh Class</p> 

</body> </html>

Contoh Class


ID
Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web karena didefiniskan denga ID berbeda.
Misal.

style1.css

 h1 

{ 

color:red; 

} 

.isiteks 

{ 

font-family:arial,halvetica; 

font-size:24px; 

color:#6699FF; } 

.judul1 { font-family:arial,halvetica; 

font-size:12px; color:#6699FF; 

}

contoh script

<html> 
<head> 
<link href='style1.css' rel="stylesheet" type='text/css'> 
</head> <body> 
<p id='judul1'>Contoh ID</p> 
</body> </html>

Contoh ID

Pada postingan sebelumnya kita sudah membahas tentang Pengertian HTML dan Dasar Penggunaan Tag HTML. Sehingga sampai disini Anda setidaknya telah mengerti dan memahami tentang HTML dan cara penggunaannya. Pada kesempatan kali ini saya hanya akan menyebutkan beberapa tag HTML beserta fungsinya yang paling sering digunakan oleh kebanyakan webmaster. Berikut adalah table tag beserta fungsinya

Tag	Fungsi
Tag <a>	Digunakan untuk membuat tautan atau link ke dokumen lain dengan menambahkan atribut href.
Tag <blockquote>	Berfungsi untuk menampilkan sebuah informasi yang berkapasitas panjang dan memberikan spasi atau kalimat yang dibuat menjorok ke dalam seperti membuat sebuah paragraf baru.
Tag <body>	Berfungsi untuk mendefinisikan pada bagian inti atau badan HTML.
Tag <button>	Berfungsi untuk mendefinisikan sebuah button atau tombol.
Tag <code>	Berfungsi untuk mendefinisikan teks yang akan diisi dengan kode-kode yang terdapat pada komputer.
Tag <col>	Berfungsi untuk mendefinisikan sebuah nilai atribute kolom pada sebuah table.
Tag <dd>	Berfungsi untuk membuat definition detail yang terdapat pada definition list.
Tag <del>	Berfungsi untuk mendefinisikan sebuah teks yang telah dicoret.
Tag <div>	Berfungsi untuk mendefinisikan bagian dari suatu halaman website, namun sering juga digunakan untuk pengelompokan elemen-elemen HTML dengan menggunakan format style.
Tag <dl>	Berfungsi untuk membuat sebuah daftar definisi yang didalamnya diberikan keterangan dengan beberapa item.
Tag <dt>	Berfungsi untuk membuat daftar item dari definisi list (definition list).
Tag <fieldset>	Berfungsi untuk mengelompokan menjadi beberapa elemen kedalam sebuah form.
Tag <link>	Berfungsi untuk mendefinisikan link antara sumber link dengan halaman lain.
Tag <option>	Berfungsi untuk menampilkan daftar pilihan.
Tag <q>	Berfungsi untuk membuat tanda petik dua (quote)pada halaman website.
Tag <select>	Digunakan untuk membuat daftar pilihan (daftar drop-down).
Tag <span>	Digunakan untuk kelompok elemen yang berada di dalam dokumen HTML.
Tag <style>	Digunakan untuk mendefinisikan informasi styleuntuk dokumen HTML.
Tag <table>	Berfungsi untuk mendefinisikan sebuah tabel HTML.
Tag <textarea>	Digunakan untuk mendefinisikan kontrol input teks secara multi-line.
Tag <th>	Berfungsi untuk mendefinisikan bagian atas dalam sebuah tabel HTML
Tag <tr>	Berfungsi untuk mendefinisikan sebuah baris dalam sebuah tabel HTML.
Tag <td>	Digunakan untuk mendefinisikan sebuah sel (cell) standar dalam tabel HTML yaitu kolom.

Itulah beberapa tag HTML yang paling sering digunakan oleh para webmaster. Semoga postingan ini dapat bermanfaat bagi Anda yang ingin belajar tentang web programming, karena HTML merupakan hal yang paling dasar dalam web programming.

Selamat Mencoba...!

misalnya pasangan dari tag <example> adalah </ example >.
Sebagian tag telah digunakan pada contoh kode HTML di atas. Sekarang marilah kita
kenali berbagai hal yang mendasar tentang tag. Setiap tag memiliki nama, nama tag
ditulis dalam tanda < dan >. Antara nama  tag dan tanda < ditulis tanpa spasi sama
sekali. Nama tag dapat ditulis dengan huruf kecil, kapital maupun campuran.
Beberapa tag ada yang menggunakan atribut di dalamnya. Contoh : <P align=”center”>,
pada contoh ini P adalah nama tag, sedangkan align  adalah nama atribut  dan center
adalah nilai atribut.

Pemberian Catatan/Komentar pada Dokumen HTML
Catatan adalah bagian dari kode HTML  yang  diabaikan oleh browser. Kegunaan
catatan/komentar dalam kode HTML adalah sebagai keterangan yang berguna untuk
pembaca kode. Misalnya, catatan digunakan untuk memberikan catatan apa saja dan
bahkan bisa mencakup beberapa baris.
Komentar.html

<!--Program ini dibuat pada tanggal 20 Oktober 2013 --> 
<html> 
<head> 
<title>Hai</title> 
<Body> 
<!-- Catatan bisa diletakan dimana saja -->  
Saya Sedang Belajar HTML  
</body> 
</html> 

Penggunaan Tag Break Row (pindah baris)
Tag ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata
lain satu tag <BR> sama dengan anda menekan tombol Enter satu kali. Untuk lebih jelas
sekarang perhatikan contoh berikut ini :
Breakrow.html

<html> 
<head> 
<title>belajar tag br</title> 
</head> 
<body> 
Mudah-mudahan anda cepat bisa belajar HTML <br> 
Amin …! 
</body> 
</html>

Penggunaan Tag Paragraf
Tag <P> berguna untuk membuat paragraf. Jarak paragraf/tek pertama dengan
paragraf/tek kedua sama dengan anda menggunakan tag <br> dua kali. Untuk lebih
jelasnya perhatikan contoh di bawah ini.
Paragraf1.html

<html> 
<head> 
<title>belajar tag paragraf</title> 
</head> 
<body> 
Senja Telah Tiba<p> 
Mentari kian temaram<br> 
Samar disela-sela daun cemara<br> 
Angin mulai berhembus dari samudera<br> 
Pertanda malam telah tiba 
</body> 
</html> 

Atribut Align juga bisa diterapkan pada tag paragraf. Yang berguna untuk mengatur
peletakan  teks di dalam masing-masing baris. Sebagai contoh : tambahkan pada kode
HTML di atas dengan kode seperti yang terlihat pada contoh program HTML berikut  :

<html> 
<head> 
<title>belajar tag paragraf</title> 
</head> 
<body> 
Senja Telah Tiba 
<p align = “center”> 
Mentari kian temaram<br> 
Samar disela-sela daun cemara<br> 
Angin mulai berhembus ke samudera<br> 
Pertanda malam telah tiba<br> 
</p> 
2004 
</body> 
</html> 

Penggunaan Tag Center
Untuk meratakan teks ketengah, kita juga bisa menggunakan tag <Center>. Dan untuk
mengakhiri penengahan teks (yakni agar teks berikutnya tidak terletak ditengah), kita
perlu menambahkan tanda penutup berupa tanda slash (/), cara penulisannya adalah :
</center>. Untuk jelasnya perhatikan latihan di bawah ini :
center.html

<html> 
<head> 
<title>belajar tag center </title> 
</head> 
<body> 
<center> 
Addres : 
<hr> 
Nerdiex Production<br> 
<hr size = 5 width = 25% align = left  noshade> 
Jl Bukit Pelajar<br> 
Balikpapan
</center> 
</body> 
</html> 

Penggunaan Tag Heading
Tag ini digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam
badan dokumen. Ukuran yang ada pada tag heading ada 6 buah ukuran yang paling
besar ditunjukan dengan penomoran yang paling kecil yaitu angka 1 dan yang paling
kecil ditandai dengan nomor terbesar yaitu 6. anda juga bisa menggunakan angka lebih
dari enam misal 7 atau 8, tetapi hasilnya adalah tetap seukuran angka 6 karena
standarnya adalah ukuran 6 yang terkecil. Bentuk tag-tag heading dimulai dari yang
terbesar sampai terkecil dapat dilihat pada tatacara penulisan berikut ini  :

• <H1> … </H1> (Heading 1)
• <H2> … </H2> (Heading 2)
• <H3> … </H3> (Heading 3)
• <H4> … </H4> (Heading 4)
• <H5> … </H5> (Heading 5)
• <H6> … </H6> (Heading 6)

Untuk memperjelas kegunaan tag heading ini perhatikan pada contoh di bawah ini :
heading.html

<html> 
<head> 
<title>belajar tag heading</title> 
</head> 
<body> 
<h1>ukuran heading 1</h1> 
<h2>ukuran heading 2</h2> 
<h3>ukuran heading 3</h3> 
<h4>ukuran heading 4</h4> 
<h5>ukuran heading 5</h5> 
<h6>ukuran heading 6</h6> 
</body> 
</html> 

seperti halnya pada tag <P>, tag heading juga memiliki atribut. Salah satu atribut yang
bisa digunakan adalah atribut align yang bisa bernilai : center, left, right, justify.
Cara menuliskan pada dokumen HTML adalah <h1 align=”center”>.

Menampilkan Garis Horisontal (Horizontal Row)
Agar tampilan dokumen HTML yang kita buat menjadi lebih menarik, seorang pembuat
dokumen web sering menambahkan garis horisontal biasanya diletakkan di bawah
sebuah teks maupun objek lainnya. Cara membuat garis ini sangat mudah sekali,
caranya yakni dengan menyertakan tag horizontal Row <HR>. Pada tag <hr> juga bisa
ditambahkan atribut-atribut seperti berikut ini  :

• Size : Untuk mengubah ketebalan garis 
• Width : Untuk merubah lebar garis 
• Align : Untuk mengatur tata letak teks dalam baris
• Noshade : Untuk merubah garis yang dibuat tidak disertai bayangan

Berikut adalah contoh kode HTML yang menggunakan tag ini :
Garis.html

<html> 
<head> 
<title>belajar membuat garis </title> 
</head> 
<body> 
Addres : 
<hr> 
Nerdiex Production<br> 
<hr size = 5 width = 25% align = left  noshade> 
Jl. Bukit Pelajar<br> 
Balikpapan  
</body> 
</html>

Penggunaan Tag Divisi
Tag ini digunakan untuk mengelompokkan sejumlah baris teks yang memiliki tipe
sama.  Fungsinya bisa juga disamakan  dengan tag <P>. perhatikan pada contoh berikut
ini :

Divisi.html

<html> 
<head> 
<title>belajar tag div </title> 
</head> 
<body> 
<div align=”right”> 
Addres : 
<hr> 
Nerdiex Production<br> 
<hr size = 5 width = 25% noshade> 
Jl. Bukit Pelajar<br> 
Balikpapan  
</div> 
</body> 
</html>

HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).



HTML sendiri sudah ada sejak awal adanya WWW hingga sekarang, dan mengalami beberapa perkembangan versi, yaitu :

• HTML 2.0 - (RFC 1866) disetujui ebagai standar pada 22 September 1995.
• HTML 3.2 - 14 Januari 1996.
• HTML 4.0 - 18 Desember 1997.
• HTML 4.01 (perbaikan minor) - 24 Desember 1999.
• ISO/IEC 15445:2000 ("ISO HTML", berdasar pada HTML 4.01 Srict) - 15 Mei 2000.
• HTML 5 - Januari 2008.

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal atau sering disebut bold, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.

Secara garis besar, terdapat 4 jenis elemen dari HTML:


structural. tanda yang menentukan level atau tingkatan dari sebuah teks (contoh, <h1>Golf</h1> akan memerintahkan browser untuk menampilkan “Golf” sebagai teks tebal besar yang menunjukkan sebagai Heading 1


presentational. tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks,


hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://duniainternet27.blogspot.co.id">Dunia Internet</a> akan menampilkan Dunia Internet sebagai sebuah hyperlink ke URL http://duniainternet27.blogspot.co.id),


Elemen widget yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>).

Selain markup presentational , markup yang lain tidak menentukan bagaimana tampilan dari sebuah teks. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan dan sebagai gantinya digunakan Cascading Style Sheets.