XHTML1 Building Document Structure N100 Building a Simple Web Page.

Slides:



Advertisements
Similar presentations
CSCI N241: Fundamentals of Web Design Copyright ©2004 Department of Computer & Information Science Introducing XHTML: Module B: HTML to XHTML.
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Cascading Style Sheets
Introducing XHTML: Module C: Document Structure. Goals Understand how to use DTDsUnderstand how to use DTDs Understand the importance of backward compatibilityUnderstand.
Basic HTML Tags.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 3: XHTML Coding © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Upgrading to XHTML DECO 3001 Tutorial 1 – Part 2 Presented by Ji Soo Yoon 19 February 2004 Slides adopted from
HTML Hypertext Markup Language –First proposed by CERN in 1989 –It is non-linear so it allows you to jump from place to place –Markup refers to the structure.
XHTML1 Building Document Structure. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML) documents.
Web Page Development Identify elements of a Web Page Start Notepad
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Upgrading to XHTML DECO 3001 Tutorial 1 – Part 1 Presented by Ji Soo Yoon 19 February 2004 Slides adopted from
Introducing XHTML: Module B: HTML to XHTML. Goals Understand how XHTML evolved as a language for Web delivery Understand the importance of DTDs Understand.
HTML Elements. HTML documents are defined by HTML elements.
Developing a Basic Web Page Posting Files on UMBC
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.
© Ms. Masihi 1.  A web page is created using a language called, Hypertext Markup Language, better known as HTML Code.  HTML is a user friendly language.
Introducing HTML & XHTML:. Goals  Understand hyperlinking  Understand how tags are formed and used.  Understand HTML as a markup language  Understand.
HTML Notes Chapters 1--6 Codes used in creating HTML documents are called tags. Tags are always enclosed in left ( ) angle brackets. Tags can be upper.
Basic XHTML Module 2: XHTML Basics LESSON 1. Module 2: XHTML Basics LESSON 1 Lesson Overview In this lesson, you will learn to:  Write XHTML code using.
HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.
Creating a Basic Web Page
Unit 1 – Developing a Web Page. Objectives:  Learn the history of the Web and HTML  Describe HTML standards and specifications  Understand HTML elements.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
HTML H yper T ext M arkup L anguage. HTML HTML is NOT case sensitive However, proper coding etiquette if for all to be in ALL CAPS and for text to be.
CS134 Web Design & Development Creating a Basic Web Page Mehmud Abliz.
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.
XHTML1 Building Document Structure Chapter 2. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML)
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
1 Web Developer Foundations: Using XHTML Chapter 2 Key Concepts.
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Explorers Guild April 27, What is HTML? Hypertext Markup Language (HTML) is the basic building block of the World Wide Web page. HTML files are.
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 Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
HTML INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Creating XHTML Documents Essentials for.
Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Introducing XHTML: Module C: Document Structure.
XP 1 Creating an XML Document Developing an XML Document for the Jazz Warehouse XML Tutorial.
1 Web Application Programming Presented by: Mehwish Shafiq.
1 Tutorial 11 Creating an XML Document Developing a Document for a Cooking Web Site.
HTML Tags Lesson 2. What are HTML Tags?  Markup tags  Coded instructions that accompany the plain text of an HTML document  Syntax –Left wicket< –Tag.
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley What did we learn so far? 1.Computer hardware and software 2.Computer experience.
Chapter 1 Introduction to JavaScript JavaScript, Third Edition.
The Web Wizard’s Guide to HTML Chapter Two Basic Text Formatting.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
HTML is the language that allows text and graphics to be displayed as Web pages. It is a set of special codes, called tags, that tells a browser application.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
HTML Introduction. Lecture 7 What we will cover…  Understanding the first html code…  Tags o two-sided tags o one-sided tags  Block level elements.
HTML Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Introducing HTML & XHTML:
Tutorial Developing a Basic Web Page
Presentation transcript:

XHTML1 Building Document Structure N100 Building a Simple Web Page

XHTML2 Backward Compatibility To be backward compatible with older browsers, you save XHTML documents with an extension of.html or.htm, just like HTML documents You must follow several rules to ensure that the code within your XHTML documents is also backward compatible XML requires that empty elements include a slash before the closing bracket to close the element

XHTML3 Backward Compatibility Older browsers that do not support XML ignore the element when they see the slash immediately following the element name in an empty element You can ensure that older browsers are able to read empty elements in a well-formed XHTML document by adding a space between the element name and the closing slash

XHTML4 XHTML Elements and Attributes The data contained within an element’s opening and closing tags is referred to as its content You must close empty elements by adding a space and a slash before the tag’s closing bracket

XHTML5 Required Elements To better understand how an XHTML document is structured, in this section you study in detail the three elements that must be included in every XHTML document: the,, and elements

XHTML6 The Element All HTML documents must include an element, which tells a Web browser that the instructions between the opening and closing tags are to be assembled into an HTML document The element is required and contains all the text and other elements that make up the HTML document The element is also the root element for XHTML documents and is required for XHTML documents to be well formed

XHTML7 The Document Head The elements within a document’s head section contain information about the Web page itself The document head does not actually display any information in a browser. It is not seen by the user. –Rather, it is a parent element that can contain several child elements A parent element is an element that contains other elements, known as child elements

XHTML8 Child Elements of the Element

XHTML9 The Document Body The document body is represented by the element and contains other elements that define all of the content a user sees rendered in a browser XHTML documents consist of elements that contain content, as opposed to HTML documents, which consist of content that contains elements In HTML, you can also use various attributes in the element that affect the appearance of the document, such as the bgcolor attribute for setting the background color and the text attribute for setting the default color of text

XHTML10 Basic Body Elements Basic body elements such as the and elements are some of the most frequently used elements in Web page authoring

XHTML11 Headings Heading elements are used for emphasizing a document’s headings and subheadings, which helps provide structure by hierarchically organizing a document’s content There are six heading elements, the largest through the smallest

XHTML12 Line Breaks Line-break ( ) element provide the simplest way of adding white space to a document White space refers to the empty areas on a page –It makes a page easier to read and is more visually appealing –It is tempting for beginning Web page authors to try and pack each page with as much information as possible, but experienced Web page authors know that the presence of white space is critical to the success of a page, whether you are creating a Web page or a traditional printed page

XHTML13 Horizontal Rules The empty horizontal-rule ( ) element draws a horizontal rule on a Web page that acts as a section divider Horizontal rules are useful visual elements for breaking up long documents Although the element is technically a block- level element, it cannot contain any content because it is an empty element

XHTML14 Comments Comments are nonprinting lines that you place in your code to contain various types of remarks, including your name and the date you wrote the code, notes to yourself, copyright information, or instructions to future Web page authors and developers who may need to modify your work XHTML comments begin with an opening comment tag

XHTML15 Web Page with Comments