HTML IMAGES, COMMENTS

HTML comments are a way for you to write helpful notes about your code or logic.

< ! -- HTML Comment -->

<p>Hello Text</p>

HTML comments are not meant to be displayed in our website or html page as they are meant to be just
helpful notes as you write html document.

IMAGES

The image tag, img tag, is used to embed an image into our page in the position it appears.

<img src="images/image.jpeg" alt="Test" />

Two important attributes that must be present in an img tag to display images in an HTML page are:

1 - The source (src) and this indicates where the image is located, which could be an external link to an
image on the internet or an image inside your project.

2 - The alternative (alt) and the purpose of this is to display whatever message is provided in it in case
the image doesn't exist or doesn't load.

HEADINGS, PARAGRAPHS, LISTS.

Headings allow us to specify that certain part of our content are just headings or subheadings.

<!-- 4 heading levels: -->

<h1>My main title</h1>

<h2>My top level heading</h2>

<h3>My subheading</h3>

<h4>My sub-subheading</h4>

Maximum is heading 1 - 6 (h1 - h6) but the most commonly used is what we have above, h1 - h4.

PARAGRAPHS

The <p> elements are for containing paragraph text.

<p>This is a single paragraph</p>

LISTS

We have two commonly used lists in HTML:

- Unordered lists: <ul></ul>

- Ordered lists: <ol></ol>

An example of an ordered list where similar contents are nested into one bigger element (section) is
shown below:

<!-- Ordered -->

<section>

<p> Item categories </p>

<ol>

<li> Clothing </li>

<li> Food </li>

</ol>

</section>

LINKS

To add a link, we use the element <a>, "a" being the short for anchor

<a href="Https://pwafire.org">Text</a>

An <a> element allows us to reference an external website or webpage or allows to navigate within a
particular website. It has an about page, a contact us page, a home page.

An important attribute which you must provide for the <a> element to work is the hypertext reference
(href) and its value is a link that could be inside your website. It's an external link or a url or address.

Note: basically, a website is an arrangement of folders. Hence, to create say an about us page in our
project, we create another folder in the root folder called about, and inside it we'll create another html
document called index. We named it index.html and not home.html because index.html allows us to
visit our website without providing the name of the extension, the name of the file we want to view in
the browser by default so you view it as index with html. Hence, this allows us to view the page without
including "index.html" in the address, but instead just adding "slash" (/). So if we want to go to the
about page, we just add /about/ to the home page. Also, index.html also lets us know that is the root
folder at that moment.

NOTE: Very importantly, we must always name the about page "index.html". If for instance we name it
about.html, we'll see that in the about page, instead of us being shown the about page, we are shown
the contents of the about folder in our html file, which we don't want.
Now, to be able to navigate within the home page, we can add another <a> tag:

<a href="./"> Home Page </a>

With this, we see that we are able to navigate to the About page from the home page, but to be able to
navigate back to the home page while on the about page without editing the address bar, we need to
add to the code below to the About page in our html file:

<section>

<!-- 1. Internal Navigation -->

<a href="../">Home Page</a>

<a href="./">About Page</a>

</section>

NOTE: Very importantly that, while at the About page, to navigate back to the Home Page, we used
double dots (..) in the <a> tag for the home pag. Also, we used only (./) for the <a> tag for the About
page (since we are alread in the about page). This implies to go back one step, we use double dots and
forward slash (../).

Now, to ge able to go to external links from say the home page, we need to add another <a> tag
containing the link address.

<a href="https://pwafire.org">Go to pwafire.org</a>

Note: The text "Go to pwafire.org" is a placeholder for the link and it allows users to be able to click to
go the link. Hence, it must be provided.

Also, note that with the above tag alone, the link will be opened on the home page. To be able to open
this link on a new tab, we edit our <a> as shown below:

<a href="https://pwafire.org">Go to pwafire.org</a>

DOWNLOADS IN HTML

The download attribute on a link tag allows us to download content on our html page.

<a href="/images/image.jpeg" download>

Download with original filename ->samanthaming.png

</a>

href="/images/image.jpeg" download="logo">

Download with custom filename ->l ogo.png

</a>

Note that an important attribute which must be provided to this kind <a> is the download attribute.
With it, the file which is provided in the href or the link in the resource element is then used to extract
that image (or whatever you want to download) and save it to your device.

HANDLING MEDIA

The audio element embeds an audio in our html page. It has a comment as a code snippet and then the
audio, which has an important attribute, the source (src) which displays the location of the audio we
want to embed. Also, it has the controls attribute which allows us to add control (play, pause, etc) to our
embedded audio.

<!-- Play audio in HTML -->

<audio src="media/audio.mp3" controls></audio>

The same principle is applied for video content, the only difference is that instead of audio, we put
video.

<!-- Play audio in HTML -->

<video src="media/vudeo.mp4" controls></audio>

DATA COLLECTION AND LISTING

Form Elements: This allows us to collect data.

Table Element: This allows us to list data.

Form Elements.

This represents a section containing interactive controls for submitting information, for instance say a
registration form where you are required to fill in username, email, etc. to register for a particular thing;
or an assigning form where you provide your email and password and you are signed in.

<form

<label for="name">Enter your name: </label>

<input type="text"

name="name"

id="name"

required />

<input type="submit" value="Subscribe" />

</form>

From the form element above, a very important thing is the label. Labels provide the information about
the input field, for instance you enter your name then input. The <input> html element is used to create
interactive controls in order to accept data from the user. We have different kinds of input types that
forms will handle. This include text, number, button, submit, email, color, file, password, radio, reset.

The <select> html element represents a control that provides a menu of options.

<label for="pet-select">Choose a pet: </label>

<select name="pets" id="pet-select">

<option value=" ">Select Pet</option>

<option value="dog">Dog</option>

<option value="cat">Cat</option>

</select>