Embed Size (px)
Citation preview
Web DesignWeb Design
Mr. Briggs’ ClassesMr. Briggs’ Classes
September 6-7, 2011September 6-7, 2011
Today’s ObjectivesToday’s Objectives►Create a web page using HTML code.Create a web page using HTML code.►Learn to correctly use tags and save Learn to correctly use tags and save
an HTML document in Notepad.an HTML document in Notepad.►Reading 2.3: Generate relevant Reading 2.3: Generate relevant
questions about readings on issues questions about readings on issues that can be researched.that can be researched.
HomeworkHomework► HTML test on FridayHTML test on Friday► Study all HTML notes – memorizeStudy all HTML notes – memorize► Be able to write the code for a basic web page.Be able to write the code for a basic web page.► Now that you’re all web designers, you need to read some Now that you’re all web designers, you need to read some
articles on design. Look over the following web sites. Pay articles on design. Look over the following web sites. Pay particular attention to basic HTML tags. You’ll be having particular attention to basic HTML tags. You’ll be having an HTML quiz next week.an HTML quiz next week.
►http://www.w3schools.com/html/default.asphttp://www.w3schools.com/html/default.asp►http://www.w3.org/MarkUp/Guide/http://www.w3.org/MarkUp/Guide/►http://www.utoronto.ca/web/HTMLdocs/http://www.utoronto.ca/web/HTMLdocs/
NewHTML/html_intro.htmlNewHTML/html_intro.html
Today’s Assignment (9/6/11)Today’s Assignment (9/6/11)► Review HTML basic codeReview HTML basic code► Create your first WP using HTML Code. Review Create your first WP using HTML Code. Review
notes from last Friday.notes from last Friday.► Use Notepad.Use Notepad.► Create an HTML doc. In body, explain why you Create an HTML doc. In body, explain why you
want to take this class – about 100 words.want to take this class – about 100 words.► Use the tags as explained. Include Name and Use the tags as explained. Include Name and
period in period in <TITLE><TITLE>► Create a September 2011 Folder.Create a September 2011 Folder.► Save as Save as HTML assignment 01 HTML assignment 01 folder in folder in My My
Documents. Documents.
Q’s for Q’s for The ElementsThe Elements handouthandout
1.1. Why is the header in the title bar Why is the header in the title bar important when creating a web page?important when creating a web page?
2.2. What is the purpose of using headers in What is the purpose of using headers in the body of a wp?the body of a wp?
3.3. Give 3 specific examples where both Give 3 specific examples where both numbered and bulleted lists can be used in numbered and bulleted lists can be used in a wp.a wp.
4.4. Why would you ever want to include a Why would you ever want to include a comment in your wp?comment in your wp?
5.5. When should tables be used and when When should tables be used and when should they be visible and/or invisible?should they be visible and/or invisible?
HTMLHTML
►HTML = hypertext markup language – HTML = hypertext markup language – the computer language that allows the the computer language that allows the GUI of the WWWGUI of the WWW
►Need to create HTML documents as Need to create HTML documents as purepure text documents. Use Notepad. text documents. Use Notepad.
►Start>Programs>Accessories>NotepaStart>Programs>Accessories>Notepadd
HTMLHTML
►<HTML> </HTML><HTML> </HTML>►First and last code source – signifies First and last code source – signifies
document as an HTML doc. That can document as an HTML doc. That can be viewed in a browserbe viewed in a browser
►<HEAD> </HEAD><HEAD> </HEAD>►Title of page that appears on the Title of page that appears on the
browser icon.browser icon.► Information in the HEAD does not Information in the HEAD does not
appear on the actual browser page.appear on the actual browser page.
HTMLHTML
<HTML><HTML>
<HEAD><HEAD>
</HEAD></HEAD>
</HTML></HTML>
► Remember, “Remember, “//” is called a ” is called a switchswitch and and turns offturns off the tag. the tag.
HTMLHTML
►Within the Within the <HEAD><HEAD> tags you will need tags you will need a title.a title.
<HTML><HTML>
<HEAD><HEAD>
<TITLE>This is my first web <TITLE>This is my first web page</TITLE>page</TITLE>
</HEAD></HEAD>
</HTML></HTML>
HTMLHTML
►<BODY> </BODY><BODY> </BODY>►This tag encloses all of the text and This tag encloses all of the text and
code that actually appears on the code that actually appears on the screen.screen.
HTMLHTML
<HTML><HTML><HEAD><HEAD><TITLE>This is my first web page</TITLE><TITLE>This is my first web page</TITLE><BODY>So why do I want to be in this class you ask? <BODY>So why do I want to be in this class you ask? Well I want to learn about web design. Well I want to learn about web design. I want to create web pages about music - my favorite I want to create web pages about music - my favorite
band is The Who. band is The Who. I would also like to create I would also like to create web pages about my family too.</BODY>web pages about my family too.</BODY></HEAD></HEAD></HTML></HTML>
Why use lower case tags?Why use lower case tags?
► If you want to follow the latest web If you want to follow the latest web standards, you should always use standards, you should always use lowercase tags. The World Wide Web lowercase tags. The World Wide Web Consortium (W3C) recommends Consortium (W3C) recommends lowercase tags in their HTML 4 lowercase tags in their HTML 4 recommendation, and XHTML (the recommendation, and XHTML (the next generation HTML) demands next generation HTML) demands lowercase tags. lowercase tags.
New TagsNew Tags
►<b> bold<b> bold►<h1>This is a heading</h1> <h1>This is a heading</h1> ►<h2>This is a heading</h2> <h2>This is a heading</h2> ►<h3>This is a heading</h3> <h3>This is a heading</h3> ►<h4>This is a heading</h4> <h4>This is a heading</h4> ►<h5>This is a heading</h5> <h5>This is a heading</h5> ►<h6>This is a heading</h6> <h6>This is a heading</h6>
These are different size headings.
<h1> is the largest and <h6> is the
smallest
New TagsNew Tags
►<u> underline<u> underline►<i> italicize <i> italicize ►<p> paragraph<p> paragraph►<b> line break<b> line break►<!– comment --> (your comment will <!– comment --> (your comment will
be ignored by the browser) be ignored by the browser)
New TagsNew Tags
► Include hyperlinks (external)Include hyperlinks (external)►<a> anchor – used in creating <a> anchor – used in creating
hyperlinkshyperlinks►<a href="url">Text to be displayed</a><a href="url">Text to be displayed</a>►<a <a
href="http://www.w3schools.com/">Visit href="http://www.w3schools.com/">Visit W3Schools!</a>W3Schools!</a>
►Visit W3Schools! Visit W3Schools!
New TagsNew Tags
► ImageImage►You must correctly save an image in You must correctly save an image in
your wp folder.your wp folder.►Use this tag to insert an image in your Use this tag to insert an image in your
wp.wp.►<img src="boat.gif" alt="Big Boat"> <img src="boat.gif" alt="Big Boat">
Image tagImage tag Image file name
Alternative author-
defined text
