Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
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
Friday, 6 July 2012
A Web site is a group of related Web pages, all hyper-linked together and hosted on a server. Before you start writing the HTML to create a site’s pages, it is a good idea to do some planning. Know Your Audience
It is important to understand the audience that will visit the pages on your Web site. It is important to know their technical ability so that you can use language they are comfortable with. It is also important to know their interests so that you can present imagery and other content that will keep them interested and at your site. You can conduct interviews with potential users early on to get ideas for your site designs. You can also have users test out your site after it launches to get feedback on how to improve it.
Plan a Home Page
The home page is usually the first page a visitor sees when visiting a Web site, so it is important that it concisely communicate the site’s purpose and what information users can expect to find. It should also include prominent links to the other important pages on your site. Optimally, users should be able to see all of this information without having to scroll in their browser window. Clear communication is important on all of your site’s pages, but especially on the home page.
Site Map
A useful tool for planning your site’s overall structure is a site map, which represents your Web pages as boxes and the hyperlinks as arrows. The home page of a site is usually placed at the top of a site map. A site map gives you an overview of the pages you need to build and also shows the navigational structure. You should arrange your pages so that important content is easy to get to from the home page. You can sketch your site map using pencil and paper or using software such as Microsoft Visio, which has tools specifically made for creating site maps.
Linear Structure
A linear site layout moves the user through your content in a step-by-step fashion, like pages in a book. Linear layouts are good for presenting sequential instructions or a narrative story. In a linear layout, each Web page usually links to the next page and the previous page. The site map of a linear site will have the pages arranged one after the other in a line.
Hierarchical Structure
A hierarchical layout resembles a pyramid, with the home page at the top and other pages fanning out from there. A hierarchical site map looks like a company’s organizational chart or a family tree. Hierarchical layouts are appropriate for sites with categorized content, such as online merchants. Each branch in such a site represents a product category with the for-sale items at the end of the branches.
Gathering Content
After you plan the pages and structure of your site, you need to gather the content. For simple sites, this may involve writing text and shooting digital photos. More complex sites may require recording audio and video, creating illustrations, and programming interactive media. You can organize all of this content into your Web pages using HTML.
Friday, 6 July 2012 0
Thursday, 5 July 2012
In this HTML tutorial, I am going to code and explain a simple Hello World program which will show a simple Hello World message on the browser's page. I hope you're aware of browsers. A browser is a software program which is used to display the webpages on the internet. OK, Now, I am going to code your first Hello World program in HTML.<html>
<head>
<title>My first webpage!</title>
</head>
<body>
Hello World!
</body>
</html>
Let me explain this simple code:
Here, I have used some simple HTML markup tags which tells a browser, how to show a page in a web browser. My first tag is <HTML> which is used to describe that we are going to use HTML. In the <Head> section, we store the data about our website or webpage. In <head> section we can store data like our website description, keywords, author information etc. In the <Title> section, we have to give a title to our HTML webpage which is suitable to describe our webpage. In the <Body> section, all the data which we want to display on a webpage is coded. In the <body> section usually we use some paragraphs, images, lists
etc.
How to save a HTML webpage?
Now, After coding you first HTML Hello World program you need to save it. So, How you're going to save your HTML page? Don't have any idea? Let me explain it again. As we are coding our HTML code in a application like Notepad or Wordpad, we need to give a extension to our HTML file so it will be recognize as a HTML page. So, here's comes the point. You have to save your HTML file as fileName.html.
How to open a HTML webpage?
Now, You have coded your first HTML webpage and saved it with a HTML extension.Now you want to know that how can I open my HTML page? There are many software's which are called web browsers in which we can open our HTML webpages. There are many web browsers like Internet Explorer, Mozilla Firefox, Opera, Safari, Netscape etc. We can use any of them to open our first HTML webpage. Here, I am going to tell you how can you open your HTML page in Internet Explorer.
Here's the steps:
- Open your Internet Explorer.
- Click on File menu and choose Open option.
- Click on Browse to locate your HTML file.
- Now Click on OK.
Hurray!! You have successfully opened up your first HTML page. Hope you have enjoyed this HTML tutorial. This is the first step towards learning HTML. Learn and Have Fun!
Thursday, 5 July 2012 0
Wednesday, 4 July 2012
Are you interested in building your own Web pages? In this HTML tutorial, I would like to introduce you to HTML, the language used to create Web pages. It also explains the basics behind HTML editors and Web browsers, which you use to design and view your Web content.
Internet Basics
The Internet is a worldwide collection of interconnected computer networks that enables businesses, organizations, governments, and individuals to communicate in a variety of ways. One of the most popular ways users communicates on the Internet is by publishing and interacting with Web pages. You can also use the Internet to send and receive e-mail, chat with other users, and transfer files between
computers.
The World Wide Web
The World Wide Web is a giant collection of documents, or pages, stored on computers around the globe. Commonly called the Web, this collection of pages represents a wealth of text, images, audio, and video available to anyone with a computer and an Internet connection. Web pages are stored on servers, which are Internet-connected computers running software that allows them to serve up information to other computers. When you place a text file, image, or other document in a special Web directory on a server, that information is available for other Web users to view.
Browsers
A Web browser is software that allows you to view and interact with Web pages. When you type a URL or click a link in a Web browser, the browser retrieves the appropriate page from a server on the Internet and displays that page. Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari are the three most popular browsers in use today. Each program has evolved through a number of versions, with newer versions supporting more recent Web features. As you build your pages using HTML code, remember that different browsers may display your pages slightly differently depending on the version.
An Introduction to HTML
You build Web pages using HTML, which is short for HyperText Markup Language. HTML documents are made up of text content and special codes known as tags that tell Web browsers how to display the content. HTML documents are identified by their .html or .htm file extensions.
HTML Tags
HTML consists of text interspersed with special instructions known as tags. Surrounded by brackets, < >, HTML tags tell a browser how to organize and present text, images, and other Web page content. Many tags are written using an opening tag and a closing tag that surround content that appears on the page. When writing HTML tags, you can use upper- or lowercase letters. To make the coding easy to distinguish from other text in the page, you can type tag names in uppercase. For details, see the section “Understanding HTML Syntax.”
Rendering HTML
When a browser displays a Web page, it retrieves the HTML file for that page from a server, parses the HTML tags to determine how the content should be formatted, and renders the page. The HTML tags tell the browser what images, video, audio, and other content need to be downloaded and integrated into the page. The HTML may also tell the browser to download style sheets and interactive scripts to further enhance the page. To view the HTML underlying a Web page, see the section “View HTML Code in a Browser.”
HTML Standards
The World Wide Web Consortium, or W3C, is the primary group guiding the evolution of the HTML language. The W3C is made up of hundreds of companies and organizations including Web industry leaders such as Microsoft, Apple, and Google. The standards developed by the W3C give developers of Web servers and browsers a set of common guidelines with which to develop their products. You can visit the W3C’s Web site at www.w3.org.
HTML Versions
The most recent version of HTML is 4.01. Version 4.01 includes rules for using more than 90 HTML tags, most of which are covered in this book. It improves on previous versions by adding better support for multimedia, scripting, and style sheets. Support for style sheets is especially important because it allows developers to apply more precise formatting to Web pages. It also allows developers to keep complex styling information separate from the rest of the HTML.
XHTML
XHTML, or Extensible HyperText Markup Language, is an alternative language for coding Web pages that conforms to the stricter standards of XML, or Extensible Markup Language. XHTML is tag-based and uses many of the same tags as in HTML. However, in XHTML, all tags must be closed, tag names and attributes must be coded in lowercase, and attribute values for tags must be surrounded by quotes. Most modern browsers can read both HTML and XHTML. Although XHTML is not covered in this book, you can read more about it at the W3C site at
www.w3.org.
Next Generation of HTML
As this book is being published, the W3C is developing the specification for HTML 5, the next version of HTML. This version will introduce features to help Web designers more easily create and maintain the dynamic pages seen in many of today’s Web sites. HTML 5 will include tags for defining headers, footers, and navigation sections, along with tags for adding interactive elements such as editable and sortable tables.
HTML Editors
HTML editors, such as Adobe Dreamweaver and Microsoft Expression, are dedicated programs for writing HTML code and managing Web pages. These programs can shield you from having to write HTML code by offering a graphical environment for building Web pages as well as a text-based environment. Most HTML editors will also color your HTML tags for easier viewing, validate your code, and help you upload finished pages to a server.
Writing HTML Code
In HTML, tags determine how page content is organized and formatted. Tags consist of words or abbreviations surrounded by angle brackets, < >. Tags can be written using upper- or lowercase letters. You can type tag names in uppercase to distinguish the code from other text. This HTML code creates a paragraph in your page:
<P>Hello, world!</P>
Tag Structure
Certain structural HTML tags identify different parts of your HTML document. For example, the <BODY> and </BODY> tags surround the main body content that appears in the browser window. Many tags, such as the paragraph tags (<P> and </P>), are written using an opening tag and a closing tag while others, such as the image tag (<IMG>), stand alone. Closing tags must always include a slash (/) before the tag name.
Attributes and Values
You can assign specific attributes to each HTML tag to customize its behavior. Most attributes work by setting a numeric or descriptive value. For example, you can set a paragraph’s alignment on the page using the ALIGN attribute along with a type of alignment: left, right, or center. The code for creating a centered paragraph looks like this:
<P ALIGN=”center”>My centered text.</P>
Attributes always go inside the opening HTML tag, and it is good form to enclose attribute values in quotation marks.
Entities
You can add special characters to a page, such as a copyright symbol or a fraction, by using special codes called entities. Entities represent characters not readily available on the keyboard. All entities are preceded by an ampersand (&) and followed by a semicolon (;). For example, the following code adds a copyright symbol to your page:
©
Avoiding Syntax Errors
To avoid HTML errors, always take the time to proofread your code. Most HTML editors have features that highlight bad syntax. Make sure your tags have brackets, your closing tags include a slash, and your attribute values are surrounded by quotation marks. Multiple HTML tags should be properly nested, meaning your closing tags should be in the reverse order of the opening tags.
For example:
<P ALIGN=”center”><B>My text.</B></P>
To help make your HTML readable, consider using new lines to type code instead of running everything together on one long line. Doing so will not affect how your page is displayed, because Web browsers ignore extra white space.
Internet Basics
The Internet is a worldwide collection of interconnected computer networks that enables businesses, organizations, governments, and individuals to communicate in a variety of ways. One of the most popular ways users communicates on the Internet is by publishing and interacting with Web pages. You can also use the Internet to send and receive e-mail, chat with other users, and transfer files between
computers.
The World Wide Web
The World Wide Web is a giant collection of documents, or pages, stored on computers around the globe. Commonly called the Web, this collection of pages represents a wealth of text, images, audio, and video available to anyone with a computer and an Internet connection. Web pages are stored on servers, which are Internet-connected computers running software that allows them to serve up information to other computers. When you place a text file, image, or other document in a special Web directory on a server, that information is available for other Web users to view.
 |
| HTML And Internet |
Browsers
A Web browser is software that allows you to view and interact with Web pages. When you type a URL or click a link in a Web browser, the browser retrieves the appropriate page from a server on the Internet and displays that page. Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari are the three most popular browsers in use today. Each program has evolved through a number of versions, with newer versions supporting more recent Web features. As you build your pages using HTML code, remember that different browsers may display your pages slightly differently depending on the version.
An Introduction to HTML
You build Web pages using HTML, which is short for HyperText Markup Language. HTML documents are made up of text content and special codes known as tags that tell Web browsers how to display the content. HTML documents are identified by their .html or .htm file extensions.
HTML Tags
HTML consists of text interspersed with special instructions known as tags. Surrounded by brackets, < >, HTML tags tell a browser how to organize and present text, images, and other Web page content. Many tags are written using an opening tag and a closing tag that surround content that appears on the page. When writing HTML tags, you can use upper- or lowercase letters. To make the coding easy to distinguish from other text in the page, you can type tag names in uppercase. For details, see the section “Understanding HTML Syntax.”
Rendering HTML
When a browser displays a Web page, it retrieves the HTML file for that page from a server, parses the HTML tags to determine how the content should be formatted, and renders the page. The HTML tags tell the browser what images, video, audio, and other content need to be downloaded and integrated into the page. The HTML may also tell the browser to download style sheets and interactive scripts to further enhance the page. To view the HTML underlying a Web page, see the section “View HTML Code in a Browser.”
HTML Standards
The World Wide Web Consortium, or W3C, is the primary group guiding the evolution of the HTML language. The W3C is made up of hundreds of companies and organizations including Web industry leaders such as Microsoft, Apple, and Google. The standards developed by the W3C give developers of Web servers and browsers a set of common guidelines with which to develop their products. You can visit the W3C’s Web site at www.w3.org.
HTML Versions
The most recent version of HTML is 4.01. Version 4.01 includes rules for using more than 90 HTML tags, most of which are covered in this book. It improves on previous versions by adding better support for multimedia, scripting, and style sheets. Support for style sheets is especially important because it allows developers to apply more precise formatting to Web pages. It also allows developers to keep complex styling information separate from the rest of the HTML.
XHTML
XHTML, or Extensible HyperText Markup Language, is an alternative language for coding Web pages that conforms to the stricter standards of XML, or Extensible Markup Language. XHTML is tag-based and uses many of the same tags as in HTML. However, in XHTML, all tags must be closed, tag names and attributes must be coded in lowercase, and attribute values for tags must be surrounded by quotes. Most modern browsers can read both HTML and XHTML. Although XHTML is not covered in this book, you can read more about it at the W3C site at
www.w3.org.
Next Generation of HTML
As this book is being published, the W3C is developing the specification for HTML 5, the next version of HTML. This version will introduce features to help Web designers more easily create and maintain the dynamic pages seen in many of today’s Web sites. HTML 5 will include tags for defining headers, footers, and navigation sections, along with tags for adding interactive elements such as editable and sortable tables.
HTML Editors
HTML editors, such as Adobe Dreamweaver and Microsoft Expression, are dedicated programs for writing HTML code and managing Web pages. These programs can shield you from having to write HTML code by offering a graphical environment for building Web pages as well as a text-based environment. Most HTML editors will also color your HTML tags for easier viewing, validate your code, and help you upload finished pages to a server.
Writing HTML Code
In HTML, tags determine how page content is organized and formatted. Tags consist of words or abbreviations surrounded by angle brackets, < >. Tags can be written using upper- or lowercase letters. You can type tag names in uppercase to distinguish the code from other text. This HTML code creates a paragraph in your page:
<P>Hello, world!</P>
Tag Structure
Certain structural HTML tags identify different parts of your HTML document. For example, the <BODY> and </BODY> tags surround the main body content that appears in the browser window. Many tags, such as the paragraph tags (<P> and </P>), are written using an opening tag and a closing tag while others, such as the image tag (<IMG>), stand alone. Closing tags must always include a slash (/) before the tag name.
Attributes and Values
You can assign specific attributes to each HTML tag to customize its behavior. Most attributes work by setting a numeric or descriptive value. For example, you can set a paragraph’s alignment on the page using the ALIGN attribute along with a type of alignment: left, right, or center. The code for creating a centered paragraph looks like this:
<P ALIGN=”center”>My centered text.</P>
Attributes always go inside the opening HTML tag, and it is good form to enclose attribute values in quotation marks.
Entities
You can add special characters to a page, such as a copyright symbol or a fraction, by using special codes called entities. Entities represent characters not readily available on the keyboard. All entities are preceded by an ampersand (&) and followed by a semicolon (;). For example, the following code adds a copyright symbol to your page:
©
Avoiding Syntax Errors
To avoid HTML errors, always take the time to proofread your code. Most HTML editors have features that highlight bad syntax. Make sure your tags have brackets, your closing tags include a slash, and your attribute values are surrounded by quotation marks. Multiple HTML tags should be properly nested, meaning your closing tags should be in the reverse order of the opening tags.
For example:
<P ALIGN=”center”><B>My text.</B></P>
To help make your HTML readable, consider using new lines to type code instead of running everything together on one long line. Doing so will not affect how your page is displayed, because Web browsers ignore extra white space.
Wednesday, 4 July 2012 0
Subscribe to:
Posts (Atom)
