heading.append(addParagraph("Jen Simmons - LinkedIn Learning - February 2020"));
heading.append(addParagraph("Chapter 7 - Putting it all Together"));
main.append(addSubHeader("The HTML Page"));
main.append(addParagraph("In the early days, of the Internet, a web page was a single HTML document, although there may have been additional image files. Modern web pages are typically generated from a number of files including HTML, CSS and JavaScript files as well as additional media files (audio, video, images and so on). However, when a user types a URL into a browser, the server uses all of these files to create a single HTML file which it then sends to the browser."));
main.append(addParagraph("There are certain elements which are pretty much common to all HTML files such as the doctype. This would normally be"));
main.append(addSyntax("<!doctype html>"));
main.append(addParagraph("This is normally the first element in the HTML file. It tells the browser something about the file and in this case, it indicates that the file has been created using modern HTML elements, practices and so on. There are other doctypes corresponding to older types of HTML which you may see if you look at the HTML in older pages but it is unlikely that you will use anything else when creating a new file."));
main.append(addParagraph("After the doctype, comes an element that contails all of the HTML and that is, of course, the <html> element."));
main.append(addParagraph("Within the <html> element, there is the <head> element which contains the metadata and the <body> element which contains the page content."));
main.append(addParagraph("This gives us the four key elements of any HTML document and these are"));
main.append(addParagraph("In the head, the <meta> element is used to add metadata to the page. The metadata is added via attributes and one example of this is the charset attribute that specifies the character set used in the page."));
main.append(addParagraph("The <meta> element cam also be used to define various settings in the page. A common example of the is used to tell the browser that he layout has been morphed to fit small screens. That is, that the layout that was designed for a large desktop screen and that it needs to shrunk down to fit in a phone."));
main.append(addParagraph("We can also add a description and this is what is displayed as a brief summary of the site in search results."));
main.append(addSyntax("<meta name=\"description\" content=\"A description of this site that will show up in search engine results.\">"));
main.append(addSubHeader("Structuring Content"));
main.append(addParagraph("Typically, there are 6 main HTML elements."));
main.append(addInsetBulletList(["<main> - this tells the browser where the main content is","<header> - typically, this will include the site name and navigation and perhaps a logo","<footer> - the small print, typically including links, favicons, copyright information and perhaps some additional company information","<article> - gathers together the main content as a cohesive element","<section> - this would contain a subsection of the article","<aside> - this would contain some information that is additional to the main content"]));
main.append(addParagraph("Note that the poitioning of these elements within the page isn't really important, they are used more for the semantic information they convey."));
main.append(addSubHeader("Examples of Putting it All Together"));
main.append(addParagraph("There are many ways to put a web page together and you could argue that thus is as much an art as anything else. A useful technique to help determine the best way to do this is to look at the HTML in similar web pages and how the various elements are composed."));
