Transcription
' Chapter 2Webpage Markup withHTML5&c Sofpower%html5 markup-1
' HTML5 Page Structure !DOCTYPE html html xmlns "http://www.w3.org/1999/xhtml"lang "en" xml:lang "en" head meta charset "utf-8"/ title Great Company: homepage /title !-- other head elements as appropriate -- /head body !-- page content begin -- . . . . . !-- page content end -- /body /html &c Sofpower%html5 markup-2
' Page Title1. Displayed in the title bar of the browser window2. Used in making a bookmark for the page&c Sofpower%html5 markup-3
' Creating a Webpage !DOCTYPE html html xmlns "http://www.w3.org/1999/xhtml" lang "en"xml:lang "en" head meta charset "utf-8"/ title My Sample Webpage /title /head body style "background-color: cyan; margin: 50px" h2 Hi everybody! /h2 p My Name is (put your name here) and today is time (put in the date yyyy-mm-dd) /time . /p p HTML5 is cool. /p /body /html Demo: Ex: FirstPage&c Sofpower%html5 markup-4
' Sample Webpage&c Sofpower%html5 markup-5
' HTML5 Elements Therer are more than 100 different elements in HTML5. Elements for meta information are placed in the head element. Elements for page content are placed in the body element. HTML5 distinguishes between two broad types of contentelements:1. flow elements that occupy their own vertical space in a pageand phrasing elements that act like words and phrases.Flow elements act like paragraphs, lists, and tables and cancontain other flow elements, phrasing elements, and texts.2. Phrasing elements can contain other phrasing elements andtexts.&c Sofpower%html5 markup-6
' HTML5 Elements Classified Top-level elements: html, head, and body. Head elements: elements placed inside head, including title (pagetitle), style (rendering style), link (related documents), meta (dataabout the document), base (URL of the document), and script(client-side scripting). These elements are not part of the pagedisplay. Block-level elements: flow elements behaving like paragraphs,including article, h1–h6 (headings), header, footer, section, p(paragraph), figure, canvas (dynamic drawing area), pre(preformatted text), div (designated block), ul, ol, dl (lists), table(tabulation), form (user-input forms), and video (video). A blockelement occupies 100% of the available width to it and will bestacked vertically with preceding and subsequent block elements. Inother words, when displayed, a block-level (or simply block) element&c Sofpower%html5 markup-7
' always starts on a new line, and any element immediately after theblock element also begins on a new line. Inline elements: phrasing elements behaving like words, characters,or phrases that flow horizontally to fill the available width beforestarting new lines. Usually, inline elements are placed within blockelements. Inline elements include a (anchor or link), audio (sound),br (line break), code (computer code), img (picture or graphics), em(emphasis), nav (navigation), samp (sample output), span(designated inline scope), strong (strong emphasis), sub (subscript),sup (superscript), time (time/date), and var (variable name).&c Sofpower%html5 markup-8
' HTML5 Entities In an HTML5 document, certain characters, such as and &,are used for markup and must be escaped to appear literally.HTML provides entities (escape sequences) to introduce suchcharacters into a webpage. For example, the entity < gives and & gives &. Characters not on the regular keyboard can also be includeddirectly or using HTML5-defined character references.&c Sofpower%html5 markup-9
' Evolution of HTML In 1989, Tim Berners-Lee defined a very simple version ofHTML based on SGML. The first common standard for HTMLwas HTML 3.2 (1997). HTML 4.01 became a W3C (the World-Wide WebConsortium) recommendation in December 1999. HTML 4.01begins to clearly separate the document structure anddocument presentation and specifies a clear relationshipbetween HTML and client-side scripting (JavaScript). In January 2000, W3C released XHTML 1.0 as an XMLreformulation of HTML 4.01. XHTML 1.0 is basically HTML4.01 written under the strict XML syntax.– XHTML elements can be used together with other elementsdefined by XML.&c Sofpowerhtml5 markup-10%
' – XHTML pages can be processed easily by any XML tool. HTML5 combines the XHTML, HTML 4, and CSS3 standards,introduces new elements and APIs, as well as incorporatesMathML (Mathematical Markup Language) and SVG(Scalable Vector Graphics) into HTML. HTML5 can also easily be written in an XML compliant way.The release of the HTML5 standard promises to bringsignificant advantages to Web developers and benefits to endusers.&c Sofpower%html5 markup-11
' HTML5 IntegrationHTML 4CSS3XHTMLNew ElementsAPIsMathMLSVG&c Sofpower%html5 markup-12
' HTML5 Features and Advantages1. New elements such as header, footer, article, section,menu, nav, and aside to better organize webpages.2. With the new audio and video elements, HTML5 makessound and video media as easy to place in a webpage as a stillimage, thus eliminating the need for proprietary technologies,such as Flash and Silverlight, or browser plug-ins.3. With the new canvas dynamic drawing area element,interactive graphics and animation can easily be deployed onthe client side with JavaScript control.4. Browser support for drag-and-drop API.5. Browser support for form input and input checking.6. Websites can list files to be cached by the browser for offline&c Sofpowerhtml5 markup-13%
' use, either for browsing offline or for supporting a Webapplication running offline.7. With HTML5 Web Storage, Web applications can store sizabledata (up to 5MB per Web domain) locally on the browser side.Such local storage can be per session (lost if browser is closed)or persistent (not lost even if you close the browser or shutdown the computer) but private (not transmitted back to theWeb).8. Browser support for editing (by the end user) of webpagecontent.9. Native support of mathematical formulas and 2D graphicsmarkup with MathML and SVG, respectively.10. Enabling location-dependent information presentation withgeolocation API.&c Sofpower%html5 markup-14
' Webpage Syntax All tags begin with and end with . The tag name is givenimmediately following the leading . Make sure the tag isspelled correctly. Unrecognized tags are ignored by browsers.Any attributes are given following the tag name in the form: tag attribute1 "value"attribute2 "value" . You may use single quotes (’), instead of double quotes ("), forthe value part of any attribute. Be careful; forgetting to close aquote can result in a blank page display. Tag names and attributes are lowercase. Attributes are alwaysgiven in either of the two forms:attribute name "value"attribute name ’value’&c Sofpower%html5 markup-15
' where the value is case sensitive and can be empty. ForBoolean attributes, those that are either on or off, use either ofthese forms for “on”:attribute name "attribute name"attribute name ""and omit the attribute for “off”. Unrecognized tags and attributes are ignored by browsers. Most elements involve start and end tags. Other elements, suchas br/ (line break) and img ./ (image), do not haveclosing tags and are known as void elements. The slash (/) atthe end is optional for HTML5 but needed for polyglotdocuments. Elements must be well-formed. This means no missing openingor closing tags and no improper element nesting. For example,&c Sofpowerhtml5 markup-16%
' p Learning strong HTML5 /p /strong overlaps the tags and is not properly nested. The correctnesting is p Learning strong HTML5 /strong /p Attributes can be required or optional and can be given in anyorder. If an attribute is not given, its initial (default) value, ifany, is used. Extra white space and line breaks are allowed between the tagname and attributes and around the sign inside an attribute.Line breaks and white space within attribute values are alsoallowed but should be avoided because they may be treatedinconsistently by browsers. The body element may contain only flow (block) elements.Freestanding text (not enclosed in block elements) or inlineelements are not allowed directly in the body element.&c Sofpowerhtml5 markup-17%
' HTML5 Core Attributes id—Uniquely identifies the element in a page. All ids in adocument must be distinct. Among other uses, a URL endingin #some id can lead directly to an element inside a document. style—Gives presentation styles for the individual element.For example, the code body style "background-color: cyan" gives the color value cyan to the style propertybackground-color for this element. Several style propertiesseparated by semicolons can be given. The style attribute is adirect but inflexible way to specify presentation style.Although this attribute is sometimes necessary, better andmuch more versatile methods for assigning styles can be foundin Chapter 4.&c Sofpowerhtml5 markup-18%
' class— Specifies a style class or a space separated list of styleclasses for the element. For example, class "fineprint" orclass "footnote fineprint". Thus, you may place HTMLelements in different classes and associate presentation styles toall elements belonging to the same class. title—Provides a title for the element. This may be used fortool-tip displays by browsers. hidden—Prevents the element from being displayed by abrowser when set to true.Other core attributes include contenteditable, draggable,dropzone, spellcheck, and so on.&c Sofpower%html5 markup-19
' Webpage Architecture A typical webpage is organized into the following parts insidethe root element html. The head element contains child elements: the page title(title), the page character encoding with a meta tag meta charset "UTF-8"/ both are required by HTML5. Usually head contains additionalelements for styling, scripting, and other meta info. The body element provides the page content, often organizedinto a header part for the top banner and a horizontalnavigation bar at the top of the page. After the header, the page may also have a vertical navigationbar on the left side. The flow (block) element nav is used for&c Sofpowerhtml5 markup-20%
' navbars that organize links. Often, site-wide links are on topand page-specific links are on the left side of a page. Then, there are one or more articles (article) for the maincontent, followed by a footer at the end of the webpage. An article may contain one or more sections (section) thatconsist of headings (h1 through h6), paragraphs (p), tables,figures, audio, and video. A paragraph man contain text, pictures (img), audio, andvideo. The footer often provides information on copyright, author,and links to terms of use, privacy policy, customer service, andso on. An aside flow (block) element can set aside relatedinformation, such as links to references, outside resources, andadvertisements, that are not the primary content of the page.&c Sofpowerhtml5 markup-21%
' Sections and Paragraphs&c Sofpower%html5 markup-22
' article h1 The Green Earth Project /h1 section h3 Project Background /h3 !-- section 1-- p Put first paragraph here /p p Put second paragraph here /p h4 A Successful Past /h4 !-- subsection -- p Another paragraph here /p /section section h3 Current Status of Green Earth /h3 !-- section 2-- p Another paragraph here /p /section section h3 Future Goals /h3 !-- section 3-- /section /article Demo: Ex: GreenEarth&c Sofpower%html5 markup-23
' Flowing Content The p (a paragraph) is a flow (block) element which maycontain texts and phrasing elements. A flow element is typically displayed with a leading and atrailing blank line.The element content will be formatted to fit the availablewidth. Line breaks are inserted automatically (line wrapping)where needed to render the contents. Extraneous white spacesbetween words and lines within the source text of the contentare normally ignored (white-space collapsing). If you need a line break at a specific point in the content, youcan use the br / tag to call for a line break. For along-running text without spaces, such as an email or Web&c Sofpowerhtml5 markup-24%
' address, you can insert the void element wbr / to indicate aline break opportunity. The browser will do a line breakindicated by wbr only if necessary. For example, p Please visitwww.somelong. wbr / andcomplicated.com. /p Inside a flow element, you can place other phrasing (inline)elements such as q, em, mark, strong, img, video, and audio. By default, browsers usually display headings and paragraphsleft-aligned and without indenting the lead line. You may use( br/ ) to call for a line break between phrasing (inline)elements. The (or ) is a nonbreaking space. Use it insteadof a regular space between two words that must be kepttogether on one line or use several nonbreaking spaces to addmore spacing between two words.&c Sofpowerhtml5 markup-25%
' Block Quote&c Sofpower%html5 markup-26
' p In his famous em I Have A Dream /em speech,Martin Luther King said: /p blockquote cite "http://www.mlkonline.net" I have a dream that my four little children will oneday live in a nation where they will not be judgedby the color of their skin but by the content oftheir character. /blockquote Demo: Ex: Quote&c Sofpower%html5 markup-27
' p Confucius: q Don’t employ a person due to words ordismiss words due to the person. /q /p Demo: Ex: InlineQuote&c Sofpower%html5 markup-28
' Inline Quote&c Sofpower%html5 markup-29
' hr style "height: 4px; width: 50%;margin-left: auto; margin-right: auto" / Demo: Ex: Hrule&c Sofpower%html5 markup-30
' White Space and Line Wrapping HTML uses white space separates text into words. HTMLregards the following as white-space characters:space: ASCII 32 (entity )return: ASCII 13, newline: ASCII 10tab: ASCII 9 (entity )formfeed: ASCII 12 (entity )Zero-width space: a non-ASCII character (entity ) Words can be separated by one or more white-space charactersbut will only result in at most one rendered interword space. Tags do not break words. For example, p The HTML strong 5 /strong standard. /p &c Sofpower%html5 markup-31
' Manage Displayed Line Breaks To force a line break, use the br/ element. To keep two words on the same line, use the nonbreaking space( or the non-polyglot ) instead of a regularspace. To mark places where a long words can be broken across lines,you may use the non-polyglot soft hyphen (), which isrendered as a hyphen (-) only at the end of a line. Browsersgenerally do not break a word that is hyphenated in the sourcecode. To indicate where long words can be broken across lineswithout adding a hyphen, use the wbr/ element.&c Sofpower%html5 markup-32
' Preformatted Text figure style "width: 12em; background-color: cyan" pre NorthWestEastSouth /pre /figure &c Sofpower%html5 markup-33
' Preformatted TextDemo: Ex: Pre&c Sofpower%html5 markup-34
' Phrasing Elements a: a link br: an explicit line break cite: a citation em: emphasis, usually displayed in italics strong: strong emphasis, usually displayed in boldface mark: stronger emphasis with highlighting code: computer code, usually displayed in a monospaced font del: deleted words displayed with a line through them sub: subscript (e.g., x sub 0 /sub ) sup: superscript (e.g., x sup 2 /sub )&c Sofpower%html5 markup-35
' samp: sample computer output span: a general phrasing element that can contain otherphrasing (inline) elements, providing a simple way to attachpresentation styles to enclosed elements; for example, span style "font-weight: bold; color: blue" Important point /span var: a variable kbd: keyboard text&c Sofpower%html5 markup-36
' Formatted Time time datetime "date time" text /time p Fireworks start at time datetime "2011-07-04T19:00" 7pm on Independence Day /time /p p The final NASA space shuttle Atlantislaunched on time datetime "2011-07-08T11:29-04:00" themorning of Friday, 08 July 2011 /time in Cape Canaveral, Florida USA. /p &c Sofpower%html5 markup-37
' Publication Date Put a time element as child of body or child of the desiredarticle. Give datetime a date string with optional time string. Add the attribute pubdate "pubdate" body time timedate "2012-07-07" pubdate "pubdate" /time . /body &c Sofpower%html5 markup-38
' Webpage Presentation Stylesou control document presentation by attaching style rules toelements. There are three ways to attach style rules:1. Place style rules for individual and groups of elements inseparate style sheets and then attach them to HTMLdocuments with link . / in the head element.2. Include style elements in the head element.3. Define the style attribute for an individual element. h1 style "color: darkgreen" The Green Earth Project /h1 All three ways of attaching style rules can be used in the samepage. The style attribute takes precedence over styles in the style element, which takes precedence over those specified inexternal style sheets.&c Sofpowerhtml5 markup-39%
' style AttributeGeneral form:style "property1 :value1 ; property2 :value2 ; . . . "Foreground and Background Colors:color: some colorbackground-color: some color&c Sofpower%html5 markup-40
' Text Alignment text-align:left—lines are left justified text-align:right—lines are right justified text-align:center—lines are centered text-align:justify—lines are justified left and right&c Sofpower%html5 markup-41
' Font Sizes footer style "font-size: x-small" p . /p . p . /p /footer Demo: Ex: FontSize&c Sofpower%html5 markup-42
' Indenting ContentTo indent first line p style "text-indent: 3em" . /p To indent entire flow (block) elementmargin-left: lengthmargin-right: length div style "margin-left: 5em; margin-right: 5em" p . /p /div &c Sofpower%html5 markup-43
' Style Length Units em—the font-size of the current font ex—the x-height of the current font ch—the size of 0 (zero) of the current font&c Sofpower%html5 markup-44
' ColorsColor values in style properties can be a color name such asmagenta or darkblue. Currently there are about 150 color namesdefined in CSS.Color values can also be given in a number of standard notations,including RGB (red-green-blue) and HSL(hue-saturation-lightness):1. #rrggbb—where the first two, middle two, and last two of thesix hexadecimal digits specify red, green, and blue values,respectively (e.g., #0ace9f). This is 24-bit color.2. #rgb—shorthand for the above notation when the first two,middle two, and last two digits are the same (e.g., #03c standsfor #0033cc).&c Sofpower%html5 markup-45
' 3. rgb(r , g , b )—where base-10 integers between 0 and 255inclusive are used (e.g., rgb(0,204,108)). This is the decimalequivalent of notation 1.4. rgb(r %, g %, b %)—where integral percentages are used forthe three color components.5. hsl(h , s %, l %)—where h (in 0–360 degrees) indicates thehue on the color wheel.6. rgba(r , g , b , a)—adding an alpha opacity value tonotation 2 where a is a decimal point value with a range of 0(totally transparent) to 1 (totally opaque). An rgb(.) valuein notation 2 is the same as rgba(., 1).7. rgba(r %, g %, b %, a)—adding an alpha opacity value tonotation 4 in the same way.8. hsla(h , s %, l %, a)—adding an alpha opacity value tonotation 5.&c Sofpowerhtml5 markup-46%
' The Color Wheel&c Sofpower%html5 markup-47
' Font font-sizefont-family: Timesfont-family: Arial, Helvetica, sans-serifDemo: Ex: FontFamily&c Sofpower%html5 markup-48
' Some Fonts&c Sofpower%html5 markup-49
' Generic Font Families serif—for example, Times sans-serif—for example, Arial or Helvetica cursive—for example, Zapf-Chancery fantasy—for example, Western monospace—for example, Courier&c Sofpower%html5 markup-50
' Font ght:normalboldbolderlighter&c Sofpower%html5 markup-51
' Relative Font eAbsolute Font Sizes pt (points; 1 pt 1/72 in.) pc (picas; 1 pc 12 pt)&c Sofpower%html5 markup-52
' Modifying Font Sizes smaller larger xx% (a percentage of the current font size)&c Sofpower%html5 markup-53
' Itemized Lists Bullet list: The ul element provides an unordered list wherethe ordering of the items is unimportant. A ul is usuallypresented as a set of bulleted items. Ordered list: The ol element offers a numbered list where theordering of the items is important. An ol is typically displayedas a sequence of enumerated items. Definition list: The dl element is handy for a definition listwhere each term ( dt ) is given a definition or description( dd ).&c Sofpower%html5 markup-54
' ul li Tropical Fruits ol li Pineapple /li li Banana /li li papaya /li /ol /li li Cereals ol li Barley /li li Rice /li li Wheat /li /ol /li li Vegetables ol li Broccoli /li li Onion /li li Yam /li /ol /li /ul Demo: Ex: List&c Sofpower%html5 markup-55
' Lists&c Sofpower%html5 markup-56
' A Definition List&c Sofpower%html5 markup-57
' dl dt style "font-style: italic" HTML5 /dt dd Hypertext Markup Language, a W3C Standard br / br / /dd dt style "font-style: italic" PHP /dt dd The Hypertext Preprocessor, a popularactive-page language br / br / /dd dt style "font-style: italic" MySQL /dt dd A freely available relational database system /dd /dl Demo: Ex: Defs&c Sofpower%html5 markup-58
' List Styles ul style "list-style-type: circle" . /ul ol style "list-style-type: upper-alpha" . /ol p The following list has inside positioning /p ul style "list-style-position:inside" li style "list-style-type: square; color: green" span style "color: black" First item in the listwith a green square marker. /span /li li style "list-style-type: square; color: red" span style "color: black" Second item in the listwith a red square marker. /span /li li style "list-style-type: square; color: blue" span style "color: black" Third item in the list&c Sofpowerhtml5 markup-59%
' with a blue square marker. /span /li /ul list-style: circle insideDemo: Ex: MarkerStyle&c Sofpower%html5 markup-60
' Links in Webpages a href "URL" anchor /a a href "bio.html" Brief Bio /a a href "http://www.w3.org/" The W3C Consortium /a a href "./pic/dragonfly.jpg" type "image/jpeg"title "dragonfly.jpg" Picture of Dragonfly /a a href "sound/cthd.mp3" type "audio/mpeg" Tan Dun, Yo Yo Ma - Crouching Tiger,Hidden Dragon - Theme /a &c Sofpower%html5 markup-61
' In-page Links h3 id "products" Our Quality Products /h3 a href "URL#products" . /a article nav ul li a href "#product" Products /a /li li a href "#service" Services /a /li li a href "#testimonial" Testimonials /a /li /ul /nav section h3 id "product" Our Quality Products /h3 .&c Sofpower%html5 markup-62
' /section section h3 id "service" Responsive Services /h3 . /article &c Sofpower%html5 markup-63
' Site Internal and External Links Is clearly indicated as going off site. Often a webpage willinclude external links, such as references and advertisements, inan aside element displayed on the right-hand side of the page. Is displayed in a new browser window or tab so the visitor cancome back by closing that new window or tab. A simple way isto use the attribute target " blank" to cause the referencedpage to display in a new window/tab: a href "http://www.w3.org/" target " blank" The W3C Consortium /a &c Sofpower%html5 markup-64
' Site Organization and Navigation Organize the pages for a site into a hierarchy of files anddirectories (folders) stored on the hard disk of the server host.Avoid nonalphanumeric characters in file and directory names.Otherwise, the file name must be URL encoded beforebecoming part of a URL. Place the site entry page (usually, index.html) in the serverroot directory. Use subdirectories such as images/, videos/, css/ (for stylesheets), js/ (for JavaScript code), products/, services/,contractors/, members/, and affiliates/ to organize thesite. The index.html page within each subdirectory is usuallythe lead page for that part of the site.&c Sofpowerhtml5 markup-65%
' Keep the organization simple and avoid using more than threelevels of subdirectory nesting. Design a navigation system that is clear, easy to use, andeffective in getting visitors where they want to go in your site. Use relative URLs exclusively for linking within the site andmake sure the link is in one of these forms:1. Relative to the host page itself (href "file" orhref "dir/file")2. Relative to the server root (href "/path-to-file")&c Sofpower%html5 markup-66
' Content-Only PagesIn creating the content-only site, consider establishing pages withthese parts:1. Major navigation—Links to the main page, and first-levelpages. If the top banner of a page includes a logo of thebusiness or site, link the logo image to the site entry (mainpage).2. Minor navigation—Links to subpages of this page and links todirectly related sibling pages.3. In-page navigation —Links to parts of this page whenappropriate.4. Draft page content—Includes text, pictures, and other mediatypes.&c Sofpowerhtml5 markup-67%
' Linking to Services Email links—A link in the form a href "mailto:email-address?SUBJECT line" tells the browser to launch a program to send email to thegiven address using the indicated subject line. The subject line(from ? on) is optional. For example, a href "mailto:pwang@cs.kent.edu?SUBJECT Web%20Design%20and%20Programming" contact Paul /a Note spaces (%20) and other nonalphanumeric charactersshould be URL encoded. Generally, the mailto URL may havezero or more & separated header value pairs. Useful headersinclude to (additional recipient address), cc, and body(message body). For example,&c Sofpowerhtml5 markup-68%
' a href "mailto:wdpgroup-request@cs.kent.edu?SUBJECT join&BODY subscribe" Joint web designand programming email listserv group /a provides an easy way to join a listserv. Download links—A link in the form a href "ftp:host:port/path-to-file" tells the browser to launch an FTP program to connect to thegiven host and to download the specified file by anonymousFTP. This is useful for downloading large files such as programsand compressed (ZIP or GZIP) files. If port is not given, thenthe standard port 21 for FTP is assumed. For example,Download a href "ftp://monkey.cs.kent.edu/file.zip" code file.zip /code /a (35439 bytes).An FTP URL can also supply username, password, and filelocation information for file retrieval.&c Sofpowerhtml5 markup-69%
' Telephone/SMS/Fax links—Links in these forms a href "tel:phone number" a href "sms:phone number" a href "fax:phone number" are useful for mobile phone and tablet devices. VOIP call links—A link in the form a href "callto:screen name or phone number" TMasks the browser to launch Skypeor a similar program tomake voice-over-IP calls or to conduct voice/video conference.&c Sofpower%html5 markup-70
' Display Style for Links Visual browsers pay special attention to the presentation oflinks. Usually, different display styles are used to indicatewhether a textual link is not visited yet, under the mouse(hover), being clicked (active), or visited already (visited). Browsers settings define default colors for links. An image anchoring a link may by default be displayed with adistinct border. The appearance of links can be controlled by style settings. Web users are accustomed to seeing links underlined.Therefore, avoid underlining regular text because it can causeconfusion. Image links, on the other hand, are almost alwayspresented without the any border. Web users understand that&c Sofpowerhtml5 markup-71%
' clicking an image often leads to another page. A consistent set of link styles and colors is important for sitedesign. Style sheets give you much control over&c Sofpower%html5 markup-72
' A Sample Navbar&c Sofpower%html5 markup-73
' header section style "margin-left: 50px" h1 SuperStore.com /h1 h3 Shop and Save /h3 /section nav style "background-color: darkgrey;padding-left: 40px" a style "color:#fff; margin:10px" href "gr/" Groceries /a a style "color:#fff; margin:10px" href "hw/" Hardware /a a style "color:#fff; margin:10px" href "au/" Automotive /a a style "color:#fff; margin:10px" href "of/" Office Supply /a /nav /header Demo: Ex: Navbar&c Sofpower%html5 markup-74
' Pictures and Images in Webpages img src "hat.jpg" alt "A nice hat"style "width:160px; height:200px" / A Clickable Image&c Sofpower%html5 markup-75
' a title "Go to Paul’s homepage"href "http://www.cs.kent.edu/ pwang" img src "http://www.cs.kent.edu/ pwang/paul.jpg"alt "photo of the author Paul S. Wang"/ /a Demo: Ex: ImgLink&c Sofpower%html5 markup-76
' Text around Images p For this green monkey, the new Chevy Volt is just img src "2012volt.jpg" alt "My dream 2012 Chevy Volt"height "110" style "float: left;margin-right: 1em; margin-bottom: 8px;margin-top: 8px" / the car I have been waiting for. . /p p I love this car. On a recent trip to . /p Demo: Ex: Float&c Sofpower%html5 markup-77
' Text Around an Image&c Sofpower%html5 markup-78
' Text Clearing ImageDemo: Ex: FloatClear&c Sofpower%html5 markup-79
' Image Alignment within A LineHere is some text and animage img src "URL" style "vertical-align: baseline" / vertical-align:baseline—Aligns baselines of image and text. vertical-align: middle—Aligns middle of image with middle ofx character in preceding text. vertical-align:preceding text.text-top—Aligns top of image with font top of vertical-align: text-bottom—Aligns bottom of image with fontbottom of preceding text. vertical-align: xx %—Raises the bottom o
HTML5 combines the XHTML, HTML 4, and CSS3 standards, introduces new elements and APIs, as well as incorporates MathML (Mathematical Markup Language) and SVG (Scalable Vector Graphics) into HTML. HTML5 can also easily be written in an XML compliant way. The release
