1 / 22

Tutorial 1 Developing a Basic Web Page

Tutorial 1 Developing a Basic Web Page. Learn the history of the Web and HTML Describe HTML standards and specifications Understand HTML elements and markup tags Create the basic structure of an HTML file Insert an HTML comment Work with block-level elements

xena
Download Presentation

Tutorial 1 Developing a Basic 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. Tutorial 1Developing a Basic Web Page

  2. Learn the history of the Web and HTML • Describe HTML standards and specifications • Understand HTML elements and markup tags • Create the basic structure of an HTML file • Insert an HTML comment • Work with block-level elements • Create ordered, unordered, and definition lists Objectives New Perspectives on HTML and XHTML, 5e

  3. Work with inline elements • Understand the div and span elements • Add attributes to HTML elements • Format page content using the style attribute • Mark empty elements with one-sided tags • Add an inline image to a Web page • Work with character sets and codes Objectives New Perspectives on HTML and XHTML, 5e

  4. A network is a structure linking computers together for the purpose of sharing information and services Exploring the History of the World Wide Web New Perspectives on HTML and XHTML, 5e

  5. In its early days, the Internet was called ARPANET and consisted of two network nodes located at UCLA and Stanford, connected by a phone line • Early Internet tools… Exploring the History of the World Wide Web New Perspectives on HTML and XHTML, 5e

  6. Today the Internet has grown to include an uncountable number of nodes involving computers, cell phones, PDAs, MP3 players, gaming systems, and television stations Exploring the History of the World Wide Web New Perspectives on HTML and XHTML, 5e

  7. 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 • Hypertext is a method of organizing information that gives the reader control over the order in which the information is presented Exploring the History of the World Wide Web New Perspectives on HTML and XHTML, 5e

  8. 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 • A link may point to another section of the same document, or to another document entirely • A link can open a document on your computer, or through the Internet, a document on a computer anywhere in the world Hypertext Documents New Perspectives on HTML and XHTML, 5e

  9. Web Pages and Web Servers student.cofc.edu web server A user in Sydney views your website New Perspectives on HTML and XHTML, 5e

  10. Reasons: -Release com’l ban -HTTP -1st graphical browser • 300K 1991; 109M 2001 • http://www.actewagl.com.au/Education/communications/Internet/historyOfTheInternet/InternetOnItsInfancy.aspx Growth of Internet New Perspectives on HTML and XHTML, 5e

  11. A Web page is a text file written in a language called Hypertext Markup Language • A markuplanguage is a language that describes a document’s content and structure • HTML is not a programming language, and it is not a formatting language • Styles are format descriptions written in a separate language from HTML that tell browsers how to render each element for particular devices Introducing HTML New Perspectives on HTML and XHTML, 5e

  12. Browser Wars • In the early years of HTML, Web developers were free to define and modify HTML in whatever ways they thought best • Competing browsers introduced some differences in the language The changes were called extensions The History of HTML New Perspectives on HTML and XHTML, 5e

  13. 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 • The recommendations of the W3C are usually followed since a uniform approach to Web page creation is beneficial to everyone The History of HTML New Perspectives on HTML and XHTML, 5e

  14. History of HTML and XHTML Notice New Perspectives on HTML and XHTML, 5e

  15. Older features of HTML are often deprecated, or phased out, by the W3C. That does not mean you can’t continue to use them, but… • XML(Extensible Markup Language) • XML is a markup language much like HTML • XML focuses on extensibility and portability • XML was designed to transport and store data, with focus on what data is • HTML was designed to display data, with focus on how data looks The History of HTML New Perspectives on HTML and XHTML, 5e

  16. XHTML :- is a stricter version of HTML and is designed to confront some of the problems associated with the different and competing versions of HTML The History of HTML New Perspectives on HTML and XHTML, 5e

  17. HTML 5.0 • HTML5 is an advanced version of HTML (with more incredible features to enhance website performance) • It is not heavily used yet The History of HTML • There are new tags that make it much easier to embed applications and handle interactive elements. • Offline data storage. Ability for visitors to edit sections of web pages. • New HTML elements that better describe content. • Improved web form handling and validation. New Perspectives on HTML and XHTML, 5e

  18. HTML Facts • HTML files consist of plain text and codes that determine how it will be formatted. • HTML files must end with the extension .htm or .html. • The codes in HTML files are not case sensitive. The code <TITLE> means the same as <title> • Do not put a spaces in file names. • HTML file names are case sensitive when they are uploaded to the server. However, while working on your PC or Mac, it doesn’t matter. • Hard returns, extra spaces, and tabs are ignored by browsers. • Tags can be classified as either container tags or empty tags:Container: <b> Welcome </b>Empty: <br /> New Perspectives on HTML and XHTML, 5e

  19. Using Other Block-Level Elements New Perspectives on HTML and XHTML, 5e

  20. Working with Inline Elements New Perspectives on HTML and XHTML, 5e

  21. Working with Character Sets and Special Characters New Perspectives on HTML and XHTML, 5e

  22. ELEMENTS • basic tags • headings • p • img • b,i, and other formatting • comments • hr • list • div • blockquote • style attribute • special characters • MISCELLANY • Notepad ++ • Two-sided vs empty elements • Logical vs physical • Attributes • elements • Nesting • Block vs inline

More Related