Creating and Editing a Web Page

Organization Logo Menu Bar Title Background Text Links Heading Image Links Body of Web Page

Title Web page title that appears on the title bar and task bar Also used for Favorites/Bookmarks Concise yet descriptive explanation of content/purpose Body All information that is displayed by the Web Page Includes: text, graphics, etc. and Background A solid color, picture, or graphic that appears behind all the other elements on the Web page.

Normal Text Default text format used for the main content List Series of text elements usually bulleted or numbered Heading Used to set off paragraphs of text or different sections of a page Size from 1 (largest) - 6 (smallest)

Inline Image Image used in a Web page Image/graphic file is not part of the HTML file Web browser merges the separate graphic files into the page as it is displayed

Image Map Inline image that you define one or more areas as hotspots Hot Spot: an area of an image that activates a function when selected Horizontal Rules Lines that are displayed across a Web page to separate different sections

Link Text, image, or other element that you click to go to another location or file. Text links = hypertext links Usually appears as underlined text Image links must be hovered over.

Begin page by entering the tags that define the structure of the Web page. Says which version of HTML that will be used Minimum tags needed for a Web page

Strict Specified when you want to prohibit the use of deprecated tags. Deprecated tags – earmarked by the W3C for removal because new tags have proven more functional. Transitional Allows the use of deprecated tags

Frameset Used to support frames on a Web page, allows deprecated tags Frame tags have been eliminated by HTML 5 When using these you must include the URL that references the document type definition on the W3C Web site.

and - contains all the content of a Web page The Header and - contains the title and document header info - defines the Unicode transformation Format (UTF) UTF-8 – preferred encoding standard for Web pages, e- mail.

and - used in the header section to indicate the title of the webpage The Body and - All text, images, links, and other content are contained within this set of tags.

Heading. n = size ( ) Paragraph. Inserts a blank line above Unordered list (bulleted) An item within a list Horizontal rule Line break If no closing tag, like line break, add a space then the forward slash

Header NavigationLinks to other parts of the Web site or externally Section Major content area Article Content that represents an independent piece of information Aside Content that is tangential (side issue) to the main topic Footer Copyright and date last updated information.

Unordered list (bulleted list) (disc ) Item 1  º Ordered list (numbered list) (default number – 1., 2.) Item 1 a. b. i. ii. A. B. I. II.

Definition list Off sets information in a dictionary-like style - start and end a definition list - identify a term - identify the definition of the term above. HTML Hypertext Markup Language HTML Hypertext Markup Language Allows easier ID of terms (bolds it)

Remember! – a Style is a rule that defines the appearance of a single element on a Web page. Cascading Style Sheet (CSS) – a SERIES of rules that defines the style for a Web page or site. 3 types of style sheets: inline embedded (internal) external (linked)

Inline: adds a style to an individual tag (heading or paragraph) Embedded: changes the style of one page Added within the tags External: a text file that contains all the styles you want to use for multiple pages in a Web site. Order of Precedence: Inline - 1 Embedded - 2 External - 3

Selector: the element (what you are changing) Declaration: how element should appear A declaration must include at least one type of style (property) to apply to the selected element. Ex: font-family, font-color Each property needs a value based on that style. Ex.: Garamond, navy

TypeUse Graphics Interchange Format (GIF)Few colors (<256) Allows transparent background Portable Network Graphics (PNG)Use for all types of images Variation in transparency Joint Photographic Experts Group (JPEG)Many colors (>256), like photographs

Attributes: define/change additional characteristics for a tag. AttributeFunction altAlternative text to display when an image is being loaded Useful for screen readers Brief representation of the purpose 50 characters or fewer heightDefines the height of the image in pixels Improves loading time srcDefines the URL of the image to be loaded widthDefines the width of an image in pixels Improves loading time

Color property: change the color of various elements on the Web page Hexadecimal: 6 digit code number that is used to specify a color for background, text, or links. After the <h2 add: style=“color: #384738” “Text”

1.Type beginning information to set up a Web page. Rock Climbing Fun Space Space

Rock Climbing Fun has recently opened a school at the base of Mount Rainier. We have programs for advanced rock climbers as well as for beginners. Rock climbing is a widely popular sport, especially in the state of Washington. Call CLIMB for more information. Equipment needed to get started: Space SAVE!!! – Chapter 2 folder File – Save As – Rockclimbing.html

View Web page Run – Launch in IE Double -click on document in folder

Add the following code to add an unordered list after the heading but before the closing tag for the article: Comfortable climbing shoes Backpack Harness Change the bullet style if you want!

After the closing section tag: Rock Climbing Fun, 3737 Harrison Lane, Issawak, WA Save and reload Web Page

Between the open tags for BODY and SECTION add: SAVE and RELOAD

After the <h2 add: style=“color: #384738” “Equipment needed to get started:

Save and run your document. Does it look right?

Above the footer section: In the footer opening tag add: style=“text-align: center; font-style: italic”

W3C offers a validator to make sure your code is correct! Validator.W3.org Click on Validate by file upload Browse – select your file in the Ch. 2 folder Click Check! You will have 1 or 2 Warnings