Scribd
Upload
34 views

Creating A Webpage

This document provides instructions on how to create a basic webpage by writing HTML code. It explains how to open a text editor, create an HTML file with the .html extension, and add basic HTML tags like <html>, <head>, <title>, <body>, and <p> to include text on the page. The document then previews the webpage in a browser and provides explanations of the HTML code used.

Uploaded by

linggeas
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
34 views

Creating A Webpage

This document provides instructions on how to create a basic webpage by writing HTML code. It explains how to open a text editor, create an HTML file with the .html extension, and add basic HTML tags like <html>, <head>, <title>, <body>, and <p> to include text on the page. The document then previews the webpage in a browser and provides explanations of the HTML code used.

Uploaded by

linggeas
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Creating a Webpage

OK, let's walk through the above steps in more detail.


Create an HTML file
An HTML file is simply a text file saved with an .html or .htm extension
Open up your computer's normal plain text edit.or use a specialized HTML editor such as DreamWeaver or FrontPage if you prefer.
Create a new file (if one wasn't already created)
Save the file as html_tutorial_example.html
Type some HTML code
Type the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>
View the result in your browser
Either...
Navigate to your file then double click.
Repeat the last 2 steps until you're satisfied with the result
Explanation of code
OK, before we get too carried away, I'll explain what that code was all about.
We just coded a bunch of HTML tags. These tags tell the browser what to display and where. You may have noticed that for every
"opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between. Most HTML tags have an
opening and closing tag.
All HTML documents should at least contain all of the tags we've just coded and in that order.
HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. These elements are
defined using HTML tags. HTML tags tell your browser which elements to present and how to present them. Where the element appears is
determined by the order in which the tags appear.
HTML consists of almost 100 tags. Don't let that put you off though - you will probably find that most of the time, you only use a handful of
tags on your web pages. Having said that, I highly recommend learning all HTML tags eventually - but we'll get to that later.
OK, lets look more closely at the example that we created in the previous lesson.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>
Explanation of the above code:
The <!DOCTYPE... > element tells the browser which version of HTML the document is using.
The <html> element can be thought of as a container that all other tags sit inside (except for the !DOCTYPE tag).
The <head> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS), although
the <title> tag is an exception to this. The content of the <title> tag is displayed in the browser's title bar (right at the very top of the
browser).
The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go.
The <p> tag declares a paragraph. This contains the body text.
Closing your tags
As mentioned in a previous lesson, you'll notice that all of these tags have opening and closing tags, and that the content of the tag is
placed in between them. There are a few exceptions to this rule.
You'll also notice that the closing tag is slightly different to the opening tag - the closing tag contains a forward slash (/) after the <. This
tells the browser that this tag closes the previous one.
UPPERCASE or lowercase?
Although most browsers will display your page regardless of the case you use, you should always code in lowercase. This helps keep your
code XML compliant (but that's another topic).
Therefore... Good: <head>
Bad:<HEAD>

Headings
There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from h1 for the most important, to
h6 for the least important.
Typing this code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Results in this:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Bold
You specify bold text with the <b> tag.
Typing this code:
<b>This text is bold.</b>
Results in this:
This text is bold.
Italics
You specify italic text with the <i> tag.
Typing this code:
<i>This text is italicised.</i>
Results in this:
This text is italicised.
Line Breaks
Typing this code:
<p>Here is a...<br />line break.</p>
Results in this:
Here is a
line break.
Horizontal Rule
Typing this code:
Here's a horizontal rule... <hr /> ...that was a horizontal rule :)
Results in this:
Here's a horizontal rule...

...that was a horizontal rule :)


Unordered (un-numbered) List
Typing this code:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Results in this:
List item 1
List item 2
List item 3
Ordered (numbered) List
Note, that the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered, "u" for
unordered).
Typing this code:
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
Results in this:
List item 1
List item 2
List item 3
We will be covering more HTML tags throughout this tutorial, but before we do that, you should know about attributes.
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the
tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign.
Example
Consider this example:
<body style="background-color:orange">
OK, we've already seen the body tag in previous lessons, but this time we can see that something extra has been added to the tag - an
attribute. This particular attribute statement, style="background-color:orange", tells the browser to style the body element
with a background color of orange.
The browser knows to make the background color orange because we are using standard HTML tags and attributes (along with standard
Cascading Style Sheets code) for setting the color.
Another Example
Here's another example of adding an attribute to an HTML tag. In this example, we use the <a> tag to create a hyperlink to the Quackit
website.
<a href="http://www.quackit.com">Quackit Website</a>
This results in:
Quackit Website
Many attributes are available to HTML elements, some are common across most tags, others can only be used on certain tags. Some of the
more common attributes are:
Attribute Description Possible Values
class Used with Cascading Style Sheets (CSS) (the name of a predefined class)
style Used with Cascading Style Sheets (CSS) (You enter CSS code to specify how the way the HTML element is
presented)
title Can be used to display a "tooltip" for your (You supply the text)
elements.
You don't need to fully comprehend these just yet. The good thing about attributes is that, in most cases, they are optional. Many HTML
elements assign a default value to its attributes - meaning that, if you don't include that attribute, a value will be assigned anyway. Having
said that, some HTML tags do require an attribute (such as the hyperlink example above).
You will see more attributes being used as we cover off some of the more advanced HTML elements.
In HTML, colors can be added by using the style attribute. You can specify a color name (eg, blue), a hexadecimal value (eg, #0000ff), or
an RGB value (eg rgb(0,0,255)).
Syntax
Foreground Color
To add color to an HTML element, you use style="color:{color}", where {color} is the color value. For example:
<h3 style="color:blue">HTML Colors</h3>
This results in:
HTML Colors
Background Color
To add a background color to an HTML element, you use style="background-color:{color}", where {color} is the color value.
For example:
<h3 style="background-color:blue">HTML Colors</h3>
This results in:
HTML Colors
Border Color
To add a colored border to an HTML element, you use style="border:{width} {color} {style}", where {width} is the width
of the border, {color} is the color of the border, and {style} is the style of the border. For example:
<h3 style="border:1px blue solid;">HTML Colors</h3>
This results in:
HTML Colors
Color Names
The most common methods for specifying colors are by using the color name or the hexadecimal value. Although color names are easier
to remember, the hexadecimal values and RGB values provides you with more color options.
Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9 and the letters go from A to F. When using
hexadecimal color values in your HTML/CSS, you preceed the value with a hash (#). Although hexadecimal values may look a little weird at
first, you'll soon get used to them.
There are 16 color names (as specified in the HTML 4.0 specification). The chart below shows these color names and their corresponding
hexadecimal value.
Color Color Name Hexadecimal Value   Color Color Name Hexadecimal Value
  Black #000000     Green #008000
  Silver #c0c0c0     Lime #00ff00
  Gray #808080     Olive #808000
  White #ffffff     Yellow #ffff00
  Maroon #800000     Navy #000080
  Red #ff0000     Blue #0000ff
  Purple #800080     Teal #008080
  Fushia #ff00ff     Aqua #00ffff
You can make up your own colors by simply entering any six digit hexadecimal value (preceeded by a hash). In the following example,
we're using the same code as above. The only difference is that, instead of using "blue" as the value, we're using its hexadecimal
equivalent (which is #0000ff):
<h3 style="color:#0000ff">HTML Colors</h3>
This results in:
HTML Colors
If we wanted to change to a deeper blue, we could change our hexadecimal value slightly, like this:
<h3 style="color:#000069">HTML Colors</h3>
This results in:
HTML Colors
Choosing Colors - The Easy Way
By using hexadecimal or RGB color values, you have a choice of over 16 million different colors. You can start with 000000 and increment
by one value all the way up to FFFFFF. Each different value represents a slightly different color.
But don't worry - you won't need to remember every single hexadecimal color! The HTML color picker and color chart make it easy for you
to choose colors for your website.

You might also like