9/16/20 SUPPLEMENT WEB DESIGN OVERVIEW 1 1 A T T R I B U T E S W H A T I S H T M L ? Hypertext Markup Language E L E M E N T S C O N T E N T 2 2 1
9/16/20 S A M P L E H T M L C O D E : <a href=“http://www.com205.safiredesign.com”> COM 205 Multimedia Applications </a> 3 3 Continuity is key! I N C O R R E C T C O R R E C T 4 4 2
9/16/20 Headings Paragraphs Blockquotes & Code E L E M E N T S O V E R V I E W Elements Anchors of Success Lists Tables Forms Inline Style Elements 5 5 E L E M E N T S O V E R V I E W • 6 heading elements included in HTML. Headings • Meant to convey meaning to the user. • Treated correctly regardless of style. • Search engines place importance on the text between heading tags. 6 6 3
9/16/20 R E N D E R E D H T M L S A M P L E C O D E : H E A D I N G S <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> 7 E L E M E N T S O V E R V I E W • Paragraphs: Building blocks of the page Paragraphs, • Blockquotes: Used for quotations Quotes & Code • Code: used for code examples 8 8 4
9/16/20 R E N D E R E D H T M L S A M P L E C O D E : P A R A G R A P H S , Q U O T E S & C O D E <p>Cupcake ipsum dolor sit amet sweet roll. Cake chocolate chocolate pie sesame snaps chocolate pastry cheesecake.</p> <blockquote> Cake icing danish. Cake danish gummies sweet jelly-o bear claw. </blockquote> <code> .class-name {color: red;} </code> 9 • Anchor tags allows us to create links that point to other pages, media, files or specific E L E M E N T S O V E R V I E W sections of a web page. Anchors • The Anchor tag has 4 different states: o Link: normal state o Visited: after link has been clicked o Hover: when moused over o Active: when pressed 10 10 5
9/16/20 R E N D E R E D H T M L S A M P L E C O D E : A N C H O R S <a href=“https://mywebpage.com”> My Page </a> My Page <p> Click on the links below to view Slide-share Click on the links below to view Slideshare or or Prezi versions of the presentations we have Prezi versions of the presentations we have reviewed in class. You can also download the reviewed in class. You can also download the PDF notes to help you study. If you do not PDF notes to help you study. If you do not have have Acrobat Reader, you can Acrobat Reader, you can download it here. <a href="https://get.adobe.com/reader/" target="_blank">download it here</a>. </p> 11 E L E M E N T S O V E R V I E W • Ordered Lists • Unordered • Definition 12 12 6
9/16/20 R E N D E R E D H T M L S A M P L E C O D E : O R D E R E D L I S T S <ol> 1. Ordered Lists are used for step by step instructions. <li> Ordered Lists are used for step by 2. List items can have either letters, numbers or step instructions. roman numerals. </li> <li> List items can have either letters, numbers or roman numerals. </li> </ol> 13 R E N D E R E D H T M L S A M P L E C O D E : U N O R D E R E D L I S T S <ul> Unordered lists are used for generic • <li> lists of items. Unordered lists are used for generic They can be styled with CSS • lists of items. Default style is a bulleted list. • </li> Can be used for navigation. • <li>They can be styled with CSS </li> <li>Default style is a bulleted list.</li> <li>Can be used for navigation. </li> </ul> 14 7
9/16/20 R E N D E R E D H T M L S A M P L E C O D E : D E F I N I T I O N L I S T S Definition Lists <dl> Used to provide a relationship between <dt>Definition Lists</dt> term/definition pairs. <dd> Used to provide a relationship between Styling Capabilities These can be easily styled using CSS. term/definition pairs. </dd> <dt>Styling Capabilities</dt> <dd> These can be easily styled using CSS. </dd> </dl> 15 E L E M E N T S O V E R V I E W • Tables are used to markup tabular data Tables like calendars, spreadsheets, charts, and schedules. • Made up of rows and columns 16 16 8
9/16/20 R E N D E R E D H T M L S A M P L E C O D E : T A B L E S <table cellspacing="1" cellpadding="3" border="1"> <tr> <th>Film</th> <th>Release Date</th> </tr> <tr> <td> Episode IV: A New Hope </td> <td>1977</td> </tr> <tr> <td>Episode V: The Empire Strikes Back</td> <td>1980</td> </tr> <tr> <td>Episode VI: Return of the Jedi</td> <td>1983</td> </tr> </table> 17 • Forms are used to collect data from users. E L E M E N T S O V E R V I E W • Forms can contain a combination of html Forms elements like: o Radio buttons o Checkboxes o labels o Input boxes o buttons 18 18 9
9/16/20 R E N D E R E D H T M L S A M P L E C O D E : F O R M S <form method="post" action=""> <label for="email">Email:</label> <input type="text" name="email" id="email" /> <input type="submit" name="submit" value="Go" /> </form> 19 E L E M E N T S O V E R V I E W • Used within the HTML document to Inline add style to the text. Style Elements • Choose strong and emphasized to convey the most meaning. 20 20 10
9/16/20 R E N D E R E D H T M L S A M P L E C O D E : D E F I N I T I O N L I S T S <b>Bolded Text</b> <u>Underlined Text</u> <i>Italic Text</i> <strong>Strong Text</strong> <em>Emphasized Text</em> <p>Cupcake ipsum dolor sit amet sweet roll. Cake <strong>chocolate</strong> chocolate pie sesame snaps chocolate <em>pastry</em> cheesecake.</p> 21 CSS Overview 22 22 11
9/16/20 Cascading Style Sheets (CSS) 23 23 CSS Rule Structure 24 24 12
9/16/20 This is Inline theway Embedded External 25 25 M E T H O D 1 Inline Styles <h1 style=“color: purple; font-size: 20px;”> Purple Heading </h1> 26 26 13
9/16/20 M E T H O D 2 Embedded Styles <style type=“text/css”> h1 { color: purple; font-size: 20px; } </style> 27 27 M E T H O D 3 External Style Sheets <link rel=“stylesheet” type=“text/css” href=“mystyles.css” /> O R <style type=“text/css”> @import url(mystyles.css); </style> 28 28 14
Recommend
More recommend
