SUMMARY OF 4 HOURS HTML TUTORIALS CHAPTER 1 INTRODUCTION The acronym HTML stands for Hyper Text Markup Language. It is the most basic building block of the web. It defines the meaning and structure of the web content. Hypertext refers to links that connects the web pages together which can be within a single web or from one web to another. This language uses markup to annotate text images and other content for displaying in a web browser. Examples of some of these markup elements are `<head>`,`<header>`, `<title>`, `<body>`, `<footer>`, `<article>`, `<section>`, `<p>` (paragrahp), `<div>` (generic container) just to mention but few. These elements are either empty or self closing elements (example includes `<img>`, `<br>`) or the closing tag elements (examples are `<div>``</div>`, `<p>``</p>`). Note: That in HTML, the naming conventional should be stricly lower case for these elements. Some of the tools needed to create a web page are web browser (google chrome, firefox), Text editor or Visual studio code (VS code). CHAPTER 2 THE WEBPAGE So, after creating the webpage using HTML, we use the Markup validation service (validator.w3.org) to check for possible errors in the code. For example, when the langauge or charater set is not included, the validation service checks for such errors. Declaration of the version of HTML must be properly written. In this case, the `<!DOCTYPE html>` is rocommended for html version 5. Other additional informations associated to the web page can also be added. These informations are not displayed for the user but serves as a tool for indexing of the page and search engines to easily navigate through the page. Such informations are; `<meta charset="UTF-8">` `<meta name="description" content=">`This contains all the things i'm learning in HTML">` `<meta name"author" content=">`John Dakshak">` `<html lang="en">` (language english) CHAPTER 3 WEB CONTENT The web page contains the heading which is usually represented by the heading `<h1>`, paragraph `<p>`, `<body>`, `<article>`, e.t.c The heading is usually represented from `<h1>` to `<h6>`. The web contain some Block and Inline elements. The block level elements starts on a new line and occupies as much width available examples include `<div>, `<p>`, `<br>`. While the inline elements do not starts on a new line and only occupy the needed width only; examples include `<em>`, `<b>`. ENTITY CODES Helps to indent contents away from the parent element. For example, the syntax `&nbsp;` indent a paragraph to the right. The syntax `&gt;` is for the gretater than sign (>) while `&lt;` is for the less than sign (<), `&copy;` is for the copyright symbol. The `<abbr>` (abbrevition) syntax underlines a particlar content using the dotted style. `<abbr title="Mozilla Developer Network">MDN</abbr>`. Here, the MDN will be underlined with dotted style. This feature also display the full acronym of Mozilla Developer Network when the user place a mouse pointer on the MDN in the browser. CHAPTER 4 HOW TO CREATE LIST The list are into; Ordered list `<ol>` This type of list displays in numbers example: `<ol>` `<li>Daddy</li>` `<li>Mommy<li>` `<li>Daughter<li>` `</ol>` RESULT 1. Daddy 2. Mommy 3. Daughter Unordered list `<ul>` This type of list displays in bullets Example: `<ul>` `<li>Daddy</li>` `<li>Mommy<li>` `<li>Daughter<li>` `</ul>` RESULT 0 Daddy 0 Mommy 0 Daughter Description list`<dl>` The description list `<dl>` has an entirely different format from the `<ol>` and `<ul>`. It has two elements wrapped inside it which are the decription term `<dt>` and description details `<dd>`. The description details `<dd>` moves away from the `<dt>` tag and indent to the right as we can see below. Syntax example `<dl>` `<dt>` HTML 4 hours Tutorial is a goal `</dt>` `<dd>` I have learn alot from this tutorial `</dd>` `</dl>` RESULT HTML 4 hours Tutorial is a goal I have learn alot from this tutorial CHAPTER 5 CREATING LINKS ON THE WEBPAGE This can be achieved by the use of the anchor `<a>` tag. It can refer the user to an external or internal link. This element don't function alone. It requires to be paired with an attribute such as the 'href" (hyper reference). An example can be seen below `<a href="www.google.com">`Google`</a>` (this link will direct the user to the google homepage on the current tab) where as, `<a href="www.google.com" target="_blank">`Google`</a>` will direct the user to the google homepage but on a seperate tab when the target="_blank" is introduce. TO CREATE INTERNAL REFERENCING Internal referencing is all about locating a particular portion of a content on the web page. The use of a `<section>` tag can help us to achieved our required result. Syntax example `<a href="#introduction">` Chapter 1`</a>` (Here, the user is been directed to chapter 1) `<a href="#webpage">`Chapter 2`</a>` (The user is directed to chapter 2) Quotation: `<section id="introduction">`Paragraph containing Chapter 1 contents`</section>` `<section id="webpage">`Paragraph containing Chapter 2 contents`</section>` BACK TO TOP This takes the user back to the top of the page. Syntax example `<p>``<a href="#>Back to Top>`</a>``</p>` EMAIL To input an email `<li>Contact me at`<a href="mail to:johndakshak@gmail.com">`my email</a>``</li>` DIALING TELEPHONE NUMBER `<li>`Dial`<a href="tel:+2349035393958">`my phone number`</a>``</li>` CHAPTER 6 ADDING IMAGES TO THE WEBPAGE To achieve this, the developer needs to merge the desired image to be uploaded and the HTML document in thesame folder. The element for image is `<img>` and it's a block level element. The attribute is "src" (source). Other image attributes include "alt" which provides an additional information about the image when the browser is not able to load the image on the site. Othe attributes include the width and height of the image. The semantic element is `<figure>`. Syntax example `<figure>` `<img src="/parent folder/image name/" alt="HTML logo" title="This is HTML logo" with="300" height="200" loading="lazy">` `<figcaption>HTML learning logo</figcaption>` `<figure>` NOTE: Parent folder is the directory the image is been stored. Image name is the name of the image file. Title is the write up that will be displayed when a mouse pointer is placed on the image. Loading attribute allows the image to be loading before the user reaches the destination of that image. It usually happens when there are multiple images on the site or the destination of the image is a bit far. Figcaption is the label written immediately below the image. CHAPTER 7 SEMANTIC TAGS Document files needs organisation and in HTMl, the case is not different. These files needs to be organised in a meaningful manner. Semantic tags helps to provide meaning to the content of the web. Examples of such elements include, `<nav>`, `<hr>`, `<section>`, `<header>`, `<footer>`, `<main>`. In a situation where we have more than one semantic element, it is important we label each of the semantic elemnets. For example `<nav aria-label="primary-navigation">``</nav>` In cases where we have multiple topics to input, semantic elements can be wrapped in another semantic element. For example, the `<article>` can wrapped the `<section>` element. `<article>` `<h2>``<h2>` `<p>``</p>` `<section>``<section>` `<h3>``</h3>` `</article>` Another semantic element that gives extra information is the `<aside>` tag `<aside>` `<details>` `<summary>``<summary>` `<p>`</p>` `</details>` `</aside>` The `<mark>` element highlights a specific content of interest. It is an inline element. Syntax example: `<mark>`BLOCKFUSE`</mark>` RESULT <mark>BLOCKFUSE</mark> CHAPTER 8 CREATING TABLES Table is simply the representation of data into rows and colums. It structures tabular data i.e, data made up of rows and column. CHAPTER 9 FORMS AND INPUT The form gives access to the user to input some informations which could be send back to the host. Examples are feedback and contact form. This feature makes the web page interactive. The form carries a link that sends the captured data of the user to the web host example `<form action="https://httpbin.org.get" method="get">` The form also has the `<label>` tag which carries the 'for' attribute. example `<label for="first name">`Fisrt Name`</label>` `<input type="text" name"first name" id="first name" value="first name" place holder" autocomplete="on" required>` NOTE: That the place holder is the default name (First Name) that appears faint in the box before the user fills the name. The autocomplete is a feauture that helps the user to remember its name. Required indicates that the field must be fill. It should not be left out. Input for Phone Number `<input type="tel" name="phone" id="phone" placeholder="+234XXXXXXXXXX" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" required>` Field set This feature encloses the entire form with a line leaving a caption just above the form. The sub element `<legend>` single out the caption and is partly enclosed by the line. SYNTAX example `<field set>` `<legend>Personal Info`<legend>` `<p>`COntents of the form`<p>` `</legend>` `</field set>` CHAPTER 10 PROJECT THis chapter involves a full project of web, implementing everyting that was learn in the tutorial video. All the elements, attributes and semantics are put into use. Forms and tables are also not left out. Use of meta elements are strictly required for web indexing and and search engines. The language type should be specified. ALso, header and footer should be implemented.