HTML Dasar : Paragraf (5/13)

00:07:14
https://www.youtube.com/watch?v=Dl_bIYBc9gM

Resumen

TLDRIn this video, viewers learn about the <p> tag in HTML for creating paragraphs. The tutorial demonstrates how to set up a new folder and file in Sublime Text, create a basic HTML structure, and add multiple paragraphs. It also covers the use of <br> and <hr> tags for spacing, as well as formatting tags like <b>, <i>, <u>, <strong>, and <em> for text decoration and emphasis. The importance of comments in code is highlighted for better organization and clarity.

Para llevar

  • 📁 Create a new folder for HTML files.
  • 📝 Use the <p> tag to define paragraphs.
  • 🔄 Use <br> for line breaks and <hr> for horizontal lines.
  • 💪 <b> makes text bold, <i> makes it italic.
  • 🔤 <u> underlines text, <strong> emphasizes importance.
  • ⚠️ Use <em> for text emphasis.
  • 💬 Comments help organize code effectively.
  • 💾 Always save your work frequently.
  • 🔍 Refresh the browser to see changes.
  • 📚 Practice using different HTML tags.

Cronología

  • 00:00:00 - 00:07:14

    In this video, we discuss the use of the paragraph tag in HTML, specifically the <p> tag. We start by creating a new folder named 'latihan 3' within our HTML folder on the desktop. After opening this folder in Sublime Text, we create a new file named 'paragraf.html' and set up the basic HTML structure. We add a title and write our first paragraph using the <p> tag. We then create a second paragraph and refresh the browser to see both paragraphs displayed with automatic spacing between them. To adjust spacing, we introduce the <br> tag for line breaks and the <hr> tag for horizontal lines, demonstrating their effects in the browser. Next, we explore the <b>, <i>, and <u> tags for text formatting, showing how to make text bold, italic, and underlined, respectively. We emphasize that while these tags can be used for decoration, CSS is the preferred method for styling. We also introduce the <strong> and <em> tags for semantic emphasis, demonstrating their use in a paragraph to convey stronger meaning. Finally, we discuss the importance of commenting in code, showing how to add comments for better organization and clarity in our HTML document.

Mapa mental

Vídeo de preguntas y respuestas

  • What is the purpose of the <p> tag in HTML?

    The <p> tag is used to define paragraphs in HTML.

  • How do you create a new file in Sublime Text?

    Right-click in the folder and select 'New File', or use the shortcut Ctrl + N.

  • What tags are used to add spacing between paragraphs?

    The <br> tag is used for line breaks, and the <hr> tag is used for horizontal lines.

  • What does the <b> tag do?

    The <b> tag makes text bold.

  • What is the difference between <strong> and <b>?

    The <strong> tag indicates strong importance, while <b> is purely for styling.

  • How can you comment in HTML?

    You can comment using <!-- comment here -->.

  • What is the <i> tag used for?

    The <i> tag is used to italicize text.

  • What does the <u> tag do?

    The <u> tag underlines text.

  • How do you save a file in Sublime Text?

    Use the shortcut Ctrl + S or go to File > Save.

  • What is the purpose of the <em> tag?

    The <em> tag is used to emphasize text.

Ver más resúmenes de vídeos

Obtén acceso instantáneo a resúmenes gratuitos de vídeos de YouTube gracias a la IA.
Subtítulos
id
Desplazamiento automático:
  • 00:00:00
    Selamat datang kembali yang akan kita
  • 00:00:02
    bahas pada video kali ini adalah tag
  • 00:00:05
    paragraf pada HTML tag yang akan kita
  • 00:00:09
    gunakan adalah tag P sebelum kita
  • 00:00:14
    mencoba menggunakan tag P pada web kita
  • 00:00:16
    ada baiknya kita buat dulu folder baru
  • 00:00:19
    di dalam folder html Kita harapan saya
  • 00:00:21
    kalian masih punya folder html di
  • 00:00:23
    desktop ya kita buka kita tambahkan ini
  • 00:00:26
    eh latihan kita sat dan du di
  • 00:00:30
    video-video Sebelumnya kita akan buat
  • 00:00:32
    satu folder baru kita kasih nama latihan
  • 00:00:35
    3 lalu
  • 00:00:37
    eh kita buka latihan tig ini di sublim
  • 00:00:40
    Tex Oke setelah foldernya dibuat kita
  • 00:00:44
    bisa langsung drag folder ini ke dalam
  • 00:00:46
    aplikasi Sublime text nah ini artinya
  • 00:00:49
    folder Kalian tadi sudah aktif atau
  • 00:00:52
    terbuka untuk melihat isi foldernya
  • 00:00:55
    kalian bisa ke view sidebar show sidebar
  • 00:00:58
    atau e short c-nya ctrol KB atau kalau
  • 00:01:02
    di Mac comand KB sama ya ini adalah
  • 00:01:06
    folder kita lalu untuk membuat file baru
  • 00:01:09
    kita bisa Klik Kanan klik new file kita
  • 00:01:11
    bisa sembunyikan lagi sidebar-nya ketik
  • 00:01:14
    ctrl KB lalu jangan lupa Sebelum
  • 00:01:16
    mengetikkan apapun biasakan save dulu
  • 00:01:18
    file-nya file save atau Ctrl S kita buat
  • 00:01:23
    file kita kasih nama
  • 00:01:25
    paragraf.html klik save setelah ini kita
  • 00:01:27
    langsung buat struktur html seperti
  • 00:01:29
    seperti yang di video sebelumnya kalian
  • 00:01:31
    masih ingat kita tinggal ketik html lalu
  • 00:01:34
    tekan tab otomatis struktur htmlnya
  • 00:01:37
    dibuatkan dalam titlenya kita tulis html
  • 00:01:41
    paragraf ya dan di dalam bodinya kalau
  • 00:01:45
    kita mau menuliskan paragraf kita cukup
  • 00:01:47
    Tuliskan tag-nya P lalu tekan tab kita
  • 00:01:52
    tulis saja ini adalah
  • 00:01:55
    paragraf S misalkan begitu ya J dengan
  • 00:01:59
    kali menuliskan begini saja artinya
  • 00:02:01
    kalian sudah membuat satu buah paragraf
  • 00:02:03
    untuk melihat hasilnya kalian bisa Klik
  • 00:02:05
    Kanan Open in browser ini tampil ini
  • 00:02:09
    adalah paragraf 1 untuk membuat paragraf
  • 00:02:11
    selanjutnya kalian bisa buka lagi tag P
  • 00:02:14
    ya lalu kalian bisa Tuliskan ini adalah
  • 00:02:17
    paragraf 2 ini artinya kalian sudah
  • 00:02:19
    membuat dua buah paragraf kalau kita
  • 00:02:21
    lihat hasilnya kalian bisa altab ke
  • 00:02:24
    browser lagi kita refresh halamannya
  • 00:02:26
    sekarang kalian punya dua buah paragraf
  • 00:02:28
    kalau kita membuat parag graf html
  • 00:02:30
    otomatis membuatkan spasi sebelum dan
  • 00:02:33
    setelah paragrafnya sehingga ada jarak
  • 00:02:35
    gitu kalau kalian rasa jaraknya kurang
  • 00:02:37
    banyak atau kalian ingin menambahkan
  • 00:02:40
    jarak kalian bisa menggunakan tag
  • 00:02:43
    bantuan yaitu BR ya nanti kita akan coba
  • 00:02:46
    BR dan HR BR itu untuk menambahkan baris
  • 00:02:49
    baru dan HR itu untuk membuat garis
  • 00:02:52
    horizontal kita coba tambahkan baris
  • 00:02:54
    baru dengan menggunakan tag BR di sini
  • 00:02:57
    kita lihat ini hasil Sebelumnya saya
  • 00:02:59
    tekan refresh pasi antar paragrafnya
  • 00:03:01
    bertambah BR ini juga kita bisa simpan
  • 00:03:04
    di mana saja Misalnya saya enggak simpan
  • 00:03:06
    di luar tagp tapi saya mau simpan di
  • 00:03:08
    dalam paragrafnya saya tulis di sini
  • 00:03:12
    bisa ya Jadi ini efeknya adalah dia akan
  • 00:03:14
    menambahkan baris baru setelah tulisan
  • 00:03:16
    ini adalah turun satu baris lalu
  • 00:03:18
    paragraf 2 kita lihat
  • 00:03:20
    hasilnya seperti ini dan untuk tag HR
  • 00:03:23
    itu untuk menambahkan garis horizontal J
  • 00:03:25
    kalau saya tulis di sini HR jadi setelah
  • 00:03:27
    paragraf 2 saya kembali ke Brows Saya
  • 00:03:30
    pencet refresh akan muncul e sebuah
  • 00:03:34
    garis tek selanjutnya yang akan kita
  • 00:03:36
    bahas adalah tiga buah tag ini yang
  • 00:03:38
    pertama ada tag B yang kedua ada tag I
  • 00:03:41
    yang ketiga ada tag u Mungkin kalian
  • 00:03:43
    sudah bisa menebak fungsi dari tiap-tiap
  • 00:03:45
    tag ini yang B untuk membuat teks
  • 00:03:47
    menjadi Bold yang I untuk membuat teks
  • 00:03:49
    menjadi italik yang u untuk menambahkan
  • 00:03:51
    underline contoh penggunaannya seperti
  • 00:03:53
    ini misalkan Saya punya paragraf lalu
  • 00:03:55
    saya tulis nah saya mau menambahkan
  • 00:03:57
    misalkan untuk Selamat datang Saya mau
  • 00:03:59
    buat dia menjadi cetak tebal saya
  • 00:04:02
    tinggal tambahkan tag B di sini ya lalu
  • 00:04:05
    untuk pemrograman web 1 Saya ingin buat
  • 00:04:07
    dia jadi cetak miring untuk sandik gali
  • 00:04:10
    saya membuat dia jadi underline Oke jadi
  • 00:04:12
    ini hasilnya kalau kita lihat Saya
  • 00:04:14
    save lihat hasilnya saya refresh ini
  • 00:04:18
    selamat datangnya cetak tebalemograman
  • 00:04:20
    web Satya cetak miring dan sandik
  • 00:04:22
    galinya ada underlinenya baik itu untuk
  • 00:04:24
    tag b i dan u tag ini gunakan untuk
  • 00:04:27
    dekorasi dan dekorasi si seperti yang
  • 00:04:30
    kita sudah pelajari adalah gunanya dari
  • 00:04:33
    CSS jadi untuk menampilkan cetak tebal
  • 00:04:36
    miring dan underline itu bisa
  • 00:04:38
    menggunakan CSS kalau misalkan kalian
  • 00:04:40
    ingin membuat paragraf yang memiliki
  • 00:04:42
    makna misalkan di dalamnya ada penekanan
  • 00:04:44
    atau kalian ingin membuat sebuah teks
  • 00:04:46
    itu penting gitu ya itu kalian gunakan
  • 00:04:49
    dua tag ini ada yang disebut dengan
  • 00:04:51
    Strong dan m m ini singkatan dari
  • 00:04:54
    emphasize atau penekanan Jadi kalau
  • 00:04:56
    kalian lihat spesifikasinya emphasiz itu
  • 00:04:58
    digunakan untuk untuk memberikan
  • 00:05:00
    penekanan pada sebuah teks dan strong
  • 00:05:02
    itu untuk memberikan penekanan yang
  • 00:05:04
    lebih kuat lagi hasilnya m itu membuat
  • 00:05:08
    font menjadi miring seperti italik dan
  • 00:05:10
    strong itu membuat font menjadi cetak
  • 00:05:13
    tebal ya jadi contoh penggunaannya
  • 00:05:15
    mungkin saya bisa Contohkan begini ini
  • 00:05:18
    saya kasih HR dulu biar rapi terus saya
  • 00:05:20
    punya paragraf misalnya gini nah ini
  • 00:05:24
    pengumumannya saya bisa bungkus dengan
  • 00:05:26
    tek strong karena saya ingin memberikan
  • 00:05:29
    penekanan pada kata
  • 00:05:32
    pengumuman dan untuk tulisan ditiadakan
  • 00:05:35
    juga saya ingin memberikan penekanan
  • 00:05:38
    tapi menggunakan emphasiz atau tag
  • 00:05:42
    em ya kita lihat
  • 00:05:47
    hasilnya pengumuman jadi cetak tebal dan
  • 00:05:50
    ditiadakan menjadi cetak miring efeknya
  • 00:05:52
    Sama persis dengan b dan I tapi di
  • 00:05:56
    paragraf yang terakhir ini e teks umuman
  • 00:05:59
    dan ditiadakannya memiliki makna yang
  • 00:06:01
    berbeda dari hanya sekedar estetika atau
  • 00:06:04
    dekorasi di paragraf sebelumnya Kalau
  • 00:06:06
    kalian lihat saya sudah punya tiga buah
  • 00:06:08
    blok paragraf ini biar enggak lupa
  • 00:06:11
    sebaiknya kita kasih komentar misalnya
  • 00:06:13
    yang pertama saya ingin bahas tag P BR
  • 00:06:16
    dan HR saya tinggal kasih komentar
  • 00:06:18
    seperti video sebelumnya lebih kecil
  • 00:06:21
    tanda seru minus dua kali lalu isi
  • 00:06:23
    komentarnya apa misalnya tag P BR dan HR
  • 00:06:29
    akhiri dengan minus minus lebih besar
  • 00:06:32
    atau sbl t menyediakan shortcutnya
  • 00:06:35
    supaya lebih cepat kalian tinggal tekan
  • 00:06:38
    conttrol/ atau di make comand SL Ya
  • 00:06:41
    otomatis dia membuatkan komentar dan
  • 00:06:43
    kursor sudah berada di tengah-tengah
  • 00:06:45
    kita tinggal tulis atau dia juga bisa
  • 00:06:47
    memberikan komentar untuk beberapa baris
  • 00:06:49
    sekaligus contohnya Ini misalkan Saya
  • 00:06:51
    mau blok ini dan jadikan ini Komentar
  • 00:06:53
    saya tinggal seleksi lalu tekan
  • 00:06:56
    conttrol dia jadi komentar untuk mengemb
  • 00:06:59
    ya lagi kita tinggal blok lagi conttrol
  • 00:07:03
    slash lagi ya kalian bisa tambahkan
  • 00:07:06
    untuk
  • 00:07:07
    semua blok paragraf ini yang terakhir
Etiquetas
  • HTML
  • paragraph
  • <p>
  • <br>
  • <hr>
  • <b>
  • <i>
  • <u>
  • <strong>
  • <em>