1 / 38

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

leann
Download Presentation

So you want to build a website?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related