Header Ads Widget

Ticker

6/recent/ticker-posts

HTML Complete Course

Earning Planer June 02, 2024

Start your HTML journey with our free course! Our resource includes a full YouTube playlist and thorough notes to ensure a complete learning experienc



Chapter 1 (Watch Video)


What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • Every web application should contain HTML.HTML is the mandatory technology for web development.It represents structure of web page
  • HTML elements tell the browser how to display the content


Chapter 2, 3, 4 (2, 3, 4 )

What is Code Editor?

A code editor is a software application used by programmers to write and edit source code. It provides features that help with coding efficiency and error reduction, such as syntax highlighting, code completion, and debugging tools. Code editors are essential tools for developers and can vary widely in terms of functionality and complexity.

Types of Code Editors

  1. Text-Based Editors

    • Notepad: Basic text editor with minimal features, primarily for simple text editing.
    • Vim: A highly configurable text editor known for its efficiency and keyboard shortcuts. It has a steep learning curve but is very powerful once mastered.
    • Emacs: Another highly customizable text editor with a wide range of features and extensions. Like Vim, it has a learning curve but offers extensive customization.

  2. Integrated Development Environments (IDEs)

    • Visual Studio Code (VS Code): A free, open-source code editor developed by Microsoft. It supports a wide range of programming languages and has a robust ecosystem of extensions. It's known for its user-friendly interface and versatility.
    • IntelliJ IDEA: A powerful IDE developed by JetBrains, particularly strong in Java development, but also supports other languages through plugins.
    • Eclipse: A widely-used IDE for Java development that also supports other languages via plugins. It's known for its extensibility and large community.
    • NetBeans: An IDE primarily used for Java development, but it supports other languages as well. It includes features like code templates and refactoring tools.
    • Xcode: An IDE for macOS developed by Apple, used for developing applications for macOS, iOS, watchOS, and tvOS.

  3. Lightweight Editors

    • Sublime Text: A sophisticated text editor for code, markup, and prose. It offers features like multi-line editing and a distraction-free mode.
    • Atom: An open-source editor developed by GitHub. It’s highly customizable with packages and themes.
    • Brackets: An open-source editor focused on web development with features like live preview and preprocessor support.

  4. Web-Based Editors

    • CodePen: An online editor and community for front-end designers and developers. It allows you to write HTML, CSS, and JavaScript code and see the results live.
    • JSFiddle: A similar tool to CodePen, enabling you to test and share code snippets online.

  5. Best Choice:

    • Visual Studio Code (VS Code): Widely considered the best due to its versatility, features, and strong community support.

Chapter 5 (Watch Video)

HTML Elements

  • An HTML element is defined by a start tag, some content, and an end tag.
  • The HTML element is everything from the start tag to the end tag.
Examples of some HTML elements:


  • Some HTML elements have only one tag its called self closing tag

NOTE - use '/' in self closing tags.
Examples of some HTMLSelf Closing Tag elements:

Chapter 6 (Watch Video)

HTML Boiler Plate


  • All HTML documents must start with a document type declaration: <!DOCTYPE html> This tag means that our document type is HTML.
  • The HTML document start itself with <html> and ends with </html> The <html> element is the root or main element of an HTML page.

In <html> tag we use <head> and <body> tag. The <head> element contains information about the HTML page like <title>, <meta> and external file linking.

The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. basically this is the body of our document.

Chapter 7 (Watch Video)

What is HTML Attributes?

  • All HTML elements can have attributes.
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag.
  • Attributes usually come in name/value pairs like: name="value".
  • Attributes provide additional information about elements




Chapter 8 (Watch Video)

What Is Vs Code Extensions?

In Visual Studio Code (VS Code), an extension is a piece of software that adds functionality to the base editor. Extensions can enhance your coding experience by providing additional features such as:

  • Auto Rename: Automatically renames variables and functions in your code when you change their name.
  • Live Server: Launches a local development server with live reload capability for static and dynamic pages, allowing you to see changes in real-time.
  • Material Icon Theme: Changes the file icons in the VS Code explorer to a Material Design style for better visual organization.
  • Prettier: An opinionated code formatter that automatically formats your code according to consistent style rules when you save your files.
  • Save Typing: Saves files automatically as you type, helping to ensure your work is saved without manual intervention.

Chapter 9 (Watch Video)

HTML Headings

  • HTML headings are titles or subtitles that you want to display on a webpage.

  • In HTML, there are a total of 6 types of headings, starting from <h1> to <h6>. Each heading tag represents a different level of importance and size:


Chapter 10 (Watch Video)

HTMLParagraphs

The HTML <p> element defines a paragraph.

  • The browser will automatically remove any extra spaces and lines when the page is displayed

HTML Horizontal Rules

  • The <hr> element is used to separate content


HTML Line Breaks

  • The HTML <br/> element defines a line break.
  • Use <br/> if you want a line break (a new line) without starting a new paragraph


HTML Preformatted Text

  • The text in the <pre> tag appears in the same way in the output as it is written in HTML. That means if more than one space is given in it or enter (line break) is used, whatever way you type the text in this tag, it appears in the same way in the output.



Chapter 11 (Watch Video)

HTML Bold Text Element

  • The HTML <b> element defines bold text, without any extra importance, means if you are use this element then this element does not make any importance or any other thing, it's only design text normal to bold only.


HTML Italic Text Element

  • The HTML <i> element defines bold text, without any extra importance, means if you are use this element then this element does not make any importance or any other thing, it's only design text normal to distorted only.



Chapter 12 (Watch Video)

HTML Strong Text Element

  • The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.


NOTE - Strong is bold but bold cannot be strong, There are some differences between the two which we will look at later.

HTML Emphasized Text Element

  • The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.
  • Emphasize means that we increase the importance of a text, But remember that <strong> tag is given more importance than <em>. If both are used in a paragraph then <strong> will get importance first and then <em>.


NOTE - Emphasized is italic but italic cannot be Emphasized, There are some differences between the two which we will look at later.


Chapter 13 (Watch Video)

Difference <b><i> Vs <strong><Emphasized>

<b> Vs <strong> :-
In HTML, <b> and <strong> are both used to make text bold, but they have different meanings:
<b>: This tag simply styles the text to be bold without any semantic meaning.
<strong>: This tag indicates that the text is important. It conveys a stronger importance and can also simply styles the text to be bold.
So, use <b> for simply styles the text to be bold and <strong> for important text!

<i> Vs <em> :-
In HTML, <i> and <em> are both used to make text italic, but they have different meanings:
<i>: This tag simply styles the text to be italic without any semantic meaning.
<em>: This tag indicates that the text is second most important text after <strong>. It conveys a stronger importance and can also simply styles the text to be bold.
So, use <b> for simply styles the text to be bold and <strong> for important text!

Chapter 14 (Watch Video)

Mark Text

  • The HTML <mark> element defines text that should be marked or highlighted.


Small Text

  • The HTML <small> element defines smaller text.


Chapter 15 (Watch Video)


Deleted Text

  • The HTML <del> element shows text that has been removed from a document. Browsers usually show this text with a line through it.


Inserted Text

  • The HTML `<ins>` element shows text that has been added to a document. Browsers usually underline this text.


Chapter 16 (Watch Video)

Subscript Text

  • The HTML <sub> element is used for subscript text. This text appears a little lower than the regular line and is sometimes smaller. Subscript text is often used for things like chemical formulas, such as H₂O.



Superscript Text

  • The HTML <sup> element is used for superscript text. This text appears a little higher than the regular line and is sometimes smaller. Superscript text is often used for footnotes, like WWW¹.


Chapter 17 (Watch Video)

Comment Tag

  • With comments you can place notifications and reminders in your HTML code. You can add comments to your HTML source by using the following syntax:

More notes coming as soon as possible

Tags:

Post a Comment

0 Comments

* Thanks To Visit Out Website