HTML Introduction - PowerPoint PPT Presentation

html introduction n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML Introduction PowerPoint Presentation
Download Presentation
HTML Introduction

play fullscreen
1 / 35
HTML Introduction
168 Views
Download Presentation
renardo
Download Presentation

HTML Introduction

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. HTML Introduction

  2. What we will cover… • Understanding the first html code… • Tags • two-sided tags • one-sided tags • Block level elements • paragraphs • headings • block quote • lists • inline elements • empty elements Lecture 7

  3. First HTML code <html> <head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body> </html> We will start with this simple code. Lecture 7

  4. First HTML code Title of the html document Body of the html document Complete html document Lecture 7

  5. <html> <head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body> </html> Tags • HTML document • Consists of tags • Tags - core building block of HTML • marks the presence of an element • marks the “start” and “end” of an element • Two-sided tags vs. single-sided tags • General syntax for two-sided tags <tag> content </tag> Opening tag Closing tag Lecture 7

  6. More about tags • special terms surrounded by angle brackets • can be upper, lower or mixed case <TITLE> Math 279 </TITLE> <title> Math 279 </title> <TitLe> Math 279 </tiTlE> are all ok • most tags come in pairs, some don’t Lecture 7

  7. HTML tags • <HTML> … </HTML> • tells browser that file contains HTML-coded information • Anything between these two tags makes up the document content, including all other elements, text, and comments Lecture 7

  8. The Structure of an HTML File An HTML document is divided into two main elements: the head and the body head element contains info about the document, for example, the document title or the keywords <HEAD> … </HEAD> represents the head tags The content of the head element is not displayed within the Web page Lecture 7

  9. Title tags • <TITLE> … </TITLE> • used inside <HEAD> … </HEAD> • identify document title • displayed in the title bar at top of browser window • identifies your page for search engines Lecture 7

  10. Body tags • <BODY> … </BODY> • start and end the actual contents (body) • The body element contains all of the content to appear on the Web page • HTML, HEAD, TITLE and BODY are four most basic tags in any html document Lecture 7

  11. Adding Comments – special tag • The comment tag adds notes to your HTML code <!-- comment --> • Comments can be spread over several lines • Comments are useful in documenting your HTML code for yourself and others Lecture 7

  12. (1) Do it yourself! <html> <head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body> </html> • Add the texts as comments to the first html code • Author: Firstname Lastname • Last modified Date: Feb 22, 2010 Lecture 7

  13. Block-Level Elements • Block-level elements - distinct blocks within the body • Enhance • Readability • Presentation of the web page • Similar to a technical document • Document title, section title, section text, paragraphs etc. • Most generic and popular • Paragraphs • Headings Lecture 7

  14. Paragraphs and Headings • Paragraphs • <P>…</P> • Headings • <H1>…</H1>, <H2>…</H2>, …, <H6>…</H6> • six levels of headings • H1 is largest • H6 the smallest size Lecture 7

  15. Recap the First HTML code <html> <head> <TITLE>Lastname, Firstname</TITLE> </head> <body> <H1>Welcome to My Homepage.</H1> </body> </html> Lecture 7

  16. (2) Do it yourself! • add another level of heading: <h2>…</h2> to the existing page • add two paragraphs • and execute the html file using your web browser! Lecture 7

  17. How to insert white spaces before and after the texts? How to insert texts in such indented manner? Lecture 7

  18. Block Quote • The syntax for making an extended quote is • <blockquote>…</blockquote> • A browser inserts white space before and after a blockquote element. Lecture 7

  19. Block Quote <blockquote> <p>Computer Networking: A top down approach, 5th ed. Addison-Wesley by Kurose and Ross, ISBN-10: 0136079679 | ISBN-13: 978-0136079675</p> <p>HTML A Beginner's Guide, 4th Edition, by Wendy Willard, ISBN-13: 9780071611435</p> <p>New Perspectives on HTML and XHTML: Comprehensive, 5th Edition, by Patrick M. Carey, ISBN-10: 1423925467 | ISBN-13: 9781423925460</p> </blockquote> Lecture 7

  20. Blockquote indents the texts but what if we want a list of items? Lecture 7

  21. List tags • unordered list • Also known as bulleted list <ul> … </ul> • Try inserting an unordered list in your html code! Lecture 7

  22. Adding a List • HTML supports three kinds of lists: • unordered • ordered, and • definition • Unordered list for items that do not need to occur in any special order • Ordered list for items that must appear in a numerical order • Definition list for definition items Lecture 7

  23. Adding lists • unordered list (bulleted list): • <ul> … </ul> • ordered list (enumerated list): • <ol> … </ol>: • <li>…</li>: specify each list item for both unordered and ordered lists • definition list: <dl>…</dl> • a list of definitions • <dt>…</dt>: definition term • <dd>…</dd>: definition description Lecture 7

  24. Example for list tags <html> <head> <TITLE>Example for list tags</TITLE> </head> <body> Three kinds of lists are <ul> <li>unordered list</li> <li>ordered list </li> <li>definition list </li> </ul> <ol> <li>unordered list</li> <li>ordered list </li> <li>definition list </li> </ol> <dl> <dt>unordered list:</dt> <dd>shows bullets</dd> <dt>ordered list:</dt> <dd>shows number</dd> <dt>definition list:</dt> <dd>lists definitions</dd> </dl> </body> </html> Creates definition list Creates bulleted list Creates numbered list Lecture 7

  25. Other block-level elements - address • HTML supports the address element to indicate contact info. <address> … </address> • Most browsers display an address element in an italicized font e.g. <address> John Jay College of Criminal Justice, New York, NY 10019 </address> Lecture 7

  26. Block-Level Elements at a glance… Lecture 7

  27. Working with inline elements • Inline element: marks a section of text within a block-level element • Often used to format characters and words • Also referred to as character formatting elements • <b>,…,</b>: boldface element • <i>,…,</i>: italicizes any text inside Lecture 7

  28. Make the text bold and italicized Lecture 7

  29. Working with Empty Elements • An empty element contains no content • Empty elements appear in code as one-sided tags • General syntax • <element /> • line break • <br /> • horizontal line • <hr /> Lecture 7

  30. Insert a horizontal line in between two paragraphs Lecture 7

  31. What if I decide to change the style of the text inside the Tags? Lecture 7

  32. Attributes in Tags Lecture 7

  33. Attributes in tags • Attribute - a property of an HTML element (tag) • Control appearance of elements in the document • consists of • attribute_name and • attribute_value • used with opening tag • General syntax <element attribute_name=“value1”>content</element> Lecture 7

  34. The Attributes • Example: ALIGN attribute attribute_name: ALIGN atribute_value: LEFT | CENTER | RIGHT <H1>Welcome to MAT 279</H1> <H1 ALIGN = “CENTER”>Welcome to MAT 279</H1> • More recent, style attribute Lecture 7

  35. The style attribute • controls how the browser displays an element • used with opening tag • syntax <elementstyle=“rules” … > content </element> • rules • a set of style rules • entered by specifying a style name followed by a colon and then a style value style=“name1:value1; name2:value2; …” • e.g. <h1 style=“text-align:center”>Welcome to MAT 279</h1> <h1 style=“color: blue”>Welcome to MAT 279</h1> <h1 style=“text-align:center; color:blue”>Welcome to MAT 279</h1> Lecture 7