Belajar Membuat Website Dari Dasar Sampai Mahir : Element HTML Part 2

postingan ini adalah lanjutan dari postingan  Belajar Membuat Website Dari Dasar Sampai Mahir :HTML Part 1 pembahasan kali ini adalah element HTML ketika anda membuka sebuah website halaman website yang anda lihat itu mulai dari paragrap, postingan, header, banner dan link-link navigasi itulah yang disebut dengan element-element HTML

Element HTML Terbagi Menjadi Tiga Bagian:

• Tags Pembuka
• isi
• Tags Penutup

Lalu apa itu Tags, Tags adalah sebuah tanda dimana kita bisa menandai text tersebut untuk lebih jelasnya silah kan anda baca pada  postingan sebelumnya

Contoh Element HTML

<p> Isi Element HTML </p>

• <p> Di atas adalah Tags pembuka
• </p> Di atas adalah Tags penutup

Jadi kesimpulanya Tags penutup hanya menggunakan (/) backslash

Apa Itu Nested HTML. ?

Nested HTML adalah sebuah element yang berada di dalam element
contoh:

 
<html>
<title>Title</title>
<body><p>
Paragrap</p>
</body>
</html>

Element <p> adalah merupakan paragraf element, element ini dibuka dengan <p> dan di tutup dengan </p>

Element <body> merupakan element isi atau badan dari sebuah dokumen HTML Element ini dibuka dengan <body> dan di tutup dengan </body>
Elemen ini memiliki sebuah nested element yaitu element ( paragraf <p> ) beserta isinya

Element <title> merupakan element yang mendefinisikan judul dari sebuah dokumen HTML
Element ini dibuka dengan <title> dan di tutup dengan </title>

Element <html> merupakan element yang mendefiniskan seluruh bagian dari sebuah dokumen HTML Element ini dibuka dengan <html> dan di tutup dengan </html>

Dalam satu web bisa terdapat ribuan element bahkan lebih element-element diatas adalah elemen dasar dari HTML posting kali ini akan berlanju ke Belajar Membuat Website Dari Dasar Sampai Mahir :Atribut HTML Part 3

Belajar Membuat Website Dari Dasar Sampai Mahir :Atribut HTML Part 3

Jika pada postingan sebelumnya saya sudah membahas Belajar Membuat Website Dari Dasar Sampai Mahir : Element HTML Part 2 kali ini kita akan membahas atribut pada HTML atribut adalah informasi tambaha pada Tags. informasi bisa berupa judul, warna text atau bersar huruf nya pada text, dan lain-lain.

Contoh Atribut Judul:
dalam contoh ini Tags paragraf <p> memiliki judul atribut The Encoding

<p title="The Encoding">
The encoding adalah blog yang menyediakan tutorial dan tips dan trick </p>

Jika kita lihat code diatas  terdapat tanda ( " ) selain tanda tersebut kita bisa juga menggunakan tanda ( ' )

<p title='The Encoding'>

Untuk HTML5 anda tidak usah menggunakan tanda kutip

<p title=The Encoding>

Sekarang anda buka aplikasi editornya Lalu anda masukan code di bawah ini pada kolom edit nya

 
<html>
<body>  
<p title="The Encoding">
The encoding adalah blog yang menyediakan tutorial dan tips dan trick </p>
</body>
</html>

Setelah kode di masukan lalu anda jalan kan kode tersebut. Cara menjalankannya sperti yang sudah di jelaskan di  Belajar Membuat Website Dari Dasar Sampai Mahir :HTML Part 1


Dan ini adalah tampilan dari hasil kode tersebut.

atribut hanya ada pada beberapa Tags saja jadi tidak semua Tags membutuhkan atribut akan tetapi pada stiap website anda akan sering melihat atribut.

banyak sekali atribut yang terdapat pada HTML akan teteapi ada beberapa atribut hanya cocok di beberapa TAGS saja contoh nya:

Link HTML didefinisikan dengan <a>  tags. Alamat link ditentukan dalam href atribut:

herf itu adalah suatu atribut untuk menjalan kan sebuah Link pada HTML.

Untuk pembelajaran atribut HTML kali ini cukup sampai disini dan akan di lanjutkan pada postingan berikut nya semoga bermanfaat

Belajar Membuat Website Dari Dasar Sampai Mahir :HTML Part 1

Jika anda sudah menginstal aplikasi editor nya dan juga sudah membaca apa itu html di part pertama. Kita akan berlanjut di part 1 ini kita akan membahas cara membuka file HTML saya saran kan anda menggunakan aplikasi Notepad++ atau Brackets karena aplikasi ini mudah di gunakan bagi anda yang masih pemula atau anda juga bisa menggunakan aplikasi yang lain sejenis seperti Notepad++ atau Brackets.
jangan menggunakan aplikasi seperti dreme Adobe Dreamweaver karena dengan aplikasi tersebut kita tidak akan memahami kode-kode dan kita hanya bermain di aplikasi tersebut saja.

Silahkan anda buka aplikasi editor nya anda bisa melihat dua contoh aplikasi editor nya Notepad++ dan Brackets.


Setelah anda membuka salah satu aplikasi etditor tersebut lalu anda ketikan kode berikut ke kolom editor nya.

<html>
<body>  
Belajar Html
</body>
</html>

Jika sudah mengetika kode html tersebut lalu jalankan, jika anda mengguna kan Notepad++ klik RUN pada menu bar dia atas lalu pilih browser yang anda gunakan misal nya anda menggunakan chrome  maka anda klik lauch in chrome.

jika anda menggunakan Brackets untuk menjalan kan html tersebut maka anda klik Live Preview.


stelah itu anda akan melihat tampilan seperti gambar di bawah ini.


gambar di atas adalah tampilan kode yang anda jalan kan .

itu adah salah satu contoh code html di the encoding ada banyak contoh code html sperti Tags, Label, URL, dan banyak lagi sbelum anda membaca postingan ini anda baca dulu postingan Belajar Membuat Website Dari Dasar Sampai Mahir dan di situ juga ada daftar Contoh-Contoh Kode HTML sekian postingan kali ini Belajar Membuat Website Dari Dasar Sampai Mahir Part 1 semoga bermanfaat

Belajar Membuat Website Dari Dasar Sampai Mahir

Untuk mempelajari bagaimana cara membuat website langkah yang pertama harus anda lakukan adalah mempelajari HTML. HTML merupakan sebuah bahasa pemgraman  yang membentuk sebuah rangka  sehingga terbentuk nya sebuah website.

PENGERTIAN HTML
Hypertext  Markup Language atau di singkat HTML adalah sebuah bahasa pemograman yang digunakan untuk membuat sebuah website. yang kemudian  website tersebut menampilkan sebuah informasi dan informasi tersebut bisa kita akses melalui internet.

Disebut hypertext karena didalam sebuah text tersebut terdapat sebuah fungsi dan membentuk sebuah rangka pada sebuah  website yang sering anda lihat. maka dari itulah HTML menjadi dasar untuk memperlajari membuat sebuah website. 

Disebut Markup Language karena dalam sebuah HTML terdapat sebuah tanda dimana kita bisa menandai sebuah text dan tanda tersebut bisakita namai sebagai Tags. Contoh Tags pada kode HTML kita bisa lihat code di bawah ini.

<body> berpasangan dengan </body>
<title> berpasangan dengan </title>
<h1> berpasangan dengan </h1>

Pada umum nya HTML Tags hanya bisa berjalan jika berpasangan. Akan tetapi ada beberapa Tags yang di sebut sebagai ‘Empty Element’dapat berjalan tanpa pasangan:

<img>
<input>

HTML hanyalah sebuah bahasa pemograman struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman website. markup (markup language), dalam HTML tidak akan ditemukan struktur yang biasa di temukan dalam bahasa pemograman seperti IF, LOOP, maupun variabel.

Selain HTML, dikenal juga xHTML yang merupakan singkatan dari eXtensible Hypertext Markup Language.  xHTML merupakan versi tambahan dari HTML. Untuk tahap ini anda  boleh menyebut bahwa xHTML itu juga HTML karena pada dasar nya sama saja.

Untuk mempelajari WEBSITE lebih lanjut sebaik nya anda install dulu aplikasi editor nya jika anda bingung aplikasi apa yang cocok buat anda Aplikas Editor Untuk Desain Website

LANJUTAN DARI POSTINGAN INI:
Belajar Membuat Website Dari Dasar Sampai Mahir :HTML Part 1
Belajar Membuat Website Dari Dasar Sampai Mahir : Element HTML Part 2
Belajar Membuat Website Dari Dasar Sampai Mahir :Atribut HTML Part 3

10 Aplikas Editor Untuk Desain Website

Kali ini saya akan merangkum 10 aplikasi untuk mendesain website aplikasi ini sangat berguna untuk anda yang masih belajar membuat website maupun yang sudah mahir. Tentusaja saja aplikasi ini akan sangat berguna karena aplikasi ini akan mempermudah pekerjaan anda dalam membangun maupun mengedit website.

Aplikasi atau software ini jugan banyak digunakan oleh para programer profesional di dunia, aplikasi ini juga mendukung kode-kode seperti HTML, CSS, PHP, JAVASCRIPT dan kode lain juga jadi tidak usah khawatir jika anda yang masih belajar dan berfokus dengan kode HTML dan CSS.

1. Notepad++
Aplikasi yang pertama ini sangat umum digunakan oleh paraprogramer desainer website banyak sekali fitur yang di sediakan oleh aplikasi Notepad++ ini sehingga mempermudah anda dalam mengolah code-code. Anda juga bisa mbuat sebuah tab sehingga anda bisa berfokus pada satu pekerjaan ukuran program yang lebih kecil jadi mempermudah anda dalam menyelesaikan pekerjaan.

2. Dreamweaver
Aplikasi Adobe Dreamweaver merupakan aplikasi web editor yang sangat populer. Dreamweaver menyediakan fitur melimpah untuk sekedar membuat halaman web dengan kode HTML. Dreamwever tidak hanya sebuah text editor untuk HTML saja, namun juga untuk berbagai bahasa pemograman web lainnya.Program penyunting halaman web keluaran Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver keluaran Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran Adobe Systems adalah versi 12 yang ada dalam Adobe Creative Suite 6 (sering disingkat Adobe CS6).

Dibalik alat dan fitur yang melimpah saya sarankan untuk yang masih belajar jangan menggunakan aplikasi ini karena dengan aplikasi ini kita tidak akan bekerja dengan kode-kode yang harusnya kita pelajari, malah kita hanya mengoprasi kan sebuah aplikasi aplikasi ini juga sangat berat dan harganya cukupmahal 

3. CoffeCup Free HTML Editor
CoffeCup Free HTML Editor adalah sistem web desain dengan fitur yang lengkap dengan Built In FTF anda bisa mengupload file seperti Font, Frame dan banyak lagi dukungan untuk HTML 5, CSS 3 dan juga dijamin keluaran kode yang valid yang tersedia di  CoffeCup Free HTML Editor jadi mempermudah anda dalam menyelesaikan sebuah pekerjaan apalagi aplikasi ini juga mempunyai sebuah fitur FTF jika anda kebingungan dalam menggunakan aplikasi ini anda bisa klik help di bagian menu pada aplikasi tersebut.

4. Firebug
Firebug adalah sebuah fitur extensi yang di sediakan oleh Firefox firebug ini akan membantu anda menyelesaikan pembuatan website anda sesuai harapan anda, membantu anda untuk melihat CSS dan HTML pada website anda yang di buka pada browser fitefox anda mengedit website anda dan melihat hasil nya saat itu juga Firebug  akan membantu anda tuk memahami layout halaman website anda, melakukan debug dan log JavaScript, mengelola cookie, menganalisis load halaman website anda, memeriksa pesan kesalahan dan banyal lagi fitur yang di sediakan oleh firebug.

5. PageBrezee
Aplikasi ini sangat sederhana tapi kesederhanaan ini membuat anda lebih mudah menggunakanya namun jika anda ingin menciptakan suatu website yang sederhana dan berbeda. Dengan aplikasi ini anda dapat menambahkan Table, Gambar danjuga Linkdalam satu atau dua klik. Sangat mudah untuk melihat dan mengedit semua halaman website anda, dan ketika anda sudah selesai  anda bisa mengupload file font dan frame built-in klien FTP akan membantu anda menempatkan pekerjaan anda secara online. Walaupun hasil akhir mungkin sangat mendasar, kesederhanaan program membuatnya layak untuk pemula.

6. BlueFish
Bluefish merupakan aplikasi editor programmer website yang juga mencakup banyak fitur dan alat web pilihan. Syntax ASP.NET, CSS, HTML, JavaScript, PHP dan banyak lagi didukungan yang di sediakan oleh BlueFish, code folding, alat pencarian yang kuat, autocompletion, dan banyak lagi Fitur dan Alat yang di sediakan oleh BlueFish. Aplikasi atau software ini juga mendukung template dokumen, memiliki wizards untuk menambahkan CSS,HTML, JavaScript, PHP,forms, tabel, audio dan objek video, Pada website anda lalu adanya tag editing dan pratinjau dari dokumen.

7. Brackets

Brackets adalah apliksi editor dengan fitur modern yang membuat anda mudah dalam merancang sebuah wesite yang menarik editor teks yang modern ringan dan mudah di gunakan. sebuah alat visual ke dalam editor sehingga Anda mendapatkan jumlah yang tepat dari bantuan ketika Anda menginginkannya. Brackets juga mendukung kode CSS, HTML, JavaScript, dan Synta mendukung lebih dari 200 bahasa pemrograman. Data adalah sebagai penting bagi kita sebagai kode, jadi kita selalu mencari cara baru untuk membuat format seperti model STL 3D, file CSV, dan peta GeoJSON di browser. danya fitur “Live Preview” anda tidak perlu untuk me-refresh browser anda setiap ingin melihat perubahan karena tampilanya akan segera diperbarui secara otomatis jadi ketika proses editing dilakukan maka saat itu juga anda akan melihat hasil nya.

8. KompoZer
KompoZer adalah aplikasi lama yang belum diperbarui untuk beberapa waktu, namun KompoZer masih bisa menjadi editor web yang berguna untuk pemula dan para programer website. Program ini bekerja seperti pengolah kata sederhana, sehingga anda tidak perlu tahu tentang HTML, CSS, scripting atau apa pun: hanya memasukkan teks, format, dan klik berbagai tombol untuk menambahkan link, menyisipkan tabel, gambar, dan lainnya. Sistem Authoring Web lengkap yang mengkombinasikan manajemen file web dan WYSIWYG halaman web kemampuan editing yang mudah digunakan yang ditemukan di Microsoft FrontPage , Adobe Dreamweaver dan program high end lainnya

9. OpenBEXI
Open BEXI adalah aplikasi editor HTML juga mendukung  HTML5 dan CSS3 . Dengan mengubah ukuran ,mempermudah anda untuk membangun sebuah halaman website. segala hal mulai dari teks, link dan gambar, graphs, flowcharts. Anda juga bisa melakukan tweaking item-item tersebut sesuai dengan kebutuhan anda.OpenBEXI juga memungkinkan anda untuk men-tweak CSS atau menambahkan script ke halaman, dan built-in FTP klien akan mambantu anda meng-upload file ke server.OpenBEXI Software memungkinkan Anda untuk membuat , mengelola dan mempublikasikan proyek web dan halaman HTML untuk Internet

10. BlueGriffon
BlueGriffon merupakan editing tool yang mengambil pendekatan mudah untuk mengedit web, walaupun begitu pada BlueGriffon  terdapat fitur yang kuat. Kamu bisa menggunakan BlueGriffon untuk mengetik teks, menyisipkan gambar, tabel, file audio, video dan sebagainya. Lebih jauh dengan aplikasi ini terdapat SVG editor, form design tools, beberapa dukungan CSS, pemeriksa aksesibilitas, DOM Explorer, dan banyak lagi.

Sekian pembahasan saya kali ini semoga bermanfaat