The VERY Basic HTML Document - The Structure: Shaik Ahamed

Shaik ahamed ahamedno1@gmail.
com
The VERY Basic HTML Document The Structure

its not quite like writing a novel web pages are more than just words; they require a structure. And this structure requires that we first declare the doctype. This doctype lets the browser know how to read what comes next. There are a variety of different doctypes and exploring them is a chapter (or maybe two or more) all on itself this one is about the basic HTML structure, and well use HTML 4.01 Strict. Its not the latest, the latest is HTML 5, but HTML 5 is not yet widely supported; so for now, well stick with what works everywhere.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
With that out of the way, we can tackle the actual HTML part. It looks like this:
<html>
Well, what did you expect? This is a good place to throw in that almost every HTML tag opens and MUST also be closed. Its good practice to write the opening and closing tags at the same time, and fill in after maybe it seems odd, but itll save you a few headaches down the line. As a matter of fact, many editors create the opening and closing tag at the same time and even put your cursor politely smack in between, so you can start entering your content. Note that I said almost every HTML tag. There are a few exceptions, here are some commonly used basics:
<br> - This creates a <hr> - This creates a <img> - The image tag <meta> - That's a tag to later line break 'header row' - it's just a line ... - that's what we need to insert pictures that belongs into the head section, which we'll get
There are more, but those are the most commonly used ones. And our earlier doctype tag does NOT need to be closed, either. So now, we have this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> </html>
The / in the second html tag indicates that its the closing tag. Inside this outer container of our page, we need two subsections: the head (section) and the body. And now it looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> </head> <body> <body> </html>
url:ibtoffers.com seekers:www.ibtoffers@gmail.com
And when we load this up to a server, and look at it with our favorite browser, we see ABSOLUTELY NOTHING. This is not an error, we have not added anything to be seen yet so far, we have only created the very basic structure of an HTML page. (P.S. if you right-click the ABSOLUTELY NOTHING page, in most browsers youll see a box of options, and one of them will likely be View Source click that, and youll see the pages code.)
The VERY Basic HTML Structure The Head Section

Now that weve explored the scaffold that holds it all up, lets look at what goes inside the Head Section of an HTML page. So far, weve put together the doctype and the outlines for the html, head, and body section. The next step is to add what belongs inside the head section:
The Charset
The charset (character set) lets the browser know how to read and display the characters (letters, numbers, symbols) that are used in our HTML page. There are a great variety, depending on the type of letters (think Hebrew, Russian, Japanese, for example). Its a science all on itself, but since we want to build a website and not study "The Rise and Fall of the Document Character Set" or "How Young ISO Explores the World", using Western characters and symbols, were usually fine using a universal charset:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Note how this line begins with the word meta. Meta tags, part of the head section, will be discussed in more detail later, but since the determination of the proper charset is important to the browser, well feed it this bit of info right away.
The Title Tag

This tag is very important. Its what people see on the very top of their browser window. It can provide some relevant information about the webpage or website. Its also very helpful for search engines. On a website, its good practice to give each page a different, page-relative title. For this purpose, well stick with
<title>Basic HTML Structure - Head Section. How-to-Build-Websites Tutorial</title>
Meta Tags
People viewing your website will not see if you have meta tags or whats in them. They are important none-the-less, as they provide additional information to the browsers and some of them can actually influence what appears on the monitor. There is a long laundry list of different meta tags available, but for the purpose of this tutorial, well stick the most basic, commonly used ones.
<meta name="description" content="Give a brief description about the content of your page - this will show in search results."> <meta name="keywords" content="Provide relevant keywords to help search engines find your site.">
Shaik ahamed ahamedno1@gmail.com

<meta name="copyright" content="Pretty self-explanatory - here, I'd write: www.killersites.com"> <meta name="author" content=" Andrea Barnett for www.killersites / www.how-to-buildwebsites.com"> <meta name="ROBOTS" content="index, follow"> This tells the spiders to go ahead and index the page and follow its links. Good for search engines. If you don't want to be found, use this instead: <meta name="ROBOTS" content="noindex, nofollow">
Link to External Stylesheet

An external stylesheet is part of a well-designed website. Every page links to the same set of layout and style information, so formatting and any changes can be done for your entire site by changing just one document. The finer details of this, too, are a whole different lesson, but for the purpose of explaining the basic HTML document structure, just know that the link to your external stylesheet belongs inside the head section of the html document:
<link rel="stylesheet" type="text/css" href="external-stylesheet.css">
Putting it all together, our code now looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Basic HTML Structure - Head Section. How-to-Build-Websites Tutorial</title>
<meta name="keywords" content="Provide relevant keywords to help search engines find your site."> <meta name="copyright" content="Pretty self-explanatory - here, I'd write: www.killersites.com"> <meta name="author" content=" Andrea Barnett for www.killersites | www.how-to-buildwebsites.com"> <meta name="ROBOTS" content="index, follow"> <link rel="stylesheet" type="text/css" href="external-stylesheet.css"> <head> </head> <body> </body> </html>
And we still see ABSOLUTLEY NOTHING.
The VERY Basic HTML Structure The Body Section CONTENT & Basic HTML Tags
Now that weve taken a look at the boring, but very necessary, basic structural parts, were getting to some basic HTML tags that actually help define and display our content. Ive mentioned (cascading) stylesheets (CSS) earlier those are used to position and format our page. The HTML presents the content in a logical manner. Lets ignore CSS and all it can do for now, while were looking at some of the basic, frequently used HTML tags.
The Header Tags

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
Header tags are used to format headers. They are numbered, with the h1 tag for the most important header (or title) on your page (often the site name), the h2 tag the second most important header/title, and so on. Think header(s) and sub-header(s). This page shows header tags 1 to 6, as they appear without any formatting applied: HTML Header Tags.
The Paragraph Tag

<p></p>
The paragraph tag is for just what it says: paragraphs. They belong around individual paragraphs of text and define those and the space around/ between them. Here are a couple properly coded paragraphs as they appear, only formatted and styled by the browser defaults. The Paragraph Tag
List Tags
Lists are often misunderstood, but the list tag and html has an ordered and an unordered one is useful for all kinds of stuff. Aside from your basic numbered (ordered list = ol), bullet (unordered list = ul) there is your navigation which is actually an unordered list, that can be displayed horizontally or vertically but that is part of what CSS can do, and that is a different lesson.
The Ordered List

<ol> <li></li> <li></li> </ol>
The Unordered List

<ul> <li></li> <li></li> </ul>
And this is what this looks like: Ordered and Unordered Lists. There is one more aspect to lists, and they can be used by either ordered or unordered ones, and those are lists with subcategories. The code to an unordered list with 2 levels looks like this:
<ul> <li> <ul> <li></li> </ul> </li> </ul>
Basic HTML Creating a Hyperlink Part 1

One really cant create a website without hyperlinks then it would be just a bunch of individual, separate pages. Might as well read (or write) a book A link can take you to another page in the same website, a page in a different website, or to another place on the same page (bookmark). The code for such a link is:
<a href="Address = URL">Address or Description - or an image</a>
So for example:
<a href="http://www.killersites.com">www.killersites.com</a>
or
<a href="http://www.killersites.com">A Great Place to Learn</a>
take you to the same place. If you see those 2 links on a page, the first one would look like this(Make sure to hit your browsers back button after clicking the following links this lesson isnt over yet): www.killersites.com and the second one like that: A Great Place to Learn. But each takes you to the same place. Im pointing that out to demonstrate that the description really is irrelevant its just to give the cursor something to grab what matters is the part following the http. The above link takes us to a different website. But we can also link to a different page within the same site.
<a href="how-to-build-websites.com/basic-concepts/part1.php">A page on this site</a>
This would appear like this: A page on this site. Note how theres no http? The http, which stands for Hypertext Transfer Protocol, takes us way out into cyberspace, and from there, we can reach anything. But since this time, we only want another page inside this website, we dont have to reach out that far, and the http isnt needed.
Basic HTML Creating a Bookmark (Internal Hyperlink) Part II

In addition to links that lead away from the current page, there are also internal links hyperlinks that take one to a specific spot on the current page. Those spots are called bookmarks and the most frequent bookmark thats being linked to is go to top. In order to get such a link to work, first we have to create the bookmark. Thats done by adding id=bookmark to an element. Im just using the word bookmark as a placeholder ideally, wed use whatever makes sense. For example:
<div id="top">
This creates the bookmark. Now we need a hyperlink to take us there.

<a href="#top">Back to Top</a>
I want to mention that this way of bookmarking is a more current method the old way to create the bookmark looked like this:
<a name="top">Top of Page</a>
The way to link to it is the same. This old way isnt wrong, just outdated. Best to stick to the idmethod.
Basic HTML Inserting Images

Another important and very useful feature of a website is the display of images. When coding a site, so, one does not actually include or insert images at all the browser does that for us. We just need to tell the browser where to find and how to display the image.
So technically, all we do is create another hyperlink. That, however also means that we have to make sure that we upload the image as well. An image that only sits on our computer wont show up online. At best, youll get the red X or, depending on your browser, nothing at all. To insert that image, and here Im assuming that the image is saved in the exact same folder as the document were working with (that is important as is affects the path), it takes the following code:
<img src="image.jpg" alt="description of image">
The attributes are pretty much self-explanatory. img is short for image, src is short for SouRCe and remember that word. For some reason, writing scr instead of src is a common mistake and then the image wont show. But if you keep thinking source, you should be able to get the r and c in the correct order. And lastly, theres the alt tag. That stands for alternate text and is required. There we describe whats on the image for those who cannot see the image the visually impaired, screen readers, or for those that cant display images for whatever reason. There are other useful attributes: height and width, and title (that creates the text box that pops up when one hovers over the image). In order to display the following image
in a regular html website, assuming the image was stored in the same folder as the html page, it would require this code:
<img src="image.jpg" alt="Seedpod on a Japanese Bush" title="Seedpod" width="391" height="293">
If you were to view the source of this tutorial page, youd see that the code was a bit more complex that what Ive just shown you thats because this website runs on a WordPress Platform, which affects where files are stored, among other things. One last thing to mention above is all based on an HTML website with and HTML doctype. If you were using an XHTML doctype, the image tag would need to be closed by adding a closing slash so for XHTML it would need to look like this:
<img src="image.jpg" alt="Seedpod on a Japanese Bush" title="Seedpod" width="391" height="293" />
And one last comment about images: make sure that the width and height are the actual dimensions of the image technically, you could display any size image in exactly the size you specify, but that might distort the image. Also, the image is loaded at whatever size it truly is, not the size its displayed, so by loading a large image but displaying it smaller, youre wasting

bandwith and are increasing load times for no reason at all. Image optimization are a whole different lesson, but above are important points be aware of them!
Basic HTML HTML Lists

There are three different types of lists that can be created with HTML: Ordered Lists, Unordered Lists, and Definition Lists. When to use which list largely depends on the content thats being presented.
The Ordered List

<ul> <li>item<//li> <li>item<//li> <li>item<//li> </ul>
The Unordered List

<ol> <li>item<//li> <li>item<//li> <li>item<//li> </ol>
The Definition List

<dl> <dt>Item</dt> <dd>Description of Item</dd> <dt>Item</dt> <dd>Description of Item</dd> </dl
Basic HTML HTML Tables

Tables are often misused to lay out a page. Before CSS positioning, that was a good solution, but is no longer necessary, and with the better alternative, a bad idea. It creates quite a mess out of the code, which causes problems with spiders and search engines and makes updating a page much harder. However, using tables to display tabular date which is what they are meant for is perfectly fine. This is the code for the very basic table:
<table> <tr> <td>Column <td>Column <td>Column </tr> <tr> <td>Column <td>Column 1, Row 1, Cell 1</td> 2, Row 1, Cell 2</td> 3, Row 1, Cell 3</td> 1, Row 2, Cell 1</td> 2, Row 2, Cell 2</td>
<td>Column </tr> <tr> <td>Column <td>Column <td>Column </tr> </table>
3, Row 2, Cell 3</td> 1, Row 3, Cell 1</td> 2, Row 3, Cell 2</td> 3, Row 3, Cell 3</td>
and this looks like this. The tags are mostly self-explanatory. table is of course for table, tr stands for table row and td is for the cell (dont know why they didnt just use tc). The default of a table is border-setting 0 so adding a border makes the table appear more defined. Ideally, that would be done in the CSS, but for the purpose of this HTML Table tutorial, well add it inline:
<table border="1">
and now, our table looks more like a table: Table with Borders There are other html tags available to be used in tables
<caption> - Table Caption <th> - Table Header (cell) <thead> - Table Header content (row) <tbody> - Table Body <tfoot> - Table Footer <colgroup> - Used to define and format a group of columns <colspan> - Merges multiple cells across columns <rowspan> - Merges multiple cells across rows
This code:
<table border="2"> <caption>This is the Table Caption</caption> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tr> <td colspan="2">Column 1 and 2, Row 1, Cell 1 and 2</td> <td>Column 3, Row 1, Cell 3</td> </tr> <tr> <td>Column 1, Row 2, Cell 1</td> <td>Column 2, Row 2, Cell 2</td> <td rowspan="3">Column 3, Rows 2, 3, 4, Cell 3</td> </tr> <tr> <td>Column 1, Row 3, Cell 1</td> <td>Column 2, Row 3, Cell 2</td> </tr> <tr> <td>Column 1, Row 4, Cell 1</td> <td>Column 2, Row 4, Cell 2</td> </tr> <tr> <td>Column 1, Row 5, Cell 1</td> <td>Column 2, Row 5, Cell 2</td> <td>Column 3, Row 5, Cell 3</td> </tr> </table
Basic HTML How NOT to use the Line Break Tag

The <br> tag is called line break tag, because it is meant to break lines by inserting a single line break. It is not there to create paragraph breaks or to add space around images or move things around on your page. A poem is a good example of the proper use of the tag, as it requires line and paragraph breaks.
<p>Wer reitet so spt durch Nacht und Wind?<br> Es ist der Vater mit seinem Kind;<br> Er hat den Knaben wohl in dem Arm,<br> Er fat ihn sicher, er hlt ihn warm.</p> <p>"Mein Sohn, was birgst du so bang dein Gesicht?" <br> "Siehst, Vater, du den Erlknig nicht?<br> Den Erlenknig mit Kron und Schweif?" <br> "Mein Sohn, es ist ein Nebelstreif."</p>
And this is how this appears on the page note the different spacing line breaks just end one line and take you to the next, whereas a paragraph break the <p>tag actually creates space. Wer reitet so spt durch Nacht und Wind? Es ist der Vater mit seinem Kind; Er hat den Knaben wohl in dem Arm, Er fat ihn sicher, er hlt ihn warm. Mein Sohn, was birgst du so bang dein Gesicht? Siehst, Vater, du den Erlknig nicht? Den Erlenknig mit Kron und Schweif? Mein Sohn, es ist ein Nebelstreif. (For the purpose of this lesson, Im ignoring the proper use of HTML entity codes to create quotes and those funky German letters.) An address is another good example of the proper use of the <br> tag:
<p>John Doe<br> 123 Main Street<br> Some Town, USA<br> 555-555-5555</p>
Another situation where the <br> tag is frequently misused is around images to create space above and/or below them. While this:
<br> <br> <br> <br> <br> <img src="http://www.killersites.com/community/public/style_images/Killersites2/logo.png" alt="The Killersites Frog"> <br> <br> <br> <br> <br>
creates that:
Basic HTML Deprecated Tags

There is a list of HTML tags that have been deprecated, meaning they are outdated and should be avoided. Since browsers in general are backwards compatible, those tags still work, but there is
no guarantee that they will continue to do so. At least some of them will NOT be supported by HTML 5. And since using CSS is a much better, cleaner way to do things then why NOT use it? After all, your 80s hairdo still works, but would you really???? And here is a list of the deprecated tags:
<applet> - (inserts an applet) <basefont> - (sets the default font) <center> - (centers text) <dir> - (directory list) <font> - (font, its size and color) <isindex> - (searchable document index) <menu> - (menu list) <s> or <strike> - (both create strikethrough text) <u> - (underline) <xmp> - (preformatted text>
And here is the CSS for the most frequently still (ab)used of these dead tags. This is how its done nowadays:
<center>
text-align: center;
<font>
font-family: Baskerville, "Times New Roman", Times, serif;
(Note how Times New Roman a multi-word font name, is enclosed by quotes.)
<s> or <strike>
text-decoration: line-through;
<u>
text-decoration: underline;
Using CSS a Cascading Style Sheet to Style Your Website

If I havent made it clear in the earlier HTML tutorials, Im making it clear now: A well-designed website is styled with an external Cascading Style Sheet. Even as a child, "because I say so" was never good enough for me, and I dont expect it to be good enough for you. Your website consists of multiple pages, and were linking all of them to the SAME stylesheet. That stylesheet adds font types, colors, positioning, background images, etc. to the entire site. For example, if you want the background color on your site to be green, you would add this to your stylesheet:
body {background-color: #006600;}
And by tying this stylesheet with above information to every page of your site, every page will now have a green background. That means you define it ONE TIME and dont have to worry about it again. It also means that, lets say youve just finished all 159 pages of your website, and you just decided that maybe the green background isnt right after all blue would be much better

you now dont have to open all 159 pages and change your background color. NO it is so much easier than that. You only open your stylesheet and change the above to this:
body {background-color: #0088FF;}0
Then all you have to do is save this .css document, upload it, and TA-DAAAA your entire sites background is now blue. Just like that!
Adding CSS to a Webpage

There are actually three ways to add CSS to a web page and each one has a very specific purpose and use.
The External Stylesheet

The most common and most useful way to add the stylesheet to your webpage is via an external stylesheet. You will create a separate document, lets call it style.css. The style part is irrelevant, you can call it sirHenry.css if you so chose; its the .css part thats important. On that stylesheet, you will define exactly what fonts, colors, background colors and/or images, spacing, positioning, etc. your page will show. For example:
body { background-color: #ffffff; color: #000000; font-family: Arial, sans-serif; } p { padding: 15px; } h1 { color: FF0000; font-family: "Wide Latin"; }
And you will call this document style.css and save it into the same directory your index.html file is in. But if you look at your index.html page in your browser now, you wont see any of the colors we determined in style.css. In order to actually see the pretty colors, we have to link the stylesheet to the html document. And that is done with this code:
<link href="style.css" rel="stylesheet" type="text/css">
And this line needs to go into the head section of your HTML document so here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>A Good Title for this Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Now make sure that style.css and this new version of your HTML page are also uploaded to your hosting account, refresh the html page, and youll see Then there is:
Internal Styling
Instead of using the external stylesheet, you could add all the styling directly into the head section of each page that would look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>A Good Title for this Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font-family: Arial, sans-serif; } p { padding: 15px; } h1 { color: FF0000; font-family: "Wide Latin"; } </style> </head>
This is a method thats useful for styling that only applies to the very page this is inserted into so likely not the stuff we defined above. A good example for when internal styling would be practical is the contact page of your site the styling for the contact form (likely) wont be needed anywhere else on the entire site, so adding the parts that address just those tags only on the contact form makes good sense. The reason that using internal styling for stuff like the body and h1 tags is not a good idea at all is simple. Lets say you used the above for your new site and now, that all 159 pages are done, you decide you really should change the color of the h1 tags. And now youd have to open every single one of those 159 pages and make that change. NOT very efficient, right? And lastly, we have:
Inline Styling
In addition to the above external stylesheet (for all the pages on the site) and the internal styling (for all the styles on that ONE page), there is also inline styling. This is practical if you are styling just one thing one single time on your entire site. Maybe there is this ONE paragraph on that ONE page that you want to stick out but only that very one on the entire site. Then you could use incline styling like so:
<p style="border: solid 5px #FFAA00;"> The very special paragraph that shows up only ONE time on this ONE page on the ENTIRE site - only here, nowhere else. Got it? </p>
Using HTML to Define the Parts of a Webpage

A webpage usually consists of several different parts of course that can vary depending on content and design, but almost every page has a header, a navigation, content, and a footer. Weve already discussed the beauty of an external stylesheet to define the look and layout of an entire website. For this reason, its very useful to proclaim the specific parts clearly in the html, so we can address them in the stylesheet. So the HTML to a simple page layout might look like this:
<body> <div id="wrapper"> <div id="header"> <h1>The Company Name</h1> </div> <div id="navigation"> <ul> <li>Home</li> <li>Home</li> <li>Home</li> <li>Home</li> </ul> </div> <div id="content"> <h2>The Content</h2> <p>This is where all the important info goes. Pictures, too - pictures are good.</p> </div> <div id="header"> <p>The copyright stuff and some basic contact info - or whatever </p> </div> </div> </body>
Most of the above parts are pretty self-explanatory. And again, the actual name is irrelevant, but in the long run, itll make your life easier if you use descriptive names. After all, header pretty much says it all, whereas you might not remember exactly which part <div id=style1> refers to, when you get back to your webpage at a later point. Or after lunch. The only division I used that might require a bit more explanation is wrapper. Technically, the body tag already is the main container of all your HTML, but the body tag encompasses every bit of real estate you see on your monitor. By throwing another wrapper into the body, it allows us to better define the actual content area. Its not mandatory, its not a you must but its just a very useful tool in creating almost any website I havent designed a site without it and probably never will. And now that the major parts of the page have been defined in the HTML, we can used those definition or divisions to create the connection between the HTML and the CSS.
body { background-color: #ffffff; color: #000000; } #wrapper { background-color: #FFDD33; width: 1050px; } #header {whatever;} #navigation {whatever;} #content {whatever;} #footer {whatever;}
Creating Center-aligned Pages with CSS

A website tends to look more balanced when its centered on the monitor, instead of clinging to the left side with lots of white space on the right. This looks even worse with increased resolution. And its not that folks will use that white space to make notes.. So to center your page, wrap your content into a container a wrapper of sorts. Like so:
<body> <div id="wrapper"> <div id="content"> <p>This is where your entire content would go: - header, navigation, footer, whatever. It would likely be in different divisions, but for this demonstration, we do not need those details.</p> </div> (this closes the 'content' division) </div> (this closes your 'wrapper' div) </body> </html>
And now we use two simple lines in the CSS to move things to the middle: First, we need to give our wrapper a width:
#wrapper { width: 980px; }
How wide you set this wrapper, of course depends on your design. Instead of pixel, you could use %, or even em, but pixel is probably the better choice. And here comes the magic wand:
#wrapper { width: 980px; margin: 0 auto; }
And voila a perfectly centered website! What did it is the line:

margin: 0 auto;
It tells the browser to put a margin of zero to the top and bottom of the wrapper division (of course you can adjust that to your liking) and to automatically figure the right and left margins to center the wrapper (that needs to stay auto for the centering to work). P.S. In the olden aka pre-IE6 days, this needed to be done by adding a
body {text-align: center;}
and then, to neutralize all that, a

#wrapper {text-align: left;}
But thank goodness, those days are gone. Its been ok to NOT support anything less than IE6 for a long time now, and even IE6 is about to be extinct.
Advanced Html :
Maybe this lesson should have been called: Developing an advanced understanding of HTML fundamentals. We are not trying to learn advanced tricks or new tags, we are doing something far more useful: Understanding the basics is what separates the pros from the amateurs.
Introduction
HTML is a relatively simple technology to learn, so easy in fact that once people get just a very basic understanding, they jump into building web pages without much thought about learning anything more about the fundamentals of HTML. As such, most web designers are not taking full advantage of HTML and CSS; they are wasting their time and money, generally making their lives more difficult.

The differences between logical and physical tags is one of the key fundamental concepts in HTML that, when understood, can have a huge impact on a web designers way of doing things.
Logical inline tags vs. Physical inline tags

Logical Tags
In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the browser) the enclosed texts meaning. An example of a logical tag is the <strong> </strong> tag. By placing text in between these tags you are telling the browser that the text has some greater importance. By default all browsers make the text appear bold when in between the <strong> and </strong> tags, but the point to take away from this is that the strong tag implies the importance of that text. This has impact with search engines like Google who look for such tags to help figure out what the page is about. There are many logical tags and they include: <strong> : Strong as above. <em> : emphasize usually renders (made to look like by the browsers) as italic. <span> : a neutral inline container. Read about this distinction below. <div> : a neutral block element. Read about this distinction below. Logical tags, as mentioned above, have default ways in which browsers (like IE or Opera) render them. But it is understood that CSS should be used to give them their style, or in other words their look.
Physical Tags
Physical tags on the other hand provide specific instructions on how to display the text they enclose. Examples of physical tags include: <b> : Makes the text bold. <big> : Makes the text usually one size bigger than whats around it. <font> : Used to apply a font-face (like Arial or Helvetica) and font-color. <i> : Makes text italic. Physical tags are more straightforward; <i> makes the text italic, <b> makes text bold and <font> is used to set the font face and color for the text. So why use one or the other? In a nutshell, physical tags were invented to add style to HTML pages because style sheets were not around, though the original intention of HTML was to not have physical tags. Why? Well physical tags are just messy, tedious, and are more trouble than theyre worth (for the most part). Rather than use physical tags to style your HTML pages, you should be using style sheets (also called Cascading Style Sheets or CSS).
Block level vs. Inline tags

What is the point of inline in the description of the tag categories? In HTML, tags are either inline or block-level elements.
Block level HTML elements

Block-level elements exist in their own virtual box and are always followed by a line break (like hitting the enter key after typing in some text). In other words, a block-level element breaks the flow of text and other elements to create a virtual box around itself.
Inline HTML elements

Inline tags (elements) become a part of the flow of text in which they are inserted and have no box around them and dont have the line break, either. An example of a block tag is a <p> tag (paragraph) and an example of an inline tag is the <b> (bold) tag. Try the tags out and youll see what happens to your page when you use <p> tags and <b> tags; all will be made clear once you see it for yourself.

The VERY Basic HTML Document - The Structure: Shaik Ahamed

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

The VERY Basic HTML Document - The Structure: Shaik Ahamed

Caricato da

Copyright:

Formati disponibili

Shaik ahamed ahamedno1@gmail.

The VERY Basic HTML Document The Structure

The VERY Basic HTML Structure The Head Section

The Title Tag

Shaik ahamed ahamedno1@gmail.com

Link to External Stylesheet

Putting it all together, our code now looks like this:

And we still see ABSOLUTLEY NOTHING.

The Header Tags

The Paragraph Tag

The Ordered List

The Unordered List

Basic HTML Creating a Hyperlink Part 1

Shaik ahamed ahamedno1@gmail.com

Basic HTML Creating a Bookmark (Internal Hyperlink) Part II

This creates the bookmark. Now we need a hyperlink to take us there.

Basic HTML Inserting Images

Shaik ahamed ahamedno1@gmail.com

Basic HTML HTML Lists

The Ordered List

The Unordered List

The Definition List

Basic HTML HTML Tables

<td>Column </tr> <tr> <td>Column <td>Column <td>Column </tr> </table>

Shaik ahamed ahamedno1@gmail.com

Basic HTML How NOT to use the Line Break Tag

Basic HTML Deprecated Tags

Using CSS a Cascading Style Sheet to Style Your Website

Shaik ahamed ahamedno1@gmail.com

Adding CSS to a Webpage

The External Stylesheet

Using HTML to Define the Parts of a Webpage

Shaik ahamed ahamedno1@gmail.com

Creating Center-aligned Pages with CSS

And voila a perfectly centered website! What did it is the line:

and then, to neutralize all that, a

Shaik ahamed ahamedno1@gmail.com

Logical inline tags vs. Physical inline tags

Block level vs. Inline tags

Block level HTML elements

Inline HTML elements

Potrebbero piacerti anche