Showing posts with label Html. Show all posts
Showing posts with label Html. Show all posts

Saturday 19 November 2016

Fungsi attribut autofocus pada attribut html

Fungsi attribute autofocus pada html yaitu digunakan sebagai default / standar form input yang secara otomatis di select pada sebuah form input dalam html.

Berikut ini sedikit potongan script untuk attribut autofocus pada input form :

<input id="email"type="email" name="email" placeholder="email@gxxxxx" autofocus required />
<input id="username" name="username" required type="text" placeholder="Username"/>
<input id="first_name" name="firstname"required type="text" placeholder="First Name"/>
<input required id="last_name" name="lastname" type="text" placeholder="Last Name"/>
<input required name="birthdate" type="date"/>

Dari sekian banya form input diatas yang diselect sebagai autofocus hanyalah email maka tampilan outputnya seperti berikut :


Oke sudah jelas tentang fungsi autofocus pada html,

Terima kasih atas kunjungannya.

Sunday 15 September 2013

Menampilkan Simbol Akar Kuadrat Pada Web HTML(Blog)

Akar kuadrat juga bisa dilakukan dengan perintah <table> HTML. Berikut ini contohnya :


r =  x2 + y2
Berikut persamaa jika sel tabel ditampilkan :


r =  x2 + y2
Berikut Source Code HTML-nya :


<table style="margin-top:0.5em; margin-bottom:0.5em; text-align: center;"
    align="center" cellpadding="0" cellspacing="0" >
    <tr>
        <td nowrap="nowrap" align="right">
            <i>r</i> = <span style="font-size: 150%;">&radic;</span>
        </td><td style="border-top:solid 1px black;" nowrap="nowrap">
            &nbsp;<i>x</i><sup>2</sup> + <i>y</i><sup>2</sup>
        </td>
    </tr>
</table>
 
Hal yang perlu diperhatikan :
  • simbol radikal diberikan ukuran font yang lebih besar; 
  • garis horizontal dibuat dengan memberikan sel perbatasan atas;
  • Saya menggunakan non-breaking space untuk memberikan sedikit lebih banyak ruang sebelah radikal.
Untuk konsistensi dan fleksibilitas Anda mungkin ingin menggunakan gaya CSS kelas bukan direktif gaya dalam perintah <table> (ini ditampilkan dalam fraksi contoh di atas).

Radikal yang lebih besar dapat memiliki dengan meningkatkan ukuran font (meskipun masing-masing browser menafsirkan ini sedikit berbeda), di sini adalah contoh yang dikombinasikan dengan pecahan :  

r =  x2 + y2
5
Sebuah pendekatan yang berbeda adalah dengan menggunakan gambar bitmap untuk simbol radikal. Dengan CSS posisi absolut Anda dapat membuat PNG transparan atau GIF bitmap dan posisi itu atas teks. Tapi kelemahan pendekatan ini adalah: jika pengguna memilih ukuran font yang berbeda, maka simbol radikal tidak akan skala dengan benar bersama dengan teks di bawah radikal, dan kualitas cetak tidak sebagus saat pencampuran bitmap dan teks.

Kode HTML untuk Pecahan Matematika

Pecahan dapat dibuat dengan table HTML. Saya menggunakan style border-top CSS untuk membuat garis fraksi berikut contohnya :

x =   x2 + x + 1
2 cos(x)

Di sini persamaannya jika garis tabel diaktifkan, sehingga Anda dapat melihat di mana sel'nya atau garisnya :

x =   x2 + x + 1
2 cos(x)

Berikut ini adalah Source Kode HTML dan CSS yang menghasilkan bentuk pecahan.


<style>
    td.upper_line { border-top:solid 1px black; }
    table.fraction { text-align: center; vertical-align: middle;
        margin-top:0.5em; margin-bottom:0.5em; line-height: 2em; }
</style>

<table class="fraction" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="2" nowrap="nowrap">
            <i>x</i> =  
        </td><td nowrap="nowrap">
            <i>x</i><sup>2</sup> + <i>x</i> + 1
        </td>
    </tr><tr>
        <td class="upper_line">
            2 cos(<i>x</i>)
        </td>
    </tr>
</table>
 
Perhatikan bahwa bagian dari persamaan yang tidak dalam pecahan dimasukkan ke dalam sel tabel terpisah yang mencakup baris tabel tersebut. Saya menemukan bahwa indentasi yang tepat membantu untuk membuat HTML lebih mudah dibaca saat authoring. Saya tidak menggunakan macro untuk tabel ini karena macro akan mengaburkan Indentasi pecahan.

Wednesday 28 August 2013

Kode HTML - Karakter dan Simbol

Kali saya share tentan Kode HTML - Karakter dan Simbol yang merupakan standar ASCII Latin alphabet No. 1 Browser support: All browsers

Berikut Daftar Listing Codenya :

Standard ASCII set, HTML Entity names, ISO 10646, ISO 8879, ISO 8859-1 Latin alphabet No. 1
Browser support: All browsers
ASCII HTML HTML
Dec Hex Symbol Number Name Description

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
20
21
22
23
24
25
26
27
28
29
2A
2B
2C
2D
2E
2F

!
"
#
$
%
&
'
(
)
*
+
,
-
.
/
&#32;
&#33;
&#34;
&#35;
&#36;
&#37;
&#38;
&#39;
&#40;
&#41;
&#42;
&#43;
&#44;
&#45;
&#46;
&#47;


&quot;



&amp;









space
exclamation point
double quotes
number sign
dollar sign
percent sign
ampersand
single quote
opening parenthesis
closing parenthesis
asterisk
plus sign
comma
minus sign - hyphen
period
slash
ASCII HTML HTML
Dec Hex Symbol Number Name Description

48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
30
31
32
33
34
35
36
37
38
39
3A
3B
3C
3D
3E
3F
0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?
&#48;
&#49;
&#50;
&#51;
&#52;
&#53;
&#54;
&#55;
&#56;
&#57;
&#58;
&#59;
&#60;
&#61;
&#62;
&#63;












&lt;

&gt;

zero
one
two
three
four
five
six
seven
eight
nine
colon
semicolon
less than sign
equal sign
greater than sign
question mark
ASCII HTML HTML
Dec Hex Symbol Number Name Description

64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
40
41
42
43
44
45
46
47
48
49
4A
4B
4C
4D
4E
4F
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
&#64;
&#65;
&#66;
&#67;
&#68;
&#69;
&#70;
&#71;
&#72;
&#73;
&#74;
&#75;
&#76;
&#77;
&#78;
&#79;
















at symbol















ASCII HTML HTML
Dec Hex Symbol Number Name Description

80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
50
51
52
53
54
55
56
57
58
59
5A
5B
5C
5D
5E
5F
P
Q
R
S
T
U
V
W
X
Y
Z
[
\
]
^
_
&#80;
&#81;
&#82;
&#83;
&#84;
&#85;
&#86;
&#87;
&#88;
&#89;
&#90;
&#91;
&#92;
&#93;
&#94;
&#95;



























opening bracket
backslash
closing bracket
caret - circumflex
underscore
ASCII HTML HTML
Dec Hex Symbol Number Name Description

96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
60
61
62
63
64
65
66
67
68
69
6A
6B
6C
6D
6E
6F
`
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
&#96;
&#97;
&#98;
&#99;
&#100;
&#101;
&#102;
&#103;
&#104;
&#105;
&#106;
&#107;
&#108;
&#109;
&#110;
&#111;
















grave accent















ASCII HTML HTML
Dec Hex Symbol Number Name Description

112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
70
71
72
73
74
75
76
77
78
79
7A
7B
7C
7D
7E
7F
p
q
r
s
t
u
v
w
x
y
z
{
|
}
~

&#112;
&#113;
&#114;
&#115;
&#116;
&#117;
&#118;
&#119;
&#120;
&#121;
&#122;
&#123;
&#124;
&#125;
&#126;




























opening brace
vertical bar
closing brace
equivalency sign - tilde
(not defined in HTML 4 standard)
ASCII HTML HTML
Dec Hex Symbol Number Name Description

128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
80
81
82
83
84
85
86
87
88
89
8A
8B
8C
8D
8E
8F
















































(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
ASCII HTML HTML
Dec Hex Symbol Number Name Description

144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
90
91
92
93
94
95
96
97
98
99
9A
9B
9C
9D
9E
9F
















































(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
(not defined in HTML 4 standard)
ASCII HTML HTML
Dec Hex Symbol Number Name Description

160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
A0
A1
A2
A3
A4
A5
A6
A7
A8
A9
AA
AB
AC
AD
AE
AF

¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
­
®
¯
&#160;
&#161;
&#162;
&#163;
&#164;
&#165;
&#166;
&#167;
&#168;
&#169;
&#170;
&#171;
&#172;
&#173;
&#174;
&#175;
&nbsp;
&iexcl;
&cent;
&pound;
&curren;
&yen;
&brvbar;
&sect;
&uml;
&copy;
&ordf;
&laquo;
&not;
&shy;
&reg;
&macr;
non-breaking space
inverted exclamation mark
cent sign
pound sign
currency sign
yen sign
broken vertical bar
section sign
spacing diaeresis - umlaut
copyright sign
feminine ordinal indicator
left double angle quotes
not sign
soft hyphen
registered trade mark sign
spacing macron - overline
ASCII HTML HTML
Dec Hex Symbol Number Name Description

176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
B0
B1
B2
B3
B4
B5
B6
B7
B8
B9
BA
BB
BC
BD
BE
BF
°
±
²
³
´
µ

·
¸
¹
º
»
¼
½
¾
¿
&#176;
&#177;
&#178;
&#179;
&#180;
&#181;
&#182;
&#183;
&#184;
&#185;
&#186;
&#187;
&#188;
&#189;
&#190;
&#191;
&deg;
&plusmn;
&sup2;
&sup3;
&acute;
&micro;
&para;
&middot;
&cedil;
&sup1;
&ordm;
&raquo;
&frac14;
&frac12;
&frac34;
&iquest;
degree sign
plus-or-minus sign
superscript two - squared
superscript three - cubed
acute accent - spacing acute
micro sign
pilcrow sign - paragraph sign
middle dot - Georgian comma
spacing cedilla
superscript one
masculine ordinal indicator
right double angle quotes
fraction one quarter
fraction one half
fraction three quarters
inverted question mark
ASCII HTML HTML
Dec Hex Symbol Number Name Description

192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
C0
C1
C2
C3
C4
C5
C6
C7
C8
C9
CA
CB
CC
CD
CE
CF
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
&#192;
&#193;
&#194;
&#195;
&#196;
&#197;
&#198;
&#199;
&#200;
&#201;
&#202;
&#203;
&#204;
&#205;
&#206;
&#207;
&Agrave;
&Aacute;
&Acirc;
&Atilde;
&Auml;
&Aring;
&AElig;
&Ccedil;
&Egrave;
&Eacute;
&Ecirc;
&Euml;
&Igrave;
&Iacute;
&Icirc;
&Iuml;
latin capital letter A with grave
latin capital letter A with acute
latin capital letter A with circumflex
latin capital letter A with tilde
latin capital letter A with diaeresis
latin capital letter A with ring above
latin capital letter AE
latin capital letter C with cedilla
latin capital letter E with grave
latin capital letter E with acute
latin capital letter E with circumflex
latin capital letter E with diaeresis
latin capital letter I with grave
latin capital letter I with acute
latin capital letter I with circumflex
latin capital letter I with diaeresis
ASCII HTML HTML
Dec Hex Symbol Number Name Description

208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
D0
D1
D2
D3
D4
D5
D6
D7
D8
D9
DA
DB
DC
DD
DE
DF
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
&#208;
&#209;
&#210;
&#211;
&#212;
&#213;
&#214;
&#215;
&#216;
&#217;
&#218;
&#219;
&#220;
&#221;
&#222;
&#223;
&ETH;
&Ntilde;
&Ograve;
&Oacute;
&Ocirc;
&Otilde;
&Ouml;
&times;
&Oslash;
&Ugrave;
&Uacute;
&Ucirc;
&Uuml;
&Yacute;
&THORN;
&szlig;
latin capital letter ETH
latin capital letter N with tilde
latin capital letter O with grave
latin capital letter O with acute
latin capital letter O with circumflex
latin capital letter O with tilde
latin capital letter O with diaeresis
multiplication sign
latin capital letter O with slash
latin capital letter U with grave
latin capital letter U with acute
latin capital letter U with circumflex
latin capital letter U with diaeresis
latin capital letter Y with acute
latin capital letter THORN
latin small letter sharp s - ess-zed
ASCII HTML HTML
Dec Hex Symbol Number Name Description

224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
E0
E1
E2
E3
E4
E5
E6
E7
E8
E9
EA
EB
EC
ED
EE
EF
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
&#224;
&#225;
&#226;
&#227;
&#228;
&#229;
&#230;
&#231;
&#232;
&#233;
&#234;
&#235;
&#236;
&#237;
&#238;
&#239;
&agrave;
&aacute;
&acirc;
&atilde;
&auml;
&aring;
&aelig;
&ccedil;
&egrave;
&eacute;
&ecirc;
&euml;
&igrave;
&iacute;
&icirc;
&iuml;
latin small letter a with grave
latin small letter a with acute
latin small letter a with circumflex
latin small letter a with tilde
latin small letter a with diaeresis
latin small letter a with ring above
latin small letter ae
latin small letter c with cedilla
latin small letter e with grave
latin small letter e with acute
latin small letter e with circumflex
latin small letter e with diaeresis
latin small letter i with grave
latin small letter i with acute
latin small letter i with circumflex
latin small letter i with diaeresis
ASCII HTML HTML
Dec Hex Symbol Number Name Description

240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
F0
F1
F2
F3
F4
F5
F6
F7
F8
F9
FA
FB
FC
FD
FE
FF
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
&#240;
&#241;
&#242;
&#243;
&#244;
&#245;
&#246;
&#247;
&#248;
&#249;
&#250;
&#251;
&#252;
&#253;
&#254;
&#255;
&eth;
&ntilde;
&ograve;
&oacute;
&ocirc;
&otilde;
&ouml;
&divide;
&oslash;
&ugrave;
&uacute;
&ucirc;
&uuml;
&yacute;
&thorn;
&yuml;
latin small letter eth
latin small letter n with tilde
latin small letter o with grave
latin small letter o with acute
latin small letter o with circumflex
latin small letter o with tilde
latin small letter o with diaeresis
division sign
latin small letter o with slash
latin small letter u with grave
latin small letter u with acute
latin small letter u with circumflex
latin small letter u with diaeresis
latin small letter y with acute
latin small letter thorn
latin small letter y with diaeresis






HTML 4.01, ISO 10646, ISO 8879, Latin extended A and B,
Browser support: Internet Explorer > 4, Netscape > 4
HTML HTML
Dec Hex Symbol Number Name Description

338
339
352
353
376
402
152
153
160
161
178
192
Œ
œ
Š
š
Ÿ
ƒ
&#338;
&#339;
&#352;
&#353;
&#376;
&#402;






latin capital letter OE
latin small letter oe
latin capital letter S with caron
latin small letter s with caron
latin capital letter Y with diaeresis
latin small f with hook - function
HTML HTML
Dec Hex Symbol Number Name Description

8211
8212
8216
8217
8218
8220
8221
8222
8224
8225
8226
8230
8240
8364
8482
2013
2014
2018
2019
201A
201C
201D
201E
2020
2021
2022
2026
2030
20AC
2122














&#8211;
&#8212;
&#8216;
&#8217;
&#8218;
&#8220;
&#8221;
&#8222;
&#8224;
&#8225;
&#8226;
&#8230;
&#8240;
&#8364;
&#8482;













&euro;

en dash
em dash
left single quotation mark
right single quotation mark
single low-9 quotation mark
left double quotation mark
right double quotation mark
double low-9 quotation mark
dagger
double dagger
bullet
horizontal ellipsis
per thousand sign
euro sign
trade mark sign

Demikian listing code'nya mudah-mudahan bermanfaat

Mengganti Dan Menambah Style Font Blog

Mengganti Dan Menambah Style Font Blog -- Banyak blogger yang tidak merasa nyaman dengan font yang formal dan ingin menggantinya dengan font yang lebih menarik. Sebenarnya ini sangat mudah jika template blog anda dilengkapi fungsi variabel untuk mengganti font. Lalu bagaimana jika template blog anda tidak dilengkapi dengan variabel itu?
Kebanyakan template hasil download tidak bisa diedit di perancang template. Jadi untuk mengganti fontnya, anda perlu melakukan hal-hal sederhana berikut:

MEMILIH JENIS FONT
  • Buka halaman http://www.google.com/webfonts/#
  • Sebaiknya anda set dulu ukuran fontnya untuk melihat tampilan font tersebut dalam ukuran yang anda inginkan. Pilih ukuran huruf dalam drop down size.
mengatur dan memilih font

  • Jika jumlah font terlalu banyak, anda bisa memperkecil opsi dengan melakukan filter pada jenis font. Lihat pada sidebar kiri ada serangkaian alat filter. Pilih type font, ketebalan, kemiringan, dan lebar huruf.
  • Jika anda sudah menemukan huruf-huruf yang anda sukai tinggal klik ADD TO COLLECTION pada bagian kanan bawah sampel huruf. Silahkan pilih lebih dari satu huruf jika diperlukan
menambah koleksi font
  • Jika anda sudah selesai memilih huruf silahkan klik USE
menggunakan font yang dipilih
  • Anda akan dialihkan ke halaman baru. Pada halaman baru ada 3 hal yang harus anda lakukan
    • Pertama, pilih jenis ketebalan huruf yang diinginkan. Semakin banyak variasinya, maka akan semakin berat loading halaman anda nantinya....
memilih style font
    • Kedua, pilih language style yang diinginkan. Saran saya tidak usah mengubah bagian yang ini
memilih font language
    • Ketiga, copy kode yang diberikan untuk dipasang di blog
MENAMBAHKAN FONT PADA BLOG
  • Jika sudah menyelesaikan tahapan di atas sekarang masuk ke akun blogger anda.
  • Pilih menu TEMPLATE lalu EDIT HTML
  • Cari kode  <![CDATA[/* dan paste kode yang tadi anda copy
  • Jangan lupa untuk menambahkan kode / sebelum penutup > pada kode tersebut. Hasilnya akan terlihat seperti contoh di bawah
<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900|Julius+Sans+One|Cherry+Swash:400,700' rel='stylesheet' type='text/css' />
  • Simpan Perubahan
MENGGUNAKAN FONT
Setelah melakukan langkah di atas anda sudah menambahkan jenis font pada blog anda. Ada dua cara untuk mengganti font pada blog anda.
1. Mengganti Semua Font
Misalnya, anda ingin mengganti semua font Arial dengan font baru bernama BenchNine
  • Masuk ke menu TEMPLATE >> EDIT HTML
  • Centang Expand Template Widget
  • Copy semua kode yang muncul
  • Buka notepad dan paste kode yang dicopy tadi
  • Tekan Ctrl+H untuk membuka Tool Replace
  • Isi kolom Find What dengan Arial
  • Isi kolom Replace With dengan BenchNine
  • Klik tombol REPLACE ALL
  • Copy kode yang sudah berubah tadi.
  • Hapus semua kode pada blogger Edit HTML tadi dan gantikan dengan kode dari notepad
  • Simpan Perubahan
2. Mengganti Font Elemen Tertentu Saja
Di sini anda bisa menggunakan Edit HTML, atau Fitur ADD CSS pada Perancang Template
Kali ini saya akan menggunakan Add CSS saja. Jadi silahkan ikuti contoh berikut:
  • Setelah jendela Add CSS terbuka, silahkan pilih element yang ingin anda ganti.
  • Kali ini saya akan mengganti element h2 normal, h2 link, dan h2 link:hover pada postingan blog saya. Jadi inilah kode yang akan saya ketikkan pada kolom Add CSS...
.post h2 {
font-family: BenchNine;
}
.post h2 a, .post h2 a:visited, .post h2 strong {
font-family: BenchNine;
}
.post h2 strong, .post h2 a:hover {
font-family: BenchNine;
}
  • Simpan Template 
font-family: NamaFont; adalah kode yang perlu anda tambahkan pada elemen style apa saja yang ingin anda ganti font-nya. Bagian terpentingnya adalah mengetahui nama elemen yang ingin anda ganti. Kalau anda sama sekali belum tahu nama elementnya, maka anda harus masuk ke Edit HTML untuk menemukan nama elemen style yang mengendalikan suatu komponen pada template anda.

Sumber : http://trikmudahseo.blogspot.com/2012/10/mengganti-dan-menambah-style-font-blog.html