1 / 35

HTML Introduction

HTML Introduction. 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. First HTML code. <html> <head> <TITLE>Lastname, Firstname</TITLE> </head>

renardo
Télécharger la présentation

HTML Introduction

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. 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

More Related