fundamentals of web design copyright ©2004 department of computer & information science...
TRANSCRIPT
![Page 1: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/1.jpg)
Fundamentals of Web Design
Copyright ©2004 Department of Computer & Information Science
Introducing XHTML:Module A: Web Design Basics
![Page 2: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/2.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Goals
• Understand hyperlinking• Understand how tags are formed• Understand HTML as a markup
language• Understand the role of the W3C
![Page 3: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/3.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The World Wide Web
• Accessing cross-referenced documents, known as hypertext linking, is probably the most important aspect of the Web because it allows you to quickly open other Web pages
![Page 4: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/4.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The World Wide Web
• A hypertext link, or hyperlink, contains a reference to a specific Web page that you can click to quickly open that Web page
![Page 5: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/5.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The World Wide Web
• A document on the Web is called a Web page, identified by a unique address called the Uniform Resource Locator, or URL
• URL commonly referred to as a Web address
![Page 6: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/6.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The World Wide Web
• A URL is a type of Uniform Resource Identifier (URI), which is a generic term for many types of names and addresses on the World Wide Web
![Page 7: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/7.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The World Wide Web
• A Web site refers to the location on the Internet of the Web pages and related files (such as graphic files) that belong to a company, organization, or individual
![Page 8: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/8.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
HTML Documents
• Originally, people created Web pages using Hypertext Markup Language
• Hypertext Markup Language (HTML) is a simple language used to create the Web pages that appear on the World Wide Web
![Page 9: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/9.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
HTML Documents
• A markup language is a set of characters or symbols that define a document’s logical structure or how a document should be printed or displayed
![Page 10: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/10.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
HTML Documents
• HTML is based on an older language called Standard Generalized Markup Language, or SGML, which defines the data in a document independently of how the data will be displayed
![Page 11: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/11.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
HTML Documents
• A target output format refers to the medium in which a document will be displayed, such as a Web page or an online help system
![Page 12: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/12.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Basic HTML Syntax
• HTML documents are text documents that contain:– formatting instructions, called tags
– the text that is to be displayed on a Web page
![Page 13: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/13.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Basic HTML Syntax
• HTML tags range from formatting commands to controls that allow user input
• Tags are enclosed in brackets (< >), and most consist of a starting tag and an ending tag that surround the text or other items they are formatting or controlling
![Page 14: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/14.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Common Structure and Formatting HTML Tags
![Page 15: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/15.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Basic HTML Syntax
• All HTML documents begin with <html> and end with </html>
• Two other important HTML tags are the <head> tag and the <body> tag
![Page 16: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/16.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Basic HTML Syntax
• The <head> tag contains information that is used by the Web browser, and you place it at the start of an HTML document, after the opening <html> tag
![Page 17: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/17.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Basic HTML Syntax
• The <head> tag pair and the tags it contains are referred to as the document head
• Following the document head is the <body> tag, which contains the document body
![Page 18: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/18.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Basic HTML Syntax
• The <body> tag pair and the text and tags it contains are referred to as the document body
• A Web browser’s process of assembling and formatting an HTML document is called parsing or rendering
![Page 19: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/19.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Basic HTML Syntax
• You use various parameters, called attributes, to configure many HTML tags
• You place an attribute before the closing bracket of the starting tag, and separate it from the tag name or other attributes with a space
![Page 20: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/20.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Basic HTML Syntax
![Page 21: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/21.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Web Page Design and Authoring
• Web page design, or Web design, refers to the visual design and creation of the documents that appear on the World Wide Web
![Page 22: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/22.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Web Page Design and Authoring
• Web page authoring refers to the creation and assembly of the tags, attributes, and data that make up a Web page
![Page 23: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/23.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Web Page Design and Authoring
• This is a subtle, but important distinction: – A book on Web design teaches the visual and
graphical design aspects of creating Web pages
– A book on XHTML teaches the more basic concepts that you need to get started, such as how to work with tags and attributes
![Page 24: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/24.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The W3C
• Web page authors began to find it necessary to write slightly different HTML code for each Web browser in which they anticipated their Web page would be opened
![Page 25: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/25.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The W3C
• To address the growing need for standards, Tim Berners-Lee established the World Wide Web Consortium, or W3C, in 1994 at MIT to oversee the development of Web technology standards
![Page 26: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/26.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
The W3C
• The W3C does not release a version
of a particular technology. Instead, it
issues a formal recommendation for a
technology, which essentially means
that the technology is (or will be) a
recognized industry standard
![Page 27: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/27.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Web Browsers
• At the time of this writing, Internet Explorer browsers are being used by more than 85% of the market.
• Netscape Navigator also makes up a large part of the browser market.
![Page 28: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/28.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Web Browsers
• Three additional browsers that are worth noting are:– Amaya (http://w3.org/amaya)– Mozilla (http://www.mozilla.org)– Opera (http://www.opera.com)
![Page 29: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/29.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Web Browsers
• You must test your Web pages in every browser and browser version in which you anticipate they will be opened.
![Page 30: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module A: Web Design Basics](https://reader030.vdocuments.mx/reader030/viewer/2022032607/56649ec05503460f94bcb576/html5/thumbnails/30.jpg)
Fundamentals of Web DevelopmentCopyright ©2004 Department of Computer & Information Science
Questions?