1 / 0

Creating and Editing a Web Page

HTML Project 02. Creating and Editing a Web Page. Saving an HTML File. HTML files must end with an extension of . htm or .html

carver
Download Presentation

Creating and Editing a Web Page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Project 02

    Creating and Editing a Web Page

  2. Saving an HTML File HTML files must end with an extension of .htm or .html HTML files with an extension of .html can be viewed on Web servers running an operating system that allows long file names (Windows). For Web servers that run an operating system that does not accept long file names, you need the .htm extension.
  3. Saving an HTML File In this book, all files are saved using the .htm extension. When saving an HTML file, do NOT include any spaces in the file name. Although allowed in both Windows and Macintosh, it is NOT allowed on a UNIX Web server—and most Web servers run UNIX The home page of a Web site should always be saved as index.htm.
  4. Saving an HTML File Save Notepad files with .htm extension (.html is also acceptable but not to be used for classroom exercises) .html Used for Web servers that run an operating system that allows long file names (Windows/Macintosh do allow) .htm Used for Web servers that run an operating system that does not accept long file names
  5. Viewing or Opening a Web Page in a Browser Open My Computer Navigate to the appropriate folder
  6. Viewing or Opening a Web Page in a Browser G:\Web Design\HTML\Data Templates\Project02\AYK Double Click the icon—Apply2-1 Open the View Menu Click on Source
  7. Viewing or Opening a Web Page in a Browser Make changes? Save the HTML file Refresh the browser
  8. Saving an HTML File  Add your Name to Every Title Tag!!! Project 2 <title> YourName Campus Tutoring Service Home Page </title>  Save the Notepad file to the appropriate folder: Open the File Menu and select Save Navigate to the appropriate folder
  9. Saving an HTML File Projects Saved in ProjectFiles folder Apply your Knowledge Saved in the AYK folder In the Lab IntheLab folder
  10. Saving an HTML File Remember to use the .htm extension and no spaces Save as: project2.htm in the ProjectFiles folder
  11. Apply Your Knowledge (P. 64)  <title> Your Name Apply Your Knowledge</title> Open: apply2-1.htm Save as:apply2-1solution.htm G:\Web Design\HTML\Data Templates\Project02\AYK
  12. In the Lab (P. 65)  <title>Your Name LAB 2-1</title> Save as:lab2-1.htm G:\Web Design\HTML\Data Templates\Project02\InTheLab
  13. DOCTYPE – Initial Tags to Define a Web Page Structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> Campus Tutoring</title> </head> <body> </body> </html>
  14. DOCTYPE – Initial Tags to Define a Web Page Structure <!DOCTYPE> indicates the version and type of HTML used
  15. DOCTYPE – Initial Tags to Define a Web Page Structure <html> </html> Indicates the start and end of an HTML document
  16. DOCTYPE – Initial Tags to Define a Web Page Structure <title> </title> Indicates the start and end of a title which does not appear in the Web page but appears on the Title Bar of the browser (Always include your name and Project name)
  17. DOCTYPE – Initial Tags to Define a Web Page Structure <body> </body> Indicates the start and end of the Web page body
  18. DOCTYPE – Initial Tags to Define a Web Page Structure Most HTML tags have corresponding end tags—not all! For tags that do not have end tags, such as <hr /> and <br />, the tag is closed using a space and a forward slash
  19. Define the Web Page Structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE> tag is used to tell the browser which HTML or XHTML version and type the document uses. The W3C supports three document types:
  20. Define the Web Page Structure strict (prohibits the use of deprecated tags--tags that the W3C has named for eventual removal because newer, more functional tags are replacing them) transitional (allows the use of deprecated tags) frameset (used to support frames on a Web page and also allows the use of deprecated tags) Notice that we are using a transitional document type
  21. Define the Web Page Structure The <!DOCTYPE> tag also includes a URL that references a Document Type Definition (DTD) found on the W3C Web site. This is a file containing definitions of tags and how they should be used in a Web page. To create an HTML document, you begin by inserting a <!DOCTYPE> tag and four sets of tags which define the overall structure of a standard Web page and divide the HTML file into its basic sections—such as the header information and the body of the page that contains text and graphics
  22. Headings Serve to separate text and introduce new topics Tags = <h6> to <h1> (smallest to largest) Heading size 1 = 24 point (usually only one <h1> tag per page) Heading size 2 = 18 point Heading size 3 = 16 point Heading size 4 = 14 point Heading size 5 = 13 point Heading size 6 = 11 point Normal text = 12 point
  23. Paragraphs: <p> </p> Used to indicate the start of a new paragraph; the browser starts a new line and inserts a blank line above the new paragraph
  24. Lists Lists structure text into an itemized format—either bulleted or numbered Ordered <ol> </ol> Also known as a numbered list formats information in a series using numbers or letters Default type = Arabic numbers Unordered <ul> </ul> Also known as a bulleted list formats information using small images called bullets Default type = disc bullet To change the defaults, the type attribute is entered within the <ol> or <ul> tags. <ol type=”A”> or <ul type=”square”>  After the <ol> or <ul> tag is entered to define the type of list, the <li> and </li> tags are used to define a list item in an ordered or unordered list.
  25. Images: <img> Web pages use three types of files as images: Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG), and Portable Network Graphics (PNG) Attributes used with the <img> tag: src attribute = used to define the URL of the image to load alt attribute = used to provide alternative text if the image does not load
  26. It is important to include the height and width attributes so the browser will know the size of the image without having to calculate it. Adding these attributes will be expected every time you insert an image tag! <imgsrc=”cts_clip8.gif” width=”484” height=”62” alt=”Student Services logo” />
  27. Background color: bgcolor attribute Use a six-digit number code or a color name (predefined) Must be added in the <body> tag (pg. 55)
  28. Align attribute Right: align=”right” Center: align=”center” Left: align=”left” By default, headings (and text) are left-aligned
  29. Horizontal rule: <hr /> Does not have an end tag Tag is closed using a space and a forward slash  Visual divider of sections on a Web page  Can use an inline image or the horizontal rule tag  Dimension is added to the default horizontal rule by increasing the number of pixels that are displayed  Can also turn off shading using the noshade option
More Related