Your SlideShare is downloading. ×
Html, CSS & Web Designing
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html, CSS & Web Designing


Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. HTML, CSS & Web Designing
    Leslie Steele
  • 2. What is a Web designer?
    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.
    Web designers:
    • may use Web-authoring software or an HTML editor to create the actual pages
    • 3. may design the overall look and let a Web master do the actual coding
    • 4. most often, they are also proficient with Web graphics and images.
  • What is a Web designer?
    Web designers often work for corporations, marketing/advertising firms, web design shops, or as freelance designers.
  • 5. What is a Web designer?
    Web design is loosely divided into:
    • design (graphics, layout)
    • 6. development (programming)
    • 7. marketing (business goals, analysis, content)
    • 8. IT (hosting)
  • Web Design Guidelines
    • Site planning
    • 9. Analyze the need for the site
    • 10. Choose content
    • 11. Graphics
    • 12. Implementation & maintenance
  • HTML
    hypertext markup language
  • 13. HTML
    hypertext markup language
    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.
  • 14. HTML Basics
    HTML consists of commands in between angled brackets ( <> ), called tags or markup.
    These tags define the structure & layout of a Web page and specify how the page is displayed in the browser.
  • 15. HTML Basics
    Open/close tags :
    <html> </html>
    <br />, <img />, <hr />
    Closing tags & self-closing tags require a forward slash ( / ) either in the closing tag or at the end of the self-closing tag:
    </h1> or <img />
  • 16. HTML Basics
    HTML documents must start with html tags (<html>, </html>). The content in between the html tags describes the Web page.
    All page content in between the open/close BODY tags (<body> </body>)
    This means that everything contained between the <body> tags will be visible on the page.
  • 17. HTML Basics
    Heading tags:
    • <h1> </h1> - largest heading font size
    • 18. <h2> </h2>
    • 19. <h3> </h3>
    • 20. <h4> </h4>
    • 21. <h5> </h5>
    • 22. <h6> </h6> - smallest heading font size
  • HTML Basics
    Other common tags:
    Paragraphs, headings - <p> </p>, <h1> </h1>
    Ordered list (numbered) - <ol> </ol>
    Unordered list (bulleted) - <ul> </ul>
    Tables - <table> </table> <tr> = table row
    <td> = table data - contains text, links, images, lists, forms, other tables
  • 23. HTML Basics
    Forms <form> </form> - used to pass data to a serverfrom the browser. Example:
    <form>First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" />
    How it will appear on a Web page:
  • 24. HTML Basics
    <button type="button">Clicky click here!</button>
    How it will appear on the page:
  • 25. HTML Basics
    HTML tags to format text:
    • Bold = <b> </b>
    • 26. Italics = <i> </i>
    • 27. Superscripted text = <sup></sup>
    • 28. Subscripted text = <sub></sub>
    • 29. Underline has become obsolete for regular text- except for hyperlinks <a href= “url”></a>
  • HTML Basics
    The basic structure of an HTML document:
    <title> </title>
  • 30. HTML Basics
    Saving an HTML document:
    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:
  • 31.
  • 32. HTML Basics
    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.
  • 33. Padding
    Cascading Style Sheets
  • 34. CSS
    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).
  • 35. CSS
    CSS can be used to format:
    • Background color, image, & position
    • 36. Borders color, style, & width
    • 37. Font family, size, style, variant, & weight
    • 38. Text alignment, decoration, indentation, spacing, & white space
    • 39. Margin length & percentage
  • CSS
    3 types of CSS: Inline style sheet, embedded style sheet, & external/linked style sheet.
    Inline style sheet example:
    <h1 style = “font-family: Arial; font color: purple”>This heading is purple with Arial font.</h1>
  • 40. Example of Embedded CSS:
    <title>My Web Page</title>
    <style type="text/css">
    body {background-color: #F0E0B2}
    h1 {background-color: #58B79F; color: #EBFFFF; font- family: Century Gothic, sans-serif; text-align: right}
    h2 {font-family: Century Gothic, sans-serif; text- decoration: underline; color: #58B79F}
    h3 {font-family: Century Gothic, sans-serif; text-align: center; color: #58B79F}
    p {font-family: Century Gothic, sans-serif; font-style: italic; color: #47390D; font-size:20px}
    a {font-size:22px;color:#58B79F}
  • 41. What this code means:
    • background color = beige; header 1 element font will be Century Gothic, right-aligned, & the color will be pale blue-ishgreen.
    • 42. The h1 is different from the others because it will have a background color of its own.
    • 43. header 2 element will have the same font, medium blue-ish green.
    • 44. header 3 will have the same font & same color as h2 but will be center-aligned.
    • 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.
  • How it will appear on the page:
  • 46.
  • 47. CSS
    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.
  • 48. CSS
    Example of inserting the link to the style sheet into the HTML document:
    <title>My page</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
  • 49. Example of an external style sheet code (in part):
    p {font-family: Gabriola; font-size: 18pt; color: #4F601A; text-align: center;}
    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;}
    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;}
    h3 {font-family: Gabriola; font-size: 22pt; color: #384505;}
  • 50. How it will appear on the page:
  • 51. Final points
    It is important to note that the pages’ appearance will vary in different browsers because each browser renders the code a little differently.
  • 52. Final points
    There is much more to HTML & CSS than what I’ve shown you. Some excellent resources for learning Web design on your own are: