HTML Fundamentals

WHAT IS HTML?

HTML (HyperText Markup Language) is a markup language that web developers use to structure and describe the content of a webpage (not a programming language).

For example, Think of webpage as a newspaper. Newspaper consists of different contents like headings , paragraphs, images, etc. In this scenario HTML is like the layout and structure of the newspaper — it determines where the headings go, how paragraphs are arranged, where images are placed, and how everything is organized on the page.

Just like a newspaper's layout provides order and readability, HTML provides the framework that makes a webpage's content understandable and accessible to both users and web browsers.

For example, take the following line of content:

My dog is very playful

If we wanted the line to stand by itself on the webpage, we could specify that it is a paragraph by enclosing it in paragraph tags:

<p>My cat is very grumpy</p>

Anatomy of an HTML element

Let's explore this paragraph element a bit further. Anatomy of an HTML element

The main parts of our element are as follows:

The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
The content: This is the content of the element, which in this case, is just text.
The element: The opening tag, the closing tag, and the content together comprise the HTML element.

Fundamentals

Detailed Example of How HTML Blocks relates to a web page

This part is in the Slides, to get the slides you need to Enroll to the Course 30-Day Project-Driven JavaScript Bootcamp Course (opens in a new tab)

Nesting elements

You can put elements inside other elements too — this is called nesting.

To understand what nesting is, Lets take an example of hwo wrap a gift. You find that you have a wrapping paper, then inside it you have a box and then inside it you have a diamond gift

Fundamentals HTML Nesting Explained with Gift Wrapping:

Wrapping Paper (<WrappingPaper>):

This is like the outermost HTML element. It's the first layer that contains everything else. In a webpage, this could be the <body> tag that wraps all visible content.

Box (<Box>): Inside the wrapping paper, we have a box. This is nested within the wrapping paper, just like how in HTML, elements can be placed inside other elements. The box could represent a <div> or <section> in HTML that groups related content.
Diamond (<Diamond>): The diamond is the innermost element, nested inside both the box and the wrapping paper. In HTML, this could be a specific piece of content like an <img> tag or a <p> tag with text.

The nesting structure looks like this:

<WrappingPaper>
  <Box>
    <Diamond> </Diamond>
  </Box>
</WrappingPaper>

This structure mirrors how you would physically wrap a gift:

You start with the wrapping paper laid out.
You place the box on the wrapping paper.
Inside the box, you put the diamond gift.
You then close the box. Finally, you wrap the paper around the box.

In HTML, this nesting allows for organization and structure of content. Each "layer" can have its own properties and styling, just like how the wrapping paper, box, and diamond each have their own characteristics in gift-giving.

Examples of HTML Elements

This part is in the Slides, to get the slides you need to Enroll to the Course 30-Day Project-Driven JavaScript Bootcamp Course (opens in a new tab)

Anatomy of an HTML document

That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page.

index.html


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Layout Exaplanations

<!DOCTYPE html> : Is used to define the document type and version of HTML being used in a webpage and ensures that the web browser renders the page correctly according to the HTML5 specifications.

<html></html> : is the root element of an HTML document. It encompasses all the content of the webpage.

<title></title> : Specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab).

<head></head> : contains meta information about the HTML page. Meta information describes the page's content, character encoding, author, keywords, viewport settings, and other details. Metadata is not displayed on the page itself but is used by browsers, search engines, and other web services to understand and process the content of the page.

<body></body> : Acts as a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Starting up a project with HTML in Vs code

Download and Install VS Code

If you haven't already, download and install VS Code from the official website(link and procedures in the html and css tutorials introduction).

Set Up Your Project Folder

On your computer, create a new folder where you'll store your website files. Open the folder in Vs code.

Create your first HTML file

In VS Code, go to the "File" menu again and select "New File" (or press Ctrl+N). Name your new file index.html ( this is a common naming convention for the main page of a website).

Add Basic HTML Structure

Open the index.html file. Type ! and press Tab or Enter. This is a shortcut provided by Emmet, a plugin included in VS Code that helps you write HTML and CSS faster. It will generate a basic HTML structure for you, and it should look like this;

Html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>
</html>

HTML Elements

HTML elements are the building blocks of HTML documents and consist of an opening tag, content, and a closing tag.

Attributes; are used to provide additional information about HTML elements. Attributes are always included in the opening tag of an element and consist of a name and a value. They modify the default behavior or appearance of the elements they are associated with.

Examples include;

<p></p> : Used to write paragraphs in an HTML page.

<p>This is a paragraph tag/element</p>

<h1></h1>-<h6></h6> : Represent six levels of section headings h1 being the biggest and h6 being the smallest.

<h1>This is a the biggest heading...</h1>
<h6>This is a the smallest heading...</h6>

<span></span>: Used for styling and grouping inline elements without affecting the flow of content.

<h1>This is a the <span>heading</span>...</h1>

<a></a>: Defines a hyperlink, which is used to link internal pages or to external web pages. It has an attribute called href in which the actual link is placed.

<a href='www.who.com'>This is a the link...</a>

<from></from>: Represents a form that can be submitted to a server.

<form action='/submit' method='post'>
<...form elements...>
</form>

<label></label>: used to represent a caption for an item in a user interface. It has an attribute called for that acts the name of the label tag

<label for="username">Username</label>

<button></button>: used to create clickable buttons on a webpage. It has an attribute which is known as type which determines the behavior of the the button types include; submit, button, reset, disabled and many more

Html

<button type="submit">Submit</button>
  <button type="reset">Reset</button>

<div></div>: It's like a box that you can use to group other HTML elements like the paragraphs together.

Html

<div>
    <p>Content inside a div.</p>
</div>

Lists

These lists are essential for presenting content in a clear and organized manner.

Types of lists

There are two types of commonly used lists;

Unordered lists

Used for lists where the order of items doesn't matter. They are created using the <ul> and <li> tags. Each list item is preceded by a bullet point.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered lists

Used for lists where the order of items is important. They are created using the <ol> and <li> tags. Each list item is preceded by a number.

Html

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

⚠️

There are some element that don't have a closing tag and are known as self closing elements

<img/>: Embeds an image in the document.. It has attributes called src in which the actual link of the image is placed and alt where short notes about the image are placed.

<img src='www.who.com' alt='loading'/>

<input/>: Represents a typed data field, such as a text field, checkbox, radio button, submit button, etc. It has attributes called type which shows the type of the input eg text, checkbox etc, name shows the name of the input, placeholder: shows an example of what is to be written in the input

<input type='text' name='name' placeholder='write your name here.'/>

<br/>: Inserts a line break.

<p>First line<br>Second line</p>

<hr/>: Inserts a horizontal rule.

<hr/>

The class attribute

A class attribute is an attribute that is used in targeting of a specific element in an HTML document.

Html

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

Where "city" is the class name which is used when applying styles to the div element

Formatting Elements

They are used to style the text content within a web page.

Examples include;

<b>: Bold text.

<i>: Italic text.

<u>: Underlined text.

<big>: Larger text.

<small>: Smaller text.

<sup>: Superscript text.

<sub>: Subscript text.

<strong>: Important text (often rendered bold).

HtmlTables

Introduction and IDE setup Css Fundamentals