XHTML & CSS By Trevor Adams. Topics Covered XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements.

Slides:



Advertisements
Similar presentations
Introduction to HTML & CSS
Advertisements

XHTML Week Two Web Design. 2 What is XHTML? XHTML is the current standard for HTML Newest generation of HTML (post-HTML 4) but has many new features which.
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
WeB application development
Website Design.
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.
XHTML & CSS 2 By Trevor Adams. Last week XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
HTML Introduction HTML
Chapter 1 Understanding the Web Design Environment
Developing a Basic Web Page with HTML
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Chapter 14 Introduction to HTML
Introducing HTML & XHTML:. Goals  Understand hyperlinking  Understand how tags are formed and used.  Understand HTML as a markup language  Understand.
HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.
Computer Sciences Department
Review HTML  What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes.
Chapter 1 Variables in the Web Design Environment
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
Creating a Simple Page: HTML Overview
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
_ HTML, XHTML & CSS Sami Niemelä | Module 1: Introduction to digital media: Day 02.
Webpage design for researchers Dr Jim Briggs 1.
CS 299 – Web Programming and Design Introduction to HTML.
XHTML The Basics A brief history of HTML SGML (Standard Generalized Markup Language) Then came HTML Followed by the browser…and the great browser wars.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
HTML Structure & syntax
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.
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.
HTML INTRODUCTION, EDITORS, BASIC, ELEMENTS, ATTRIBUTES.
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.
XHTML. Introduction to XHTML What Is XHTML? – XHTML stands for EXtensible HyperText Markup Language – XHTML is almost identical to HTML 4.01 – XHTML is.
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.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Sheet 1XML Technology in E-Commerce 2001Lecture 1 XML Technology in E-Commerce Lecture 1 WWW, HTML, CSS, XML, Meta-modeling.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.
Introduction to HTML Tutorial 1 eXtensible Markup Language (XML)
XP Tutorial 9 1 Working with XHTML. XP SGML 2 Standard Generalized Markup Language (SGML) A standard for specifying markup languages. Large, complex standard.
XHTML and CSS Session 1 Intro, (X)HTML, CSS, W3C, browsers, webpage, structure, tags, attributes, elements, web development process, basic XHTML elements.
Web Standards Web Design – Sec 2-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
HTML: Hyptertext Markup Language Doman’s Sections.
XHTML By Trevor Adams. Topics Covered XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Creating XHTML Documents Essentials for.
1 Tutorial 11 Creating an XML Document Developing a Document for a Cooking Web Site.
Louisa Lambregts, Louisa Lambregts
©SoftMoore ConsultingSlide 1 Introduction to HTML: Basic Document Structure.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
Introduction to the World Wide Web & Internet CIS 101.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
HTML. HTML: What is it? – HTML stands for Hyper Text Markup Language – An HTML file is a text file containing small markup tags – The markup tags tell.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
HTML Structure & syntax
Chapter 1 Introduction to HTML.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
An Introduction to HTML Pages
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

XHTML & CSS By Trevor Adams

Topics Covered XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags) Attributes Document Types Document level elements – structure of an HTML document CSS Cascading Style Sheets Purpose of styles CSS levels 1, 2 and 3 Defining styles Understanding selectors

The Beginning - HTML Invented by Tim Berners-Lee Based on SGML Standardised General Mark-up Language Developed so research documents could be shared via The Internet HTML has had 4 major versions prior to XHTML XHTML introduced after CSS and XML became widely adopted web standards

Hyper Text Mark-up Language Devised to format textual documents Transported over the HTTP protocol HTTP also invented by Tim Berners-Lee A client browser renders mark-up into an on- screen image A user consumes the document using a client browser (user agent) E.g. Internet Explorer, Mozilla Firefox, Opera, Netscape and Safari

Web Standards The nature of the Internet eventually leads us to agreed standards From a basic entity to transfer textual documents To a platform used to deliver almost any conceivable idea using a multitude of media types The World Wide Web Consortium (W3C) is responsible for maintaining and ratifying web standards Supported by many industry leaders

Web Standards The idea is quite simple Web site designers create compliant documents Web browser developers ensure their browsers render compliant mark-up correctly End users ensure they use a compliant browser The Web will then work across all platforms and system architectures However, browsers implement bespoke features Site designers wish to utilise these features Users do not care or even think about Web standards (they should not really have to)

Web Standards Responsible designers create web sites that are standards compliant It is better for the web It is possible to design web sites that are not compliant to web standards Why do this? We know better already We shall be creating web sites that are compliant to XHTML 1.0 Supported by major browsers Comes in Strict, Transitional and Frameset flavours

Web Standards It is not enough to say: “It looks OK with Internet Explorer” or “Checked it with FireFox and it looked ok” It is not enough that mark-up merely looks right in the browser Design for the Internet, design for cross platform compatibility, design for professional pride and most of all… Make your design work in all the ways your users wish to interact with it Do not dictate the Internet to the user – it is not our job to do so!

XHTML Concept and Syntax

HTML Concepts HTML is relatively straight forward Individual Elements (tags) Special text strings Interpreted Provide document structure Formatting constructs Every element has a start and end part Contents of which is formatted accordingly

HTML Concepts Elements may contain attributes Name and value pairs contained within the starting part of the element Attributes are not free form Defined by XHTML document types Used to affect an individual instance of an element

HTML Concepts Element (tag) Hello, World! Element StartElement EndAttributeContent

HTML Elements (tags) Begin with left pointing angle bracket < Ends with right pointing angle bracket > Between brackets is a keyword indicating the element type, or Elements that contain content such as are closed with a / prefix to the element name This is content Elements with no content are closed inline E.g.

HTML Elements (tags) Some elements must contain other elements This is item 1 This is item 2 Another example would be a table  Cell 1,1  Cell 1,2

HTML Attributes Attributes are contained within the opening part of an element Attributes provide a means to alter an individual instance of an element Some attributes are required (defined by XHTML rules) For example, the element The img element requires (to be valid) a height, width, source file and alternative text attribute

HTML Attributes HTML attributes are always in the format: attribname=“attribvalue” They are separated within the start of the element using white space (space, tab, return line) They should always be properly formed to avoid unwanted errors when HTML is rendered

HTML Document Types A document type defines the structure of the mark- up A statement is included at the top of the document to indicate which version of HTML is being used A browser can then render it appropriately A document type declaration must be given for the HTML to be valid You cannot validate a page without declaring how it should be validated Document types are defined by the W3C

HTML Document Types XHTML 1.0 Strict XHTML 1.0 Transitional Remember them if you can, keep them in a handy place if you cannot!

HTML Document Elements Every XHTML document requires the following basic structure DTD Declaration element – contains the document element contained within Contains information about the document element contained within Contains the body content of the document (what the user consumes)

First web page First Complete Web Page Hello, World!

HTML Element Indicates the beginning and end of an XHTML document All documents begin with and end with You may find browsers can handle the absence of one or both We strive for valid XHTML – be sure to include both

Head Element Provides extra information about the document Serves a container for external document linking, such as a style sheet The element is ended with It should always contain a title Title of the document Used by the browser and other tools The head element also contains elements for other document related information

Meta Elements Contained within the element Allow the author to add extra information about the document using format: Support for meta tags is declining Still an important part of the document!

Body Element Where all visible content appears Appears after the element Within the element This is where novice web designers give most of their attention Often neglecting other important aspects

Cascading Style Sheets Introduction

What do a CSS do? Allows to define rules to determine the appearance of mark-up We do not want appearance mark-up in our HTML files. Not necessary – for many reasons Think about it for a moment

Meaning and Appearance The XHTML document should contain the meaning It is the information that is paramount Design issues are subjective Not everyone can use a visual design People may not want the style you chose But what about my great design! Take pride in delivering a web site that is accessible first and looks good second CSS lets you accomplish both

CSS is good for you External CSS files make each of your HTML files smaller and efficient No need to repeat the formatting rules You can manage your site look and feel from one file No matter two or two hundred pages Concentrate on producing clean mark-up The information in the mark-up should make sense when there is no style attached Users should not have to rely on the style you create for them They may night have keen sense of style!

CSS is good for the user Pages are smaller, therefore faster to download A browser can easily cache a style sheet No need to keep retrieving it upon page requests Some browsers allow users to customise their experience with personal style sheets Let the user ‘use’ their computer the way they want to – do not force them into things they do not want

Format of CSS A rule is made with Selector – element(s) to reference Declaration – set of statements that associate an element display property with a value specified. Every declaration is in the format ‘property-name: value;’ A declaration may have one or more rules defined

Where are we going with CSS We shall style our documents using CSS Also, control the screen layout using positional CSS But not this week grass hoppers! First we must master the basics Learn how to create dynamic effects without JavaScript, such as menu rollovers

In the mean time Complete the tutorial work this week Attempt the further exercises Help you gain understanding Take your time – it is a huge topic Get comfortable with XHTML and editors Notepad can be your friend just as much as Macromedia® Dreamweaver® Attempt to gain understanding of what WYSIWIG editors are doing for you