A Basic Web Page

Chapter 2 Objectives HTML tags and elements Create a simple Web Page XHTML Line breaks and Paragraph divisions Basic HTML elements

HTML Source Document Review Chapter 1 –URL in browser instructs PC to request a doc –Server returns the HTML source document for URL HTML source code in doc contains details of what and how to display doc The browser reads the instructions and displays on requesting PC

Source document All web pages are entirely plain-text documents. Chapter 5 introduces graphics Two types of text –Elements –Tags These are used to classify contents of document (header, body, title, etc.) Special formatting is imparted through the use of tags

Sample Basic Web Page Welcome to my Web page!

Creating a Source Document –Avoid using any editor that is not plain-text only –HTML files should end in.htm and not contain any spaces in the file name –You can open a HTML file by simply dragging the file icon to an open browser window

HTML Code –Writing and Indenting HTML Code Use lower case letters for your tags Indenting your code makes nesting tags easier

HTML, XML, and XHTML –From HTML to XHTML HTML implementations are different between browser manufacturers even though all support a single standard XHTML has been introduced to supercede HTML and has stricter rules HTML tags are not case sensitive, XHTML tags are case sensitive –Creating an XHTML Source Document XHTML documents require an XML declaration at the head of the document file These lines comprise a Document Type Definition (DTD)

The Element Meta tags are used to add information about a web page that is invisible to web browsers The tags are read by search engines and indexers Meta tags are often used to identify keywords and descriptions

Paragraphs and Line Breaks The Element –Browsers ignore consecutive whitespace characters – the tag (paragraph) is used to create a paragraph break on the page –Good HTML design requires that you use the closing tag, however no browser requires it –Browsers ignore any tag that is not understood, so if a tag is not performing the function you want, check for misspelling or a missing The Element –The br tag causes an immediate line break on the page –The br has no closing tag, so the XHTML tag has a trailing forward slash

Headers Headers are content tags which select one of size text sizes They should be used only for titles and section headers h1 is the largest, h6 the smallest Proper use of header tags allow a table of contents to be retrieved by just displaying the hx tags

The and Elements em and strong elements are also content tags In a browser, they is normally displayed as italics and bold, but this is entirely device dependent em and strong are preferred over the i (italic) and b (bold) tags because it separates the presentation from the content (meaning)

Block-level vs. Inline Elements Block-level elements are designed to define a complete section of text Examples of block elements are hx, p, and body tags Inline elements can affect an area as small as a single character Examples of inline elements are em, strong, and b tags

Blockquote This block-level element is used to define a long block of text, usually a quotation In IE and Navigator, the presentation is represented by indenting the text from both the left and right margins

Font Size Font sizes are manipulated by the hx tags and also by the big and small tags Unless your intention is to use an actual header, use the big and small tags to change the font

A Few Words about Fonts Font faces themselves can be defined by using the font tag, but the preferred method is to use style sheets Users can change their default fonts, both size and face, using the browser preferences, so do not count on absolute control

Comments about Comments Comments are used to document your HTML code for later reference The comment tag encloses the comments which are not visible in the browser The browser ignores anything inside the comment tags, including HTML

End of Chapter 2 HTML tags and elements Create a simple Web Page XHTML Line breaks and Paragraph divisions Basic HTML elements