HTMLHTML PrinciplesHTML StandardVersions of the standardHTML versus XHTMLBrowser VersionsOther rendering issuesToolsProcessTerminologyTag syntaxAttribute syntaxTag typesDocument tagsThe bare minimumHTML CommentsText structure tagsThe “Heading” tagSpacing exampleCharacter EntitiesUnordered listsExampleOrdered listsSlide 24Nested listsAttributes for ordered listsList exampleOther structure tagsLogical style tagsDisplay style tagsWhich tags to useStyle exampleHorizontal lineSlide 34Horizontal line styles - DEPRECATEDQuick review of end tags:Anchor tag (Hyperlinks)Link to external Web pagesRelative URLsRelative pathsSlide 41StructureMailto hyperlinksInserting a GraphicInserting a Graphic ContinuedImage file formatsImage tagMore image tag attributesAlignment of images – DEPRECATED in favor of CSS…Flowing TextSlide 51BandwidthBattling Bandwidth LimitationsImage links1HTMLHyperText Markup LanguageHyperTexttext containing navigable links to other textsMarkup Languagea method of adding information to the text indicating the logical components of a document, or instructions for layout of the text on the page which can be interpreted by some automatic system2HTML PrinciplesPlatform, device, modality independencehard to achieve in realitydifferent browser, different renderingHuman-readable text formatindependence from an editing applicationStandard conformance and evolution3HTML StandardWhat tags exist?How are the tags to be interpreted?How are the tags related to each other?How should the client respond to user interaction with the page?Standard body is the World Wide Web Consortiumwww.w3c.org4Versions of the standardHTML 1.01993never fully standardizedHTML 2.01994HTML 3.219963.0 never releasedadded tables, applets, text flowHTML 4.01998XHTML 1.0current recommendationmakes HTML conformant with XMLHTML versus XHTMLHTML (Hypertext Markup Language) is the markup language used to create web pages. An HTML document is read by a web browser, which displays the web page. The most recent version of HTML is 4.01.XHTML (Extensible Hypertext Markup Language) is a stricter, cleaner version of HTML intended for use with automated document processing systems. XHTML is combination of HTML and XML (Extensible Markup Language), which is a more general markup language than HTML.56Browser VersionsMany different browser versionsall support different combinations of HTML featuresCurrent leadersFirefoxIE 7 and IE 8Netscape •way behindOperaSafari7Other rendering issuesUser’s monitorsizeresolutioncolor depthcolor temperatureUser preferenceswindow sizebrowser preference settingsimages offBrowser capabilitiesformat-specific plug-insJava version8ToolsText editorediting HTML files(no WYSIWYG editors, please)Web client / browserviewing filesIE, Firefox, Safari, etc.Web serverdeliver the files to usersstudents.depaul.edu9ProcessWrite HTML fileASCII / text formatextension .html or .htmUpload to serverpublic_html directorySet permissionsSimilar with images.gif and .jpg formats10TerminologyDocument contentthe parts of the file that the user seesTagHTML codes that control document appearanceAttributesproperties associated with a tagEntitiesspecially-coded characters11Tag syntaxTags are case-insensitivebut all lower case is recommendedXHTML will require itTags are enclosed in angle brackets<html>Tags typically come in pairs<title></title>Tags typically enclose document content<p>some text... </p>Tags can only be nested<b> <i> some text... </i> </b> legal<b> <i> some text... </b> </i> illegal12Attribute syntaxAttributes are name / value pairs included in tags<body bgcolor=“black”>Attributes never include document contentmay include formatting informationcolor, size, etc.HTML attributes do not need to be quotedBut XHTML will require it13Tag typesDocument tagsidentify the various parts of the document (Head, Body)Text structure tagsdetermine the layout of the text (lists, paragraphs)Style tagstell the browser how to display the textImage tagsto incorporate imagesAnchor tagsto create hyperlinks14Document tags<html> … </html> Mark the beginning and end of the html file<head> … </head> Text in this part of the document is not displayed in the browser’s window. It includes other tags like <title> and <meta><title> … </title> Displayed in the browser’s title bar. It is used as the default bookmark description.<body> … </body> The contents displayed in the browser’s window.15<html><head><title>IT 130: The bare minimum</title></head><body>Welcome to the Bare Minimum Page for IT 130!</body></html>The bare minimumHTML CommentsThe comment feature provides you with a way to document your HTML files and make notes to yourself or anyone who reads your file. However, these do not show up in the displayed web page.Basic comment examples<!-- This is a comment --><!--------- You can write as much as you like in a comment and they can span multiple lines -------------->1617Text structure tagsHeadings: <hx> … </hx> for 1 x 6The smaller x the larger the text Paragraph: <p> … </p>A blank line is inserted before the paragraph.Line Break: <br>Ordered lists: <ol> … </ol>Unordered lists: <ul> … </ul>The “Heading” tagAn example of a ‘structure’ tagHeadings: <h1> … </h1> boldest and largest<h2> … </h2> <h3> … </h3> <h4> … </h4> <h5> … </h5> <h6> …. </h6> lightest and smallest 18<html><head><title>Spacing example</title></head><body><h1>Important! (This is an H1)</h1><p>Notice that we have some text in this paragraph.</p><h3>Spacing test (this is an H3)</h3><p>Here I am spacing things widely.It does not make a difference. I just left two lines blank, but I am still here!</p>One line<br>Second line<br><p>Another paragraph!</p></body> </html>Spacing example spacing-example.html20Character EntitiesCode name Code Symbol< < <> > >& & &© © ©® ® ®    Non-breaking space@ @· ●21Unordered listsAn unordered (or bullet) list uses the tag pair <ul> … </ul>Each item in the list is preceded by a single list item tag <li>It produces an indented list with a
View Full Document
Unlocking...