Sunday, 30 September 2012
In this HTML tutorial, I am going to tell you about HTML List. There are three types of lists in HTML. In below tutorial, You will learn all three types of HTML list in details with examples.
HTML lets you create three different types of lists.
Unordered list: A bulleted list (like this one). The browser automatically displays the bullets and indents the list items.
Unordered list: A bulleted list (like this one). The browser automatically displays the bullets and indents the list items.
 |
| HTML Lists |
Ordered list: A numbered list, like those used for the steps in this book. The browser automatically displays the numbers in the correct sequence.
Definition list: A list that alternates paragraphs aligned with the left margin and indented paragraphs. The first of each pair of paragraphs is the term being defined, and the second is the definition of the term.
CREATE A BULLETED LIST
A bulleted list is a block element that starts with a <ul> (unordered list) tag and ends with a </ul> tag. Within the list, each item starts with an <li> (list item) tag and ends with an </li> tag.
Definition list: A list that alternates paragraphs aligned with the left margin and indented paragraphs. The first of each pair of paragraphs is the term being defined, and the second is the definition of the term.
CREATE A BULLETED LIST
A bulleted list is a block element that starts with a <ul> (unordered list) tag and ends with a </ul> tag. Within the list, each item starts with an <li> (list item) tag and ends with an </li> tag.
To create a bulleted list:
1. Type the opening and closing tags for the unordered list:
<ul>
</ul>
2. Within the tags, type the list items, one to a line, marking each with
<li> and </li> tags—for example:
<ul>
<li>San Diego</li>
<li>Los Angeles</li>
<li>San Francisco</li>
</ul>
3. Save the file, switch to your browser, and update the display. Your list will be displayed with default black bullets, as in the example shown.
4. Try changing the bullets to squares by adding the type attribute to the <ul> tag and
specifying the square parameter:
<ul type="square">
5. Save the file, switch to your browser, and update the display. The bullets will have turned to squares. Depending on your browser, the squares may be filled in (as in the example shown) or empty.
6. Change the bullets to empty circles by changing the type attribute to circle:
<ul type="circle">
1. Type the opening and closing tags for the unordered list:
<ul>
</ul>
2. Within the tags, type the list items, one to a line, marking each with
<li> and </li> tags—for example:
<ul>
<li>San Diego</li>
<li>Los Angeles</li>
<li>San Francisco</li>
</ul>
3. Save the file, switch to your browser, and update the display. Your list will be displayed with default black bullets, as in the example shown.
4. Try changing the bullets to squares by adding the type attribute to the <ul> tag and
specifying the square parameter:
<ul type="square">
5. Save the file, switch to your browser, and update the display. The bullets will have turned to squares. Depending on your browser, the squares may be filled in (as in the example shown) or empty.
6. Change the bullets to empty circles by changing the type attribute to circle:
<ul type="circle">
7. Save the file, switch to your browser, and update the display. The bullets will have
turned to circles.
8. Change the bullets back to regular bullets by either changing the type attribute to disc or by removing the attribute altogether. disc is the default bullet type, so you don’t need to specify it if you want a default bulleted list.
9. Save the file.
turned to circles.
8. Change the bullets back to regular bullets by either changing the type attribute to disc or by removing the attribute altogether. disc is the default bullet type, so you don’t need to specify it if you want a default bulleted list.
9. Save the file.
CREATE A NUMBERED LIST
A numbered list is a block element that begins with an <ol> (ordered list) tag and ends with an </ol> tag. Within the list, each item starts with an <li> (list item) tag and ends with an </li> tag.
To create a numbered list:
1. Type the opening and closing tags for the ordered list:
<ol>
</ol>
2. Within the tags, type the list items, one to a line—for example:
<ol>
<li>Answering live telephone queries</li>
<li>Providing customer service via phone</li>
<li>Providing customer service via e-mail</li>
<li>Providing customer service via online chat</li>
<li>Telemarketing</li>
</ol>
3. Save the file, switch to your browser, and update the display. Your list will be numbered from 1 to 5, as in the example shown.
CHANGE THE NUMBERING TYPE
The default type of numbered list uses standard numbers, as in the previous example. You can specify different types of numbering by adding the type attribute to the <ol> tag, as described in Table 3-2.
1. Change the numbering on the numbered list to uppercase roman numerals by
changing the type attribute to I:
<ol type="I">
2. Save the file, switch to your browser, and update the display. When changed, the example list looks like this:
3. Change the numbering back to standard numbering by either changing the type attribute to 1 (<ol type="1">) or removing the type attribute altogether. Standard numbering is the default for numbered lists, so you don’t need to specify the type attribute if you want a list with standard numbering.
4. Save your file again.
CHANGE THE STARTING NUMBER
By default, HTML starts each numbered list with 1 or the equivalent in the numbering scheme used: I, i, A, or a. Sometimes, you may need to use a different starting number for a list. For example, if you break a numbered list with a graphic or a paragraph, you will need to start the second part of the list with the appropriate number rather than with 1.
By default, HTML starts each numbered list with 1 or the equivalent in the numbering scheme used: I, i, A, or a. Sometimes, you may need to use a different starting number for a list. For example, if you break a numbered list with a graphic or a paragraph, you will need to start the second part of the list with the appropriate number rather than with 1.
To change the starting number, add the start attribute to the <ol> tag, and specify the appropriate number—for example:
<ol type="1" start="5">
CREATE A DEFINITION LIST
A definition list is a block element that begins with a <dl> (definition list) tag and ends with a </dl> tag. Each of the terms defined begins with a <dt> tag and ends with a </dt> tag. Each of the definitions for those terms begins with a <dd> tag and ends with a </dd> tag.
To create a definition list:
1. Type the opening and closing tags for the definition list:
<dl>
</dl>
2. Within the tags, type each of the definition terms within <dt> and </dt> tags, and type the definitions for those terms within <dd> and </dd> tags:
<dl>
<dt>Telephone</dt>
<dd>Just call us—couldn’t be easier.</dd>
<dt>Online chat</dt>
<dd>Talk to a customer service representative via text. The representative will help you immediately or will call back if research is required.</dd>
<dt>E-mail</dt>
<dd>Send a query to one of our customer service representatives. You will receive an answer within 24 hours.</dd>
</dl>
3. Save the file, switch to your browser, and update the display.
CREATE A NESTED LIST
You can nest, or position, any list within another list—for example, a bulleted list within a numbered list, a numbered list within a bulleted list, a definition list within a bulleted list, or a list within the same type of list as itself. To nest a list, place the tags for the nested list within the tags for the list that will contain it. The browser then displays the nested list with more indent than the list that contains it. You can nest another list within the nested list if necessary; the second nested list receives even more indent than the first nested list.
To create a nested list:
1. Position the insertion point at the appropriate point within the existing list.
2. Close and reopen the ordered list, and add the opening and closing tags for the
sublist—for example, as shown in bold font here:
<ol type="1">
<li>Answering live telephone queries</li>
</ol>
<ul>
</ul>
<ol>
<li>Providing customer service via phone</li>
<li>Providing customer service via e-mail</li>
<li>Providing customer service via online chat</li>
<li>Telemarketing</li>
</ol>
3. Within the bulleted list tags (<ul> and </ul>), type the items for the sublist:
<ul>
<li>Provide information</li>
<li>Redirect to customer service</li>
<li>Redirect to sales agents</li>
</ul>
4. Save the file, switch to your browser, and update the display.
A definition list is a block element that begins with a <dl> (definition list) tag and ends with a </dl> tag. Each of the terms defined begins with a <dt> tag and ends with a </dt> tag. Each of the definitions for those terms begins with a <dd> tag and ends with a </dd> tag.
To create a definition list:
1. Type the opening and closing tags for the definition list:
<dl>
</dl>
2. Within the tags, type each of the definition terms within <dt> and </dt> tags, and type the definitions for those terms within <dd> and </dd> tags:
<dl>
<dt>Telephone</dt>
<dd>Just call us—couldn’t be easier.</dd>
<dt>Online chat</dt>
<dd>Talk to a customer service representative via text. The representative will help you immediately or will call back if research is required.</dd>
<dt>E-mail</dt>
<dd>Send a query to one of our customer service representatives. You will receive an answer within 24 hours.</dd>
</dl>
3. Save the file, switch to your browser, and update the display.
CREATE A NESTED LIST
You can nest, or position, any list within another list—for example, a bulleted list within a numbered list, a numbered list within a bulleted list, a definition list within a bulleted list, or a list within the same type of list as itself. To nest a list, place the tags for the nested list within the tags for the list that will contain it. The browser then displays the nested list with more indent than the list that contains it. You can nest another list within the nested list if necessary; the second nested list receives even more indent than the first nested list.
To create a nested list:
1. Position the insertion point at the appropriate point within the existing list.
2. Close and reopen the ordered list, and add the opening and closing tags for the
sublist—for example, as shown in bold font here:
<ol type="1">
<li>Answering live telephone queries</li>
</ol>
<ul>
</ul>
<ol>
<li>Providing customer service via phone</li>
<li>Providing customer service via e-mail</li>
<li>Providing customer service via online chat</li>
<li>Telemarketing</li>
</ol>
3. Within the bulleted list tags (<ul> and </ul>), type the items for the sublist:
<ul>
<li>Provide information</li>
<li>Redirect to customer service</li>
<li>Redirect to sales agents</li>
</ul>
4. Save the file, switch to your browser, and update the display.
Sunday, 30 September 2012 0
Monday, 9 July 2012
In this HTML tutorial, I am going to teach you about HTML's preformatted tag. As its name suggest that its a tag that is used to format the text as it is in the editor. With the help of preformatted tags you can create simple tables or list of contents that is formatted in a pre formatted manner.You can use the preformatted tags, <PRE> and </PRE>, to keep the line breaks and spaces you enter for a paragraph or block of text. Web browsers ignore hard returns, line breaks, and extra spaces between words unless you insert the preformatted tags. If you type a paragraph with spacing just the way you want it, you can assign the preformatted tags to keep the spacing in place.
- Type <PRE> above the text you want to keep intact.
- Type </PRE> below the text.
Here's an example of the Preformatted Text by using <PRE> HTML Tag:
So, How's my tutorials? I hope you're enjoying my HTML tutorials. Looking forward for your valuable suggestions and comments.<pre> Name Sabrez Alam Address Pune Blog http://mycomputertuts.blogspot.com/ </pre>
Monday, 9 July 2012 1
In this HTML tutorial, I am going to teach you how to insert a line break between paragraphs and normal lines of HTML. Also you can use blank spaces in HTML documents by using entities. Go through the tutorials to learn more.
You can use the line break tag, <BR>, to control where your text breaks. Web browsers normally wrap text automatically; when a line of text reaches the right side of the browser window, it breaks and continues on the next line. You can insert a line break to instruct the browser to break the text and go to a new line.
You can also use the <BR> tag to add blank lines between paragraphs. This is useful if you want to add extra space above or below a block of text or a heading.
Here are some example of Line Break:
You can insert blank spaces within a line of text to indent or add emphasis to your text. You can also use blank spaces to help position an element on a Web page, such as a graphic or photo.
Type in the line where you want to add a blank space. To add multiple spaces, type the code multiple times. The code stands for non-breaking space. Web browsers will not create a line break where you insert these characters.
Here is an example of blank spaces between words:
Web Designing Tutorials
You can use the line break tag, <BR>, to control where your text breaks. Web browsers normally wrap text automatically; when a line of text reaches the right side of the browser window, it breaks and continues on the next line. You can insert a line break to instruct the browser to break the text and go to a new line.
You can also use the <BR> tag to add blank lines between paragraphs. This is useful if you want to add extra space above or below a block of text or a heading.
Here are some example of Line Break:
MyComputerTuts is a free Computer Tutorials blog.<BR> In this blog, you can learn HTML tutorials, CSS tutorials, Photoshop Tutorials, Dreamweaver tutorials and other web designing and web programming tutorials.
<p>Insert a Blank Space
MyComputerTuts is a free Computer Tutorials blog.<BR>In this blog, you can learn HTML tutorials, CSS tutorials, Photoshop Tutorials, Dreamweaver tutorials and other web designing and web programming tutorials.
</p>
You can insert blank spaces within a line of text to indent or add emphasis to your text. You can also use blank spaces to help position an element on a Web page, such as a graphic or photo.
Type in the line where you want to add a blank space. To add multiple spaces, type the code multiple times. The code stands for non-breaking space. Web browsers will not create a line break where you insert these characters.
Here is an example of blank spaces between words:
Web Designing Tutorials
In this HTML tutorial, I am going to teach you how to create a new paragraph in HTML and control its alignment? Create a paragraph and controlling its alignment is very easy in HTML. Just you need to remember <P> paragraph tag and its attributes like Left, Right, Center and Justify.Create a New Paragraph
You can use paragraph tags to start new paragraphs in an HTML document. In a word processing program, you press Enter or Return to separate blocks of text. Web browsers do not read these line breaks. Instead, you must insert a <P> tag in your HTML any time you want to start a new paragraph in your Web page. Paragraphs are left-aligned by default, but you can choose a different alignment using the align tags.
Creating a new paragraph in HTML:
<p>
MyComputerTuts is a free Computer Tutorials blog. In this blog, you can learn HTML tutorials, CSS tutorials, Photoshop Tutorials, Dreamweaver tutorials and other web designing and web programming tutorials.
</p>
Change Paragraph Alignment
You can control the horizontal positioning, or alignment, of your paragraphs using the ALIGN attribute. You can choose to align a paragraph to the left, right, or center, or justify the text so it is aligned on both the left and the right. Paragraphs are left-aligned by default.
You can use the ALIGN attribute within numerous tag elements, including headings and lists. For example, you can center a heading or right-align a bulleted list.
Here are some examples of aligning a paragraph in HTML:
To align the paragraph right side of the page.
You can control the horizontal positioning, or alignment, of your paragraphs using the ALIGN attribute. You can choose to align a paragraph to the left, right, or center, or justify the text so it is aligned on both the left and the right. Paragraphs are left-aligned by default.
You can use the ALIGN attribute within numerous tag elements, including headings and lists. For example, you can center a heading or right-align a bulleted list.
Here are some examples of aligning a paragraph in HTML:
To align the paragraph right side of the page.
<p align="right">
MyComputerTuts is a free Computer Tutorials blog. In this blog, you can learn HTML tutorials, CSS tutorials, Photoshop Tutorials, Dreamweaver tutorials and other web designing and web programming tutorials.
</p>
To align the paragraph left side of the page.
<p align="left">
MyComputerTuts is a free Computer Tutorials blog. In this blog, you can learn HTML tutorials, CSS tutorials, Photoshop Tutorials, Dreamweaver tutorials and other web designing and web programming tutorials.
</p>
To align the paragraph center of the page.
<p align="center">
MyComputerTuts is a free Computer Tutorials blog. In this blog, you can learn HTML tutorials, CSS tutorials, Photoshop Tutorials, Dreamweaver tutorials and other web designing and web programming tutorials.
</p>
To justify the paragraph.
<p align="justify">In the above tutorial, I have mentioned every possible alignment that you can use with a paragraph in HTML. Hope you have enjoy this article. Keep visiting this blog more wonderful tutorials like this.
MyComputerTuts is a free Computer Tutorials blog. In this blog, you can learn HTML tutorials, CSS tutorials, Photoshop Tutorials, Dreamweaver tutorials and other web designing and web programming tutorials.
</p>
Sunday, 8 July 2012
Are you ready to create your first HTML webpage? In this HTML tutorial, I am going to teach you that how can you create your first HTML webpage by using HTML Tags. Although Web pages can differ widely in terms of content and layout, all pages have certain HTML tags that give them the same basic structure. Understanding this structure helps you begin to build your own HTML pages.
So, Here are the basic things that you must know before creating a HTML webpage.
HTML Tags
The <HTML> and </HTML> tags at the beginning and end of a text document identify it as HTML code. When a browser encounters these tags, it knows that anything within the two tags defines a Web page. Older Web browsers expect to see the HTML tags; with the latest version of HTML and newer versions of browsers, the tags are not always necessary, but adding them is good form.
Document Type Declaration
You can add a DOCTYPE declaration to specify which tags a browser can expect to see in your HTML document. In HTML 4.01, there are three document types: HTML 4.01 Transitional, HTML 4.01 Strict, and HTML 4.01 Frameset. The transitional type is the most inclusive, incorporating both current tags and older tags that have been phased out, or deprecated. The strict type is more pared down and excludes deprecated tags. The frameset type is the same as the transitional type but includes all the tags necessary to make frames on a page.
Document Header
You use the header of an HTML document to add descriptive and accessory information to your Web page. The document header tags, <HEAD> and </HEAD>, immediately follow the opening <HTML> tag. The document header contains information that does not appear in the browser window, including title information, metadata, scripts, and style sheets.
Document Title
You can add a title to your HTML document to help people and search engines identify your Web page. For example, if you are building a Web page for a business, you might want to include the company’s name and specialization in the title. Most Web browsers display the title in the browser window’s title bar. The <TITLE> and </TITLE> tags define a page title and appear inside the document header. It is good form to keep the title to fewer than 64 characters in length.
Metadata
Metadata means “data about data.” On a Web page, metadata can include author information, the type of editor used to create the page, a description of the content, relevant keywords, and copyright information. Search engines often use metadata when trying to categorize a page. You place metadata inside the document header.
Body
The visible content that makes up your Web page, including paragraphs, lists, tables, and images, lives in the body of your HTML document. The body of the document is identified by the <BODY> and </BODY> tags. The body of a document comes after the header of a document. Most of the HTML tags covered in this book belong inside the body of the document and determine how its content is formatted.
Start an HTML Document
You can start an HTML document using a text editor, HTML editor, or word processing program. You use sets of HTML tags to define the basic structure of your page. The <HTML>, <HEAD>, and <TITLE> tags are basic elements that appear at the beginning of all HTML documents.
Open an editor or word processing program.
The <HTML> and </HTML> tags at the beginning and end of a text document identify it as HTML code. When a browser encounters these tags, it knows that anything within the two tags defines a Web page. Older Web browsers expect to see the HTML tags; with the latest version of HTML and newer versions of browsers, the tags are not always necessary, but adding them is good form.
Document Type Declaration
You can add a DOCTYPE declaration to specify which tags a browser can expect to see in your HTML document. In HTML 4.01, there are three document types: HTML 4.01 Transitional, HTML 4.01 Strict, and HTML 4.01 Frameset. The transitional type is the most inclusive, incorporating both current tags and older tags that have been phased out, or deprecated. The strict type is more pared down and excludes deprecated tags. The frameset type is the same as the transitional type but includes all the tags necessary to make frames on a page.
Document Header
You use the header of an HTML document to add descriptive and accessory information to your Web page. The document header tags, <HEAD> and </HEAD>, immediately follow the opening <HTML> tag. The document header contains information that does not appear in the browser window, including title information, metadata, scripts, and style sheets.
Document Title
You can add a title to your HTML document to help people and search engines identify your Web page. For example, if you are building a Web page for a business, you might want to include the company’s name and specialization in the title. Most Web browsers display the title in the browser window’s title bar. The <TITLE> and </TITLE> tags define a page title and appear inside the document header. It is good form to keep the title to fewer than 64 characters in length.
Metadata
Metadata means “data about data.” On a Web page, metadata can include author information, the type of editor used to create the page, a description of the content, relevant keywords, and copyright information. Search engines often use metadata when trying to categorize a page. You place metadata inside the document header.
Body
The visible content that makes up your Web page, including paragraphs, lists, tables, and images, lives in the body of your HTML document. The body of the document is identified by the <BODY> and </BODY> tags. The body of a document comes after the header of a document. Most of the HTML tags covered in this book belong inside the body of the document and determine how its content is formatted.
Start an HTML Document
You can start an HTML document using a text editor, HTML editor, or word processing program. You use sets of HTML tags to define the basic structure of your page. The <HTML>, <HEAD>, and <TITLE> tags are basic elements that appear at the beginning of all HTML documents.
Open an editor or word processing program.
- Type <HTML> This tag declares the document as HTML.
- Type <HEAD> This tag defines where the title, metadata, and other descriptive information appear.
- Type <TITLE> and Type title text for your page. Title text describes the contents of the page and appears in the title bar of the Web browser.
- Type </TITLE>.
- Type </HEAD>.
- This tag completes the document header information for the page.
- Type <BODY> This tag marks the beginning of the actual content of your Web page.
- Type the body text you want to appear on the page. Body text is the content that appears in the browser window. For practice, you can type a simple paragraph for the body text.
- Type </BODY> This tag closes the body portion of the page.
- Type </HTML>.
- This tag ends the HTML code of your document. You can save your document and view the page in a Web browser.
Save an HTML Document
You can save your Web page as an HTML file so that users can view it in a Web browser. When saving a Web page, you can use either the .html or .htm file extension.
View an HTML Page
After you create and save an HTML document, you can view it in your Web browser. Your Web browser can view HTML pages that you have saved on your computer as well as pages on the Internet.
Add Metadata
You can add metadata to your page to include extra descriptive information that does not appear in the browser window. Metadata can include a page description, author and copyright information, keywords, and more. What you insert in metadata tags can help search engines categorize your page.
ADD AN AUTHOR NAME
Click between the <HEAD> and </HEAD> tags and press to start a new line. In this example, the metadata appears below the <TITLE> tags. Type <META NAME=”author” followed by a space. Type CONTENT=”My Name”>,replacing My Name with your name.
ADD A PAGE DESCRIPTION
Type <META NAME=”description” and a blank space. Type CONTENT=”Page Description”>, replacing Page Description with your own page description.
SPECIFY KEYWORDS
Type <META NAME=”keywords” and a space. Type CONTENT=”My Keywords”>, replacing My Keywords with a keyword. For multiple keywords, use a comma followed by a space to separate the keywords.
ADD A COPYRIGHT
! Type <META NAME=”copyright” and a space. @ Type CONTENT=”2008”>, replacing 2008 with your own numbers or copyright information. # Press . The metadata is now a part of the HTML document.
Who can view my metadata?
The only way users can see your metadata information is if they view the HTML code for the page. To view the HTML code of any page in your browser window, click View and then Source. This opens a text-editor window displaying the HTML used to create the page. Any metadata assigned to the document appears at the top inside the <HEAD> and </HEAD> tags.
You can save your Web page as an HTML file so that users can view it in a Web browser. When saving a Web page, you can use either the .html or .htm file extension.
View an HTML Page
After you create and save an HTML document, you can view it in your Web browser. Your Web browser can view HTML pages that you have saved on your computer as well as pages on the Internet.
Add Metadata
You can add metadata to your page to include extra descriptive information that does not appear in the browser window. Metadata can include a page description, author and copyright information, keywords, and more. What you insert in metadata tags can help search engines categorize your page.
ADD AN AUTHOR NAME
Click between the <HEAD> and </HEAD> tags and press to start a new line. In this example, the metadata appears below the <TITLE> tags. Type <META NAME=”author” followed by a space. Type CONTENT=”My Name”>,replacing My Name with your name.
ADD A PAGE DESCRIPTION
Type <META NAME=”description” and a blank space. Type CONTENT=”Page Description”>, replacing Page Description with your own page description.
SPECIFY KEYWORDS
Type <META NAME=”keywords” and a space. Type CONTENT=”My Keywords”>, replacing My Keywords with a keyword. For multiple keywords, use a comma followed by a space to separate the keywords.
ADD A COPYRIGHT
! Type <META NAME=”copyright” and a space. @ Type CONTENT=”2008”>, replacing 2008 with your own numbers or copyright information. # Press . The metadata is now a part of the HTML document.
Who can view my metadata?
The only way users can see your metadata information is if they view the HTML code for the page. To view the HTML code of any page in your browser window, click View and then Source. This opens a text-editor window displaying the HTML used to create the page. Any metadata assigned to the document appears at the top inside the <HEAD> and </HEAD> tags.
Sunday, 8 July 2012 0
Subscribe to:
Posts (Atom)
