1. Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible web design. Identify reliable resources of information on the Web. Identify ethical use of the Web. Describe the purpose of web browsers and web servers. Identify networking protocols. Define URIs and domain names. Describe HTML, XHTML, and HTML5 Bellwork: Locate the Student Data Files folder in the Niebur Handouts Folder and open Style Guide_files -> Style Guide

2.  If you did not finish the Chapter 1 Review Question last class please turn them in at this time.

3.  The current standard recommended by the W3C is XHTML but a draft recommendation for HTML5 is being written.  HTML5 is intended to replace XHTML as the standard in the next few years.  HTML5 includes features of both HTML and XHTML and new elements have been added.  Additional new features include form edits and native video.  It is intended to be backward compatible.  Since HTML5 is still in the draft stage, support in the browser is not as stable as XHTML support.  Many of the new HTML5 features will work only in the latest versions of browsers (Internet Explorer 9, Firefox 4, Safarie5, Google Chrome, and Opera 10).

4.  HTML5 includes features of HTML and XHTML. The syntax used is streamlined and a bit easier to use.  HTML5 does not have the same syntax rules as XHTML where we needed lower case tag names, quoting our attributes, an attribute had to have a value and to close all empty elements.  However, even though your code will be valid without some of these items, we feel some level of consistency is in order.  So, when writing your HTML 5 code in your web classes at MCC, we are requiring that you follow these "best practices" to help you create clean and consistent markup.

5.  All well-formed HTML5 documents are required to have the following elements: 1. Document Type Definition (DOCTYPE), 2. HTML 3. HEAD 4. TITLE 5. BODY

6.  Open Notepad++ / Microsoft Visual Studio Code and type the code as we review the style guide rules.  Notepad++ / Microsoft Visual Studio Code will give you color coded assistance but not until you save  Notepad++ / Microsoft Visual Studio Code doesn’t know it’s html until you save, once you save it will give you some color coded assistance to help you determine if you are coding correctly or not.

7.  The first tag you must put in your HTML5 document is the Document Type Definition (DTD).  A DTD (commonly called the DOCTYPE) basically defines all the rules of HTML syntax. This line of code is called the DOCTYPE declaration and it tells the browser which DTD we are using for this document. 

8.  The HTML element basically tells the browser the content of the file is HTML. The opening tag follows the DOCTYPE declaration. The closing tag comes at the end of your document. You will need to include the lang attribute to define the language used is English. 

9.  The content in the element does not display in the main browser window. Instead it tells the browser important information about the web page, such as where the CSS is located, and what the title of the web page is. 

10.  The element contains the title for the document. This information is not displayed in the browser window, but it does display in the browser's title bar.  How to write well- formed XHTML

11.  The meta tag is used to describe a characteristic of a Web page, such as the character encoding. Meta tags are included in the head section of a web page. Character encoding is the internal representation of letters, numbers, and symbols in a file such as a Web page that is transmitted over the Internet. There are many different character encoding sets. But it is recommended that you use a character encoding set that is widely supported, like utf-8.

12.  How to write well-formed XHTML

13.  The element contains all of the content that will be displayed in the browser window (except for comments).  How to write well- formed XHTML

14.  The comment tag is used to insert comments in the source code. Comments are not displayed in the browser and are used to explain or document your code.   You must include a comment as the first statement in the body of all HTML documents that includes the following:  Student Name  Filename  Course number  Instructor last name  Creation date

15.  How to write well-formed XHTML

17.  HTML5 no longer requires tag & attributes to be lowercase  However, we require that you continue to use lowercase for all HTML tags and attributes because we are used to it, it’s easy to read, and it looks cleaner. It is more difficult to type markup code in uppercase.  This is NOT recommended.  This is required.

18.  In HTML, quotes are not always required. But they are required in certain circumstances. We require you use double quotes on all attribute values. This ensures future maintainability of the code and keeps the code consistent.  This is NOT recommended.  This is required.

19.  In XML, all tags MUST be closed.  In HTML, this is not a requirement. You do not need to include the slash at the end of stand- alone tags. Some examples of stand-alone elements include,,, and.  This is our recommendation.

20.  It isn't necessary to close stand-alone tags. However, we require that you use the open and close tags in tags that are coded as a pair. The purpose of a closing tag is to tell the developer or the HTML parser where the enclosed content ends. So, if an element cannot have any enclosed content, (which means it’s technically a stand-alone or void element), then there should not be a closing tag or closing slash.

21.  When validating HTML5 pages, you’ll notice that you could include stray paragraphs without closing them. But “valid” pages don’t necessarily equate to good markup. So we require that you close all elements that actually contain, or are intended to contain, content.  This is NOT recommended.  This is required.

22.  Use a new line for every block, list, or table element, and indent every such child element. Independent of the styling of an element (as CSS allows elements to assume a different role per display property), put every block, list, or table element on a new line. Also, indent them if they are child elements of a block, list, or table element.  Sample format: Student Name Filename

23.  Provide alternative contents for multimedia. For multimedia, such as images, videos, animated objects via canvas, make sure to offer alternative access.  For images that means use of meaningful alternative text (alt) and for video and audio transcripts and captions, if available.

24.  Providing alternative contents is important for accessibility reasons:  A blind user has few cues to tell what an image is about without @alt  and other users may have no way of understanding what video or audio contents are about either.  (For images whose alt attributes would introduce redundancy, and for images whose purpose is purely decorative which you cannot immediately use CSS for, use no alternative text, as in alt="".)

25.  Must include the src, alt, height and width attributes in the image tag. 

26.  It is acceptable to either include or omit the protocol portion (http:, https:) from URLs pointing to images and other media files, style sheets, and scripts unless the respective files are not available over both protocols.  MyWay

27.  Opening Comment  Please include a comment as the first statement of all CSS documents that includes the following:  /* Student Name File name Course number Instructor Last Name Creation date */