Module 5-Positioning and Navigation(Chapters 5 & 6).pptx

PHP

1. Positioning and Navigation THE PLACEMENT OF OBJECTS ON THE WEB PAGE, P LUS KEYBOARD SHORTCUTS, COMMENTS, NAVIGATION,AND NESTING AND INDENTING CODE. ‹#› This slideshow supplements the material in Chapters 5 and 6 of Web Development and Design Foundations with HTML5 by Terry Felke-Morris. Module 5

2. Agenda Review of Website Organization Keyboard Shortcuts Indenting Code and Code Comments Box Model The display Property Floats Advanced Selectors Navigation in an underordered list Styling your navigation with pseudo classes Positioning Module 5 in a Text Format Lab Instructions

3. Even though it may take 6 months (or a lifetime) to learn to code, after finishing Module 4 you can see the path to creating websites for family and friends.

4. Website Organization Review

5. Website Organization A website is a set of files that link together, through the href and src HTML attributes. The files link together with relative links. Websites are different than other documents you may work on, like in Word or PowerPoint, where you have one file that include images and text. Read more about it at this blog post: https://whitebuffalowebsites.com/website-files-and-folders-explaining-the-magic/

6. <a href="resume.html"> How does the browser know how to find the link to another page on the website, in this case, the resume.html page?

7. <img src="images/logo.png How does the browser know how to find the image?

8. <link rel="stylesheet" href="style.css"> How does the browser know how to find the stylesheet?

9. A website is a set of files that are connected by references, or links, to each other. They work together. If this isn't making sense, take a few minutes to read this blog post: https://whitebuffalowebsites.com/website-files-and-folders-explaining-the-magic/ It's critical that you understand how the files work in relationship to each other, and how you are responsible for setting up the relationships . The Files Talk to Each Other

10. Keyboard Shortcuts

11. Keyboard Shortcuts Coders use keyboard shortcuts, and you need to learn them to work efficiently. In fact, when you apply for coding jobs, hiring managers expect you to use them. If they see you use a secondary (right) click to copy and paste in the job interview, that would be a mark against you. Experienced programmers don't do that. When working in HTML and CSS you will find yourself copying and pasting code. A lot. Learn the shortcuts.

12. Keyboard Shortcuts Windows : Hold down the CTRL key then click Mac : Hold down the Command key (⌘) then click: X to cut C to copy V to paste S to save R to refresh Z to step back

13. Copy and Paste Exercise Copy this list to text file. Place the list in order alphabetically using the keyboard shortcuts. (If you already use the keyboard shortcuts, then skip this exercise. ) Sperm whale Killer whale Pilot whale Humpback whale Chimpanzee Orangutan African elephant False Killer Whale Gray whale

14. The most important keyboard shortcut is command/control Z Make a big mistake?

15. Indenting Code and Code Comments

16. Indenting Code img{ margin : 0 auto; color: purple; } <main> <p>This is a paragraph</p> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </main> HTML should be indented like this CSS should be indented like this

17. "Why do I have to indent my code?" If you were to ask a developer for help with your homework, the first thing she would do before helping you would be to indent your code. Developers you work with will expect indented code. In class we are making code that could be presented to your potential employer. Employers will require code to be indented. In fact, your employer will likely have specific rules on how to indent. If something is broken in your code, start by cleaning up the indenting. It makes it easier to see what is broken. The browser doesn't care if you indent your code properly. The indenting is for human developers, not for the browser.

18. Website Comments HTML Comments <!-- This is a comment --> CSS Comments /* This is a comment */ Comments are how you speak to other developers and give yourself reminders. They are not displayed to website visitors. Adding comments is important for code you will show an employer. An employer will look for thoughtful and succinct comments to judge your communication skills. ‹#› Why are the comments different in HTML and CSS? Because they are two different languages

19. Why does it matter? https://www.reddit.com/r/programmer/comments/idv687/there_exist_several_types_of_headaches_but_only/

20. Demo: Indenting and Comments Click the PLAY button

21. Exercise: Indenting and Comments 5.1 Correct the indenting on your Pacific Trails website and add an HTML and a CSS comment. Take a few minutes to repair the nesting and indenting on pacific.css, index.html, yurts.html, and activities.html. Add an HTML comment <!--This is the div for the hero image --> Add a CSS comment /* This is the CSS for the hero image */

22. The Box Model

23. The Box Model ‹#› There are two types of white or negative space: padding and margin. The padding is inside of the border, and the margin is outside of the border.

24. Using Chrome Developer Tools The padding is in green The margins are in salmon As a web developer, you will spend a lot of time adjusting margin and padding. To find the margin and padding to adjust, use the Chrome Developer Tools. Hover over the HTML to see the margin and padding.

25. Pop Quiz: The Box Model ‹#› Fill in the blanks: Content, Border, Margin and Padding. P.S. This is on the test.

26. The Box Model ‹#› Border Margin Content Padding

27. Demo : Box Model 6.1 Click the PLAY button

28. Exercise: Box Model Find an icon-sized small image url on Google images o r use this image: https://webdevstudents.com/wp-content/uploads/2022/09/kitten-square-1.jpg P ut it in JSFiddle in an <img>. Remember that the code for an image looks like this. <img src="" height="" width="" alt=""> Add border, padding , background-color and margin to your image in the CSS ‹#›

29. Your JSFiddle Should Look Like This… Save your JSFiddle tab…we will add to it in a bit. ‹#›

30. Nested Divs <div class="blue-color"> <div class="red-color"> </div> </div> Normal Flow Not Nested <div class="blue-color" > </div> <div class="red-color" > </div> In the Nested Div example, the red div opens and closes inside the blue div. In the Not Nested example, one div closes before the other div opens.

31. Normal Flow Matching Exercise <div class="blue-color"> </div> <div class="red-color"> </div> Draw a line to match the image to the code for the image <div class="blue-color"> <div class="red-color"> </div> </div>

32. Normal Flow Matching Exercise Answer: Note that the first image has a div inside of a div <div class="blue-color"> </div> <div class="red-color"> </div> <div class="blue-color"> </div> <div class="red-color"> </div>

33. Example from Pacific Trails <body> <div id="wrapper> … everything else goes inside of the wrapper… </div> </body This is how we achieve the page on a background look to the web page using a nested <div>. <div id="wrapper"> <body>

34. The CSS display Property

35. Review: Block and Inline Elements display: block The d efault width of element content is full width of its containing element. The example at right with a red border is an <h1> with the default value of display: block. display: inline The b order closely outlines the element content. In the green example at right, the default display value of block for an <h1> is overridden with the value of inline.

36. Review: Default Block and Inline Elements Some elements are by default block elements, and some are by default inline elements. Block display elements p, h1, div, hr Inline display elements img, a, span You can change the default display of an element with display:block or display:inline.

37. Now we are going to learn two additional values for the display property: display: inline -block display: none The CSS display Property display: block display: inline display: inline-block display: none

38. d isplay : inline-block Inline-block is a cross between inline and block. The margin and padding works differently, so sometimes inline-block behaves better. We use it in the lab assignment for this module. CSS Tricks has a good article on it: https://css-tricks.com/when-do-you-use-inline-block/

39. display : none In addition to display:inline and display:block , you can use display:none display:none hides the element. This code is used when you don't want an element to appear

40. Why would you want an element to not appear? Why not just take the element out of the html? display:none can be used to create a different layout for desktop and mobile. You create one layout for desktop and a different layout for mobile. (More about this in Module 6.) When creating websites in a content management system (CMS), like WordPress, you may not be able to access the HTML, while you can access the CSS. If the content management system layout has a section you don't like, you can make it disappear with display:none .

41. Demo : Making Elements Disappear 6.2 Click the PLAY button

42. Exercise: Making Elements Disappear Add display:none to your img selector . What happens? R emove display:none to bring the img back.

43. The CSS float Property

44. Float Property Use the float property to move elements to the right or to the left. The other elements will "float" around the floated element. In the example below, the image is floated to the left, and the text wraps around it.

45. Demo: float Property 6.3 Click the PLAY button

46. Exercise: float Property 1. Add the placeholder text (at right) to your JSFiddle. Place it in <p> tags underneath the image. 2. Float your image to the right of the text: float:right 3. Change the image to 50 x 50 pixels <img height="50" width="50"...> Placeholder Text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. What is placeholder text? When web designers are working on a layout but don't have the final copy yet, they place the "lorem ipsum" text where the final text is meant to go.

47. Your fiddle should look like this…

48. CSS Property: box-sizing box-sizing: border-box; This CSS is used to set the width and height properties to include content, padding and border, but not the margin. Default is content-box Note: This is in the Pacific Trails lab. You generally don't need to worry about adding this to your website, since most frameworks add it for you. We'll get to frameworks later in the semester.

49. Advanced Selectors

50. Review: What is the selector? The "selector" selects the HTML. Property: Value is a concept you will see in other programming languages.

51. Using "*" as the Selector Use "*" to select all as your CSS to select each element. Why use * as the selector instead of body? When you use body as the selector, the elements will inherit the CSS. When you use * as the selector, it selects everything directly instead of through inheritance. What would this do to your website? *{ display:none; }

52. Descendent Selector The SPACE is the descendant selector. We used it last week in Pacific Trails. Example: nav a { text -decoration:none; } In English: "If there is an a tag inside of a nav tag, then apply this CSS" See more CSS Combinators: https://www.w3schools.com/css/css_combinators.as p

53. Navigation in an Unordered List

54. Navigation is a list of links <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> ‹#› Use an unordered (bulleted) list <ul> for navigation. The code looks like this:

55. Why would we want to use a bulleted list for the navigation? When coding websites, developers always use the <ul> element to create the navigation, which by default is a bulleted list. Because an unordered list displays as a bulleted list, there are a host of CSS changes that must be made for the navigation to look like a navigation instead of a bulleted list. So, why all of this extra work for the menu? The reason why we do it is that a menu is a list. A list is several items in a relationship, and coding the navigation as a list helps the browsers to interpret the list of links as a grouping. Browsers expect to find the navigation in the <ul> element and each menu item in <li> tags.

56. Save your JSFiddle We will put together the pieces needed for navigation in JSFiddle, but then we will move that into our website template. First we'll work on the HTML and then the CSS. It's a bit complicated, so that is why we will save it to your template for future use.

57. Demo: Vertical and Horizontal Navigation 6.4 Click the PLAY button

58. Step 1: Change navigation to an unordered list Open JSFiddle. Change this navigation list into an unordered list with the <ul> and <li> tags. Copy the following text to the JSFiddle to get started: <nav> <a href="index.html">Home</a > <a href="menu.html">Menu</a> <a href="directions.html">Directions</a> <a href="contact.html">Contact</a> </nav> ‹#›

59. JSFiddle After Step 1 Your JSFiddle should look like this. Note that we have bullets we don't want. We need to remove them with CSS. The default underlining isn't a good look for a nav bar. We fix those problems in Step 2.

60. Step 2: CSS for Vertical navigation ‹#› 1. Remove the bullets from the list. Use the descendent selector of nav ul, with the property-value of list-style-type: none . 2. Remove the default underlining. Use the descendent selector nav a , with the property-value of text-decoration: none .

61. JSFiddle After Step 2 Your JSFiddle should look like this. This is how you would code a vertical navigation. Most websites use horizontal navigation, so we'll do that next.

62. Step 3: Horizontal Navigation 1. Add a new descendent selector nav li and set the property:value to display: inline . 2. Add a second property value to your existing nav a selector to add 10px of padding (spacing) to the right side of each nav item. ‹#›

63. Keep Your Fiddle Open… …there is even more coding required for a nav bar

64. Styling Your Navigation with Pseudo-classes

65. CSS Pseudo-classes A pseudo-class is used to define a special state of an element. For example, when you hover with your mouse, that would be a special state. Here are the four states that we need for links: link – default state for a hyperlink visited – a hyperlink that has been visited hover – triggered when the mouse moves over the hyperlink active – triggered when the hyperlink is being clicked These four pseudo classes must be in this order. Interested in why? I have this in an FAQ: https://webdevstudents.com/modules/module-5/#faq

66. Visited Color For a website navigation, it works best if you make the link color the same color as the visited color. If you have a list of items that your website visitor is going to click on and read, then add a different visited color so that users can know which links they have visited.

67. Demo: Pseudo-Classes 6.5 Click the PLAY button

68. Add the pseudo classes to your JSFiddle. Your fiddle should look like this. Hover over the links with a mouse to make sure they change color. Exercise: CSS Pseudo-classes

69. As you can see, creating a navigation requires a lot of code that can be difficult to remember. To keep track of it for future websites, add it to your template now. Add Navigation Code to Template

70. Exercise: Add the navigation HTML to your website template Work in the html file in your template folder. Cut and paste your code from your JSFiddle.

71. Add your CSS to your template's style.css Work in the style.css file in your template folder. Cut and paste your code from JSFiddle.

72. Template Work Because a lot of code is required to make the navigation work, it is important that you add this code to your template. Your work on the template is part of the lab for this week.

73. Positioning

74. The CSS positioning Property position: static Normal Flow position: fixed The element is fixed in the browser viewport position: absolute Element is fixed in its containing element position: relative Element is relative to where it would be in normal flow. Note: using fixed, absolute, and relative positioning is more challenging, so I don't cover it in this course. When we start Bootstrap in Module 11, that framework uses pre-built classes absolute and relative positioning.

75. Fixed Positioning Why would you use fixed positioning? Example 1: Chats use fixed positioning. Note that the chat stays in the same place even if you scroll. (https://pdqurgentcareandmore.com) Example 2: Website headers and navs sometimes use fixed positioning. This keeps the navigation in view while scrolling. This website uses fixed positioning on the navigation. ( https://whitebuffalowebsites.com/ )

76. Absolute Positioning See this example from W3 Schools: https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute Here is a good tutorial https://css-tricks.com/text-blocks-over-image/ Website Example: http://thebuffingtongroup.com/

77. This week for the lab assignment we will be using floats to create a left sidebar. Also for this week: Indent all of your code Add code comments in HTML and CSS Add the navigation HTML and CSS to your website template. Pacific Trails Chapter 6 Lab Assignment

78. Don't forget to take the Module 5 quiz before 10pm on Thursday evening. Module 5 Quiz