Scribd
Upload
31 views

Web Lecture 3

The document discusses HTML basics including comment tags, blockquote tags, colors in HTML, table tags, lists in HTML, and image tags. It provides examples and explanations of each HTML element and how to use them.

Uploaded by

Sara Mahmood
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

Web Lecture 3

The document discusses HTML basics including comment tags, blockquote tags, colors in HTML, table tags, lists in HTML, and image tags. It provides examples and explanations of each HTML element and how to use them.

Uploaded by

Sara Mahmood
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

HTML BASICS

Lecture#03
Today’s Agenda
 Comment Tag
 Blockquote Tag
 Colors in HTML
 Table Tag
 Lists in HTML
 Image Tag
Comments In HTML
 Comment tags <!-- and --> are used to insert
comments in HTML.
 You can add comments to your HTML source by
using the following syntax:

 <!-- This is a comment -->


Comment Example
 <!DOCTYPE html>
 <html>
 <body>
 <!– This is a comment -->
 <h1>This is heading 1</h1>
 <h2>This is heading 2</h2>
 </body>
 </html>
Blockquotes

 To set a block of text off from the normal flow


and appearance of text
 Browsers often indent, and sometimes italicize.
Blockquotes Example
<!DOCTYPE html>
<html>
<body style="background-color:yellow">
<h1>About HTML</h1>
<p>Here is a quote from HTML website:</p>
<blockquote >
The alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The alt attribute provides alternative information for an image if a user for some reason cannot
view it .If a browser cannot find an image, it will display the alt text:
</blockquote>
<p>Both the width, height, and style attributes are valid in the latest HTML5 standard.
We suggest you use the style attribute. It prevents styles sheets from changing the original size
of images:</p>
</body>
</html>
Blockquote Example
HTML <Pre> Tag
 The HTML <pre> element defines preformatted text.
 The text inside a <pre> element is displayed in a
fixed-width font (usually Courier), and it preserves both
spaces and line breaks:
 <pre>
Sun rises in the east.
It is raining from night.
Today is a warm day.
</pre>
HTML Table
 Tables are defined with the <table> tag.
 Tables are divided into table rows with
the <tr> tag.
 Table rows are divided into table data with
the <td> tag.
 A table row can also be divided into table
headings with the <th> tag
Table Border
 An HTML Table with a Border Attribute
 If you do not specify a border for the table, it will be displayed without borders.
 A border can be added using the border attribute:
<table border="1" >
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Table Cells that Span Many Columns

 To make a cell span more than one column, use colspan attribute:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Table Cells that Span Many Rows
 To make a cell span more than one row, use the rowspan attribute:

<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
An HTML Table With a Caption

• <table style="width:30%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Cellpadding & Cellspacing
 The cellspacing attribute specifies the space, in
pixels, between cells.
 The cellpadding attribute specifies the space, in
pixels, between the cell wall and the cell content.
Unordered HTML Lists

 An unordered list starts with the <ul> tag. Each list


item starts with the <li> tag.
 The list items will be marked with bullets (by
default)
List Example
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Default Bullets</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered HTML Lists - The Style
Attribute

Style Description
list-style-type:disc The list items will be marked with
bullets (default)

list-style-type:circle The list items will be marked with


circles
list-style-type:square The list items will be marked with
squares
list-style-type:none The list items will not be marked
Type Of Unordered List
Disc:
 <ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML Lists

 An ordered list starts with the <ol> tag. Each list


item starts with the <li> tag.
 The list items will be marked with numbers:
 Example
 <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML Lists - The Type
Attribute
 A type attribute can be added to an ordered list, to define the type of the marker:

Type Description
type="1" The list items will be numbered
with numbers (default)
type="A" The list items will be numbered
with uppercase letters
type="a" The list items will be numbered
with lowercase letters
type="I" The list items will be numbered
with uppercase roman numbers
type="i" The list items will be numbered
with lowercase roman numbers
Nested HTML Lists

 Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
HTML Description Lists

 A description list is a list of terms, with a description of


each term.
 The <dl> tag defines the description list, the <dt> tag
defines the term (name), and the <dd> tag describes
each term:
 Example

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Image
 In HTML, images are defined with the <img> tag.
 The <img> tag contains attributes , and does not have a
closing tag.
 The src attribute specifies the address of the image:
 <img src="url" alt="some_text">
 The alt attribute specifies an alternate text for an image, if the
image cannot be displayed.
Image Size - Width and Height

 You can use the style attribute to specify the width and
height of an image.
 The values are specified in pixels (use px after the value):
 <img src="html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
 Alternatively, you can use width and height attributes. Here,
the values are specified in pixels by default:
 <img src="html5.gif" alt="HTML5 Icon"
width="128" height="128">
Images in Another Folder

 If not specified, the browser expects to find the


image in the same folder as the web page.
 However, it is common to store images in a sub-
folder. You must then include the folder name in the
src attribute:
<img src="/images/html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
Using an Image as a Link

 To use an image as a link, simply nest the <img>


tag inside the <a> tag:
 <a href="default.htm">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Image Floating

 The image can float to the right or to the left of a


text:
 Example
 <p>
<img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
Image Floating

<p><strong>Float the image to the


right:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with
a floating image.</p>
Image Floating
 <p>
<img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p>
HTML Block Elements

Block-level Elements
 A block-level element always starts on a new line
and takes up the full width available (stretches out
to the left and right as far as it can)
Examples of block-level elements:
 <h1> - <h6>

 <p>

 <div>

 <form>
The <div> Element

 The <div> element is a block-level element that is


often used as a container for other HTML elements.
 Example
 <div style="background-color:black; color:white;
padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
</div>
Output Of <div>
Inline Elements

 An inline element does not start on a new line and


only takes up as much width as necessary.
 Examples of inline elements:
 <span>
 <a>
 <img>
The <span> Element

 The <span> element is an inline element that is


used to color a part of a text.
 <h1>My <span
style="color:red">Important</span>
Heading</h1>
Colors In HTML
 Hexadecimal color values are supported in all major browsers.
 A hexadecimal color is specified with: #RRGGBB, where the RR
(red), GG (green) and BB (blue) hexadecimal integers specify the
components of the color. All values must be between 00 and FF.
 For example, the #0000FF value is rendered as blue, because the
blue component is set to its highest value (FF) and the others are set
to the lowest value (00).
 For Example:
 Black : #000000
 Aqua : #00FFFF
 Red : #FF0000

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy