3Static WebPages
Transcript of 3Static WebPages
-
8/2/2019 3Static WebPages
1/31
-
8/2/2019 3Static WebPages
2/31
Outlines HTML tags
Tools
Adobe Dreamweaver, Microsoft Share point, MicrosoftPublisher
CSS (Cascade Style Sheets)
-
8/2/2019 3Static WebPages
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.
-
8/2/2019 3Static WebPages
4/31
4
My main page
My text goes in paragraphs
This another paragraph
This is a link
-
8/2/2019 3Static WebPages
5/31
-
8/2/2019 3Static WebPages
6/31
6
My main page
My text goes in paragraphs
Additional tags set boldface and Italic.
This is a link
-
8/2/2019 3Static WebPages
7/31
-
8/2/2019 3Static WebPages
8/318
My main page
First Data cell
Second Datacell
Next row
Second column
-
8/2/2019 3Static WebPages
9/31
-
8/2/2019 3Static WebPages
10/3110
-
8/2/2019 3Static WebPages
11/3111
-
8/2/2019 3Static WebPages
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
© copyright &
-
8/2/2019 3Static WebPages
13/31
-
8/2/2019 3Static WebPages
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.
-
8/2/2019 3Static WebPages
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.
-
8/2/2019 3Static WebPages
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, )
-
8/2/2019 3Static WebPages
17/31
(Cascade Style Sheets)
-
8/2/2019 3Static WebPages
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
-
8/2/2019 3Static WebPages
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
-
8/2/2019 3Static WebPages
20/31
Some Style Options font
color
background
margin-left
margin-right
text-decoration
text-indent
-
8/2/2019 3Static WebPages
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
-
8/2/2019 3Static WebPages
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%))
-
8/2/2019 3Static WebPages
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
-
8/2/2019 3Static WebPages
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
-
8/2/2019 3Static WebPages
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
-
8/2/2019 3Static WebPages
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
-
8/2/2019 3Static WebPages
27/31
Embedded CSS
-
8/2/2019 3Static WebPages
28/31
Linked CSS
My main page
-
8/2/2019 3Static WebPages
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.
-
8/2/2019 3Static WebPages
30/31
-
8/2/2019 3Static WebPages
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