1 / 21

Creating Simple Pages

Creating Simple Pages. HTML Overview. Objectives:. Students will learn: How HTML tagging works How browsers display tagged documents How an HTML document is structured. Introducing…..the HTML Tag. All web pages are formatted using HTML tags

saxton
Download Presentation

Creating Simple Pages

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. Creating Simple Pages HTML Overview

  2. Objectives: • Students will learn: • How HTML tagging works • How browsers display tagged documents • How an HTML document is structured

  3. Introducing…..the HTML Tag • All web pages are formatted using HTML tags • An abbreviation of a formatting instruction or page element • Most HTML tags are container tags • 2 tags (beginning and end) • Wrapped around a range of text • End tag looks same as start tag, except it has a /. • <tag>the content the tag affects </tag> • A few tags are standalone tags • Drop them into place where you want an element to appear • Standalone elements do not need end tags • <tag>other content

  4. Assembling a Web Page • 4 Step Process • Setting up the HTML document. • Formatting text. • Adding graphical elements • Adding a hypertext link.

  5. Step 1: Setting Up The HTML Document • Giving the document basic structure • All web pages require a set of structural tags that help the browser sort out the parts of the document. • HTML documents have two parts • Head (also called a header) • <head> • Contains descriptive information about the document (title) • Body • <body> • Contains the actual content that displays in the browser window • You must identify the document as being written n HTML with <html> tags.

  6. Step 1: Setting Up The HTML Document Basic HTML skeleton structure <html> <head> </head> <body> </body> </html>

  7. Let’s Try It Complete Exercise 6-1 Part 1handout

  8. Step 1: Setting Up The HTML Document • Giving the page a title • Title is the name you give a page and it shows up in the title bar at the top of the browser window. • Use <title> container tags and it goes within the head of the document • Importance of title • Listed in Favorites or Bookmarks menu • First thing search engines look at when indexing pages

  9. Step 1: Setting Up The HTML Document • Saving and Viewing the page • Save with the ending .htm or .html in order to be recognized by the browser as a web document

  10. Let’s Try It Complete Exercise 6-1 Part 2handout

  11. Step 2: Formatting Text • Let’s Try It • Complete Exercise 6 parts 3 and 4

  12. Step 3: Adding Graphical Elements • Introducing attributes • Attributes are instructions added within a tag to modify its behavior or appearance. • Example: <tag attribute=“value”> • Attributes can appear in standalone tags or container tags. • Appear only in the beginning tag of the container tags • Example: <tag attribute=“value”>affected text</tag>

  13. Step 3: Adding Graphical Elements • About Attributes • Go only in the opening container tag • Closing tag includes just the tag name • Most (not all) take values, which follows an equals sign (=) after the attributes name • Value must be a number, word, string of text, URL or measurement • Attribute value should always appear within quotation marks. • Several attributes can be added within a single tag • Some attributes are required • Src within an <img> tag.

  14. Let’s Try It Complete Exercise 6 part 5

  15. Step 4: Adding a Hypertext Link • Linking • Links are added with a container tag called an anchor <a>…</a> • Placed around the text that you want to serve as a link • Need to specify which page you want to link to • href= • Required attribute • Give the browser the URL of the target page

  16. Let’s Try It Complete Exercise 6 part 6

  17. When Good Pages Go Bad • Having Problems • “I’ve changed my document, but when I reload the page in my browser, it looks exactly the same.” • It could be you didn’t save your HTML document before reloading or you saved it in a different directory. • “All the text on my page is HUGE!!!” • Did you start a heading tag and forget to close it? Make sure each tag you’ve used has its end tag. Also, make sure that each end tag has a slash (/). • “Half of my page has disappeared!” • This could happen if you are missing a closing bracket (>) or a quotation mark within a tag. This is a common error when writing HTML code by hand. • I put in a graphic using the <img> tag, but all that shows up is a broken-graphic icon. • The broken graphic could mean that the browser is not finding the graphic. Make sure the URL to the graphic is correct. Make sure the graphic is actually in the directory you’ve specified. If there, then make sure it’s in a format the browser can display (GIF, JPEG, or PNG) and it’s named with the proper suffix (.gif, .jpeg, or .png).

  18. Let’s Try It Complete Exercise 6 part 7

  19. Questions • What makes a container tag different from a standalone tag? • Write out the code for the basic skeleton of a web document.

  20. Questions Mark whether each of these filenames is an acceptable name for a web page by circling “Yes” or “No”. If it is not acceptable, provide the reason why.

  21. Questions • All of the following tags are incorrect. Describe what is wrong with each one, then write them correctly. • <img “birthday.jpg”> • <i>Congratulations!<i> • <a href=“file.html”>linked text</a href=“file.html”> • <p>This is a new paragraph<\p>

More Related