Today I will talk about the structure of a web page. The structure is very important, because even if you have great content, if the structure is not correct the page will not display properly. This should not be unexpected, any programming language requires you to get the structure and syntax correct before it works properly.
Using the same web page as the prior post, I have included a “Web page structure” page under the topics tab and have grayed out the content areas to draw attention to the structure and syntax. Again, do not be alarmed if the material is a bit overwhelming, for we will go over it in some detail in later posts.
The top 3 lines on the page are instructions for the browsers on how to render the page. There are 3 different versions, strict, transitional and frameset. The most popular seems to be transitional, which speaks to the degree the coding is in compliance with the xhtml standard. I need to digress a little and clear up the differences between html and xhtml. In my earlier post I mentioned that I will discuss html 4.0 instead of html 5. Actually, I will be discussing xhtml 4.0 instead. Xhtml is a newer version of html with increased functionality but it’s more strict in the coding. So, when I say html, I’m actually referring to xhtml.
There are not any changes to make to those top 3 lines. All you need to do is make sure you’ve copied the correct coding and that it’s at the top of the page. This is a good time to bring up a point. And that is, you don’t need to understand all the coding but just know enough to be able to use them. This is actually how a lot of web designers do their work, using coding developed by others and then adapting them for their specific projects.
Notice things like head, script, style, title, body, and html enclosed in brackets. These are called tags and there is an opening <> and a closing one </>. This will be true for most of the tags we will be studying. The minimum tags required for a web page are html, head, title, and body and must be in the order shown below.
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
The html tags defines the overall page. The head section is for miscellaneous information such as scripting, meta information, style tags and the title tags. The title tag is the name of the page and is used by search engines to identify your page. The body is where the content resides.
Also notice that tags are sometimes nested inside others. If so, they must follow the concentric circle approach, as shown below with two examples. That is, if A is inside of B, then the the opening and closing tags of A are within the opening and closing tags of B.
Html coding does not recognize white spaces or layout in its execution. Any white space or layout format is for the convenience of the programmer to help with understanding and trouble shooting.
An example would be:
h3 {
Font-family: Arial, Helvectica, sans-sarif;
Color: #Foo;
}
It is the same as:
h3{font-family:Arial, Helvectica, sans-sarif;Color: #Foo;}
The first is the more typical format that web designers use.
I’m not that much of a online reader to be honest but your blogs really nice, keep it up!
I’ll go ahead and bookmark your website to come back in the future.
All the best
I’m really enjoying the theme/design of your website.
Do you ever run into any internet browser compatibility
problems? A small number of my blog audience have complained about my site not
operating correctly in Explorer but looks great in Chrome.
Do you have any advice to help fix this problem?
Wow! At last I got a website from where I be capable of
in fact get valuable information regarding my study and
knowledge.
Simply just want to mention I’m pleased I happened on your internet page! https://www.youtube.com/watch?v=wij_OTOWi6A
I was very pleased to uncover this website. I wwant to
to thank you foor yor time for ths particularly fantastic read!!
I definitely savored ecery part of it and I have you book
marked tto look at new sthff on your site.
Good web site you have here.. It’s hard to find high-quality writing like yours
these days. I honestly appreciate individuals like you!
Take care!!
I love your blog.. very nice colors & theme. Did you create
this website yourself or did you hire someone too do it for you?
Plz respond as I’m looking to construct my own blog and would like to
find out where u got this from. cheers
Howdy! Quick question that’s completely off topic. Do you know how to make your site mobile friendly?
My web site looks weird when viewing from my iphone4. I’m trying
to find a template or plugin that might be able to resolve this problem.
If you have any recommendations, please share.
Appreciate it!
Hi there, just became aware of your blog through Google, and found that it is truly informative.
I am gonna watch out for brussels. I will appreciate if
you continue this in future. Lots of people will be benefited from your writing.
Cheers!
Hello there, I discovered your website by the use of Google at the
same time as searching for a similar subject, your web
site got here up, it seems good. I have bookmarked it in my google bookmarks.
Hi there, just turned into aware of your weblog through Google, and found that
it’s really informative. I’m going to be careful for brussels.
I’ll be grateful if you happen to continue this in future.
Lots of other people shall be benefited from your
writing. Cheers!
Good day! Would you mind if I share your blog with my myspace group?
There’s a lot of folks that I think would really enjoy your content.
Please let me know. Thank you
Hi there, I wish for to subscribe for this weblog to take most recent updates, therefore
where can i do it please help.
I needed to thank you for this very good read!! I certainly enjoyed every bit
of it. I’ve got you book marked to check out new things you post…
Thanks
No subscription necessary, just continue to use website address.
Yes it is ok to share with your myspace group. I hope they will enjoy it also.
I discontinued adding new material a few years ago as it seemed no one was interested. Based on some of the recent responses I’ve received, I’ll now reconsider that position.
Yes I will reconsider adding new material in the future.
My blog site is one of the free templates from WordPress. There are many available, just google it.
Thank you.
Thank you.
Thank you.
Thank you.
You have to design your site in other than explorer, as you have done. Then you go back and view it in explorer and correct all the problems by creating another Cascading Style Sheet (CSS) strictly for the explorer users.
Your webpage will use a different style sheet for explorer than it uses for most of the other browsers. The switch is automatic with language in the header section of the webpage. Right click on one of my pages and use “view page source” and you will see how I accomplished the switch. There is a ton of information on the internet detailing this process.
You have to use responsive design techniques. A very good book on the topic is “Responsive Web Design” by Ethan Marcotte. Also there are many articles on the topic available over the internet.
Thank you
Great website! It looks very professional! Keep up the good job! https://www.youtube.com/watch?v=vIJzPyBZiQA
I am really loving the theme/design of your website. Do you ever
run into any internet browser compatibility issues?
A small number of my blog visitors have complained about my blog not working correctly in Explorer but looks great in Firefox.
Do you have any suggestions to help fix this issue?
You have to design your site in other than explorer, as you have done. Then you go back and view it in explorer and correct all the problems by creating another Cascading Style Sheet (CSS) strictly for the explorer users.
Your webpage will use a different style sheet for explorer than it uses for most of the other browsers. The switch is automatic with language in the header section of the webpage. Right click on one of my pages and use “view page source” and you will see how I accomplished the switch. There is a ton of information on the internet detailing this process.