so you want to build a website n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
So you want to build a website? PowerPoint Presentation
Download Presentation
So you want to build a website?

play fullscreen
1 / 38

So you want to build a website?

50 Views Download Presentation
Download Presentation

So you want to build a website?

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. So you want to build a website?

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

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

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

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

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

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

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

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

  10. 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…

  11. 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]

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

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

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

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

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

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

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

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

  20. Text Spacing • Although HTML ignores extra spacing, there is a ‘special character’ in HTML that gives you that functionality: &nbsp; • 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 &nbsp;&nbsp;and this.</p>

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

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

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

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

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

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

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

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

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

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

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

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

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