Module 2-Introduction to HTML (Chapter 2).pptx

HTML

1. Introduction to HTML ‹#› This slideshow supplements the material in Chapter 2 of Web Development and Design Foundations with HTML5 by Terry Felke-Morris. HTML TEXT MARKUP Module 2

2. Agenda Organizing Website Files and Folders HTML Tags and Elements The Framework for a Web Page HTML Text Markup Making Lists with HTML HTML Semantic Elements The <div> Element HTML Entities (including the Copyright Symbol) Website Links with the Anchor tag <a> Lab ‹#› Module 2 in a Text Format Lab Instructions

3. Read Chapter 2 in the textbook before you start this slideshow.

4. At the end of class, you will know another language.

5. What do you see in this picture?

6. It's a lot of work to go up hill, but the best is yet to come.

7. Enjoy the Challenge of Coding Positive Self-Talk—Believe that you can do it! See the challenge as a part of meeting a future goal Send yourself positive messages in code Power p ose (See the next slide.) Rest and try again later Ask your neighbor for help. Help your neighbor. ‹#›

8. What is the power pose? Read about it

9. Organizing Files and Folders

10. On a scale of 1-5, how clean is your workspace? Spotless Disaster

11. So, if my desk is messy, w hy do I have to keep my website files organized? Because the website files refer to each other, and you need to know where they are. Even if you don't keep the rest of your world organized, you must keep your website folders and files organized. When I help students with the lab and they say the code isn't working, the problem is frequently that they are working in the wrong file. The most likely reason your website doesn't work is because you don't have your folders and files organized.

12. What are good folder and file names? Website developers have rules for creating file names. Some of the reasons are by convention and some to avoid problems. Use only lowercase letters (a-z), numbers (0-9) and put a dash between each word. Never use spaces or special characters, except a dash. Put a dash between each word. This helps Google search bots in reading your folder or file name. Note: In other programing languages you may have used camelCase or underscores. Do not use these in folder and file names for HTML and CSS. Good folder names susan-metoxen portfolio-website Bad folder names S usan Metoxen myclassfolder susan_metoxen susanMetoxen

13. Why is this a bad folder name? m y website project

14. URL with Folder "my project name" Your website files and folders display in the URL. Everytime you use a space, the URL displays %20. Don't use spaces in your folder and files names.

15. Each Website Has Its Own Folder On your computer, decide where to place your overall "websites" folder. Placing it in the Documents folder is a good idea. Remember where you placed it. Each website you make will have its own folder in the websites file. Last week we made a file called, "resume.html" and we will create a folder for it called, "portfolio". Today we will create a "templates" and a "pacific" folder for two new websites. Documents websites pacific portfolio resume.html templates index.html Optional: Read my blog post on how websites files and folders work together. https://webdevstudents.com/website-files-and-folders-explaining-the-magic/

16. Demo: Organizing your website folders and files 2.1 Click the PLAY button

17. Exercise: Organize folders Create a folder for your websites called, " websites ". A good place for your websites folder is your computer's Documents folder. (Put the folder on your computer, not in One Drive. If you are borrowing a computer, put the websites folder on your flash drive.) Create a folder inside your websites folder called "portfolio" on your computer. Find the resume.html file from last week and move it into the "portfolio" folder. Inside your "websites" create another folder called "pacific". We will be working in the "pacific" folder for the lab assignment for this week. Create another folder called "templates" Open your text editor, and create a file called "template.html" or "index.html" and save it in your "templates" folder. (In Windows, be sure to save as an html (hypertext markup language) file. Documents websites pacific portfolio resume.html t e mplates index.html

18. Set Up Files and Folders If you skipped the exercise in the previous slide, go back an do it now. This is part of the lab for this week. When going through the slideshow, look for the "Let's Do It" sticky notes and take a moment to try the exercise. Some exercises, especially this week, involve modifications to the template and I grade those.

19. HTML Tags and Elements

20. What is HTML? HTML is a markup language <p>This is an HTML Element. </p> The <p> and </p> tags are the markup ‹#›

21. HTML Tags ‹#›

22. HTML Element <p>The HTML Element includes the tags and everything in between.</p>

23. Pop Quiz Which part(s) are tags? Which part(s) are element? <p>What is an HTML tag?</p>

24. Pop Quiz Answer Which part(s) are tags? Which part(s) are elements? <p>What is an HTML tag?</p> <p> is an opening tag. </p> is a closing tag. The tags plus the text between them are the HTML element .

25. The Framework for a Web Page

26. In Module 1, we did a bit of HTML work without adding in the required code to set up a website. Now we need to do it the right way. Take a deep breath. There is a lot of code coming your way. But you only need to type all of this one time and you don't need to memorize it. While you don't need to memorize it, you do need to know what each element is used for. We'll keep all of this code in a template so you can reuse it. Required Framework for a Website

27. DOCTYPE : Document Type Definition <!DOCTYPE html> is placed at the top of each html file. <!DOCTYPE html> is how we define the HTML document starting with HTML5. Before HTML5, the Doctype was more complicated, and you may see it on some older websites. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd > ‹#›

28. Web Page Structure This is the structure of a web page. <!DOCTYPE html> <html lang="en"> <head> <title>My Cool Website</title> <meta charset="utf-8"> </head> <body> <p>This is my website</p> </body> </html> ‹#› <html>tags wrap the entire website except the DOCTYPE. Set the language in the opening html tag. "en" is for English. The head and body elements go inside of the html tags.

29. Head & Body Sections Head Section <head> Contains information that describes the web page document <head> /*Meta data goes here*/ </head> ‹#› Body Section <body> Contains text and elements that display in the web page document <body> <h1>Hello World!</h1> </body> The <head> section and the <body> sections of a website each have their own purpose.

30. Web page charset The charset HTML attribute specifies the character encoding for the HTML document. It goes into the website <head></head> as metadata <meta charset="utf-8"> Unicode Transformation Format - 8 bits ( utf-8) What is utf-8 encoding?

31. Web page <title> The title appears in the browser bar It is important for Search Engine Optimization (SEO) It goes into the website <head></head> as metadata <title>Template</title> This is where the page title displays

32. Use " index.html" for the Home Page File Name The website home page is always named "index.html" in this course. When the user types in a domain, eg. WebDevStudents.com, it assumes that the home page is named, index.html and shows the web page https://webdevstudents.com/index.html. If you home page is named, "home.html", the browser doesn't know what page to load. (If you learn the PHP language, the home page will be index. php instead of index.html. )

33. Putting It All Together This is the code we have covered so far. In the next slides, we will add this code to your website template.

34. Demo: Set up your web page 2.2 Click the PLAY button Note: I recommend naming your template file "index.html" instead of template.html. That is a change from the videos.

35. Exercise: Add HTML index.html in the template folder Create a file named "index.html" in your websites/template folder. (On Windows, save as a Hypertext Markup Language or HTML file). Add <!DOCTYPE html> Add the <html lang= " en " > </html> tags. N ote that the closing tag goes at the end of the page. Add the <head></head> tags Add the <body></body> tags Add title and meta-charset to the <head> <meta charset="utf-8"> <title>Template</title> ‹#› Note: We are putting this code into our template so we have it handy when we need to create a new website. Check to make sure your code looks exactly like the code in the screenshot.

36. Add Code to Template If you skipped the exercise in the previous slide, go back an do it now.

37. What code do we place in our website template? 1. Code that is used once per website and difficult to remember. 2. Structural code that you want to make sure is in every website. The purpose of the template is to put code that you want to type once in your lifetime, like the <!DOCTYPE html> and some of the metadata. We'll keep adding to the template in future modules. Note: On the videos, I named the website template file, "template.html". That created a hassle for students, who later needed to rename the file, "index.html" when we created new websites. That is why the slideshow and videos are inconsistent. I recommend naming the template "index.html", so that when you copy it, you don't have to rename it.

38. HTML Text Markup

39. H eading tags <h1>Heading Level 1</h1> <h2>Heading Level 2</h2> <h3>Heading Level 3</h3> <h4>Heading Level 4</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6> ‹#› Think of the Heading Tags as an outline. Every web page should have one <h1> heading that is the title of that web page. The major category headings are in <h2> tags, and the minor category headings are <h3>.

40. Purpose of Heading Tags The heading you choose, eg. <h1> or <h2> affect the size of the text. More importantly, the headings you choose tell the browser and search engines how the web page is organized and what is most important on the page. (On a side note, I rarely use <h4>, <h5> and <h6> tags. But they are there if you need them. )

41. <h1> Tag is Typically the Page Title On most websites, since there is a logo, the <h1> tags is used for the name of the page. However, for some of the early lab assignments we don't have a logo. Therefore, we use the <h1> tag for the overall website name, and <h2> for the name of the page. <h1> tag and page title

42. Demo: Add heading tags to your template 2.3 Click the PLAY button

43. Exercise: Heading tags Add a heading 1 and heading 2 element to your template.html or index.html file in the template folder. Place the heading tags between the <body></body> tags. <h1>Heading Level 1</h1> <h2>Heading Level 2</h2> ‹#›

44. <p> tags Most text on a web page is marked up with the paragraph tag, <p>. The <p> tag is the default tag to put on most text on a webpage. All of the text on a web page should have some markup. <p> tags would be the default markup. <p> If debugging is the process of removing software bugs, then programming must be the process of putting them in. </p>

45. Line Break Element <br> The line break <br>starts a new line without add ing extra space. The <br> tag moves the text to display on a new line without extra space. The extra space around a paragraph comes from default margins. (We'll start to learn about margins next week.) The video on the next page shows you how to use <br> tags. ‹#› There are <p> tags around each paragraph. The <p> tags add some spacing around each paragraph. When typing an address, you don't want to have the extra <p> space.

46. Demo: Text Markup using <p> and <br> 2.4 Click the PLAY button

47. Exercise: <p> and <br> Use the <br> and <p> as shown Save View in Chrome Browser What is the difference between using a <br> and a new <p></p>? Note: This is the technique you will use for the lab to code the address for the Pacific Trails Resort. ‹#›

48. Self-Closing Tags The <br> and <hr> are self - closing tags. Self -closing tags do not need to be opened and closed. For example the <p></p> tags need to be opened and closed because they aren't self-closing tags. HTML4 used <br/> and <hr/> and HTML5 uses <br> and <hr>. The change was made because removing the / requires less typing. ‹#›

49. Horizontal Rule The horizontal rule tag is <hr> <hr> is a self - closing tag ‹#›

50. Common Markup Elements <b> or <strong> for bold text <em> for italics <small> for small text, like in a footer

51. Nesting Order: Whichever element OPENS first CLOSES last <p> <em>Call for a free quote: <strong>888.555.5555 </strong> </em> </p> BROWSER DISPLAY: Call for a free quote: 888.555.5555

52. Nesting Order Example What is wrong with this code? <p><em>Call for a free quote: <strong>888.555.5555 </em> </strong> </p> The code is not nested correctly. The </strong> tag should be before the closing </em> tag. Whatever is opened first is closed last.

53. Making Lists with HTML

54. Three ways to make lists 1. Unordered List <ul></ul> Bulleted list 2. Ordered List <ol></ol> Numbered list or outline 3. Description List <dl></dl> Definitions list Let's try all three ways to make lists. ‹#›

55. Demo: Create an unordered and ordered list 2.5 Click the PLAY button

56. Exercise: Unordered List ‹#› Note the nesting and indenting of the list items.

57. Exercise: Ordered List ‹#›

58. Demo: Create a Description List 2.6 Click the PLAY button

59. Exercise : Description List Open JSFiddle. Type into the HTML section: <h2>Types of pets</h2> <dl> <dt>Dog</dt> <dd>Domesticated canine</dd> <dt>Cat</dt> <dd>Domesticated feline</dd> </dl> We will be creating a Definition List in the lab assignment for this week. ‹#›

60. HTML Semantic Elements

61. Semantic Elements The semantic elements are new with HTML5, but they have become very important for Search Engine Optimization (SEO). The semantic elements d escribe the structure of the content for the browser. For this class, use a minimum of the four semantic elements at right on each web page header Element <header></header> nav Element <nav></nav> main Element <main></main> footer Element <footer></footer>

62. Header, nav, main, footer Go to a website of your choice. What is the header? What is the nav? What is the main? What is the footer?

63. <header> <nav> <main> Note that the header, nav and footer will be the same on every page. The main section will be different on every page. <footer>

64. <header> <nav> <main> This is another common layout, with the <nav> next to (or inside) or the <header>

65. Demo: Structural Elements 2.7 Click the PLAY button

66. Exercise: Structural Elements 1. Open your template/index.html or template.html file 2. Add the structural elements inside of the body tags 3. Nest the <h1> inside of the <header> At this stage, your index.html file in the template should have the code at right. If you would like to keep your other code, place it in the <main> section. (You may delete it if you prefer.) ‹#›

67. <head> <header> and headings (h1) The developers who created HTML unfortunately used similar names for different parts of the web page. It is easy to mix them up. <head> This is where the metadata goes. <header> This is a semantic element that goes around the website logo or title. <h1><h2>....are headings that go around titles and subtitles in a web page. What were they thinking?

68. The <div> Element

69. <div> Element A <div> is a “division” <div> elements are used to apply a class, id or style to differentiate from the text from other code, like with a textbox on a webpage We'll cover how to add classes to an element next week. <div class="textbox"> <h2>Reptiles</h2> <p> R eptiles include turtles, crocodiles, amphibians, lizards and tuataras. </p> </div> ‹#›

70. The <div> Element is Common Most websites use a LOT of <div> elements.You can see them in the Chrome Inspector. The website below has more than some websites. It has more because it was created with a Content Management System.

71. HTML Entities for Special Characters

72. Special Characters Character Code © &copy; < &lt; > &gt; & &amp; &nbsp; ‹#› When you are working in a text-editor, you need to code special characters. The special characters are called HTML Entities. You can find a list at WP Schools. https://www.w3schools.com/html/html_entities.asp

73. &nbsp; Use &nbsp; for a non-breaking space In websites, we use it to make additional space between words, since extra spacing is ignored in the browser.

74. Demo: Add a footer with the copyright HTML Entity 2.8 Click the PLAY button

75. Exercise: Add Copyright Open your template file Add a copyright to your footer with the © Add the <small>tags around the footer. ‹#›

76. Add Code to Template If you skipped the exercise in the previous slide, go back an do it now.

77. Website Links with the Anchor <a> Tag Links

78. We are going to learn how to make website links! This is the coolest thing we will learn this week. Website links are what drive the Internet. One more big thing in Module 2…

79. Use the <a> tag to make links The anchor tag <a> is used to make links to another website or webpage. They are called "anchor" tags because when the Internet was young they were used to anchor key places in the text. Now they are mostly used to link to an entirely different page or perhaps to an entirely different website. (You can also use them to link within a webpage.) <a> tags are the coolest code we will add this week. Instead of just affecting the display, <a> tags actually do something.

80. How to use the <a> tags Text between the <a> and </a> is displayed to your websi te visitor <a> tags r equires the href attribute BTW... What's an attribute? (See the next page.) href = hypertext reference <a href=" https://saintpaul.edu " > Saint Paul College </a> ‹#› This is the url. This tells the browser where to go when clicked. The text between the <a></a> tags is what is displayed in the browser

81. Attributes... Are used to modify the element Provide more functionality G o inside of the opening tag, like we just did with the href attribute We will be learning a lot more attributes. Here are some examples we have already used. The attributes are highlighted in yellow. <a href="favorite-pets.html" >Favorite Pets</a> <html lang="en" > ‹#›

82. Absolute and Relative Links Absolute links Link to a different website. Note that you need the full url , including https. <a href=" https://saintpaul.edu ">Saint Paul College</a> Relative links Link to pages on your own site. The relative link must be aligned correctly in the website folders. <a href=" index.html ">Home</a> Understanding relative links can be a difficult concept, but it is critical that you understand them. See this blog post for more explanation: Read About Relative Links ‹#›

83. Demo: Absolute and Relative Links 2.9 Click the PLAY button

84. Exercise: Absolute Link 1. Open your template file 2. Add an absolute link into your < footer> The http or https is required for absolute links 3. Click on your link in the browser to c heck to make sure it works <a href="https://saintpaul.edu">Saint Paul College</a> ‹#›

85. Exercise : Relative Link 1 . Open your template file 2. Add relative links into your navigation <nav> <nav> <a href=" index.html "> Home </a> <a href="contact.html">Contact</a> <a href="about.html">About</a> </nav> ‹#›

86. Exercise: EMail Hyperlink Automatically launches the default mail program on the user's computer. <a href= " mailto: [email protected] " >Email Me</a> Add it to the footer in your index.html file ‹#›

87. Final Template We have been adding code to the template throughout this slideshow. Check your template against this one to make sure you have put everything in. You may have something different in the <main> section. That's fine, because you will generally delete the main section and start over on each web page.

88. Check Your Template If you skipped the exercise in the previous slide, go back an do it now.

89. Lab

90. Lab Series: Pacific Trails For the lab today we will start the series of Pacific Trails exercises. Pacific Trails is one of four exercises the textbook uses to practice the concepts in each chapter. My alternative instructions have more hints than the book instructions. In addition, I have some code that you can cut and paste.

91. How to compress (zip) your folder A website is a set of files in a folder. To submit your lab assignments on D2L, compress your "websites" folder and upload the .zip file. Mac Instructions: Right click on the folder and choose compress. Windows : Click here for instructions When you submit lab assignments, do not submit individual files. Make a zip package of your entire " websites " folder. This week I am grading on your work folder and file organization and on the template as well as the Pacific Trails Lab.

92. Pacific Trails Lab Chapter 2 1. Open up the Pacific Trails instructions 2. Save your work...we will build on this lab for labs 3-5.

93. Take the Module 2 Quiz Now that you have finished the Module 2 slideshow, take the Module 2 quiz in D2L. The quiz covers chapter 2 in the textbook and this slideshow. I recommend that you take the quiz before you do the lab assignment This quiz will not be available to you after Thursday at 10pm. The first quiz will close too.