1 / 38

INT222 – Internet Fundamentals

INT222 – Internet Fundamentals. Week 3: Introduction to HTML. Outline. Document structure/overview Important elements and using them. What is HTML.

marcin
Télécharger la présentation

INT222 – Internet Fundamentals

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. INT222 – Internet Fundamentals Week 3: Introduction to HTML

  2. Outline • Document structure/overview • Important elements and using them

  3. What is HTML • HTML (HyperText Markup Language) is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. • Hypertext is text with hyperlinks. • The markup tells the Web browser how to display a Web page's words and images for the user. • The markup indicators are often called “tags”, which are enclosed in angle brackets • e.g. <h1>. • Most html tags come in pairs - e.g. <h1> and </h1> • <h1> being the opening of the tag and • </h1> being the closing of the tag. • In between these tags you can add text-basedcontent. • There are some tags that are not paired – these tags are know as empty tags, such as <img />

  4. Tags vs. Elements vs. Attributes The terms tag, element & attribute are used throughout the web site. You should note the difference between these terms. • HTML elements: • Html documents are defined by HTML elements , and • An HTML Element is everything from the start tag to the end tag, e.g. <p>Some text</p> - is referred to as an element, including starting tag - content - ending tag • <p> and </p> - are referred to as tags.

  5. Tags vs. Elements vs. Attributes • <p class="....">Some text</p> • class is an attribute • An attribute is used to define the characteristics of an element, and it is placed inside the opening tag. • All attribute are made up 2 parts: a name and a value.

  6. HTML Tags/Element Categories HTML tags are classified in three different categories: • Block-level: • A block-level tag is a tag that creates large blocks of content like tables (<table>) or page divisions (<div>). • e.g. <p>, <h1>, <ul>, <hr>, <dl>, … • They start new lines of text when you use them, and • They can contain other block tags as well as inline tags and text.

  7. HTML Tags/Element Categories • Inline-level • An inline tag is a tag that defines the text or data in the document like STRONG(<strong>) makes the enclosed text strongly emphasized. • e.g. <span>, <a>, <img>, <td>, <b>, <em>, <input>, … • Inline tags don't start new lines when they are used, and • they generally only contain other inline tags and text or data.

  8. HTML Tags/Element Categories • Empty • Empty tags do not have closing tags or they are not paired. • An empty tag does not contain any text/content. • Empty tags are simply used as markers. • In some cases empty tags are used for whatever is contained in their attributes. • The <br />, <img />, <input />, <meta /> tags are a few examples of empty tags.

  9. Document Type Definition (DTD) • A document type definition (DTD) is a set of markup declarations that define a document type for an SGML-family markup language (SGML, XML, HTML).

  10. Document Type Definition Example HTML Document Structure Examples - DoctypeDeclarations List: • Basic HTML document structure • Basic xHTML 1.0 Strict document structure • Basic xHTML 1.0 Transitional document structure • Basic xHTML 1.0 Frameset document structure • Basic HTML5 document

  11. Basic HTML document structure <html> <head> <title>INT222</title> </head> <body> <h1>HTML Document Structure</h1> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body> </html>

  12. Basic xHTML 1.0 Strict document structure <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>INT222</title> </head> <body> <h2>xHTML Document Structure</h2> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body> </html>

  13. Basic xHTML 1.0 Transitional document structure <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>INT222</title> </head> <body> <h2>xHTML Document Structure</h2> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body> </html>

  14. Basic xHTML 1.0 Frameset document structure <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>INT222</title> </head> <frameset cols="40%,60%"> <frame name="frame1" src="../int222/f1.html" /> <frame name="frame2" src="../int222/f2.html" /> </frameset> </html>

  15. Basic HTML5 document <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>INT222</title> </head> <body> <h2>HTML5 Document Structure</h2> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body> </html>

  16. HTML5 document structure <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Try it</title> </head> <body> <header> <h1>HTML5 Document Structure</h1> </header> <nav> <ul> <li><a href="https://scs.senecac.on.ca">ICT</a></li> <li><a href="http://www.senecac.on.ca">Seneca College</a></li> </ul> </nav> <article> <section> <p>An article can have multiple sections</p> </section> </article> <aside> <p>This is aside part of the web page</p> </aside> <footer> <p>This is the footer</p> </footer> </body> </html>

  17. Basic HTML Document Presentation • Basic HTML document (browser default) • Basic HTML document (No browser default) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>INT222</title> <link rel="stylesheet" href="reset.css" type="text/css" media="screen" /> </head> <body> <h1>Heading - the h1 tag</h1> <h2>Heading - the h2 tag</h2> <p>This is a paragraph - the p tag</p> <p>Unolrdered list</p> <ul> <li>item 1</li> <li>item 2</li> </ul> <table> <tr> <th>Column heading 1</th> <th>Column heading 2</th> </tr> <tr> <td>Item 1</td> <td>Item 2</td> </tr> </table> </body> </html>

  18. Recommended list of Doctype declarations • World Wide Web Consortium (W3C) Doctype declarations • HTML5specification

  19. Why html then xhtml and now html5? • The history of HTML: http://www.rackspace.com/blog/internet-history-html-evolution/

  20. Basic HTML Tags

  21. HTML Heading Tags HeadingsHeadings with reset

  22. p, blockquote, pre, br, hr tags Paragraphs & more

  23. Presentation Tags Presentation tags -1-Presentation tags -2- * use CSS instead

  24. HTML List Tags Three types of list tags in HTML: • Unordered lists • Ordered lists • Definition lists

  25. Unordered lists • The <ul> tag displays an unordered bulleted list. You can use CSS (list-style-type property) to control the bullet style. • The <li> tag is used to designate the individual list items in the list. • Both the <ul> and the <li> require a closing tag (</ul> and </li>).

  26. Ordered lists • The <ol> tag displays an ordered list. You can use CSS (list-style-type property) to control the sequence style. • The <li> tag is used to designate the individual list items in the list. • Both the <ol> and the <li> require a closing tag (</ol> and </li>).

  27. Definition lists • The <dl> encloses a definition list. • A definition list contains terms, which are defined with the <dt> tag, and descriptions, which are defined with the <dd> tag. • The <dl>, <dt> and the <dd> require a closing tag (</dl>, <dt> and </dd>). • By default, a browser will align terms on the left and indents each definition on a new line. • The intent of a definition list is to display lists of terms and their corresponding descriptions, such as in a glossary.

  28. Definition lists

  29. Nested lists • Ordered lists and Unordered lists can be nested - a combination of the two can also be nested. • Each level will indented. • Nested lists may look complicated however you just need remember the basic structure for ordered and unordered lists.

  30. Hyperlinks & Anchor • The HTML <a> Element (or the HTML Anchor Element) defines a hyperlink, the named target destination for a hyperlink, or both. • A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document or another part of the same document. • Basic HTML link (anchor) format: <a href="URL.................">text</a>

  31. Hyperlinks • Absolute link <a href="https://scs.senecac.on.ca/~facultyname">John Doe's Website</a> • Relative link • The links should be relative to the location of the current document. e.g. <a href="xxxxx.html">Text...text</a> <a href="../xxxxx.html">Text...text</a> <a href="info/xxxxx.html">Text...text</a>

  32. Hyperlinks • Link to a particular section of an html page • To link to a specific section (int222) of a page named (xxxxx.html), it is assumed that somewhere in (xxxxx.html) the following code is available:<a id="int222"></a> • Then use an hyperlinks to link to it: <a href="xxxxx.html#int222">Text...text</a> • e.g. The link here is a absolute link to an HTML document: <a href=" https://zenit.senecac.on.ca/~emile.ohan/int222/examples/anchor/href-relative.html#tests "> and links to the “tests” id

  33. Hyperlinks • Link to a particular section in current page • To link to a specific section (top) in the current html, it is assumed that somewhere in current html document the following code is available <a id="top"></a> <a href="#top">Top</a>

  34. Hyperlinks • E-mail link <a href="mailto:demo@myseneca.on.ca">Text ...text</a> • Image link <a href="xxxxx.html"> <imgsrc="action.gif" alt="Text..." /> </a> • Target link - Not recommended <a href="xxxxx.html" target="window_name"> Text...text</a>

  35. Basic table tags

  36. Table Elements’ Attributes • A lot of these attributes have been declared as being obsolete features in HTML5. We need to use CSS instead border - applies to the table tagwidth - applies to the table, td, th tagscellspacing - applies to the table tagcellpadding - applies to the table tagcolspan - applies to the td, th tagsrowspan - applies to the td, th tagsalign - applies to the table, caption, tr, td, th tagsvalign - applies to the tr, td, th tagsNested tables

  37. Introduction to HTML (MDN) https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction • HTML element reference (MDN) https://developer.mozilla.org/en-US/docs/Web/HTML/Element • HTML attribute reference https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes • Basic Structure of an HTML5 Document http://www.coreservlets.com/html5-tutorial/basic-html5-document.html#

  38. Thank You!

More Related