1 / 28

ECA 228 Internet/Intranet Design I

Learn about the limitations of WYSIWYG editors, the need to tweak code, and the skills required for complex websites. Understand how web pages are written with markup to display text and add graphics, sound, and video.

amildred
Download Presentation

ECA 228 Internet/Intranet Design I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ECA 228 Internet/Intranet Design I Intro to Markup

  2. WYSIWYG • limitations • need to tweak code • complex sites require more skills • web pages are written with markup • display text • add graphics, sound, video ECA 228 Internet/Intranet Design I

  3. HTML Document • saved as text or ASCII • final display is often browser dependent • approximate browser marketshare • IE 89% • NN 8% • Opera 2% • Others 1% ECA 228 Internet/Intranet Design I

  4. Browser Dependency • browser is the software that interprets and displays html • at first there was no governing body to ensure standards • proprietary tags • W3C, World Wide Web Consortium, now maintains official HTML specifications ECA 228 Internet/Intranet Design I

  5. Markup • a webpage is made up of three different types of content: • text content • references: links, images, flash, etc • markup ECA 228 Internet/Intranet Design I

  6. Markup cont … • Three principle types of markup • elements: contained within < and > • non-empty elements <p>This is a paragraph</p> • empty elements <br /> • XHTML always requires a closing tag • HTML closing tag is sometimes optional • attributes: information about a specific element • values: each attribute has a value ECA 228 Internet/Intranet Design I

  7. Markup cont … • every element has only certain attributes that can be applied to it • XHTML: • all attributes must be in lower case • all values must be inside quotes <p align=“center”>content</p> ECA 228 Internet/Intranet Design I

  8. Block Level vs Inline • block level elements always display on a new line in the browser • a span of text, characters, or references within a block level element • block level elements can contain: • other block level elements • inline elements • inline elements cannot contain block level ECA 228 Internet/Intranet Design I

  9. Nesting • one element contained inside another • parent element contains a child element • elements are closed in the opposite order they are opened <p>This text is <b>bold</b>.</p> <center><p><i>stuff </i></p></center> ECA 228 Internet/Intranet Design I

  10. White Space • all white space is compressed into one space • you can use spaces, tabs, returns to make your code easy to read ECA 228 Internet/Intranet Design I

  11. File Names • Rules • no spaces • assume file names are case sensitive • use a proper file extension • .htm • .html ECA 228 Internet/Intranet Design I

  12. HTML vs XHTML ·requires use of <html>, <head>, and <body> tagsets ·all tags must be closed, including empty elements ·use lowercase · values must be surrounded by quotes ·all values must be stated explicitly eg, noshade=”noshade” ECA 228 Internet/Intranet Design I

  13. XHTML Advantages ·consistent, well-structured code ·code is free of non-standard tags ·easier to update and edit ·easier to use with css ·easier to use with scripting ·easier to use with a database ·easier to adapt to other systems (hand held) ·transition from HTML to XML ·more likely to be cross-browser compatible ·easier to meet accessibility standards ECA 228 Internet/Intranet Design I

  14. HTML template <html><!- - comments - -><head><title> My Title </title></head><body> . . . everything you see in the browser goes here</body></html> ECA 228 Internet/Intranet Design I

  15. <p> </p> paragraph tags • creates a new paragraph • block level element • attributes include • align = left | right | center | justify ***deprecated <p>This is one paragraph.</p><p>This is a second paragraph</p> ECA 228 Internet/Intranet Design I

  16. <hn> </hn> header tags • creates a section header • block level element • browsers display as bold • cannot include headers inside other headers ECA 228 Internet/Intranet Design I

  17. <hn> </hn> header tags cont … • n is a number from 1 to 6 - the lower the number, the larger the text( in general, 24, 18, 14, 12, 10, 8 pixels ) • attributes include • align = left | right | center | justify ***deprecated ECA 228 Internet/Intranet Design I

  18. <hn> </hn> header tags cont … display as <h1>This is an h1 header.</h1><h3>This is an h3 header.</h3> This is an h1 header. This is an h3 header. ECA 228 Internet/Intranet Design I

  19. <br /> line break • creates a manual line break within the text – does not add extra line as <p> does • empty element, no closing tag • attributes include • clear = left | right | all ***deprecated • clear attribute indicates that any following text should not begin until the specified margin is clear ( no image is between it and the margin ) ECA 228 Internet/Intranet Design I

  20. <center> </center> center tag • centers virtually any element on a web page • deprecated displays as <center><p>Welcome!</p></center> Welcome! ECA 228 Internet/Intranet Design I

  21. <b> </b> bold tag • makes text bold displays as <p>This text is <b>bold</b>.</p> This text is bold. ECA 228 Internet/Intranet Design I

  22. <strong> </strong> strong tag • generally makes text bold displays as <p>This text is <strong>strong</strong>.</p> This text is strong. ECA 228 Internet/Intranet Design I

  23. <i> </i> italic tag • italicizes text displays as <p>This text is <i>italic</i>.</p> This text is italic. ECA 228 Internet/Intranet Design I

  24. <em> </em> emphasis tag • generally italicizes text displays as <p>This text is <em>emphasized</em>.</p> This text is emphasized. ECA 228 Internet/Intranet Design I

  25. <u> </u> underline tag • underlines text • deprecated • use with caution displays as <p>This text is <u>underlined</u>.</p> This text is underlined. ECA 228 Internet/Intranet Design I

  26. <big> </big> big tag • makes text bigger than surrounding text • generally makes the text one typical font size larger than surrounding text • cumulative, meaning if used more than once, text is 2 font sizes bigger • although this tag is not deprecated, style sheets offer the developer much more control over text size ECA 228 Internet/Intranet Design I

  27. <big> </big> big tag cont … displays as <p>This text is <big>bigger</big>.</p><p>This text is <big><big>bigger<big></big> still.</p> This text is bigger.This text is bigger still. ECA 228 Internet/Intranet Design I

  28. <small> </small> small tag • makes text smaller than surrounding text • generally makes the text one typical font size smaller than surrounding text • cumulative, meaning if used more than once, text is 2 font sizes smaller • although this tag is not deprecated, style sheets offer the developer much more control over text size ECA 228 Internet/Intranet Design I

More Related