html,css and bootstrap
DESCRIPTION
In our presentation of the history, structure and use of html and css and bootstrap studied.TRANSCRIPT
ک دان م ه
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ل
