1 / 52

وزارة التربية والتعليم الإدارة العامة للكمبيوتر التعليمي

وزارة التربية والتعليم الإدارة العامة للكمبيوتر التعليمي. HTML Expression web محمد يوسف الصادق الكمبيوتر التعليمي. HTML, XML,. Client Side. Server Side. JavaScript VBScript DHTML Java Applets. CGI ASP Java Servlets Asp.net php. World Wide Web. H yper T ext M arkup L anguage.

joseph-atkinson
Download Presentation

وزارة التربية والتعليم الإدارة العامة للكمبيوتر التعليمي

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. وزارة التربية والتعليمالإدارة العامة للكمبيوتر التعليمي HTML Expression web محمد يوسف الصادق الكمبيوتر التعليمي

  2. HTML, XML, ... Client Side Server Side JavaScript VBScript DHTML Java Applets CGI ASP Java Servlets Asp.net php World Wide Web

  3. HyperText Markup Language • Markup Language: to format text and information for display by a Web browser • Main Components of HTML • Tags • Text and information <p><font size="20">Bioinformatics</font></p> <p><strong>Bioinformatics</strong></p> <p><em>Bioinformatics</em></p> <blockquote> <p>Bioinformatics</p> </blockquote> <ol> <li>Bioinformatics</li> </ol> <ul> <li>Bioinformatics</li> </ul>

  4. Http protocol (HyperText Transfer Protocol) How HTML is Displayed Browser Command HTML URL:http://www.google.com HTML Display render Text & binary data

  5. HTML CGI ASP PHP … Browser Command URL:http://www.yahoo.com http request User http response How HTML is Displayed – from remote site HTML Display DB Remote Web Server Client Site

  6. How HTML is Displayed – from client site HTML Browser Command URL:c:\my_page.html User HTML Display Client Site

  7. HTTP: Hypertext Transfer Protocol • HTTP is behind every request for a web document or graph, every click of a hypertext link, and every submission of a form • HTTP specifies how clients request data, and how servers respond to these requests. See also, http://www.w3.org/Protocols/

  8. HTML file structure • <html> <head> <title>web page title</title> </head> <body>statement ……. </body></html> • Practice • Output: hello world! • http://localhost/html_practice/helloworld.html

  9. HTML ITEMS • HTML Basics • Introduction • Elements • Basic Tags • Formatting • Entities • Links • Frames • Tables • Lists • Forms • Images • Background • Colors • Colorvalues • Colornames

  10. HTML ITEMS • HTML Advanced • Layout • Fonts • HTML 4.0 Why • Styles • Head • Meta • URLs • Scripts • Attributes • Events • URL-encode • Webserver • Summary

  11. HTML • Basics • HTML Introduction • <html> • <head> • <title>Title of page</title> • </head> • <body> • This is my first homepage. <b>This text is bold</b> • </body> • </html>

  12. HTML • Basics • HTML Elements • <b>This text is bold</b> is an element. • <body> • This is my first homepage. <b>This text is bold</b> is an element • </body>

  13. HTML • Basics • HTML Basic Tags

  14. HTML • Basics • HTML Basic Tags • Headings • Headings are defined with the <h1> to <h6> tags. • <h1> defines the largest heading. <h6> defines the smallest • heading. • <h1>This is a heading</h1> • <h2>This is a heading</h2> • <h3>This is a heading</h3> • <h4>This is a heading</h4> • <h5>This is a heading</h5> • <h6>This is a heading</h6>

  15. HTML • Basics • HTML Basic Tags • Paragraphs • Paragraphs are defined with the <p> tag. • <p>This is a paragraph</p> • <p>This is another paragraph</p>

  16. HTML • Basics • HTML Basic Tags • Line Breaks • The <br> tag is used when you want to end a line, but don't want • to start a new paragraph. The <br> tag forces a line break • wherever you place it. • <p>This <br> is a para<br>graph with line breaks</p>

  17. HTML • Basics • HTML Basic Tags • Comments in HTML • The comment tag is used to insert a comment in the HTML source • code. A comment will be ignored by the browser. You can use • comments to explain your code, which can help you when you edit • the source code at a later date. • <!-- This is a comment -->

  18. HTML • Basics • HTML Formatting • Text Formatting Tags <b>: Defines bold text • <big>: Defines big text • <em>: Defines emphasized text •  <i>: Defines italic text • <small>: Defines small text • <strong>: Defines strong text • <sub>: Defines subscripted text • <sup>: Defines superscripted text • <ins>: Defines inserted text • <del>: Defines deleted text

  19. HTML • Basics • HTML Formatting • Computer Output Tags <code>: Defines computer code text • <kbd>: Defines keyboard text  • <samp>: Defines sample computer code • <tt>: Defines teletype text • <var>: Defines a variable • <pre>: Defines preformatted text

  20. HTML • Basics • HTML Entities • Some characters have a special meaning in HTML, like the less than sign • (<) that defines the start of an HTML tag. If we want the browser to • actually display these characters we must insert character entities in the • HTML source. • A character entity has three parts: an ampersand (&), • an entity name or a # and an entity number, and finally a semicolon (;). • The Most Common Character Entities. • non-breaking space &nbsp; &#160; • < less than &lt; &#60; • Some Other Commonly Used Character Entities. • ¢ cent &cent; &#162; • £ pound &pound; &#163; • ¥ yen &yen; &#165;

  21. HTML • Basics • HTML Links • The Anchor Tag and the Href Attribute. • <a href="url">Text to be displayed</a> • <a href="http://www.w3schools.com/">Visit W3Schools!</a> • <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> • <a name="label">Text to be displayed</a> • <a href="#tips">Jump to the Useful Tips Section</a>

  22. HTML • Basics • HTML FramesWith frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. • The Frameset Tag. • - The <frameset> tag defines how to divide the window into frames • - Each frameset defines a set of rows or columns • - The values of the rows/columns indicate the amount of screen area • each row/column will occupy • The Frame Tag. • - The <frame> tag defines what HTML document to put into each frame

  23. HTML • Basics • HTML Frames • <frameset cols="25%,75%"> •    <frame src="frame_a.htm"> •    <frame src="frame_b.htm"> • </frameset>

  24. HTML • Basics • HTML Tables tags • Table • Th • Tr • Td • Caption • Colgroup • Col • Thead • Tbody • tfoot

  25. HTML • Basics • HTML Tables • <table border = "1"><thead><tr><td>This text is in the THEAD</td></tr></thead><tfoot><tr><td>This text is in the TFOOT</td></tr></tfoot><tbody><tr><td>This text is in the TBODY</td> </tr></tbody></table>

  26. HTML • Basics • HTML Tables • <table border="1"> <caption>This is a caption</caption> • <tr><th>Header 1</th><th>Header 2</th></tr><colgroup span="3" style="color:#FF0000;"><col width="20"></col><col width="50"></col><col width="80"></col></colgroup><tr><td>1</td> <td>2</td> <td>3</td> <td>4</td></tr></table>

  27. HTML • Basics • HTML Lists • Unordered Lists. • <ul> <li>Coffee</li> <li>Milk</li> </ul> • Ordered Lists. • <ol> <li>Coffee</li> <li>Milk</li> </ol> • Definition Lists. • <dl> • <dt>Coffee</dt> • <dd>Black hot drink</dd> • <dt>Milk</dt> • <dd>White cold drink</dd> • </dl>

  28. HTML • Basics • HTML Forms tages A form is an area that can contain form elements. • Form. • Name. • Action. • method ------- get. • method ------- post. • Input. • Type -------- text. • Type -------- password. • Type -------- radio . • Type -------- checkbox . • Type -------- submit. • Type -------- reset.

  29. HTML • Basics • HTML Forms • Note: • get method • This method sends the form contents in the URL: URL?name=value&name=value. • Note: If the form values contains non-ASCII characters or • exceeds 100 characters you MUST use method="post". ) • post method • This method sends the form contents in the body of the request. • Note: Most browsers are unable to bookmark post • requests. )

  30. HTML • Basics • HTML Forms • <form name="input" action="html_form_action.asp" method="get"> • First name: <input type="text" name="firstname"> <br> • Last name: <input type="text" name="lastname"> • password: <input type=“password" name=“password"> • <input type="radio" name="sex" value="male"> Male <br> • <input type="radio" name="sex" value="female"> Female • I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> <br /> • I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> • I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> <br /><input type="submit" value="Submit"> • </form>

  31. HTML • Basics • HTML Forms tages************************************************ • textarea. • Fieldset. • Legend. • Select. • Optgroup. • Option. • Button.

  32. HTML • Basics • HTML Images • The Image Tag and the Src Attribute. • The Alt Attribute. • Map. • area.

  33. HTML • Basics • HTML Background • Bgcolor. • Background.

  34. HTML • Basics • HTML Color Values • Color HEX. • Ex: #FF00FF • Color RGB. • Ex: rgb(255,0,255) • Standard Color Names • Ex: red, silver,…

  35. HTML • Advanced • HTML Layout • Using Tables . • Color Added.

  36. HTML • Advanced • HTML Fonts • <font> Tag . • Font Attributes. • size="number" • size="+number" • size=“-number" • face="face-name" • color="color-value" • color="color-name“

  37. HTML • Advanced • HTML 4.0 Why • HTML 3.2 Was Very Wrong . • What is so Great About HTML 4.0 . • What Should You do About it. • read CSS to learn about style sheets.

  38. HTML • Advanced • HTML Styles • How to Use Styles: • When a browser reads a style sheet, it will format the document according to it. • There are three ways of inserting a style sheet: • External Style Sheet . • <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> • Internal Style Sheet. • <head> <style type="text/css"> • body {background-color: red} • p {margin-left: 20px} • </style> </head> • Inline Styles. • <p style="color: red; margin-left: 20px"> This is a paragraph </p>

  39. HTML • Advanced • HTML Head • The Head Element • Information Inside the Head Element: • only a few tags are legal inside the head section. These are: • <base>, <link>, <meta>, <title>, <style>, and <script>.  • Head Tags. • <head> • <title> • <base> • <link> • <meta> • <!DOCTYPE>

  40. HTML • Advanced • HTML Meta • The Meta Element • Most often the meta element is used to provide information that is relevant • to browsers or search engines like describing the content of your document. • This meta element defines a description of your page: • <meta name="description" content="Free Web tutorials on HTML, • CSS, XML, and XHTML">  • This meta element defines keywords for your page: • <meta name="keywords" content="HTML, DHTML, CSS, XML, • XHTML, JavaScript, VBScript"> • Unknown Meta Attributes • <meta name="security" content="low">

  41. HTML • Advanced • HTML URLs • Uniform Resource Locators • scheme://host.domain:port/path/filename • The scheme is defining the type of Internet service. The common type is http. • The domain is defining the Internet domain name like w3schools.com. • The host is defining the domain host. If omitted, the default host for http is www. • The :port is defining the port number at the host. Default port number for http is 80.  • The path is defining a path at the server. • The filename is defining the name of a document. • The default filename might be default.asp, or index.html or something else.

  42. HTML • Advanced • HTML URLs • Accessing a Newsgroup. • <a href="news:alt.html">HTML Newsgroup</a> • Downloading with FTP. • <a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a> • Link to your Mail system • <a href="mailto:someone@w3schools.com">someone@w3schools.com</a>

  43. HTML • Advanced • HTML Scripts • Insert a Script into HTML Page . • <html> <head> </head> <body> • <script type="text/javascript"> document.write("Hello World!") </script> • </body> </html> • How to Handle Older Browsers • JavaScript: • <!-- document.write("Hello World!") //--> • VBScript: <!-- document.write("Hello World!") '-->

  44. HTML • Advanced • HTML Attributes HTML tags can have attributes. The attributes listed here are the core and • language attributes that are standard for all tags (with a few exceptions): • Core Attributes. • class • id • style • title • Language Attributes • dir • lang • Keyboard Attributes • accesskey • tabindex

  45. HTML • Advanced • HTML Events HTML events trigger actions in the browser. • Window Events • onload • onunload • Form Element Events • onchange • onsubmit • onreset • onselect • onblur • onfocus • Keyboard Events • onkeydown • onkeypress • onkeyup

  46. HTML • Advanced • HTML Events • Mouse Events • onclick • ondblclick • onmousedown • onmousemove • onmouseout • onmouseover • onmouseup

  47. HTML • Advanced • HTML URL-encode • URL-encoding from %00 to %8f • URL-encoding from %90 to %ff

  48. HTML • Advanced • HTML Summary • Now You Know HTML, What's Next? • The next step is to learn XHTML and CSS • XHTML • XHTML is the "new" HTML. The latest HTML recommendation is • HTML 4.01. This is the last and final HTML version. HTML will be replaced • by XHTML, which is a stricter and cleaner version of HTML. • CSS • CSS is used to control the style and layout of multiple Web pages all at • once. With CSS, all formatting can be removed from the HTML document • and stored in a separate file. CSS gives you total control of the layout, • without messing up the document content.

  49. CSS(Cascading Style Sheet)

  50. The style attribute specifies the style for an element. Some style properties are font-size and color. CSS Inline stylesheet

More Related