Html,css and bootstrap

Post on 14-Jun-2015

801 views 2 download

description

In our presentation of the history, structure and use of html and css and bootstrap studied.

Transcript of Html,css and bootstrap

ک دان م ه

HTML م1. فا

تار کی تگ . 2 سا

ت .3

م .4

ج.5 ی را و ی تگ

CSS

م.1 فا

تار کی.2 سا

ی .3 و

رپ وت م .1 فا

ت .2 کا ا

ش رو .3 ده آ

یاز.1

ت.2 نا

داع.3 ا

ه

•HTML 2.0•HTML 3.2•HTML 4.0

HTML 4.0 Strict -HTML 4.0 Transitional -

HTML 4.0 Frameset -•HTML5

دارد تا ا•RFC 1866

• <!DOCTYPE HTML PUBLIC "‐//IETF//DTD HTML Strict//EN"><!DOCTYPE HTML PUBLIC "‐//IETF//DTD HTML//EN">

ط • و ده وم ارا وبر• <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 3.2 Final//EN">

• <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.0//EN""http://www.w3.org/TR/REC‐html40/strict.dtd">

• <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC‐html40/loose.dtd">

• <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.0  Frameset//EN""http://www.w3.org/TR/REC‐html40/frameset.dtd">

HTML5

ه وب تار سا

تگ Attribute

value

<img src="logo.gif" alt="logo" />

value

ن دی ی واع تگ ا• xamin<b>salam</b> xamin salam

• xamin<i>salam</i> xamin salam

• xamin<u>salam</u> xamin salam

• other<strike>os!</strike> xamin other os! xamin

• salam<sub>xamin</sub> new os! salam xaminnew os!

• salam<sup>xamin</sup> new os! salam xamin new os!

• salam<tt>xamin</tt> salam xamin

ر یی

<ol><li>Coffee</li></ol>

ی ر <ul><li>Coffee</li></ul>

ی و ت <dl><dt>Coffee</dt><dd>Black hot drink</dd></dl>

م

• <form action="demo_form.asp">• First name: <input type="text" name="FirstName" value=""><br>• Last name: <input type="text" name="LastName" value=""><br>• <input type="submit" value="Submit">• </form>

• <select>• <option value="salam">salam</option>• <option value="hi">hi</option>• <option value="Hola">Hola</option>• <option value="Ciao">Ciao</option>• </select>

• <select>• <optgroup label="ahvalporsi irani">• <option value="salam">salam</option>• <option value="hi">durud</option>• </optgroup>• <optgroup label="External greeting">• <option value="hola">hola</option>• <option value="ciao">ciao</option>• </optgroup>• </select>•

ج ی را تگ • <img src="logo.jpg" alt="logo" />• <a href="url">Link text</a> • <p>This is my first paragraph</p>• <h1>Heading 1</h1>

• <h1>New Technology</h1>• <div style="color:#0000FF">• <h3>xamin</h3>• <p>The new os from iran.</p>• </div>

css

css

ه

.1Css1

.2Css2

.3css2.1

.4css3

ی 3 ن اسا css رtag

Class

ID

Tag

body {margin: 10px 0;}

Class

;} px; color: red15red {margin: .

value

ی دا ف کالس=ه

ID

#wrapper {margin :0 auto;}

Compound

#content p {margin :0;}

ی ه cssل

تار کی سا

<!DOCTYPE html><html><head><style>body {

background-color: #d0e4fe;}h1 {

color: orange;text-align: center;

}p {

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

}</style></head><body><h1>My First CSS Example</h1><p>This is a paragraph.</p><link></body></html>

ی ت cssد headود ی ه .و

د ل ت دا > body<و یا از م فاده .ا

ورات ک آ cssار دادن د ی و دادن ی ن

ی سا ی د cssکار

Background Color

body {background-color: #b0c4de;

}</style></head><body><h1>My CSS web page!</h1><p>Hello world! This is a W3Schools.com example.</p>

Text Color

body {color: red;

}h1 {

color: #00ff00;}p.ex {

color: rgb(0,0,255);}</style></head>

CSS Listsul.a {list-style-type: circle;

}ul.b {

list-style-type: square;}ol.c {

list-style-type: upper-roman;}ol.d {

list-style-type: lower-alpha;}</style></head>

CSS Margin

p {background-color: yellow;

}

p.ex {margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 50px;

}

• The @media Rule

ه ه ر Bootstrapک

ت سال و ر، 2011ا و

Bootstrap=دازود راه

تار کی سا

HTML

CSS

JAVA SCRIPT

Bootstrapل

مابا و پاس از

Azimi.2549@gmail.com