HOW TO STRUCTURE LAYOUT
You can structure pages using the following CSS...
Divs - Divisions (think of them like boxes). These boxes or sections, that can have their own formatting.
Width - Adjusts the width of elements on the page.
Float - Specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
About Positioning of Divs
Static - Basic default. Fixed - Prevents element from moving or scrolling. Absolute - Allows you to place elements exactly where you want them by using the positioning attributes top, left, bottom, and right to set the location. Relative – relative to its place in the code.
<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
Again, if you will be using the SVSU Lab Computers, this will have to be done at the start of every class. If you are using your own computer, it will remember these settings and you will only have to enter this once.
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.