1 / 23

Chapter 11

Chapter 11. Website Creation Skills. Chapter 11 Lessons. Lesson 11-1 Learn how HTML Code Works Lesson 11-2 Apply XHTML and CSS Attributes and Values Lesson 11-3 Create Hyperlinks Lesson 11-4 Add images to Web pages. Revealing the Secrets of the Net. Lesson 11-1.

basil-quinn
Download Presentation

Chapter 11

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. Chapter 11 Website Creation Skills

  2. Chapter 11 Lessons Lesson 11-1 Learn how HTML Code Works Lesson 11-2 Apply XHTML and CSS Attributes and Values Lesson 11-3 Create Hyperlinks Lesson 11-4 Add images to Web pages Chapter 11

  3. Revealing the Secrets of the Net Chapter 11

  4. Lesson 11-1 Learn how HTML Code Works In this Lesson You Will: 1. Key starting tags and closing tags. 2. Create HTML code and save it correctly. 3. Integrate levels of headings into Web pages. 4. Create unordered and ordered lists. Chapter 11

  5. Why Learn HTML? • Codes are converted, or compiled, by Web browsers. • Code is a combination of languages like Hypertext Markup Language (HTML), JavaScript, Java, Flash, and Cascading Style Sheets (CSS). • HTML is the foundation language and the original Web page development tool. By learning HTML, you will: • Develop a deeper understanding of how the Web works. • Troubleshoot Web pages when little errors occur. • View other pages and learn how they achieved certain effects. • Explain how HTML and other tools like Flash, JavaScript, and CSS work together. Chapter 11

  6. How HTML Works • HTML tags usually appear in pairs, enclosed in < angle brackets >. • There is an opening tag (sometimes called the starting tag) and a closing tag (sometimes called an ending tag). • The closing tag has a slash ( / ) in front of it. • Tags operate in pairs – whatever appears between the tags is affected by that command. • <center>Title of Report</center> Chapter 11

  7. What to use • Any text editor will work for creating HTML tags. • Use the most basic tools available so that the hidden tags of advanced applications do not confuse the Web browser. • Use basic text editors like: • Notepad • WordPad • Simple Text Chapter 11

  8. Save and View your HTML page • HTML documents are text files. • Saving as text only allows HTML files to move quickly over the Web. • HTML files are text files with an .html or .htm extension. • The extension signals to a Web browser that the file is an HTML text file. Chapter 11

  9. Using Headings • HTML gives you six standard headings from which to choose. • The heading tags provide an easy way to control the size of your text, making it stand out for your reader. • Heading tags use the letter h with a number from 1 to 6 to indicate the level of the heading, with 1 being most prominent and 6 being the least prominent. • <h1></h1> • <h2></h2> • <h3></h3> • <h4></h4> • <h5></h5> • <h6></h6> Chapter 11

  10. Numbered and Bulleted Lists • Lists are a powerful way to organize information. • In HTML, there are two kinds of lists: • <ul></ul> Unordered (or Bulleted) lists • <ol></ol> Ordered (or Numbered) lists • The items in either list are created with <li> </li>. Chapter 11

  11. Lesson 11-2 Apply XHTML and CSS Attributes and Values In this Lesson You Will: 1. Format a Web page with XHTML and CSS tags. 2. Organize a page with horizontal lines. 3. Implement attributes and values. 4. Change Web page color defaults. Chapter 11

  12. XHTML and DEprecation • New upgrades to HTML are being added every year. • Some upgrades are XML (Extensible Markup Language) and XHTML (Extensible HyperText Markup Language). • With the new languages, may older HTML tags are being deprecated – downgraded and devalued or becoming obsolete. • XHTML and XML allow you to get more done with a single tag through the use of attributes (special qualities, such as style) and values (definitions of attributes). <h1 style="text-align:right"> Sample Text </h1> <p style="font-family:times;font-size:150%"> Sample Text </p> Chapter 11

  13. Horizontal Rules and Breaks with single Tags • XHTML allows you to use single, or unpaired, tags. • An unpaired tag has the closing tag symbol ( / ) inside a single tag (for example <br />). • You can add attributes and values to unpaired tags. <hr /> <h3>Click Your Favorite Season</h3> Winter <br /> Spring <br /> Summer <br /> Fall <br /> <hr /> Chapter 11

  14. Apply more Attributes and Values • Style changes will make lines wider and shorter as measured in pixels (px). • A pixel is short for picture element – the smallest single dot of color your monitor is capable of displaying. • To see the impact of changes, you need to use 5, 10, 25, or even 50 pixels. Chapter 11

  15. Adding color attributes and values • The key to understanding XHTML is to become an expert at manipulating attributes and values. • Values are always placed between two straight quotation marks. • You can key color names as text values, such as red, blue, green, black, white, and yellow, as well as cornflowerblue, dodgerblue, lightskyblue, and many others. Chapter 11

  16. Digital Snapshot: Color by Number in Hexadecimal White #FFFFFF Green #00FF00 Black #000000 Blue #0000FF Red #FF0000 Yellow #FFFF00 • You can key color names as values, computers use numbers. • Values must be converted into numbers that the computer understands. • Color values can be carefully controlled and changed to match virtually every color in the rainbow by using hexadecimal values. • Hexadecimal digits operate on a base-16 number system – using A, B, C , D, E, and F along with 0 to 9. Chapter 11

  17. Coloring Text with CSS • With Cascading Style Sheets, you can define colors for the entire page without having to change specific lines of code one at a time. • You must define CSS styles with the following attribute and value set: <style type="text/css"> . • This style definition must appear between the <head></head> tags. • The values for each style will appear between curly brackets { }. Chapter 11

  18. Lesson 11-3 Create Hyperlinks In this Lesson You Will: 1. Create hypertext link using the anchor tag. 2. Make and test multiple hyperlinks to locations within a page. 3. Create hyperlinks to other Web pages. Chapter 11

  19. Hyperlinks inside your Document • Web pages can easily link to other pages, to places within a page, and to other Web pages anywhere on the World Wide Web. • Both text and images can be turned into links with a few simple tags. • Hyperlinks are created with special tags called anchor tags:<a href="insert location of file"></a> . • The attribute href is short for HyperText Reference. • The value for HREF is the location to which you want the link to take you. • If you are linking within a page, the pound sign (#) is used before the location name and a second anchor tag, <a name> will identify the exact location in the Web page to which you want to link. Chapter 11

  20. Creating Hypertext links to the web • Uniform Resource Locators (URLs) identify a path to a specific HTML file located somewhere online. • When keying URLs into a hypertext link, you use the letters http followed by a colon and two slashes: http://. • HyperTextTransder Protocol (HTTP) is a communication system used to transfer data over networks. • www stands for World Wide Web and directs the search to a specific Web server. • The slashes and names in the rest of the URL represent folders (subdirectories) on the Web server. Chapter 11

  21. Lesson 11-4 Add images to Web pages In this Lesson You Will: 1. Download images from online sources. 2. Insert an image into a document. 3. Change the size and location of an image. Chapter 11

  22. Downloading and inserting Graphics • Several compressed image formats are commonly used on the Web. They include the following: • Graphics Interchange Format (GIF) • Joint Photographic Experts Group (JPEG) • Portable Graphics Format (PNG) • HTML handles all image formats the same way – using an image source tag: <img src /> . • <img src="TravelView_Logo.gif"/> Chapter 11

  23. Pictures of all Sizes • Pictures can be altered in a variety of ways by changing a tag’s values: • Their alignment can be adjusted (center, left, or right). <p><img src="TravelView_Logo.gif"align="right"height="50" width="50"/></p> • Their size can be changed by using the height and width attributes. <img src="TravelView_Logo.gif"height="100"width="100"/> Chapter 11

More Related