Embed Size (px)
DESCRIPTION
HTML Introduction (cont.). First Example. A Simple HTML Example Welcome to Math 279 Math 279 is fun! This is the first paragraph. And this is the second paragraph. . - PowerPoint PPT Presentation
Citation preview
Lecture 6, MAT 279, Fall 2009 1
HTML Introduction (cont.)
9/17/2009
Lecture 6, MAT 279, Fall 2009
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>
9/17/20092
Lecture 6, MAT 279, Fall 2009
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>9/17/2009
3
For my information only, I
do not want to display this in the
webpage
Lecture 6, MAT 279, Fall 2009
How to comment
<!--, …, -->, comment tago <!-- anything inside a comment tag is ignored
by the web browsers -->o Important for documenting your html files
9/17/20094
I want to create a small HTML tutorial, e.g.,
HTML has many Tags:o HTML tagso Head tagso Title tagso Body tags
Lecture 6, MAT 279, Fall 2009
How about making lists in the page?
9/17/20095
Lecture 6, MAT 279, Fall 2009
Adding lists unordered list (bulleted list): <ul> … </ul> ordered list (enumerated list): <ol> …
</ol>:o <li>…</li>: specify each list item for both
unordered and ordered lists definition list: <dl>…</dl>
o a list of definitionso <dt>…</dt>: definition term o <dd>…</dd>: definition description
9/17/20096
Lecture 6, MAT 279, Fall 2009
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>
9/17/20097
Lecture 6, MAT 279, Fall 2009
Back to 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>
You want to make the text bold
9/17/20098
Lecture 6, MAT 279, Fall 2009
Working with inline elements
<b>,…,</b>: boldface element, darkens any text inside
How about italicize?o <i>,…,</i>: italicizes any text inside
Inline element: marks a section of text within a block-level element
9/17/20099
Lecture 6, MAT 279, Fall 2009 10
Quick review
Four basic HTML tags…
Block-level elementso contain content viewed as distinct block within webpageo when rendered visually, start on a new lineo example?
In-line elementso marks a section of text within a block-level elemento example?
9/17/2009
Lecture 6, MAT 279, Fall 2009 11
What if I decide to change the style of the text inside the
Tags?
9/17/2009
Lecture 6, MAT 279, Fall 2009 12
Attributes in Tags
9/17/2009
Lecture 6, MAT 279, Fall 2009 13
Attributes in tags
a property of an HTML element (tag) consists of
o attribute_name and o attribute_value
used with opening tag Example: ALIGN attribute
o attribute_name: ALIGNo atribute_value: LEFT | CENTER | RIGHT o <H1>Welcome to MAT 279</H1>o <H1 ALIGN = “CENTER”>Welcome to MAT 279</H1>
9/17/2009
Lecture 6, MAT 279, Fall 2009 14
The style attribute controls how the browser displays an element used with opening tag syntax
<element style=“rules” … > content </element> rules
o a set of style ruleso entered by specifying a style name followed by a colon and
then a style valuestyle=“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>
9/17/2009
Lecture 6, MAT 279, Fall 2009 15
Empty element – single Tag an empty element contains no contents usually one-side elements e.g.
o line break: <br />o horizontal line: <hr />
exerciseo add line breaks between two sentences in a paragraph.o add horizontal lines after each list.
9/17/2009
