Hypertext Markup Language E L E M E N T S C O N T E N T 2 2 1 - - PDF document

9/16/20 1

1

SUPPLEMENT

WEB DESIGN OVERVIEW

1

2 E L E M E N T S A T T R I B U T E S C O N T E N T

Hypertext Markup Language

W H A T I S H T M L ?

2

9/16/20 2

3

<a href=“http://www.com205.safiredesign.com”> COM 205 Multimedia Applications </a>

S A M P L E H T M L C O D E :

3

4

Continuity is key!

I N C O R R E C T C O R R E C T

4

9/16/20 3

5

Headings Paragraphs Blockquotes & Code Anchors Lists Tables Forms Inline Style Elements

Elements

• f Success

E L E M E N T S O V E R V I E W

5

6

Headings

E L E M E N T S O V E R V I E W

• 6 heading elements included in HTML.
• Meant to convey meaning to the user.
• Treated correctly regardless of style.
• Search engines place importance on the text

between heading tags.

6

9/16/20 4

<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> 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

7

8

Paragraphs, Quotes & Code

E L E M E N T S O V E R V I E W

• Paragraphs: Building blocks of the page
• Blockquotes: Used for quotations
• Code: used for code examples

8

9/16/20 5

<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> 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

9

10

Anchors

E L E M E N T S O V E R V I E W

• Anchor tags allows us to create links that

point to other pages, media, files or specific sections of a web page.

• The Anchor tag has 4 different states:
• Link: normal state
• Visited: after link has been clicked
• Hover: when moused over
• Active: when pressed

10

9/16/20 6

<a href=“https://mywebpage.com”> My Page </a> <p> Click on the links below to view Slide-share

• r Prezi versions of the presentations we have

reviewed in class. You can also download the PDF notes to help you study. If you do not have Acrobat Reader, you can <a href="https://get.adobe.com/reader/" target="_blank">download it here</a>. </p> 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

My Page Click on the links below to view Slideshare or Prezi versions of the presentations we have reviewed in class. You can also download the PDF notes to help you study. If you do not have Acrobat Reader, you can download it here.

11

12

Lists

E L E M E N T S O V E R V I E W

• Ordered
• Unordered
• Definition

12

9/16/20 7

<ol> <li> Ordered Lists are used for step by step instructions. </li> <li> List items can have either letters, numbers or roman numerals. </li> </ol> 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

1. Ordered Lists are used for step by step instructions. 2. List items can have either letters, numbers or roman numerals.

13

<ul> <li> Unordered lists are used for generic lists of items. </li> <li>They can be styled with CSS </li> <li>Default style is a bulleted list.</li> <li>Can be used for navigation. </li> </ul> 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

• Unordered lists are used for generic

lists of items.

• They can be styled with CSS
• Default style is a bulleted list.
• Can be used for navigation.

14

9/16/20 8

<dl> <dt>Definition Lists</dt> <dd> Used to provide a relationship between term/definition pairs. </dd> <dt>Styling Capabilities</dt> <dd> These can be easily styled using CSS. </dd> </dl> 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 Used to provide a relationship between term/definition pairs. Styling Capabilities These can be easily styled using CSS.

15

16

Tables

E L E M E N T S O V E R V I E W

• Tables are used to markup tabular data

like calendars, spreadsheets, charts, and schedules.

• Made up of rows and columns

16

9/16/20 9

<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> 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

17

18

Forms

E L E M E N T S O V E R V I E W

• Forms are used to collect data from users.
• Forms can contain a combination of html

elements like:

• Radio buttons
• Checkboxes
• labels
• Input boxes
• buttons

18

9/16/20 10

<form method="post" action=""> <label for="email">Email:</label> <input type="text" name="email" id="email" /> <input type="submit" name="submit" value="Go" /> </form> 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

19

20

Inline Style Elements

E L E M E N T S O V E R V I E W

• Used within the HTML document to

add style to the text.

• Choose strong and emphasized to

convey the most meaning.

20

9/16/20 11

<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> 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

21

22

CSS Overview

22

9/16/20 12

23

Cascading Style Sheets (CSS)

23

24

CSS Rule Structure

24

9/16/20 13

25

Inline Embedded External

This is theway

25

26

Inline Styles

M E T H O D 1

<h1 style=“color: purple; font-size: 20px;”> Purple Heading </h1>

26

9/16/20 14

27

Embedded Styles

M E T H O D 2

<style type=“text/css”> h1 { color: purple; font-size: 20px; } </style>

27

28

External Style Sheets

M E T H O D 3 <link rel=“stylesheet” type=“text/css” href=“mystyles.css” /> <style type=“text/css”> @import url(mystyles.css); </style> O R

28