Download presentation
Presentation is loading. Please wait.
1
وزارة التربية والتعليم الإدارة العامة للكمبيوتر التعليمي
HTML Expression web محمد يوسف الصادق الكمبيوتر التعليمي
2
World Wide Web HTML, XML, ... Client Side Server Side JavaScript CGI
VBScript DHTML Java Applets Server Side CGI ASP Java Servlets Asp.net php HTML, XML, ...
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> </ul>
4
(HyperText Transfer Protocol)
How HTML is Displayed Http protocol (HyperText Transfer Protocol) Browser Command HTML URL: HTML Display render Text & binary data
5
How HTML is Displayed – from remote site
CGI ASP PHP … http request User Browser Command URL: http response HTML Display DB Remote Web Server Client Site
6
How HTML is Displayed – from client site
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,
8
HTML file structure Practice
<html> <head> <title>web page title</title> </head> <body> statement ……. </body> </html> Practice Output: hello world!
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 Tag Description <html> Defines an HTML document
<body> Defines the document's body <h1> to <h6> Defines header 1 to header 6 <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a horizontal rule <!--> Defines a comment 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 < less than < < Some Other Commonly Used Character Entities. ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥
21
HTML Basics HTML Links The Anchor Tag and the Href Attribute.
<a href="url">Text to be displayed</a> <a href=" W3Schools!</a> <a href=" 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 Frames With 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:// WinZip</a> Link to your Mail system <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 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
CSS Inline stylesheet The style attribute specifies the style for an element. Some style properties are font-size and color.
51
CSS Inline stylesheet Embedded stylesheet Imported stylesheet
<style type="text/css"> <!-- body{color: #000;} --> </style> Imported stylesheet Linked stylesheet You need to construct a CSS file first <link rel=stylesheet type="text/css" href="style.css"> Let us discuss the CSS by Dreamweaver!
52
Expression web
Similar presentations
