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.

http://notepad-plus-plus.org/download/

http://notepad-plus-plus.org/download/

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>


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

This is a paragraphThis is another paragraph

Use the tag if you want a line break (a new line) without starting a new paragraph.

This is a para graph with line breaks

Try yourself – Paragraphs and Line Breaks

<!DOCTYPE html><html>


<body>This is a paragraphThis is another paragraphThis is a para graph with line breaks</body></html>

Text formattingHTML uses tags like and for formatting output, like bold or italic text.Often renders as , and renders as . Defines underlined text Defines subscripted text Defines superscripted text<ins> Defines inserted text<del> Defines deleted text Defines marked/highlighted text

Try yourself – Text formatting

<!DOCTYPE html><html><head><title> MIS402 Case 9 </title></head><body>This text is underlined This text is bold This text is also bold This text is italic This text is also italic 

Defines subscriptedtext Definessuperscripted text<ins>Defines inserted text</ins> <del>Defines deleted text</del> Defines marked/highlighted text 

</body></html>

Font families and sizingAny text can be customized using the font tag.This is a simple sentence.In order to change the color, use the color name tag.This text is red.In order to change the size, set a value from 1 to 7:This text is 3 points height.In order to change the font type, write its name:Typewriter font.

Try yourself – Font families and sizing

<!DOCTYPE html><html>


<body>This is a simple sentence.This text is red. This text has height 5. This text has height 7.Typewriter font.</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>


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


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


<body bgcolor="grey">While designing a web site, the importance of the color is always overlooked by many web designers.But keep in mind that you depend on your company; your company depends on your website; and your website truly depends on its color.http://www.webdesign.org/web-design-basics/color-theory/importance-of-colors-in-web-site-design.14448.html </body></html>

Try yourself - Background image<!DOCTYPE html><html>


<body background="ocean.jpg" bgproperties="fixed">As if the Sea should part by Emily DickinsonAs if the Sea should partAnd show a further Sea --And that -- a further -- and the ThreeBut a presumption be --Of Periods of Seas --Unvisited of Shores --Themselves the Verge of Seas to be --Eternity -- is Those --</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>


<body><ul><li>Coffee</li><li>Milk</li></ul><ol><li>Juice</li><li>Water</li></ol></body></html>

demonstrating how to build websites

Internet