1. Intro to HTML

2. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content

3. Tags Tags surround content Most tags appear in twos – an opening and a closing tag This is the content of the element Opening tag Closing tag Content

4. HTML tag Everything in here is part of the html document

5. Body tag Everything in here is part of the document body. This is what will be displayed in the browser.

6. Header tags This is the first header This is the second header … This is the sixth header

7. Paragraph tag This is the first header This is a paragraph

8. Table tag Here is a table 100 200 300 400 tr = table row td = table data

9. Image tag Here is a picture This is Stanford Note: The image tag doesn’t have a closing tag.

10. Attributes Attributes provide additional information about an element Attributes are defined in the start tag Content

11. Image tag revisited Here is a picture This is Stanford The src attribute provides additional information about the image element – the location of the image file to be displayed.

12. Links Here is a link Google The tag defines a link element. The href attribute specifies the link address.

13. Identifying attributes Content The id attribute specifies a unique ID for an element. It can be used with any element. Content The class attribute specifies that an element belongs to a particular class. It can be used with any element. These identifying attributes will be very important for CSS…

14. Try it yourself! Open up a new document in a text editor (Sublime, notepad, TextEdit) Copy the following text to the first line of your document Save the document as myFile.html Double click to open myFile.html in a browser Now you can make changes to the document and view the changes by saving then refreshing the open browser window

15. Intro to CSS

16. CSS CSS = Cascading Style Sheets Used to define how to display HTML elements HTML is the content, CSS is the style CSS rules contain a selector and declarations. Each declaration contains a property and a value. selector { property: value; property: value; } declaration

17. Selectors A CSS selector is an element, id, class All HTML elements with the specified element type, id, or class will have the property values defined in the declarations h1 { property: value; property: value; } #firstHeader { property: value; property: value; }.first { property: value; property: value; }

18. External Style Sheet Separate CSS file linked at beginning of HTML document Used to unify style across many web pages.

19. Internal Style Sheet Contained in tag in header section of HTML document Used for single webpage with unique style h1 {color:red;} #firstHeader {color:blue;}

20. Inline Style Contained in start tag of HTML element Used to define the style of an individual element Use sparingly! In general, style should be separated from HTML content Header