creating simple pages

21
Creating Simple Pages HTML Overview

Upload: saxton

Post on 07-Feb-2016

49 views

Category:

Documents


0 download

DESCRIPTION

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 - PowerPoint PPT Presentation

TRANSCRIPT

Creating Simple Pages

Creating Simple PagesHTML OverviewObjectives:Students will learn:How HTML tagging worksHow browsers display tagged documentsHow an HTML document is structuredIntroducing..the HTML TagAll web pages are formatted using HTML tagsAn abbreviation of a formatting instruction or page elementMost HTML tags are container tags2 tags (beginning and end)Wrapped around a range of textEnd tag looks same as start tag, except it has a /. the content the tag affects

A few tags are standalone tagsDrop them into place where you want an element to appearStandalone elements do not need end tagsother contentAssembling a Web Page4 Step ProcessSetting up the HTML document.Formatting text.Adding graphical elementsAdding a hypertext link.Step 1: Setting Up The HTML DocumentGiving the document basic structureAll web pages require a set of structural tags that help the browser sort out the parts of the document.HTML documents have two partsHead (also called a header)

Contains descriptive information about the document (title)Body

Contains the actual content that displays in the browser windowYou must identify the document as being written n HTML with tags.Basic HTML skeleton structure

Step 1: Setting Up The HTML DocumentLets Try ItComplete Exercise 6-1 Part 1handoutGiving the page a titleTitle is the name you give a page and it shows up in the title bar at the top of the browser window.Use container tags and it goes within the head of the document Importance of titleListed in Favorites or Bookmarks menuFirst thing search engines look at when indexing pages

Step 1: Setting Up The HTML DocumentSaving and Viewing the pageSave with the ending .htm or .html in order to be recognized by the browser as a web document

Step 1: Setting Up The HTML DocumentLets Try ItComplete Exercise 6-1 Part 2handoutStep 2: Formatting TextLets Try ItComplete Exercise 6 parts 3 and 4Step 3: Adding Graphical ElementsIntroducing attributesAttributes are instructions added within a tag to modify its behavior or appearance.Example: Attributes can appear in standalone tags or container tags. Appear only in the beginning tag of the container tagsExample: affected textAbout AttributesGo only in the opening container tagClosing tag includes just the tag nameMost (not all) take values, which follows an equals sign (=) after the attributes nameValue must be a number, word, string of text, URL or measurementAttribute value should always appear within quotation marks.Several attributes can be added within a single tagSome attributes are requiredSrc within an tag.Step 3: Adding Graphical ElementsLets Try ItComplete Exercise 6 part 5Step 4: Adding a Hypertext LinkLinkingLinks are added with a container tag called an anchor Placed around the text that you want to serve as a linkNeed to specify which page you want to link tohref=Required attributeGive the browser the URL of the target pageLets Try ItComplete Exercise 6 part 6When Good Pages Go BadHaving ProblemsIve changed my document, but when I reload the page in my browser, it looks exactly the same.It could be you didnt 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 youve 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 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 youve specified. If there, then make sure its in a format the browser can display (GIF, JPEG, or PNG) and its named with the proper suffix (.gif, .jpeg, or .png).

Lets Try ItComplete Exercise 6 part 7QuestionsWhat makes a container tag different from a standalone tag?Write out the code for the basic skeleton of a web document.

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

Sunflower.htmlYesNo________________________________index.docYesNo________________________________cooking home page.htmlYesNo________________________________Song_Lyrics.htmlYesNo________________________________games/rubix.htmlYesNo________________________________%whatever.htmlYesNo________________________________QuestionsAll of the following tags are incorrect. Describe what is wrong with each one, then write them correctly.

Congratulations!linked textThis is a new paragraph