Dasar - Dasar HTML 1

Summary

This 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

00:00

😀 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.

05:02

📝 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.

10:03

🎨 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.

15:03

🌐 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.

20:06

🔗 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.

25:07

📚 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.

Keywords

💡HTML

HTML stands for HyperText Markup Language, which is the standard markup language for creating web pages. It is the core vocabulary of the web and defines the structure and layout of a web page. In the video, HTML is the main subject, with the script discussing the basics of HTML, such as its tags and elements, and how to create a simple HTML document.

💡Visual Studio Code

Visual Studio Code is a popular source code editor developed by Microsoft. It supports a wide range of programming languages and is used for web development tasks such as editing HTML, CSS, and JavaScript files. In the script, the video instructor uses Visual Studio Code to demonstrate how to create and edit HTML files.

💡DOCTYPE

The DOCTYPE is a declaration that must be placed at the beginning of an HTML document to define the document type and version of HTML used. It helps browsers to display web pages correctly according to the specified HTML standard. In the video, the script mentions the DOCTYPE declaration for HTML5.

💡Headings

In HTML, headings are defined with the <h1> to <h6> tags, where <h1> represents the most important heading and <h6> the least. Headings structure the content of a web page into sections with different levels of importance. The script provides an example of using headings in an HTML document.

💡Paragraphs

Paragraphs in HTML are created using the <p> tag and are used to group blocks of text together. They are fundamental for organizing the textual content of a web page. The video script includes an example of a paragraph tag and how it is used within the body of an HTML document.

💡Hyperlinks

Hyperlinks, created with the <a> tag, are used to link from one page to another or to a specific section within the same page. They are a key feature of the web, allowing users to navigate between resources. The script explains how to create a hyperlink in HTML and includes an example with the 'href' attribute.

💡Images

Images in HTML are embedded using the <img> tag, which requires the 'src' attribute to specify the image source and an 'alt' attribute for alternative text. The script discusses how to include an image in an HTML document and the importance of the 'alt' text for accessibility.

💡CSS

CSS stands for Cascading Style Sheets, a language used to style and layout web pages written in HTML. CSS can be included in HTML in various ways, such as inline, internal, or external stylesheets. The video script covers the different methods of adding CSS to HTML and provides an example of changing text color using CSS.

💡Internal CSS

Internal CSS refers to CSS code placed within the <style> tag in the <head> section of an HTML document. This method allows for styling the HTML document without the need for an external stylesheet. The script demonstrates how to add internal CSS to an HTML document.

💡External CSS

External CSS is a separate file that contains CSS code and is linked to an HTML document using the <link> tag in the <head> section. This method is used for styling multiple web pages consistently by sharing a single external stylesheet. The script explains how to link an external CSS file to an HTML document.

💡Comments

Comments in HTML are added using the <!-- and --> tags and are not displayed in the browser. They are used by developers to explain the code, make notes, or temporarily remove code without deleting it. The script mentions how to add comments in HTML and that they can be viewed using the 'View Page Source' or 'Inspect Element' features in a browser.

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