1 / 19

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. Hypertext Markup Language.

sacha-vazquez
Télécharger la présentation

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 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 • Firefox

  3. 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. 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. <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. &nbsp – adds a space!

  6. <P> - Empty tag that causes a break (twice) <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

  7. Attribute Syntax • Attribute - Enhances HTML tag (colors, size, font, etc.) • Value - Assigns a value to an attribute (what color, what size, what font, etc.) • 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

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

  9. HORIZONTAL RULE TAGS <HR> Empty tag that places a horizontal rule 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

  10. <!- - 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

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

  12. GIF vs. JPEG

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

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

  15. 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/Italicized TEXT IS WHAT YOU DECIDE TO CALL YOUR LINK!)

  16. Table Tags: <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 specify a table cell Table Attributes: (These attributes can only be applied to an entire table!) BORDER - specifies a visible border and its thickness; value range is 1 - 100 pixels BORDERCOLOR - specifies the color of the border WIDTH – specifies the width of the entire table; value can be specified in pixels or percent CELLPADDING - specifies the amount of spacing inside table cells; value range is 1 - 100 pixels CELLSPACING - specifies the amount of spacing between table cells; value range is 1 - 100 pixels

  17. Cell/Row Attributes: (These attributes can be applied to a row/cell or the entire table!) ALIGN - Specifies the horizontal alignment of text within row or individual cell; values are left, center, or right. When applied to an entire table, it centers the table BGCOLOR - Specifies the fill color for rows, cells, or the entire table

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

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

More Related