WRITING LINKS. <a href="

Transcription

1 LINKS

2 WRITING LINKS <a href="

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

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

5 RESULT

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

7 RESULT

8 DIRECTORY STRUCTURE public_html 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

9 DIRECTORY STRUCTURE ROOT FOLDER public_html 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

10 DIRECTORY STRUCTURE CHILD public_html 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 DIRECTORY STRUCTURE PARENT public_html 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 DIRECTORY STRUCTURE GRANDCHILD public_html 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 DIRECTORY STRUCTURE GRANDPARENT 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 LINKS HTML <a Jon </a>

15 LINKS HTML <a Jon </a>

16 RESULT

17 OPENING LINKS IN A NEW WINDOW HTML <a href=" target="_blank"> Internet Movie Database </a> (opens in a new window)

18 OPENING LINKS IN A NEW WINDOW HTML <a href=" target="_blank"> Internet Movie Database </a> (opens in a new window)

19 RESULT

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"> Prologue</h2> <a href="#top">top</a>

21 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"> Prologue</h2> <a href="#top">top</a>

22 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"> Prologue</h2> <a href="#top">top</a>

23 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"> Prologue</h2> <a href="#top">top</a>

24 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"> Prologue</h2> <a href="#top">top</a>

25 IMAGES

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

28 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" />

29 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" />

30 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" />

31 RESULT

32 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" />

33 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" />

34 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" />

35 RESULT

36 WHERE TO PLACE IMAGES IN YOUR CODE <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> HTML

37 RESULT

38 WHERE TO PLACE IMAGES IN YOUR CODE <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> HTML

39 RESULT

40 WHERE TO PLACE IMAGES IN YOUR CODE <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> HTML

41 RESULT

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

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

44 RESULT

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

46 RESULT

47 OLD CODE: ALIGNING IMAGES VERTICALLY HTML <p><img src="images/bird.gif" alt="bird" width="100" height="100" valign="top" /> 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>

48 OLD CODE: ALIGNING IMAGES VERTICALLY HTML <p><img src="images/bird.gif" alt="bird" width="100" height="100" valign="top" /> 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>

49 RESULT

50 OLD CODE: ALIGNING IMAGES VERTICALLY HTML <p><img src="images/bird.gif" alt="bird" width="100" height="100" valign="middle" /> 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>

51 RESULT

52 OLD CODE: ALIGNING IMAGES VERTICALLY HTML <p><img src="images/bird.gif" alt="bird" width="100" height="100" valign="bottom" /> 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 RESULT

54 IMAGE FORMATS: JPEG

55 IMAGE FORMATS: GIF

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

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

58 IMAGE DIMENSIONS If an image has the wrong dimensions, it can look squished.

59 IMAGE DIMENSIONS If an image is too small, it can look blurry when shown bigger.

60 IMAGE DIMENSIONS

61 ANIMATED GIF

62 ANIMATED GIF

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

66 RESULT

67 Questions!!!