o Displaying lines of text: <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of spaces in the source code, but the browser ignores it. The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change. <p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p> <p> The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change. </p> o Line Breaks <p>this is<br>a paragraph<br>with line breaks</p> This is a paragraph with line breaks note: <br> is an empty tag, it needs no end o Horizontal Rules (lines) <h1>this is heading 1</h1> <p>this is some text.</p> <hr> <h2>this is heading 2</h2> <p>this is some other text.</p> <hr> <h2>this is heading 2</h2> <p>this is some other text.</p> This is heading 1 This is some text. This is heading 2 This is some other text. This is heading 2 This is some other text.
o In HTML, spaces and new lines are ignored: My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. <p>in HTML, spaces and new lines are ignored:</p> <p> My Bonnie lies over the sea. Oh, bring back my Bonnie to me. </p> o Formatting Text This text is bold o The <pre> tag preserves both spaces and line breaks <pre> My Bonnie lies over the sea. Oh, bring back my Bonnie to me. </pre> My Bonnie lies over the sea. Oh, bring back my Bonnie to me. This text is italic This is subscript and superscript <p>this text is normal.</p> <p><b>this text is bold.</b></p> This text is normal. This text is bold. <p>this text is normal.</p> <p><i>this text is italic.</i></p> This text is normal. This text is italic. This is subscripted text. This is superscripted text. <p>this is <sub>subscripted</sub> text.</p> <p>this is <sup>superscripted</sup> text.</p>
32 space o Special Characters: Use &# before the number! 33 exclamation mark " 34 quotation mark # 35 number sign $ 36 dollar sign <h1>hello out there!</h1> <p> How to Use Special Characters </p> <h2>now let's Figure this out...</h2> % 37 percent sign & 38 ampersand ' 39 apostrophe <p> Did it work? </p> Hello out there! How to Use Special Characters Now let's Figure this out... Did it work? ( 40 left parenthesis : 58 colon ) 41 right parenthesis ; 59 semicolon * 42 asterisk < 60 less-than + 43 plus sign = 61 equals-to, 44 comma > 62 greater-than - 45 hyphen? 63 question mark. 46 period @ 64 at sign / 47 slash
o Colors Look at this webpage for color names: http://htmlcolorcodes.com/color-names <style> div {height:50px;width:100%;} </style> <h1>colors can be set using color names</h1> <h1 style="color:red"></h1> <h1 style="color:orange"></h1> <h1 style="color:yellow"></h1> <h1 style="color:cyan"></h1> <h1 style="color:blue"></h1> o Div (areas) <p>this is some text.</p> <div style="color:pink;background-color:red"> <h3>this is a heading in a div element</h3> <p>this is some text in a div element.</p> </div> <p>this is some text.</p> Colors can be set using color names This is some text. This is a heading in a div element This is some text in a div element. This is some text. o Page Background color o Highlighting <body style="background-color:powderblue;"> <h1>this is a heading</h1> <p></p> This is a heading <h2>html <mark>marked</mark> Formatting</h2> HTML Marked Formatting
o Fonts <h1 style="font-family:verdana;">this is a heading</h1> <p style="font-family:courier;"></p> <p style="font-family:times;"></p> <p style="font-family:tahoma;"></p> This is a heading o Fonts Size <h1 style="font-size:300%;">this is a heading</h1> <h1 style="font-size:200%;">this is another heading</h1> <p style="font-size:160%;"></p> This is a heading This is another heading otext Alignment <h1 style="text-align:center;">centered </h1> <p style="text-align:right;">right Justified paragraph.</p> <p style="text-align:left;">left Justified paragraph.</p> Centered Left Justified paragraph. Right Justified paragraph. This is a heading
o Links <p><a href="http://uchsmdavis7.weebly.com">visit my Weebly Account </a></p> Visit my Weebly Account o Link Target Attributes The target attribute specifies where to open the linked document. The target attribute can have one of the following values: _blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked (this is default) _parent - Opens the linked document in the parent frame _top - Opens the linked document in the full body of the window framename - Opens the linked document in a named frame <a href="http://uchsmdavis7.weebly.com" target="_blank">visit our HTML tutorial!</a> <p>if you set the target attribute to "_blank", the link will open in a new browser window or tab.</p> Visit My Website! If you set the target attribute to "_blank", the link will open in a new browser window or tab.
o Adding Images Images have to be uploaded to the web and kept in files. You have to own a place to store them. You can use your Weebly images. Run your website (not in edit mode), and right-click on any image and select copy image address. Use this address between the quotes in the html image syntax. The alt attribute is necessary. It gives the browser some text to display if your picture won t load or is taking a long time to load. <p>here is an image of our school</p> <img src="http://uchsdavis.weebly.com/uploads/3/1/6/3/3163620 1/4123248.jpg?193" alt="uchs" style="width:104px;height:142px;"> Here is an image of our school <p>you can use gifs also</p> <img src="https://media4.giphy.com/media/1gmawqy2cpvwe/20 0.gif" alt="uchs" style="width:104px;height:142px;"> You can use gifs also <p>the image is a link. You can click on it.</p> <a href="http://uchsmdavis7.weebly.com"> <img src="http://uchsdavis.weebly.com/uploads/3/1/6/3/3163620 1/4123248.jpg?193" alt="html tutorial" style="width:42px;height:42px;border:0;"> </a> <p>add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.</p> The image is a link. You can click on it. Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.
EXERCISES Create an html or many html documents that use the specifications below: o Add six headings to the document with the text "Hello". Start with the most important heading and end with the least important heading. o Add a horizontal rule between a heading and a paragraph. o Use <br> elements to separate the lines of a poem or song you know. o Add a tooltip to a paragraph. o Change the text color of a paragraph to "blue". o Change the font of a paragraph to "courier". o Center align a paragraph. o Change the text size of a paragraph to 50px. o Change the background color of a page below to yellow. o Use <div> to Center align some content on a page. o Highlight some text yellow. o Add subscript or superscript formatting somewhere. o Change the size of an image to 250 pixels wide and 400 pixels tall. o Create a link to your weebly from text. o Create a link to your weebly from an image. o Use html code to try to display an image that doesn t exist, but displays the alt text. o Add a horizontal rule between a heading and a paragraph.