3static webpages

8/2/2019 3Static WebPages

1/31


2/31

Outlines HTML tags

Tools

Adobe Dreamweaver, Microsoft Share point, MicrosoftPublisher

CSS (Cascade Style Sheets)


3/31

HTML (HyperText Markup Language) The browser is essentially an intelligent display

page. It displays text and graphics.

Add-ins can handle audio and video.

Ultimately, everything sent to the client must beeither:

1. HTML

2. Image (GIF, JPEG, or PNG)

3. JavaScript

4. Data for an add-in.


4/31

4

My main page

My text goes in paragraphs

This another paragraph

This is a link


5/31


6/31

6

My main page

My text goes in paragraphs

Additional tags set boldface and Italic.

This is a link


7/31


8/318

My main page

First Data cell

Second Datacell

Next row

Second column


9/31


10/3110


11/3111


12/31

12

My main page

Definition list/glossary

Term to define

Definition

Unordered listFirst item in list

Next item

Ordered list (numbered)

First itemSecond item

&copy copyright &


13/31


14/31

14

Frames

Document to set frames: use not

Source documents are standard html documents. The windows/frames are independent of each other.

Common use: a top or left frame as a table of contents.

Click a link in the TOC and the main window is updated.

You need to specify the frame in the link.

Introduction to MIS If users have a Microsoft browser, you can also use IFrames, which

enable you to display a separate page in a frame that floats within theother HTML. Useful if you want to add a window to the middle of apage and fill it with different information.


15/31

Save html file The most common filename extension for files

containing HTML is .html. A common abbreviation ofthis is .htm, which originated because some earlyoperating systems and file systems, such as DOS andFAT, limited file extensions to three letters.

MHTML (.mht), short for MIME HTML , is a webpage archive format used to combine resources that aretypically represented by external links (such as images,Flash animations, Java applets, audio files) together

with HTML code into a single file.


16/31

ToolsYou can create them with text editors or with Web

editors.

HTML editors Microsoft FrontPage (discontinued)

Microsoft Share Point Designer (since2007)

Microsoft publisher (for templates only, since 1991)

Microsoft Visual Studio (since 1995) Adobe Dreamweaver (since 1997)

Syntax highlighting (PHP, C#, JSP, JAVA, JAVA SCRIPT,ACTION SCRIPT, ASP. NET, CSS, XML, WML, VB SCRIPT, )


17/31

(Cascade Style Sheets)


18/31

The Power of Style Sheets A style sheet holds layout and element style definitions for an entire

website in one location.

With a few simple changes, you can instantly alter the appearance

of every page in your website. Styles provide vastly more control over layout than HTML.

The style sheet separates your design from the HTML and the code,making it easier to understand and alter all three.

HTML pages linked toSingle style sheet.

Styles


19/31

Styles The style sheet holds a formal description of the

page layout and individual element styles.

By defining the styles in one location, you caninstantly change the style for every page with a fewchanges.

MyStyles.css

File.html


20/31

Some Style Options font

color

background

margin-left

margin-right

text-decoration

text-indent


21/31

21

Styles: Fontsfont-family serif, sans-serif, cursive, fantasy, monospacefont-family: "New Century Schoolbook", Times, serif

font-style normal, italic, oblique

font-variant normal, SMALL-CAPS

font-weight normal, bold, bolder, lighter, 100, 200, , 900

font-size 10pt (px , pc, in, cm) (points, pixels, picas, inches )

font combines other attributesfont font: italic bold 12pt/14pt Times, serif


22/31

22

Styles: Colorscolor (see below)

background-color (see below)

background-image URL, none

background-repeat repeat, repeat-x, repeat-y, no-repeat

background-attachment scroll, fixed

background-position left, center, top, bottom, right

background combines others

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,purple, red, silver, teal, white, and yellow.

#rrggbb (e.g., #00ad00)#rgb (e.g., #0a0)

rgb(x,x,x) x is an integer between 0 and 255 (e.g., rgb(0,107,0))rgb(y%,y%,y%) y is between 0.0 and 100.0 (e.g., rgb(0%,70%,0%))


23/31

23

Styles: Textword-spacing 0.2emletter-spacing 0.1em

text-decoration none, underline, overline, line-through, blink

vertical-align baseline, sub, super, top, text-top, middle,

text-transform none, Capitalize, upper-case, lower-case

text-align left, right, center, justify

text-indent length or percentageline-height percentage or number


24/31

24

Styles: Boxmargin-topmargin-right

margin-bottom

margin-left

margin

padding-top

padding-right

padding-bottom

padding-left

padding

border-top-width

border-right-width

border-bottom-width

border-left-width

border-width

border-color

border-style

border-top

border-right

border-left

border

width

height

float wrap text

clear dont wrap


25/31

25

Styles: Listsdisplay block, in-line, list-item, nonewhite-space normal, pre, nowrap

list-style-type disc, circle, square, decimal, lower-roman,

upper-roman, lower-alpha, upper-alpha, none

list-style-image none, URL

list-style-position inside, outside

list-style combine others


26/31

26

Styles and TagsYou generally build styles for common HTML tags.

This technique means pages use standard HTML tags,and you can instantly alter the style and appearance.

You can also create custom styles that can be appliedin individual situations. Generally, you create a styleClass.

Message in a different color

aaaaaa


27/31

Embedded CSS


28/31

Linked CSS

My main page


29/31

body{

background-color:#d0e4fe;}h1{

color:orange;text-align:center;

}p{

font-family:"Times New Roman";font-size:20px;

}

CSS example!

This is a paragraph.


30/31


31/31

Project Given you are a member of a company. Design a

Persian website for this company. You should considerthe following links:

About us

Contact us

Products

Abilities

3static webpages

Documents