1 / 33

Using Html

Using Html. Basics, Text and Links. Objectives. Develop a web page using HTML codes according to specifications and verify that it works prior to submitting Create different types of links Interpret the meaning of html tags and attributes

tala
Download Presentation

Using Html

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. Using Html Basics, Text and Links

  2. Objectives • Develop a web page using HTML codes according to specifications and verify that it works prior to submitting • Create different types of links • Interpret the meaning of html tags and attributes • Identify common html tags, the proper syntax, and their purpose • Recognize and create special characters • Explain the difference between tags and attributes

  3. HTML • Not a programming language • Hypertext Markup Language – text based formatting system for the web • XHTML – latest version of HTML • Platform independent

  4. HTML • Use a plain text editor to type your HTML text: • Save your HTML page • To see your page

  5. Get ready • www.birdnest.org

  6. HTML Tags • Start with a “<“ and end with “>” • Usually in pairs. • To view HTML tags: right click and “View Source” http://www.northwest.com/

  7. File Structure • tags: identify your file as an HTML file. • They begin and end every HTML document • tags: indicate information about the document • tags: appear on browser title bar • - surround text

  8. HTML Tags • Properly nest HTML tags

  9. XHTML • To make your HTML document compatible with XHTML • Use the traditional version of <!DCOCTYPE> • Extend the <html> tag • Copy the <!DOCTYPE> and <html> found at the bottom of page 17 into the top of your web page

  10. Sample 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Traditional//EN" "DTD/xhtml-trasitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=en" lang="en"> <head> <Title>Your Title appears here</title> </head> <body> What happens to extra lines? </body> </html>

  11. Tips • Extra spaces • Use the Under_score or • Capital letters to separate words: UnderScore • Use spaces in the document <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=en" lang="en"> Is interpreted the same as one line <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=en" lang="en">

  12. the title you entered between the <title> tags address box indicates the name and location of the HTML file You should occasionally view the formatted page with different Web browsers to check compatibility, verify that there are no syntax errors, or other problems. page content will appear here The Initial HTML File in Internet Explorer

  13. HTML Syntax • Tags: control the appearance of the document content • the name of the HTML tag • attributes are • document content

  14. Try this and see what happens <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=“en" lang="en"> <head> <Title>Look at this text</title> </head> <body> <p>This shows what happens using the <big>big tag.</big></p> <p>This shows <b>bold text</b> versus <strong>strong text</strong> <br/> plus use of the line break</p> <p>Next lets look at the <i>italics tag</i> the <em>emphasis tag</em> the <tt>teletype tag</tt> and finally the <small>small tag </small></p> </body> </html>

  15. Special Characters • Start with and end with

  16. What do these represent? • &amp; • &lt; • &gt; • &copy; • &plusmin; • Table 3.1 page 27 in your book has a list

  17. Math and Science Tags • <sup> , </sup> superscript • <sub> , </sub> subscript

  18. Try this and see if your page looks like the next slide <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1 -transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Using more tags </title> </head> <body> <p><big>Sometimes special symbols are needed. For example: </br> &copy; to remind you not to make illegal copies or </br> perhaps to make a footnote <sup>1</sup> so you won't be accused of plagiarism. </big></p> </body> </html>

  19. Meta tags • Information not defined by other tags and attributes • Special instructions for Web server

  20. Sample with meta tags highlighted <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1 -transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Meta Tags </title> <meta name ="keywords" contents=" CSCI 101, Introduction to Computers, General Education Courses"/> <meta name ="description" contents="a sample file with meta tags"/> <meta name ="author" contents="Dr. Chlotia Garrison"/> <meta http-equiv="refresh" content="5; url=http://www.headhunter.net" /> </head> <body> The page should change in a few seconds </body> </html>

  21. Hypertext Links • How do we create links like the ones in the assignment?

  22. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1 -transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Linking Examples </title> </head> <body> <p><big> <a name="top" id="top"></a> Of course you can link to other web pages </br> <a href="http://www.w3.org/">The W3C site</a> that develops protocols. </br></br></br> You can also link to send e-mail to the instructor: <a href="mailto:garrisonc@winthrop.edu"> Click here</a></p> <p>This image was inserted just for effect. We will learn how to do this later. <img src="smileyface.jpg"/></p> <p><h1>Also you can link to other places within the same page.</h1></br>Use this link to go to the top of the page. <a href="#top">Click here</a> </big></p> </body> </html>

  23. Linking to Other Files • <a href=“FileOnSameComputer.htm”> click here</a> to open the page • <a href=“dir/Filename.htm”> click here</a> to open a file in a different directory from your web page

  24. Anchor Tags <a> • The <a> with the “name” attribute creates an anchor • Marks text or image so you can link to it • The id attribute is used with name • Anchored text is the destination of a link; it is not the text you click on

  25. When the user clicks one of the hypertext links, the link will go directly to that section (anchor, which is the destination of the link) within the web page. hypertext links anchor How an Anchor Works

  26. Displaying Linked Documents in a New Window • A Web page is displayed in the main browser window by default. • To open in a new browser window, use the <a href=“url >Hypertext</a>

  27. Exercise 1:What will this display? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1 -transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Exercise 1 </title> </head> <body> <h1>Can you determine how this will look?</h1> <p> You should be able to follow the clicks </br> <a href="http://msn.com">Microsoft's home page</a></p> <p>Have you had enough of this today: <b>H<sub>2</sub>O</b> &nbsp; &nbsp;?</p> </body> </html>

  28. Exercise 2: How would you write this using HTML?

  29. Test 1 Comments • Objectives: 7.2 Recognize and identify components of the motherboard and their purpose 7.9 Identify the first computer programmer, first person to build a computer 7.10 Recall the history of the computers: before 1950, Internet, personal computers 9.1 Identify and apply the computer’s method of data representation 9.2 Add binary numbers 9.3 Distinguish between encoding schemes and numbering systems and their purpose 9.4 Determine the alphanumeric equivalent of an ASCII expression

More Related