• Save
Intr to-html-xhtml-1233508169541646-3
Upcoming SlideShare
Loading in...5

Intr to-html-xhtml-1233508169541646-3



Com Ed 7 Prelim

Com Ed 7 Prelim



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Intr to-html-xhtml-1233508169541646-3 Intr to-html-xhtml-1233508169541646-3 Presentation Transcript

    • Introduction to HTML &Introduction to HTML &XHTMLXHTML
    • IntroductionIntroduction Web developers view web pages asdocuments that must be created according toauthoring and development guidelines Web developers use HTML or XHTML towrite code of a web page Web browsers have a built-in interpreter torender the results of the code in its window
    • The World Wide WebThe World Wide Web Definitions HTML The HyperText Markup Language The language used to structure text-based informationin a document by denoting certain text as headings, paragraphs, lists,etc — and to supplement that text with interactive forms,embedded images, and other multimedia objects XHTML The eXtensible HyperText Markup Language XHTML consists of all the elements in HTML 4.01combined with the syntax of XML. Allows users to define their own “tags” for definingstructure, layout, etc.
    • Content of Web PagesContent of Web Pages A web site may contain a combination of 13standard elements:Text SoundLists VideoHyperlinks TablesColour LayersGraphics FramesImages FormsImage Maps
    • Content of Web PagesContent of Web Pages The content of a web site can be classifiedas: Static content – does not change regularly e.g.personal and professional web sites Dynamic content – changes regularly e.g.,newspaper web sites, weather report sites…
    • Authoring of Web PagesAuthoring of Web Pages After a web page layout is designed, one needs to useHTML/XHTML code to implement the design Introduction to XHTML Syntax Document Tags Authoring tools Text formatting Special characters Hyperlinks Lists Meta Data Colours Audio & Video
    • XHTML SyntaxXHTML Syntax XHTML uses tags that are enclosed in brackets < > XHTML content is contained between tags Tags and content form an XHTML element Generic element form: <start-tag> content <end-tag> Start and end tags have the same name, end tag has a‘/’ before it: <b>This is BOLD</b> XHTML tags can be nested according to the “first open,last closed” rule: <b><i>bold and italic</i></b>
    • XHTML SyntaxXHTML Syntax XHTML rules Tags must be closed XHTML is case sensitive Use lower case tags and attribute names, e.g. width=“100%” All attribute values must be double quoted, e.g. “100%” Tags must not overlap (i.e., during nesting) Comments can be used <!-- This text is a comment --> Do not use obsolete (deprecated) tags Browsers ignore misspelled tags (and many other things!)
    • Document TagsDocument TagsThe tags that make up the framework of a typical XHTML documentinclude the following: Document type definition (DTD) tag – DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Describes (to web browsers) what type/version of (x)html is used Specifies rules that apply to the markup of documents Used for document syntax validation (e.g. strict) and for web browser toprocess document in proper “parsing” mode (impacts on consistencyand speed of display) An XHTML document is validated against a Document Type Definition. Top-level tag, generally <html> Tag indicates the beginning and /end of an XHTML document
    • Sample XHTML Document StructureSample XHTML Document Structure<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY>webpage content goes here!</BODY></HTML>
    • Minimal XHTML DocumentMinimal XHTML Document<!DOCTYPE ….><html><head>…..</head><body><p>…….</p></body></html>HTMLelementHTMLelementHTMLelementHTMLelementHTMLelementHTMLelementHTMLelementHTMLelement
    • HTML Document StructureHTML Document Structure<html><head><title>HTML Document Structure</title><meta name=“author” content=“Andrea Curley” /></head><body>all web page content goes here</body></html>
    • Document Tags - HeaderDocument Tags - Header Header section, delimited by <head> tags Provides extra information about the document Serves as a container for styles, global scripts, etc. The main tags used in this section are: <title> - specifies the document title <meta> - provides information to search engines <style> - declares general & local styles for the document <script> - declares any scripting information
    • Meta TagsMeta Tags Web pages are designed for surfers and surf engines The <meta> tag increases the chances of page indexing Meta data refers to data about XHTML document ratherthan the document content Browsers do not render meta data Search engines use it for indexing and ranking the pagehits in a given search Some attributes of this tag are name, content, http-equiv,etc.
    • Meta TagsMeta Tags Most often the meta element is used to provide informationthat is relevant to browsers or search engines likedescribing the content of your document.<meta name=“keywords” content=“open, source, PHP,programming, code” /> When a search engine indexes the page, it includes theextra information -> open, source, etc. It provides these keywords to search agents requestingthem
    • Amazon’s Meta TagsAmazon’s Meta Tags<meta name="description" content="Low prices on digital cameras,MP3, LCD TVs, books, music, DVDs, video games, software, home &garden and much, much more. Free delivery on orders over £15." /><meta name="keywords" content="digital camera, LCD TV, books, DVD,low prices, video games, pc games, software, electronics, home,garden, video, amazon" />
    • Document Tags - BodyDocument Tags - Body Body section, delimited by <body> tags Section where visible content appears Content is a series of block tags containing inlinecontent
    • How can I write my first web page?How can I write my first web page?1. Open a text editor e.g., Notepad, Edit Plus2. Put in code from the HTML Document StructureSlide3. Save it as Example1.html4. In web browser (IE/Firefox/Netscape), Select File -> Open Select Example1.html Select OK
    • Authoring ToolsAuthoring Tools Tools needed to develop a web site: Editor Graphics program Digital cameras Scanners Audio & video software Types of editors Text: type in code and view results later -> Bottom-up development HTML: view results as you develop the web page -> top-downdevelopment Web author must be familiar with both approaches e.g. “EditPlus”, “MacroMedia Dreamweaver”
    • Text FormattingText Formatting Paragraphs Line breaks Headings Horizontal Rules Block divisions
    • ParagraphsParagraphs Main textual blocks, delimited by <p> tags<p>This is a paragraph of text in an XHTML document</p>This is a paragraph of text in an XHTML documentLine spacesLine spacesautomaticallyautomaticallyinsertedinserted
    • Line breaksLine breaks Used when you need to break a line prematurely(before the paragraph) The line break tag is <br /> Need space between “br” and “/” for Netscapebrowsers to interpret correctly
    • Lines - ExampleLines - Example<p>This is a paragraph of text in an XHTML document</p><p>This is a 2nd paragraph of text in an XHTML document</p>This is a paragraph of text in an XHTML documentThis is a 2nd paragraph of text in an XHTML document<p>This is a paragraph of text in an XHTML document</p><p>This is a 2nd paragraph of text <br /> in an XHTML document</p>This is a paragraph of text in an XHTML documentThis is a 2nd paragraph of textin an XHTML document
    • HeadingsHeadings There are 6 levels of headings <h1>…..<h6>, the higherthe heading number the smaller the text<h1> Heading 1</h1><h2> Heading 2</h2><h3> Heading 3</h3><h4> Heading 4</h4><h5> Heading 5</h5><h6> Heading 6</h6>Heading 1Heading 1Heading 2Heading 2Heading 3Heading 3Heading 4Heading 4Heading 5Heading 5Heading 6Heading 6
    • Horizontal RulesHorizontal Rules Horizontal rules appear as lines across the browser screen- <hr /> use space between “hr” and “/” so Netscapebrowsers can interpret correctly Used to separate information visuallyA line should be drawn under this text <hr />A line should be drawn under this text
    • Block Divisions (div)Block Divisions (div) Sometimes, there is a need to format a large block of textin a similar fashion but in a way that is different from otherblocks in the same document e.g. a quoted block of textcould appear in a different style than the text around it -<div><div align="center">Text formatted using div tag</div>Text formatted using div tag
    • Text FormattingText FormattingTextTextHeadingsHeadings ParagraphsParagraphs Word/CharactersWord/Characters<h1> largest<h1> largest....<h6> smallest<h6> smallest<p><p><b> bold<b> bold<i> italic<i> italic<br /> line break<br /> line break<div> acts like a line break<div> acts like a line break<hr /> line in a web page,<hr /> line in a web page,
    • HyperlinksHyperlinks Hyperlinks <a> link web pages to each other A link is a connection from one source to another Hyperlinks create hypertext and is the driving force of the web Hyperlinks can be used as: inter-document and intra-document links Links start at the source (visible part) and points to thedestination (invisible part)<a href="http://www.w3schools.com/"> Visit W3Schools! </a>address of theaddress of thedocument to link todocument to link to(invisible)(invisible)Text to beText to be be displayed as a hyperlinkbe displayed as a hyperlink(visible)(visible)
    • HyperlinksHyperlinks The important attributes of the link <a> tag: href title name charset type rel rev accesskey shape coords
    • HyperlinksHyperlinks The visible part of the link may have 4 states Link – is not active and has not been visited Active – target of the link is active in another browser window Visited – target of the link has been previously visited Hover – mouse pointer is over the link Redirect Example<html><head><meta http-equiv="Refresh" content="5;url=http://www.dit.ie" /></head><body><p>Sorry! We have moved! The new URL is: <ahref="http://www.dit.ie">www.dit.ie</a></p><p>You will be redirected to the new address in five seconds.</p><p>If you see this message for more than 5 seconds, please click on the link above!</p></body></html>
    • Hyperlinks - anchorsHyperlinks - anchorsfor “external” link<a href=http://www.dit.ie target=“_blank”> This is the DIT website</a>…for “internal” link<a href=“#Section1”> jump to Section 1</a>.<a name=“Section1”>Section 1</a>… for “mail to” link<a href="mailto:someone@dit.ie">email someone@dit.ie</a>
    • ListsLists XHTML supports 3 types of lists: Ordered – <ol> Unordered – <ul> Definition – <dl> Lists may be nested to obtain multiple hierarchylevels
    • Ordered List - <ol>Ordered List - <ol> Lists whose elements must appear in a certainorder Such lists usually have their items prefixed with anumber or letter<ol><ol><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li></ol></ol>1.1. ApplesApples2.2. BananasBananas3.3. CoconutsCoconuts
    • Ordered List - <ol>Ordered List - <ol> How can the numbering style be changed?? Some other style options: decimal lower-roman upper-roman upper-alpha<ol<ol style=“list-style-type: lower-alpha”style=“list-style-type: lower-alpha”>><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li></ol></ol>a.a. ApplesApplesb.b. BananasBananasc.c. CoconutsCoconuts
    • Unordered List - <ul>Unordered List - <ul> Lists whose elements do not have to appear in anumbered order<ul><ul><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li></ul></ul>• ApplesApples• BananasBananas• CoconutsCoconuts
    • Unordered List - <ul>Unordered List - <ul> How can the list item marker be changed?? Some other style options: disc circle none<ul<ul style=“list-style-type: square”style=“list-style-type: square”>><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li></ul></ul>ApplesApplesBananasBananasCoconutsCoconuts
    • Definition List - <dl>Definition List - <dl> More complex than the other 2 lists due to theirhaving 2 elements per list item<dl><dl><dt>Internet Explorer</dt><dt>Internet Explorer</dt><dd>Developed by Microsoft</dd><dd>Developed by Microsoft</dd><dt>Netscape</dt><dt>Netscape</dt><dd>Developed by Netscape</dd><dd>Developed by Netscape</dd></dl></dl>Internet ExplorerInternet ExplorerDeveloped by MicrosoftDeveloped by MicrosoftNetscapeNetscapeDeveloped by NetscapeDeveloped by Netscape
    • Nesting ListsNesting Lists Lists can be nested of the same or different types<ul><ul><li>Send us a letter, including:</li><li>Send us a letter, including:</li><ol><ol><li>Your full name</li><li>Your full name</li><li>Your order number</li><li>Your order number</li><li>Your contact information</li><li>Your contact information</li></ol></ol><li> Use the web form to send an email </li><li> Use the web form to send an email </li></ul></ul>• Send us a letter, including:Send us a letter, including:1.1. Your full nameYour full name2.2. Your order numberYour order number3.3. You contact informationYou contact information• Use the web form to send an emailUse the web form to send an email
    • ColoursColours Colour is an essential element and greatly improvesvisualisation A web author can set colours for background and text Tags have a color attribute that enables web authors to setcolours for different XHTML elements Colours can be specified using hexadecimal codes formulti-browser consistency Black -> #000000 Red -> #FF0000 Blue -> #0000FF Colours can be set globally or locally
    • Audio & VideoAudio & Video XHTML allows authors to incorporate digital audio andvideos in a web page Audio formats – AU, WAV, MIDI, AIFF and MP3 Video formats – AVI, QuickTime, MPEG and MJPEG A surfer must have the right hardware and software to beable to play multimedia content of the web page <embed> tag causes a control panel to be displayed foraudio and video files in a web page Attributes used are src, width and height, volume,autostart, loop and hidden
    • Audio & VideoAudio & Video<embed src="music.mp3" width="145"height="60" volume="70"> </embed>
    • ReferenceReference Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHPProgrammers Reference, Hungry Minds Inc,U.S. Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibilityand Protecting Against Worst-Case Scenarios with XHTML and CSS,New Riders. Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript