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, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. Web browsers understand HTML and render HTML code as websites.

Fundamentals

HTML Document Layout

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