Category Archives: HTML

Apa itu meta tag html ?

Posted on by
Reply

Mungkin kita sering mendengar kata meta tag ketika membuat halaman website. Namun sebenarnya apa itu meta tag?

Meta tag merupakan informasi yang disertakan dalam bagian <head> halaman (tag ini tidak divisualisasikan di browser, inilah mengapa mereka disebut “meta”) dan mereka mengikuti format <meta />.

They are simply information that is included in the section <head> of the page (remember that this section is not visualized in the browser, this is why they are called “meta”) and they follow the format <meta />

Sebagai contoh meta tag adalah sebagai berikut

<[hapus]meta name=”description” content=”The WordPress login form allows you to access your dashboard. Here you have 3 simple tricks to modify its behaviour easily and quickly.”/>

 

Kode HTML Share Sosmed di Web

Posted on by
Reply

Hampir seluruh orang di dunia mengetahui dan menggunakan sosial media atau sosmed saat ini. tidak hanya untuk bersosial, orang dengan orang, fungsi sosmed lainnya adalah untuk menaikan popularitas sebuah web. Pengunjung dapat melihat isi konten web, berawal dari sebuah link di sosmed yang ditautkan.

Lalu bagaimana cara memasangkan sosmed agar ada di konten web, agar bisa di share orang hanya dengan cara tinggal klik? Berikut contoh kode HTML share berita, artikel atau semacamnya di sosmed untuk disimpan di web. Contoh kode klik link berikut :

http://www.4shared.com/office/qPT34uxyce/share-sosmed.html.

Sekian terimakasih, wassalam.

 

 

3 point penting ketika membangun website dalam kacamata client

Posted on by
Reply

niche_website

Setelah sekian laman berkecimpung di dunia per-web-an untuk dipublish dan bertemu dengen sejumlah client, dapat saya simpulkan sementara ini mengenai beberapa urutan prioritas yang menjadi sorotan client dalam pembuatan sebuah web, yakni

pertama adalah design yang bagus. kesan pertama harus menggoda selanjutnya terserah anda. kurang lebih seperti itu. bagian pekerjaan yang terkait seperti membuat gambar dengan photosop, css, html dan javascript.

kedua adalah rangking google. hal ini penting untuk klien dalam mendapatkan pasar atau pengunjung untuk meningkatkan usahanya. ini bagiannya pengelolaan html, content isi, dan per-seo-an.

dan ketiga adalah proses pengelolaan dibelakangnya, hal ini menitik beratkan kepadahal programming yang kuat, ada alur proses didalamnya, logika-logika, dan security-nya termasuk.

bedahal nya untuk aplikasi berbasiskan web yang lebih menitik beratkan pada proses algoritma yang benar selanjutnya design tampilan yang user friendly.

Demikan yang saya bisa share, mudah-mudahahan bermanfaat. wassalam.

Bootstrap 4 sudah muncul

Posted on by
Reply

bootstrap-4-coming

Berita gembira bagi pengguna bootsrap (salah satu html, css dan js framewok paling populer), sekarang sudah keluar bootstrap versi 4 untuk versi terbarunya. silahakan di download di web resmi.

http://getbootstrap.com/

jika sudah mendownload dan mengextract compressnya, didalamnya sudah terdapat file source untuk kode scss nya. bagi yang belum tahu apa itu scss silahkan searching mbah google.

Membuka pdf online di website kita dengan menggunakan viewerjs

Posted on by
Reply

viewerjs

Ada berbagai cara agar file pdf yang ada pada sebuah website bisa di baca secara online tanpa mendownload terlebih dahulu. salah satu caranya adalah dengan menggunakan viewer js. yaitu sebuah plugin atau library javascript yang dibuat khusus untuk melakukan pembacaan file pdf salah satunya.  penggunaan nya cukup mudah. yaitu download telebih dahulu file zipnya di bawah ini.

http://www.4shared.com/zip/wCJOmIGYba/ViewerJS-latest.html

setelah di download, extract file zip. lalu copas ke web yang akan dibangun. kemudian cara penggunaannya adalah dengan memasangkan alamat file pdf di alamat viwerjs. seperti pada contoh ini.

Click to access index.html

cukup mudah, semoga bermanfaat. wassalam.

Apa itu parallax dalam istilah web ?

Posted on by
Reply

Parllax adalah sebuah istilah yang penjelasannya kurang lebih seperti ini, ketika kita menscroll halaman sebuah web, dimana ada sebuah bagian web dan dibelakangya terdapat background gambar, apabila kita mencsroll ke bawah atau ke atas gambar di belakang ikut tersecroll namun pergerakannya lebih lambat dari pada bagian depannya. sehingga menimbulkan sebuah perspektif atau kesan pemandangan yang menarik, seperti kita melihat pemandangan objek gunung atau pohon dalam sebuah jendela mobil yang berjalan.

endang-gambaran-cara-kerja-parallax

Adapun kode untuk membuatnya adalah seperti berikut :
Kode HTML

< div class="header">
Header text, logo, dll
</div>

Kode CSS

.header {                
        background:url("images/bg.png") no-repeat center center fixed;
        background-size: cover;
        background-repeat: no-repeat   
    }

Kode JQuery

    // Y axis scroll speed
        var velocity = 0.5;

        function update(){ 
            var pos = $(window).scrollTop(); 
            $('.header').each(function() { 
                var $element = $(this);
                // subtract some from the height b/c of the padding
                var height = $element.height()-18;
                $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px'); 
            }); 
        };

        $(window).bind('scroll', update);

Kode untuk membuat posisi box pencarian agar tetap di atas

Posted on by
Reply

fixed-search-menu

 

Betikut cara untuk membuat kode pencarian berada diatas tidak ikut scroll dan tetap berada diatas.

 

Kode HTML

< div class="wrap" id="wrap"> 
  
  < header class="top-header"> 
    < span class="menu-icon"> ☰< /span> 
  < /header> 
  
  < div class="search"> 
    < input type="search" placeholder="Search or type URL" /> 
  < /div> 
  
  < div class="top"> 
    < div class="hero"> < /div> 
  < /div> 
  
  < main> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
    < div> < /div> 
  < /main> 
  
< /div>

Kode CSS

* {
box-sizing: border-box;
}
body {
margin: 0;
}

.wrap {
width: 320px;
border: 1px solid #ccc;
height: 480px;
overflow: auto;
position: relative;
}
.top-header {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 60px;
.menu-icon {
position: absolute;
top: 0;
right: 0;
padding: 18px 20px;
}
.fix-search & {
background: #eee;
}
}

.search {
position: absolute;
top: 155px;
left: 20px;
right: 20px;
input {
width: 265px;
border: 1px solid #ccc;
padding: 8px;
font-size: 15px;
transition: width 0.2s;
-webkit-appearance: none;
}
.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}

.top {
height: 250px;
padding-top: 40px;
}
.hero {
width: 200px;
height: 100px;
background: #ccc;
margin: 0 auto;
}

main {
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
div {
width: 125px;
height: 80px;
background: #ccc;
margin: 0 0 20px 0;
}
}

Kode JS/ Jquery

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}

});

Mendeteksi lokasi dan menampilkan di peta google map dengan geolocation api dan HTML5

Posted on by
2

geolocation-browser-endang

Geolocation adalah proses mencari lokasi pengguna browser yang terkoneksi internet dengan menggunakan HTML 5 dan Google Maps api kemudian menampilkan lokasi keberadaannya di dalam peta di web.

Agar dapat berjalan, pengguna harus mengaktifkan pelacakan berfungsi dibrowser. adapun browser yang mendukung untuk fungsi ini diantaranya adalah

Chrome: > 5.0
Internet Explorer: > 9.0
Firefox: > 3.5
Safari: > 5.0
Opera: > 16.0

Selain itu, agar dapat menggunakan script api dari google map, anda harus membuat keys di google api untuk dapat menggunakan script tersebut.

Berikut contoh sederhana untuk penggunaan geolocation.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
<meta charset=”utf-8″>
<title>Geolocation</title>
<style>
#map {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<!– placeholder map –>

<!– javascript –>
http://maps.google.com/maps/api/js?key=AIzaSyCDOCykF1KHEVDf-oN0BPS40JxVlOk71O4

// set geolocation
var x = navigator.geolocation;
x.getCurrentPosition(success, failure);

// function get current position success
function success(position){
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;

// set latitude and longitude
var coords = new google.maps.LatLng(myLat, myLong);

// set map option
var mapOptions = {
zoom: 16,
center: coords,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

// generate map google
var map = new google.maps.Map(document.getElementById(“map”), mapOptions);

// marker position
var marker = new google.maps.Marker({map: map, position: coords});
}

// function get current position fail
function failure(){
alert(‘geolocation failure!’);
}

</body>
</html>

Hasil tampilan gambarnya seperti dibawah ini.

geolocation-endang

untuk referensi silahkan kunjungi :

https://developers.google.com/maps/documentation/javascript/tutorial

sekian, mudah-mudahan informasi ini bermanfaat, terimakasih.

Kode Decimal dan Hex desimal simbol-simbol dalam HTML

Posted on by
Reply

Kumpulan symbol dengan kode desimal dan hexadesimalnya yang sering di pergunakan dalam kode html.

Char Dec Hex Name
✁ 9985 2701 UPPER BLADE SCISSORS
✂ 9986 2702 BLACK SCISSORS
✃ 9987 2703 LOWER BLADE SCISSORS
✄ 9988 2704 WHITE SCISSORS
✅ 9989 2705 WHITE HEAVY CHECK MARK
✆ 9990 2706 TELEPHONE LOCATION SIGN
✇ 9991 2707 TAPE DRIVE
✈ 9992 2708 AIRPLANE
✉ 9993 2709 ENVELOPE
✊ 9994 270A RAISED FIST
✋ 9995 270B RAISED HAND
✌ 9996 270C VICTORY HAND
✍ 9997 270D WRITING HAND
✎ 9998 270E LOWER RIGHT PENCIL
✏ 9999 270F PENCIL
✐ 10000 2710 UPPER RIGHT PENCIL
✑ 10001 2711 WHITE NIB
✒ 10002 2712 BLACK NIB
✓ 10003 2713 CHECK MARK
✔ 10004 2714 HEAVY CHECK MARK
✕ 10005 2715 MULTIPLICATION X
✖ 10006 2716 HEAVY MULTIPLICATION X
✗ 10007 2717 BALLOT X
✘ 10008 2718 HEAVY BALLOT X
✙ 10009 2719 OUTLINED GREEK CROSS
✚ 10010 271A HEAVY GREEK CROSS
✛ 10011 271B OPEN CENTRE CROSS
✜ 10012 271C HEAVY OPEN CENTRE CROSS
✝ 10013 271D LATIN CROSS
✞ 10014 271E SHADOWED WHITE LATIN CROSS
✟ 10015 271F OUTLINED LATIN CROSS
✠ 10016 2720 MALTESE CROSS
✡ 10017 2721 STAR OF DAVID
✢ 10018 2722 FOUR TEARDROP-SPOKED ASTERISK
✣ 10019 2723 FOUR BALLOON-SPOKED ASTERISK
✤ 10020 2724 HEAVY FOUR BALLOON-SPOKED ASTERISK
✥ 10021 2725 FOUR CLUB-SPOKED ASTERISK
✦ 10022 2726 BLACK FOUR POINTED STAR
✧ 10023 2727 WHITE FOUR POINTED STAR
✨ 10024 2728 SPARKLES
✩ 10025 2729 STRESS OUTLINED WHITE STAR
✪ 10026 272A CIRCLED WHITE STAR
✫ 10027 272B OPEN CENTRE BLACK STAR
✬ 10028 272C BLACK CENTRE WHITE STAR
✭ 10029 272D OUTLINED BLACK STAR
✮ 10030 272E HEAVY OUTLINED BLACK STAR
✯ 10031 272F PINWHEEL STAR
✰ 10032 2730 SHADOWED WHITE STAR
✱ 10033 2731 HEAVY ASTERISK
✲ 10034 2732 OPEN CENTRE ASTERISK
✳ 10035 2733 EIGHT SPOKED ASTERISK
✴ 10036 2734 EIGHT POINTED BLACK STAR
✵ 10037 2735 EIGHT POINTED PINWHEEL STAR
✶ 10038 2736 SIX POINTED BLACK STAR
✷ 10039 2737 EIGHT POINTED RECTILINEAR BLACK STAR
✸ 10040 2738 HEAVY EIGHT POINTED RECTILINEAR BLACK STAR
✹ 10041 2739 TWELVE POINTED BLACK STAR
✺ 10042 273A SIXTEEN POINTED ASTERISK
✻ 10043 273B TEARDROP-SPOKED ASTERISK
✼ 10044 273C OPEN CENTRE TEARDROP-SPOKED ASTERISK
✽ 10045 273D HEAVY TEARDROP-SPOKED ASTERISK
✾ 10046 273E SIX PETALLED BLACK AND WHITE FLORETTE
✿ 10047 273F BLACK FLORETTE
❀ 10048 2740 WHITE FLORETTE
❁ 10049 2741 EIGHT PETALLED OUTLINED BLACK FLORETTE
❂ 10050 2742 CIRCLED OPEN CENTRE EIGHT POINTED STAR
❃ 10051 2743 HEAVY TEARDROP-SPOKED PINWHEEL ASTERISK
❄ 10052 2744 SNOWFLAKE
❅ 10053 2745 TIGHT TRIFOLIATE SNOWFLAKE
❆ 10054 2746 HEAVY CHEVRON SNOWFLAKE
❇ 10055 2747 SPARKLE
❈ 10056 2748 HEAVY SPARKLE
❉ 10057 2749 BALLOON-SPOKED ASTERISK
❊ 10058 274A EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
❋ 10059 274B HEAVY EIGHT TEARDROP-SPOKED PROPELLER ASTERISK
❌ 10060 274C CROSS MARK
❍ 10061 274D SHADOWED WHITE CIRCLE
❎ 10062 274E NEGATIVE SQUARED CROSS MARK
❏ 10063 274F LOWER RIGHT DROP-SHADOWED WHITE SQUARE
❐ 10064 2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE
❑ 10065 2751 LOWER RIGHT SHADOWED WHITE SQUARE
❒ 10066 2752 UPPER RIGHT SHADOWED WHITE SQUARE
❓ 10067 2753 BLACK QUESTION MARK ORNAMENT
❔ 10068 2754 WHITE QUESTION MARK ORNAMENT
❕ 10069 2755 WHITE EXCLAMATION MARK ORNAMENT
❖ 10070 2756 BLACK DIAMOND MINUS WHITE X
❗ 10071 2757 HEAVY EXCLAMATION MARK SYMBOL
❘ 10072 2758 LIGHT VERTICAL BAR
❙ 10073 2759 MEDIUM VERTICAL BAR
❚ 10074 275A HEAVY VERTICAL BAR
❛ 10075 275B HEAVY SINGLE TURNED COMMA QUOTATION MARK ORNAMENT
❜ 10076 275C HEAVY SINGLE COMMA QUOTATION MARK ORNAMENT
❝ 10077 275D HEAVY DOUBLE TURNED COMMA QUOTATION MARK ORNAMENT
❞ 10078 275E HEAVY DOUBLE COMMA QUOTATION MARK ORNAMENT
❟ 10079 275F HEAVY LOW SINGLE COMMA QUOTATION MARK ORNAMENT
❠ 10080 2760 HEAVY LOW DOUBLE COMMA QUOTATION MARK ORNAMENT
❡ 10081 2761 CURVED STEM PARAGRAPH SIGN ORNAMENT
❢ 10082 2762 HEAVY EXCLAMATION MARK ORNAMENT
❣ 10083 2763 HEAVY HEART EXCLAMATION MARK ORNAMENT
❤ 10084 2764 HEAVY BLACK HEART
❥ 10085 2765 ROTATED HEAVY BLACK HEART BULLET
❦ 10086 2766 FLORAL HEART
❧ 10087 2767 ROTATED FLORAL HEART BULLET
❨ 10088 2768 MEDIUM LEFT PARENTHESIS ORNAMENT
❩ 10089 2769 MEDIUM RIGHT PARENTHESIS ORNAMENT
❪ 10090 276A MEDIUM FLATTENED LEFT PARENTHESIS ORNAMENT
❫ 10091 276B MEDIUM FLATTENED RIGHT PARENTHESIS ORNAMENT
❬ 10092 276C MEDIUM LEFT-POINTING ANGLE BRACKET ORNAMENT
❭ 10093 276D MEDIUM RIGHT-POINTING ANGLE BRACKET ORNAMENT
❮ 10094 276E HEAVY LEFT-POINTING ANGLE QUOTATION MARK ORNAMENT
❯ 10095 276F HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT
❰ 10096 2770 HEAVY LEFT-POINTING ANGLE BRACKET ORNAMENT
❱ 10097 2771 HEAVY RIGHT-POINTING ANGLE BRACKET ORNAMENT
❲ 10098 2772 LIGHT LEFT TORTOISE SHELL BRACKET ORNAMENT
❳ 10099 2773 LIGHT RIGHT TORTOISE SHELL BRACKET ORNAMENT
❴ 10100 2774 MEDIUM LEFT CURLY BRACKET ORNAMENT
❵ 10101 2775 MEDIUM RIGHT CURLY BRACKET ORNAMENT
❶ 10102 2776 DINGBAT NEGATIVE CIRCLED DIGIT ONE
❷ 10103 2777 DINGBAT NEGATIVE CIRCLED DIGIT TWO
❸ 10104 2778 DINGBAT NEGATIVE CIRCLED DIGIT THREE
❹ 10105 2779 DINGBAT NEGATIVE CIRCLED DIGIT FOUR
❺ 10106 277A DINGBAT NEGATIVE CIRCLED DIGIT FIVE
❻ 10107 277B DINGBAT NEGATIVE CIRCLED DIGIT SIX
❼ 10108 277C DINGBAT NEGATIVE CIRCLED DIGIT SEVEN
❽ 10109 277D DINGBAT NEGATIVE CIRCLED DIGIT EIGHT
❾ 10110 277E DINGBAT NEGATIVE CIRCLED DIGIT NINE
❿ 10111 277F DINGBAT NEGATIVE CIRCLED NUMBER TEN
➀ 10112 2780 DINGBAT CIRCLED SANS-SERIF DIGIT ONE
➁ 10113 2781 DINGBAT CIRCLED SANS-SERIF DIGIT TWO
➂ 10114 2782 DINGBAT CIRCLED SANS-SERIF DIGIT THREE
➃ 10115 2783 DINGBAT CIRCLED SANS-SERIF DIGIT FOUR
➄ 10116 2784 DINGBAT CIRCLED SANS-SERIF DIGIT FIVE
➅ 10117 2785 DINGBAT CIRCLED SANS-SERIF DIGIT SIX
➆ 10118 2786 DINGBAT CIRCLED SANS-SERIF DIGIT SEVEN
➇ 10119 2787 DINGBAT CIRCLED SANS-SERIF DIGIT EIGHT
➈ 10120 2788 DINGBAT CIRCLED SANS-SERIF DIGIT NINE
➉ 10121 2789 DINGBAT CIRCLED SANS-SERIF NUMBER TEN
➊ 10122 278A DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT ONE
➋ 10123 278B DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT TWO
➌ 10124 278C DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT THREE
➍ 10125 278D DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT FOUR
➎ 10126 278E DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT FIVE
➏ 10127 278F DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT SIX
➐ 10128 2790 DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT SEVEN
➑ 10129 2791 DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT EIGHT
➒ 10130 2792 DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT NINE
➓ 10131 2793 DINGBAT NEGATIVE CIRCLED SANS-SERIF NUMBER TEN
➔ 10132 2794 HEAVY WIDE-HEADED RIGHTWARDS ARROW
➕ 10133 2795 HEAVY PLUS SIGN
➖ 10134 2796 HEAVY MINUS SIGN
➗ 10135 2797 HEAVY DIVISION SIGN
➘ 10136 2798 HEAVY SOUTH EAST ARROW
➙ 10137 2799 HEAVY RIGHTWARDS ARROW
➚ 10138 279A HEAVY NORTH EAST ARROW
➛ 10139 279B DRAFTING POINT RIGHTWARDS ARROW
➜ 10140 279C HEAVY ROUND-TIPPED RIGHTWARDS ARROW
➝ 10141 279D TRIANGLE-HEADED RIGHTWARDS ARROW
➞ 10142 279E HEAVY TRIANGLE-HEADED RIGHTWARDS ARROW
➟ 10143 279F DASHED TRIANGLE-HEADED RIGHTWARDS ARROW
➠ 10144 27A0 HEAVY DASHED TRIANGLE-HEADED RIGHTWARDS ARROW
➡ 10145 27A1 BLACK RIGHTWARDS ARROW
➢ 10146 27A2 THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD
➣ 10147 27A3 THREE-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD
➤ 10148 27A4 BLACK RIGHTWARDS ARROWHEAD
➥ 10149 27A5 HEAVY BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW
➦ 10150 27A6 HEAVY BLACK CURVED UPWARDS AND RIGHTWARDS ARROW
➧ 10151 27A7 SQUAT BLACK RIGHTWARDS ARROW
➨ 10152 27A8 HEAVY CONCAVE-POINTED BLACK RIGHTWARDS ARROW
➩ 10153 27A9 RIGHT-SHADED WHITE RIGHTWARDS ARROW
➪ 10154 27AA LEFT-SHADED WHITE RIGHTWARDS ARROW
➫ 10155 27AB BACK-TILTED SHADOWED WHITE RIGHTWARDS ARROW
➬ 10156 27AC FRONT-TILTED SHADOWED WHITE RIGHTWARDS ARROW
➭ 10157 27AD HEAVY LOWER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
➮ 10158 27AE HEAVY UPPER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
➯ 10159 27AF NOTCHED LOWER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
➰ 10160 27B0 CURLY LOOP
➱ 10161 27B1 NOTCHED UPPER RIGHT-SHADOWED WHITE RIGHTWARDS ARROW
➲ 10162 27B2 CIRCLED HEAVY WHITE RIGHTWARDS ARROW
➳ 10163 27B3 WHITE-FEATHERED RIGHTWARDS ARROW
➴ 10164 27B4 BLACK-FEATHERED SOUTH EAST ARROW
➵ 10165 27B5 BLACK-FEATHERED RIGHTWARDS ARROW
➶ 10166 27B6 BLACK-FEATHERED NORTH EAST ARROW
➷ 10167 27B7 HEAVY BLACK-FEATHERED SOUTH EAST ARROW
➸ 10168 27B8 HEAVY BLACK-FEATHERED RIGHTWARDS ARROW
➹ 10169 27B9 HEAVY BLACK-FEATHERED NORTH EAST ARROW
➺ 10170 27BA TEARDROP-BARBED RIGHTWARDS ARROW
➻ 10171 27BB HEAVY TEARDROP-SHANKED RIGHTWARDS ARROW
➼ 10172 27BC WEDGE-TAILED RIGHTWARDS ARROW
➽ 10173 27BD HEAVY WEDGE-TAILED RIGHTWARDS ARROW
➾ 10174 27BE OPEN-OUTLINED RIGHTWARDS ARROW
➿ 10175 27BF DOUBLE CURLY LOOP