HTML Introduction
What is HTML?
HTML is a language for describing web pages.- HTML stands for Hyper Text Markup Language
- HTML is not a programming language, it is a markup language
- A markup language is a set of markup tags
- HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
- HTML tags are keywords surrounded by angle brackets like <html>
- HTML tags normally come in pairs like <b> and </b>
- The first tag in a pair is the start tag, the second tag is the end tag
- Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
- HTML documents describe web pages
- HTML documents contain HTML tags and plain text
- HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
Example:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
- The text between <html> and </html> describes the web page
- The text between <body> and </body> is the visible page content
- The text between <h1> and </h1> is displayed as a heading
- The text between <p> and </p> is displayed as a paragraph
HTML Hyperlinks (Links)
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:
1. To create a link to another document, by using the href attribute
2. To create a bookmark inside a document, by using the name attribute
1st Example:
<p>
<a href="http://www.google.com/">Google</a> This is a link to a website on the World Wide Web.
</p>
</body>
</html>
Result:
Google This is a link to a website on the World Wide Web
2nd Example:
<html>
<body>
<a href="http://www.w3schools.com">
This is a link to w3 schools</a>
</body>
</html>
Result:
This is a link to w3schools
| <a href="url">Link text</a> |
Example
| <a href="http://www.w3schools.com/">Visit W3Schools</a> |
Clicking on this hyperlink will send the user to W3Schools' homepage.
Tip: The "Link text" doesn't have to be text. You can link from an image or any other HTML element.
HTML The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
| <img src="url" alt="some_text"/> |
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
1st example:
<p>
A moving image:
<img src="hackanm.gif" alt="Computer man" width="48" height="48" />
</p>
<p>An image from W3Schools:</p>
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" width="104" height="142" />
</body>
</html>
HTML Tables
Tables are defined with the <table> tag.A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example:
| <table border="1"> <tr> <td>mahallah Thalhah, level 1</td> <td>mahallah Zainab, level 2</td> </tr> <tr> <td>mahallah Abu Bakar, level 1</td> <td>mahallah Khadijah, level 2</td> </tr> </table> |
| mahallah Thalhah, level 1 | mahallah Zainab, level 2 |
| mahallah Abu Bakar, level 1 | mahallah Khadihah, level 2 |
No comments:
Post a Comment