html5-img
1 / 26

Web Page Design

Web Page Design. Basics of HTML Dreamweaver – creating a web page Fireworks – creating graphics for web pages Flash – creating animated movies for the internet. HTML. HTML. Hypertext Markup Language.

benjy
Download Presentation

Web Page Design

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. Web Page Design • Basics of HTML • Dreamweaver – creating a web page • Fireworks – creating graphics for web pages • Flash – creating animated movies for the internet

  2. HTML HTML Hypertext Markup Language Hypertext is the method by which documents, files, and multimedia data are organized, referenced, and navigated via the World Wide Web. HTML is used to create Web Pages. HTML tags determine the colors, pictures, and backgrounds on Web Pages • HTML tags work with a web browser • Internet Explorer • Netscape Navigator

  3. HTML/Tag Types Getting Started in HTML • An HTML file can be created in Textpad or other text applications • File is saved with htm as an extension • HTML is not case sensitive – you can use upper or lower case letters for tags • All tags are enclosed in angle brackets; e.g., <HEAD> • There are two types of tags 1. Container - has an opening <> & closing tag </> 2. Empty - has only an opening tag

  4. Template The Basic Template <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Document structure tags that are placed around entire document Preliminary tags that are placed before main body of page Tags placed around all text, graphics, etc., that are not in the Head All of these are container tags

  5. Example: Template

  6. Basic Tags <BR> Empty tag that ends a line <TITLE> </TITLE> Container tags that name your page and appear at the top of the browser’s interface; placed inside the <HEAD> </HEAD> tags. <H1> </H1> Container tags that place a heading; these range from H1 through H6. (H1 is the Largest) <CENTER> </CENTER> Container tags that center text. <MARQUEE> </MARQUEE> Container tags that make text scroll across your page.

  7. Style Tags <P> - Empty tag that causes a break (two lines) <NOBR> </NOBR> - Container tags that ensure there will not be a break to the next line Physical Character Style: browser dependent! <B> </B> - Container tags that bold text <I> </I> - Container tags that italicize text <U> </U> - Container tags that underline text <SUP> </SUP> - Container tags that superscript text <SUB> </SUB> - Container tags that subscript text

  8. &nbsp This is used to add in spaces BEFORE or AFTER a word or picture (or to add in multiple spaces!) It must also be used when creating multiple line breaks.

  9. Start captain hook (work through step by step as we go thru the next slides),

  10. Attributes Attributes Attributes Help define and customize many different tags. Examples of attributes: Size, Color, Font and Width

  11. Attributes Attribute Syntax • Attributes are placed within the opening tag of a container tag. • Attributes must be separated from the tag element by a single space only. • Multiple attributes of a single tag may be presented in any order. • Multiple attributes must be separated by a single space. • If an attribute has a value consisting of more than one word, enclose the attribute value in quotation marks. Tag: Tag: <HR WIDTH=75%> <FONT FACE=”Book Antiqua”> HR – tag element FONT – tag element WIDTH – attribute FACE - attribute 75% - value Book Antiqua – value

  12. Horizontal Rule HORIZONTAL RULE TAGS <HR> Empty tag that places a horizontal rule (a line) on a page; used to separate page into different sections. Attributes of the <HR> tag: Width - An attribute that sets the width of a horizontal rule (sample values: “25%”, “50%”) Size- An attribute that sets the height of a horizontal rule in pixels (sample values: “20”, “30”) Color - An attribute that changes the line’s color NOSHADE – makes a solid line

  13. Body Tag Attributes Other Attributes for BODY tags: TEXT - attribute that specifies the color of the text in the body; values of TEXT are the RGB colors BGCOLOR - attribute that specifies the background color of the page; values are the RGB colors BACKGROUND - attribute that specifies a background image; value is the image path

  14. Font Tag <!- - Comment tag allows you to place text that you do not wish to have appear in your Web page. - - > <FONT> </FONT> Container tags that allow you to change the text, with the following attributes: • SIZE - size of font; values can be 1 - 7 or +1-7, -1-7 • COLOR- Color of text; values can be 1 of 16 colors or can be specified by RGB hexadecimal • FACE - Font type; values can be any true Type font name

  15. Image Tag Inline Images To insert an image into a web page: <IMG SRC=“NameOfImage.ImageType”> Example: <IMG SRC=“dog.jpg”> GIF • Graphics Interchange Format • Most common image format found on the Internet • Advantage is compressed file format • Disadvantage is maximum color depth of only 256 (8 bits) • Example is drawing.gif JPEG • Joint Photographic Experts Group • Advantage is maximum color depth of 16.7 million (24 bits) • Disadvantage is compression algorithm loses the quality of an image • Example is picture.jpg

  16. GIF vs. JPEG GIF vs. JPEG

  17. Exercise 1

  18. List Tags Logical Character Styles <EM> </EM> Container tags to emphasize text <STRONG> </STRONG> Container tags to make text stand out Lists 1. Ordered 2. Unordered 3. Definition • <OL> </OL> Container tags around list • <LI> Empty tag for each list item • <UL> </UL> Container tags around list • <LI> Empty tag for each list item • <DL> </DL> Container tags around list • <DT> Empty tag for the term to be defined • <DD> Empty tag for the definition

  19. Image Attributes Other attributes for IMG tags ALT - Alternate text that is displayed if user has turned off images; text also appears when the mouse moves over the image ALIGN - can be set to right, left, or center; aligns the image HSPACE - attribute that adds space to both the left and right of the image; value is 1 - 100 pixels VSPACE - attribute that adds space to the top and bottom of the image; value is 1 - 100 pixels HEIGHT – How “Tall” the picture is (Forced) WIDTH – How “Wide” the picture is (Forced)

  20. Start “practice assignment (lists) • When done, add on using the next slide’s info (as a class)

  21. Hyperlinks HYPERLINKS within your document: The anchor tag to create the hyperlink to another location: <A HREF=“#SPOT”> Go to Spot </A> The anchor tag to identify the exact location to which you want to link: <A NAME=“SPOT”> This is the Spot! </A> (THE RED TEXT IS WHAT YOU CHANGE TO THE NAME OF YOUR LINK)

  22. Hyperlinks Other HYPERLINKS: To create a link to another Web page on your computer: <A HREF=“AnotherPage.htm”> Another Page </A> To create a link to a URL or Web page anywhere on the WWW: <A HREF=“http://www.microsoft.com”> Microsoft </A>

  23. Hyperlink Attr. To Change Colors of HYPERLINKS, use the following attributes of the <BODY> tag: * LINK – specifies the color of the link as it first sits on your page. *ALINK – specifies the color of an active link on your page *VLINK – specifies the color of a visited link on your page EXAMPLE: <BODY LINK = “white” ALINK=“cyan” VLINK=“yellow”> CLICK! </BODY>

  24. Exercise 2

  25. Tables <TABLE> </TABLE> Container tags for an HTML table <TR> </TR> Container tags that specify a table row <TD> (</TD>) Container tags (closing tag optional) that specifies a table cell BORDER - Attribute that specifies a visible border and its thickness; value range is 1 - 100 pixels BORDERCOLOR - Attribute that specifies the color of the border CELLPADDING - Attribute that specifies the amount of spacing inside table cells; value range is 1 - 100 pixels Tables

  26. Tables Cont. CELLSPACING - Attribute that specifies the amount of spacing between table cells; value range is 1 - 100 pixels ALIGN - Specifies the horizontal alignment of text within a row or individual cell; values are left, center, or right. WIDTH - Specifies the width of the table relative to the width of the web page; value range is 1 - 100 % BGCOLOR - Specifies the fill color for rows or cells

More Related