• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html, CSS & Web Designing
 

Html, CSS & Web Designing

on

  • 1,479 views

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

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

Statistics

Views

Total Views
1,479
Views on SlideShare
1,479
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html, CSS & Web Designing Html, CSS & Web Designing Presentation Transcript

    • HTML, CSS & Web Designing
      Leslie Steele
    • 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
      • may design the overall look and let a Web master do the actual coding
      • 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.
    • What is a Web designer?
      Web design is loosely divided into:
      • design (graphics, layout)
      • development (programming)
      • marketing (business goals, analysis, content)
      • IT (hosting)
    • Web Design Guidelines
      • Site planning
      • Analyze the need for the site
      • Choose content
      • Graphics
      • Implementation & maintenance
    • HTML
      =
      hypertext markup language
    • 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.
    • 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.
    • HTML Basics
      Open/close tags :
      <html> </html>
      self-closing:
      <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 />
    • 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.
    • HTML Basics
      Heading tags:
      • <h1> </h1> - largest heading font size
      • <h2> </h2>
      • <h3> </h3>
      • <h4> </h4>
      • <h5> </h5>
      • <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
    • 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" />
      </form>
      How it will appear on a Web page:
    • HTML Basics
      Buttons:
      <button type="button">Clicky click here!</button>
      How it will appear on the page:
    • HTML Basics
      HTML tags to format text:
      • Bold = <b> </b>
      • Italics = <i> </i>
      • Superscripted text = <sup></sup>
      • Subscripted text = <sub></sub>
      • Underline has become obsolete for regular text- except for hyperlinks <a href= “url”></a>
    • HTML Basics
      The basic structure of an HTML document:
      <html>
      <head>
      <title> </title>
      </head>
      <body>
      …WEB PAGE CONTENT GOES HERE... ANYTHING IN BETWEEN THESE BODY TAGS IS VISIBLE ON THE WEB PAGE…
      </body>
      </html>
    • 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:
    • 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.
    • Padding
      CSS
      =
      Cascading Style Sheets
      Links
      Borders
      Text
      Fonts
      Backgrounds
      Tables
      Margins
    • 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).
    • CSS
      CSS can be used to format:
      • Background color, image, & position
      • Borders color, style, & width
      • Font family, size, style, variant, & weight
      • Text alignment, decoration, indentation, spacing, & white space
      • 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>
    • Example of Embedded CSS:
      <head>
      <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}
      </style>
      </head>
    • What this code means:
      • background color = beige; header 1 element font will be Century Gothic, right-aligned, & the color will be pale blue-ishgreen.
      • The h1 is different from the others because it will have a background color of its own.
      • header 2 element will have the same font, medium blue-ish green.
      • header 3 will have the same font & same color as h2 but will be center-aligned.
      • 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:
    • 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.
    • CSS
      Example of inserting the link to the style sheet into the HTML document:
      <head>
      <title>My page</title>
      <link rel="stylesheet" type="text/css" href="mystyle.css" />
      </head>
    • 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;}
    • How it will appear on the page:
    • 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.
    • 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:
      W3Schools.com
      HTML.net
      HTMLdog.com
      Youtube.com