}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>
<head>xyz
<title>abc</title></head>
<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>
------------------------------
HTML Headings
}HTML headings are
defined with the <h1> to <h6> tags.
}<h1>This is a
heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
}HTML
Paragraphs
}<p>This is a
paragraph.</p>
HTML Links
HTML Links
}HTML links are
defined with the <a> tag.
}<a
href=“a.html">This is a link</a>
------------------------------
}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 describe web pages
------------------------------
}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.
}The example below
shows how the HTML could look by using the <font> tag:
}Example
------------------------------
}
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
}
}<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
------------------------------
}HTML
Hyperlinks (Links)
}A hyperlink (or link)
is a word, group of words, or image that you can click on to jump to a new
document or a new section within the current document.
}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:
}To create a link to
another document, by using the href attribute
}To create a bookmark
inside a document, by using the name attribute
------------------------------
}HTML
Link Syntax
}The HTML code for a
link is simple. It looks like this:
}<a href="url">Link
text</a>
}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
border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
------------------------------
HTML Tables and the
Border Attribute
}To display a table
with borders, specify the border attribute:
}if you do not specify
a border attribute, the table will be displayed without borders. Sometimes this
can be useful, but most of the time, we want the borders to show.
}To display a table
with borders, specify the border attribute:
}
}<table
border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
------------------------------
}HTML
Table Headers
}Header information in
a table are defined with the <th> tag.
}All major browsers
will display the text in the <th> element as bold and centered.
------------------------------
}All major browsers
will display the text in the <th> element as bold and centered.
}<table
border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
------------------------------
HTML Unordered Lists
HTML
Unordered Lists
An unordered list
starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are
marked with bullets (typically small black circles)
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul> .
<li>Coffee</li>
<li>Milk</li>
</ul> .
How the HTML code
above looks in a browser:
}Coffee
}Milk
------------------------------
}<ul
type=“circle”></ul>
}<ul
type=“disc”></ul>
}<ul
type=“square”></ul>
------------------------------
HTML Ordered Lists
HTML
Ordered Lists
An ordered list
starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are
marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code
above looks in a browser:
1.Coffee
2.Milk
------------------------------
HTML Definition Lists
}HTML
Definition Lists
}A definition list is
a list of items, with a description of each item.
}The <dl> tag
defines a definition list.
}The <dl> tag is
used in conjunction with <dt> (defines the item in the list) and
<dd> (describes the item in the list):
}<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
------------------------------
}HTML
List Tags
}Tag Description
}<ol> Defines
an ordered list
}<ul> Defines
an unordered list
}<li> Defines
a list item
}<dl> Defines
a definition list
}<dt> Defines
an item in a definition term
------------------------------
}HTML
Images
}HTML images are
defined with the <img> tag.
}Example
}<img
src=“abc.jpg" width="104" height="142" />
------------------------------
No comments:
Post a Comment