1 / 15

HTML Introduction (cont.)

HTML Introduction (cont.). First Example. <html> <head> <TITLE> A Simple HTML Example </TITLE> </head> <body> <H1>Welcome to Math 279</H1> <P>Math 279 is fun! This is the first paragraph.</P> <P>And this is the second paragraph.</P> </body> </html>.

celeste-albert
Download Presentation

HTML Introduction (cont.)

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 (cont.) Lecture 6, MAT 279, Fall 2009

  2. First Example <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>Welcome to Math 279</H1> <P>Math 279 is fun! This is the first paragraph.</P> <P>And this is the second paragraph.</P> </body> </html> Lecture 6, MAT 279, Fall 2009

  3. For my information only, I do not want to display this in the webpage First Example <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>Welcome to Math 279</H1> <P>Math 279 is fun! This is the first paragraph.</P> <P>And this is the second paragraph.</P> <P>HTML structure must have head and body tags.</P> </body> </html> Lecture 6, MAT 279, Fall 2009

  4. How to comment • <!--, …, -->, comment tag • <!-- anything inside a comment tag is ignored by the web browsers --> • Important for documenting your html files Lecture 6, MAT 279, Fall 2009

  5. How about making lists in the page? I want to create a small HTML tutorial, e.g., HTML has many Tags: • HTML tags • Head tags • Title tags • Body tags Lecture 6, MAT 279, Fall 2009

  6. 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 6, MAT 279, Fall 2009

  7. Example for list tags <html> <head> <TITLE>Example for list tags</TITLE> </head> <body> Three kinds of tags are <ul> <li>HTML tags</li> <li>Head tags</li> <li>Body Tags</li> </ul> <ol> <li>HTML tags</li> <li>Head tags</li> <li>Body Tags</li> </ol> <dl> <dt>HTML tags:</dt> <dd>support begin and end of html document</dd> <dt>Head tags:</dt> <dd>support header information</dd> <dt>Body tags:</dt> <dd>support main information in the webpage</dd> </dl> </body> </html> Lecture 6, MAT 279, Fall 2009

  8. Back to First Example You want to make the text bold <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>Welcome to Math 279</H1> <P>Math 279 is fun! This is the first paragraph.</P> <P>And this is the second paragraph.</P> </body> </html> Lecture 6, MAT 279, Fall 2009

  9. Working with inline elements • <b>,…,</b>: boldface element, darkens any text inside • How about italicize? • <i>,…,</i>: italicizes any text inside • Inline element: marks a section of text within a block-level element Lecture 6, MAT 279, Fall 2009

  10. Quick review • Four basic HTML tags… • Block-level elements • contain content viewed as distinct block within webpage • when rendered visually, start on a new line • example? • In-line elements • marks a section of text within a block-level element • example? Lecture 6, MAT 279, Fall 2009

  11. What if I decide to change the style of the text inside the Tags? Lecture 6, MAT 279, Fall 2009

  12. Attributes in Tags Lecture 6, MAT 279, Fall 2009

  13. Attributes in tags • a property of an HTML element (tag) • consists of • attribute_name and • attribute_value • used with opening tag • 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> Lecture 6, MAT 279, Fall 2009

  14. 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 6, MAT 279, Fall 2009

  15. Empty element – single Tag • an empty element contains no contents • usually one-side elements • e.g. • line break: <br /> • horizontal line: <hr /> • exercise • add line breaks between two sentences in a paragraph. • add horizontal lines after each list. Lecture 6, MAT 279, Fall 2009

More Related