HTML Tutorial: Headings & Paragraphs | Web Development Tutorials #5

HTML Tutorial: Headings & Paragraphs | Web Development Tutorials #5

Introduction to HTML and Emmet

In this section, the instructor introduces HTML and Emmet, a set of plugins for text editors that allow for high-speed coding and editing in HTML. The instructor demonstrates how to create a new file in VS code, use Emmet abbreviations, and write basic HTML code.

Getting Started with HTML and Emmet

  • To get started with HTML, open VS code and create a new file.
  • Emmet is a set of plugins for text editors that allow for high-speed coding and editing in HTML.
  • Use the boilerplate provided by the instructor to start writing basic HTML code.
  • Write an h1 tag followed by a paragraph tag to create headings and paragraphs respectively.

Understanding Tags in HTML

  • Tags in HTML are used to define different types of content such as headings, paragraphs, etc.
  • There are six levels of headings (h1-h6), each with varying sizes.
  • It is important to use heading tags appropriately as they affect search engine optimization (SEO).

Using Emmet Abbreviations

  • Use Emmet abbreviations to quickly insert dummy text or multiple elements at once.
  • Toggle word wrap using Command Palette or Alt + Z shortcut to prevent text from falling out of view.

Conclusion

In this section, we learned about the basics of creating an HTML document using VS Code. We also learned about the power of Emmet abbreviations which can help speed up the coding process. Finally, we learned about the importance of using heading tags appropriately in HTML for better SEO.

Understanding HTML Tags

In this section, the speaker introduces HTML tags and attributes. They explain how to use tags like p, strong, em, br, and hr to format text and create line breaks in a webpage.

Introduction to HTML Tags

  • HTML is made up of tags and attributes.
  • There are many different types of tags in HTML, but only a few are important.
  • The speaker demonstrates the use of the strong tag for bolding text and the em tag for emphasizing text.

Creating Line Breaks

  • To create a new line in HTML, you need to use the br tag.
  • The hr tag can be used to create horizontal lines on a webpage.

Using Emmet for Replication

  • Emmet is a powerful tool that allows you to replicate elements quickly and easily.

Bold and Italics Tags in HTML5

In this section, the speaker discusses the use of bold and italic tags in HTML5. They explain why it's not recommended to use these tags anymore and suggest using strong and em instead.

Bold and Italics Tags

  • The speaker demonstrates how to use bold and italic tags in HTML5.
  • However, it's not recommended to use these tags anymore because they are outdated.

Using Strong and Em Instead

  • Instead of using bold and italic tags, it's recommended to use strong and em tags for emphasis.

Typing Tricks in Google Docs

In this section, the speaker explains how to use keyboard shortcuts to navigate and format text in Google Docs.

Using Ctrl + Enter to Create a New Line

  • Pressing Ctrl + Enter creates a new line without breaking up the paragraph.

Saving with Ctrl + S

  • Use Ctrl + S to save your work.

Creating Dummy Text with 23 Words

  • Type "Lorem23" to generate dummy text with 23 words.

Conclusion and Call-to-Action

  • If you found these tips helpful, like the video and save the playlist by clicking on the link provided.
Video description

► Source Code & Notes: https://archive.codewithharry.com/videos/web-development-in-hindi-5 ►This video is a part of this Complete Web Development in Hindi Course Playlist: https://www.youtube.com/playlist?list=PLu0W_9lII9agiCUZYRsvtGTXdxkzPyItg ►Click here to subscribe - https://www.youtube.com/channel/UCeVMnSShP_Iviwkknt83cww ►Checkout my English channel here: https://www.youtube.com/ProgrammingWithHarry Best Hindi Videos For Learning Programming: ►Learn Python In One Video - https://www.youtube.com/watch?v=ihk_Xglr164 ►Python Complete Course In Hindi - https://www.youtube.com/playlist?list=PLu0W_9lII9agICnT8t4iYVSZ3eykIAOME ►C Language Complete Course In Hindi - https://www.youtube.com/playlist?list=PLu0W_9lII9aiXlHcLx-mDH1Qul38wD3aR&disable_polymer=true ►JavaScript Complete Course In Hindi - https://www.youtube.com/playlist?list=PLu0W_9lII9ajyk081To1Cbt2eI5913SsL ►Learn JavaScript in One Video - https://www.youtube.com/watch?v=onbBV0uFVpo ►Learn PHP In One Video - https://www.youtube.com/watch?v=xW7ro3lwaCI ►Django Complete Course In Hindi - https://www.youtube.com/playlist?list=PLu0W_9lII9ah7DDtYtflgwMwpT3xmjXY9 ►Machine Learning Using Python - https://www.youtube.com/playlist?list=PLu0W_9lII9ai6fAMHp-acBmJONT7Y4BSG ►Creating & Hosting A Website (Tech Blog) Using Python - https://www.youtube.com/playlist?list=PLu0W_9lII9agAiWp6Y41ueUKx1VcTRxmf ►Advanced Python Tutorials - https://www.youtube.com/playlist?list=PLu0W_9lII9aiJWQ7VhY712fuimEpQZYp4 ►Object Oriented Programming In Python - https://www.youtube.com/playlist?list=PLu0W_9lII9ahfRrhFcoB-4lpp9YaBmdCP ►Python Data Science and Big Data Tutorials - https://www.youtube.com/playlist?list=PLu0W_9lII9agK8pojo23OHiNz3Jm6VQCH Follow Me On Social Media ►Website (created using Flask) - http://www.codewithharry.com ►Facebook - https://www.facebook.com/CodeWithHarry ►Instagram - https://www.instagram.com/codewithharry/ ►Personal Facebook A/c - https://www.facebook.com/geekyharis Twitter - https://twitter.com/Haris_Is_Here

HTML Tutorial: Headings & Paragraphs | Web Development Tutorials #5 | YouTube Video Summary | Video Highlight