Html, CSS & Web Designing


Published on

This is a presentation for my technical writing English class at HACC.

Published in: Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html, CSS & Web Designing

  1. 1. HTML, CSS & Web Designing<br />Leslie Steele<br />
  2. 2. What is a Web designer?<br />A Web Designer is a person who skillfully creates presentations with special coding languages like HTML, CSS, etc. Those presentations are delivered through the World Wide Web via Web browsers. <br />Web designers: <br /><ul><li>may use Web-authoring software or an HTML editor to create the actual pages
  3. 3. may design the overall look and let a Web master do the actual coding
  4. 4. most often, they are also proficient with Web graphics and images.</li></li></ul><li>What is a Web designer?<br />Web designers often work for corporations, marketing/advertising firms, web design shops, or as freelance designers.<br />
  5. 5. What is a Web designer?<br />Web design is loosely divided into:<br /><ul><li>design (graphics, layout)
  6. 6. development (programming)
  7. 7. marketing (business goals, analysis, content)
  8. 8. IT (hosting)</li></li></ul><li>Web Design Guidelines<br /><ul><li>Site planning
  9. 9. Analyze the need for the site
  10. 10. Choose content
  11. 11. Graphics
  12. 12. Implementation & maintenance</li></li></ul><li>HTML<br />=<br />hypertext markup language<br />
  13. 13. HTML<br />=<br />hypertext markup language<br />HTML is a coding language that makes up the basic construction of a Web page.Programs for coding HTML (called HTML editors) include Notepad and Notepad ++. Others include MS Expression Studio Web & my personal favorite, Adobe Dreamweaver.<br />
  14. 14. HTML Basics<br />HTML consists of commands in between angled brackets ( <> ), called tags or markup. <br />These tags define the structure & layout of a Web page and specify how the page is displayed in the browser. <br />
  15. 15. HTML Basics<br />Open/close tags :<br /><html> </html><br />self-closing:<br /><br />, <img />, <hr /><br />Closing tags & self-closing tags require a forward slash ( / ) either in the closing tag or at the end of the self-closing tag:<br /></h1> or <img /><br />
  16. 16. HTML Basics<br />HTML documents must start with html tags (<html>, </html>). The content in between the html tags describes the Web page.<br />All page content in between the open/close BODY tags (<body> </body>)<br />This means that everything contained between the <body> tags will be visible on the page.<br />
  17. 17. HTML Basics<br />Heading tags:<br /><ul><li><h1> </h1> - largest heading font size
  18. 18. <h2> </h2>
  19. 19. <h3> </h3>
  20. 20. <h4> </h4>
  21. 21. <h5> </h5>
  22. 22. <h6> </h6> - smallest heading font size</li></li></ul><li>HTML Basics<br />Other common tags:<br />Paragraphs, headings - <p> </p>, <h1> </h1><br />Ordered list (numbered) - <ol> </ol><br />Unordered list (bulleted) - <ul> </ul><br />Tables - <table> </table> <tr> = table row<br /> <td> = table data - contains text, links, images, lists, forms, other tables<br />
  23. 23. HTML Basics<br />Forms <form> </form> - used to pass data to a serverfrom the browser. Example:<br /><form>First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" /><br /></form><br />How it will appear on a Web page:<br />
  24. 24. HTML Basics<br />Buttons:<br /><button type="button">Clicky click here!</button><br />How it will appear on the page:<br />
  25. 25. HTML Basics<br />HTML tags to format text:<br /><ul><li>Bold = <b> </b>
  26. 26. Italics = <i> </i>
  27. 27. Superscripted text = <sup></sup>
  28. 28. Subscripted text = <sub></sub>
  29. 29. Underline has become obsolete for regular text- except for hyperlinks <a href= “url”></a></li></li></ul><li>HTML Basics<br />The basic structure of an HTML document:<br /><html><br /><head><br /><title> </title><br /></head><br /><body><br />…WEB PAGE CONTENT GOES HERE... ANYTHING IN BETWEEN THESE BODY TAGS IS VISIBLE ON THE WEB PAGE…<br /></body><br /></html><br />
  30. 30. HTML Basics<br />Saving an HTML document:<br />The document must have a file extension of either “.html” or “.htm”. Otherwise it is just a text file (.txt) and the code will appear in the browser as simple text, like this:<br />
  31. 31.
  32. 32. HTML Basics<br />In a Web browser, when viewing the same code for a document saved with the “.html” or “.htm” file extension, nothing will be visible on the page since there is nothing within the <body></body> tags in the code.<br />
  33. 33. Padding<br />CSS<br />=<br />Cascading Style Sheets<br />Links<br />Borders<br />Text<br />Fonts<br /> Backgrounds <br />Tables<br />Margins<br />
  34. 34. CSS<br />There are standards & rules that apply to CSS just like there are with HTML. CSS is a separate “language” but it is not HTML. It enhances the display capabilities of HTML. The same HTML editors can be used to write CSS (Notepad, Notepad ++, among others). <br />
  35. 35. CSS<br />CSS can be used to format:<br /><ul><li>Background color, image, & position
  36. 36. Borders color, style, & width
  37. 37. Font family, size, style, variant, & weight
  38. 38. Text alignment, decoration, indentation, spacing, & white space
  39. 39. Margin length & percentage</li></li></ul><li>CSS<br />3 types of CSS: Inline style sheet, embedded style sheet, & external/linked style sheet.<br />Inline style sheet example: <br /><h1 style = “font-family: Arial; font color: purple”>This heading is purple with Arial font.</h1><br />
  40. 40. Example of Embedded CSS:<br /><head><br /><title>My Web Page</title><br /><style type="text/css"><br /> body {background-color: #F0E0B2}<br /> h1 {background-color: #58B79F; color: #EBFFFF; font- family: Century Gothic, sans-serif; text-align: right}<br /> h2 {font-family: Century Gothic, sans-serif; text- decoration: underline; color: #58B79F}<br /> h3 {font-family: Century Gothic, sans-serif; text-align: center; color: #58B79F}<br /> p {font-family: Century Gothic, sans-serif; font-style: italic; color: #47390D; font-size:20px}<br /> a {font-size:22px;color:#58B79F}<br /></style><br /></head><br />
  41. 41. What this code means: <br /><ul><li>background color = beige; header 1 element font will be Century Gothic, right-aligned, & the color will be pale blue-ishgreen.
  42. 42. The h1 is different from the others because it will have a background color of its own.
  43. 43. header 2 element will have the same font, medium blue-ish green.
  44. 44. header 3 will have the same font & same color as h2 but will be center-aligned.
  45. 45. paragraph element will be the same font, italicized, dark brown color, and 20 pixels high. The “a” element, or hyperlink, will be 22 pixels high with the same color as the headers.</li></li></ul><li>How it will appear on the page:<br />
  46. 46.
  47. 47. CSS<br />External/linked style sheet- a separate file that contains all the styles for the html document that is linked into the <head> section after the <title></title>. The file is saved with a “.css” extension (i.e.- “mystyle.css”)… otherwise it’s just a text (.txt) file.<br />
  48. 48. CSS<br />Example of inserting the link to the style sheet into the HTML document:<br /> <head><br /> <title>My page</title><br /><link rel="stylesheet" type="text/css" href="mystyle.css" /><br /> </head><br />
  49. 49. Example of an external style sheet code (in part):<br />p {font-family: Gabriola; font-size: 18pt; color: #4F601A; text-align: center;}<br />h1 {font-family: "Edwardian Script ITC"; font-size: 38pt; font-weight: lighter; color: #FFF; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-color: #DBEAAF; border-right-color: #DBEAAF; border-bottom-color: #DBEAAF; border-left-color: #DBEAAF; text-align: left; text-decoration: underline; border-bottom-style: inset;}<br />h2 {font-family: "Edwardian Script ITC“; font-size: 34pt; color: #F2F8E0; text-align: center; border-top-width: 1pt;border-right-width: 1pt; border-bottom-width: 1pt; border-left-width: 1pt; border-top-style: solid; border-bottom-style: solid; border-top-color: #F2F8E0; border-right-color: #F2F8E0; border-bottom-color: #F2F8E0; border-left-color: #F2F8E0;}<br />h3 {font-family: Gabriola; font-size: 22pt; color: #384505;}<br />
  50. 50. How it will appear on the page:<br />
  51. 51. Final points<br />It is important to note that the pages’ appearance will vary in different browsers because each browser renders the code a little differently. <br />
  52. 52. Final points<br />There is much more to HTML & CSS than what I’ve shown you. Some excellent resources for learning Web design on your own are:<br /><br /><br /><br /><br />