HTML.html

<!--Introduction-->
<!--HTML (Hyper Text Markup Language) is the standard markup language for documents designed to be displayed within a web browser. It can be enhanced with other languages such as CSS or JavaScript.

	It isn't exactly a programming language, but is more of a formatting language. It controls presentation, structure, and layout of the data on a website. It doesn't contain any functional programming logic.

	It won't manipulate data or anything, and won't perform tasks  like event handling, taking inputs and diplaying outputs etc.-->

<!--Comments-->
<!--Single Line and Multi-Line - Use "<!- -" (with no spaces) to start and end in "- ->" (with no spaces). This is the start of a comment
This is the end of the same comment.-->

<!--Start-->
<!--An HTML document consists of 2 parts:

 - Document Creation (What users see).
 - Tags (How they see it).-->

<!--Each tag is written in lower case, opens and then closes out. For instance, for every opening <html> - there is a closing </html> -->
<html> <!-- This is considered the "head of the family" - it tells the browser that it's about to read an HTML document.-->

<head>	<!--This is not displayed on the webpage but it comprises of the title of the browser window or any other instructions that are supplied to the web browser.-->
	<title> Welcome to the Jungle! </title> <!-- This is the Title of the webpage. -->
</head>

<body> <!-- this follows the head tag, this is where the visible content of the website is written. This could h=be headings, paragraphs, images etc. -->
	We got fun 'n' Games!
</body>

</html>

<!--Web Servers-->
<!--A Web Server can be Hardware or Software that delivers the webpage to a browser. The Browser then reads and decodes the instructions. It then displays the content on screen (as the web page).-->

<!--Tags-->
<!--Here are some different tags tat can be used. Below is an example of how they would be used as well.-->
	<p> </p> <!--Paragraph - this is placed inside the body tag and allows you to have a new paragraph.-->
	<br> <!--This allows for a line break - which moves the text onto the next line. It closes by itself and doesn't require a closing tag.-->
	<h1> </h1> <!--This is a Heading tag. It can go upto h6 to display as a heading.-->
	<b> </b> <!--Bold-->
	<i> </i> <!--Italics-->
	<u> </u> <!--Underline-->
	<img src="" /> <!--Image, the image's path goes in the quotation marks. src is an attribute to include the image path. An attritube provides additional information about the html tag. It is also self closing.-->
	<div id=""> </div> <!--This divides the page into a new section.-->
	<a href=""> </a> <!--Anchor - this embeds a link into the page.-->

<html>
<head>
	<title>This is the title.</title>
</head>

	<body>
		We got everything you want.
		<p>Honey we know the names!<br>Next line of the song
		</p>
		<h1> This is a Heading 1 </h1>
		<h2> This is a Heading 2 </h2>
		<h3> This is a Heading 3 </h3>
		<h4> This is a Heading 4 </h4>
		<h5> This is a Heading 5 </h5>
		<h6> This is a Heading 6 </h6>
		<p> <b> BOLD </b> </p>
		<p> <i> italics </i> </p>
		<p> <u> Underlined </u> </p>
		<img src="" />
		<div id="">
		<a href="https://github.com"> Github </a> <!-- This links to a website-->
		</div>

	</body>

</html>

<!-- Putting one tag inside another is known as "Nesting" -->

<!--Attributes-->
<!--Attributes are made up of two parts:
	- Attribute Name
	- Attribute Value
	"=" is used to set the value. the value is then placed in "double quotes".

attribute = "value"

	href - lets you provide a link of the webpage to connect to other webpages.
	src - lets you provide a path to an image.
	alt - Defines text/name of an image in case it can't be displayed
	width - an optional attribute that defines the width of the image
	height - an optional attribute that defines the height of the image-->

<img src="Panda Picture.jpg" width="200" height="400" alt="Missing Picture"/>

<!--Styles-->
<!--Styles change the look of the webpage - be it, background, colour, sizes etc. This can be added to with CSS. This is put inside the tag.

	style="Property:Value"-->


<h2 style="color:green">Can we change this to red please?</h2>
<p style="font-size:200%">No, green looks better!</p>
<h1 style="background-color:orange">This is the background colour change. It looks like a highlight!</h1>

<h6 style="font-size:200%;color:purple"> Multiple Formatting </h6>

<p style="color:blue;background-color:yellow;width:25%">Width applies to how much of the page the text (and background colour) fills. It's a "Text Wrap".</p>
<p style="color:blue;background-color:yellow">Without anything - the text will run to the end of the page.</p>

<!--HTML 5-->
<!--HTML 5 has some changes.
	Doctype declaration

	New Elements:
	Header - Used for fixing specific content to the header, contains the introductory part to the page. Can include Brand names, Logos etc. Headers can be used within it.
	Footer - Used for fixing specific content to the footer - This usually contains things like the privacy policy, copyright info, contact details etc.
	Nav - This groups links together (Like My Account and Settings)
	Article - Think a blog with comment boxes etc. It is a replacement for <div>.
	Section -

	GeoLocation - this is an API that can grab the users location.-->

<!DOCTYPE html> <!-- - This tells the browser which version of HTML the page has been coded. It's always the first line of the document and isn't a tag, therefore doesn't need closing-->

<header></header>
<nav></nav>
<article></article>
<section></section>
<section></section>
<footer></footer>