HTML Dasar : Paragraf (5/13)

Web Programming UNPAS
5 Feb 201507:14

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

00:00

๐Ÿ“ 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.

05:00

๐Ÿ”ง 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

HTML, or HyperText Markup Language, is the standard language used for creating web pages. It defines the structure and layout of a web document using a variety of tags and attributes. In the video, HTML is the main focus as the script discusses how to use specific HTML tags to create paragraphs and apply formatting.

๐Ÿ’กTag P

The 'P' tag in HTML stands for paragraph. It is used to define a paragraph in a web document. The script describes the creation of a new HTML file and using the 'P' tag to write text that will be displayed as a paragraph on a webpage.

๐Ÿ’กFolder

A folder in computing is a location on a storage device where files can be organized and stored. In the context of the video, the script mentions creating a new folder within the 'html' directory on the desktop to organize the HTML files for the web exercises.

๐Ÿ’กSublime Text

Sublime Text is a popular text editor used for code, markup, and prose. The script refers to using Sublime Text to create and edit HTML files, demonstrating how to open the editor, create a new file, and save it with the '.html' extension.

๐Ÿ’กSave

Saving in the context of computing refers to the process of storing data so that it can be retrieved and used later. The script instructs viewers to save their new HTML file with a specific name, which is a crucial step in the file creation process.

๐Ÿ’กStructure

In web development, structure refers to the underlying framework of a webpage, which includes the arrangement of HTML tags. The script explains how to create the basic structure of an HTML document, including the 'html', 'head', and 'body' sections.

๐Ÿ’กTag BR

The 'BR' tag in HTML is used to insert a line break within a paragraph. The script discusses adding 'BR' tags to create additional spacing between lines of text in a paragraph, enhancing the layout of the content.

๐Ÿ’กTag HR

The 'HR' tag in HTML is used to create a thematic break, which is visually represented as a horizontal rule or line. The script mentions using 'HR' to add a horizontal line in the document, which can be used to separate different sections of content.

๐Ÿ’กBold, Italic, Underline

These terms refer to text formatting styles. 'Bold' makes text thicker and more prominent, 'Italic' slants text to the right, and 'Underline' adds a line beneath the text. The script provides examples of using 'B', 'I', and 'U' tags to apply these styles to text within a paragraph.

๐Ÿ’กCSS

CSS stands for Cascading Style Sheets, a language used to describe the presentation of a document written in HTML or XML. The script mentions CSS in relation to text decoration, indicating that while HTML tags like 'B', 'I', and 'U' can be used for basic styling, CSS offers more control and flexibility.

๐Ÿ’กStrong and Em

The 'Strong' and 'Em' tags in HTML are used to indicate importance or emphasis within text. 'Strong' typically displays text in bold to signify strong importance, while 'Em' displays text in italic to signify emphasis. The script explains the use of these tags to add semantic meaning to text, indicating that they are not just for decoration but also to convey the significance of the content.

๐Ÿ’กComment

In programming and markup languages, comments are used to explain the code, making it more understandable for others reading it. The script discusses adding comments in the HTML file using the '<!--' and '-->' syntax to describe sections of code, such as the use of 'P', 'BR', and 'HR' tags.

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

play00:00

Selamat datang kembali yang akan kita

play00:02

bahas pada video kali ini adalah tag

play00:05

paragraf pada HTML tag yang akan kita

play00:09

gunakan adalah tag P sebelum kita

play00:14

mencoba menggunakan tag P pada web kita

play00:16

ada baiknya kita buat dulu folder baru

play00:19

di dalam folder html Kita harapan saya

play00:21

kalian masih punya folder html di

play00:23

desktop ya kita buka kita tambahkan ini

play00:26

eh latihan kita sat dan du di

play00:30

video-video Sebelumnya kita akan buat

play00:32

satu folder baru kita kasih nama latihan

play00:35

3 lalu

play00:37

eh kita buka latihan tig ini di sublim

play00:40

Tex Oke setelah foldernya dibuat kita

play00:44

bisa langsung drag folder ini ke dalam

play00:46

aplikasi Sublime text nah ini artinya

play00:49

folder Kalian tadi sudah aktif atau

play00:52

terbuka untuk melihat isi foldernya

play00:55

kalian bisa ke view sidebar show sidebar

play00:58

atau e short c-nya ctrol KB atau kalau

play01:02

di Mac comand KB sama ya ini adalah

play01:06

folder kita lalu untuk membuat file baru

play01:09

kita bisa Klik Kanan klik new file kita

play01:11

bisa sembunyikan lagi sidebar-nya ketik

play01:14

ctrl KB lalu jangan lupa Sebelum

play01:16

mengetikkan apapun biasakan save dulu

play01:18

file-nya file save atau Ctrl S kita buat

play01:23

file kita kasih nama

play01:25

paragraf.html klik save setelah ini kita

play01:27

langsung buat struktur html seperti

play01:29

seperti yang di video sebelumnya kalian

play01:31

masih ingat kita tinggal ketik html lalu

play01:34

tekan tab otomatis struktur htmlnya

play01:37

dibuatkan dalam titlenya kita tulis html

play01:41

paragraf ya dan di dalam bodinya kalau

play01:45

kita mau menuliskan paragraf kita cukup

play01:47

Tuliskan tag-nya P lalu tekan tab kita

play01:52

tulis saja ini adalah

play01:55

paragraf S misalkan begitu ya J dengan

play01:59

kali menuliskan begini saja artinya

play02:01

kalian sudah membuat satu buah paragraf

play02:03

untuk melihat hasilnya kalian bisa Klik

play02:05

Kanan Open in browser ini tampil ini

play02:09

adalah paragraf 1 untuk membuat paragraf

play02:11

selanjutnya kalian bisa buka lagi tag P

play02:14

ya lalu kalian bisa Tuliskan ini adalah

play02:17

paragraf 2 ini artinya kalian sudah

play02:19

membuat dua buah paragraf kalau kita

play02:21

lihat hasilnya kalian bisa altab ke

play02:24

browser lagi kita refresh halamannya

play02:26

sekarang kalian punya dua buah paragraf

play02:28

kalau kita membuat parag graf html

play02:30

otomatis membuatkan spasi sebelum dan

play02:33

setelah paragrafnya sehingga ada jarak

play02:35

gitu kalau kalian rasa jaraknya kurang

play02:37

banyak atau kalian ingin menambahkan

play02:40

jarak kalian bisa menggunakan tag

play02:43

bantuan yaitu BR ya nanti kita akan coba

play02:46

BR dan HR BR itu untuk menambahkan baris

play02:49

baru dan HR itu untuk membuat garis

play02:52

horizontal kita coba tambahkan baris

play02:54

baru dengan menggunakan tag BR di sini

play02:57

kita lihat ini hasil Sebelumnya saya

play02:59

tekan refresh pasi antar paragrafnya

play03:01

bertambah BR ini juga kita bisa simpan

play03:04

di mana saja Misalnya saya enggak simpan

play03:06

di luar tagp tapi saya mau simpan di

play03:08

dalam paragrafnya saya tulis di sini

play03:12

bisa ya Jadi ini efeknya adalah dia akan

play03:14

menambahkan baris baru setelah tulisan

play03:16

ini adalah turun satu baris lalu

play03:18

paragraf 2 kita lihat

play03:20

hasilnya seperti ini dan untuk tag HR

play03:23

itu untuk menambahkan garis horizontal J

play03:25

kalau saya tulis di sini HR jadi setelah

play03:27

paragraf 2 saya kembali ke Brows Saya

play03:30

pencet refresh akan muncul e sebuah

play03:34

garis tek selanjutnya yang akan kita

play03:36

bahas adalah tiga buah tag ini yang

play03:38

pertama ada tag B yang kedua ada tag I

play03:41

yang ketiga ada tag u Mungkin kalian

play03:43

sudah bisa menebak fungsi dari tiap-tiap

play03:45

tag ini yang B untuk membuat teks

play03:47

menjadi Bold yang I untuk membuat teks

play03:49

menjadi italik yang u untuk menambahkan

play03:51

underline contoh penggunaannya seperti

play03:53

ini misalkan Saya punya paragraf lalu

play03:55

saya tulis nah saya mau menambahkan

play03:57

misalkan untuk Selamat datang Saya mau

play03:59

buat dia menjadi cetak tebal saya

play04:02

tinggal tambahkan tag B di sini ya lalu

play04:05

untuk pemrograman web 1 Saya ingin buat

play04:07

dia jadi cetak miring untuk sandik gali

play04:10

saya membuat dia jadi underline Oke jadi

play04:12

ini hasilnya kalau kita lihat Saya

play04:14

save lihat hasilnya saya refresh ini

play04:18

selamat datangnya cetak tebalemograman

play04:20

web Satya cetak miring dan sandik

play04:22

galinya ada underlinenya baik itu untuk

play04:24

tag b i dan u tag ini gunakan untuk

play04:27

dekorasi dan dekorasi si seperti yang

play04:30

kita sudah pelajari adalah gunanya dari

play04:33

CSS jadi untuk menampilkan cetak tebal

play04:36

miring dan underline itu bisa

play04:38

menggunakan CSS kalau misalkan kalian

play04:40

ingin membuat paragraf yang memiliki

play04:42

makna misalkan di dalamnya ada penekanan

play04:44

atau kalian ingin membuat sebuah teks

play04:46

itu penting gitu ya itu kalian gunakan

play04:49

dua tag ini ada yang disebut dengan

play04:51

Strong dan m m ini singkatan dari

play04:54

emphasize atau penekanan Jadi kalau

play04:56

kalian lihat spesifikasinya emphasiz itu

play04:58

digunakan untuk untuk memberikan

play05:00

penekanan pada sebuah teks dan strong

play05:02

itu untuk memberikan penekanan yang

play05:04

lebih kuat lagi hasilnya m itu membuat

play05:08

font menjadi miring seperti italik dan

play05:10

strong itu membuat font menjadi cetak

play05:13

tebal ya jadi contoh penggunaannya

play05:15

mungkin saya bisa Contohkan begini ini

play05:18

saya kasih HR dulu biar rapi terus saya

play05:20

punya paragraf misalnya gini nah ini

play05:24

pengumumannya saya bisa bungkus dengan

play05:26

tek strong karena saya ingin memberikan

play05:29

penekanan pada kata

play05:32

pengumuman dan untuk tulisan ditiadakan

play05:35

juga saya ingin memberikan penekanan

play05:38

tapi menggunakan emphasiz atau tag

play05:42

em ya kita lihat

play05:47

hasilnya pengumuman jadi cetak tebal dan

play05:50

ditiadakan menjadi cetak miring efeknya

play05:52

Sama persis dengan b dan I tapi di

play05:56

paragraf yang terakhir ini e teks umuman

play05:59

dan ditiadakannya memiliki makna yang

play06:01

berbeda dari hanya sekedar estetika atau

play06:04

dekorasi di paragraf sebelumnya Kalau

play06:06

kalian lihat saya sudah punya tiga buah

play06:08

blok paragraf ini biar enggak lupa

play06:11

sebaiknya kita kasih komentar misalnya

play06:13

yang pertama saya ingin bahas tag P BR

play06:16

dan HR saya tinggal kasih komentar

play06:18

seperti video sebelumnya lebih kecil

play06:21

tanda seru minus dua kali lalu isi

play06:23

komentarnya apa misalnya tag P BR dan HR

play06:29

akhiri dengan minus minus lebih besar

play06:32

atau sbl t menyediakan shortcutnya

play06:35

supaya lebih cepat kalian tinggal tekan

play06:38

conttrol/ atau di make comand SL Ya

play06:41

otomatis dia membuatkan komentar dan

play06:43

kursor sudah berada di tengah-tengah

play06:45

kita tinggal tulis atau dia juga bisa

play06:47

memberikan komentar untuk beberapa baris

play06:49

sekaligus contohnya Ini misalkan Saya

play06:51

mau blok ini dan jadikan ini Komentar

play06:53

saya tinggal seleksi lalu tekan

play06:56

conttrol dia jadi komentar untuk mengemb

play06:59

ya lagi kita tinggal blok lagi conttrol

play07:03

slash lagi ya kalian bisa tambahkan

play07:06

untuk

play07:07

semua blok paragraf ini yang terakhir

Rate This
โ˜…
โ˜…
โ˜…
โ˜…
โ˜…

5.0 / 5 (0 votes)

Related Tags
HTML BasicsWeb DevelopmentHTML TagsP TagBR TagHR TagText FormattingBold TextItalic TextUnderlined Text