introduction to html uwwd. agenda what do you need? what do you need? what are html, css, and tags?...
DESCRIPTION
What do you need? Requirements: Requirements: – Computer – Text Editor (Notepad or gedit is fine) – A web browser (to test results) What you don't need: What you don't need: – A web server (can be done on computer) – Experience in C, C++, Java, Scheme, etc.TRANSCRIPT
Introduction to HTMLIntroduction to HTMLUWWDUWWD
AgendaAgenda• What do you need?What do you need?• What are HTML, CSS, and tags?What are HTML, CSS, and tags?• html, head, and body (and title)html, head, and body (and title)• Headers and paragraphsHeaders and paragraphs• Tables, anchor links, and imagesTables, anchor links, and images• Lists (no, we do not use cons)Lists (no, we do not use cons)
What do you need?What do you need?• Requirements: Requirements: – ComputerComputer– Text Editor (Notepad or gedit is fine)Text Editor (Notepad or gedit is fine)– A web browser (to test results)A web browser (to test results)
• What you don't need:What you don't need:– A web server (can be done on computer)A web server (can be done on computer)– Experience in C, C++, Java, Scheme, Experience in C, C++, Java, Scheme,
etc.etc.
Sample HTML CodeSample HTML Code<html><html><head><head><title>Website Title Name</title><title>Website Title Name</title></head></head><body><body><h1>This is my real title</h1><h1>This is my real title</h1><p>Paragraph goes here</p><p>Paragraph goes here</p></body></body></html></html>
What is HTML?What is HTML?• HHyperyperTText ext MMarkup arkup LLanguageanguage• Defines structure of webpageDefines structure of webpage• Is a Is a markupmarkup language, not a programming language, not a programming
languagelanguage• Markup languages use markup tagsMarkup languages use markup tags• HTML uses markup tags to structure web HTML uses markup tags to structure web
pagespages
What is CSS?What is CSS?• Cascading Style SheetsCascading Style Sheets• Defines the style/layout of webpageDefines the style/layout of webpage• CSS is stored in stylesheets, either internal CSS is stored in stylesheets, either internal
or externalor external• Will be introduced next week Will be introduced next week
What is a tag?What is a tag?• Lower-case keywords surrounded in angle Lower-case keywords surrounded in angle
brackets, ie. <html>brackets, ie. <html>• Come in pairs, ie. <title> and </title>Come in pairs, ie. <title> and </title>• First tag opens, second closes, can be First tag opens, second closes, can be
nestednested• Some tags contain attributes, provides Some tags contain attributes, provides
additional information, ie. <a additional information, ie. <a href="/index.html">href="/index.html">
• Elements are content between the tagsElements are content between the tags• Example,Example,– <p class="text"><i>This is <p class="text"><i>This is
text.</i></p>text.</i></p>
html, head, bodyhtml, head, body• html tag defines whole documenthtml tag defines whole document– <html> opens and </html> closes<html> opens and </html> closes
• body tag is container for content of HTMLbody tag is container for content of HTML– <body> opens and </body> closes<body> opens and </body> closes– Many tags will be nested insideMany tags will be nested inside
• head tag is container for head elementshead tag is container for head elements– <head> opens and </head> closes<head> opens and </head> closes– head elements include script, title, etc.head elements include script, title, etc.
The title TagThe title Tag• <title>UW Webdesigners Club</title><title>UW Webdesigners Club</title>• It is used...It is used...– For the title on the top of your browserFor the title on the top of your browser– As the title for your favouritesAs the title for your favourites– For the title search engines use upon For the title search engines use upon
indexing your siteindexing your site• Required for all valid (standardized) xHTML Required for all valid (standardized) xHTML
and HTML coding standardsand HTML coding standards
Headers and paragraphsHeaders and paragraphs• <hX>This is my header text</hX>, where<hX>This is my header text</hX>, where– X refers to numbers 1-6, one being most X refers to numbers 1-6, one being most
importantimportant– 1 refers to main header (used once), 2 1 refers to main header (used once), 2
refers to sub-header (used multiple refers to sub-header (used multiple times), etc.times), etc.
• Used to display on-screen title pagesUsed to display on-screen title pages• <p>This is text that is part of a <p>This is text that is part of a
paragraph</p>paragraph</p>• Used to display regular contentUsed to display regular content• Both are key in good webdesign standardsBoth are key in good webdesign standards
Exercise 1Exercise 1• Create a basic webpage with the following.Create a basic webpage with the following.– Title of "Test Webpage"Title of "Test Webpage"– Main header that says, "This is only a Main header that says, "This is only a
test."test."– Paragraph 1 that says, "I am currently Paragraph 1 that says, "I am currently
on a computer."on a computer."– Paragraph 2 that says, "I am thankful I Paragraph 2 that says, "I am thankful I
am not doing math."am not doing math."• Save the exercise as exercise1.html for a Save the exercise as exercise1.html for a
future exercise.future exercise.
Anchor LinksAnchor Links• <a href="<a href="http://www.google.com">Link to ">Link to
Google</a>Google</a>• Used to hyperlink element to URL Used to hyperlink element to URL
specified, as in examplespecified, as in example• mailto:[email protected] allows email linking allows email linking• http (or https) required if linking to http (or https) required if linking to
external pageexternal page
Inserting ImagesInserting Images• <img src="stuff.jpg" alt="Text" /><img src="stuff.jpg" alt="Text" />• Where stuff.jpg is the URL to image, "Text" Where stuff.jpg is the URL to image, "Text"
displayed if image link dead (required)displayed if image link dead (required)• Implicitly closedImplicitly closed• Attribute border="X" defines border length Attribute border="X" defines border length
XX• You can hyperlink an imageYou can hyperlink an image– <a href="index.html"><img <a href="index.html"><img
src="stuff.jpg" alt="Text" /></a>src="stuff.jpg" alt="Text" /></a>
TablesTables<table border="1"><table border="1"><tr><tr><td>row 1, cell 1</td><td>row 1, cell 1</td><td>row 1, cell 2</td><td>row 1, cell 2</td></tr></tr><tr><tr><td>row 2, cell 1</td><td>row 2, cell 1</td><td>row 2, cell 2</td><td>row 2, cell 2</td></tr></tr></table></table>
TablesTables• <table>, </table> define a new table<table>, </table> define a new table• <tr>, </tr> define new row<tr>, </tr> define new row• <td>, </td> define new column (elements <td>, </td> define new column (elements
of td are data)of td are data)• rowspan="X", colspan="X"rowspan="X", colspan="X"
Inserting a listInserting a listExample 1:Example 1:<ul><ul>
<li>This is an unordered list</li><li>This is an unordered list</li><li>I'm number 2!</li><li>I'm number 2!</li>
</ul></ul>Example 2:Example 2:<ol><ol>
<li>I have a number</li><li>I have a number</li></ol></ol>
Inserting a listInserting a list• <ul>, </ul> define unordered lists <ul>, </ul> define unordered lists
(bullets)(bullets)• <ol>, </ol> define ordered lists (numbers)<ol>, </ol> define ordered lists (numbers)• <li>, </li> define an element on list<li>, </li> define an element on list• Used to define listsUsed to define lists
Exercise 2Exercise 2• Using Exercise 1, below the second Using Exercise 1, below the second
paragraph,paragraph,– Create a subheader (h2) called "My Create a subheader (h2) called "My
Grocery List"Grocery List"– Create a list which contains apples, Create a list which contains apples,
oranges, and grapes.oranges, and grapes.– Create a 2x2 table with the following Create a 2x2 table with the following
elements.elements.Cat Dog
Frog Sheep
What comes next?What comes next?• Learn new tags!Learn new tags!– http://www.w3schools.comhttp://www.w3schools.com
• Play around with HTMLPlay around with HTML– Try learning how dd/dt, meta tags workTry learning how dd/dt, meta tags work
• Next Week: Introduction to CSS, more Next Week: Introduction to CSS, more HTML tagsHTML tags