Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 3: XHTML Coding © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.

Slides:



Advertisements
Similar presentations
Web Development & Design Foundations with XHTML
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Cascading Style Sheets
Creating Pages in XHTML
1 HTML Standards & Compliance. 2 Minimum Required HTML tags: (must go in this order!)
XHTML Basics.
1. Content – Collective term for all text, images, videos, etc. that you want to deliver to your audience. 2. Structure – How the content is placed on.
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.
Site Development Foundations © 2004 ProsoftTraining All rights reserved.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
XHTML1 Building Document Structure. XHTML2 Objectives In this chapter, you will: Learn how to create Extensible Hypertext Markup Language (XHTML) documents.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
Upgrading to XHTML DECO 3001 Tutorial 1 – Part 1 Presented by Ji Soo Yoon 19 February 2004 Slides adopted from
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.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
© 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.
Session: 3. © Aptech Ltd. 2Formatting Text using Tags / Session 3  Explain the Heading tag  Explain the different tags related to formatting  Explain.
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
Basics of HTML.
Web page - A Web page is a simple text file that contains HTML tags (code) that describe what should be displayed on the browser. -The Web browser interprets.
Creating a Simple Page: HTML Overview
Creating a Basic Web Page
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.
CS134 Web Design & Development Creating a Basic Web Page Mehmud Abliz.
1 HTML intro The development of HTMLThe development of HTML The transition from HTML to XHTMLThe transition from HTML to XHTML XHTML syntax, tags, and.
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.
ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
1 Web Developer Foundations: Using XHTML Chapter 2 Key Concepts.
XHTML. Introduction to XHTML What Is XHTML? – XHTML stands for EXtensible HyperText Markup Language – XHTML is almost identical to HTML 4.01 – XHTML is.
Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.
Cascading Style Sheets Orientation Learning Web Design: Chapter 11.
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.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
HTML Basics BCIS 3680 Enterprise Programming. Web Client/Server Architecture 2  Your browser (the client) requests a Web page from a remote computer.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
1 Web Application Programming Presented by: Mehwish Shafiq.
Lecture: Web Design Assis. Prof. Freshta Hanif Ehsan Faculty of Computer Science Kabul Polytechnic University Spring Semester
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.
COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Basic Document Structure.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 2: Markup Language and Site Development Essentials © 2007 Prosoft Learning Corporation All.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
XP 1 HTML Tutorial 1: Developing a Basic Web Page.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
INT222 – Internet Fundamentals
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
Lesson 5. XHTML Tags, Attributes and Structure XHTML Basic Structure head and body titles Paragraph headings comments Document Presentation Manipulating.
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Lesson 2: HTML5 Coding.
Marking Up with XHTML Tags describe how a web page should look
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 3: XHTML Coding © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design

Objectives Demonstrate knowledge of basic XHTML document structure Identify XHTML document structure tags, including the tag and the tag Create XHTML that validates properly Format paragraphs and text with XHTML tags Use comments and good coding practices

Markup Tags Markup tags are element names enclosed in angle brackets, or wickets –Tags are key to markup files –Tags embed the markup element information in the document so that a user agent (e.g., browser) will render text as instructed by the associated element –The combination of markup tags and standard text is loosely referred to as either "code" or "markup"

Container Tags Two types of tags: container and empty Container tags contain page text between an opening and a closing tag, as shown Container tags are also known as non-empty tags XHTML requires the use of container or non-empty tags

Empty Tags An empty tag does not use a closing tag Used in HTML only, Transitional or Frameset flavor Never used in XHTML; code will not validate if you use empty tags

Alternative Non-Empty Tag HTML and XHTML allow alternative notation for stand-alone non-empty tags Place the slash ( / ) after the element name (before the closing wicket), rather than before the element name like in a standard closing tag: My Home Page All XHTML tags must be closed (using either a pair of container tags or the stand-alone non-empty tag)

What Constitutes a Tag? An element An attribute A value

Document Structure Tags Every XHTML document must have the following document structure components to render as expected and validate: –A tag –An tag –A tag –Any tags –A tag reference to a style sheet (recommended) –A tag

Document Structure Tags (cont’d)

Are XHTML Tags Case-Sensitive? XHTML tags are case-sensitive and should always be typed in lowercase letters By contrast, HTML tags are not case-sensitive

Document Type Declaration (DOCTYPE) An SGML statement that describes the nature of your code Placed at the top of the document using the tag If you do not specify a DOCTYPE, then two problems may arise: –You will not be able to control how your code renders in the future –You will not be able to use a markup validator Each version and flavor of HTML/XHTML has its own DOCTYPE

The and Tags The tags encompass all other HTML or XHTML elements in the document –Takes various attributes The tags encompass several document elements, including: –The tag –The tag that references a CSS file, if present –The tag

The tag All content to be displayed on the page through the user agent must be enclosed between the tags – takes many attributes, including: bgcolor background link –Values accompany attributes, and must be enclosed in quotation marks in XHTML

Web Site File Structure When creating a Web page, you must consider the site’s file structure Your XHTML/HTML and image files will be uploaded to a server eventually, so it is always good practice to organize your files

Preparing Your Development Environment Obtain a text editor Install multiple browsers Set file preferences

Cascading Style Sheets (CSS) A technology that adds formatting and structure to your pages A style sheet is simple text file that contains instructions If all pages on your site are linked to the same style sheet, then one simple change to the style sheet will change all specified elements across the site Strict flavors of HTML and XHTML require that you use style sheets

CSS Terminology Proper CSS structure Inheritance CSS and XHTML Benefits of using CSS Style sheets and compatibility

Paragraph Formatting and Block-Level Elements Block-level markup elements –Affect entire paragraphs or multiple paragraphs The tag Text-level markup elements –Elements that can affect as little as a single character or word or

Heading Levels Block-level element Heading levels 1 through 6 –

Tag Nesting in Markup Placing one pair of tags between another –Proper:... –Improper:... Improper: The tag is opened within the tags, but closed after the tag If you fail to properly nest code, your pages may still render in some user agents, but they will not validate and may fail to render in the future

Primitive Formatting with the Tag The tag retains formatting on preformatted text Can be used to retain tabular format, fonts, etc. All text between tags will render as formatted in the HTML file

Indenting and Centering Text The tag Alternatively, use The tag can also be used to indent (but not center) text

Text-Level Elements Bold, italic and underlined text Bold: – and Italic: – and

Font Style Elements vs. Phrase Elements The element is a font style element, is a phrase element; both create boldface text The same is true of and, respectively, which both create italic or emphasized text The difference is that specifically means apply the bold font style, whereas indicates that the text is to be given a strong appearance In short, represents a font appearance instruction, whereas represents the weighting of the phrase relative to surrounding text

The, and Tags All make text appear in a fixed-width font in an HTML 4.0-compliant browser window Available to both HTML 4.0 and XHTML

Lists Two types of lists: Ordered –A numbered list –Uses the element and requires a closing tag Unordered –A bulleted list –Uses the element and requires a closing tag

Lists (cont’d) Ordered list code: Ordered List This is the first numbered item. This is the second numbered item. This is the last numbered item. Unordered list code: Unordered List This is the first bulleted item. This is the second bulleted item. This is the last bulleted item.

Good Coding Practice Create code that can be easily read by others Exceptions: –Some code might encounter problems if it includes random spaces –Always test your code in multiple browsers and validate it Adding hidden comments: Use comments to annotate code or document changes

Lesson 3 Summary Lesson 3 XHTML Coding See Skills Review