How to Structure Layout
HTML is linear - it goes from top to bottom and includes four sections
- doctype
- html
- head
- body
The HTML Sandwich Structure
-
Flag in top of sandwich; begins with Doctype HTML
<!doctype html> - Top bun of sandwich; begins the
<html> - Head portion / Meta data
<head> </head>This is known as simply metadata. - Fillings of sandwich; Body, which is what is visible on the page
<body> </body> - Bottom bun of sandwich; ends with
</html>
Tags
It is constructed via a set of tags. Tags are used to delimit the start and end of elements in the markup. These can reference structure, or elements such as type.
-
<header1>HEADER</header1> -
<header2>HEADER2</header2> -
<body>BODY</body> -
<footer>FOOTER</footer>
Some HTML History
- 1989: Tim Burners-Lee invented the World Wide Web to share text information
- He originally called links anchors, which is why we use
<a>to represent links - href = Hyper Reference
- Media screens allow sites to transform for mobile
- States = Hover/Click
- Divs = Divisions/Boxes
<div>
Creating Links
- highlight word or image
- click on drag-down menu Insert and choose hyperlink
- confirm the correct text or image is chosen in first line
- for an internal link (your own site) - in second line click on the folder icon and pick another html page
- for an external link — in the second line paste the complete URL of the site or page you want the link to lead to
- if you want the link to open a new page (rather than replace the current page) choose _blank in line three Target
- to help with accessibility fill in the Title to explain the link
- or you could add type the code directly. An example includes:
<p>
<a href="http://svsu.edu/">
Learn about SVSU
</a>
</p>
Index Page
We commonly refer to this as the home page, but to function properly it should be coded as index.html. Browsers automatically recognize that as the home page. Never save your home page as home.html. You will have to use special code for a browser to recognize it as the home page and it might not work with all browsers.