HTML|Css|Javascript @ 11:00 AM (IST) by Mr.Ram Kumar Day-4

Summary

The session covers three foundational HTML topics: text-formatting tags, HTML elements and their display behavior, and attributes. The instructor reviews basic HTML concepts, demonstrates tags in a browser, and assigns two practice tasks.

1. HTML recap

• HTML tags are predefined markup written inside angle brackets.
• Tags are generally either:
  • Paired tags, with opening and closing tags.
  • Empty (void) elements, which have no closing tag or content, such as <br>, <img>, and <input>.
• The instructor briefly revisits HTML’s history, naming Tim Berners-Lee as its inventor and referring to HTML5’s standardization in 2014.

2. Formatting tags

Formatting tags affect how text appears or communicate what the text represents. The instructor demonstrates:

• <b> and <strong>: Both usually display bold text. <strong> also gives the content semantic importance.
• <u> and <ins>: Both can appear underlined. <ins> represents inserted text, such as text added within a paragraph.
• <i> and <em>: Both usually display italic text. <em> conveys emphasis.
• <s>, <strike>, and <del>: Display crossed-out text. The instructor advises using <del> rather than the obsolete <strike> tag.
• <code>: Marks code and typically displays it in a monospace font. Meaningful tags make code easier to identify and maintain.
• <small> and <big>: Display smaller or larger text. <big> is obsolete.
• <sup> and <sub>: Place text above or below the baseline, respectively—for example, exponents in mathematics or numbers in chemical formulas.
• <mark>: Highlights text, typically with a yellow background.
• <pre>: Preserves spaces and line breaks as written in the source. Its default behavior differs from ordinary text wrapping.
• <br>: Creates a line break and is an empty element.

The lesson stresses that tags should be chosen according to the content and the page’s requirements. It also introduces Lorem text as a way to insert dummy content during practice.

3. Elements and display behavior

An element is the combination of an opening tag, its content, and a closing tag. Empty or void elements have no content or closing tag.

The instructor explains three common display categories:

• Block elements start on a new line and generally occupy the available width. Examples include headings, <div>, <article>, <table>, and <section>.
• Inline elements occupy only the space their content needs and can appear alongside other content. Examples include <strong>, <b>, and <i>.
• Inline-block elements can sit alongside other content while also accepting height and width settings. The instructor uses images, inputs, and buttons as examples.

The demonstrations compare headings with inline text and show how content moves to another line when there is insufficient space. CSS can change an element’s display behavior.

4. Attributes

Attributes provide additional information about an element. They are written in the element’s opening tag.

The instructor introduces several groups and examples:

• Basic attributes
  • id: Identifies an individual element and is commonly used to target it in CSS.
  • class: Groups elements so multiple elements can be targeted together.
  • title: Supplies a tooltip that appears when the user hovers over the element.
  • style: Applies CSS directly to an element.
• Other global attributes mentioned include lang, dir, accesskey, and tabindex.
• Event attributes, such as onclick, onsubmit, and mouse events, are introduced, with their detailed study deferred to JavaScript.
• Element-specific attributes include href, src, and type; these are intended for particular kinds of elements.

A key distinction is made between the <title> tag, which names the webpage, and the title attribute, which can show a tooltip for an element.

5. Demonstration and practical guidance

• The instructor demonstrates formatting tags, line breaks, code display, and tooltips in an HTML page.
• In VS Code, typing ! and pressing Enter—or using the html:5 abbreviation—is shown as a way to generate an HTML document structure.
• Ctrl + / is given as the shortcut for commenting code in VS Code.
• The instructor connects meaningful tags with better readability and maintainability, and briefly mentions their possible relevance to search-engine optimization.

6. Assignments

Students are asked to complete two tasks:

1. Choose any product and create a page showing its product data. Do not include product images.
2. Recreate the referenced webpage as closely as possible, with the content centered. Do not use the <br> tag. Use the displayed page as a reference and take screenshots where needed.

Speakers and sources featured

• Mr. Ram Kumar — instructor explaining HTML concepts and demonstrating examples.
• Class participants — students attending online and in person. They answer questions and ask for clarification. No other clearly identifiable speaker is featured.