So you want to build a website?

So you want to build a website?

Introduction • Class Introduction • Why do you want to learn HTML? • Is there a project you want to work on?

Introduction (continue) • How we’re going to be developing pages • Using Microsoft notepad or any text editor • Viewing pages in class (Explorer / Netscape) • Working from home • Saving work to a disk

To Help You Learn HTML • Books • “Teach Yourself HTML 4 in 24 Hours” by SAMS. • “HTML 4 in 21 Days” by Laura Lemay.

To Help You Learn HTML • Log in from the school website to: https://sites.google.com/a/americanacademy-casablanca.com/infotmation-communication/ • Check out the Class Notes and Links sections for online links. • This site is being built ‘as we speak’, so check back often.

Our Class Project • Each student will need to build a website that will be presented to the classmate

Getting Started • We will be using MS Notepad to write our HTML. • Pages will be saved to your flash drive. • Pages will be viewed as they are created in your browser. • We will use this overhead presentation as well as handouts and the Class website.

Basics of the Internet • In the simplest sense, the Internet is a collection of inter-connected computers (servers) over shared lines. • Servers are just like the computers you use at home and work, but more powerful. • The Internet became “browse-able” in the 1990s with the creation of the HTTP protocol and creation of HTML.

HTTP & HTML • HTTP – HyperText Transfer ProtocolMethod by which a computer jumps from one page to another by clicking on links. • HTML – HyperText Markup LanguageMarkup language that allows for the formatting of Internet Documents. • Plain Text Language • Universal Compatibility • Most-recent version is HTML 4.0

What HTML Does Turns Text Like This My name is Jasmine. What is your name? Formatted Like This <html> <head> <title>Hello world</title> </head> <body> <b>My name is Jasmine.</b><br> <center><i>What is your name?</i></center> </body> </html> INTO THIS…

Practice 1 Create your own page: Open Notepad –Start>Programs>Accessories>Notepad <html><head><title> This is my first web page</title></head><body>Hello world. This is my first web page. There's more to come.</body></html> [Name your file as firstpage.html]

HTML Coding Standards • HTML markup takes the form of TAGS <tag>Marked up text</tag> • Some of these tags have attributes <tag attribute=“value”>Text</tag> • Some tags have opening and closing elements, while some have just opening <center><img src=“image.gif”></center>

Basic text formatting • Our next tags are • paragraph, • line break • Headline • horizontal rule • This help us make our current page a lot more exciting. Let’s learn how.

Basic Web Page Tags Each web page has four basic tag sets:

Template For HTML Pages <html> <head> <title>Page Title Goes Here</title> </head> <body> Page content goes here. </body> </html>

Adding Text • Adding text is as simple as typing text between the <body> tags, except: • Browsers ignore multiple spaces, spacing only once unless told otherwise. • Browsers do not know when to start new paragraphs or break at the end of lines. • Browsers do not know how you wish to format text.

Paragraphs • The <p> tag tells the browser to insert a new paragraph. • The closing tag for this (</p>) is optional, but recommended. • The <p> tag has one attribute, ‘align’ that controls the on-page alignment of your paragraph. • Options are left, center, right, justify • This attribute has been Deprecated in HTML 4.0.

To insert a line break, use the <br> tag. Note, that this tag has no closing tag. Ex. ‘Hello<br>World’: HelloWorld Line Breaks

How <p> and <br> Differ • The <br> tag forces a one-line break, while the <p> tag creates a new paragraph with a two-line break. • The <p> tag has an align element (left, center, right, justify) while no such attribute exists in the <br> tag.

Text Spacing • Although HTML ignores extra spacing, there is a ‘special character’ in HTML that gives you that functionality: • This is the non-breaking space character, and adds the ability to have extra spaces to your page. • Ex.: ‘There are 3 spaces between this and this.’: <p>There are 3 spaces between and this.</p>

Practice 2 Practice the line spacing, linebreak, and paragraph tags to add formatting and spacing to the document you created.

Headline tag • In HTML, bold copy is created by using the headline tag. • There are six levels of headlines, ranging from <h1>…</h1> to <h6>…</h6>.

Heading example • Here is an example of the code for all the headline sizes: <h1>Level 1 Headline</h1> <h2>Level 2 Headline</h2> <h3>Level 3 Headline</h3> <h4>Level 4 Headline</h4> <h5>Level 5 Headline</h5> <h6>Level 6 Headline</h6>

Practice 3 • Step 1 Load your text editor and type the following code: <html> <head> <title>This is my first web page.</title> </head> <body> Hello world. This is my first web page. There's more to come. </body> </html>

Step 2 Add the <h1> tag to the words "Hello world." as shown in red. <html> <head> <title>This is my first web page.</title> </head> <body><h1>Hello world.</h1> This is my first web page. There's more to come. </body> </html> • Step 3 Save the file MyWebPage.html

Horizontal Rule • To create a horizontal line on your page you use the empty tag: <hr>

Lists • Lists come in a variety of forms with most either numbered or bulleted. • The numbered lists are called ordered lists • The bulleted lists are unordered lists. • Lists are nested. There is a tag that identifies the type of list, like numbered or bulleted. • Then within that tag there is another tag that itemizes the list. Maybe some definitions would help.

Definitions • <ol>…</ol>The ordered list is a container tag and is used for numbered lists. • <ul>…</ul> The unordered list is a container tag and is used for bulleted lists. • <li>…</li>The listed item tag is a container tag and is nested within the ordered or unordered tags.

An ordered (numbered) list An ordered (numbered) list goes like this: <ol> <li>My first item on the list.</li> <li>My second item on the list.</li> <li>My third item on the list.</li> <li>My fourth item on the list.</li> </ol> In the browser it will appear like this: • My first item on the list. • My second item on the list. • My third item on the list. • My fourth item on the list.

An unordered (bulleted) list An unordered (bulleted) list goes like this: <ul> <li>My first item on the list.</li> <li>My second item on the list.</li> <li>My third item on the list.</li> <li>My fourth item on the list.</li> </ul> In the browser it will appear like this: • My first item on the list. • My second item on the list. • My third item on the list. • My fourth item on the list.

Review 1 • All HTML documents should have the primary tags: • <html>…</html> HTML file tag • <head>…</head> General information tag • <title>…</title> Title tag • <body>…</body> Body tag • Headlines come in six sizes: <h1> being the largest and <h6> being the smallest.

Review 1 (continue) • To create space between paragraphs use the container paragraph tag: • <p>…</p> • To create a line break use the empty break tag: • <br> • To make a line use the empty horizontal rule tag: • <hr>

Review 1 (continue) • Lists are usually numbered or bulleted. HTML lists are nested with the listed item tag nested within the ordered or unordered container tag: • <ol>…</ol> Ordered list tag • <ul>…</ul> Unordered list tag • <li>…</li> Listed items tag

So you want to build a website?