27 Nov 2014

HTML Formatting Elements

HTML Formatting Elements

Hehe, kembali lagi dengan saya, pada materi sebelumnya saya membahas tentang HTML Styling, dengan menggunakan HTML Style Attribute.
Html juga mendefinisikan elemen khusus, seperti pada materi kali ini HTML Formatting Elements yang mendefinisikan teks dengan makna yang khusus.
Pada Html menggunakan tag <b> dan <i> untuk memformat output teks dalam bentuk tebal atau miring.
Elemen pemformat teks yang dirancang untuk menampilkan hasil yang khusus dari teks adalah sbb :

-          Bold text
-          Important text
-          Italic text
-          Emphasized  text
-          Marked  text
-          Small text
-          Deleted text
-          Inserted text
-          Subscripts
-          Superscripts.

Nah selanjutnya saya akan memberikan penjelasan tentang elemen-elemen diatas

HTML Bold and Strong Formatting

html <b> elemen mendefinisikan teks yang tebal. Contoh :




Selanjutnya adalah html <strong> elemen, elemen strong mendefinisikan teks kuat. Maksudnya teks tersebut sama seperti saat saya menggunakan elemen <b>, hasilnya sama. Perbedaannya hanya tagnya saja yang beda antara <b> dan <strong>. 

Contoh :



Seperti contoh diatas, tidak ada perbedaan antara elemen <b> dan <strong> karena ketebalan teksnya sama.

HTML Italic and Emphasized

Html italic menggunakan tag <i> agar teks tersebut menjadi miring. Contoh :



Selanjutnya adalah html emphazed. Format html ini menggunakan tag <em>, sama seperti elemen <i>, tag ini juga membuat teks tersebut menjadi miring. Contoh :



Browser menampilkan bahwa tag <strong> sama dengan tag <b>, dan tag <em> sama dengan tag <i>.Akan tetapi, disana ada perbedaan pada arti dalam tag ini. Yaitu : tag <b> dan <i> masing-masing mendefinisikan teks tebal dan miring, sedangkan tag <strong> dan <em> mengartikan bahwa teks tersebut itu “penting”.
HTML small Formatting

Pada format html ini, tag yang digunakan adalah tag <small>.
Jadi tag <small> ini mendefinisikan ukuran pada teks yang diinputkan.contoh :



HTML Marked Formatting

Format html ini menggunakan tag <mark>.
Tag <mark> mendefinisikan teks yang ditandai atau dipilih. Contoh :


HTML Deleted Formatting

Format html ini menggunakan tag/elemen <del>.
Tag <del> mendifinisikan teks yang dihapus/diremove. Contoh :


HTML Inserted Formatting

Format html ini menggunakan tag <ins>.
Tag <ins> mendefinisikan teks yang ditambahkan. Contoh :



HTML Subscript Formatting

Format html ini menggunakan tag <sub>.
Tag <sub> ini mendefinisikan teks yang diperkecil seperti perpangkatan tapi dibawah bukan diatas.
Contoh :


         
HTML Superscript Formatting

Format html ini menggunakan tag <sup>.
Tag ini mendefinisikan teks diperkecil juga seperti perpangkatan tapi diatas kebalikannya subscript.
Contoh :

            

Alhamdulillah, sudah selesai pembahasan tentang elemen format html (HTML Formatting Elemens).               Kurang lebihnya seperti itu.
Semoga bermanfaat bagi kalian yang sedang belajar html.

Nah dibawah ini adalah tabel tambahan dari tag/elemen yang saya bahas diatas :

Tag
Deskripsi
<b>
Mendefinisikan teks yang tebal
<em>
Mendefinisikan teks miring dalam artian “penting”
<i>
Mendefinisikan teks yang miring
<small>
Mendefinisikan ukuran teks kecil
<strong>
Mendefinisikan teks yang tebal dalam artian “penting”
<sub>
Mendescripsikan teks dibawah garis karakter
<sup>
Mendeskripsikan teks diatas garis karakter
<ins>
Mendefinisikan teks yang ditambahkan
<del>
Mendefinisikan teks yang dihapus
<mark>
Mendefinisikan teks yang ditandai atau dipilih

Translated from w3schools.com

Created By Gugus Widiandito - Project X

HTML Styles

HTML Styles


    HTML Styling

Html style atau gaya pada html, karena setiap elemen mempunyai gaya standar yaitu backgroundnya berwarna putih, teks berwarna hitam, dengan ukuran 12px.
Dengan menggunakan atribut style, kita dapat mengubah style default pada elemen html terebut.
Contoh dibawah ini mengubah warna background yang default menjadi lightgrey. Buat koding seperti gambar dibawah ini menggunakan aplikas html sesuai dengan aplikasi yang kalian gunakan.



Kita liat previewnya dibawah ini

               
Setelah dilihat dan ditrawang :v  eh.. warnanya berubah dari default  menjadi lightgrey.
Pada html versi yang lama, background-color attribute masih terdukung, tapi tidak valid di html5.

HTML Style Attribute


Atribut stye pada html mempunyai syntax seperti dibawah ini:
Style=” property : value”
Property tersebut adalah css property, dan value tersebut adalah sebuah css value.
Lihat contoh dibawah ini, dan buatlah koding seperti gambar dibawah ini:            



Saya menambahkan warna pada heading1 dan paragraph seperti syntax diatas.
Kalian bisa mengubah warna sesuai keinginan kalian. Dan dibawah ini adalah previewnya             


             

HTML Text Fonts

Font-family property menentukan jenis font yang akan digunakan untuk sebuah elemen html, syntaxnya sama seperti syntaxnya text color, langsung saja lihat gambar dibawah ini, setelah itu buat koding seperti dibawah ini :



Seperti gambar diatas, saya menggunakan “family-font:verdana” dan “family-font:courier”, tapi terserah kalian mau pake font apa saja, yang kalian hafal dan kalian sukai :D, dibawah ini adalah previewnya



Tag <font> tidak valid pada html5, tetapi masih bisa support di html versi lawas.

HTML Text size

Font-size property mendefinisikan ukuran teks pada elemen html. Jadi setiap heading atau paragraf bisa diubah ukuran teksnya sesuai keinginan kita. Lihat gambar dibawah ini dan buatlah koding seperti gambar tersebut :



Saya menggunakan ukuran 100px (100 piksel) untuk h1 dan 60px (60 piksel) untuk p, kalian bisa mengubah ukuran tersebut sesuai kebutuhan dan keinginan kalian. Dibawah ini adalah previewnya :



5.       HTML Text Alignment

Text-align property mendefinisikan posisi teks horizontal pada sebuah elemen html, jadi kita bisa mengubah posisi teks dari kiri ke tengah atau ke kanan, yang penting horizontal. Langsung lihat pada gambar koding dibawah ini, buatlah coding seperti gambar dibawah ini :



Seperti gambar diatas, saya menggunakan “text-align:center” dan “text-align:left”, kalian juga bisa mengubah text-align sesuai keinginan kalian. Dibawah ini adalah gambar previewnya:



Tag <center> tidak support pada html 5, tapi support di html versi yang lawas.

Ringkasan dari materi diatas :

Gunakan style atribute untuk mengubah gaya pada elemen html.
Gunakan backgroud-color untuk mengubah warna background pada html.
Gunakan color untuk mengubah warna teks pada elemen html.
Gunakan font-family untuk mengubah gaya teks pada elemn html.
Gunakan font-size untuk mengubah ukuran  teks pada elemen html.
Gunakan text-align untuk mengubah posisi teks pada elemen html.

Alhamdulillah selesai materi tentang HTML Styles, sekarang juga kalian bisa mencobanya dan memahaminya. Sampai jumpa di materi selanjutnya :D ariatou gozaimasu.
Terimakasih semoga bermanfaat.

Translated from w3schools.com

Created by Gugus Widiandito-Project X

24 Nov 2014

PENULISAN UNGKAPAN NUMERIK

Salah satu pemanfaatan tumpukan adalah untuk menulis ungkapan menggunakan notasi tertentu. Dalam penulisan ungkapan khususnya ungkapan numeris kita selalu menggunakan tanda kurung ( ) untuk mengelompokkan bagian mana yang harus dikerjakan terlebih dahulu. Sebgai contoh dalam ungkapan, (A+B)*(C-D). Dalam hal ini suku (A+B) akan dikerjakan terlebih dahulu, kemudian suku (C-D), dan terakhir mengKALIKAN hasil yang diperoleh dari dua suku tersebut. Sedangkan pada ungkapan A+B*C-D maka akan menghasilkan hasil yang berbeda. Dari ungkapan tadi maka B dan C akan dikerjakaan dahulu dan diikuti yang lain, dalam hal ini pemakaian tanda kurung sangat mempengaruhi hasil akhir, cara penulisan ungkapan sering disebut dengan notasi INFIX, yang artinya bahwa operator ditulis diantara dua buah operan.

Seorang ahli matematika yang bersama Jan Lukasiewiez, kemudian mengembangkan satu cara penulisan ungkapan numeris yang disebut notasi POLISH atau PREFIX yang artinya adalah bahwa operator ditulis sebelum kedua operan.

Notasi lain yang merupakan kebalikan dari notasi prefix adalah notasi POSTFIX. Notasi postfix yaitu operator ditulis sesudah operan

Contoh :

INFIX
PREFIX
POSTFIX
A+B+ABAB+
A+B-C+-ABCABC+-
(A+B)*(C-D)*+AB-CDAB+CD-*
A-B/(C*D$E)/-AB*$CDEABCDE$*/-


POSTED : FATKHURROKHMAN SIDIQ - PROJECT X

22 Nov 2014

HTML Paragraph

HTML Paragraph 


Sekarang kita akan membahas tentang HTML Paragraph, seperti yang kita tau html memiliki banyak sekali struktur yang harus kita bahas salah satunya yaitu Paragraf HTML.

Nah, tutorialnya saya ambil dari w3schools.com, karena websitenya berbahasa inggris, jadi saya akan translate menjadi bahasa indonesia agar kalian bisa memahami apa yang saya tuliskan :D

Langsung saja ke koding :D eiitt.. ntar dulu...
nah, aplikasi yang saya pakai untuk belajar HTML adalah Sublime Text, seperti yang teman2 saya gunakan. Tetapi kalian bisa pake aplikasi apa saja yang berbasis html, seperti Notepad, Notepad++, dan masih banyak lagi, mungkin cuma itu yang saya tau :v

oke kalo gitu saya akan mulai pembahasannya :D
pertama baca Bismillah dulu, biar berkah hehe.
langsung ke koding ya kk.. 




nah yang diatas adalah contoh dari HTML Paragraph, polanya menggunakan <p>  dan diakhiri dengan </p> di sini kalian bisa masukkan kalimat apa saja yang kalian suka, nah seperti gambar diatas, saya misalkan : 

<p>Aku Cinta Ibu</p>
<p>This is Paragraph</p>
<p>This is Another Paragraph</p>

tetapi kalian bisa memasukkan kalimat atau kata yang kalian sukai. Hehe


oke next ini hasilnya jika kita preview di google chrome :


browser otomatis menambahkan sebuah baris kosong sebelum dan sesudah paragraf, seperti gambar diatas. 

Selanjutnya saya akan bahas tampilan HTML atau HTML Display yang berhubungan dengan paragraf, nah kalian tidak bisa yakin bagaimana tampilan HTML yang akan ditampilkan nantinya. Besar atau kecil layar, dan ukuran jendela akan menciptakan hasil yang berbeda.

Dengan HTML, kalian tidak dapat mengubah output dengan menambahkan ekstra spasi atau baris tambahan dalam koding HTML. Browser otomatis akan menghapus spasi ekstra dan baris tambahan ketika halaman ditampilkan. Setiap jumlah spasi dan sejumlah baris yang baru akan dihitung hanya satu ruangan.

Langsung ke koding dibawah ini :D ayo semangat!!


Ckck.. liat gambar diatas saya menggunakan kalimat yang sama tapi saya menambahkan ekstra spasi pada kalimat kedua, tetapi kedua kalimat tersebut juga saya tambahkan baris tambahan, akan tetapi hasilnya tidak kan bisa berubah :v liat gambar dibawah ini biar greget.. hehe



Selanjutnya saya akan membahas tentang HTML Line Breaks, HTML line breaks <br> elemen itu mendefinisikan satu baris paragraf, gunakan <br> jika kalian ingin menambahkan sebuah baris yang baru (line break) tanpa memulai paragraf yang baru. Liat gambar dibawah ini untuk penjelasannya :D


Pada gambar diatas saya menuliskan kalimat menggunakan paragraph Line breaks tanpa menambahkan paragraf yang baru, gambar dibawah ini adalah tampilannya di Google Chrome


Elemen <br> itu adalah sebuah elemen html baris kosong, elemen <br> juga tidak mempunyai tag akhir.

Selanjutnya saya akan membahas masalah tentang POEM atau The Poem Problem
Langsung ke koding :D



Saya menuliskan koding poem dengan menambahkan baris baru seperti koding diatas, akan tetapi poem akan menampilkan hanya satu baris saja, liat gambar dibawah ini untuk lebih jelasnya 


Hehe, ternyata materi HTML Paragraph lumayan panjang ya, nah sedikit lagi kita akan selesaikan materi ini, yang terakhir saya akan membahas tentang HTML <pre> element,
Elemen <pre> pada HTML menggambarkan sebuah blok teks sebelum diformat, dengan spasi dan baris yang tersruktur. Untuk menampilkan semuanya dengan spasi yang tepat dan line-breaks, kalian harus menambahkan <pre> elemen pada teks seperti gambar dibawah ini


Tidak seperti poem yang masih menggunakan elemen <p>, akan tetapi elemen <pre> akan memberikan tampilan dengan spasi dan baris yang terstrukutur seperti gambar dibawah ini



Ckck, alhamdulillah sudah selesai hehe, dibawah ini adalah catatan tambahan dari tag yang telah saya bahas :


Tag
Deskripsi
<p>
Menggambarkan sebuah paragraf
<br>
Menambahkan sebuah line break (a single line break)
<pre>
Menggambarkan teks sebelum diformat (pre-formatted text)

Nah sudah selesai pembahasan tentang paragraf html (HTML Paragraph), karena saya juga masih tahap belajar html, mungkin banyak yang kurang jelas pada pembahasan diatas, bila ada yang kurang jelas, silahkan bertanya di kolom komentar, maaf, dan terima kasih semoga materi yang saya sampaikan bermanfaat untuk kalian semua terutama untuk diri saya sendiri J hehe, sampai jumpa di materi selanjutnya..

Translated from w3schools.com

Created by Gugus Widiandito – Project X

PENULISAN CSS

Ada 3 cara penulisan kode CSS,yaitu eksternal,internal,inline. ketiganya bisa anda lakukan sesuai kebutuhan. Berikut contoh penggunaan dari metode-metode tersebut :

1. Eksternal
    Penulisan kode CSS dengan metode ini dilakukan dengan cara membuat file CSS dan dipanggil didalam tag head. File CSS memiliki ekstensi dengan akhiran (.css). Contoh : mystyle.css
Pemanggilan file .css dilakukan dengan menggunakan tag link :










Atribut "rel" adalah informasi hubungan dari tag link tersebut, yaitu sebagai style sheet. "Href" diisi dengan lokasi file CSS yang ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link.

2. Internal
    Metode ini ditulis didalam tag style yang ditempatkan pada tag head :















Metode ini sangat dianjurkan untuk pengujian style atau ketika anda hanya memiliki satu halaman web.

3. Inline
    Metode ini ditulis langsung pada tag yang ingin diberi style dengan menggunakan atribut style.











Pada metode ini, anda tidak perlu menuliskan selector. Karena anda menuliskan CSS langsung pada tag yang ingin diberi style. cara ini efektif ketika anda ingin melakukan perubahan pada CSS.

Demikian metode-metode yang digunakan untuk menuliskan kode CSS. Selanjutnya akan dijelaskan bagaimana cara membuat style Background pada CSS.

Created by Arif Yuni Firmansah - Project-X

HTML Headings

HTML Headings adalah pos yang penting dalam dokumen HTML
judul didefinisikan dalam tag <h1> sampai <h6>, <h1> mendefinisikan hal yang terpenting dan <h6> mendefinisikan hal yang kurang penting.


catatan: Browser otomatis menambahkan sebuah spasi margin pada sebelum dan sesudah pos judul

- Aturan Horizontal HTML
  tag <hr> menciptakan garis horizontal dalam suatu page, elemen <hr> dapat digunakan dalam konten terpisah,

- Elemen <head> HTML, tidak ada kaitannya dengan judul HTML, elemen <head> berisi tentang meta data dan meta data tidak ditampilkan. elemen <head> diletakan da antara tag <html> dan tag <body>.


- Elemen <title> HTML
   elemen <title> adalah meta data, didefinisikan sebagai judul dokumen HTML, title tadak ditampilkan dalam dokumen, namun akan ditampilkan di tab browser.

- Elemen <meta> HTML
   elemen <meta> juga meta data, hal ini dapat digunakan untuk mendefinisikan set karakterdan informasi lain tentang dokumen HTML
elemen meta lainnya yaitu elemen <style>, digunakan untuk mendefinisikan style sheet pada CSS, dan elemen <link> digunakan untuk mendefinisikan style sheet eksternal pada CSS.


baca juga :

 Dikutip dari W3Schools
Oleh Ali Chaedar

Elemen HTML

Elemen HTML,diperuntukkan untuk membuat dokumen HTML, elemen html ditulis atau dideklarasikan di awal dan di akhir label.
<tagname>content</tagname>

<p>My first paragraph</p>


- Elemen HTML bersarang, maksudnya elemen HTML dapat bersarang atau elemen dapat berisi elemen juga, semua dokumen html terdiri dari elemen hrml bersarang,
contoh dibawah ini mengandung 4 elemen ( html, body h1, p ).



- Penjelasan HTML di atas
   elemen <html> mendefinisikan seluruh dokumen, memiliki awal tag <html> dan akhir tag </html>, isi elemen adalah elemen html lain ( elemen <body> )


<body> mendefinisikan tubuh dokumen, memiliki tag awal <body> dan tag akhir </body>, isi elemen adalah dua elemen lainnya ( <h1> dan <p> )


tag <h1> mendefinisikan heading, memiliki tag awal <h1> dan tag akhir </h1>, isi pos = My first heading.
=> <h1>My First Heading</h1>

tag <p> mendefinisikan paragraf, memiliki tag awal <p> dan tag akhir </p>, isi pos = My first paragraph.
=> <p>My first paragraph.</p>

- Jangan lupakan tag akhir
   beberapa elemen akan muncul dengan benar, bahkan jika anda lupa dengan tag akhir.



contoh diatas dapat bekerja disemua browser, karena tag penutup dianggap opsional, janganlah bergantung pada ini, ini bisa menghasilkan hasil yang tidak maksimal dan / atau ada ksalahan  jika anda lupa dengan tag akhir.

- Elemen HTML Kosong
   elemen html tanpa konten atau disebut juga elemen kosong,
   <br> adalah elemen kosong tanpa tag penutup ( tag <br> mendefinisikan suatu baris )
   elemen kosong bisa tertutup dalam tag pembuka seperti ini: </br>.
   untuk HTML5 tidak mengharuskan elemen kosong terutup, namun jika anda memiliki validasi ketat dan membuat dokumen anda dibaca oleh parser XML maka tutuplah semua elemen HTML.


baca juga :

Dikutip dari W3Schools
oleh Ali Chaedar
Newer Posts Older Posts Home

Visitors

Popular

 

Project X

Warung

STMIK YMI TEGAL

Followers

 

Templates by Nano Yulianto | CSS3 by David Walsh | Powered by {N}Code & Blogger