You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
5.3 KiB
74 lines
5.3 KiB
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>My Learning Website</title> |
|
<link href="/styles/styles.css" rel="stylesheet" type="text/css"> |
|
<link href="/webdevelopment/styles/styles.css" rel="stylesheet" type="text/css"> |
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> |
|
<!--[if lt IE 9]> |
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
|
<![endif]--> |
|
</head> |
|
<body> |
|
|
|
<div class="banner"> |
|
<h1 class="courselink">HTML Essential Training</h1> |
|
<h2 class="lecturer">LinkedIn Learning : Jen Simmons</h2> |
|
<h2 class="episodetitle">Putting it All Together</h2> |
|
</div> |
|
|
|
<article> |
|
<h2 class="sectiontitle">The HTML Page</h2> |
|
<p>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.</p> |
|
<p>There are certain elements which are pretty much common to all HTML files such as the doctype. This would normally be</p> |
|
<pre class="inset"><!doctype html></pre> |
|
<p>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.</p> |
|
<p>After the doctype, comes an element that contails all of the HTML and that is, of course, the <html> element.</p> |
|
<p>Within the <html> element, there is the <head> element which contains the metadata and the <body> element which contains the page content.</p> |
|
<p>This gives us the four key elements of any HTML document and these are</p> |
|
<pre class="inset"> |
|
• The doctype |
|
• The <html> element |
|
• The <head> element |
|
• The <body> element</pre> |
|
<h1 class="sectiontitle">Document Head</h1> |
|
<p>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.</p> |
|
<pre class="inset"><meta charset="utf-8"></pre> |
|
<p>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.</p> |
|
<pre class="inset"><meta name="viewport" content="width=device-width, initial-scale=1"></pre> |
|
<p>We can also add a description and this is what is displayed as a brief summary of the site in search results.</p> |
|
<pre class="inset"><meta name="description" content="A description of this site that will show up in search engine results."></pre> |
|
<h1 class="sectiontitle">Structuring Content</h1> |
|
<p>Typically, there are 6 main HTML elements.</p> |
|
<pre class="inset"> |
|
• <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</pre> |
|
<p>Note that the poitioning of these elements within the page isn't really important, they are used more for the semantic information they convey.</p> |
|
<h2 class="sectiontitle">Examples of Putting it All Together</h2> |
|
<p>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.</p> |
|
</article> |
|
<div class="btngroup"> |
|
<button class="button" onclick="window.location.href='tabular.html';"> |
|
Previous Chapter - Structuring Tabular Data |
|
</button> |
|
<button class="button" onclick="window.location.href='/webdevelopment/htmlessentialtraining/htmlessentialtraining.html'"> |
|
Course Contents |
|
</button> |
|
<button class="button" onclick="window.location.href='/webdevelopment/webdevelopment.html'"> |
|
Web Development Page |
|
</button> |
|
<button class="button" onclick="window.location.href='/index.html'"> |
|
Home |
|
</button> |
|
</div> |
|
</body> |
|
</html> |