Documente Academic
Documente Profesional
Documente Cultură
HTML tags
Tools Adobe Dreamweaver, Microsoft Share point, Microsoft Publisher CSS (Cascade Style Sheets)
HTML
2.
3. 4.
<HTML> <HEAD> <TITLE>My main page</TITLE> </HEAD> <BODY> <!--comment <h1> to <h6> tags. H1 being the largest, H6 smallest.--> <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"> <!-- Logo Here --> </td> </tr> <tr> <td width = "200px"> <!-- Menu Here --> </td> <td width = "600px"> <!-- Content Here --> </td> </tr> <tr> <td colspan = "2"> <!-- Footer Here --> </td> </tr> </table>
10
<table width = "800px" align = "center"> <tr> <td rowspan = "3" width = "200px"> <!-- Left Hand Side Content Here --> </td> <td width = "600px"> <!-- Logo Here --> </td> </tr> <tr> <td> <!-- Content Here --> </td> </tr> <tr> <td> <!-- Footer Here --> </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> © copyright &</p> </BODY> </HTML>
12
Frames
Document to set frames: use <FRAMESET> not <BODY>
<FRAMESET ROWS=#%, #%, COLS=#%, #%>
</FRAMESET>
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
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
Syntax highlighting (PHP, C#, JSP, JAVA, JAVA SCRIPT, ACTION SCRIPT, ASP. NET, CSS, XML, WML, VB SCRIPT, )
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
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
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
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