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

Summary

Review of Web Technologies

The instructor began by reviewing the previous lesson:

• The web was described as a way to share and access information through interconnected resources on the Internet.
• Technology was presented as a means of reducing human effort.
• A website is made up of multiple web pages.
• The lesson contrasted:
  • Static pages, whose content is generally the same for different users.
  • Dynamic pages, whose content can vary and may interact more extensively with databases.
• The instructor also briefly revisited single-page and multi-page applications, linking web development to HTML, CSS, and JavaScript.

What HTML Is Used For

HTML stands for HyperText Markup Language:

• Hypertext refers to links between pages or resources.
• Markup refers to the angle-bracket notation used to write tags.
• Language was explained as a way to communicate instructions to a browser.

HTML provides the structure of a web page and can organize or display text, images, audio, video, tables, lists, and forms. The instructor emphasized that HTML is tag-based.

The instructor described HTML as easy to learn and said it is not used to create programming logic or page design; those tasks require JavaScript and CSS, respectively.

Brief History of the Web and HTML

The instructor presented this overview:

• 1989: Tim Berners-Lee introduced the web.
• 1991: HTML was introduced.
• 1993: An early HTML version supported basic text.
• 1995: A later version added simple tables.
• 1997: The lesson described further table improvements and simple forms.
• 1999: HTML 4 was presented as improving forms and enabling basic CSS connections.
• 2000: XHTML was introduced as a more rules-oriented form of HTML.
• 2014: HTML5 was presented as adding stronger multimedia support and CSS-related improvements.

The instructor said the course would focus on HTML5 and also cover outdated tags and current HTML concepts.

Basic HTML Document Structure

The instructor introduced the standard parts of an HTML document:

1. <!DOCTYPE html> — identifies the document as using modern HTML.
2. <html> — the root element containing the page.
3. <head> — holds page information and links to external resources.
4. <body> — holds the content shown in the browser, such as text, images, tables, and forms.

Students were told to understand and remember this structure because it may be requested in front-end developer interviews.

Creating and Running an HTML File

The instructor demonstrated creating a simple page in Notepad and VS Code.

In Notepad:

• Write the HTML structure and place visible text inside the body.
• Save the file with the .html extension.
• Open the saved file in a browser to view it.

In VS Code:

• Create or open a dedicated project folder.
• Open a terminal in that folder and enter code . to open the folder in VS Code. Another demonstrated option was to type CMD into the folder’s address bar, then run code ..
• Create an HTML file, write the page structure, and run it.
• Install the Live Server extension to preview the page locally. The instructor demonstrated using Go Live, right-clicking and choosing Open with Live Server, or the shortcut Alt+L+O.
• With autosave enabled, changes can update automatically; otherwise, save the file before expecting the preview to reflect edits.

The instructor also gave a brief tour of VS Code’s Explorer, Search, Git, and Extensions panels.

Tags and Tag Types

A tag was described as a word written inside angle brackets.

The instructor introduced two categories:

• Paired tags: Have opening and closing tags. Examples included html, head, body, headings, links, lists, tables, and forms.
• Unpaired or “odd” tags: Do not have a separate closing tag. Examples mentioned included image, line-break, and horizontal-rule tags.

Heading Tags and a Practice Example

HTML provides six heading elements: <h1> through <h6>.

• <h1> was shown as the largest default heading and <h6> as the smallest.
• The instructor gave 32 px for <h1> and 16 px for <h4>, and assigned students to find the sizes of the other headings.
• Headings should reflect the organization of content—such as a main heading, subheading, and lower-level heading—rather than being chosen only for their visual size.
• The class created a simple page about motorcycles, using headings for motorcycle names and smaller headings for descriptive text.

The <head> Section and Metadata

The instructor explained that the head section contains information about the page and connections to external resources, rather than the main content displayed on the page.

Topics included:

• Character encoding, with UTF-8 given as the example.
• The viewport setting, which helps a page adapt to the browser’s visible area and screen size.
• The title element, which sets the document or browser-tab title.
• Connections to CSS, fonts, icons, Bootstrap, and other external resources.

Visible page content belongs in the body.

Assignment

Students were asked to create a simple personal portfolio page, placing the information in the body and organizing it with heading tags. The requested details were:

• Name
• Place of origin
• Education
• Specialization
• College name
• Skills
• Hobby

The instructor said the task should be completed for the next class and that assignments would be checked.

Technical Note

Some explanations in the lecture are simplified or inaccurate. For example, HTML can contain syntax or validation problems; the doctype does not reliably identify older HTML versions in the way described; and HTML continues to evolve through the living HTML standard. The summary above distinguishes the instructor’s lesson from these technical clarifications.

Speakers and Sources Featured

• Instructor: Mr. Ram Kumar, identified by the video title; he led the lesson and demonstrations.
• Students/class participants: Several students asked questions or responded. Names audible in the subtitles include Raj, Ankit, Garsha (uncertain transcription), Nishant, Shiva, Ansari, Mujib, and Shivam.
• Resources and tools mentioned or demonstrated: Notepad, VS Code, the Live Server extension, Google Classroom, Chrome, Wikipedia, and example websites such as Amazon, YouTube, Instagram, and WhatsApp.