Dasar - Dasar HTML 1
Summary
TLDRThis video script offers a beginner's guide to HTML basics. It starts with opening Visual Studio Code and creating a new HTML file, then explains the structure of a simple HTML document, including the doctype, html, head, and body tags. The script delves into elements like headings, paragraphs, hyperlinks, and images, illustrating how to create and style them. It also covers CSS integration methods, such as inline, internal, and external styles, and explains the use of URLs for linking. The tutorial is designed to help viewers understand the fundamentals of HTML and get started with web development.
Takeaways
- đ The video is a tutorial on the basics of HTML, starting with opening Visual Studio Code and creating a new file.
- đ It demonstrates how to create a simple HTML file with basic content and how it is displayed in a web browser.
- đ The video explains the structure of a valid HTML document, including the doctype declaration, html, head, and body tags.
- đ It covers the use of HTML tags such as headings (h1 to h6), paragraphs (p), and hyperlinks (a), including how to create links with the 'href' attribute.
- đŒïž The tutorial includes instructions on how to display images using the 'img' tag, with 'src' for the image source and 'alt' for alternative text.
- đ The video discusses the use of absolute and relative URLs for linking to other pages or resources within a website.
- đš It explains how to add styles to an HTML document, including inline styles within tags, internal styles within the 'style' tag, and external styles linked via a separate CSS file.
- đ The importance of comments in HTML code is highlighted, using '<!--' to start and '-->' to end a comment.
- đ The video shows how to inspect elements in a web page using the browser's developer tools, including viewing the page source and inspecting individual elements.
- đ It also covers the use of the 'target' attribute in hyperlinks to control where the link should open, such as in the same window or a new tab.
- đ Finally, the video touches on the use of 'id' and 'class' attributes to identify and style elements within an HTML document.
Q & A
What software is being discussed in the video for editing HTML files?
-The video discusses using Visual Studio Code for editing HTML files.
How does the video demonstrate creating a new HTML file?
-The video demonstrates creating a new HTML file by opening a folder in Visual Studio Code and using the 'New File' option.
What is the minimum requirement to create an HTML document according to the video?
-The minimum requirement to create an HTML document is to have a doctype declaration, an opening and closing html tag, and content within the body tag.
What is the purpose of the 'head' section in an HTML document as described in the video?
-The 'head' section in an HTML document is used to contain meta-information about the document, such as the title.
What is the function of the 'body' tag in an HTML document?
-The 'body' tag in an HTML document contains the content that will be displayed on the webpage.
How does the video explain the use of the 'a' tag in HTML?
-The 'a' tag is used to create hyperlinks in HTML, and the video explains that it requires the 'href' attribute to specify the link's destination.
What is the purpose of the 'img' tag in HTML as described in the video?
-The 'img' tag is used to display images on a webpage, and it requires the 'src' attribute to specify the image source and the 'alt' attribute for alternative text.
How can you view the source code of a webpage as shown in the video?
-You can view the source code of a webpage by right-clicking on the page and selecting 'View Page Source' or by using the browser's developer tools to inspect the element.
What is the role of the 'style' tag in HTML?
-The 'style' tag in HTML is used to add CSS (Cascading Style Sheets) to the webpage, allowing for the customization of the webpage's appearance.
What are the three methods mentioned in the video for including CSS in an HTML document?
-The three methods mentioned for including CSS in an HTML document are inline styles, internal styles within the 'head' section, and external stylesheets linked to the document.
How does the video explain the use of comments in HTML?
-The video explains that comments in HTML are written within '<!--' and '-->' and are used to add notes or explanations that will not be displayed on the webpage.
Outlines
đ Introduction to HTML Basics
The video script begins with an introduction to the basics of HTML. The speaker guides the audience through opening Visual Studio Code and creating a new file within a previously established folder. They demonstrate how to write simple HTML code and view it in a web browser, highlighting the flexibility of HTML even with invalid code. The script also mentions the availability of various HTML tutorials and examples, such as a valid HTML structure including doctype, html opening and closing tags, head, and body sections.
đ Understanding HTML Elements and Attributes
This paragraph delves into various HTML elements such as doctype, headings (h1 to h6), paragraphs, and hyperlinks. It explains how to create hyperlinks using the 'a' tag and attributes like 'href' for the link destination. The script also covers how to display images using the 'img' tag, including the 'src' for the image source and 'alt' for alternative text. Additionally, it touches on the importance of having the image file available for the 'src' attribute to work correctly.
đš Adding Styles and Comments in HTML
The speaker introduces the concept of adding styles to HTML elements using the 'style' attribute, which can include color, size, and other CSS properties. They provide an example of changing text color to red and explain the use of comments in HTML coding with '<!--' and '-->'. Comments are useful for notes that should not be displayed on the webpage. The paragraph also mentions the use of the 'title' attribute, which shows a tooltip when the mouse hovers over the element.
đ Methods of Incorporating CSS in HTML
This section discusses different methods of including CSS in an HTML document. It starts with inline CSS, where styles are directly added within the HTML tags using the 'style' attribute. The script then moves on to internal CSS, which is placed within the 'head' section of the HTML document, and external CSS, which involves linking to a separate CSS file. The speaker provides examples of each method and explains the benefits of using external CSS for maintaining styles across multiple pages.
đ Exploring Hyperlinks and URL Concepts
The script explores hyperlinks in more depth, explaining the use of 'target' attributes to control where the linked document opens, such as in the same window (_self) or a new window (_blank). It also differentiates between absolute URLs, which always open the specified page regardless of the current page's location, and relative URLs, which are based on the current page's directory structure. Examples are given to illustrate how these URLs function in practice.
đ Conclusion and Encouragement to Practice
In the final paragraph, the speaker concludes the session by summarizing the topics covered and encouraging viewers to practice what they have learned. They remind the audience to explore and apply the concepts of HTML, CSS, and hyperlinks to enhance their web development skills. The speaker expresses gratitude for the viewers' attention and looks forward to their active participation in the learning process.
Mindmap
Keywords
đĄHTML
đĄVisual Studio Code
đĄDOCTYPE
đĄHeadings
đĄParagraphs
đĄHyperlinks
đĄImages
đĄCSS
đĄInternal CSS
đĄExternal CSS
đĄComments
Highlights
Introduction to the basics of HTML and how to open Visual Studio Code to start coding.
Creating a new file in HTML and the minimum requirement to write any code.
Explanation of how any text written in an HTML file is displayed on a web page.
The importance of the doctype declaration in an HTML5 document and its placement at the top.
The structure of an HTML document, including the html, head, and body tags.
The role of the head tag in defining the metadata or data about the web page.
The body tag as the container for the content that will be visible to users.
Different HTML editors that can be used, including Notepad and Visual Studio Code.
Explanation of HTML elements like headings (h1 to h6), paragraphs, and hyperlinks.
How to create a hyperlink using the anchor tag and the href attribute.
Using the image tag with the src and alt attributes for images in HTML.
The process of linking an image source and the importance of having the file name correctly.
How to view a webpage, including using the 'view page source' and 'inspect' features.
Introduction to HTML comments and their syntax using <!-- and -->.
Different ways to include CSS in HTML, such as inline, internal, and external methods.
How to apply styles to HTML elements using the style attribute and CSS properties.
Explanation of absolute and relative URLs and their use in linking to other web pages.
The use of target attributes in links to control where the linked document will open.
Conclusion and encouragement for viewers to practice the concepts learned in the video.
Transcripts
halo halo semua pada video ini saya akan
menjelaskan mengenai dasar-dasar html eh
pertama kita coba buka aplikasi Visual
Studio code lalu kita Open folder
kemudian kita pilih folder yang sudah
kita buat pada pertemuan sebelumnya
disini kita bisa membuat new file Oh
untuk
the minimum pot untuk html adalah kita
bisa menuliskan kode apapun disini jadi
misalnya di sini kita langsung Tuliskan
hellwood ke Coba ya kemudian kita shift
dan kontrol es atau dengan menggunakan
eh kompulsif yang ada di sini kemudian
coba kita buka kita bisa lakukan klik
dua kali ya di sini ya biarkan terbuka
Hai halaman web yang sudah kita buat
sebelumnya di sini bisa kita lihat bahwa
apa yang kita Tuliskan di dalam file
dx.am l akan langsung ditampilkan di
halaman web di semua yang teman-teman
polisi sini langsung muncul meskipun
tanpa tag HTML nah ini memang bukan
merupakan kode html yang valid Namun
karena fleksibilitas html Hut ini masih
bisa ditampilkan Oke selanjutnya Coba
kita buka ya Ada web yaitu webtrees full
Nah disini tersedia banyak sekali html
tutorial ini ada sedikit example ya kita
coba ya
Hai untuk minimum Put html yang valid
adalah seperti ini jadi yang paling atas
ada doctip nya html Lalu ada baik html
pembuka kemudian ada tekad email penutup
didalamnya ada help dan ada Buddy di
dalam head akan ada kita Obito itu
adalah judul dari web tersebut Sedangkan
yang babi ini adalah konternya Coba kita
save dan kita lihat hasilnya oke nah di
ketika kita tulis bridges detail dia
akan masuk di atas ya Kemudian untuk
padi akan muncul disebelah sini
Hai TV percobaan jutkan tak di sini ada
penjelasan Apakah html itu akan Email
adalah hypertext markup language ada
juga penjelasannya disini Apakah doctype
html itu itu deklarasi untuk dokumen
HTML 5 kemudian html ini adalah teks
utama untuk html ada juga yang namanya
head itu untuk menunjukkan bagian help
lebih suatu halaman html kemudian ada
Baduy yang merupakan pupuk ya kontennya
akan semua dimasukkan disini untuk html
editor yang bisa digunakan pada berbagai
macam
Ayo kita bisa menggunakan notnet
menggunakan teks edit.exe kalau saya di
sini menggunakan Visual Studio code
Which kalau disini dijelaskan mengenai
doctype kemudian mengenai heading
wedding itu ada satu sampai h6 dan yang
paling besar adalah satu yang paling
kecil adalah anak kandung
Hai kemudian pilih itu adalah untuk
paragraf dan a n cord ini adalah untuk
kalau kita ingin membuat hyperlink ya
kita bikin link kita harus menggunakan
a&v dan alamat yang dituju kemudian ini
adalah Eh link-nya jadi lu yang
ditampilkan kita coba yuk kasih udah
kita coba buka Nah nanti akan muncul di
bagian bawah ini untuk link kita klik
akan menuju alamat yang kita Tuliskan di
bagian RF ah untuk Image kita bisa
menggunakan
yang ada di sini image source ini adalah
imagenya ini adalah alternatif teksnya
juga image itu tidak muncul atau ketika
kita aku foremost kita ini adalah webnya
ini adalah hidupnya keinginan sebelumnya
kita harus punya file dengan nama ini
kita coba kopiah tanpa kita download
imutnya nanti kita lihat Apa yang akan
terjadi di sini Kinanti Indonesia akan
dipakai ini tapi sebelumnya jadi belum
ada limitnya nanti akan muncul seperti
ini enggak jadi induknya tidak muncul
soalnya tidak ada
Hai kau Indonesia tidak ada nanti yang
akan ditampilkan adalah tulisan ini tuh
coba download imutnya Ya dicoba kita
coba yang ini kita sih finish kita
letakkan di B sudah kita Swift
Hai Utara Coba lagi PIN maka dia akan
tampil tanpa mengubah cordnya video
ketika kita ingin melihat kita bisa
lihat sudah punya web yang kita ingin
melihat shootnya atau ada website yang
ingin kita Sus ada ini terlihat susutnya
gimana langkah-langkahnya untuk melihat
terbuka webnya misalnya begini ya kita
bisa perikanan kita bisa view page
source nah makan kelihatan sorenya sama
persis ketika kita ketik tadi di dalam
codingnya yang
the Samaya selain itu kita juga bisa
melakukan inspeksi kalau kita inspect
ini dia akan lebih kecil ya jadi bagian
ini itu yang mana nanti akan ditampilkan
tapi saya Dimas yang mana sih oh yang
ini juga bisa akan kalau kita punya web
yang lain ini kita bisa Inspektur kan
Jupe source dulu Gita bisa lihat Wah ini
panjang juga ya di sini ya kemudian kita
juga bisa inspect Element dan
Hai misal kita ingin mengakses bagian
ini yang mana ya tapi nanti akan nemuin
ih2 ini Div ini pph21 Jelaskan mengenai
HTML
Hai punya adalah rapper link-nya muda
mengenai imitsu tadi untuk menampilkan
image
hai aduh itu ada Hip nah kemudian untuk
Style Ini digunakan untuk menambahkan
style style itu bisa lupa warna bisa Bu
pavon bisa berupa size dengan sebagainya
kita coba lihat ini kalau kita ingin
mengubah warna teks ini menjadi warna
merah nah begini kantornya pasif dan
kita anut Nah datang bedanya yang atas
adalah orang hitam yang bawah adalah
warna merah
Hai kemudian ada juga title ya detail
ini bisa kita
Hai nah detail itu akan muncul ketika
Mouse kita-kita Hut akan di atasnya kok
yang lain nggak ada detailnya jadi tidak
akan muncul apapun itu tulisan ayam a73b
selanjutnya yang penting adalah komennya
Jadi kalau biasanya dalam bahasa yang
lain kita bisa menggunakan flash Klaten
Belgia menggunakan tanda ini lebih kecil
kerja seluruh minus minus kemudian
komennya
Hai ditutup dengan pada minus minus anda
lebih besar coba iya iya makan tidak
akan muncul semua yang di dalam komen
tadi misalnya di sini kita Tuliskan
comment sampai di sini kita akan melihat
semua ini akan hilang di hilang semua
Hai untuk warna kita bisa menggunakan FB
KMA Musia bahkan Kita juga bisa nulis
namanya Nah di sini ada ketulis namanya
ribbon polar.com to download com itu
kalau ini adalah background-color ya
karir muncul seperti ini kok disini
adalah talak untuk teksnya diteken ini
yang kita warnai Aini syntaxnya kemudian
ini untuk ordernya kita coba aja ya
importir disini ini untuk
background-color kali hat hasilnya dunia
kalau kita coba selanjutnya yang teks
called nih nah muncul begini kemudian
kita tampilkan lagi untuk yang populer
ya begini contohnya kalau
Hai bisa dilihat selain kita menggunakan
nama ya Kita juga bisa menggunakan FTP
ini Hexa hsl selanjutnya open to CSS di
dalam html itunya ada 33 cara kita bisa
memasukkan CSS kedalam html yang pertama
adalah Inline dimulai itu yang sudah
kita coba tadi ini adalah ini lainnya di
dalam tag H1 ada style my style di dalam
masa tuh kemudian ini ada style di dalam
freestyle ini kita masukkan ke dalam tak
langsung a1b dengan sebagainya namun ada
juga metode lain yaitu menggunakan
internal internal ini nanti kita
letakkan di dalam ADB ada juga metode
eksternal yaitu kita letakkan di file
CSS terpisah jadi lihat untuk yang in
lime sudah kita coba sebelumnya lu untuk
yang internal nah ini kita masukkan di
ad-dahhak dia kemasukan di dalam efeknya
contoh nih termasuk kedalam map a
Hai menumbuk padi Yanti akan ada Baygon
mawar Om tuh blu-ray satunya akan ada
color blue dan pijakan dapat kalor rap
Coba lihat Bagaimana hasilnya Nah jadi
semua semua body semua channel ini
begonya adalah publik tuh Sedangkan
untuk H1 warnanya akan otomatis menjadi
lu dan yang P korbannya akan menjadi rap
Ini hasilnya ini
adalah contoh ke internal internal di
dalam file ini dan lagi satu yaitu
dengan menggunakan external hdd yang
kita masukkan adalah link-link ke file
CSS nya Nah ini kita copy coba kopiah
otomatis yang sebelumnya ini saya hapus
saya ganti dengan ini Styles to cvs
tentunya fo'xtails to CSS ini harus
sudah ada di saya harus buat itu disini
new panel-panel sport CSS kemudian isi
styles.css
Wah ini ama sebetulnya dengan yang tadi
sebelumnya ya sama ini
sesuai dengan yang ini sama cuman ini
kita letakkan di file yang terpisah
begitu coba lihat Bagaimana hasilnya
Hai deh sama yang tidak ada perbedaan
hanya file-nya diletakkan terpisah
Hai ini untuk html link sudah dijelaskan
sebelumnya
Hai Oh di sini ada tambahan bahwa kita
bisa menambahkan argued nih fungsinya
buat apa kalau targetnya adalah default
ya tidak kita sehat itu adalah self jadi
ketika kita akan kita klik halaman yang
baru yang akan dituju akan dibuka di C
Bella yang sama namun kalau menggunakan
Blank nanti dia akan Open new window
atau Open new tab kalau pengen nanti
akan Open different klipnya juga
menggunakan iklim kalau top dia akan
membuka dokumen itu default body repair
window itu Andi teman-teman bisa coba ya
kemudian selanjutnya adalah Absolut url
dan relatif url Ini fungsinya adalah eh
sout duel ini dia tidak peduli dimanapun
dia diletakkan dia akan membuka halaman
yang kita Tuliskan disini Tapi kalau
relatif dia akan mengikuti dia akan
mengikuti Maksudnya gimana tokek kita
coba iya itu penuh bikin link mungkin Ke
file-file limit aja ya Kasih lagi di
juga awalnya suka image by coba di muka
dulu untuk yang absolut sebagai contoh
saya akan gunakan halaman website alam
dihalaman w3school html html link sedot
SP cek email links kita coba buka
halaman Mulutnya ini akan muncul link
bawah nih ya kalau kita klik tadi akan
langsung menuju halaman witri schools
xhtml selesai m-i-link.com speed
Bagaimana kalau kita ubah ini menjadi
relatif ngetik itu seperti ini jadi kita
tidak Tuliskan http atau https nya di
depan
Ayo kita coba ini Pak ya Nah ini linknya
namanya linknya masih sama namun ketika
kita klik dia akan membuka ke folder
Dimana saat ini kita berada dan Farid
tidak ada di sini itu kita lihat
sebelumnya kita ada di sini nih di titik
dua Project garis miring web Project
kita ada di folder ini kalian kita buka
adalah index html atau kita klik yang
ganti cuman belakangnya saja
menyebabkannya yang ganti untuk yang di
depannya akan tetap ini adalah relatif
ia akan mengikuti dimana kita meletakkan
file ini by
Hai bentuk kali ini pertemuan ini saya
cukupkan sampai disini bahkan
teman-teman mencoba mempraktekannya
terima kasih
5.0 / 5 (0 votes)