Abigail Leinberger

Welcome to my Step Page!

Step 4: HTML Basics



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. Tags are used mainly for HTML code and have to have a beginning and an end to them. If you accidentally delete the end of a tag, there is a good chance that your code won't end up working. Here's some examples of what tags might look like for the main content of you site:


  • <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 Sandwitch Structure


- Flag in top of sandwitch; 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>


The head portion of the HTML sandwitch is where the title of your website will be along with what style sheets are attached. The body of the sandwitch is where things like your type will be along with the colors of your site and your design. This is because the body contains the header, main area, and foot of the HTML document.



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. Make sure that this is always in your main site root folder and isn't in any folder. In fact, all of your pages should not be in their own folders and sound be in just the main site root folder just like the index page. Another warning is to never EVER change the name of this page as it will screw everything up and browsers will not know what to do.

The index page will be basically the hub for everything in this class, and if you were creating you own webpage. This is where all the links will be to the challenges, steps and summaries. As well as the eventual second site.