Women in ITM Workshop: Intro to HTML and CSS


Published on

This is a workshop that was presented to Women in ITM at Ryerson University's Ted Rogers School of Management on March 22, 2014.

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Women in ITM Workshop: Intro to HTML and CSS

  1. 1. INTRO TO HTML/CSS By Shanta R. Nathwani, B.Com., MCP for Women In Technology Management
  2. 2. WELCOME • Introductions and Backgrounds • HTML • CSS • Layouts • Links, Images and Video We will take about 15 minutes between each lesson to work on the content and a break half way through.
  3. 3. ABOUT ME • Graduate of Ryerson’s ITM program (Co-op and Exchange) 2009 • Currently an Instructor in Web Design at Sheridan College in the joint CCIT program with UTM • Alumni Advisor for Women in ITM • Founder, Women in Information Technology Hamilton (WITHamOnt) • Applying for Masters in Educational Technologies at UBC
  4. 4. ABOUT DIMITAR • Will be graduating from the ICCIT program at UTM in June, including his certificate from Sheridan College • Soon-to-be co-instructor of the Beginner and Intermediate Web Design Courses at Sheridan College in the CCIT program • Independent Web Developer
  7. 7. HTML What is this?
  8. 8. CONCEPTS OF HTML CCT260H - Shanta R. Nathwani 8 HTML controls: • Layout • Image Placement • Links
  9. 9. HTML BASICS CCT260H - Shanta R. Nathwani 9
  10. 10. HTML BASICS • Elements are used to describe text • An element is comprised of: • An opening tag • A closing tag • Content • Tags are denoted by the greater and less than signs < > <strong> The text will appear bold </strong> CCT260H - Shanta R. Nathwani 10 Closing TagOpening Tag Content Element
  11. 11. HTML BASICS • Elements – like brackets – must be opened and closed • “Container Codes” • A closing tag is created by using the / character <body>  opening tag closing tag  </body> • Some elements may not have content: • <br/>  Self-closing element (one-tag, no content) CCT260H - Shanta R. Nathwani 11
  12. 12. HTML BASICS • HTML is case-sensitive (XHTML) • Use lowercase only! <body> not <Body> • Spelling is important • <body> </bodi>  element will not be closed • Embed tags correctly Incorrect: <h1> HTML <strong> is </h1> easy </strong> Correct: <h1> HTML <strong> is easy </strong> </h1> CCT260H - Shanta R. Nathwani 12
  13. 13. HTML BASICS CCT260H - Shanta R. Nathwani 13 • White space does nothing • Exception: Single space after a word • Enter, tabs are ignored • Use elements and styles to perform layout • Use white space to visually layout your code, not your layout Will look like this
  14. 14. HTML BASICS CCT260H - Shanta R. Nathwani 14 • Use spacing to clearly separate elements • Use indentation (tabs) to show hierarchy • Add comments to separate areas or provide notes to future programmers <!-- starts a comment --> ends a comment • Remember that comments are visible to the end-user, don’t insult your boss or swear!
  15. 15. TEXT ELEMENTS • <p> starts a paragraph ¶ • <br/> causes a new line ¬ - should be rarely used • <strong> bolds text • <em> italicize text • <sub> & <sup> create subscript and superscript text • <ins> & <del> underlines and strikes-out text CCT260H - Shanta R. Nathwani 15
  16. 16. LAYOUT ELEMENTS • <html> starts your page • <head> classifies your page • <body> contains your visible page • <div> starts a new block or section of the page • <span> is a generic wrap for a line of text • Used for more complex text styles • <h1> … <h6> creates heading and subheadings CCT260H - Shanta R. Nathwani 16
  17. 17. THINKING IN HTML CCT260H - Shanta R. Nathwani 17 Look for divisions (or sections) of text • Paragraphs • Headings • Images • Font or Style Changes • Boxed- or sub-text
  18. 18. HTML BASICS Why do we hand-code? • To better understand the language • Remember grammar in French class? • Aides in understanding output from Dreamweaver • To troubleshoot pages we did not create • To steal other people’s code! • Don’t ever do that for an assignment! >:@ CCT260H - Shanta R. Nathwani 18
  19. 19. LAB ONE • Open Your Text Editor and type the following code: CCT260H - Shanta R. Nathwani 19 <!DOCTYPE html> <html> <head> <title> Love HTML! </title> </head> <body> <h1> <!-- Copy your title here --> </h1> <p> <!-- Copy your assignment here. Each paragraph should be contained within another <p> --> </p> <footer> <!– Put your name and the date here --> </footer> </body> </html>
  20. 20. INSTRUCTIONS Open your lab in the text editor, replacing the comment lines <!-- X --> with your own essay pieces For example: This: <footer> <!– Put your name and the date here --> </footer> Becomes This: <footer> Shanta R. Nathwani, January 17, 2014 </footer> CCT260H - Shanta R. Nathwani 20
  21. 21. SAVING IN HTML 1. Select “Save As…" to change the extension to .html. Expand the “Save As…" dialog to see the additional options and then manually change the file’s extension to .html. 2. Save the document with the following format: filename.html • For example: lab1.html Remember to save your document in a place that you can find it again. One way to do this is to create a folder called yourlastname_firstwebpage on your desktop or in your roaming hard drive. CCT260H - Shanta R. Nathwani 21
  22. 22. TRY IT NOW! 15 minutes
  23. 23. CLARIFICATIONS & REVIEW • Only the heading tags (such as <h1> ) need to be numbered • Paragraph tags don’t need to be numbered. Just use <p>. Using this tag will automatically format a paragraph, such as spacing. • The <head> tag is used before the “visible” part of the html page, <body>. This is different than <header>, which is a title within the <body> tag. CCT260 - Shanta R. Nathwani 23
  24. 24. CLARIFICATIONS (PART 2) CCT260 - Shanta R. Nathwani 24 <html> <head> <title> This is visible on the tab on your browser </title> </head> <body> <h1> This is a 1st level header visible in the body part of the web page </h1> <p> This is a paragraph visible in the body part of the web page </p> </body> </html>
  25. 25. DIVING INTO CSS Already???
  26. 26. ATTRIBUTES • Tags can contain attributes • Attributes provide contextual information, just as giving it a style or unique identifiers • Always apply them to the first tag • Attributes also allow for JavaScript actions <div id=“section-first” class=“section”> </div> CCT260 - Shanta R. Nathwani 26
  27. 27. ATTRIBUTES • id must be unique throughout the page • class associates or groups tags together <div id=“section-one”> <div class=“title”> Title of Section One </div> <p> This is <span class=“highlight”>section one</span>. Next will be <span class=“highlight”>section two</span> </p> </div> CCT260 - Shanta R. Nathwani 27
  28. 28. QUICK POINT • If you are copying code from the PowerPoint slide, make sure you change the quotes! “ stylised ” Improper " ASCII-proper " Proper • PowerPoint automatically uses stylised quotes, which is not recognised by browsers CCT260 - Shanta R. Nathwani 28
  29. 29. STYLES AND HTML • HTML originally was never meant to depict style • It was created to provide semantic value to text • Tells us “What is this?” • i.e., Paragraph, Heading, List, List Item • Hence the argument over <b> and <strong> tags rendering differently • Before the existence of CSS, HTML was used “in-line” to change the appearance. – DON’T DO THIS ANYMORE! (unless it’s a short piece of text) CCT260 - Shanta R. Nathwani 29
  30. 30. STYLES AND CSS • Cascading Style Sheets (CSS) was created to resolve this missing piece • And stop the abuse of HTML to conduct formatting • Tells us “What does it look like?” • i.e., Size, shape, text, colour… and much more! • CSS matches what is contained in the HTML code • <div> in HTML is div in CSS • For our purposes of this lab, CSS is to be placed in the <head> area of your code. CCT260 - Shanta R. Nathwani 30
  31. 31. STYLES - LEVELS • Styles can be applied at five levels • Element Level (HTML) • <h1> • Class Level • .section • Element/Class (Instance) Level • ul.b • ID Level • #content • In-Line Level • Rarely used and considered poor form • Few exceptions CCT260 - Shanta R. Nathwani 31
  32. 32. ELEMENT STYLES CCT260 - Shanta R. Nathwani 32 <html> <head> <style type="text/css"> body { background-color: orange; } </style> </head> <body> … Style you are defining Start of definition End of definition Property Value
  33. 33. <body> The background is orange <p> bold text <span class="red">that is red</span> </p> back to normal </body> CASCADING STYLES CCT260 - Shanta R. Nathwani 33 • Styles are in inherited from parent elements <style type="text/css"> body { background-color: orange; } p { font-weight: bold; } .red { color: red; } </style> Class definition will change all elements with the same class name
  34. 34. COLOURS • Colours can be defined by name or value red = rgb(255,0,0) = #FF0000 • color property will set the text • background-color property will set the background • Colours are important: • Sets mood and possesses semantic meaning http://kuler.adobe.com/#create/fromacolor http://www.2createawebsite.com/build/hex-colors.html CCT260 - Shanta R. Nathwani 34
  35. 35. FONT FAMILY • There are only a dozen fonts uniform across browsers and systems • Set the style of font by using the font-family property: body { font-family: “Times New Roman”, “Times”, “serif”; } • Remember to have dropdown fonts http://www.w3schools.com/cssref/css_websafe_fonts.asp CCT260 - Shanta R. Nathwani 35
  36. 36. FONT SIZE CCT260 - Shanta R. Nathwani 36 • Explicitly by using “em”s, “pt”s or “px”s • Implicitly using percentiles: 100%, 60% etc. • Ems are relational to the font • px are screen sizes, but doesn’t work in older browsers dealing with accessibility • I suggest using em: font-size: 1.2em;
  37. 37. TEXT LAYOUT • In the CSS • text-align: [left|center|right|justify] • text-decoration: [underline|line-through] • text-indent: 50px CCT260 - Shanta R. Nathwani 37
  38. 38. LAB TWO Using the same file… • Proper format the paragraphs (indentation and justified) • Centre Titles • Change the overall font and size • Use a span to change in-line citation style • Select a comfortable colour palette All using CSS! CCT260 - Shanta R. Nathwani 38
  39. 39. PLAY • Online editor http://www.w3schools.com/Css/tryit.asp?filename=trycss_default • CCS reference http://www.w3schools.com/cssref/default.asp CCT260 - Shanta R. Nathwani 39
  40. 40. VIEWING YOUR HTML • To preview your new document, open Chrome on the tool bar (located up near the top of the browser): • Select File menu. Select Open Page A dialogue box appears. Select Choose File • Go to where you saved your file, click on it. This will bring you back to the dialogue box, which should now be showing your file. • Click Open CCT260H - Shanta R. Nathwani 40
  41. 41. PLAYING WITH HTML The best way to learn HTML: • Play! http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic • Explore! http://www.codecademy.com/tracks/web CCT260H - Shanta R. Nathwani 41
  42. 42. LAST POINTS • Please remember to “Save As…” an .html file • When copying the code, quotations won’t necessarily work. Documents will change quotation marks to curly quotes. Code needs straight quotes, so please remove and replace the quotations when copying from PowerPoint or Word. • Don’t cross the streams! Make sure that your codes go together. • For those using Windows, you can use Notepad++ as a text editor. SublimeText 2 is another great one, but is a paid program CCT260H - Shanta R. Nathwani 42
  43. 43. TRY IT NOW! 15 minutes
  44. 44. BREAK TIME! 15 minutes
  45. 45. LAYOUT Including DIV
  46. 46. PLANNING YOUR SITE • Think about what divisions you will need • Start with the highest level: the body • Then divide up your page • Starting with the biggest divisions, down to the smallest CCT260 - Shanta R. Nathwani 46 Title Menu Main Area Content Footer
  47. 47. CODING YOUR SITE <body> <div id=“title”> </div> <div id=“menu”> </div> <div id=“mainarea”> <div id=“content”> </div> <div id=“footer”> </div> </div> CCT260 - Shanta R. Nathwani 47 Title Menu Main Area Content Footer Note that ‘id’ or ‘class’ values cannot contain spaces
  48. 48. PREPARING YOUR STYLE <head> <style type="text/css"> div { border: solid 1px; } #title { } #menu { } CCT260 - Shanta R. Nathwani 48 #mainarea { } #content { } #footer { } </style> </head> Adds a simple thin black border around each division This is just for clarity while editing and we will remove this after we’re done Notice that instead of using a period (.) we use the hash symbol (#) to reference the id name of an element
  49. 49. PREPARING YOUR STYLE CCT260 - Shanta R. Nathwani 49 Doesn’t look like much… does it?
  50. 50. POSITIONING YOUR DIVISIONS • By default, <div>s take up the entire width of this page and resize the length to fit your content • You can force the size your <div> using pixels or ratios e.g. height: 100px; width: 50%; • And, you can tell a division stay on one side e.g. float: left; float: right; CCT260 - Shanta R. Nathwani 50
  51. 51. FORMATTING YOUR DIVISIONS CCT260 - Shanta R. Nathwani 51 • You can space your <div>s by adding margins margin: 5px; margin-top: 10px; • Or padding padding: 5px; padding-left: 20px; • Or borders border: solid 5px green;
  52. 52. FORMATTING YOUR DIVISIONS <head> <style type="text/css"> div { border: solid 1px; margin: 5px; padding: 5px; } #title { height: 50px; } #menu { width: 150px; float: left; height: 400px; } CCT260 - Shanta R. Nathwani 52 #mainarea { margin-left: 180px; margin-top: 10px; } #content { } #footer { height: 30px; text-align: right; } </style> </head>
  53. 53. FORMATTED DIVISIONS CCT260 - Shanta R. Nathwani 53
  54. 54. COMPLETING DIVISIONS CCT260 - Shanta R. Nathwani 54 • Now that it is laid out, you can: • Remove the borders • Or add other borders for visual separation • Use the styles from last lab (font-size, font- family, font-weight, color, background-color) to format and style the content border-bottom: double 5px gray; background-color: #DDDDDD; font-size: 2em; border-right: solid 2px gray; background-color: #eeeeee; text-align:center; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; text-align: right; font-size: 0.8em; color:#AAAAAA;
  55. 55. FILLING YOUR DIVISIONS CCT260 - Shanta R. Nathwani 55
  56. 56. LAB THREE • Create a new page (see Lab One) • Create a layout for your page • Give it some style (colours, borders, spacing) • Copy the content of your last lab into your new page (everything between the <body> and </body> tags) CCT260 - Shanta R. Nathwani 56
  57. 57. CHOOSING A LAYOUT • Sample layouts: http://foundation.zurb.com/templates.php • Play with divisions: http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel_width_doctype • Play with borders: http://www.w3schools.com/css/css_border.asp CCT260 - Shanta R. Nathwani 57
  58. 58. TRY IT NOW! 15 minutes
  59. 59. LINKS, IMAGES AND VIDEO The cool stuff!
  60. 60. OTHER THINGS TO REMEMBER • Your head is always atop your body • If it is otherwise, congrats, your more flexible than I am • The only stupid question is one unasked • Please post to the discussion group if you are having issues. • Everything is in American spelling • Sorry… CCT260 - Shanta R. Nathwani 60
  61. 61. IMAGES CCT260 - Shanta R. Nathwani 61 • Adding an image is easy! • <img src=“K9.jpg”/> • Sometimes files can be located in a sub-folder of a website • <img src=“Images/K9.jpg”/> • Or on other sites • <img src=“http://shanta.ca/Images/K 9.jpg”/>
  62. 62. THE ALT AND TITLE TAGS CCT260 - Shanta R. Nathwani 62 • The alt tag provides textual context if the image is missing • The title tag provides a tooltip for the user when they place their cursor over it • <img src="K9.jpg" alt="K9 of Doctor Who" title="K9 of Doctor Who" />
  63. 63. THE ALT AND TITLE TAGS CCT260 - Shanta R. Nathwani 63 • Don’t use the alt tag as a tooltip (works only in IE) • Always use alt tags for all important images • This is used for accessibility by people with impaired vision • And it is a requirement!
  64. 64. FLOATING IMAGES CCT260 - Shanta R. Nathwani 64 • You can position images using the float style <img src="graph.jpg" alt="Graph" style="float:left;"/> <img src="graph.jpg" alt="Graph" style="float:right;"/> This is called an in-line style. Use this for specific tags (like image) and for extremely individual changes. Image is one of the only exceptions that we will allow for in-line style in the HTML.
  65. 65. RESIZING IMAGES CCT260 - Shanta R. Nathwani 65 • You can change the size of the image using the width and height tags <img src=“K9.jpg" alt=“K9"/> <img src="mertz.jpg" alt="Mertz" width="40"/> <img src="mertz.jpg" alt="Mertz" width="100" height="200"/> Normal Small Stretched
  66. 66. BACKGROUNDS CCT260 - Shanta R. Nathwani 66 • Background for an entire page <style type="text/css"> body { background: url(floral.jpg); } </style>
  67. 67. BACKGROUNDS CCT260 - Shanta R. Nathwani 67 • Or any other section of the page #box { float: left; width: 480px; padding: 50px; background: url(background.jpg); text-align: center; } <div id="box"> <h2>II. Economic Liabilities - Peak Oil</h2> <img src="graph.jpg" alt="graph" width="300" /> </div>
  68. 68. OPACITY CCT260 - Shanta R. Nathwani 68 • You can set the opacity of items on you page as well #box { … filter: alpha(opacity=60); /* CSS3 standard */ opacity: 0.6; }
  69. 69. TRANSFORMATION -- PLAY! • http://www.w3schools.com/cssref/css3_pr_transform .asp • http://www.w3schools.com/cssref/tryit.asp?filename =trycss3_image_gallery CCT260 - Shanta R. Nathwani 69
  70. 70. LINKS • Links can be to internal, external site or jump to a section on your page via an anchor • We create a link by wrapping text or an image with the <a> tag <a href="http://www.w3schools.com/">Visit W3Schools!</a>  external link <a href=“mypage2.html">Page Two</a>  internal CCT260 - Shanta R. Nathwani 70
  71. 71. ANCHORS • We can create anchors by creating an empty <a> tag and providing it with an identifier <a id="name"/> • And link to it using the identifier with a # symbol <a href="#name">Jump to Anchor called name</a> CCT260 - Shanta R. Nathwani 71
  72. 72. LINKS • From one page to another on your own site: • On index page: <a href=“labone.html”>Lab One</a> • On Lab One: <a href=“index.html”>Home Page</a> • From one page to another external page: • On your page to Google: <a href=“http://google.ca”>Google It!</a> CCT260 - Shanta R. Nathwani 72
  73. 73. LINK STYLES • Links have four states a:link { color:#ff0000; } /* unvisited link */ a:visited { color:#00ff00; } /* visited link */ a:hover { color:#ff00ff; } /* mouse over link */ a:active { color:#0000ff; } /* selected link */ http://www.w3schools.com/css/tryit.asp?filename=trycss_link CCT260 - Shanta R. Nathwani 73
  74. 74. VIDEO <iframe width="420" height="315" src="http://www.youtube.com/embed/Sqiff0WFWvs" frameborder="0" allowfullscreen> </iframe> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4"> </video> CCT260 - Shanta R. Nathwani 74 There are two methods of placing video on a website using the <iframe> and <video> tags.
  75. 75. LAB FOUR • Add images within the text of your last assignment (not background) • Add either a background image to the entire page or a div within the page • Add a link to the Sheridan website • Add anchors for each subheading and place links to them in your menu • Put this lab on your webspace, then submit the link in a text file to the dropbox. • FOR THIS LAB, USE ONLY EXTERNAL IMAGES (i.e. reference an image somewhere on the web where anyone can see it) CCT260 - Shanta R. Nathwani 75
  76. 76. FINAL NOTES A Few Things We Couldn’t Fit In…
  77. 77. EXTERNAL CSS FILES • Today, we’ve only put the CSS in the <head> portion of your .html file. Typically, you would have an additional file • Extension is .CSS Insert the following line of code into the head of each of your HTML files: <link rel="stylesheet" type="text/css" href="mystyle.css">* *This assumes that the file is called “mystyle.css
  78. 78. EDITING AND UPLOADING • I recommend you get some webspace somewhere to make this stuff live on the internet • Get an FTP program that you like using • We typically use Cyberduck • Get a good Code Editor • We use Notepad++ on Windows, TextWrangler. Both are free. • I personally recommend SublimeText
  79. 79. RESOURCES • CodeCademy: http://codecademy.com • Lynda: http://lynda.com • W3Schools: http://www.w3schools.com/ • My Bluehost Affiliate Link: http://www.bluehost.com/track/shanta/aboutme
  80. 80. FINDING ME Shanta R. Nathwani, B.Com., MCP Instructor, Sheridan College Email: shanta@shanta.ca Website: http://shanta.ca Twitter: @TantienHime
  81. 81. THANK YOU! Now, go forth and be wonderful! – Professor Kathleen Greenaway, Ph.D.