WRITING LINKS. <a href="

Transcription

1 CS637 Class 2 We are looking at slides from HTML and CSS: Design and Build Websites by Jon Duckett Slides are posted on the class website, protected by a password written on the board Note: Exams are open-print-books, no laptops, no cell phone use (at your seat), so get a print copy of this book if you want to use it for exams. If you must take a phone call during an exam, bring the phone to the front of the class. HTML

2

3 WRITING LINKS <a href="

4 WRITING LINKS THE PAGE THE LINK TAKES YOU TO <a href="

5 WRITING LINKS THE PAGE THE LINK TAKES YOU TO <a href=" THE TEXT THE USER CLICKS ON

6 LINKING TO OTHER SITES HTML <a href=" Empire</a>

7 RESULT

8 LINKING TO OTHER PAGES ON THE SAME SITE HTML <a href= index.html >Home</a> <a href= about.html >About</a> <a href= movies.html >Movies</a> <a href= contact.html >Contact</a>

9 RESULT

10 RELATIVE URLS examplearts index.html movies cinema index.html listings.html reviews.html dvd index.html listings.html reviews.html music index.html listings.html reviews.html theater index.html listings.html reviews.html

11 RELATIVE URLS SAME reviews.html examplearts index.html movies cinema index.html listings.html reviews.html dvd index.html listings.html reviews.html music index.html listings.html reviews.html theater index.html listings.html reviews.html

12 RELATIVE URLS CHILD music/index.html examplearts index.html movies cinema index.html listings.html reviews.html dvd index.html listings.html reviews.html music index.html listings.html reviews.html theater index.html listings.html reviews.html

13 RELATIVE URLS PARENT../index.html examplearts index.html movies cinema index.html listings.html reviews.html dvd index.html listings.html reviews.html music index.html listings.html reviews.html theater index.html listings.html reviews.html

14 RELATIVE URLS GRANDCHILD movies/dvd/index.html examplearts index.html movies cinema index.html listings.html reviews.html dvd index.html listings.html reviews.html music index.html listings.html reviews.html theater index.html listings.html reviews.html

15 RELATIVE URLS GRANDPARENT../../index.html examplearts index.html movies cinema index.html listings.html reviews.html dvd index.html listings.html reviews.html music index.html listings.html reviews.html theater index.html listings.html reviews.html

16 LINKS HTML <a Jon </a>

17 LINKS HTML <a Jon </a>

18 RESULT

19 LINKING TO A SPECIFIC PART OF THE SAME PAGE <h1 id="top"> Film-Making Terms</h1> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2>

20 LINKING TO A SPECIFIC PART OF THE SAME PAGE <h1 id="top"> Film-Making Terms</h2> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> <h2 Prologue</h2> id="prologue"> Prologue</h2> <a href="#top">top</a>

21 LINKING TO A SPECIFIC PART OF THE SAME PAGE <h1 id="top"> Film-Making Terms</h2> Terms</h1> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> Prologue</h2> <a href="#top">top</a>

22 LINKING TO A SPECIFIC PART OF THE SAME PAGE <h1 id="top"> Film-Making Terms</h2> Terms</h1> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> <h2 Prologue</h2> id="prologue"> Prologue</h2> <a href="#top">top</a>

23 LINKING TO A SPECIFIC PART OF THE SAME PAGE <h1 id="top"> Film-Making Terms</h2> Terms</h1> <a href="#arc-shot"> Arc shot</a><br /> <a href="#interlude"> Interlude</a><br /> <a href="#prologue"> Prologue</a><br /> <h2 id="prologue"> <h2 Prologue</h2> id="prologue"> Prologue</h2> <a href="#top">top</a>

24

25

26 CHOOSING IMAGES FOR YOUR SITE Images can set the tone for a site in less time than it takes to read a description.

27

28 CHOOSING IMAGES FOR YOUR SITE Images are subject to copyright but there are stock photography sites where you can buy them.

29

30 CHOOSING IMAGES FOR YOUR SITE If a page shows several photos of products or members of a team, keep them consistent.

31

32 STORING IMAGES ON YOUR SITE

33 ADDING IMAGES HTML <img src="images/quokka.jpg" alt="a family of quokka" title="the quokka is an Australian marsupial that is similar in size to the domestic cat" />

34 RESULT

35 Book examples: this page online RESULT

36 RESULT After right-click (not on image), View Source we can see the HTML for the page This is using Chrome, but this can be done in any desktop browser. Chrome on smartphone: need to use URL view-source:

37 HEIGHT & WIDTH OF IMAGES HTML <img src="images/quokka.jpg" alt="a family of quokka" title="the quokka is an Australian marsupial that is similar in size to the domestic cat" width="600" height="450" />

38 RESULT

39 Resizing RESULT Although browsers will resize images as specified by width and height, it s not a great idea to use it. Can end up with distorted or fuzzy images. Better to make another right-size image using a graphics editor and use that.

40 How a page with an image gets displayed RESULT In this case, the user selects the page as usual The browser does a GET request to the server The server sends the HTML page with the <img> The browser receives the HTML, parses the <img> URL, and issues another GET request for the image data (no user involvement here) The server sends the image data back The browser shows the completed page to the user This means two complete request cycles to the server We can make a chart showing this communication

41 Communications Diagram: page with <img> (time flows down in diagram) 1. User: requests.html page via browser 3. Browser: parses page, sees <img>, requests image data 5. User: sees finished page User/browser Server RESULT 2. Server: sees GET / page.html, Returns HTML on same connection 4.Server: sees GET / /quokka.jpg return its data in same connection.

42 RESULT Chrome can show details on the two requests Use right-click, inspect, choose Network tab, reload page

43 One page can involve many HTTP RESULT requests (from last class) From

44 WHERE TO PLACE IMAGES IN YOUR CODE HTML <img src="images/bird.gif" alt="bird" width="100" height="100" /> <p>there are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

45 RESULT

46 WHERE TO PLACE IMAGES IN YOUR CODE HTML <p><img src="images/bird.gif" alt="bird" width="100" height="100" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

47 RESULT

48 <img> is inline RESULT Now we look at cases where the <img> element lies inside the <p> element. <p> is a block element, starts a new line <img> Image is an inline element, keeps going on the current line Other block elements: <h1>, <ul>, <li>, Other inline elements: <em>, <a>, <strong>

49 WHERE TO PLACE IMAGES IN YOUR CODE HTML <p>there are around 10,000 living species of birds that inhabit different <img src="images/bird.gif" alt="bird" width="100" height="100" /> ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

50 RESULT

51 OLD CODE RESULT In the next few slides and in Duckett, OLD CODE means pre-html5 In HTML5, we use CSS to arrange nondefault positioning Skip OLD CODE for this class, but note it could be useful for working with older HTML. We should revisit these examples once we ve tackled CSS.

52 OLD CODE: ALIGNING IMAGES HORIZONTALLY (we re skipping) HTML <p><img src="images/bird.gif" alt="bird" width="100" height="100" align="left" /> There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

53 OLD CODE: ALIGNING IMAGES HORIZONTALLY HTML <p><img src="images/bird.gif" alt="bird" width="100" height="100" align="left" /> There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

54 RESULT

55 OLD CODE: ALIGNING IMAGES HORIZONTALLY HTML <p><img src="images/bird.gif" alt="bird" width="100" height="100" align="right" /> There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

56 RESULT

57 IMAGE FORMATS: JPEG

58 IMAGE FORMATS: GIF

59 Example image See HTML: <body> <img src="images/quokka.jpg" alt="quokka (Setonix brachyurus)" /> </body> Note how it stays the same size while you resize the page. It shows in 600x450 screen pixels. On my laptop, 600 px width = 50% of screen width Right-click on image in Chrome, Inspect, to see its dimensions.

60 Pixels Each digital image has a grid of pixels, written as width x height, for example 600x450 Each screen has resolution width x height pixels o My laptop: 1280x800 o My desktop (20 two-page monitor): 1920x1080 o iphone 5: 1136x640, iphone X: 2436x1125 iphone 8: 1334x750 o Samsung S4: 1080x1920, S8 2960x1440 o Many old phones: 854x480 We can expect about 1000 pixels across to work with In particular, the 600x450 image fits on any of these See pp for more examples.

61 IMAGE DIMENSIONS Create each image the same width and height as you would like it to appear on your website.

62 HTML5: FIGURE & FIGURE CAPTION (HTML5) HTML <figure> <img src="images/otters.gif" alt="photograph of two sea otters floating in the water" /> <br /> <figcaption>sea otters hold hands when they sleep so that they don t drift away from each other. </figcaption> </figure>

63 HTML5: FIGURE & FIGURE CAPTION HTML <figure> <img src="images/otters.gif" alt="photograph of two sea otters floating in the water" /> <br /> <figcaption>sea otters hold hands when they sleep so that they don t drift away from each other. </figcaption> </figure>

64 HTML5: FIGURE & FIGURE CAPTION HTML <figure> <img src="images/otters.gif" alt="photograph of two sea otters floating in the water" /> <br /> <figcaption>sea otters hold hands when they sleep so that they don t drift away from each other. </figcaption> </figure>

65 online RESULT

66

67

68 WHAT'S A TABLE?

69 BASIC TABLE STRUCTURE <table> <tr> <td>15</td> <td>15</td> <td>30</td> </tr> <tr> <td>45</td> <td>60</td> <td>90</td> </tr> </table> HTML

70 RESULT

71 TABLE HEADINGS <table> <tr> <th></th> <th scope="col">saturday</th> <th scope="col">sunday</th> </tr> <tr> <th scope="row">tickets sold</th> <td>120</td> <td>135</td> </tr> </table> HTML

72 RESULT

73 SPANNING COLUMNS... <tr> <th>monday</th> <td colspan="2">geography</td> <td>math</td> <td>art</td> </tr>... HTML

74 RESULT

75 SPANNING ROWS... <tr> <th>6pm - 7pm</th> <td rowspan="2">movie</td> <td>comedy</td> <td>news</td> </tr> <tr> <th>7pm - 8pm</th> <td>sport</td> <td>current Affairs</td> </tr> HTML

76 RESULT

77

78

79 WHY FORMS?

80 FORM CONTROLS

81 HOW FORMS WORK 1: User fills in form and presses button to submit info to server

82 HOW FORMS WORK 2: Name of each form control sent with value user entered

83 HOW FORMS WORK 3: Server processes information using programming language

84 HOW FORMS WORK 4: Server creates new page to send back to the browser based on info received

85 NAME & VALUE PAIRS username=ivy

86 NAME & VALUE PAIRS NAME username=ivy

87 NAME & VALUE PAIRS NAME username=ivy VALUE

88 Name-value pairs sent to server HTTP GET: in URL query string GET /webapp/program?username=ivy HTTP/1.0 headers HTTP POST: in the body of the request: POST /webapp/program headers encoded name-value pairs Note: HTTP POST is the usual way to send in form data, as we will see.

89 Communications Diagram: simple form handling (time flows down in diagram) 1. User: requests form page via browser 3. User: fills in form Browser: puts user input into params in POST request 5. User: sees response User/browser Server 2. Server: sees GET / form.html, returns form.html on same connection 4.Server: sees POST / /doit.php Get user input from params, do requested action, compose response, return it in same connection.

90 FORM STRUCTURE HTML <form action=" method="get"> This is where the form controls will appear. </form>

91 TEXT INPUT HTML <form action=" <input type="text" name="username" size="15" maxlength="30" /> </form>

92 TEXT INPUT HTML <form action=" <input type="text" name="username" size="15" maxlength="30" /> </form>

93 TEXT INPUT HTML <form action=" <input type="text" name="username" size="15" maxlength="30" /> </form>

94 TEXT INPUT HTML <form action=" <input type="text" name="username" size="15" maxlength="30" /> </form>

95 TEXT INPUT HTML <form action=" <input type="text" name="username" size="15" maxlength="30" /> </form>

96 RESULT

97 PASSWORD HTML <p>username: <input type="text" name="username" size="15" maxlength="30" /> </p> <p>password: <input type="password" name="password" size="15" maxlength="30" /> </p>

98 RESULT

99 TEXTAREA HTML <p>what did you think of this gig?</p> <textarea name="comments" cols="20" rows="4"> Enter your comments... <textarea/>

100 RESULT

101 RADIO BUTTON <p>your favorite genre:<br /> HTML <input type="radio" name="genre" value="rock" checked="checked" /> Rock <input type="radio" name="genre" value="pop" /> Pop <input type="radio" name="genre" value="jazz" /> Jazz </p>

102 RADIO BUTTON <p>your favorite genre:<br /> HTML <input type="radio" name="genre" value="rock" checked="checked" /> Rock <input type="radio" name="genre" value="pop" /> Pop <input type="radio" name="genre" value="jazz" /> Jazz </p>

103 RADIO BUTTON <p>your favorite genre:<br /> HTML <input type="radio" name="genre" value="rock" checked="checked" /> Rock <input type="radio" name="genre" value="pop" /> Pop <input type="radio" name="genre" value="jazz" /> Jazz </p>

104 RADIO BUTTON <p>your favorite genre:<br /> HTML <input type="radio" name="genre" value="rock" checked="checked" /> Rock <input type="radio" name="genre" value="pop" /> Pop <input type="radio" name="genre" value="jazz" /> Jazz </p>

105 RADIO BUTTON <p>your favorite genre:<br /> HTML <input type="radio" name="genre" value="rock" checked="checked" /> Rock <input type="radio" name="genre" value="pop" /> Pop <input type="radio" name="genre" value="jazz" /> Jazz </p>

106 RESULT

107 CHECKBOX <p>your favorite music service:<br /> <input type="checkbox" name="service" value="itunes" checked="checked" /> itunes HTML <input type="checkbox" name="service" value="last.fm" /> Last.fm <input type="checkbox" name="service" </p> value="spotify" /> Spotify

108 CHECKBOX <p>your favorite music service:<br /> <input type="checkbox" name="service" value="itunes" checked="checked" /> itunes HTML <input type="checkbox" name="service" value="last.fm" /> Last.fm <input type="checkbox" name="service" </p> value="spotify" /> Spotify

109 CHECKBOX <p>your favorite music service:<br /> <input type="checkbox" name="service" value="itunes" checked="checked" /> itunes HTML <input type="checkbox" name="service" value="last.fm" /> Last.fm <input type="checkbox" name="service" </p> value="spotify" /> Spotify

110 CHECKBOX <p>your favorite music service:<br /> <input type="checkbox" name="service" value="itunes" checked="checked" /> itunes HTML <input type="checkbox" name="service" value="last.fm" /> Last.fm <input type="checkbox" name="service" </p> value="spotify" /> Spotify

111 CHECKBOX <p>your favorite music service:<br /> <input type="checkbox" name="service" value="itunes" checked="checked" /> itunes HTML <input type="checkbox" name="service" value="last.fm" /> Last.fm <input type="checkbox" name="service" </p> value="spotify" /> Spotify

112 RESULT

113 DROP DOWN LIST BOX HTML <select name="devices"> <option value="ipod" selected="selected">ipod</option> <option value="radio">radio</option> <option value="pc">computer</option> </select>

114 DROP DOWN LIST BOX HTML <select name="devices"> <option value="ipod" selected="selected">ipod</option> <option value="radio">radio</option> <option value="pc">computer</option> </select>

115 DROP DOWN LIST BOX HTML <select name="devices"> <option value="ipod" selected="selected">ipod</option> <option value="radio">radio</option> <option value="pc">computer</option> </select>

116 DROP DOWN LIST BOX HTML <select name="devices"> <option value="ipod" selected="selected">ipod</option> <option value="radio">radio</option> <option value="pc">computer</option> </select>

117 DROP DOWN LIST BOX HTML <select name="devices"> <option value="ipod" selected="selected">ipod</option> <option value="radio">radio</option> <option value="pc">computer</option> </select>

118 DROP DOWN LIST BOX HTML <select name="devices"> <option value="ipod" selected="selected">ipod</option> <option value="radio">radio</option> <option value="pc">computer</option> </select>

119 RESULT

120 MULTIPLE SELECT BOX, fixed (red) <select name="devices" size="4 multiple="multiple"> HTML <option value="guitar" selected="selected">guitar</option> <option value="drums">drums</option> <option value="keys" selected="selected">keyboard</option> <option value="bass">bass</option> </select>

121 RESULT

122 FILE INPUT BOX: FYI, we won t need this. <form action=" method="post"> HTML <p>upload your song in MP3 format:</p> <input type="file" name="user-song" /> <input type="submit" value="upload" /> </form>

123 FILE INPUT BOX HTML <form action=" method="post"> <p>upload your song in MP3 format:</p> <input type="file" name="user-song" /> <input type="submit" value="upload" /> </form>

124 FILE INPUT BOX HTML <form action=" method="post"> <p>upload your song in MP3 format:</p> <input type="file" name="user-song" /> <input type="submit" value="upload" /> </form>

125 FILE INPUT BOX HTML <form action=" method="post"> <p>upload your song in MP3 format:</p> <input type="file" name="user-song" /> <input type="submit" value="upload" /> </form>

126 RESULT

127 SUBMIT BUTTON HTML <form action=" <p>subscribe to our list:</p> <input type="text" name=" " /> <input type="submit" value="subscribe" /> </form>

128 SUBMIT BUTTON HTML <form action=" <p>subscribe to our list:</p> <input type="text" name=" " /> <input type="submit" value="subscribe" /> </form>

129 SUBMIT BUTTON HTML <form action=" <p>subscribe to our list:</p> <input type="text" name=" " /> <input type="submit" value="subscribe" /> </form>

130 RESULT

131 IMAGE BUTTON HTML <form action=" <p>subscribe to our list:</p> <input type="text" name=" " /> <input type="image" src="images/subscribe.jpg" width="100" height="20" /> </form>

132 IMAGE BUTTON HTML <form action=" <p>subscribe to our list:</p> <input type="text" name=" " /> <input type="image" src="images/subscribe.jpg" width="100" height="20" /> </form>

133 IMAGE BUTTON HTML <form action=" <p>subscribe to our list:</p> <input type="text" name=" " /> <input type="image" src="images/subscribe.jpg" width="100" height="20" /> </form>

134 IMAGE BUTTON HTML <form action=" <p>subscribe to our list:</p> <input type="text" name=" " /> <input type="image" src="images/subscribe.jpg" width="100" height="20" /> </form>

135 RESULT

136 BUTTONS: Don t use <button>! <form action=" HTML <button> <img src="images/add.gif" alt="add" width="10" height="20" /> </button> </form> Tip from Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form. Let s follow this rule.

137 HIDDEN FORM CONTROLS And fix pg. 162: replace <button> with <input> <form action=" HTML <button> <img src="images/add.gif" alt="add" width="10" height="20" /></button> <input type="image" src="images/add.gif" alt="add" width="10" height="20" /> <input type="hidden" name="bookmark" value="lyrics" /> </form>

138 RESULT

139 Communications Diagram: form handling Case of form having hidden control bookmark 1. User: requests form page via browser 3. User: clicks button Browser: puts bookmark=lyrics in GET request 5. User: sees response User/browser Server RESULT 2. Server: sees GET / form.html, returns form.html on same connection 4.Server: sees GET /add.php?bookmark=lyrics Gets bookmark value, does requested action, composes response, returns it in same connection.

140 LABELLING FORM CONTROLS: two ways <form action=" <label>age: <input type="text" name="age" /></label> Gender: <input id="female" type="radio" name="gender" value="f" /> <label for="female">female</label> <input id="male" type="radio" name="gender" value="m" /> <label for="female">male</label> </form> HTML

141 LABELLING FORM CONTROLS <form action=" <label>age: <input type="text" name="age" /></label> Gender: <input id="female" type="radio" name="gender" value="f" /> <label for="female">female</label> <input id="male" type="radio" name="gender" value="m" /> <label for="female">male</label> </form> HTML

142 LABELLING FORM CONTROLS <form action=" <label>age: <input type="text" name="age" /></label> Gender: <input id="female" type="radio" name="gender" value="f" /> <label for="female">female</label> <input id="male" type="radio" name="gender" value="m" /> <label for="female">male</label> </form> HTML

143 LABELLING FORM CONTROLS <form action=" <label>age: <input type="text" name="age" /></label> Gender: <input id="female" type="radio" name="gender" value="f" /> <label for="female">female</label> <input id="male" type="radio" name="gender" value="m" /> <label for="female">male</label> </form> HTML

144 RESULT

145 GROUPING FORM ELEMENTS <fieldset> <legend>contact details</legend> <label> <br /> <input type="text" name=" "></label> <br /> <label>mobile:<br /> <input type="text" name="mobile"></label> <br /> <label>telephone:<br /> <input type="text" name="tel"></label> </fieldset> HTML

146 GROUPING FORM ELEMENTS <fieldset> <legend>contact details</legend> <label> <br /> <input type="text" name=" "></label> <br /> <label>mobile:<br /> <input type="text" name="mobile"></label> <br /> <label>telephone:<br /> <input type="text" name="tel"></label> </fieldset> HTML

147 GROUPING FORM ELEMENTS <fieldset> <legend>contact details</legend> <label> <br /> <input type="text" name=" "></label> <br /> <label>mobile:<br /> <input type="text" name="mobile"></label> <br /> <label>telephone:<br /> <input type="text" name="tel"></label> </fieldset> HTML

148 RESULT

149 HTML5: FORM VALIDATION Add required attribute HTML <label for="username">username:</label> <input type="text" name="username" required="required" /> <label for="password">password:</label> <input type="password" name="password" required="required" /> <input type="submit" value="submit" />

150 online RESULT

151 HTML5: DATE INPUT <label for="date">departure date:</label> HTML <input type="date" name="depart" id="date" /> <input type="submit" value="submit" />

152 RESULT

153 HTML5: & URL INPUT HTML <input type=" " name=" " /> <input type="url" name="website" />

154 RESULT

155 HTML5: SEARCH INPUT HTML <input type="search" name="search" placeholder="enter keyword" /> <input type="submit" value="search" />

156 online RESULT

157 SUMMARY Whenever you want to collect information from visitors you will need a form, which lives inside a <form> element.

158 SUMMARY Information from a form is sent in name/value pairs.

159 SUMMARY Each form control is given a name, and the text the user types in or the values of the options they select are sent to the server.

160 SUMMARY HTML5 introduces new form elements which make it easier for visitors to fill in forms.