Basic Webpage Structure

Basic webpage structure
The 'html' tag lets a web-browser know for sure that it is dealing with an html based webpage. Please note the manner in which the tag is surrounded by cheverons and that the tag is repeated with the inclusion of a '/' to terminate the mark-up.
<html></html>
the 'head' tag inside of the html tag. The head tag is used to hold information about your page, such as a title or description for search engine usage.
<html> <head></head> </html>

The 'body' tag is where all of your visible page contents will reside. The tag must be below the head tag and within the html tag.
<html> <head></head> <body></body> </html>

As we have seen in previous tutorials on the subject of creating a webpage using HTML, the structuring of your HTML document is uniformal as follows:
<html> <head> <title>Title for this page</title> </head> <body> This is where the content for this page will reside. </body> </html>
Naturally, the copy within your <body></body> tags will wrap around and around unless you add a little more HTML code to break thing up a little. Just adding a line break within your source will do nothing. You have got to code the paragraph or line break into the actual HTML.
Paragraphs in HTML
A paragraph is a "distinct subdivisions of a text intended to separate ideas". In HTML terms it is denoted by the following code:
This is a paragraph.
Line Breaks
A line break is characterised by a 'single return', where the copy preceeds after the line break directly beneath it. Special Note: Remember, don't worry about line breaks in your HTML; lay it out in a manner that allows you to easily read when coding - they won't appear on your page within any browser. If you need to create a line break in your copy, then you can try the following: Example:
This is my first line, And here is the next line.
The line break causes the preceeding line of text to appear directly beneath the first, unlike paragraph which forces a new paragraph.
Font formatting: Bold-Italic-Underline

Bold text
Code: This is bold. This isn't. Result: This is bold. This isn't.
Italic text
Code: This is italic. This isn't. Result: This is italic. This isn't.
Under-lined text
Code: This is underlined. This isn't. Result: This is underlined. This isn't.
Combining formatting together

Code: Bold and italic. Result: Bold and italic.
Tag syntax:
Incorrect example: Text Correct example: Text
Text layout
Paragraphs
Code: Seperate Paragraph. Result: Seperate Paragraph.
Line Breaks
Code: This is line 1. This is line 2. Result: This is line 1. This is line 2. Please note: In the above example, the 'br' or 'line-break', will not require a container as doesn't apply itself to any particular word, line or paragraph of text.
Font Color and Size

Font-Color
Code: Orange Text. Result: Orange Text.
Font-Size (from 1-7)

Code: Big Text. Result:
Big Text.
Combining formatting together

Code: Big Orange Text. Result:
Big Orange Text.
Text Alignment
Left-aligned Text
Code: <div align="left">Left Align</div> Result: Left Align
Right-aligned Text
Code: <div align="right">Right Align</div> Result: Right Align
Center-aligned Text
Code: <div align="center">Center Align</div> Result: Center Align
Headings - Header Tags (1(largest) - 6)

Code: <h2>This is a heading</h2> Result:
This is a heading
Please note: In the above example, the 'h2' (or any other 'hx' tag) automatically results in a line break after the text within tag.
Bullet Points and Numbers

An un-ordered List
Code: <ul>
<li>Point 1 <li>Point 2 <li>Point 3 </ul>

Result:
Point 1 Point 2 Point 3
An Ordered List
Code: <ol>
<li>Point 1 <li>Point 2 <li>Point 3 </ol>

Result:
1. 2. 3.
An Ordered List starting from...

Code: <ol start="5">
<li start="5">Point 1 <li>Point 2 <li>Point 3 </ol>

Result:
5. 6. 7.
CSS Application
There are 3 main ways in which you can incorporate CSS in to a page:
1. In-line CSS Style

CSS is written in to the HTML code at the point where you want it to be applied. Example: This text is red Result: This text is red By using the attribute 'style', you can place any type of CSS code to control the text, images, URL links, etc with the confines of the enclosing tag - in this case a ''. You could also apply it to other HTML tags:
Red and bold CSS Margins <h2 style="font-weight: normal">Non-bold header</h2>
2. Internal CSS Style

An Internal CSS style is where you have your CSS at the top of your code (usually inside the ' <head></head>' area) within <style></style> tags. This will cause any reference to that styling throughout the rest of the page to conform to it.
<head> <style type="text/css" media="screen"> h2 { font-weight: normal } p { color:red } </style> </head> <body> <h2>This is not bold</h2> This paragraph is red <h2>This also is not bold</h2> Yep, you've guessed it, this paragraph is also red! </body>
3. External CSS Style

Internal CSS is good for introducing styling that is particular to that page, but external CSS allows even greater control. External CSS is CSS code that is place in to a file that is referred to by 1 or more pages. Example: Using your source editor, create a new page and call it something like 'my-style.css'. Whatever name you choose, just make sure that it ends with '.css'. Within your css page, add the following:
p {color:blue} b {color:red; text-decoration: underline}
Now create an HTML document - call it whatever you like, but add this to the top of it, preferably within the <head></head> section:
<head> <style src="my-style.css" type="text/css" media="screen"></style> </head> <body>This paragraph of text is coloured blue. And any bold text is both red and underlined. </body>
CSS versus HTML text formatting

By James Middleton - Added 7th of July 2008 Without CSS (Cascading Style Sheets), text formatting is a long-winded and ugly affair. Each paragraph of copy would need to establish the font-type (if not default - Times New Roman), font-color (if not default - black) and fontsize. As you can imagine, this leads to a lot of extra in-document HTML code. This will inevitably results in an increase in page file size and may even (in some cases) inhibit the search engine indexing process from the actual written content itself. CSS allows you to specify localised or even a universal default for copy formatting. Take a look at the following examples.
Standard non-CSS HTML formatting

This is the copy
HTML with CSS formatting

This is the copy
After looking at the above example, you may feel that CSS isn't worth the effort; after all, the CSS version is only 3 characters shorter and just as untidy. The above demonstrate a localised or 'in-line' application of CSS. CSS is far more powerful when applied separately from page content. The following examples demonstrate this.
HTML formatting
Mary had a little lamb its fleece was white as snow; And everywhere that Mary went, the lamb was sure to go. It followed her to school one day, which was against the rule; It made the children laugh and play, to see a lamb at
school. And so the teacher turned it out, but still it lingered near, And waited patiently about till Mary did appear. "Why does the lamb love Mary so?" the eager children cry; "Why, Mary loves the lamb, you know" the teacher did reply.
CSS formatting
<style type="text/css" media="screen"> p { color: #f00; font-size: 12pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } </style> Mary had a little lamb its fleece was white as snow; And everywhere that Mary went, the lamb was sure to go. It followed her to school one day, which was against the rule; It made the children laugh and play, to see a lamb at school. And so the teacher turned it out, but still it lingered near, And waited patiently about till Mary did appear. "Why does the lamb love Mary so?" the eager children cry; "Why, Mary loves the lamb, you know" the teacher did reply.
There is a clear winner here. Notice how easy it is to read the copy within the CSS example. To take this to the next level, we will remove the CSS from the page altogether and put it in to a separate file. In place of the CSS, we will add a file reference:
style.css
p { color: #f00; font-size: 12pt; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
my-page.html
<style type="text/css" media="screen" src="text-format.css"> Mary had a little lamb its fleece was white as snow; And everywhere that Mary went, the lamb was sure to go. It followed her to school one day, which was against the rule; It made the children laugh and play, to see a lamb at school. And so the teacher turned it out, but still it lingered near, And waited patiently about till Mary did appear. "Why does the lamb love Mary so?" the eager children cry;
"Why, Mary loves the lamb, you know" the teacher did reply.
Now we have 'externalised' the CSS - that is, it has been saved within a separate file and call upon using 'src="textformat.css"' within the 'style' tag. You could include a CSS file src (source) reference on every page of your website, thereby massively reducing the overall file size and load time.

Basic Webpage Structure

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic Webpage Structure

Uploaded by

Copyright:

Available Formats

Basic webpage structure

<html> <head></head> </html>

<html> <head></head> <body></body> </html>

This is my first line,<br> And here is the next line.

Font formatting: Bold-Italic-Underline

Combining formatting together

Font Color and Size

Font-Size (from 1-7)

Combining formatting together

Big Orange Text.

Headings - Header Tags (1(largest) - 6)

Bullet Points and Numbers

<li>Point 1 <li>Point 2 <li>Point 3 </ul>

Point 1 Point 2 Point 3

<li>Point 1 <li>Point 2 <li>Point 3 </ol>

Point 1 Point 2 Point 3

An Ordered List starting from...

<li start="5">Point 1 <li>Point 2 <li>Point 3 </ol>

Point 1 Point 2 Point 3

1. In-line CSS Style

2. Internal CSS Style

3. External CSS Style

p {color:blue} b {color:red; text-decoration: underline}

CSS versus HTML text formatting

Standard non-CSS HTML formatting

HTML with CSS formatting

You might also like