HTML Tutorial Pemula mengasumsikan bahwa Anda sama sekali tidak memiliki pengetahuan sebelumnya tentang HTML atau CSS Seperti Saya.
Hal ini akan mudah untuk mengikuti jika Anda bekerja melalui setiap halaman lalu, untuk mengaplikasikan, segala sesuatu yang ditutupi dibawa bersama-sama di pekerjaan kita, sebelum pindah ke CSS Pemula Tutorial.
Hal utama yang perlu diingat, adalah bahwa HTML digunakan untuk makna dan CSS digunakan untuk presentasi. HTML tidak lebih dari konten terstruktur mewah dan format visual dari konten yang akan datang kemudian, ketika kita mengatasi CSS. Anda mungkin menemukan pendekatan yang berbeda di tempat lain di web, tetapi HTML Dog berfokus pada praktek terbaik dari awal dan masuk ke kerangka pikiran untuk melakukan sesuatu dengan cara yang benar dari awal akan menyebabkan hasil yang lebih baik pada akhirnya.
Notepad adalah editor teks umum pada komputer berbasis Windows (biasanya ditemukan di bawah Programs> Accessories menu) dan Mac OSX komputer datang digabungkan dengan TextEdit tetapi setiap program yang memungkinkan Anda bermain-main dengan teks akan dilakukan.
Ketik ini ke editor teks Anda:
Ini adalah halaman web pertama saya.
Sekarang membuat folder bernama "html" di mana pun Anda ingin menyimpan file di komputer Anda dan menyimpan file sebagai "Ini adalah halaman web pertama saya.html".
Berhati-hatilah. Adalah penting bahwa perpanjangan ditentukan "html." - Beberapa editor teks, seperti Notepad, otomatis akan menyimpannya sebagai dinyatakan "txt.".
Anda juga perlu memastikan bahwa file Anda sedang disimpan sebagai teks biasa. TextEdit, misalnya, akan mulai file baru sebagai "teks Kaya", yang berisi banyak format tambahan, secara default. Dalam kasus tersebut, masuk ke preferensi dan pastikan Anda memeriksa "Plain text" pilihan format sebelum membuat file baru.
Untuk melihat file HTML, mereka bahkan tidak perlu di web. Buka web browser seperti Chrome, Firefox, Safari atau Internet Explorer dan di address bar, di mana Anda biasanya mengetikkan alamat web, ketik lokasi file yang baru saja disimpan (misalnya, "c: \ html \ myfirstpage.html ") dan kembali memukul. Atau, buka menu File browser, pilih Open, dan browsing untuk file.
Pow. Ada itu. Halaman web pertama Anda. Bagaimana menarik. Dan semua hal itu adalah sebuah kata yang diketik beberapa.
Kami telah mengatakan di sini untuk menggunakan dasar editor teks, seperti Notepad, tetapi Anda mungkin akan tergoda untuk menggunakan program perangkat lunak khusus seperti Adobe Dreamweaver.
Anda harus sangat berhati-hati ketika menggunakan program ini, terutama jika Anda seorang pemula, karena mereka sering melempar kode yang tidak perlu atau non-standar untuk "membantu" Anda.
Jika Anda serius ingin belajar HTML, Anda harus membaca tutorial seperti ini pertama, sehingga Anda setidaknya memiliki pemahaman dasar tentang apa yang sedang terjadi.
Software program seperti ini tidak akan memberikan kontrol yang sama atas sebuah halaman web coding dengan tangan.
Jika Anda memutuskan untuk menggunakan perangkat lunak kode-editing khusus, kami merekomendasikan satu di mana Anda masih coding dengan tangan. Mereka bisa, pada kenyataannya, sangat membantu, terutama lebih maju Anda menjadi, dalam hal kode syntax highlighting dan manajemen file. TagsStruktur dasar dokumen HTML termasuk tag, yang mengelilingi konten dan menerapkan makna itu.Mengubah dokumen Anda sehingga terlihat seperti ini:
<! DOCTYPE html><html><body>
Ini adalah halaman web pertama saya</ Body></ Html>Sekarang menyimpan dokumen lagi, kembali ke web browser dan kembali halaman tersebut.Munculnya halaman tidak akan berubah sama sekali, tapi tujuan HTML adalah untuk menerapkan makna, bukan presentasi, dan contoh ini kini telah didefinisikan beberapa elemen dasar dari sebuah halaman web.Baris pertama di atas, <! DOCTYPE html>, adalah deklarasi tipe dokumen dan memungkinkan browser tahu mana rasa HTML Anda menggunakan (HTML5, dalam hal ini). Ini sangat penting untuk tetap ini - Jika Anda tidak, browser akan menganggap Anda tidak benar-benar tahu apa yang Anda lakukan dan bertindak dalam cara yang sangat aneh.Untuk kembali ke titik, <html> adalah tag pembuka yang kicks hal off dan memberitahu browser bahwa segala sesuatu antara itu dan </ html> tag penutup adalah dokumen HTML. Hal-hal antara <body> dan </ body> adalah isi utama dari dokumen yang akan muncul di jendela browser.Tag Penutup</ Body> dan </ html> menempatkan dekat dengan elemen masing-masing (lebih pada unsur-unsur dalam beberapa saat).Tidak semua tag telah menutup tag seperti ini (<html> </ html>) beberapa tag yang tidak membungkus konten akan menutup diri. Garis-break tag misalnya, terlihat seperti ini: <br> - istirahat baris tidak menahan konten apapun sehingga tag riang duduk oleh lonely diri. Kami akan menemukan contoh-contoh ini nanti. Yang perlu Anda ingat adalah bahwa semua tag dengan konten antara mereka harus ditutup, dalam format tag pembuka → konten → tag penutup. Hal ini tidak, tegasnya, selalu persyaratan, tetapi itu adalah konvensi yang kami gunakan dalam tutorial ini karena itu praktek yang baik yang menghasilkan bersih, lebih mudah untuk memahami kode.Anda mungkin akan menemukan tag "menutup diri", dimana tag br, misalnya, akan terlihat seperti "<br />" bukan hanya "Close". Ini adalah sisa dari XHTML, bentuk HTML berdasarkan lain bahasa markup yang disebut XML. HTML5 jauh lebih dingin keluar dari XHTML dan akan senang dengan format baik. Beberapa pengembang lebih memilih salah satu cara, beberapa lebih memilih yang lain. Kami melemparkan koin dan memutuskan untuk tetap dengan versi sederhana.AtributTag juga dapat memiliki atribut, yaitu bit tambahan informasi. Atribut muncul di dalam tag pembukaan dan nilai-nilai mereka duduk di dalam tanda kutip. Mereka terlihat seperti <tag attribute="value"> Margarin </ tag>. Kami akan menemukan tag dengan atribut kemudian.Sekali lagi, tanda kutip tidak selalu penting tetapi itu adalah baik-praktik konvensi HTML menggunakan untuk konsistensi dan kejelasan. Kami sarankan Anda melakukan hal yang sama.ElemenTags cenderung tidak melakukan lebih dari menandai awal dan akhir dari suatu elemen. Elemen adalah bit yang membentuk halaman web. Anda akan mengatakan, misalnya, bahwa segala sesuatu yang ada di antara (dan termasuk) yang <body> dan </ body> adalah elemen. Sebagai contoh lain, sedangkan "<title>" dan "</ title>" adalah tag, "<title> mengacak-acak Stiltskin </ title>" merupakan elemen title.
Judul Halaman
Semua halaman HTML harus memiliki judul halaman.
SiteGround: Cepat, handal, hosting yang direkomendasikan.
Untuk menambahkan judul halaman Anda, mengubah kode Anda sehingga terlihat seperti ini:
<! DOCTYPE html>
<html>
<head>
<title> halaman web pertama saya </ title>
</ head>
<body>
Ini adalah halaman web pertama saya
</ body>
</ html>
Kami telah menambahkan dua elemen baru di sini, yang dimulai dengan tag kepala dan tag judul (dan melihat bagaimana kedua dekat ini).
Unsur kepala (yang yang dimulai dengan tag pembuka <head> dan diakhiri dengan </ head> tag penutup) muncul sebelum elemen body (dimulai dengan body dan berakhir dengan </ body>) dan berisi informasi tentang halaman . Informasi dalam elemen head tidak muncul di jendela browser.
Kita akan lihat nanti bahwa unsur-unsur lainnya dapat muncul dalam elemen kepala, tapi yang paling penting dari mereka adalah elemen judul.
Jika anda melihat dokumen ini di browser (menyimpan dan membuka kembali seperti sebelumnya), Anda akan melihat bahwa "saya halaman web pertama" akan muncul pada tab atau bar judul jendela (bukan wilayah kanvas yang sebenarnya). Teks yang Anda masukkan ke dalam antara tag judul menjadi judul dokumen (kejutan!). Jika Anda menambahkan halaman ini ke "favorit" Anda (atau "penanda", tergantung pada browser Anda), Anda akan melihat bahwa judul juga digunakan di sana.
Hal ini akan mudah untuk mengikuti jika Anda bekerja melalui setiap halaman lalu, untuk mengaplikasikan, segala sesuatu yang ditutupi dibawa bersama-sama di pekerjaan kita, sebelum pindah ke CSS Pemula Tutorial.
Hal utama yang perlu diingat, adalah bahwa HTML digunakan untuk makna dan CSS digunakan untuk presentasi. HTML tidak lebih dari konten terstruktur mewah dan format visual dari konten yang akan datang kemudian, ketika kita mengatasi CSS. Anda mungkin menemukan pendekatan yang berbeda di tempat lain di web, tetapi HTML Dog berfokus pada praktek terbaik dari awal dan masuk ke kerangka pikiran untuk melakukan sesuatu dengan cara yang benar dari awal akan menyebabkan hasil yang lebih baik pada akhirnya.
Notepad adalah editor teks umum pada komputer berbasis Windows (biasanya ditemukan di bawah Programs> Accessories menu) dan Mac OSX komputer datang digabungkan dengan TextEdit tetapi setiap program yang memungkinkan Anda bermain-main dengan teks akan dilakukan.
Ketik ini ke editor teks Anda:
Ini adalah halaman web pertama saya.
Sekarang membuat folder bernama "html" di mana pun Anda ingin menyimpan file di komputer Anda dan menyimpan file sebagai "Ini adalah halaman web pertama saya.html".
Berhati-hatilah. Adalah penting bahwa perpanjangan ditentukan "html." - Beberapa editor teks, seperti Notepad, otomatis akan menyimpannya sebagai dinyatakan "txt.".
Anda juga perlu memastikan bahwa file Anda sedang disimpan sebagai teks biasa. TextEdit, misalnya, akan mulai file baru sebagai "teks Kaya", yang berisi banyak format tambahan, secara default. Dalam kasus tersebut, masuk ke preferensi dan pastikan Anda memeriksa "Plain text" pilihan format sebelum membuat file baru.
Untuk melihat file HTML, mereka bahkan tidak perlu di web. Buka web browser seperti Chrome, Firefox, Safari atau Internet Explorer dan di address bar, di mana Anda biasanya mengetikkan alamat web, ketik lokasi file yang baru saja disimpan (misalnya, "c: \ html \ myfirstpage.html ") dan kembali memukul. Atau, buka menu File browser, pilih Open, dan browsing untuk file.
Pow. Ada itu. Halaman web pertama Anda. Bagaimana menarik. Dan semua hal itu adalah sebuah kata yang diketik beberapa.
Kami telah mengatakan di sini untuk menggunakan dasar editor teks, seperti Notepad, tetapi Anda mungkin akan tergoda untuk menggunakan program perangkat lunak khusus seperti Adobe Dreamweaver.
Anda harus sangat berhati-hati ketika menggunakan program ini, terutama jika Anda seorang pemula, karena mereka sering melempar kode yang tidak perlu atau non-standar untuk "membantu" Anda.
Jika Anda serius ingin belajar HTML, Anda harus membaca tutorial seperti ini pertama, sehingga Anda setidaknya memiliki pemahaman dasar tentang apa yang sedang terjadi.
Software program seperti ini tidak akan memberikan kontrol yang sama atas sebuah halaman web coding dengan tangan.
Jika Anda memutuskan untuk menggunakan perangkat lunak kode-editing khusus, kami merekomendasikan satu di mana Anda masih coding dengan tangan. Mereka bisa, pada kenyataannya, sangat membantu, terutama lebih maju Anda menjadi, dalam hal kode syntax highlighting dan manajemen file. TagsStruktur dasar dokumen HTML termasuk tag, yang mengelilingi konten dan menerapkan makna itu.Mengubah dokumen Anda sehingga terlihat seperti ini:
<! DOCTYPE html><html><body>
Ini adalah halaman web pertama saya</ Body></ Html>Sekarang menyimpan dokumen lagi, kembali ke web browser dan kembali halaman tersebut.Munculnya halaman tidak akan berubah sama sekali, tapi tujuan HTML adalah untuk menerapkan makna, bukan presentasi, dan contoh ini kini telah didefinisikan beberapa elemen dasar dari sebuah halaman web.Baris pertama di atas, <! DOCTYPE html>, adalah deklarasi tipe dokumen dan memungkinkan browser tahu mana rasa HTML Anda menggunakan (HTML5, dalam hal ini). Ini sangat penting untuk tetap ini - Jika Anda tidak, browser akan menganggap Anda tidak benar-benar tahu apa yang Anda lakukan dan bertindak dalam cara yang sangat aneh.Untuk kembali ke titik, <html> adalah tag pembuka yang kicks hal off dan memberitahu browser bahwa segala sesuatu antara itu dan </ html> tag penutup adalah dokumen HTML. Hal-hal antara <body> dan </ body> adalah isi utama dari dokumen yang akan muncul di jendela browser.Tag Penutup</ Body> dan </ html> menempatkan dekat dengan elemen masing-masing (lebih pada unsur-unsur dalam beberapa saat).Tidak semua tag telah menutup tag seperti ini (<html> </ html>) beberapa tag yang tidak membungkus konten akan menutup diri. Garis-break tag misalnya, terlihat seperti ini: <br> - istirahat baris tidak menahan konten apapun sehingga tag riang duduk oleh lonely diri. Kami akan menemukan contoh-contoh ini nanti. Yang perlu Anda ingat adalah bahwa semua tag dengan konten antara mereka harus ditutup, dalam format tag pembuka → konten → tag penutup. Hal ini tidak, tegasnya, selalu persyaratan, tetapi itu adalah konvensi yang kami gunakan dalam tutorial ini karena itu praktek yang baik yang menghasilkan bersih, lebih mudah untuk memahami kode.Anda mungkin akan menemukan tag "menutup diri", dimana tag br, misalnya, akan terlihat seperti "<br />" bukan hanya "Close". Ini adalah sisa dari XHTML, bentuk HTML berdasarkan lain bahasa markup yang disebut XML. HTML5 jauh lebih dingin keluar dari XHTML dan akan senang dengan format baik. Beberapa pengembang lebih memilih salah satu cara, beberapa lebih memilih yang lain. Kami melemparkan koin dan memutuskan untuk tetap dengan versi sederhana.AtributTag juga dapat memiliki atribut, yaitu bit tambahan informasi. Atribut muncul di dalam tag pembukaan dan nilai-nilai mereka duduk di dalam tanda kutip. Mereka terlihat seperti <tag attribute="value"> Margarin </ tag>. Kami akan menemukan tag dengan atribut kemudian.Sekali lagi, tanda kutip tidak selalu penting tetapi itu adalah baik-praktik konvensi HTML menggunakan untuk konsistensi dan kejelasan. Kami sarankan Anda melakukan hal yang sama.ElemenTags cenderung tidak melakukan lebih dari menandai awal dan akhir dari suatu elemen. Elemen adalah bit yang membentuk halaman web. Anda akan mengatakan, misalnya, bahwa segala sesuatu yang ada di antara (dan termasuk) yang <body> dan </ body> adalah elemen. Sebagai contoh lain, sedangkan "<title>" dan "</ title>" adalah tag, "<title> mengacak-acak Stiltskin </ title>" merupakan elemen title.
Judul Halaman
Semua halaman HTML harus memiliki judul halaman.
SiteGround: Cepat, handal, hosting yang direkomendasikan.
Untuk menambahkan judul halaman Anda, mengubah kode Anda sehingga terlihat seperti ini:
<! DOCTYPE html>
<html>
<head>
<title> halaman web pertama saya </ title>
</ head>
<body>
Ini adalah halaman web pertama saya
</ body>
</ html>
Kami telah menambahkan dua elemen baru di sini, yang dimulai dengan tag kepala dan tag judul (dan melihat bagaimana kedua dekat ini).
Unsur kepala (yang yang dimulai dengan tag pembuka <head> dan diakhiri dengan </ head> tag penutup) muncul sebelum elemen body (dimulai dengan body dan berakhir dengan </ body>) dan berisi informasi tentang halaman . Informasi dalam elemen head tidak muncul di jendela browser.
Kita akan lihat nanti bahwa unsur-unsur lainnya dapat muncul dalam elemen kepala, tapi yang paling penting dari mereka adalah elemen judul.
Jika anda melihat dokumen ini di browser (menyimpan dan membuka kembali seperti sebelumnya), Anda akan melihat bahwa "saya halaman web pertama" akan muncul pada tab atau bar judul jendela (bukan wilayah kanvas yang sebenarnya). Teks yang Anda masukkan ke dalam antara tag judul menjadi judul dokumen (kejutan!). Jika Anda menambahkan halaman ini ke "favorit" Anda (atau "penanda", tergantung pada browser Anda), Anda akan melihat bahwa judul juga digunakan di sana.