HTML Dasar : Paragraf (5/13)
Summary
TLDRThis video tutorial guides viewers on how to use the paragraph tag (P) in HTML to create and style text. It begins with creating a new folder and file in Sublime Text, then demonstrates the basic structure of an HTML document. The script covers adding paragraphs, adjusting spacing with BR and HR tags, and applying text decorations using B, I, and U tags. It also introduces Strong and Em tags for semantic emphasis. The tutorial concludes with adding comments in the code for better organization.
Takeaways
- ๐ Create a new folder named 'latihan3' in the 'html' folder on your desktop.
- ๐ Open the 'latihan3' folder in Sublime Text by dragging it into the application.
- ๐ Create a new file named 'paragraf.html' and save it before writing any code.
- ๐ป Type basic HTML structure using 'html' and 'tab', and set the title to 'html paragraf'.
- ๐ค Use the 'p' tag to create paragraphs; each 'p' tag represents a new paragraph.
- ๐ Right-click and select 'Open in browser' to view the HTML file and see the paragraphs displayed.
- ๐ Use the 'br' tag to add line breaks within paragraphs and the 'hr' tag to add horizontal lines.
- ๐๏ธ Use the 'b' tag for bold text, the 'i' tag for italic text, and the 'u' tag for underlined text.
- โก Use 'strong' for strong emphasis (bold) and 'em' for emphasis (italic) to add meaning to the text.
- ๐ฌ Add comments in the code to explain sections and use keyboard shortcuts to quickly comment or uncomment code.
Q & A
What is the main topic discussed in the video script?
-The main topic discussed in the video script is the use of HTML paragraph tags, specifically the 'P' tag, and how to create and manipulate paragraphs in HTML.
Why should we create a new folder for the HTML practice?
-Creating a new folder for HTML practice helps in organizing the files systematically and makes it easier to manage and locate the practice files.
What application is suggested for creating and editing HTML files in the video script?
-The video script suggests using Sublime Text as the application for creating and editing HTML files.
How do you create a new file in Sublime Text according to the script?
-To create a new file in Sublime Text, you can right-click and select 'New File', then save the file with a name, such as 'paragraph.html', using 'Save' or 'Ctrl + S'.
What is the basic structure of an HTML document as mentioned in the script?
-The basic structure of an HTML document includes the 'html' tag, 'head' tag with a 'title', and 'body' tag where the content like paragraphs is placed.
How can you create a paragraph in HTML?
-To create a paragraph in HTML, you can use the 'P' tag, type the content within the opening and closing 'P' tags, and press 'Tab' for proper formatting.
What is the purpose of the 'BR' tag in HTML as discussed in the script?
-The 'BR' tag in HTML is used to create a line break, adding a new line after the content within the 'BR' tag.
What is the function of the 'HR' tag in HTML?
-The 'HR' tag in HTML is used to create a horizontal rule or line, often used to separate content visually within a webpage.
What are the 'B', 'I', and 'U' tags used for in HTML, according to the script?
-The 'B' tag is used to make text bold, the 'I' tag is for making text italic, and the 'U' tag is for adding an underline to the text.
What are the 'Strong' and 'Em' tags used for in HTML, and how do they differ from 'B' and 'I' tags?
-The 'Strong' tag is used to give stronger emphasis to text, making it bold, while the 'Em' tag is for emphasizing text, making it italic. They differ from 'B' and 'I' tags in that 'Strong' and 'Em' convey semantic importance in addition to styling.
How can you comment out a block of code in Sublime Text?
-To comment out a block of code in Sublime Text, you can select the block, press 'Ctrl' (or 'Command' on Mac), and then press '/' to toggle commenting.
Outlines
๐ Introduction to HTML Paragraphs and Tags
This paragraph introduces the concept of using the HTML <p> tag to create paragraphs. It guides the user through creating a new folder in their HTML directory, opening it in Sublime Text, and creating a new file named 'paragraph.html'. The user is instructed to start with the basic HTML structure and then add paragraphs using the <p> tag. The paragraph also explains how to view the result in a browser and how to create multiple paragraphs. It touches on the automatic spacing provided by HTML and introduces additional tags like <br> and <hr> for line breaks and horizontal rules, respectively.
๐ง Enhancing Text with HTML Tags
The second paragraph focuses on enhancing text with various HTML tags such as <b> for bold text, <i> for italic text, and <u> for underlined text. It provides examples of how to apply these tags within a paragraph to emphasize certain words or phrases. The paragraph also introduces the use of <strong> and <em> tags for stronger emphasis, explaining that these tags not only change the appearance but also the semantic meaning of the text. The use of horizontal rules (<hr>) is mentioned again for better organization of content, and the paragraph concludes with the suggestion to comment the code for better readability and maintenance.
Mindmap
Keywords
๐กHTML
๐กTag P
๐กFolder
๐กSublime Text
๐กSave
๐กStructure
๐กTag BR
๐กTag HR
๐กBold, Italic, Underline
๐กCSS
๐กStrong and Em
๐กComment
Highlights
Introduction to the topic of paragraph tags in HTML.
Suggestion to create a new folder in the HTML directory for organization.
Instructions on how to open the new folder in Sublime Text.
Explanation of how to create a new file in Sublime Text and save it as 'paragraph.html'.
Demonstration of creating a basic HTML structure with 'html', 'head', and 'body' tags.
Guidance on writing the title 'HTML Paragraph' within the 'title' tag.
Description of how to use the 'P' tag to create paragraphs.
Method to create multiple paragraphs by opening and closing 'P' tags.
Explanation of how HTML automatically adds spacing before and after paragraphs.
Introduction of the 'BR' tag to add a new line within a paragraph.
Use of the 'HR' tag to create a horizontal line in the document.
Introduction of 'B', 'I', and 'U' tags for text decoration.
Explanation of how to make text bold using the 'B' tag.
Instructions on making text italic with the 'I' tag.
Demonstration of how to underline text using the 'U' tag.
Introduction of 'Strong' and 'Em' tags for semantic emphasis in text.
Explanation of the difference between 'B', 'I', and 'U' for decoration and 'Strong', 'Em' for emphasis.
Demonstration of using 'Strong' to make text bold and 'Em' to make it italic.
Importance of using 'Strong' and 'Em' for semantic meaning rather than just aesthetics.
Instructions on how to comment out sections of code in Sublime Text for readability.
Use of keyboard shortcuts for commenting and uncommenting code blocks.
Transcripts
Selamat datang kembali yang akan kita
bahas pada video kali ini adalah tag
paragraf pada HTML tag yang akan kita
gunakan adalah tag P sebelum kita
mencoba menggunakan tag P pada web kita
ada baiknya kita buat dulu folder baru
di dalam folder html Kita harapan saya
kalian masih punya folder html di
desktop ya kita buka kita tambahkan ini
eh latihan kita sat dan du di
video-video Sebelumnya kita akan buat
satu folder baru kita kasih nama latihan
3 lalu
eh kita buka latihan tig ini di sublim
Tex Oke setelah foldernya dibuat kita
bisa langsung drag folder ini ke dalam
aplikasi Sublime text nah ini artinya
folder Kalian tadi sudah aktif atau
terbuka untuk melihat isi foldernya
kalian bisa ke view sidebar show sidebar
atau e short c-nya ctrol KB atau kalau
di Mac comand KB sama ya ini adalah
folder kita lalu untuk membuat file baru
kita bisa Klik Kanan klik new file kita
bisa sembunyikan lagi sidebar-nya ketik
ctrl KB lalu jangan lupa Sebelum
mengetikkan apapun biasakan save dulu
file-nya file save atau Ctrl S kita buat
file kita kasih nama
paragraf.html klik save setelah ini kita
langsung buat struktur html seperti
seperti yang di video sebelumnya kalian
masih ingat kita tinggal ketik html lalu
tekan tab otomatis struktur htmlnya
dibuatkan dalam titlenya kita tulis html
paragraf ya dan di dalam bodinya kalau
kita mau menuliskan paragraf kita cukup
Tuliskan tag-nya P lalu tekan tab kita
tulis saja ini adalah
paragraf S misalkan begitu ya J dengan
kali menuliskan begini saja artinya
kalian sudah membuat satu buah paragraf
untuk melihat hasilnya kalian bisa Klik
Kanan Open in browser ini tampil ini
adalah paragraf 1 untuk membuat paragraf
selanjutnya kalian bisa buka lagi tag P
ya lalu kalian bisa Tuliskan ini adalah
paragraf 2 ini artinya kalian sudah
membuat dua buah paragraf kalau kita
lihat hasilnya kalian bisa altab ke
browser lagi kita refresh halamannya
sekarang kalian punya dua buah paragraf
kalau kita membuat parag graf html
otomatis membuatkan spasi sebelum dan
setelah paragrafnya sehingga ada jarak
gitu kalau kalian rasa jaraknya kurang
banyak atau kalian ingin menambahkan
jarak kalian bisa menggunakan tag
bantuan yaitu BR ya nanti kita akan coba
BR dan HR BR itu untuk menambahkan baris
baru dan HR itu untuk membuat garis
horizontal kita coba tambahkan baris
baru dengan menggunakan tag BR di sini
kita lihat ini hasil Sebelumnya saya
tekan refresh pasi antar paragrafnya
bertambah BR ini juga kita bisa simpan
di mana saja Misalnya saya enggak simpan
di luar tagp tapi saya mau simpan di
dalam paragrafnya saya tulis di sini
bisa ya Jadi ini efeknya adalah dia akan
menambahkan baris baru setelah tulisan
ini adalah turun satu baris lalu
paragraf 2 kita lihat
hasilnya seperti ini dan untuk tag HR
itu untuk menambahkan garis horizontal J
kalau saya tulis di sini HR jadi setelah
paragraf 2 saya kembali ke Brows Saya
pencet refresh akan muncul e sebuah
garis tek selanjutnya yang akan kita
bahas adalah tiga buah tag ini yang
pertama ada tag B yang kedua ada tag I
yang ketiga ada tag u Mungkin kalian
sudah bisa menebak fungsi dari tiap-tiap
tag ini yang B untuk membuat teks
menjadi Bold yang I untuk membuat teks
menjadi italik yang u untuk menambahkan
underline contoh penggunaannya seperti
ini misalkan Saya punya paragraf lalu
saya tulis nah saya mau menambahkan
misalkan untuk Selamat datang Saya mau
buat dia menjadi cetak tebal saya
tinggal tambahkan tag B di sini ya lalu
untuk pemrograman web 1 Saya ingin buat
dia jadi cetak miring untuk sandik gali
saya membuat dia jadi underline Oke jadi
ini hasilnya kalau kita lihat Saya
save lihat hasilnya saya refresh ini
selamat datangnya cetak tebalemograman
web Satya cetak miring dan sandik
galinya ada underlinenya baik itu untuk
tag b i dan u tag ini gunakan untuk
dekorasi dan dekorasi si seperti yang
kita sudah pelajari adalah gunanya dari
CSS jadi untuk menampilkan cetak tebal
miring dan underline itu bisa
menggunakan CSS kalau misalkan kalian
ingin membuat paragraf yang memiliki
makna misalkan di dalamnya ada penekanan
atau kalian ingin membuat sebuah teks
itu penting gitu ya itu kalian gunakan
dua tag ini ada yang disebut dengan
Strong dan m m ini singkatan dari
emphasize atau penekanan Jadi kalau
kalian lihat spesifikasinya emphasiz itu
digunakan untuk untuk memberikan
penekanan pada sebuah teks dan strong
itu untuk memberikan penekanan yang
lebih kuat lagi hasilnya m itu membuat
font menjadi miring seperti italik dan
strong itu membuat font menjadi cetak
tebal ya jadi contoh penggunaannya
mungkin saya bisa Contohkan begini ini
saya kasih HR dulu biar rapi terus saya
punya paragraf misalnya gini nah ini
pengumumannya saya bisa bungkus dengan
tek strong karena saya ingin memberikan
penekanan pada kata
pengumuman dan untuk tulisan ditiadakan
juga saya ingin memberikan penekanan
tapi menggunakan emphasiz atau tag
em ya kita lihat
hasilnya pengumuman jadi cetak tebal dan
ditiadakan menjadi cetak miring efeknya
Sama persis dengan b dan I tapi di
paragraf yang terakhir ini e teks umuman
dan ditiadakannya memiliki makna yang
berbeda dari hanya sekedar estetika atau
dekorasi di paragraf sebelumnya Kalau
kalian lihat saya sudah punya tiga buah
blok paragraf ini biar enggak lupa
sebaiknya kita kasih komentar misalnya
yang pertama saya ingin bahas tag P BR
dan HR saya tinggal kasih komentar
seperti video sebelumnya lebih kecil
tanda seru minus dua kali lalu isi
komentarnya apa misalnya tag P BR dan HR
akhiri dengan minus minus lebih besar
atau sbl t menyediakan shortcutnya
supaya lebih cepat kalian tinggal tekan
conttrol/ atau di make comand SL Ya
otomatis dia membuatkan komentar dan
kursor sudah berada di tengah-tengah
kita tinggal tulis atau dia juga bisa
memberikan komentar untuk beberapa baris
sekaligus contohnya Ini misalkan Saya
mau blok ini dan jadikan ini Komentar
saya tinggal seleksi lalu tekan
conttrol dia jadi komentar untuk mengemb
ya lagi kita tinggal blok lagi conttrol
slash lagi ya kalian bisa tambahkan
untuk
semua blok paragraf ini yang terakhir
Browse More Related Video
5.0 / 5 (0 votes)