1. BEGINNER WEB DESIGN

2. INTRODUCTION Vocabulary Design Tools of the Trade HTML CSS

3. VOCABULARY Browser – Program used to access websites. Examples: Internet Explorer (IE), Firefox, Chrome, Safari HTML – HyperText Markup Language. Used to store the structure of a web page. Tag – A piece of a html document. Example: text (read “open div text close div”) Element – Another word for tag – a piece of a html document. Example: There is a div element in the html document. CSS – Cascading Style Sheets. Used to style HTML documents.

4. DESIGN Often rushed, but extremely important. Design is what makes the difference between an ok website and an amazing website. Good design is like music in a movie. If it is done correctly, you don’t notice it. If it is done poorly, it can ruin the movie (website).

5. LAYOUT Sites are often laid out in a grid-like fashion. They usually have between 1 and 4 columns and several rows. Common elements: Logo, Site name, main content, additional content, navigation, footer, advertisements Now, for some examples…

6. LogoSite Name NavigationSearch Content Footer areaFooter Area

7. LogoSite Name Search Content Navigation Footer areaFooter Area

8. LogoSite Name Top Level Navigation Search Content Other Links and ads More navigation links Footer Area

9. Logo Site Name Navigation Search Content Footer Area

10. YOUR TURN! Draw the layout for your site. Consider adding the following elements: Logo Site Name Navigation Search Content Footer Area(s) Advertisements

11. COLORS Complementary Directly across from each other on the color wheel Analogous Three colors that appear side by side on the color wheel. http://paletton.com

12. MORE ABOUT COLORS Consider the colorblind. What number(s) do you see in the Ishihara color test to the right? Achromotopsia: No numbers Dichromacy/anomalous trichomacy: 21 Normal Vision: 74 On http://paletton.com, click on “Vision Simulation” in the bottom right. Can you still tell your colors apart? Make changes if you need to. From https://en.wikipedia.org/wiki/Color_blindness

13. TOOLS OF THE TRADE Text Editor Notepad, Notepad ++, Sublime Text, etc. Integrated Development Environment (IDE) Eclipse, WebStorm, NetBeans, Dreamweaver, Visual Studio Browsers Firefox, Internet Explorer (IE), Chrome, Safari, Opera

14. HYPERTEXT MARKUP LANGUAGE (HTML) HTML is made up of elements. Elements are marked by tags. Tags start with There are open tags and close tags. Example: Open html tag: Close html tag: Tags can have attributes like id

15. LET’S MAKE AN HTML PAGE. Here is the HTML for a (very) simple web page. Title A paragraph.

16. HEADINGS Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

17. MORE TAGS link link text An “A” tag, also known as an Anchor tag. img Used to include images on your web page.

18. GROUPING ELEMENTS div other html elements Container for other elements. Displays on a new line by default. span some text Container for text. Displays inline with the text by default. Semantic HTML tags article, aside, details, figcaption, figure, footer, header, main, mark, nav, section, summary, time These tags were added to HTML5. They act like “div” tags but allow you to logically divide up a document with out adding unnecessary id or class attributes.

19. IDS AND CLASSES Elements can have attributes. Id and Class are some of the most common and are used to give additional information and make it easier to style the document. Unique identifiers (ids) some text Non-unique identifiers (classes) some text

20. INTERMISSION UP NEXT: CSS

21. STYLING Styling is managed by Cascading Style Sheets(CSS). CSS is made up of rules. Make this heading have blue text. Make my paragraphs have a grey background Etc. Why Cascading? you can define multiple rules for an element, and it will apply them in order: They cascade.

22. VOCABULARY Selector An identifier for the element(s) you want to style Property What aspect of the element(s) you want to change Value The value you want to assign to the aspect. Rule The combination of a selector, property, and value selector { property: value; }

23. SELECTORS element Example: some text Just use the part between the <> brackets. Selector: p id Example: some text Use the id value with a # in front. Selector: #my-paragraph class Example: some text Use the class value with a. in front. Selector:.emphasis Remember: “Class period” If you want to style a class, use a period selector { property: value; }

24. PROPERTIES There are various css properties you can use to style your elements: background-color color (it means the text color…I didn’t name it) font-size font-weight (bold, semi-bold, regular, etc.) font-style (italic, etc.) border padding margin selector { property: value; }

25. COLORS Some colors have names: red, blue, light-blue, etc. https://en.wikipedia.org/wiki/Web_colors#HTML_color_names Other colors have to be specified as a combination of Red, Green, and Blue. 0-255 or (in hex) 00 to ff There are many ways to write a color. Let’s look at some of them.

26. COLORS rgb and rgba rgb (110, 150, 200) rgba(100, 150, 200,.8) alpha (transparency).8 (means 80% visible) http://rgb.to/110,150,200 Hex ( Hexadecimal – 16 based instead of 10 based ) #6496C8 You can abbreviate values that have duplicates #55aaff becomes #5af Export from http://paletton.comhttp://paletton.com (TABLES/EXPORT in bottom right) Alpha =.8 Only 80% opaque. 20% transparent

27. FONT-SIZE font-size: small; font-size: inherit; Mostly used for overriding other, more general, styles. font-size: 12px; font-size: 110%; From the CSS Quick Reference from http://www.vein.com

28. BORDERS, MARGINS, PADDING Margin: Space around an element outside of its border. Border: a line around an object (that line can be nonexistant (0px) or transparent. Padding: Space around the content, inside of the border.

29. BORDERS, MARGINS, PADDING CONT’D Total element width = width + left padding + right padding + left border + right border + left margin + right margin Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

30. POSITIONING Static in the order it is encountered Relative offset from its static position by a given amount (from top, right, bottom, left) Absolute removes the element from the normal flow and puts it where you specify in relation to the page. Fixed like absolute, but positions in reference to the browser window so elements stay in place even when you scroll.

31. CSS RESET Different browsers have different default values. Because of this, it can be hard to style for multiple browsers. It is often helpful to remove those defaults. To do that, we use a “CSS Reset”. It includes a bunch of defaults. In the example files, see reset.css.

32. FLOATS The “float” property will make the elements’ boxes float to one side or the other (left or right). Use the “clear” property to reset the floating. Often used to push the navigation area to the left of the page. These can be tricky. https://css- tricks.com/almanac/properties/f/float/ has a great list of the common problems.https://css- tricks.com/almanac/properties/f/float/

33. EXAMPLE IN NOTEPAD++

34. YOUR TURN!