HTML Sandwich
- HTML is linear - It goes from top to bottom
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>
The HTML Sandwich Structure
Flag in top of sandwich; begins with Doctype HTML <!doctype html>
Head portion / Meta data <head></head> This is known as metadata.
Top bun of sandwich; begins with <html>
Fillings of sandwich; Body, which is what is visible on the page <body></body>
Bottom bun of sandwich; ends with </html>
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.