Easy Horizontal Rules and Extra Alignment

Transcription

1 Easy Horizontal Rules and Extra Alignment 015 1

2 Learning Objectives After this lesson you will be able to Create horizontal rule lines with different thicknesses Create horizontal rule lines with different widths Create horizontal rule lines without 3D shading Create text that is aligned to center of the page Align images and blocks of text Add specified spacing around images Create text that is right justified 2

3 Line Thickness *Slide has notes only but will use in PW 14* Allow for lines of different thicknesses by using the option <hr size=n> Where N is the thickness of the line in pixels Use this tag in independent & second TODAY! 3

4 Line Width *Slide has notes only but will use in PW 14* Can adjust the width of the line Does not necessarily have to stretch across the whole page Use format <hr width=x> <hr width=z%> Where X is a number of pixels for the width Z is the percentage of the current web page It is recommended to use the percentage As it will adjust itself to the width of the browser window used by the person reading the page Use this tag in independent & second TODAY! 4

5 Line Width *Slide has notes only* The default alignment for horizontal rule center align When you specify a shorter width for a horizontal rule, you can also specify that it be aligned to the left or the right Examples <hr size=8 width=60% align=right> <hr size=8 width=60% align=left> 5

6 No Shading *Slide has notes only but will use in PW 14* May be a case where you do not want the 3D shading on the <hr> tag HTML format examples <hr width=60% size=6 noshade> <hr width=60% size=1 noshade> Add a tag with noshade in independent & second TODAY! 6

7 Text Alignment *Slide has notes only* <center>...</center> tag Aligns everything inside the tags with the center of the web page The more general "standard" HTML for center alignment is a variation on the <p> tag <p align=center> text text text <img src="file.gif"><br> text text </p> If you are center aligning several paragraphs, each one will have to be marked with a separate <p align=center>...</p> 7

8 Volcano Web Open up the index.html file in Notepad Find the section that looks like <b>in this Lesson...</b> <ul> <i> <li><a href="intro.html">introduction</a> <li><a href="term.html">volcano Terminology</a> <li><a href="usa.html">volcanic Places in the USA</a> <li><a href="mars.html">volcanic Places on Mars</a> <li><a href="proj.html">research Project</a> </i> </ul> 8

9 Volcano Web *1 st instruction here* Replace it with the following HTML <p align=center> <font size=+1> <i> <a href= #intro">introduction</a><br> <a href= #term">volcano Terminology</a><br> <a href= #usa">volcanic Places in the USA</a><br> <a href= #mars">volcanic Places on Mars</a><br> <a href= #proj">research Project</a><br> </i> </font> </p> 9

10 Volcano Web Save and Load into Internet Explorer See how it should look 10

11 Aligning Images and Text *Slide has notes only* Using the align attribute in the <img> tag, specify for an image to be aligned to the right or left margin Can have any HTML following it "fill" in around the empty space The HTML to do this is <img src="filename.gif" align=right> <img src="filename.gif" align=left> 11

12 Aligning Images and Text *Slide has notes only* There will be times when the text or other items that are aligned with the image are rather short and you want to force the next text to jump down below the image. Attribute for the <br> tag to clear the alignment <br clear=left> <br clear=right> <br clear=all> Will "clear" (or disable) any preceding alignments set up in the <img> tags 12

13 Aligning Images and Text *Slide has notes only* Always use these tags because the alignment will vary depending on the font specified in the reader's web browser and the width of their browser window. 13

14 Image Space Padding *Slide has notes only* Sometimes when you use the right or left alignment with an image, the text wraps a bit too close to the image. Adding to the <img> tags produces more padding or space around image <img scr="my_image.gif" alt="my Image" width=79 height=142 vspace=8 hspace=12> The vspace and hspace options Gives the amount of pixels of space. Above and below (vspace) of the image 14 On the left and the right (hspace) of the image

15 Adding Image Alignment to Volcano Site *Will Look Like This If Did Extra Credit* Open the index.html file in Notepad and find following <img alt="a Lesson on:" src="../pictures/lava.gif"> <p> <b><font size=+4 color=#ff66ff>v</font> <font size=+3 color=#dd0055>olcano WEB</font></b> <BLOCKQUOTE> <b><i><font size=+1>"nature raves savagely, threatening the lands"</font></i></b><br> -- <a href=" Pliny the Elder</a>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. </blockquote> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. 15

16 Adding Image Alignment to Volcano Site *Will look like this if did not do extra credit* Open the index.html file in Notepad and find following <img alt="a Lesson on:" src="../pictures/lava.gif"> <p> <b><font size=+4 color=#ff66ff>v</font> <font size=+3 color=#dd0055>olcano WEB</font></b> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. 16

17 Adding Image Alignment to Volcano Site *Replace To Look Like This* <img alt="a Lesson on:" src="../pictures/lava.gif" align=left> <b><i><font size=+1> "Nature raves savagely, threatening the lands" </font></i></b><br> -- <a href=" Pliny the Elder</a>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. <p> <b><font size=+4 color=#ff66ff>v</font> <font size=+3 color=#dd0055>olcano WEB</font></b> <p> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. <br clear=left> 17

18 Volcano Web Save and Refresh in Internet Explorer NOTE Everything between the <img... align=left> tag and the <br clear=left> tag will be placed adjacent to the picture The image is aligned left and the other HTML fills the empty space. 18

19 Text Justification/Alignment *Slide has notes only* The "divisions" tag <div>...</div> All text within the tag is justified according to the align attribute <div align=left>...</div> <div align=right>...</div> <div align=center>...</div> 19

20 Volcano Web Open index.html file in Notepad Add the <div> and </div> tags as shown below <div align=right> <b><i><font size=+1> "Nature raves savagely, threatening the lands" </font></i></b><br> -- <a href=" Pliny the Elder</a>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. <p> <b><font face="arial,helvetica" size=+4 color=#ff66ff>v</font> <font face="arial,helvetica" size=+3 color=#dd0055>olcano WEB</font></b> </div> Save and then Refresh in Internet Explorer 20

21 Independent Practice: 2 Slides Open index.html and second.html Modify each document Use some of the <hr> options covered in this lesson in your web pages Make some of your text centered- aligned or right margin aligned Change your images as indicated in this lesson 21

22 Independent Practice: 2 Slides Staple the following items together in order by file name to turn in for grade Open index.html in Notepad and print Open second.html in Notepad and print Circle or highlight all of the HTML tag changes you did as a result of this lesson Put your name & computer number AND Personal Web 14 on the assignment Turn all in for a grade 22