Demonstrating how to build websites
-
Upload
francisco-jose-nardi-filho -
Category
Internet
-
view
22 -
download
0
Transcript of Demonstrating how to build websites
Case 9: Demonstrating how to
build websitesCarolyn White
Francisco Jose NardiJames Johnson
Joe Barney
What do you need to do to start?
If you using Windows, first download and install an application called Notepad++. http://notepad-plus-plus.org/download/It is free and weightless. If you are not able to do that, just open the default text editor of your computer/laptop.Last, pay attention to our presentation, take as many notes as you like and be welcome to ask any question.
First things firstAfter you have opened your text editor, save your file as it is, with the name, for instance, “index.html”. You should create another “index” files according to the subjects you will learn now.
Now let’s start coding our HTML page. For every existent website, there are some required tags. They are <html>, <head>, and <body>. But look carefully how they are arranged and that they all need to be closed (for instance, </html>).
Template<!DOCTYPE html><html>
<head><title> MIS402 Case 9 </title></head>
<body></body></html>
HeadingsHeadings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<h1>This is the heading 1</h1><h2>This is the heading 2</h2><h3>This is the heading 3</h3>
NOTE: Search engines use your headings to index the structure and content of your web pages.
Try yourself – Headings<!DOCTYPE html><html>
<head><title> MIS402 Case 9 </title></head>
<body><h1>This is the heading 1</h1><h2>This is the heading 2</h2><h3>This is the heading 3</h3></body></html>
Paragraphs and Line BreaksParagraphs are defined with the <p> tag.
<p>This is a paragraph</p><p>This is another paragraph</p>
Use the <br> tag if you want a line break (a new line) without starting a new paragraph.
<p>This is<br>a para<br>graph with line breaks</p>
Try yourself – Paragraphs and Line Breaks
<!DOCTYPE html><html>
<head><title> MIS402 Case 9 </title></head>
<body><p>This is a paragraph</p><p>This is another paragraph</p><p>This is<br>a para<br>graph with line breaks</p></body></html>
Text formattingHTML uses tags like <b> and <i> for formatting output, like bold or italic text.Often <strong> renders as <b>, and <em> renders as <i>.<u> Defines underlined text<sub> Defines subscripted text<sup> Defines superscripted text<ins> Defines inserted text<del> Defines deleted text<mark> Defines marked/highlighted text
Try yourself – Text formatting
<!DOCTYPE html><html><head><title> MIS402 Case 9 </title></head><body><p><u>This text is underlined</u> </br><b>This text is bold</b> </br><strong>This text is also bold</strong> </br><i>This text is italic</i> </br><em>This text is also italic</em> </br> </br></p>
<p>Defines <sub> subscripted</sub>text </br>Defines<sup>superscripted </sup>text</br><ins>Defines inserted text</ins> </br><del>Defines deleted text</del> </br><mark>Defines marked/highlighted text</mark> </br></p>
</body></html>
Font families and sizingAny text can be customized using the font tag.<font>This is a simple sentence.</font>In order to change the color, use the color name tag.<font color="red">This text is red.</font>In order to change the size, set a value from 1 to 7:<font size="3">This text is 3 points height.</font>In order to change the font type, write its name:<font face="courier">Typewriter font.</font>
Try yourself – Font families and sizing
<!DOCTYPE html><html>
<head><title> MIS402 Case 9 </title></head>
<body><font>This is a simple sentence.</font></br><font color="red">This text is red.</font></br><font size=“5"> This text has height 5.</font></br><font size=“7"> This text has height 7.</font></br><font face="courier">Typewriter font.</font></br></body></html>
LinksThe 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
<a href="http://www.youtube.com/">Watch interesting videos</a>
Try yourself – Links<!DOCTYPE html><html>
<head><title> MIS402 Case 9 </title></head>
<body><a href="http://www.youtube.com/"> Watch interesting videos</a></body></html>
ImagesIn HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
<img src=“mis.jpg” alt=“Management Information Systems” width = “450” height = “300”>
Try yourself - Images<!DOCTYPE html><html>
<head><title> MIS402 Case 9 </title></head>
<body><img src=“mis.jpg” alt=“Management Information Systems” width = “450” height = “300”></body></html>
Background color and images
Specify a background color for an HTML document:<body bgcolor=“grey">
Or specify a background image for an HTML document:<body background=“ocean.jpg">
Try yourself - Background color<!DOCTYPE html><html>
<head><title> MIS402 Case 9 </title></head>
<body bgcolor="grey"><font size="5" color="white">While designing a web site, the importance of the color is always overlooked by many web designers.</br>But keep in mind that you depend on your company;</br> your company depends on your website;</br> and your website truly depends on its <em>color</em>.</br></br><i>http://www.webdesign.org/web-design-basics/color-theory/importance-of-colors-in-web-site-design.14448.html</i> </font></body></html>
Try yourself - Background image<!DOCTYPE html><html>
<head><title> MIS402 Case 9 </title></head>
<body background="ocean.jpg" bgproperties="fixed"><font size="6" color ="white"><p><strong>As if the Sea should part by Emily Dickinson</strong></br></br>As if the Sea should part</br>And show a further Sea --</br>And that -- a further -- and the Three</br>But a presumption be --</br></br>Of Periods of Seas --</br>Unvisited of Shores --</br>Themselves the Verge of Seas to be --</br>Eternity -- is Those --</br></p></font></body></html>
Ordered and unordered listsAn unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items are marked with bullets (typically small black circles).<ul><li>Coffee</li><li>Milk</li></ul>
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items are marked with numbers.<ol><li>Juice</li><li>Water</li></ol>
Try yourself - Lists<!DOCTYPE html><html>
<head><title> MIS402 Case 9 </title></head>
<body><ul><li>Coffee</li><li>Milk</li></ul><ol><li>Juice</li><li>Water</li></ol></body></html>