HTML Code: Headings HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least

Size: px

Start display at page:

Download "HTML Code: Headings HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least"

Ernest Dorsey
5 years ago
Views:

1 HTML Code: Headings HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Example <html> <head><title>heading Tags</title></head> <body> <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> </body> </html> Save this a XXHeadings.html in your student drive and view it.

3 The <hr> tag is used to separate content in your page. <html> HTML Code: Using Horizontal Lines <head><title>horizontal Line</title></head> <body> <p>the hr tag defines a horizontal rule:</p> <hr> <p>this is a paragraph.</p> <hr> <p>this is a paragraph.</p> </body> </html> Use the Save AS feature and save this into your student folder with your initials XXhrtag.html, open and view the document, it should look like this:

5 POP QUIZ What do these tags do? <html> <body> Defines an HTML document Defines the document's body <h1> to <h6> <hr> Defines HTML headings Defines a horizontal line

6 HTML Code: Paragraph and Line Breaks The <p> tag is used to designate a new paragraph. The <br> tag is used to designate a line break in your text. <html> <head><title>paragraph and Line Breaks</title></head> <body> The line break allows you to move your text<br> To the next line.<br> <p>the Paragraph tag allows you to start a new paragraph and double spaces from previous line.</p> </body> </html> Use the Save AS feature and save this into your student folder with your initials XXPandBRtag.html, open and view the document, it should look like this:

8 HTML Code: Formatting Text There are numerous codes to help you easily format your text, lets try a few <html> <head><title>formatting Text</title></head> <body> <p><b>this text is bold</b></p> <p><strong>this text is strong</strong></p> <p><i>this text is italic</i></p> <p><em>this text is emphasized</em></p> <p><code>this is computer output</code></p> <p>this is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> Use the Save AS feature and save this into your student folder with your initials XXFormatText.html, open and view the document, it should look like this:

10 POP QUIZ What do these tags do? <br> <p> Allows you to put in a line break Defines a paragraph <b> and <strong> <i> and <em> Text is bolded Text is italicized <code> <sub> <sup> Text is formatted as computer output Text is formatted as subscript Text is formatted as superscript

11 HTML Code: Hyperlinks (Links) The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the <a> element is the href attribute, which indicates the link s destination. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red

12 HTML Code: Hyperlinks (Links) Links can be to an outside source or and internal source. The target= blank attribute and value allow the links to be opened in their own page. <html> <head><title>internal and External Links</title></head> <body> <a href=" target="blank">this is an external link to ESPN</a><br> <a href= XXShell.html" target="blank">this is an internal link to my HTML Shell</a> </body> </html> Use the Save AS feature and save this into your student folder with your initials XXlinks.html, open and view the document, it should look like this:

14 Review What do these tags do? <html> <body> Defines an HTML document Defines the document's body <h1> to <h6> <hr> Defines HTML headings Defines a horizontal line <a> Defines a hyperlink (link) What is an external Link What is an internal Link A link to an outside website A link to a current page in your website

15 Review What do these tags do? <br> <p> Allows you to put in a line break Defines a paragraph <b> and <strong> <i> and <em> Text is bolded Text is italicized <code> <sub> <sup> Text is formatted as computer output Text is formatted as subscript Text is formatted as superscript

Web Publishing with HTML

Web Publishing with HTML MSc Induction Tutorials Athena Eftychiou PhD Student Department of Computing 1 Objectives Provide a foundation on Web Publishing by introducing basic notations and techniques like