Tutorial 1 Developing a Basic Web Page

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the tools needed to create a Webpage. The basic structure of an HTML file Work with block-level elements New Perspectives on HTML and XHTML, 5e 2

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Tools for Creating HTML Documents - NEED - Basic text editor such as Windows Notepad (free and smaller file sizes) OR - HTML Converter – translates formatted text into HTML code (Costly to purchase and larger file sizes) - Can create the source document in a word processor and then convert it – see demo of file size differences New Perspectives on HTML and XHTML, 5e 3

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition What are the steps to do a Simple Web Page? 1.Plan your page. 2.File Management 3.Open Notepad, type in your code, save file with.html extension at end. 4.Test your Web Page!

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Creating an HTML Document Plan out your Web page before you start coding Draw a planning sketch or create a sample document using a word processor Preparatory work can weed out errors or point to potential problems Organize your files – all Websites DEPEND upon file organization! New Perspectives on HTML and XHTML, 5e 5

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition REMEMBER THIS? Creating an HTML Document – Use this page as a template for your first page New Perspectives on HTML and XHTML, 5e 6 HELLO WORLD! My name is Mrs. Christina Morris and I teach this class. The official name is JavaScript/HTML Web Design, but we will call it Web Design. The Class Wiki is located at

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition PLANNING an HTML Document 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, or formatting features such as boldfaced font, and italicized text. Mark your elements with the correct tags - A two-sided tag is a tag and the general syntax for a two-sided tag is: content A two-sided tag’s opening tag ( ) and closing tag ( ) should completely enclose its content Elements can contain other elements –Tags cannot overlap New Perspectives on HTML and XHTML, 5e 7

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition The Basic Structure of an HTML File HTML is the root element - the opening tag marks the start of a document, and the closing tag tells a browser when it has reached the end of that document. Anything between these two tags is the document content. An HTML document has two main sections: the head and the body The head element contains information about the document, for example the document title or the keywords, used by browser search engines. The content of the head element is not displayed within the Web page New Perspectives on HTML and XHTML, 5e 8

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition The Structure of an HTML File The body element contains all of the content to appear on the Web page The body element contains HTML code (tags) that tells the browser how to render the content The title element contains the page’s title and a document’s title is displayed in the browser’s title bar The comment tag adds notes to your HTML code and are useful in documenting your code for yourself and others New Perspectives on HTML and XHTML, 5e 9

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Converting an HTML Document into XHTML There is considerable overlap between HTML and XHTML You can convert an HTML file into an XHTML file by replacing the opening tag with the following three lines of code: – New Perspectives on HTML and XHTML, 5e 10

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Displaying an HTML File As you continue modifying the HTML code, you should occasionally view it with your Web browser to verify that you have not introduced any errors You should view your work in several different browsers to check for compatibility of your code New Perspectives on HTML and XHTML, 5e 11

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Displaying an HTML File New Perspectives on HTML and XHTML, 5e 12

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 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 where n is an integer between 1 and 6 and is the largest heading while is the smallest OTHER TAGS - Paragraph, content –Block quote, enter content –A generic block-level element, enter content New Perspectives on HTML and XHTML, 5e 13

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 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 CODE more readable New Perspectives on HTML and XHTML, 5e 14

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Making a List HTML supports three kinds of lists: ordered, unordered, and definition You use an ordered list for items that must appear in a numerical order You use an unordered list for items that do not need to occur in any special order One list can contain another list This is called a nested list New Perspectives on HTML and XHTML, 5e 15

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Making a List New Perspectives on HTML and XHTML, 5e 16

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Creating a Definition List The definition list contains a list of terms, each followed by the term’s description Web browsers typically display the definition description below the definition term and slightly indented: Basic Stick Easiest stick to learn New Perspectives on HTML and XHTML, 5e 17

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Using Other Block-Level Elements HTML supports the address element to indicate contact information Most browsers display an address element in an italicized font, and some right-justify or indent addresses New Perspectives on HTML and XHTML, 5e 18

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Using Other Block-Level Elements New Perspectives on HTML and XHTML, 5e 19

New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Tutorial 1 Summary Create a basic Web page using HTML coding tags Organize your code and your webpage files. Block-level elements such as underlines, paragraphs, headings, bold, italicize, etc., are available to the programmer. New Perspectives on HTML and XHTML, 5e 20