1. Unit 1 – Developing a Web Page

2. Objectives:  Learn the history of the Web and HTML  Describe HTML standards and specifications  Understand HTML elements and markup tags  Understanding HTML  Plan and create an HTML document  Edit and view an HTML document  Link documents to other Web sites  Print an HTML document

3. Create a new folder in your Home Drive  Web Page Design  Go to Student/Teacher/Flueso/Web Page Design  Copy Unit 1 folder from my folder to yours  All files will be saved as ‘.htm’  YOU MUST SAVE ALL FILES for one web site in the SAME folder!

4. TO DO:  Open Introduction to HMTL and save it to your H:drive  Put your first and last name in the header of the document  Open text to page 1  Read pages 1-7  Fill in the packet through #19

5. Exploring the History of the World Wide Web  A network is a structure linking computers together for the purpose of sharing information and services  Users typically access a network through a computer called a host or node  A host that provides information or a service is called a server New Perspectives on HTML and XHTML, 5e5

6. Exploring the History of the World Wide Web  A computer or other device that requests services from a server is called a client  If the computers that make up a network are close together (within a single department or building), then the network is referred to as a local area network (LAN) New Perspectives on HTML and XHTML, 5e6

7. Understanding HTML  Internet: worldwide collection of computer networks that links together millions of computers  Network: group of computers that are connected together to share resources and data  Internet Service Provider (ISP): company that has a permanent connection to high speed data lines that connect computers

8. Structure of the Internet New Perspectives on HTML and XHTML, 5e8

9. Exploring the History of the World Wide Web  Timothy Berners-Lee and other researchers at the CERN nuclear research facility near Geneva, Switzerland laid the foundations for the World Wide Web, or the Web, in 1989  They developed a system of interconnected hypertext documents that allowed their users to easily navigate from one topic to another  The key to hypertext is the use of links, which are the elements in a hypertext document that allow you to jump from one topic or document to another

10. Exploring the History of the World Wide Web  Web Page: Each document on the World Wide Web  Web pages are stored on Web servers  computers that make Web pages available to any device connected to the Internet  A Web browser retrieves the page from the Web server and renders it on the user’s computer or other device

11. Introducing HTML  A Web page is a text file written in a language called Hypertext Markup Language (HTML)  A markup language is a language that describes a document’s content and structure  HTML is not a programming language or a formatting language  Styles are format descriptions written in a separate language from HTML that tell browsers how display the content and structure New Perspectives on HTML and XHTML, 5e11

12. The History of HTML  A group of Web developers, programmers, and authors called the World Wide Web Consortium, or the W3C, created a set of standards or specifications that all browser manufacturers were to follow  The W3C has no enforcement power  BUT the recommendations of the W3C are usually followed since a uniform approach to Web page creation is beneficial to everyone New Perspectives on HTML and XHTML, 5e12

13. History of HTML and XHTML New Perspectives on HTML and XHTML, 5e13

14.  Uniform Resource Locator (URL): address of a document or other file accessible on the Internet  http://www.yahoo.com http://www.yahoo.com  HTTP: Hypertext Transfer Protocol  FTP: File Transfer Protocol  Hyperlink (link): used to connect one Web page to another Ex) Graphic links, text links, menu bar with links, animations links

15. Creating Web Page documents:  Open Application/Accessories Notepad  Set Word Wrap to ‘ON’ under the Format menu  All Web files will be saved with a name and an extension in YOUR HOME directory (ex. flueso.htm)  Plan out your Web page before you start coding  Draw a planning sketch or create a sample document using a word processor  You MUST save all edits before testing and then refresh the Web page  To test Web page: File Menu, Open, Browse/Choose, Open. (MAY NOT WORK WITH OUR BROWSER)

16. Creating an HTML Document  In planning, identify a document’s various elements.  An element is a distinct object in the document, like a paragraph, a heading, or a page’s title  Tag - The core building block of HTML; marks the presence of an element  A two-sided tag is a tag that contains some document content General syntax for a two- sided tag: content New Perspectives on HTML and XHTML, 5e16

17. ELEMENTS: New Perspectives on HTML and XHTML, 5e17

18.  Go to Saucon Valley’s home page  View HTML/editing/formatting tags  PAGE  View source

19. Marking Elements with Tags  A two-sided tag’s opening tag ( ) and closing tag ( ) should completely enclose its content  Elements can contain other elements Tags cannot overlap Welcome to Dave’s Devil Sticks New Perspectives on HTML and XHTML, 5e19

20. The Structure of an HTML File  The opening tag marks the start of an HTML document, and the closing tag tells a browser when it has reached the end of that HTML document marks the root element  Anything between these two tags makes up the document content, including all other elements, text, and comments New Perspectives on HTML and XHTML, 5e20

21. The Structure of an HTML File  An HTML document is divided into two main sections: the head and the body  The head element contains information about the document, for example the document title or the keywords  document information  The content of the head element is NOT displayed within the Web page. New Perspectives on HTML and XHTML, 5e21

22. The Structure of an HTML File  The body element contains all of the content to appear on the Web page The body element can contain code that tells the browser how to render the content. content of web page  The title element contains the page’s title A document’s title is usually displayed in the browser’s title bar. Title of web page New Perspectives on HTML and XHTML, 5e22

23. Starting tags: HTML tags Creates an HTML document Header tags Lets you enter special info; this is not displayed Title tags Places a short title or description in a browser’s title bar Body tags Encloses the part of your Web doc that will be displayed by the Web browser

24.  Every Web Page: content  Go to page 11-13 Heading and title

25. Adding Comments  The comment tag adds notes to your HTML code  Comments can be spread over several lines  Comments are useful in documenting your HTML code for yourself and others  PAGE 13-14 New Perspectives on HTML and XHTML, 5e25

26. 1.2 Working with Block-Level Elements  Block-level elements are elements that contain content that is viewed as a distinct block within the Web page  Heading elements are block-level elements that contain the text of main headings on the Web page content n is a number between 1 and 6  is the largest heading  is the smallest heading New Perspectives on HTML and XHTML, 5e26

27. Marking Block-Level Elements  To mark a heading, enter content where n is a number from 1 to 6 and content is the text of heading  To mark a paragraph, enter content  To mark a block quote, enter content  To mark a generic block-level element, enter content New Perspectives on HTML and XHTML, 5e27

28.  Open demo_html.htm Unit 1 / Demo folder  Page 16-17

29. Adding and Markup Tags – pg 17-19 New Perspectives on HTML and XHTML, 5e29

30. Marking Paragraph Elements New Perspectives on HTML and XHTML, 5e30

31. White Space and HTML  HTML file documents are composed of text characters and white space  White space is the blank space, tabs, and line breaks within the file  HTML treats each occurrence of white space as a single blank space  You can use white space to make your document more readable in the creation phase  Page 20 – demo_html.htm New Perspectives on HTML and XHTML, 5e31

32. Marking a Block Quote  The syntax for making an extended quote is content  PAGE 21 New Perspectives on HTML and XHTML, 5e32

33. Marking a List  HTML supports three kinds of lists: ordered, unordered, and definition  Ordered list  for items that must appear in a numerical order  Unordered list  for items that do not need to occur in any special order  Definition list  contains a list of terms, each followed by the term’s description  Nested list: One list can contain another list New Perspectives on HTML and XHTML, 5e33

34. Marking a List – pg 22-26 New Perspectives on HTML and XHTML, 5e34

35. Using Other Block-Level Elements  address element  contact information.  content  PAGE 27 New Perspectives on HTML and XHTML, 5e35

36. Using Other Block-Level Elements New Perspectives on HTML and XHTML, 5e36

37. Working with Inline Elements  An inline element marks a section of text within a block-level element  Often used to format characters and words Also referred to as character formatting elements New Perspectives on HTML and XHTML, 5e37

38. Working with Inline Elements New Perspectives on HTML and XHTML, 5e38

39. Working with Inline Elements  PAGE 30-31

40. Using the Generic Elements: div and span  Div – used to mark general block-level content content  Span – used to mark general inline content content  Both can be used to represent a text block or string of inline text without having any other meaning You can completely control the appearance of the content through the use of styles

41. Using Element Attributes  Many tags contain attributes that control the use, behavior, and appearance of elements in the document  Attributes are inserted within the tag brackets content *Attribute names should be entered in lowercase letters *Attribute values should be enclosed within single or double quotation marks New Perspectives on HTML and XHTML, 5e41

42. The Style Attribute  Use the style attribute to control the appearance of an element  text-align style  tells the browser how to horizontally align the contents of an element  color style  tells the browser to display the text in a certain color New Perspectives on HTML and XHTML, 5e42

43. The Style Attribute New Perspectives on HTML and XHTML, 5e43

44. The Style Attribute – pg 35-36 New Perspectives on HTML and XHTML, 5e44

45. OPEN COLOR DEMO

46. Working with Empty Elements  An empty element contains no content  Empty elements appear in code as one-sided tags  The one-sided tag to mark a line break is Need to be placed within block-level elements  The horizontal rule element places a horizontal line across the Web page  PAGE 37-40 New Perspectives on HTML and XHTML, 5e46

47. Working with Empty Elements  To display a graphic, you insert an inline image into the page  An inline image displays a graphic image located in a separate file within the page  PAGE 41 New Perspectives on HTML and XHTML, 5e47

48. Working with Character Sets and Special Characters  Character sets come in a wide variety of sizes, based on the number of symbols required for communication in the chosen Language ASCII (American Standard Code for Information Interchange) UTF-8 – compressed version of Unicode (default character set for our browser)  Over 65,000 symbols New Perspectives on HTML and XHTML, 5e48

49. Working with Character Sets and Special Characters New Perspectives on HTML and XHTML, 5e49

50. Working with Character Sets and Special Characters  Page 44-47  More in Appendix B New Perspectives on HTML and XHTML, 5e50

51. Summary  Create a basic Web page using HTML  Concepts and history surrounding networks and the development of the World Wide Web  History of HTML  Creation of a simple Web age  Block-level elements  Inline elements  Element attributes  Character sets and special character symbols New Perspectives on HTML and XHTML, 5e51

52. To do…  Review Questions - handout  Review Assignment, pg 50-52  Case Problem 1, 2, 3 – pg 52-58

53. My Web Page  MOST COMMON image formats  Jpeg and gif  For your own web site: Find pictures on the web or bring in your own pictures SAVE EVERYTHING in a folder called LastNameWebSite