1. HTML Primer

2. What is HTML? HTML stands for Hyper Text Markup Language A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content

3. HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets: HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag (also known as opening and closing tags) The end tag is written like the start tag, but with a slash before the tag name Some HTML tags are single tags eg

4. HTML Page Structure

5. Create first webpage Create new folder (This will be your website) Create a new notepad doc (This will be deleted later) Type basic HTML tags Get filler text from www.lipsum.com Save document as index.html Delete the notepad doc (created in step 2) View index.html in browser Edit source and view changes

6. HTML coding rules For paired tags, correct coding is like this eg For single tags it is like this eg. Open first, close last ie. Correct way … Hello World Wrong way … Hello World Values MUST be enclosed by quotation marks Eg. Tag Attribute Value

7. HTML coding guidelines Use all lowercase for HTML tags Use either single or double quotes for values Use spacing and returns for readability Use lots of comments ie.

8. HTML naming conventions Do NOT use blanks for file or folder names Avoid use of uppercase … some ok, not all eg. myWeb Do NOT use special characters eg !@#$ etc for file or folder names

9. Basic HTML tags

10. The Anchor Tag Four types of hyperlinks … External … href=“http://www.yahoo.com” Internal … href=“aboutme.html” Email … href=“mailto:banseng@rocketmail.com” Jump … href=“#somewhere” (jumps to id=“somewhere”) See demo files

11. Embedding video or music… Refer to notes Embed internal video – refer to notes Embed external video – check out youtube…

12. Three approaches to styling Inline or Embedded Style Frequently Asked Questions... regarding your dates Internal Style External Style

13. Extent of the three kinds of styling h1 { color:blue} HTML HTML h1 { color:green } CSS HTML HTML HTML

14. CSS Selector Types and Syntax (pg4-4) Four types of Selectors Tag Class ID Compound All follow the same syntax Name followed by { curly brackets } element { property:value ; property:value ; }

15. Tag styles Tag styles change the default styling of HTML Tags h1 blockquote

16. Class styles (pg4-17) Class styles allow you to share styles among different HTML elements and to name your elements, thus giving added meaning to your document structure. Note: Give your class styles meaningful names BUT do not use HTML tagnames. Eg class=“qquote” … and not class=“blockquote”

17. Extent of the three kinds of styling h1 { color:blue} h1 { color:green } HTML HTML CSS HTML HTML HTML

18. CSS Box Model

19. Why use a Container ID? A container ID makes it easier to keep the webpage together on different screen sizes. Makes for consistent look and feel, especially when margin:auto is used.

20. Why set Container ID to 650px? This is a single column layout. Easier to maintain the max reading width for content

21. How to create a double column layout? Change width of navbar ID AND maincontent ID to less than the width of the container ID Combined widths of the navbar ID and maincontent ID must be equal or less than the width of the container ID. Increase width of container ID if necessary, keeping the max width of container to 960px. Why 960px? The project is to be optimized for a 1024 x 768 monitor. CONTAINER HEADER NAVBAR MAINCONTENT