Successfully reported this slideshow.



Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this


  1. 1. Tut or i al Obj ec t i v es » Explore the structure of the World Wide Web » Learn the basic principles of Web documents » Create a HTML document » View an HTML file using a Web browser » Use HTML tags for text, headings, paragraphs, and lists » Insert character tags into an HTML document
  2. 2. Tut or i al Obj ec t i v es Cont i nued » Insert an inline graphic image into a HTML document » Add special characters to an HTML document » Insert horizontal lines into an HTML document
  3. 3. I nt r oduc i ng t he W l d W de or i W eb » In order for computers to share resources efficiently, they can be linked together in one of the following structured networks: – linked within a local area network (LAN) – linked across a wide area network (WAN) » Networks are very useful, their use led to a “network of networks” called the Internet.
  4. 4. The I nt er net » The Internet consists of millions of interconnected computers that enable users to communicate and share information. » Many Internet tools required users to master an array of terms, acronyms, and commands before they could navigate the Internet. » The World Wide Web was developed to make the Internet easier to use and give quick access to users.
  5. 5. St r uc t ur e of t he I nt er net This figure shows the physical structure of the Internet, which uses fiber-optic cables, satellites, phone lines, and other telecommunications media to send data back and forth.
  6. 6. The Dev el opm ent of t he W l d W de W or i eb » In 1989, Timothy Berners-Lee and other researchers at the CERN nuclear research facility, laid the foundation of the World Wide Web, or the Web. – created an information system that would make it easy for researchers to locate and share data – required minimal training and support – developed a system of hypertext documents, electronic files that contain elements that you can easily select
  7. 7. Hy per t ex t Doc um ent s » Hypertext offers a better way of locating information. » When you read a book, you follow a linear progression, reading one page after another. » With hypertext, you progress through pages in whatever way is best suited to you and your objectives. » Hypertext lets you skip from one topic to another.
  8. 8. Hy per t ex t Doc um ent s Cont i nued » The key to hypertext is the use of links, which you activate to move from one topic to another. – a link can open a document on a computer anywhere in the world » Hypertext has become the dominate method of sharing and retrieving information on the Internet, becoming known as the World Wide Web, or the Web. » Documents on the Web are known as Web pages.
  9. 9. W Pages and W Br ows er s eb eb » A Web page is stored on a Web server, which makes the page available to users of the Web. » To view a Web page, the user runs a Web browser, a software program that retrieves the page and displays it. » A Web browser can either be textbased, or graphical.
  10. 10. W BROSERS EB – – – – – » The most common Web browsers available today are: FIREFOX GOOGLE CHROME SAFARI OPERA IE
  11. 11. W Page wi t h I nt er es t i ng eb Font s , Gr aphi c s , and Lay out This figure shows a Web page is not only a source of information, it can also be a work of art. graphic image links interesting fonts The Web designer has a great deal of control over the format of the page.
  12. 12. HTM L: The Language of t he W eb » Web pages are text files, written in a language called Hypertext Markup Language or HTML. » A markup language is a language used to describe the contact and format of documents. » HTML was developed from the Standard Generalized Markup Language (SGML), a language used for large-scale documents. » SGML proved to be cumbersome and difficult, thus HTML was created.
  13. 13. Hy per t ex t M k up Language ar ( HTM L) » HTML allows Web authors to create documents that can be displayed across different operating systems. » HTML code is easy to use, that even nonprogrammers can learn to use it. » HTML describes the format of Web pages through the use of tags. – it’s the job of the Web browser to interpret these tags and render the text accordingly
  14. 14. Ver s i ons of HTM L This figure presents a history of the various versions of HTML that have been released by the World Wide Web Consortium (W3C).
  15. 15. Hy per t ex t M k up ar Language ( HTM L) Cont i nued » HTML has a set of rules, called syntax. – syntax are a set of standards or specifications developed by a consortium of Web developers, programmers, and authors called the World Wide Web Consortium (WC3) » HTML extensions have been added to support new features, which have been adopted in subsequent sets of standards released by the W3C. – these extensions have provided Web page authors with more options
  16. 16. W Dev el opm eb ent » Web designers need to determine which browsers and browser versions support their web pages. » In the future, Web development is focusing more on XML (Extensible Markup Language) and XHTML (Extensible HyperText Markup Language) for developing document content. – XML combined with style sheets provides the same functionality as HTML, but with greater flexibility – XHTML was designed to overcome some of the problems with competing HTML standards
  17. 17. Tool s f or Cr eat i ng HTM L Doc um ent s » HTML documents are text files, which a text editor such as Windows NotePad can be used to create. » You can also use an HTML converter or an HTML editor. – an HTML converter like Microsoft Word takes text in one format and converts it to HTML code – an HTML editor helps you create an HTML file by inserting HTML codes for you as you work
  18. 18. Cr eat i ng an HTM Doc um L ent It’s always a good idea to plan the appearance of your Web page before you start writing code. heading 1 image paragraph horizontal line list heading 3 bold and italic text
  19. 19. HTM Sy nt ax L » Document content is what the users sees on the page, such as headings and images. » Tags are the HTML codes that control the appearance of the document content. – tag is the name of the HTML tag – attributes are properties of the tag – document content is actual content that appears in the Web page
  20. 20. HTM Tags L » Tags can be one-sided or two-sided. – two-sided tags contain an opening tag <b> that tells the browser to turn on a feature and apply it to the contact that follows, and a closing tag </b> that turns off the feature – one-sided tags are used to insert noncharacter data into the Web page, such as a graphic image or video clip <tag attribute> » Tags are not case sensitive. The current standard is to display all tags in lowercase letters.
  21. 21. I nt er pr et at i on of t he <H1> t ag by Di f f er ent Br ows er s This figure shows how three different browsers might interpret a line of HTML code.
  22. 22. I ni t i al HTM Tags i n L Not epad Your text editor may not display the file extension in the title bar. This is okay. <html> tag indicates that this file is written in HTML <head> tag contains information about the Web page <title> tag contains the Web page title Page content will go between the <body> tags
  23. 23. The I ni t i al HTM Fi l e i n L I nt er net Ex pl or er the title you entered between the <title> tags address box indicates the name and location of the HTML file page content will appear here You should occasionally view the formatted page with different Web browsers to check compatibility, verify that there are no syntax errors, or other problems.
  24. 24. Cr eat i ng Headi ng Tags » HTML supports six levels of headings, numbered <h1> through <h6>, with <h1> being the largest and most prominent. » Headings are always displayed in a bold font.
  25. 25. Si x Headi ng Lev el s This figure illustrates the general appearance of the six heading styles. Your browser might use slightly different fonts and sizes.
  26. 26. Ent er i ng Headi ng Tags and Tex t heading tags As of HTML 3.2, the heading tag can contain additional attributes, one of which is the alignment attribute.
  27. 27. Headi ngs As They Appear i n t he Br ows er <h1> <h2> <h3>
  28. 28. Ent er i ng Par agr aph Tex t If you are using a test editor like NotePad, the text might not wrap to the next line automatically. Selecting the Word Wrap command within NotePad will allow you to see all the text on your screen.
  29. 29. Par agr aph Tex t i n t he Br ows er
  30. 30. Addi ng Par agr aphs adding paragraphs
  31. 31. The Par agr aphs Di s pl ay ed by t he Br ows er Remember: HTML formats text only through the use of tags and ignores such things as extra blank spaces, blank lines, or tabs. four grading paragraphs are not separated
  32. 32. The Gr adi ng Tex t Separ at ed i nt o Par agr aphs To add space between paragraphs, you use the paragraph tag <p>. text is now separated into four paragraphs
  33. 33. Cr eat i ng Li s t s » HTML supports three kinds of lists: – an ordered list, which is used to display information in a numeric order – an unordered list, which list items are not listed in a particular order i.e. bullets – a definition list, which is a list of terms, each followed by a definition line that is typically indented slightly to the right
  34. 34. Ent er i ng an Unor der ed Li s t <ul> unordered list tag <li> list item tag
  35. 35. The Unor der ed Li s t i n t he Br ows er An unordered list is a bulleted list. unordered list
  36. 36. Cr eat i ng Char ac t er Tags » HTML also lets you format individual characters. » A tag that you apply to an individual character is called a character tag. There are two types of character tags: – logical character tag – physical character tag
  37. 37. Com on Logi c al Char ac t er m Tags This figure lists some common logical character tags.
  38. 38. Com on Phy s i c al Char ac t er m Tags This figure shows examples of how these tags can be displayed in a browser.
  39. 39. Logi c al Char ac t er Tags as They Appear i n t he Br ows er examples of individual tags example of combined tags
  40. 40. Phy s i c al Char ac t er Tags as They Appear i n t he Br ows er Underline text can sometimes be confused with hyperlinked text (which is usually underlined), and for that reason, use of the <u> tag is discouraged.
  41. 41. Appl y i ng Char ac t er Tags Italic <i> </i> and bold <b> </b> character tags If you support users with older browsers, you should use a logical tag. Otherwise, use physical tags, which are more common and easier to interpret.
  42. 42. The Ef f ec t of t he Char ac t er Tags i n t he Br ows er text formatted with bold and italic
  43. 43. I ns er t i ng a Gr aphi c » Images can be displayed in two ways: as inline images or as external images. – an inline image displays directly on the Web page and is displayed when the page is accessed by a user – an inline image can be placed on a separate line in your HTML code, or it can be placed directly within a line of text – inline images should be in one of two file formats: GIF (Graphics Interchange Format) or JPEG (Joint Photographic Experts Group)
  44. 44. I ns er t i ng a Gr aphi c Cont i nued – an external image is not displayed with the Web page, the browser must have a file viewer, which is a separate program that the browser launches when it encounters an external image file – external images are represented by an icon that a user clicks to view the image – external images are not limited to GIF or JPEG formats
  45. 45. I ns er t i ng a Gr aphi c Image file dube.jpg use the <p> tag so you can center the image
  46. 46. The I m age Fi l e as i t Appear s i n t he Br ows er
  47. 47. Spec i al Char ac t er s » Occasionally you will want to include entities or special characters in your Web page that do not appear on your keyboard. For example: – registered trademark symbol ® – copyright symbol © » HTML supports the use of character symbols that are identified by a code number or name.
  48. 48. Spec i al Char ac t er s and Codes This figure shows some HTML symbols and the corresponding code numbers or names.
  49. 49. Spec i al Char ac t er s i n t he Br ows er This figure shows an example of the code “Welcome to Mr. Dub&#233’s Web site”, which accented the é in his last name.. accented é added to last name
  50. 50. I ns er t i ng Hor i z ont al Li nes » A horizontal line can improve the appearance of a Web page. » The syntax for creating a horizontal line is: <hr align=“align” size=“size” width=“width” color=“color” noshade>
  51. 51. I ns er t i ng Hor i z ont al Li nes » The HTML horizontal syntax includes the following: – align specifies the horizontal alignment of the line on the page (center, left, or right) – size specifies the height of the line in pixels or percentage of the screen width – width indicates the width of the line in pixels or percentage of the screen width – color indicates the color of the line – noshade specifies that the browser display a solid line
  52. 52. Di f f er ent Li ne St y l es size=12 width-100% size=6 width-50% size=3 width-25% size=1 width-10% <hr align=“center” size=“12” width=“100%”> <hr align=“center” size=“6” width=“50%”> <hr align=“center” size=“3” width=“25%”> <hr align=“center” size=“1” width=“10%”> You can use line styles to improve the appearance of your Web page.
  53. 53. Hor i z ont al Li ne Added t o t he Page horizontal line
  54. 54. Thank You ! :)