محاضرات HTML
advertisement
HTML Paragraphs
Paragraphs are defined with the <p>
tag.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
•
•
•
•
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
•
•
•
•
HTML Links
HTML links are defined with the <a> tag.
Example
<a href="http://www.google.com">This is a
link</a>
•
•
•
•
HTML Images
HTML images are defined with the <img> tag.
Example
<img src="w3schools.jpg" width="104"
height="142" />
HTML Elements
• HTML documents are defined by HTML
elements.
• An HTML element is everything from the start
tag to the end tag:
• Start tag * Element content End tag * <p> This
is a paragraph </p> <a href="default.htm" >
This is a link </a> <br /> * The start tag is
often called the opening tag. The end tag is
often called the closing tag.
HTML Attributes
• HTML elements can have attributes
• Attributes provide additional information about
an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like:
name="value"
• Example
• <a href="http://www.w3schools.com">This is a
link</a>
Most HTML elements
HTML Comments
• Example
• <!-- This is a comment -->
HTML Attributes
• Core Attributes(Valid in all elements, except:
<base>, <head>, <html>, <meta>, <param>,
<script>, <style>, and <title>.
• Language AttributesValid in all elements,
except: <base>, <br>, <frame>, <frameset>,
<hr>, <iframe>, <param>, and <script>.
• Keyboard Attributes
Core Attributes
Language attribute
Keyboard Attributes
Class example
• <html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:red;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>
ID Example
•
•
•
•
•
•
•
•
•
<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.getElementById("myHeader").innerHTML="Have a nice day!";
}
</script>
</head>
•
•
•
•
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
</body>
•
</html>
HTML accesskey Attribute
Definition and UsageThe accesskey attribute specifies a
shortcut key to activate/focus an element.
• <html>
• <body>
• <a href="http://www.w3schools.com/html5"
accesskey="h">HTML5 tutorial</a><br />
• <a href="http://www.w3schools.com/css3" accesskey="c">CSS3
tutorial</a>
• <p><b>Note:</b> Use Alt + <i>accessKey</i> (or Shift + Alt +
<i>accessKey</i>) to access the element with the specified access
key.</p>
• </body>
• </html>
URI ,URL and URN
The relationship of URL to URI and URN
Abbreviation of Uniform Resource Locator (URL) it is the global address of documents and
other resources on the World Wide Web.
scheme://domain:port/path?query_string#fragment_id
http://www.school.edu.sa:80/primary/teachers/index.html
Schema or protocol : http or ftp or https, …
domain : www
Port : 80
sub domain: primary/teacher
URN : Index.html
A URL is one type of Uniform Resource Identifier (URI); the generic term for all types of names
and addresses that refer to objects on the World Wide Web.
HTML tabindex Attribute example
Definition and UsageThe tabindex attribute specifies the tab
order of an element (when the "tab" button is used for navigating).
• <html>
• <body>
• <a href="http://www.w3schools.com/"
tabindex="2">W3Schools</a><br />
• <a href="http://www.google.com/" tabindex="1">Google</a><br
/>
• <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
• <p><b>Note:</b> Try navigating the links by using the "Tab" button
on you keyboard.</p>
• </body>
• </html>
HTML Tag Reference
The <br /> element is an empty HTML element. It has no end
tag.
<br> or <br />
In XHTML, XML, elements with no end tag (closing tag) are not
allowed.
Even if <br> works in all browsers, writing <br /> instead works
better in XHTML and XML applications.
You cannot be sure how HTML will be displayed. Large or small screens, and resized
windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in
your HTML code.
The browser will remove extra spaces and extra lines when the page is displayed. Any
number of lines count as one line, and any number of spaces count as one space.
HTML Text Formatting
HTML Text Formatting Tags
HTML "Computer Output" Tags
HTML Citations, Quotations, and Definition Tags
HTML <abbr> Tag
HTML <del> Tag
HTML <em> <strong> <dfn> <code>
<samp> <kbd> <var> <cite> Tags
HTML <address> Tag
HTML <bdo> Tag
•
•
•
•
•
•
•
•
<html>
<head>
<title>Horizontal line</title>
</head>
<body>
<hr size="18" width="60%" align="center" color="green"
</body>
</html>
•
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<title>Horizontal line</title>
</head>
<body>
<hr size="18" width="60%" align="center" color="green"</hr>
<marquee behavior="scroll" direction="right" bgcolor="#00ffff">
thanks for visiting us </marquee>
<marquee behavior="scroll" direction="right" loop='5' bgcolor="#00ffff">
thanks for visiting us </marquee>
<marquee behavior="scroll" direction="right" scrollamount='1' bgcolor="#00ffff">
thanks for visiting us </marquee>
The HTML <font> Tag Should NOT be Used
The <font> tag is deprecated in HTML 4, and removed from HTML5.
The World Wide Web Consortium (W3C) has removed the <font> tag from its
recommendations.
In HTML 4, style sheets (CSS) should be used to define the layout and display
properties for many HTML elements.
Styling HTML with CSS
CSS is used to style HTML elements
HTML Style Example - Font, Color and
Size
HTML Style Example - Text Alignment
Deprecated “”مستنكرTags and
Attributes
HTML Links - The target Attribute
HTML Links
HTML Images
How to align an image within the text.
How to let an image float to the left or
right of a paragraph.
How to use an image as a link.
How to create an image map, with clickable
regions. Each of the regions is a hyperlink
HTML Image Tags
