Info Website

Untuk yang ingin belajar website,membangun website sederhana dan dinamis. Serta penjelasan tag HTML.

Iklan

Wednesday, 31 August 2016

On 20:51:00 by fajri   No comments

Membuat Text Berjalan dengan Tag

 <marquee></marquee>

Salam sukses buat agan-agan dan sis..
kali ini saya akan memberikan tutorial tentang "Membuat Text Berjalan Dengan Html".
lansung saja kita praktekan..
petma buat dulu koding Htmlnya
<html>
 <head>
      <title>Membuat Text Berjalan</title>
 <head>
<body>
<h1><marquee>Ini adalah Text Berjalan</marquee></h1>
</body>
</html>
Nahh coba dijalankan di browser kesukaan agan-agan dan lihat hasilnya..



Sekian artikelku hari ini semoga bermanfaat..

Wednesday, 24 August 2016

On 19:46:00 by fajri   No comments

Rekomendasi situs yang menyediakan warna untuk website anda

Assalamualaikum wr,wb.Salam sukses.
Ketemu lagi dengan saya di artikel yang sederhana ini,di arikel kali ini,didalam website warna sangat berpengaruh dari segi tampilan,maka dari itusaya akan memberiakn rekomendasi situs yang menyediakan warna yang dinamis untuk website anda,silahkan di simak.
Yang pertama
  • Color Lisa situs ini menyediakan banyak sekali pilihan warna yang dinamis,kita juga disediakn kode HEXnya agar mudah di copy.Lansung saja jika ingin dikunjungi Color lisa
  • Color Hunter kunjungi http://www.colorhunter.com/

Pencarian warna adalah spesialisnya
















Nahh sampai sinidulu agan-agan smoga bermanfaat.

Tuesday, 23 August 2016

On 23:30:00 by fajri   No comments

Cara membuat gambar menjadi Bulat(circle),Round menggunakan W3.CSS pada html

Assalamualaikum wr,wb.Ketemulagi dengan saya di artikel yang sederhana ini,dimana saya akan menjelaskan bagaimana cara membuat gambar/img menjadi bulat(circle),ngeround.
Apa itu W3.CSS ?
W3.CSS adalah  framework  CSS modern dengan ketanggapan built -in (sudah  terintegrasi).    Lebih kecil dan lebih cepat dari   framework CSS lainnya .     Mudah untuk  dipelajari , dan lebih mudah digunakan daripada framework CSS lainnya .   Hanya menggunakan  CSS standar  tanpa jQuery atau JavaScript library  .     Mempercepat aplikasi HTML seluler .     Memberikan  kesetaraan CSS untuk semua perangkat  seperti  pc , laptop , tablet , dan ponsel. 
Untuk  tutorial   ini pertama-tama download  dulu  frameworknya di sini  http://www.w3schools.com/lib/w3.css
Jika sudah di download  mari kita praktekan..
Seperti biasa kita buat script HTML dulu lihat gambar dibawah..!














Seperti  agan-agan  lihat ,saya memberikan  nama  file htmlnya   "gambarbulat"  atau terserah agan-agan.
langkah selanjutnya  mengelinkkanya lihat  gambar dibawah..!





langkah selanjutnya  memasukan gambar yang ingin dibuat bulat/bundar  lihat gambar dibawah.!






Hasilnya.


























Nah hasil dari  pemanggilan gambar  sudah selesai dan hasilnya  tidak bualt/bundar.
Inilah fungsi dari W3.CSS  hanya menggunakan atribut "Class"  lebih singkat kodingnya dan mudah.
Sekarng  kita   tambahkan atribut  "Class" didalam tag "img"  coba lihat  gambar dibawah dibawah ini..!




 coba agan-agan perhatikan gambar  koding yang saya lingkari dengan warna merah,disitu saya  menggunakan atribut "class" dan valuenya"w3-circle" dimana  atribut "class" memanggil fungsi dari W3.CSS dan value yang kita pakai adalah "w3-circle"  fungsinya membuat bulat/bundar gambar ,lihat  hasilnya dibawah ini..!
 
Naahh kita sudah lihat kan hasilnya gambar diatas mudah bukan? .
Membuat gambar bulat/bundar sudah selesai,sekarang kita buat gambar ngeround,yang hanya dirubah valueny dengan "w3-round-xlarge",lihat gambar dibawah..!
lihat  gambar diatas saya hanya mengubah valuenya dengan"w3-round-xlarge" dan lihat hasilnya dibawah ini..!

Nahhh seperti itulah hasilnya saat dijalnkan di browser.
jika agan-agan tidak puas dengan hasil diatas,saya akan memberikan rekomendasinya calss-classnya.
  • w3-circle
  • w3-round-small
  • w3-round-large
  • w3-round-xlarge
  • w3-round-xxlarge
dicoba aja semoga bermanfaat atau kunjungi link ini w3schools


 

Monday, 22 August 2016

On 20:07:00 by fajri   2 comments

Rekomendasi Belajar Website Online

Assalamualikum wr,wb.
Salam sukses agan,sis.
Di artikel ku ini,saya akan memberikan rekomendasi belajar web online.
Dimana website yang akan saya jelaskan sekarang menyediakan banyak tutorial seperti,HTML,CSS,BOOTSTRAP,JAVASCRIPT,W3.CSS,dan banyak lagi tutorialnya.
Nahh,langsung saja saya memberitahukan nama websitenya yaitu;

W3schools
  



seperti yang saya singgung diatas,W3SCHOOLS menyediakan banyak tutorial untuk pemuala maupun sudah pro.Di website tersebut menyediakn Text Editornya langsung.
Jika agan,sis berminat mengunjunginya dan ingin mahir HTML dll,silahkan kunjungi linknya dibawah.
W3schools  

Sekian artikel singkat dari saya semoga bermanfaat,assaamualikum.
Salam Sukses...! 

Monday, 1 August 2016

Belajar HTML

On 01:04:00 by fajri   No comments
 Belajar HTML & CS

HTML adalah bahasa untuk memarkup/memformat,HTML yang kepanjangannya adalah Heyper Text Markup Langue
yang artinya Bahasa untuk mempormat yang berbasis text.
Jadi HTML bukanlah bahasa pemograman seperti PHP,Delphi,Visual Basic(VB).
Persiapan:

    Laptop/komputer
Web Browser(Firefox,Chrome,Safari,Explore)
Texteditor(Notepad++,Notepad,Sublime,dll)
Kopi + susu :D

Itulah syarat-syarat untuk membuat website,tapi  Kopi + susu jikalau ada..hehehe


Sekarang kita akan membuat website dalam 1 menit
Pertama saya menggunakan web browser Firefox,kenapa Firefox karena banyak sekali yang menggunakannya di seluruh dunia.
Karena Firefox sangatlah mendukung plugin-plugin terbaru dari HTML,jika anda tidak suka dengan web browser ini,
anda bisa menggunaka web browser yang lain seperti Chrome,Safari,dll terserah anda.
Sekarang kita mulai
Pertama anda ke Start Menu Windows,dan tulis di pencrian,tulis "Notepad ++"
jika sudah ketemu kemudian dikelik,jika teman-teman belum mempunyai Notepad ++
teman-teman bisa download disitus resminya Notepad++
jika teman-teman sudah mendownload,tinggal di instal aja di laptop/komputer teman-teman.
Penampakan Notepad++ saat saya buka



Saya perkenalkan dulu struktur HTML




Penjelasan
 ini adalah dimana kita akan memberi tahu kepada browser,bahwa kita akan membuat
File HTML.
Penjelasan
ini disebut dengan Tag,tag ini dimana kita akan membuat file HTML
Penjelasan tag ini fungsinya untuk menampung informasi seperti tag "title".
Pemjelasan       
nah tag ini untuk memberikan informasi di tab pada browser,tag ini berada antara tag "Head".
Penjelasan
disini teman-teman akan membuat kata-kata,informasi,masukan gambar,terserah anda.

Nah itu saja penjelassan singkat dari struktur HTML.Ingat setiap tag mempunyai penutupnya
lihat gambar dibawah ini, sengaja saya buatkan garis berwarna dan saya mengarahkan garis-garis dari tag pebuka
ke tag penutupnya.


Mudah bukan..?
Sekarang kita coba membuat web dalam 1 menit
buat dulu struktur HTMLnya
Coba teman-teman tuliskan di Notepadnya.
pertama teman-teman tulis informasi diantara tag"Title",contoh


teman-teman simpan dengan di "save as" atau bisa dengan shortkey ctrl+alt+s,lihat contohnya:


jika muncul kotak dialg Save as,pertama-tama buat dulu folder dengan nama "Web pertama ku" seperti gambar diatas
dan beri nama File htmlnya dengan nama "Latihan1"..stop dulu jangan di save ada penjelasan selanjutnya


gambar diatas ada lingkaran merah itu,disana kita salin formatnya menjadi HTML atau "Heyper Text Markup Language file" seperti gambar diatas
kemudian silahkan disave.
jika sudah di simpan,sekarang teman-teman buka di browsernya dengan cara Mendrag atau bisa dengan
mencari folder teman-teman dan cari filenya,kemudian teman-teman kelik kanan pada file dan pilih "open with"
jika sudah muncul teman-teman tinggal pilih browser kesukaan teman-teman.
nah jika sudah di buka browser,lihat perubahan pada tab pada browser teman-teman,kebetulan saya menggunakan Firefox




nah kelihatan kan pada tabnya akan berubah namanya"HTML pertama ku".<br>
Sekarang kita coba tulis di bagian dalam tag body,lihat gambar dibawah


Kemudain save dengan ctrl+s,jika sudah di save coba teman-teman buka browsernya
tekan F5 pada laptop/komputernya atau di refresh,lihat hasilnya gambar dibawah





Subscribe to: Posts (Atom)