3static WebPages

Outlines
HTML tags
Tools Adobe Dreamweaver, Microsoft Share point, Microsoft Publisher CSS (Cascade Style Sheets)
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 be either:

1.
HTML
2.
3. 4.
Image (GIF, JPEG, or PNG)

JavaScript Data for an add-in.
<HTML> <HEAD> <TITLE>My main page</TITLE> </HEAD> <BODY>  <H1>/< H1> <P>My text goes in paragraphs</p> <P>This another paragraph</P> <a href="http://www.razi.ac.ir">This is a link</a> <br> <img src="razi.jpg" width="120" height="128" /> </BODY> </HTML>
4
<HTML> <HEAD> <meta http-equiv=Content-Type content="text/html;charset=UTF-8"> <TITLE>My main page</TITLE> </HEAD> <BODY> <H1>/< H1> <P><font color="blue" size=8>My text </font> goes in paragraphs <BR> Additional tags set <B>boldface</B> and <font color="green"><I>Italic.</I></font></P> <a href="http://www.razi.ac.ir">This is a link</a> <br> <HR size=10 color="RED"> <img src="razi.jpg" width="120" height="128" /> </BODY> </HTML>
6
<HTML> <HEAD> <TITLE>My main page</TITLE> </HEAD> <BODY> <TABLE border=1 width="400" height="300" cellspacing=10 cellpadding=10> <TR align="left"> <TD valign="top">First Data cell</TD> <TD><p align=center><font color="brown" size=2><b>Second Data cell</b><font></p></TD> </TR> <TR > <TD align="center"><font color="RED">Next row</font></TD> <TD align="right" valign="bottom"> <I>Second</I> column </TD> </TR></TABLE> </BODY> </HTML>
<table width = "800px" align = "center"> <tr> <td colspan = "2">  </td> </tr> <tr> <td width = "200px">  </td> <td width = "600px">  </td> </tr> <tr> <td colspan = "2">  </td> </tr> </table>
10
<table width = "800px" align = "center"> <tr> <td rowspan = "3" width = "200px">  </td> <td width = "600px">  </td> </tr> <tr> <td>  </td> </tr> <tr> <td>  </td> </tr> </table>
11
<HTML> <HEAD> <TITLE>My main page</TITLE> </HEAD> <BODY> <DL>Definition list/glossary <DT>Term to define</DT> <DD>Definition</DD> </DL> <UL>Unordered list <LI>First item in list</LI> <LI>Next item</LI> </UL> <OL>Ordered list (numbered) <LI>First item</LI> <LI>Second item</LI> </OL> <p> &copy copyright &</p> </BODY> </HTML>
12
Frames
Document to set frames: use <FRAMESET> not <BODY>
<FRAMESET ROWS=#%, #%, COLS=#%, #%>

<FRAME SRC= NAME= SCROLLING=yes/no> </FRAME> <FRAME SRC= NAME= SCROLLING=yes/no></FRAME>
</FRAMESET>
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.
<A HREF="Syl343.htm" TARGET="main">Introduction to MIS</A>
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 the other HTML. Useful if you want to add a window to the middle of a page and fill it with different information.
14
Save html file

The most common filename extension for files
containing HTML is .html. A common abbreviation of this is .htm, which originated because some early operating systems and file systems, such as DOS and FAT, limited file extensions to three letters. MHTML (.mht), short for MIME HTML , is a web page archive format used to combine resources that are typically represented by external links (such as images, Flash animations, Java applets, audio files) together with HTML code into a single file.
Tools
You 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, )
(Cascade Style Sheets)
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 to Single style sheet.
Styles
Styles
MyStyles.css
The style sheet holds a formal description of the page layout and individual element styles.
By defining the styles in one location, you can
instantly change the style for every page with a few changes.
File.html
<HTML> <HEAD> <LINK href=MyStyles.css" type="text/css" rel="stylesheet"> </HEAD> <BODY> </BODY>
Some Style Options

font
color background
margin-left
margin-right text-decoration text-indent
Styles: Fonts
font-family font-family: font-style font-variant font-weight font-size font font serif, sans-serif, cursive, fantasy, monospace "New Century Schoolbook", Times, serif normal, italic, oblique normal, SMALL-CAPS normal, bold, bolder, lighter, 100, 200, , 900 10pt (px , pc, in, cm) (points, pixels, picas, inches ) combines other attributes font: italic bold 12pt/14pt Times, serif
21
Styles: Colors
color background-color background-image (see below) (see below) URL, none
background-repeat
repeat, repeat-x, repeat-y, no-repeat
background-attachment scroll, fixed background-position background left, center, top, bottom, right 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%))
22
Styles: Text
word-spacing letter-spacing text-decoration vertical-align text-transform text-align text-indent line-height 0.2em 0.1em none, underline, overline, line-through, blink baseline, sub, super, top, text-top, middle, none, Capitalize, upper-case, lower-case left, right, center, justify length or percentage percentage or number
23
Styles: Box
margin-top border-top-width width
margin-right
margin-bottom margin-left
border-right-width
border-bottom-width border-left-width
height
float clear wrap text dont wrap
margin
padding-top padding-right padding-bottom padding-left padding
border-width
border-color border-style border-top border-right border-left border
24
Styles: Lists
display white-space list-style-type list-style-image list-style-position list-style block, in-line, list-item, none normal, pre, nowrap disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none none, URL inside, outside combine others
25
Styles and Tags

You generally build styles for common HTML tags. <BODY> <P> <H1> <H6> 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 applied
in individual situations. Generally, you create a style Class.

<P class=warning>Message in a different color</P> <p style=font-size:20px;font-color:red>aaaaaa</p>
26
Embedded CSS
<html><head> <style type="text/css>
A:hover{color:red} H1 { text-align: center } H1,H2,H3 {color: #990000; font-family: arial,sans-serif; } BODY { background: url(sky.jpg) ; text-align: justify } .WARNING { font-weight:bold; color:red }
Linked CSS
<HTML> <HEAD> <LINK REL=STYLESHEET TYPE="text/css" HREF="mystyles.css"> <TITLE>My main page</TITLE> </HEAD>
</BODY> </HTML>
<html> <head> <style type="text/css"> body { background-color:#d0e4fe; } h1{ color:orange; text-align:center; } p{ font-family:"Times New Roman"; font-size:20px; } </style> </head> <body> <h1>CSS example!</h1> <p>This is a paragraph.</p> </body> </html>
Project
Given you are a member of a company. Design a
Persian website for this company. You should consider the following links:
About us
Contact us
Products Abilities

3static WebPages

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

3static WebPages

Caricato da

Copyright:

Formati disponibili

Outlines

HTML (HyperText Markup Language)

Ultimately, everything sent to the client must be either:

Image (GIF, JPEG, or PNG)

<FRAME SRC= NAME= SCROLLING=yes/no> </FRAME> <FRAME SRC= NAME= SCROLLING=yes/no></FRAME>

Source documents are standard html documents.

The windows/frames are independent of each other.

<A HREF="Syl343.htm" TARGET="main">Introduction to MIS</A>

Save html file

editors. HTML editors

Adobe Dreamweaver (since 1997)

(Cascade Style Sheets)

The Power of Style Sheets

<HTML> <HEAD> <LINK href=MyStyles.css" type="text/css" rel="stylesheet"> </HEAD> <BODY> </BODY>

Some Style Options

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

Styles and Tags

in individual situations. Generally, you create a style Class.

Potrebbero piacerti anche