 Jadi, agenda hari ini akan menyebabkan html dan css sedikit lancar, sedikit lancar, sedikit lancar, sedikit lancar Jadi, semoga pada akhirnya, anda tidak akan faham segala-galanya Itu okey, tiada masalah, kami hanya mahu anda atau kurang-kurang tahu perkara ini dan memahami sedikit, itu adalah mulut yang lebih baik daripada apa-apa Jadi, kita akan mulai dengan apa yang adalah perubahan web? Kenapa? Kerana ini adalah salah satu perkara yang saya rasa perubahan web tersebut menghalangi, lalu memasukkan banyak jaga, tak ada orang faham Tetapi, produk perubahan yang sangat mudah Itulah proses web peluang Terdapat banyak cara yang boleh digunakan tetapi, produk perubahan web hanya adalah proses dan bagaimana anda mulai dengan perubahan web? anda perlukan komputer yang sudah ada, jadi itu 50% dan perubahan yang lain, anda juga ada anda perlukan sebuah kursi, ilmu yang terlalu sedikit Sebaik-baik saja, semua perkara lain yang kami minta anda memastikan adalah sebaik-baik saja perkara atau perkara yang akan membantu anda. Tapi jika kita membuangnya ke atas-atas, anda perlukan komputer kerana sebaik-baik saja komputer akan mempunyai editor teks dan editor teks adalah apa yang anda perlukan. Kerana pada akhir-akhir, kode hanya adalah sebaik-baik saja sebaik-baik saja sebaik-baik saja sebaik-baik saja. Jadi jika anda ada sesuatu yang dapat membuat sebaik-baik saja sebaik-baik saja sebaik-baik saja sebaik-baik saja sebaik-baik saja sebaik-baik saja. Jadi hari ini, editor teks yang kami akan membantu semua anda untuk memastikan adalah program ini disebabkan visual studio kode. Dan saya akan menjelaskan mengapa kami membuat semua anda memastikan program ini sebaik-baik saja. Sebenarnya, komputer anda sudah mempunyai editor teks. Sebenarnya, itu sangat vanilla. Itu sebaik-baik saja sebaik-baik saja sebaik-baik saja. Atau kadang-kadang jika anda memastikan itu, tetapi itu seperti dua warna. Satu dari perkara yang bahagian yang menjelaskan program-program yang terkenal dan pembelajaran akan menjelaskan adalah sesuatu yang kami ingin mempunyai typo. Jadi komputer anda tidak sangat kencang. Komputer anda mempunyai instruksi sebaik-baik saja. Untuk contohnya, saya rasa ini adalah bergantung kepada syarikat ini di Singapura kerana apa yang kita belajar? Kita belajar sesuatu yang dipunyai British English. Dan British English menyebabkan sesuatu seperti sebuah warna dengan sebuah U. Sebenarnya, sebuah warna ini datang dari Amerika. Jadi, mereka menyebabkan sebuah warna dan tidak sebuah U. Jadi, sebuah perkara ini, sebuah editor teks seperti Kode Visual Studio. Mereka melakukan sesuatu yang dipunyai di Singapura bermaksud sebuah tanda-tanda dan perkara yang bergantung kepada kode. Sebuah warna yang berbeza. Jadi, sebuah warna sebuah warna yang diperkenalkan adalah sebuah hina yang mungkin anda meletakkan sebaik-baik saja. Jadi, jika anda tidak mahu menggunakan kode VSCode CAN, tapi saya harap anda akan mempunyai kode yang baik untuk menempatkan tanda-tanda anda sendiri. Hanya saja. Jadi, HTML dan CSS adalah fondasi web. Dan saya akan masukkan ke dalam bahagian yang lebih tinggi. Tapi, sebenarnya, kalau anda tahu bahagian ini cukup untuk membuat web pertama, itu yang anda tahu. Jadi, saya menyebabkan ini sebuah teknologi dan saya mahu meminta maaf untuk mengambil tanda-tanda pada anda. Tapi, saya menyebabkan ini sebuah teknologi. Kerana ini sebenarnya mempunyai teknologi. Anda memulakan dengan HTML, yang adalah untuk mempengaruhi dan mempunyai konten anda. Jadi, anda dapat mempunyai... Bagaimana anda mempunyai tanda-tanda? Tidak ada format, hanya tanda-tanda. Tetapi, ia lama. Ia sangat susah untuk membaca jika segala-galanya sama, sama spesia. Ia hanya tanda-tanda. Ia dapat membaca, tapi sangat susah. Jadi, apa yang HTML melakukan adalah memberi kita cara untuk membuat tanda-tanda. Anda dapat membuat tanda-tanda menjadi tanda-tanda. Anda dapat membuat tanda-tanda menjadi paragraf. Dan terutamanya, untuk membuat anda mempunyai konten anda dalam cara yang penonton atau pengguna anda dapat menggunakan konten anda lebih baik. Jadi, itu sebabnya ianya fondasi. Sebab itu, ia adalah konten anda mempunyai konten anda. Selepas anda mempunyai konten anda, mungkin anda ingin membuat tanda-tanda anda lebih menarik. Anda ingin membuat tanda-tanda, tanda-tanda, tanda-tanda, apa-apa saja. Semua tanda-tanda ini datang di CSS untuk membuat tanda-tanda yang anda mempunyai konten anda. Yang terakhir adalah javascript yang tidak dihidupkan hari ini akan dihidupkan dalam javascript 2 dan 3 yang dihidupkan oleh Jun Sih di belakang. Jadi, sebab ini, javascript adalah sebuah langsung program. Jadi, tidak cukup untuk dihidupkan hari ini. Tapi ia boleh melakukan perkataan, untuk sebuah jasah, kadang-kadang, ia untuk mengalami kemahiran dan kemahiran. Jadi, ini adalah basic. Kadang-kadang anda akan mengawasi pesan atau servis untuk Contohnya Facebook, saya tidak suka Facebook, tapi... Hidup, ia dipakar. Tetapi... Facebook berikan sesuatu yang dipakar untuk user login. Apabila anda login, Facebook mengenai banyak tentang anda. Banyak data ini adalah anda sendiri memprovise Facebook. Jadi jangan mengusahkan. Tetapi semua data yang anda memprovise Facebook dibuat sesuatu supaya anda dapat menerimanya dan menunjukkan kepada anda. Jadi semua data ini tidak dibuat pada komputer sendiri. Ia dibuat pada database Facebook. Jadi Facebook, jika anda memikirkan Facebook sebagai sisi, Facebook perlu menghidupi database untuk menerimanya semua data tentang anda untuk menunjukkan kembali kepada anda. Tetapi, saya bermakna, jika sisi anda adalah sesuatu yang sedikit lebih mudah, seperti mungkin sisi anda personal, anda tidak benar-benar perlukan orang untuk menunjukkan ke sisi anda personal. Kemudian, sisi anda tidak mempunyai database, ia okey, sisi anda masih boleh mempunyai pada web. Sebab itu, sisi anda mempunyai stack, stack di atas-atas. Jadi, tanpa sisi anda, tanpa sisi anda, sisi anda tidak mempunyai web. Sebab itu, sisi anda adalah database. Sebab itu, sisi anda memperkenalkan stack. Jadi, hari ini saya menjelaskan, kami akan menggunakan Studio Code sebagai editor kode. Bagaimana semua orang mempunyai account GitHub? Jika anda tidak mempunyai, sila beritahu saya. Ada lagi kode yang dikorek. Jika anda mempunyai, anda mungkin tidak mempunyai kode yang dikorek. Kode dikorek adalah, saya panggil kode dikorek online, kerana anda dapat membuat semua kode web yang dikorek pada masyarakat anda. Tetapi, seperti anda semua mempunyai pengalaman, anda mempunyai Windows, anda mempunyai Mac. Saya tidak tahu jika ada sesiapa, anda mempunyai Linux, tetapi jika anda mempunyai Linux, bagaimanapun, saya sangat menghargai. Jadi, semua keadaan yang berbeza untuk membuatnya berbeza, adalah sangat berbeza. Apabila kita memakai keadaan online, ia memastikan bahawa semua anda mempunyai keadaan yang sama. Jadi, ia untuk keadaan yang berbeza. Jadi, anda mungkin tidak dapat mengajar kode dikorek tidak dikorek hari ini. Jadi, pertama pertanyaan sekarang, anda rasa ada keadaan yang berbeza antara internet dan dunia dunia? Ini perkara yang sama. Saya tanya ini setiap kali tidak menjawab. Jadi, saya menjawab. Ini perkara yang berbeza. Internet adalah fizikal. Internet adalah sebuah network yang menghubungi semua keadaan yang berbeza. Maksudnya, semua keadaan anda akan semua menghubungi keadaan TW hari ini. Dan keadaan TW adalah menghubungi keadaan yang berbeza. Jadi, internet sebenarnya fizikal, bermaksud ia membuat keadaan yang berbeza. Ini adalah keadaan yang terbesar. Saya fikir bahawa ini adalah keadaan yang terbaik menarik dunia. Ini adalah keadaan yang berbeza membuat keadaan yang berbeza. Kemudian, kita mempunyai data ini, exchange ini. Ini adalah keadaan yang berbeza. Saya tidak tahu jika anda mungkin keadaan yang berbeza dan tidak pernah melihat perkara ini sebelumnya, tetapi jika anda melihat keadaan yang berbeza, anda cuba menghubungi sesiapa-siapa. Kemudian, mereka akan selalu menjadi seorang perempuan dan perempuan yang berbeza. Kemudian, perempuan akan berkata, oh, bolehkah anda menghubungi Mr. Robert Sir, dan dia akan berkata, ok, Mr. Robert Sir, dan klik. Ini adalah konsep yang sama. Itu adalah cara perubahan internet dikawal dengan orang lain. Itu sama seperti operator yang saya berkata, berkata, lebih besar. Bersama data exchange. Kemudian, kita mempunyai telcos kita. Jadi, anda mempunyai kabel kawal kabel, kabel fiber, semua itu. Telcos dikawal di antara internet. Kita mempunyai tel, Starhub, 5 mungkin. Dan kemudian, ini akan lebih popular. Ini adalah perempuan yang datang kepada kita sebagai seorang perempuan di rumah kita, perusahaan kita, kabel ethernet. Sudah tentu hari ini, kita juga mempunyai Wi-Fi. Jadi, ini, ini semua, semua perkara fizikal ini, ini adalah apa yang menghubungi komputer anda untuk servis Facebook di mungkin Amerika, mungkin beberapa, anda ada seorang kawan di Argentina, saya boleh hantar e-mail kepada mereka, atau menghubungi kepada network yang sama. Planet ini besar, network yang sama, network yang sama. Itu internetnya. Jadi, ini gambar Submarine Mac. Jadi, saya tidak tahu jika anda ingat apa yang berlaku beberapa tahun lalu, ada sebuah kelebihan besar, di sekeliling kita, saya rasa di sekeliling kita, dan kemudian, salah satu kabel kelebihan besar telah dibuat. Tetapi, kita semua masih boleh menghubungi internetnya, hanya sangat rendah. Dan itu, itu, itu yang menarik tentang internetnya, sangat mudah. Semua data ini, seperti yang anda lihat, saya menghubungi informasi ini dari web. Jadi, dengan cukup, bekerja dan kelebihan, dan setiap kali, anda sebenarnya dapat menemukan keadaan kelebihan ini. Mereka seperti berada di sekeliling. Dan jika anda merasa, terutamanya, anda dapat menghubungi kelebihan besar, kelebihan boss, kelebihan siapa-siapa, kemudian, anda akan menghubungi kelebihan ini. Tetapi, jika anda menghubungi kelebihan ini, jika anda menghubungi dengan sebuah kumpulan kelebihan kelebihan, cuba menghubungi semua kelebihan pada masa yang sama, anda tidak boleh menghubungi internetnya. Anda tidak boleh. Anda memiliki perjalanan. Anda hanya akan berlalu seperti ini. Mereka seperti, mungkin di sini, kenapa internetnya sangat berlalu hari ini? Kerana anda memiliki kabel, tetapi mereka masih dapat menghubungi internetnya. Kerana internetnya dibiliki untuk menjadi kelebihan ini. Kemudian, semua kelebihan ini, ini adalah informasi yang menghargai. Singapura ada beberapa kelebihan ini. Bila bukti itu tidak diberikan sebab sebuah kelebihan, anda tidak mahu beri beritahu, saya akan beri beritahu. Hei! Ini adalah tempat di mana internetnya, tidak, mereka hanya menghubungi di bawah, ia adalah kelebihan non-deskip. Tetapi, ia adalah informasi kelebihan. Jadi, lagi, BOM1 internet mungkin menghargai, tetapi ia tidak akan menghubungi. Begitulah di internet 1958. Kerana lama-lalu, sebelum komputer ini berlalu saya bekerja di komputer ini, orang bekerja di komputer ini. Apabila saya bekerja di komputer ini, pada tahun 1950, kamu sebenarnya bekerja di komputer ini, kerana sangat besar. Dan komputer ini, tidak seperti sekarang, kita akan berkata, kamu berada di Mac, dan kemudian kamu mahu hantar mesej, atau kamu mahu hantar apa-apa untuk masin Windows. Kamu boleh, mereka mencari untuk komputer kamu untuk menghubungi setiap orang, kamu tidak fikir berdua tentangnya. Setiap komputer, menerima sistem yang berbeza. Jadi, jika kamu mahu memperkenalkan program atau satu komputer, kamu tidak dapat memperkenalkan komputer lain. Orang-orang yang menghubungi komputer lain, harus memainkan, oh, program ini sangat menarik. Kamu boleh membuat fungsi ABC, kembali ke komputer mereka sendiri, dan memperkenalkan komputer dari scratch, kerana tidak ada cara untuk komputernya berbincang dengan orang lain. Jadi, beberapa orang yang merah, seperti, ini adalah cara resursi. Kenapa saya memperkenalkan kerja? Jadi, mereka harus memperkenalkan cara untuk komputer untuk menghubungi komputer lain. Jadi, ini bermula pada tahun 1958. Dan, itu akhirnya apa-apa menjadi internet hari ini. Web dunia dunia, yang adalah WWW, dibuat pada tahun 89. Ia masih lebih awal daripada kamu, tetapi lebih mudah daripada kamu. Dan ia dibuat oleh satu orang, kerana dia yang membuat ini tiga teknologi, yang membuat besi WWW. Jadi, protokol untuk, yang adalah HTTP, yang adalah apa yang kamu menyesuaikan di depan URL-nya setiap kali. Sekarang, tiada siapa menyesuaikan HTTP. Browser membuatnya untuk kamu automatikal. Tetapi, ini protokol yang menolong browser-nya untuk memperkenalkan informasi. Protokol adalah hanya sebuah guidelines yang semua devices memperkenalkan, ini adalah bagaimana kita memperkenalkan dengan orang lain. Ini sebabnya, ini sebabnya, semua telefon, komputer, semua berbeza, menggunakan sistem berbeza. Tetapi, apabila kamu memperkenalkan internet, bolehlah. Kerana semua orang memperkenalkan cara yang kita memperkenalkan informasi antara bahan-bahan ini, protokol standardis. HTTP, itu salah satu protokol. Ada banyak protokol lain dalam industri tech, tetapi ini yang paling common, saya percaya. URI, yang biasanya, kita dengar sebagai URL. Uniform resource link. URL itu hanya link-nya. Jadi, unik adalah benar-benar unik. Kerana setiap link, kamu tidak dapat memperkenalkan dua jenis rancangan dari rancangan yang sama. Ini tidak berlaku. Baguslah, jika kamu cuba memperkenalkan file-nya di komputer, jika kamu menyebabkan dinosaur, kamu tidak boleh memperkenalkan nama dinosaur. Komputer akan memberikan jenis rancangan ini. Kamu sudah mempunyai nama dinosaur. Kamu mahu mempunyai nama dinosaur bracket 1? Sebab itu bagaimana komputer memperkenalkan setiap file-nya pada rancangan kamu. Unik nama file-nya. Kerana apabila ini memperkenalkan network global, setiap resource yang dapat diperkenalkan di web itu unik. Sebab itu, kita tahu apabila saya mahu memperkenalkan file-nya Facebook saya, saya memperkenalkan foto saya dan staf saya, dan tidak kamu. Kerana link untuk foto saya adalah unik, dan apabila saya memperkenalkan akun saya, nama user saya, itu semua unik. Jadi ia memastikan saya memperkenalkan resource yang sama setiap kali. Kita tidak akan memperkenalkan orang lain. Sebab itu, apabila kamu memperkenalkan, apabila kamu cuba memperkenalkan akun baru, kamu tidak boleh memperkenalkan akun yang sama seperti orang lain. Pada prinsipa yang dikembangkan, ia berada di atas ini. Dan HTML itu apa yang kita akan belajar hari ini, yang adalah language markup untuk memperkenalkan konten kamu. Jadi, nama orang ini adalah Tim Berners-Lee yang memperkenalkan semua tiga perkara ini. Jika kamu suka bukti, semua ini ada di Singapura National Library Board. Sebenarnya, seperti Malaysia, saya rasa Singapura mempunyai salah satu sistem yang terbaik di dunia. Saya sangat jelas, tapi ya, jika kamu menangis semua ini ada di Singapura National Library Board. Jadi, bagaimana bagaimana kita boleh memperkenalkan ini? Kerana kita boleh mulakan dengan melakukan sesuatu kerana saya telah bercakap selama lama. Jadi, semua orang yang memperkenalkan file ini adalah instruksi yang kedua. Mungkin saya boleh menunjukkan jika kamu belum memperkenalkan ini. Jika kamu sudah memperkenalkan ini, bagus. Tapi jika kamu tidak apabila kamu berada di atas ini, dan kamu klik bot Green ini, kamu boleh memperkenalkan Zip. Jadi, jika kamu tidak memperkenalkan ini, kamu boleh memperkenalkan Zip. Mereka harus menyelamatkan di mana-mana dan melakukan komputer kamu. Saya akan memperkenalkan ini juga. Memperkenalkan Qnally. Jika kamu ingin menguasai resolusi, ia sangat kecil. Saya tidak boleh memperkenalkan sublim, saya boleh memperkenalkan teks, tapi saya tidak boleh memperkenalkan perut. Saya tidak suka ini. Tapi, ah, saya tidak suka. Okey. Kamu mungkin perlu memperkenalkan UI juga. Tidak, tidak. Tapi, kamu tidak memperkenalkan VSCode? Tidak. VSCode boleh? Saya rasa boleh. Apa pun. Jadi, kamu semua akan mempunyai folder yang disebut web-dash-intro-dev-master, dan memperkenalkan folder di VSCode. Jadi, boleh saya... Mana giliran? Okey, boleh saya membantu? Boleh saya membantu mereka memopongnya di VSCode. Oh, oh. Jika lembaga ada di VSCode? Ya. Orang. Jadi, jadi, kamu memperkenalkan folder, kamu memperkenalkan folder, kan? Mana ini? Di mana? Apa? Zip file yang anda download? Saya tidak dapat melihat yang mana. Oh, okey. Tunggu. Lama kedua, maaf? Lama kedua? Ya. Okey, saya melihat foto rebit yang betul. Ya. Sebab saya tidak perlu menyebabkan keadaan saya. Saya tidak dapat memandangkan keadaan saya. Saya sedang menyebabkan keadaan saya. Tapi tidak mengajar saya. Awak dapat memandangkan aplikasi di komputer anda? Tidak. Saya tidak dapat memandangkan keadaan saya. Ini kerja di atas. Okey, saya tak mengapalah. Kita dapat melihat ini. Bila? Ya. Ini adalah plan kembang untuk kami. Bila ada keadaan ini berlaku. Sebaiknya, anda perlu memandangkan aplikasi di komputer anda. Ya. Jadi, apa-apa saja? Bolehkah anda memandangkan keadaan saya? Memandangkan keadaan saya. Jadi, saya hanya perlu memandangkan keadaan saya. Okey, keadaan anda akan sedikit berbeza daripada tempat lain. Jadi, saya hanya akan memandangkan keadaan saya. Awak okey? Jadi, anda boleh memandangkan keadaan saya. Bila kamu mötak-motor itu? Ooo... которой mereka ingat? Bersiaplah dengan film чahan. Tempat dawn близ. Kemudian pergi ke botون blendyn. Met Everyone. Jadi, kamu perlu memandangkan picked. September demande. Eighth al Pixel. K viens-k viens, cekmat. Ehh, saya m134 толak dalam GL. Apa dengan kaki pola? Kaki opang Bolehkah kamu menelitkan kaki ini? Canakah kamu menelitkan kaki ini? Oleh ini? Oleh ini di dalam starter? Oleh ini di sini, ke bawah Oh kita menelitkan kaki ini Oh maaf, bukan kaki ini Ini adalah kaki pertama Bolehkah saya menerima sisa kamu? Ia di-download, ia di-download. Jadi saya akan... Ia di-download folder. Jadi anda mempunyai code VS? Ia sepatutnya sudah di-punyai. Saya boleh mempunyai code VS. Tak mengapa. Saya akan mempunyai code VS. Saya tidak mempunyai ini. Jadi ini adalah editor code yang saya cuba katakan. Jadi sebenarnya, anda mempunyai nodepad sebelumnya? Jadi ini adalah nodepad, tapi ini mempunyai fitur adil. Jadi ia membantu kerana apabila kita cuba mempunyai code, kerana ia mempunyai komand yang sangat spesifik Jika anda mempunyai nodepad, anda tidak boleh beritahu di mana anda membuat typo. Apabila ini digunakan, saya boleh menunjukkan bahawa... ...dia mempunyai warna berbeda. Jika anda mempunyai sesuatu yang salah, warna akan berubah. Jadi ia lebih mudah untuk anda menjelaskan. Sebenarnya, ini adalah pilihan, tapi kami menemukan yang sangat bermanfaat. Untuk membuatnya lebih mudah untuk anda menjelaskan. Saya membuat ini untuk hidup. Tapi jika anda minta saya tanya untuk mengubah nodepad itu, saya akan beritahu bahawa produktiviti saya adalah... ...sebab saya mempunyai sesuatu yang salah sepanjang masa. Saya akan menggunakan ini untuk membantu saya... ...sebab, contohnya, kadang-kadang saya akan lupa... ...atau saya mempunyai warna dan saya mempunyai warna. Tapi saya tidak melihatnya sehingga... ...sehingga saya mempunyai warna dan saya mempunyai warna. Jadi ia membantu dengan cara itu. Sebenarnya, saya akan beritahu, jika anda mempunyai warna... ...saya tidak boleh mempunyai warna. Tapi saya tidak mempunyai warna. Sebenarnya, saya rasa ini akan membantu. Sebenarnya, saya akan mempunyai warna. Sebenarnya, saya akan mempunyai warna. Apabila anda membuat ini lebih daripada... ...awak memperkenalkan bahawa anda memperkenalkan bahawa... ...awak tidak mahu kembali. Ya, Mama. Bagaimana hidup? Sebenarnya, saya telah mendengar sgml. Bagaimana perbezaannya? Bagaimana perbezaannya? Bagaimana perbezaannya? Sgml berdasarkan sgml. Tetapi... ...sangat lebih seronok daripada sgml. Jadi, ada sesuatu yang anda ingat... ...sgml yang anda mempunyai. Contohnya, semuanya yang anda mempunyai... ...punyai tekanan. Sgml yang tidak seronok daripada sgml. Tetapi ya. Ya, okey. Tapi sekarang tiada siapa menggunakan sgml, kan? Saya rasa... ...sangat... ...sgml adalah sebuah tarik maka-language. Sgml adalah sebuah tarik maka-language. Tetapi... ...sgml adalah sebagian yang anda memakai... ...sgml adalah sebuah tarik maka-language. Saya rasa... ...sgml adalah sebuah tarik maka-language. Mungkin. Tapi, ia tidak... ...sgml adalah tidak berlaku. Tapi, kadang-kadang ia adalah... ...sgml adalah sebuah tarik maka-language. Ya, ia sangat berlaku. Jadi, mungkin ia akan membuat lebih senang daripada sgml. Untuk sekarang, ia hanya memasang. Kadang-kadang ia menakutkan. Bagaimana dengan tarik maka-language? Bagaimana dengan tarik maka-language? Ia memasangkan tarik maka-language, kan? Sebenarnya saya memasangkan. Saya tidak tahu kenapa saya memasangkan. Saya akan memasangkan. Tidak, tidak berlaku. Tidak. Kenapa ia tidak disini? Tidak. Tidak. Tidak. Kenapa ia tidak disini? Saya tidak berkenaan. Tidak seperti ini. Ya, saya tidak memasangkan. Saya minta maaf. Saya akan memasangkan. Saya akan memasangkan. Saya akan memasangkan. Saya akan memasangkan. Saya akan memasangkan. Tidak. Ya, ia sangat lebih baik. Jadi jika anda melihat ini, ia memang semifamili, bukan? Ya, ya. Kamu mahu He Ma? Kerana hidup ialah baik, sangat baik. Okey, saya rasa banyak orang sedangkan. Jadi saya akan bergerak. Jadi, banyak orang akan mempunyai sain bar yang mempunyai semua file dalam folder web dev intro master. Ada satu folder yang dipanggil images yang mempunyai beberapa image yang di-download dari internet. Kamu akan mempunyai file index.html dan kamu akan mempunyai file styles.css. Jadi perkara pertama yang kita akan melihat adalah, ini bukan set-up yang sangat baik. Saya minta maaf, kamu mesti melihat belakang saya. Tapi... Ya. Ya, saya tidak... Ya, saya juga. Kamu berdua sedikit lebih menarik, tapi... Kamu dapat kehidupan kecil, bukan? Ya, saya sedangkan. Tapi kamu ada kehidupan, bukan? Ya. Jadi saya perlu buat ini. Dan... Kamu berdua sedikit lebih menarik. Biar saya lihat. Biar saya lihat. Yang di-download di dalam sini. Jadi ini... Ya, masalahnya tidak dapat di-adaptasi. Kamu perlu mempunyai file. Ya, saya mempunyai file untuk menghidupkan file. Ya, saya tidak... Kondaktional nama saya... Bagaimana dengan menghidupkan file? Menghidupkan file? Saya tidak pernah cuba menghidupkan file. Jadi... Bagaimana kamu dapatkan file itu? Saya menggunakan file ini. Saya perlu menggantikan file yang saya pernah melihat... dan saya dapat menghidupkan file Amazon. Tentulah. Kamu tidak mahu saya menggunakan file. Ya, saya tidak mahu. Semua ini mesti mengubah servis. Jika sebenarnya ini akan mengubah, saya akan mengubah servis setiap tahun. Mereka akan terima beberapa menit. Tapi mereka masih mengubah servis. Mereka tidak boleh mengubah servis. Mereka tidak boleh mengubah servis. Mereka tidak boleh mengubah servis. Mereka akan membuat kamu mengubah servis. Ya, saya sudah mengubah servis. Ya, saya sudah mengubah servis. Ya, pergi. Bagaimana dengan membuatnya kecil? Jadi... Kamu akan melihatnya berbeza daripada semua orang lain... sebabnya ia di sini... tetapi ia seperti... Jadi ia berlalu seperti itu? Jadi kamu akan mempunyai... pembentangan yang berbeza. Dan kamu akan mempunyai... Ia adalah yang sepatutnya? Ya. Ia adalah yang mencari? Ia adalah yang mencari? Untuk kamu, ia mungkin... ia mungkin mempunyai sebabnya ia mempunyai... Ia adalah sebabnya ia mempunyai... Ya, ia mempunyai... Ia adalah perkara yang sama. ProBoss! ProBoss! Saya sangat gembira kamu boleh menikmati kita. Kamu boleh membantu saya... membantu pereka untuk mengambil peratuan mereka. Okey? Terima kasih, Boss. Okey, saya rasa yang paling kita... boleh menikmati peratuan ini. Peratuan peratuan. Sebabnya, kita minta kamu... mengambil peratuan VSCode... atau beberapa perkara lain... adalah kerana... warna penting. Saya akan jelaskan nanti. Jadi ini adalah bagaimana peratuan... peratuan html... nampak seperti itu. Kerana... ini... pada akhirnya... ini hanya pembentangan. Ia hanya pembentangan dengan... pembentangan yang menarik... atau membutuhkan... dan seperti... pembentangan... pembentangan... tetapi pada akhirnya... pembentangan. Pembentangan dengan default... dapat membuka peratuan tax. Jika kamu cuba membuka peratuan tax... pembentangan kamu akan... mengembangkan peratuan tax. Jadi... semua peratuan ini... seperti yang saya menyebabkan... cara untuk... format... peratuan kamu. Sekarang... peratuan html... mempunyai... peratuan yang berbeda. Dan saya akan menyebabkan... kembali... kembali... untuk... lebih banyak referensi. Peratuan. Peratuan. Peratuan. Peratuan. Jadi ini adalah peratuan... yang kamu lihat di depan kamu... adalah peratuan basic... peratuan html. Peratuan... biasanya... kita menggunakan pembentangan... apabila peratuan... digunakan oleh peratuan. Jadi... peratuan... adalah... peratuan... ini... biasanya peratuan... saya tidak tahu... peratuan sikap... untuk peratuan peratuan ini... tapi saya akan menyebabkan peratuan peratuan... kerana mereka nampak... lebih daripada peratuan. Jadi ini adalah peratuan... dan semua peratuan... antara peratuan... yang digunakan sebagai peratuan html. Jadi sesuatu seperti ini. Jadi... antara peratuan html... untuk peratuan. Dan ada banyak peratuan ini yang anda boleh menggunakan. Peratuan ini menggunakan peratuan... disebabkan FIGAR. Tapi anda tahu... peratuan ini... adalah antara peratuan ini... ada peratuan pembentangan... dan kemudian ada peratuan peratuan. Jadi peratuan peratuan pembentangan... dan peratuan peratuan... adalah peratuan tambahan... betul? Jadi... peratuan itu... peratuan... adalah... peratuan itu adalah... peratuan karakteristik. Dan peratuan yang berbeda... ada banyak peratuan. Kita tidak akan belajar dari mereka. Kita hanya perlu tahu... bahawa ada banyak peratuan yang berbeda... untuk banyak peratuan yang berbeda. Dan setiap peratuan... akan mempunyai... peratuan... yang bergantung kepada mereka. Contohnya, peratuan peratuan... yang kita akan melihat nanti. Ada peratuan pembentangan... kerana anda perlu beritahu peratuan... di mana peratuan itu. Ada juga... peratuan ALT... yang sangat-sangat... kerana jika peratuan tidak menerang... anda tidak mahu menunjukkan peratuan pengatuan... dan kemudian peratuan... dan peratuan anti. Jika anda menulis peratuan ini, anda dapat... bergantung. Jadi, ini menyebutkan... peratuan jatuh. Jadi, jika peratuan tidak menerang... anda dapat menyebutkan... peratuan... peratuan... peratuan. Jadi, ia sangat penting menghadapi peratuan ini. Peratuan penutup... adalah sebuah peratuan lain, tetapi lagi peratuan yang seperti penutup. Jadi, Ada apa-apa antara pakaian yang digunakan sebagai konten. Maksudnya, nesting adalah mungkin. Maksudnya, pakaian dan kaptennya dilatihkan dalam pakaian yang lain yang dipanggil FIGAR. Jadi, FIGAR adalah pakaian dan kapten yang digunakan. Tidak mengapa. Jika anda melihat pakaian, Tidak mengapa. Sebab pakaian tidak mempunyai konten. Pakaian yang dipanggil VODELEMEN. Pakaian yang paling common adalah VODELEMEN. VODELEMEN hanya bermaksud tidak ada konten. Kerana konten, Pakaian yang digunakan dari tempat yang dilatihkan. Tetapi kontennya tidak adalah dalam pakaian. Jadi, pakaian tidak perlu pakaian. Semua yang mempunyai konten, Pakaian akan mempunyai pakaian. Tetapi, pakaian tidak mempunyai konten. Jadi, itu adalah perbezaan. Jadi, Pakaian ini, Pakaian sebenarnya akan nampak seperti ini. Jadi, seperti, Pakaian ini, Pakaian ini, Pakaian dan pakaian ini, Pakaian yang akan dikawal dari kota itu. Kiten bertanya, Apa yang dikawal di luar di sini pada tengah hari? Saya juga tidak tahu. Jadi, kota struktur, HTML dokumen, Anda akan menerima bahawa ada indentasi. Indentasi, Selain banyak lagi, langgan program yang lain adalah opsi. Tetapi, ia membantu untuk anda mempunyai sebagai pemeriksaan, apa yang dikawal di dalam kota. Jadi, ini adalah untuk bantuan visual. Jadi, terutama, akan selalu ada html tag. Kerana anda ingin beritahu pakaian bahawa ini adalah file html. Baik. Pada kemudian, anda mempunyai sesuatu yang digunakan dan sebuah bodi. Saya suka html kerana ia seperti bahasa Inggeris. Dokumen mempunyai html. Dokumen anda mempunyai bodi. Jadi, html di bawah bodi. Jadi, ia sangat manusia. Apa yang berlaku? Jadi, saya kata elemen dapat mempunyai berita yang berlainan. Jadi, ini adalah pilihan. Jika anda ingin mengenai file html yang telah digunakan, html dokumen selalu berlainan. Ini seperti informasi meta. Anda akan beritahu pakaian bahawa ini adalah pilihan dokumen. Ini adalah pilihan identif yang anda selalu mempunyai. Mereka tidak pernah memulai ini dengan tangan. Kerana biasanya, apabila kita memulai projek baru, ia memulai file html yang telah digunakan dengan file html yang telah digunakan, tetapi ia memulai semua ini. Tapi jika anda memulai sebuah hari, saya sangat lapar hari ini. Saya akan memulai html yang telah digunakan dari bawah bodi. Kemudian anda akan memulai pilihan yang pertama. Jadi, html yang telah digunakan adalah pilihan yang terbesar dan pilihan yang terbesar. Ada banyak attribute tetapi saya mahu memaksa satu attribute particular ini. Jika anda bergerak, anda membuat pilihan web sendiri. Bagaimanapun yang anda lakukan, sila ingat untuk memulai attribute language. Attribute language hanya menggunakan pilihan yang lain, tetapi ia penting untuk memulai html yang telah digunakan sebab bagaimanapun orang menggunakan Google Chrome sebagai pilihan. Banyak daripada anda, beberapa daripada anda tidak. Jika anda menggunakan pilihan yang tidak terbesar dengan pilihan. Adakah anda memiliki pilihan yang Chrome akan meminta anda? Pilihan yang ini mempunyai untuk berada di Rusia. Adakah anda mahu memutuskan Rusia? Jika anda memikirkan bagaimanapun, bagaimanapun Google tahu ini adalah pilihan di Rusia. Apa yang berlaku? Sebab pilihan itu mungkin mempunyai lang L-A-N-G adalah R-U. Jadi, pilihan menggunakan informasi ini untuk pengalaman pengalaman dan pilihan index dan sebagainya. Tetapi Google Chrome sebenarnya menggunakan ini untuk sebab Google Translate adalah pilihan Google sendiri. Jadi, mereka dapat melakukan itu. FireFox mungkin tidak. Saya rasa jika anda menggunakan Microsoft Edge, mungkin mereka minta anda menggunakan Bing Translate. Saya tidak yakin. Tapi mereka menggunakan ini supaya mereka dapat mengenangkan pengalaman mereka. Itu yang Google membuat. Dan ini sebab langgan ini mempunyai. Saya tidak fikir anda mungkin salah, tetapi anda mungkin pernah menggunakan screen readers sebelumnya. Tapi screen readers mempunyai pelanggan dari sebelumnya adalah seperti, mari kita memasukkan pilihan yang berlaku. Dan mereka cuba menggunakan F-R. Mereka cuba menggunakan pilihan French speakers. Jadi, anda tidak melakukan ini. Kadang-kadang mereka akan cuba memperkenalkan pilihan yang berlaku. Pilihan French yang menggunakan pilihan bahagian bahagian bahagian bahagian. Mereka tidak menggunakan pilihan salah. Jadi, langgan ini juga penting untuk kebenaran kebenaran. Jadi, itu sebab saya memilih pilihan yang berlaku. Tapi banyak pilihan juga mempunyai pilihan. Jadi, pilihan yang berlaku lagi, adalah atas pilihan HTML. Ada banyak pilihan yang anda boleh memasukkan di sini. Tapi, mereka biasanya mempunyai metadata, bermaksud, mereka menggunakan informasi tentang pilihan. Tapi, tidak sepatutnya informasi yang kelihatan. Pilihan yang paling penting yang perlu digunakan dalam pilihan yang berlaku, adalah pilihan yang anda memiliki. Jadi, pada pilihan HTML, anda mempunyai pilihan dan ada deskripsi nama meta. Kenapa ini sangat penting? Sebab, apabila anda mencari sesuatu pada Google atau pada pilihan yang lain, anda akan mendapat pilihan pilihan. Pilihan ini mempunyai pilihan dan pilihan pilihan. Pilihan yang mereka menunjukkan adalah apa yang Google dapat membaca pilihan anda. Jadi, jika pilihan anda tidak mempunyai pilihan, Google tidak akan menunjukkan. Jadi, apabila anda mempunyai pilihan yang berlaku, jika anda mempunyai pilihan dan Google tidak dapat mencari pilihan, ia benar-benar berlaku. Pilihan ini. Jadi, pilihan yang sangat penting. Sekarang, saya rasa yang anda mempunyai sesuatu yang sangat generis, seperti, saya tidak tahu, pilihan atau sesuatu. Jadi, apa yang saya mahu anda buat sekarang adalah apapun pilihan yang anda menggunakan, anda boleh cuba memilih pilihan? Jadi, jika anda menggunakan ialah Mac, saya sangat mahu mengenai Mac pertama, tetapi konsep adalah sama. Bagaimana anda boleh memilih pilihan ini, dengan pilihan? Jadi memilih pilihan dengan Chrome atau Firefox atau apa-apa pun, anda memibatkan. würde путuk.黄 pilihan? Lalu, saya perlu pergi dan mengelulkan pilihan di mana-mana saja, menunggu semua orang, cuba memilih pilihan.毅 itu betul, sebuah penuh warna tanah ini benar-benar tanah, Jika saya tidak ingat salah, jika saya press play, saya akan tanya sesuatu untuk berkongsi. Dinosaur. Selamat. Apabila anda selamat, anda akan menunggu. Jadi anda tahu ia selamat, kan? Jadi ia seperti hidup. Jadi jika anda sekarang ada dinosaur, tidak ada dinosaur, jadi tidak ada dinosaur. Jadi setiap kali anda lakukan sesuatu, jadi ia sebenarnya seperti dengan proses yang diperkenalkan, anda juga memperkenalkan. Jadi ini hanya berkongsi? Ya. Okey, terima kasih. Jadi jika semua orang telah melihat ini, tolong tengok di atas atas. Ia berkongsi HTML5 di atas atas. Itu adalah tempat anda yang terkenal. Jadi tolong jangan memikirkan ini sebagai HTML template. Tolong mengubahnya ke sesuatu yang lain. Saya akan mengubahnya ke... Saya tidak tahu. Dinosaur berkongsi. Jika anda mengubahnya, dan satu perkara yang anda ingat selama hari ini adalah setiap kali anda membuat perubahan ke kawasan anda. Jika anda ingin melihatnya, anda harus mengubahnya. Pada masalah yang paling terkenal, dan saya masih mengubahnya hari ini, saya mengubah-ubah-ubah hari ini, saya tidak pernah mengubah. Kemudian saya mengubah browser saya selama 5 minit, tidak dapat faham kenapa saya mengubah kawasan saya. Kerana saya tidak pernah mengubah kawasan saya. Jadi tolong mengubah kawasan anda. Pada masalah untuk mengubah kawasan anda menggunakan keyboard pada Mac, adalah Command-S. Jika anda menggunakan Windows, anda boleh menggunakan Control-S. Tetapi jika anda merasa bahawa kawasan anda perlu berusaha, anda juga boleh mengubahnya hari ini. Jadi kawasan anda juga boleh mengubah perkara yang sama, hanya mengubahnya. Selepas anda mengubahnya, Dinosaur berkongsi. Anda sepatutnya melihat bahawa ini mengubahnya. Jadi tolong mengubahnya ke sesuatu yang lain daripada HTML template. Kerana HTML template adalah nama terbaik. Kenapa? Pada masalah yang penting, adalah kawasan kedua di sini, nama terbaik, nama terbaik, nama HTML template. Ini adalah apa yang menunjukkan apabila anda melakukan search di Google. Jadi terutamanya, terutamanya akan mempunyai ini dengan baik-baik kerana anda tahu, ada kawasan marketing, search di Google sangat penting. Kadang-kadang kawasan personal, kadang-kadang anda tinggalkan, kemudian anda berakhir tidak melihat apa-apa. Kadang-kadang bahawa jika anda meletakkan template daripada sesuatu yang lain, dan mereka meletakkan sesuatu yang tidak terbaik di sini, seperti, oh, timur admin dari Bootstrap apapun, kemudian website anda mungkin menjadi sangat baik dan segala-galanya, tetapi apabila anda melihatnya di Google, mereka akan melihat, oh, timur admin bootstrap, jadi tolong mengubahnya. Jangan tinggalkan ini sebagai HTML template, hanya mengubahnya. Hari ini tidak terbaik. Semua orang akan menunjukkan sebuah page yang sama. Jadi, anda mungkin lebih kreatif daripada saya. Saya tidak sangat kreatif. Jadi, apa yang saya memperkenalkan, jika anda berdiri, tidak ingin mencari gambar anda sendiri. Anda dapat menggunakan gambar di sini, tetapi tidak ada apa-apa yang menghentikan anda daripada gambar anda sendiri, hanya FYI. Konten juga, apa-apa pun, atau sesuatu, tidak perlu menikmati kelebihan saya, kerana kelebihan saya akan menjadi kelebihan daripada sekarang, hingga 6 jam, hanya berkata, ini, tetapi, apabila anda mengubah, anda tidak akan dapat melihat. Ini hanya menggunakan sebuah kelebihan, sebuah kelebihan sebuah kelebihan, tetapi anda tetap harus mengubahnya. Jadi, saya hanya mengubah sesuatu kelebihan di sana. Jadi, itu untuk kelebihan saya. Semua perkara lain adalah penting, tetapi jika anda tidak memperkenalkan mereka, sebuah kelebihan anda tidak memperkenalkan. Satu perkara yang saya mahu, META, diindikasi, informasi tentang kelebihan, tidak mengapa. Ada perkara lain, yang kata, link. Apa yang link warna, memastikan, memastikan, memastikan browser, untuk mengerti, bahawa, browser hanya memaksa file HTML, ia akan memastikan, anda melihat, ada resources yang lain. Biar untuk, file CSS, Itulah javascript file, tetapi anda menggunakan link untuk beritahu browser bahawa ada lebih banyak informasi dalam file lain yang HTML saya perlukan untuk mengandalkan perkara yang benar-benar. Jadi ini sudah sangat mengharapkan bahawa dalam folder anda ada satu lagi file disebabkan style.css. Jadi ini menarik di sini. Ia memberikan browser tahu bahawa file style.css juga dan akan membantu mengandalkan pakaian web anda dengan sebuah link. Seperti yang saya katakan, biasanya anda mungkin tidak akan menerima ini dengan tangan kerana anda akan menerima template yang mempunyai semua ini untuk bermula. Tetapi ia bagus untuk tahu bagaimana ia melakukannya. Kembali. Apa-apa yang di dalam element body adalah apa yang akan berlaku. Jadi jika anda mengandalkan apa-apa dalam element body, sekarang hanya mengandalkan apa-apa. Mengandalkan dinosaur, ketengkaran, mengandalkan semuanya. Dan anda menerima apabila anda menerima, anda akan melihat pakaian di website green. Jadi. Tetapi ia harus berdiri antara pakaian. Jadi antara pakaian dan pakaian, hanya mengandalkan sesuatu. Untuk mengandalkan dinosaur. Makan. Selamatkan. Selamatkan dan mengandalkan. Ia harus berjumpa di pakaian web anda. Hanya untuk mengandalkan semua itu juga. Itu apa yang berlaku. Jadi anda merenangkan bahawa apabila anda mengandalkan pakaian di atas, tidak akan berlaku. Apa-apa yang di dalam body akan berlaku. Jadi itu bagaimana ia berlaku. Itu bagaimana pakaian berlaku. Sebenarnya, hanya sebuah element body di pakaian web anda. Tetapi perkara tentang html dan pakaian web adalah html adalah sesuatu yang sangat berlaku. Jika anda mengandalkan sesuatu yang salah. Seluruh kata-kata untuk banyak lelaki program lain. Lelaki program lain, jika anda mengandalkan sesuatu yang salah. Anda akan mendapatkan salah. Lelaki program berkata tidak, salah. Dan anda akan hanya menghentikan salah. Html yang berbeza adalah sangat berlaku. Anda akan mencoba untuk, saya rasa ini adalah apa yang orang ini cuba lakukan. Dan anda masih cuba mendapat. Tetapi anda hanya mendapat salah. Kerana untuk mendapat dengan betul, pakaian itu penting. Tapi jika anda melakukan sesuatu yang salah. Anda masih mendapat, tetapi biasanya anda akan mendapat. Tidak mencari cara yang anda menunggu. Sebab itulah, anda patut mencari untuk mendapat sebuah kata-kata. Walaupun anda dapat mendapat salah. Ia tidak akan berlaku, tetapi ia akan mencari salah. Jadi, hanya sebuah kata-kata. Anda dapat mempunyai banyak lagi kata-kata. Tetapi kata-kata anda hanya akan mempunyai satu. Seperti yang saya katakan, ada banyak kata-kata. Banyak kata-kata yang anda boleh menggunakan. Kita tidak akan mencari semua mereka. Bagus untuk tahu bahawa ada banyak kata-kata yang berlaku. Ada kata-kata untuk, ada kata-kata untuk, ada kata-kata untuk, ada kata-kata untuk listan, ada kata-kata untuk tabel, untuk kata-kata, untuk semua perkara yang menarik. Jadi, buka adalah kawan, jika anda akan membuat website dan anda kata, anda mahu membuat seperti apa yang saya lakukan tadi, seperti kata-kata di bawah kata-kata. Anda dapat selalu membuat Jika kita hanya memasukkan gambar dan kemudian memasukkan paragraf P, teks di bawah. Tetapi ada element figure yang anda boleh menggunakan untuknya. Ini membantu kerana ia membantu dengan sesuatu disebabkan semantik. Jadi ia membantu meletakkan browser, mesin, meletakkan devises seperti screen readers, lebih baik memahami struktur konten anda. Yang penting mengapa kita mempunyai banyak, adalah untuk memberikan struktur konten anda. Jika anda memikirkan website anda adalah seorang, HTML ini adalah skeleton. Jadi anda boleh memasukkan semuanya di... Semuanya menggunakan P-Tag. Kemudian ia akan hanya menjadi sebuah blog. website anda tidak ada begbon. Jadi kita perlu membuat semua ini semantik. Jangan risau, tidak risau. Banyak orang tidak memanakkan, percaya saya, mungkin beberapa orang, beberapa orang membuat. Kerana kita hanya Google. Jika kita perlu. Atau kita menggunakan sepanjang juta yang kita tahu untuk menggunakan. Jadi ini adalah apa kita ada, pemplet basikal. Satu perkara untuk memahami, adalah apa-apa pun yang kita lakukan hari ini, dengan tersambung, hanya memasukkan setiap element yang anda menulis hari ini. Orang itu adalah sebuah kebukaan. Kepukaan adalah sebuah kebukaan. Banyak kebukaan di segi segi kebukaan, tetapi kebukaan. Dan kebukaan ini adalah sebuah kebukaan. Mereka akan dikawal, ke bawah-kebukaan, ke-kebukaan. Jadi, kebukaan yang anda bawa adalah ke-kebukaan di atas kebukaan. Kadang-kadang, kebukaan itu seperti itu. Jadi ke-kebukaan, ke-kebukaan, ke-kebukaan. Anda akan menggantikan kebukaan yang anda bawa, bagaimana anda menggantikan kebukaan anda. Baiklah. Sekarang, belum bercakap tentang ini. Mari kita bercakap tentang struktur asing. Jadi, kembali ke sini. Struktur asing. Mari kita mulakan dengan kebukaan H1. Saya rasa jika anda menggunakan kebukaan studio, anda juga akan mempunyai kebukaan H1 di atas kebukaan ini. Apabila kebukaan H1 dan kebukaan H1, saya rasa itu. Sebab itulah kita minta anda menggunakan kebukaan H1. Jadi, apabila kebukaan H1 adalah kebukaan yang paling tinggi sepatutnya adalah titik anda. Ini adalah struktur. Jadi, jelasnya anda boleh beritahu saya ada sebuah tempat yang berada di sini hari ini. Jadi, sebuah tempat saya adalah Revit. Anda boleh buat apa-apa lain. Maksudkan kebukaan H1. Jadi, kebukaan H1 yang saya mahu bercakap adalah P. P adalah para paragraph. Jadi, apa yang saya mahu beritahu pada paragraph tag itu mungkin ada apa-apa. Jadi, ini adalah website yang sangat basic. Jika anda ada beberapa idea bagaimana anda mahu periksa website. Tapi saya hanya memperkenalkan kebukaan yang anda boleh menggunakan hari ini. Jadi paragraph, anda akan nampak berbeza. Bukan sangat kreatif. Jika anda memperkenalkan ke Google Revit. Jadi, saya masih boleh memperkenalkan kebukaan. Jika anda boleh memperkenalkan kebukaan anda sendiri, tolong memperkenalkan kebukaan. Jadi, sekarang anda patut mempunyai kebukaan. Dan kemudian, anda boleh mempunyai teks. Jika anda mempunyai lebih banyak kebukaan, anda boleh mempunyai kebukaan yang berbeza. Dan pada kebukaan visual, anda mahu mempunyai kebukaan kebukaan untuk kebukaan anda. Jadi anda akan mempunyai kebukaan yang paling teruk untuk saya. Untuk saya, saya akan mempunyai beberapa seksan di antara saya. Saya akan memperkenalkan kebukaan kebukaan yang berbeza. Tapi yang lain, berbeza yang berbeza. Saya tidak tahu kebukaan yang berbeza atau sebagainya. Kemudian anda akan memperkenalkan kebukaan yang kedua. Jadi anda akan memperkenalkan kebukaan yang berbeza. Mungkin anda akan mempunyai beberapa seksan. Kemudian anda akan memperkenalkan kebukaan H3. Jadi anda akan memperkenalkan kebukaan H3. Kerana pada kebukaan kebukaan yang berbeza yang berbeza, kebukaan H1 akan lebih besar. Kemudian kebukaan H1 akan lebih kecil semasa anda kebukaan H6. Jadi lagi, ia lebih membuat masalah. Ia adalah kebukaan visual untuk memperkenalkan kebukaan lebih mudah untuk digunakan oleh reader atau penggunaan. Yang kedua yang terbaik di sisi mereka, pada hari ini anda mahu mempunyai kebukaan. Jadi kebukaan yang terbaik saya akan memperkenalkan adalah kebukaan kebukaan. Sekarang saya mengatakan kebukaan kebukaan adalah sedikit berbeza kerana kebukaan kebukaan tidak memiliki konten. Macam mana kebukaan kebukaan adalah anda perlu memberi adanya adanya ATTR. Adanya SOS adanya SRC bukan S-C-R bukan S-O-U-R-C-E adanya SRC kerana komputer tidak sangat kencang anda perlu menggunakan adanya yang tepat. Jadi adanya SOS adanya adalah menggunakan untuk memperkenalkan bagaimana untuk menemukan adanya. Untuk projek ini saya telah menggunakan adanya SOS untuk membuat perkara lebih mudah untuk semua orang dan jika anda ingin menggunakan adanya dari komputer sendiri adanya dari kata-kata sendiri memperkenalkan adanya supaya membuatnya lebih mudah untuk mengikuti adanya. Tetapi jika anda sangat mengenal dengan sistem file dan anda dapat berhubungan dengan adanya SOS untuk adanya hanya untuk bahagian memperkenalkan adanya dan anda dapat memperkenalkan adanya dengan memperkenalkan adanya dan nama file anda harus memperkenalkan adanya jadi pngg, gif, jpg anda harus memperkenalkan adanya tidak hanya memperkenalkan nama file jelasnya saya akan memperkenalkan adanya dan saya rasa jika anda menggunakan code VS anda akan membuat jika anda memperkenalkan code, anda akan datang mendapat darit yang digunakan tetapi pastikan ini saya rasa jika anda menghukumannya salah, kelebihan akan berubah Just error it if you want to. The next attribute like I mentioned is very important is the is the alt attribute. And again just want to really focus on the syntax. Attribute is the attribute name and then equal sign. Make sure there are no spaces in between because sometimes used to typing by default we will press space bar. Sometimes I do that. But make sure that between your attribute and whatever is inside this line no spaces is attribute SRC equals then quotes and then your file name just an emphasis to check. Alt text like I said Alt text must be a description of what the image is because the alt text only kicks in when the image doesn't load. Sometimes internet no good. This example actually works better when I was in Penang because the internet really no good. But in Singapore internet quite nice quite strong so usually the image will load but sometimes the image don't load. And I think most of us would have experienced this before the image don't load. I think if you are on a windows machine it's this rectangle and then a blank thing. Sometimes there is text so the browser will read the text from this alt attribute. So if you don't include the alt attribute and the image doesn't load it's blank. It's not a good fallback. So for images always use a phrase that describes what the image would be. So please don't do this. No. I know it's an image and I know a dn load that's not helpful. So I could say like a baby rabbit. So okay I can image dn load but I can imagine that I saw a baby rabbit. So that's kind of that's kind of the reason behind why you have it. So if you notice just look at the color of body. If I didn't close it body is the wrong color but once I close it so this is again all this color changing and these different colors is something we call syntax highlighting. It's really purely a helper feature. Helper feature because people like me cannot type properly. Never learn in school always type wrongly. So this actually is helpful for people like me who always type things wrongly. I can spot my typos more easily than if I hadn't. So if you do this if you had used my image you say and when you reload you'll be very disturbed because on purpose I made an image huge and then everybody will start raising their hand like can I make the image smaller and I'm like yes yes you can make the image smaller that's why I made your download such a big image so that we can learn how to make the image smaller. So if you use your your own image and it wasn't so big you probably look better but if all went well you should have been able to load an image. Can anybody not load image image not loading? Okay. Yes please. What happened? Oh I think I noticed the issue. Wow. Bukankah image saya? I don't know. I reference this one. Ah ya ya ya. Ah okay. Ya. Yes. So that's that. Everything is working. Excellent. So the the size of the image is considered a style. It's a it affects how your your image looks. It affects things that affect how your content looks will be controlled in CSS which we will talk about soon. But for now what we want to do is we want to get the content of our website up first. So tags and image. So another very commonly used tag when we do websites with which are informational like my rabbit website here is that we would like to structure content into list. So what we have right? I like to for beginners I enjoy using Microsoft Word as a reference. Has anybody not used Microsoft Word before? Please tell me now. Then I will change my example. But I always operate on the assumption that everybody has used Microsoft Word at least once in your life or any other text editor. So when we type in a text editor we also try to format our text. Then sometimes we have list. There are two icons. You have the one with the numbers and the one with the bullets. So HTML also have the one with the numbers and the one with the bullets is just you express it in code. So there are two types. The first one is the one without the numbers. It's called UL. It's called UL for reason because UL stands for unordered list. So like I said the people who wrote this HTML that guy that I mentioned earlier is a Tim Berners-Lee from England, speak English unordered list UL. So inside your UL you will have list items and these list items use the tag li because list start with li so use li li not li sts so just li So what happens is that each of these li will be an item in your list. There are list items inside so this is if you use li alone you will not get the bullet points because this is the type of HTML element that comes as a set. Your list items must live inside an unordered list so they are nested inside. So hold on while I still more content from the internet. Seventeen things no one tells you before you get a rabbit. That sounds nice. Aiyo so cute. Okay so like I'm obviously not taking this content creation very seriously so I have a bunch of ridiculous sentences inside my list I'm sure y'all are much more serious at this than me but if all went well you should get something like this bulleted content. Yes No number? So you get bullets. Does anybody's bullets not show up? Good? Great. So if I want to have numbers we will use something else called OL which stands for ordered list but if you are going to change whatever you have existing when you change the top remember to change the closing tag also. So if you change to OL and you save your bullets become it's stupid image your bullets should become numbers if your bullets never become numbers go and check your closing tag So that is So now today we up till now right it's now 2.30 we have covered a header or headers if you have more content covered image covered list let's cover one more which is quite often we almost see all the time is called links unfortunately links right the the tag we use is not link don't know why but the tag name is actually A A is for links I really should go and research why it's called A I will put this as a reminder to myself next time you see me you can ask and I probably will have figure it out but for links right links are interesting because links have content and they also need to tell the browser where to go next so this is the type of tag that will have content that's why it has a closing tag but it will also have attributes the attribute to tell the browser where to link to when you click the link right is something called HREF HREF again I did not research why it's called HREF I'm thinking reference I used to pronounce it rough but then somebody told me no no no it's HREF can so anyway wherever you want to link to I like find out more information about Revit then I will link to Wikipedia so if you notice I'm linking to an external page I'm linking to Wikipedia Wikipedia does not exist on my computer so I must include the full address because there are two different type of links there's something we call absolute links and something we call relative links absolute so links these links are like addresses you think your own address your actual physical location address absolute link means that you go your block number your unit number then your street name then your postal code then your country if you live in Malaysia we have states then country so for me I got my street number then my street name then my johor baru first I got my neighbourhood Taman, Sentosa then my state then town johor baru then I got state johor then I got country Malaysia if you are irritating you can just put earth and the postman also don't care but that's the absolute at least the full path a relative link is what the browser will do with relative links is that if you don't include so if you look at the image I didn't include all the extra stuff in front and by doing that what the browser will assume they assume that all these links are relative to where the index.html file is relative meaning it says images slash this means a folder it will automatically assume that the image folder is in the same location as your index.html file so if for example you are referencing you have more folders you have an image inside you got a few more folders you will just add the folder but by default a relative link assumes that the starting point is the index.html file and then it will try to look so if you try to reference anything that is outside the browser won't know unless you tell it so let's say for example I have a folder called banana outside one level out of my index.html file if I just put banana slash it won't show up because inside here there is no banana so browser will assume you probably type it wrongly don't care so if you want to access anything that is external to index.html file you need an absolute URL so an absolute URL in my case I am using Wikipedia must have the HTTPS so if you want to include external image from somewhere else not your computer just somewhere on the internet must include the full or HTTPS www.unicorn.com slash unicornwithwings.jpg then you can access an external file actually that's why for ease I ask you all to put all your local or images just download and throw in this folder to make life easier that's the reason somebody said let's put video so let's try putting video so there is a tag for video also so let me go and find a video no youtube is I got idea one wait video video actually I got video on my local if you all have video on your local machine this will make it easier because I think most default the default ideas that go youtube when you embed a link from youtube I think this is good to show also youtube doesn't give you the video file directly because youtube is built by engineers and engineers just like to make life difficult but what youtube does is when you click on share and you click embed there's a different tag it's called iframe iframe is another type of html tag I think you all realise that there are a lot of different type of html tags iframe again this is English, frame so frame just means that the video it's actually sort of rendering the video off of youtube onto your website so if you want to include a video that is hosted on somebody else's service almost all of the time they will provide this embed link almost all of the time they will utilise this iframe tag so what's easy for us it makes life easy for us that's what we can do we can just copy and you can just put it in your code like that and it will work so iframe also got its own attributes I think we are reasonably familiar with attributes so you can also dictate the width of the video that you want to embed from youtube the height so this is already formatted for you off of youtube but I mean there are some things you can change the width and the height of the frame if you want to frame border extra attributes that youtube have included but generally most people can do the default this is for let's say youtube but let's say you have let's say you have a video locally on your own machine like I have videos on my local machine let me find one la la la I cannot see getting oh oh he he he where's Yon I have a video called diagonal scroll to make life easier for myself I'm going to put it into this folder so if you make changes to the folder you should show up on your text editor so that's kind of nice so I have folder called video now so this video name is called diagonal scroll I'm really sorry about this tiny text situation that's happening here but okay get rid of this there's a tag called video and to be honest I cannot remember how the video tag is supposed to look so I'm going to google and you will realise that even people who have been doing this for some time were almost always google stuff because everybody's brain limited capacity I need to remember to like meetings and you remember when my mother's birthday is I need to remember a lot of important things so don't need to remember all this when it's googleable but the resource I always try to recommend is this thing called MDN MDN MDN is a resource for web developer it covers a lot of things even though it says Mozilla at the moment is actually worked on amongst all the major browser vendors Mozilla, Google Microsoft all are coming together to work on MDN they may or may not rename it eventually but this is like the reference to do web moving forward and you are confused about HTML stuff, CSS stuff javascript stuff this is a very solid reference because all the browser vendors help contribute to this reference thing of it like a web encyclopedia MDN, web docs, google MDN MDN Malaysia, Denmark, Norway so okay video element so this is how the video okay let me try zoom so like I mentioned all different elements will have attributes that are only relevant to themselves so like a video element will have attributes like controls, muted so controls and muted, you think about it if it's an image, it's not relevant that's why these attributes don't do anything browser knows to ignore you won't break your code the browser just ignore it because they're like no time for this person doesn't know HTML but if it's a video things like this attribute like controls what it does is that you can control whether the video has this play or pause if you don't want it then you can also choose for the video not to have controls you can manipulate how your video renders based on these attributes so if you want to do a video a video can have content inside so if you see in this particular example it has a closing tag because it's not it's not like image image don't need closing tag why would you have a closing tag is because video doesn't have an odd attribute so if your browser doesn't support video because older browsers i would think most of you are using chrome so chrome auto update itself so your version of chrome quite new if you use like older browsers maybe you work in a bank and then your bank is Malaysian and the Malaysian bank doesn't want to upgrade everybody has to use a windows xp computer and then you have an old browser doesn't support video what happen? you will not be able to see any video you will just display browser doesn't support embedded view you can customise this i'm sorry your employer doesn't want to upgrade technology because this bar can customise and this is content that will exist between the text so if let's say i want to include a video i'm going to copy this i'm going to include the source if you don't have a video can just ignore me and just watch me do this diagonal sorry you want to copy and paste what oh no, because you need to have a video file on your computer if you have then go ahead and try this if not then i'm just doing this for fun my mind confirm can so i'm just going to so at its base you will see this video so right now i did not include anything i just included source so as you can see right no controls so controls are helpful because i want to control if i can play or post my video so now i got controls the fun part about this html elements is that i am currently using firefox my controls look like this i think if you are using chrome your controls may look different if you are using h your controls again may look different because the browser themselves style this some some of these elements if you use audio they also have this like play this time this kind of full screen things browser will default style for you so if you are using firefox so you can play so this particular website was built by this gentleman Mr Lim Mr Lim is also a coach and Mr Lim created this website called super city hackathon and i just made a video of it so this is how videos work but again, not related to rabbits so i'm just going to get rid of it this is fyi one more thing before we go for break because i think you are also very tired of me talking if i put this a around a sentence the whole link the whole sentence is a link which is fine but sometimes we don't want the whole sentence to be a link, we want it to be around a few words only so maybe i say i just want it around rabbits for example so what we will do is that the tag just goes around the word that you want but the sentence itself is in a tag so later i will explain a bit further about this sort of elements within elements or how elements are rendered so this is if you need to change your link you can follow this and let's have a break now so if you are stuck you can kind of ask questions go toilet, go toilet, drink water and we reconvene in 15 minutes yes, thank you