Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 1

Kategori │Cara Membuat Website

Belajar Cara Membuat WebSite Sendiri Untuk Pemula Bagian I : Memahami dan Menulis HTML

Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 1

Semua orang hidup setidaknya sedikit dari kehidupan mereka di web , dan apakah Anda mengembangkan halaman web untuk hidup , ingin membuat situs web papan nama , atau hanya ingin lebih banyak kontrol atas bagaimana komentar Anda muncul di situs web , memiliki pemahaman HTML pada perintah Anda sangat berharga . Dengan itu dalam pikiran , dalam pelajaran pertama kami tentang cara membuat website sendiri , kami meliputi dasar-dasar tingkat atas dari HTML - bahasa markup dominan web .

Saat ini sangat mudah untuk menempatkan bersama-sama kehadiran web menggunakan media sosial dan halaman arahan pribadi , tetapi jika Anda ingin benar-benar membuat situs web Anda sendiri Anda akan perlu belajar HTML dan CSS . Untungnya , kami dapat membantu .

Anda dapat membuat dan mengatur dengan editor teks , memandu Anda melalui struktur dasar dari sebuah dokumen HTML , dan memperkenalkan Anda untuk beberapa hal tentang HTML Anda akan ingin tahu segera . Pada akhir pelajaran Anda akan tahu bagaimana untuk membuat halaman HTML dasar . Jika Anda lupa sesuatu atau ingin bahan referensi tambahan sedikit , memeriksa teks di bawah . Ini akan memberikan Anda dengan informasi dasar tentang HTML yang Anda butuhkan.

Apa yang Anda Perlukan?
  • Sebuah editor teks biasa untuk menulis HTML Anda
  • web browser pilihan Anda untuk menguji HTML Anda
  • Keinginan untuk daging sapi sampai pengetahuan Anda tentang cara kerja web
Seperti yang Anda lihat dalam Belajar Cara Membuat Website Sendiri Untuk Pemula Bagian 1 Anda benar-benar tidak perlu banyak untuk memulai .

Mendapatkan Plain Text Editor

Dalam rangka untuk menulis HTML, Anda memerlukan editor teks biasa. Untuk menggunakan editor teks biasa disebut Textmate, tapi itu akan dikenakan biaya. Jika Anda ingin sesuatu yang gratis, Anda punya banyak pilihan besar, termasuk Notepad ++ (Windows), Kod (Mac), atau Teks Sublime baik untuk Windows dan Mac. Ada beberapa editor teks lain di luar sana, sehingga Anda dapat menggunakan apa pun yang Anda inginkan selama itu adalah editor teks biasa.

Sedangkan teks biasa jangka adalah jenis keliru (inilah mengapa), itu pada dasarnya digunakan untuk menggambarkan teks yang tidak memiliki gaya apapun dan hanya huruf, angka, dan simbol. Ini berarti tidak ada yang berani, tidak ada miring, tidak ada ukuran yang berbeda, dll.

Sementara editor teks polos Anda mungkin memiliki sintaks-fitur yang mengubah warna teks berdasarkan apa yang Anda ketik untuk membuat kode Anda lebih mudah dibaca ini hanya sesuatu yang Anda akan melihat dalam editor teks Anda dan sesuatu yang tidak disimpan dalam file. Pada dasarnya, Anda memerlukan editor teks yang tidak menyimpan apa-apa tapi teks (yang berarti Anda tidak ingin menggunakan sesuatu seperti Microsoft Word).
Catatan : Untuk keperluan pelajaran ini , Anda harus menyimpan semua file yang Anda buat dalam editor teks dengan html sebagai ekstensi - file contoh , " my_first_web_page.html " . Anda dapat mengedit dokumen html di teks editor pilihan Anda , tetapi Anda juga dapat melihatnya di browser Anda . Apa yang Anda lihat ketika Anda membukanya di browser Anda akan sangat berbeda dari apa yang Anda lihat ketika Anda membukanya di editor teks Anda .

Apa itu Dokumen HTML ?

Jika Anda membaca bagian atas, Anda mungkin menduga bahwa HTML yang merupakan singkatan dari HyperText Markup Language adalah hanya sekelompok teks yang disimpan sebagai jenis dokumen yang browser Anda mengidentifikasi sebagai menggunakan HTML . Jika Anda melihat gambar pada halaman web , itu hanya dirujuk dalam teks dokumen HTML dan tidak secara fisik dimasukkan sebagai bagian dari file .

Semua dokumen HTML benar-benar adalah menyediakan satu set instruksi berbasis teks yang web browser dapat menafsirkan . Hal ini dilakukan dengan encapsulating teks halaman di tag , yang kita akan belajar lebih banyak tentang dalam satu menit . Ia juga menggunakan tag ini untuk memberitahu web browser untuk melakukan hal-hal seperti gambar tampilan , tambahkan baris istirahat , dan banyak lagi . Pergi lebih jauh , HTML bisa ditata menggunakan CSS yang merupakan singkatan dari Cascading stylesheet, mana kita akan belajar tentang di pelajaran berikutnya . Untuk saat ini , hanya memahami bahwa HTML adalah set instruksi untuk browser Anda bahwa Anda akan menulis .

Apakah Tags itu?

Tag digunakan dalam HTML untuk menentukan unsur-unsur tertentu pada halaman sehingga web browser yang tahu bagaimana membuat mereka . Inilah yang satu set tag terlihat seperti :

<html> </html>

Tag di atas adalah tag HTML . Dokumen HTML seluruh Anda masuk ke dalam tag tersebut . Semua tag mulai dengan kurang dari simbol dan akhir dengan lebih dari simbol . Mereka disebut tag , sebagian, karena simbol-simbol membuat mereka terlihat seperti tag .

Tag mulai hanya memiliki istilah HTML di dalamnya , tetapi Anda akan melihat bahwa tag berakhir memiliki / sebelum HTML jangka . The / adalah apa menunjuk itu adalah tag penutup . Tag ini memberitahu browser web Anda bahwa tag HTML pertama adalah awal dari dokumen HTML dan tag penutup / HTML kedua adalah akhir . Kebanyakan tag terlihat seperti ini . Misalnya , jika Anda ingin membuat teks tebal Anda mungkin melihat ini :

<b> Bold Text </b>

Catatan : Ada cara lain untuk membuat teks tebal , juga, jadi pastikan untuk menonton videonya di youtube untuk penjelasan lengkap sebagai perbedaan ini kadang-kadang bisa sangat penting .

Anda juga akan melihat tag yang terlihat seperti ini :

<img src="image.jpg" width="640" height="480"/>

Tag di atas adalah tag gambar . Anda mungkin pernah tahu ini sudah, tapi tugasnya adalah untuk menampilkan gambar . Ada dua hal yang patut diperhatikan yang berbeda tentang tag ini . Pertama , tidak memiliki tag berakhir . Hal ini karena tag img adalah tag menutup diri . Ini tidak memerlukan tag akhir karena tidak ada yang akan pergi antara tag awal dan tag akhir .

Anda akan melihat / a pada akhir tag img , bagaimanapun , dan itu untuk menunjuk akhir. Kembali di hari-hari awal HTML Anda tidak perlu menambahkan bahwa / untuk tag gambar , dan secara teknis Anda masih tidak, tapi itu bentuk yang tepat . Perbedaan lain yang Anda akan melihat adalah bahwa tag memiliki banyak atribut . Atribut adalah hal-hal seperti src = " " dan height = " " , dan mereka berisi informasi yang menjelaskan tentang tag ; dalam kasus tag img , sumber ( src ) atribut selalu diperlukan .

Atribut src menentukan bahwa file gambar kita ingin menampilkan adalah image.jpg . Karena kita hanya daftar nama file , browser akan menganggap kita menjaga bahwa file gambar di lokasi yang sama persis seperti dokumen HTML kita . Jika Anda memiliki folder bernama gambar di tempat yang sama seperti dokumen HTML Anda dan terus gambar di sana, Anda akan mengatur src untuk " images / image.jpg " karena / menunjuk bahwa kita akan ke dalam folder .

Jika Anda ingin memuat gambar dari sebuah situs web eksternal , Anda hanya bisa tapi URL lengkap ke gambar ( misalnya ) . Atribut lain hanya menentukan tinggi dan lebar gambar Anda . Hanya atribut src diperlukan untuk tag gambar , tetapi jika Anda tidak menentukan tinggi dan lebar dari gambar Anda browser tidak akan tahu berapa banyak ruang untuk meninggalkan dan itu akan terus menyesuaikan kembali halaman seperti beban . Ini terlihat agak aneh , jadi selalu lebih baik untuk menentukan tinggi dan lebar dalam tag img Anda .

Untuk referensi cepat dari beberapa elemen tag dasar yang dapat Anda gunakan dalam dokumen Anda , cheatsheet ini adalah tempat yang baik untuk memulai .

Struktur Dokumen Dasar HTML

Sekarang bahwa Anda punya struktur tag dasar ke bawah, mari kita lihat struktur dokumen HTML dasar ini . Anda harus tahu ini adalah tampilan yang sangat mendasar dan tidak termasuk benar-benar semua yang Anda mungkin akan menemukan dalam dokumen HTML sepenuhnya dikembangkan , tetapi bekerja dengan baik dan membuat hal-hal yang baik dan sederhana . Berikut struktur yang sangat mendasar :

Struktur Dokumen Dasar HTML

Anda akan melihat bahwa di dalam tag HTML yang KEPALA dan BODY tag . Tag HEAD merangkum informasi yang belum tentu akan menampilkan langsung pada halaman, seperti judul halaman ( yang muncul sebagai jendela atau judul tab pada browser web Anda ) , gaya CSS , dan metadata lainnya . Tag BODY merangkum informasi yang akan ditampilkan pada halaman Anda teks , gambar , dan media yang kaya . Dokumen HTML yang dihasilkan dibuka di browser web Anda ( cukup klik ganda file yang disimpan atau drag ke jendela browser ) akan terlihat seperti ini :
Hasil dari Struktur Dokumen Dasar HTML

Seperti yang Anda lihat dari contoh , tag tubuh memiliki beberapa hal di dalamnya . Pertama ada tag DIV dengan ID header . tag DIV digunakan untuk mengandung bit konten sehingga Anda dapat gaya mereka dan memindahkan mereka sekitar dengan CSS . Anda akan belajar lebih banyak tentang hal ini ketika kita menyelam ke CSS dalam pelajaran berikutnya .

Di dalam tag header DIV adalah beberapa teks . Bagian pertama dari teks di dalam tag H1 . tag H1 , H2 , H3 , H4 , H5 , dan H6 semua digunakan untuk membuat judul teks . H1 adalah yang terbesar dan H6 adalah yang terkecil . Secara default mereka menghasilkan tebal , teks yang lebih besar , tetapi Anda dapat gaya mereka namun Anda seperti menggunakan CSS . Karena dokumen HTML ini tidak memiliki informasi gaya CSS , tag H1 akan membuat teks Halaman My terlihat tebal . Efek ini sangat mirip dengan teks judul bagian besar yang Anda lihat di posting ini .

Di bawah teks H1 hanya beberapa biasa , un gaya teks . Kebanyakan browser membuat un gaya teks dalam font Times New Roman pada ukuran 12pt . Ketika Anda mulai menambahkan gaya CSS Anda akan dapat untuk gaya teks ini namun Anda suka dengan menetapkan gaya default.

Itu semua Anda benar-benar perlu tahu tentang HTML dasar . Dalam pelajaran berikutnya , kita akan mengambil melihat CSS dasar . Setelah itu kita akan melihat menggabungkan keterampilan untuk membuat situs web dan kemudian membungkus dengan sumber daya tambahan untuk membantu Anda mempelajari lebih lanjut tentang pembuatan situs web . Sampai jumpa besok!

Nah itu dia sobat http://ddsobirin.wagomu.id/ sedikit informasi yang bisa admin bagikan. Mudah-mudahan ada guna dan manfaat bagi Anda semuanya. Jangan lupa untuk membaca juga postingan lainnya terkait Staedtler Pensil Terbaik Untuk Anak dan juga ada postingan mengenai Tips Memilih Jasa Ekspedisi Pengiriman Barang serta ada juga postingan tentang Green Pramuka City Hunian Strategis dan Nyaman di Pusat Kota. Terima kasih sudah berkunjung dan membaca postingannya, demikianlah mengenai Belajar Cara Membuat Website Sendiri Untuk Pemula bagian 1.