Member Avatar for balinda_wilson

I am having a slight problem and want to know if anyone can help me. I have an assignment that requires me to hard code a basic Web page describing my profession, hobbies, or interest. This page will be the homepage of the website.

My hobby - writing
My profession - office support/ entry level IT
My interest - computers

Now this is what I came up with but not sure if I am missing information or if this is wrong...PLEASE HELP ME SOMEONE????

Since it is basic:
1) Open Notepad
2) Type in:
<html>
<head>
</head>
<body>
PUT YOUR TEXT HERE
</body>
</html>
3) Save the file as "index.html" (Remember to change the file type in notepad save dialog)

  • 5 Contributors
  • 7 Replies
  • 1K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Cool&Awesome
Member Avatar for scrappedcola

That's about right but you might also want to add some styling/formatting so it looks nice (kind of what you would do for a formal resume). There are numerous sites that give decent tutorials on basic styling and html tags. You should also atleast have

<!doctype html>

at the top of the page so you site doesn't render in what is known as Quirks mode (non standards mode). This will make certain most of your styling will work the way it's supposed to. Some tutorial sites to get you started:
CSS Basics
Basic CSS Layout
Html Tutorial (only really glanced at it and it looked ok)
W3C Schools (while dated material it is still a good basics site).

Member Avatar for balinda_wilson

Thank you very much...I am going to check the tutorials out now and let you know how I did...

Member Avatar for Cool&Awesome

I am having a slight problem and want to know if anyone can help me. I have an assignment that requires me to hard code a basic Web page describing my profession, hobbies, or interest. This page will be the homepage of the website.

My hobby - writing
My profession - office support/ entry level IT
My interest - computers

Now this is what I came up with but not sure if I am missing information or if this is wrong...PLEASE HELP ME SOMEONE????

Since it is basic:
1) Open Notepad
2) Type in:
<html>
<head>
</head>
<body>
PUT YOUR TEXT HERE
</body>
</html>
3) Save the file as "index.html" (Remember to change the file type in notepad save dialog)

Hi Balinda,

Yes, what you propose here is a completely correct way to hard code a html document, and absolutely sufficient.

As somebody mentioned, you can add <!DOCTYPE HTML> at the very top of your document - it' declares what type of document it is (makes sense, right:)

Also, at the very least you want to add this:

My hobby - writing<br />
My profession - office support/ entry level IT<br />
My interest - computers<br />

The <br /> tag creates a line break, meaning text will continue
in the next row, just as you wanted.

Also some other tags to get you started

<strong>Text within these tags will be bold</strong>

<h1>Text within this tag will be treated like heading, and look like it too.</h1>


<ul>
<li>This one will make a bulleted list of items</li>
<li>You put each item between 2 li tags, like this</li>
<li>There's no limit to number of items you can list like this</li>
<li>And ul tags you see on start and end mark the beginning and</li>
<li>the end of the list. ul stands for "unordered list" which means</li>
<li>order of items in this list is not important, and can be changed as you wish</li>
</ul>

There's so much more to this, but this is just to hopefully help you get a feel of how HTML is used, and get you in the right direction.

Member Avatar for balinda_wilson

Hi Balinda,

Yes, what you propose here is a completely correct way to hard code a html document, and absolutely sufficient.

As somebody mentioned, you can add <!DOCTYPE HTML> at the very top of your document - it' declares what type of document it is (makes sense, right:)

Also, at the very least you want to add this:

My hobby - writing<br />
My profession - office support/ entry level IT<br />
My interest - computers<br />

The <br /> tag creates a line break, meaning text will continue
in the next row, just as you wanted.

Also some other tags to get you started

<strong>Text within these tags will be bold</strong>

<h1>Text within this tag will be treated like heading, and look like it too.</h1>


<ul>
<li>This one will make a bulleted list of items</li>
<li>You put each item between 2 li tags, like this</li>
<li>There's no limit to number of items you can list like this</li>
<li>And ul tags you see on start and end mark the beginning and</li>
<li>the end of the list. ul stands for "unordered list" which means</li>
<li>order of items in this list is not important, and can be changed as you wish</li>
</ul>

There's so much more to this, but this is just to hopefully help you get a feel of how HTML is used, and get you in the right direction.

I am working on it as we speak but I am wondering why did you leave step 2, 4, and 5 blank...After the code that is when I put the text in right...

Member Avatar for RykeTech

2, 4, and 5 are blank because they are the numbered lines of code and not "steps" as you perceived. Developers often skip lines within their code because it's much easier to navigate later and adds somewhat of a structure or flow when modifying or updating.

You are correct in placing the text after the code, but make sure your text stops before each closing tag. The closing tags are generally anything containing </>, such as </strong>, </h1> and </li>.

Member Avatar for Cool&Awesome

I am working on it as we speak but I am wondering why did you leave step 2, 4, and 5 blank...After the code that is when I put the text in right...

Yes, I left blank lines just for the sake of visibility. If you click the

(Toggle Plain Text) link above the code you will see the actual code - it doesn't actually contain:

1.
2.
3.
4.
etc. these are just added here in forum for easier reference

Here's a way to look at HTML...

If you write a plain text file, with just text in it (you can do this in Notepad for example), and save it with .htm or .html extension (whatever you prefer, both work)
it will be a HTML file, and when opened with browser, it will show your text.

Now..using tags you can format this text (and do much more btw.)

<p> </p>

stands for paragraph, and all the text between these 2 tags will be treated so.

<h1> </h1>

- heading

<h2> </h2>

- sub heading (or smaller heading)

<h3> </h3>

- sub sub heading

<hr />

- horizontal line

<img src="images/your-image.jpg" alt="Alternative text if image doesn't load" />

- if you make a folder named images on the same place where your html document is, and put in it image named your-image.jpg, this tag will show the image in your document...

Now, after you master a bunch of tags there is (and you will quickly, it's very simple)...the next step will be...

Noticing that your pages don't actually look like most websites or pages, but more plain. Worry not. Try this. If you have Mozilla Firefox, go with it to some website, then choose from Firefox menu View-->Page Style-->no style

You'll see that other pages out there are build from the same material like yours and now look more similar, so you just need to decorate your page. This you will do using CSS, which serves to describe how your pages should look.

This below is not ultra-cool, nor desirable way of doing it, but
just to give you a feel:

change your opening body tag (the first one)

<body>

to this:

<body style="background:gray;">

and somewhere in text add this:

<p style="color:red;font-size:24px;text-decoration:underline;"> This is red, big, underlined text </p>

Save the page and check it out in browser.


Now, you don't have to type all day, you can use external CSS file to define how all paragraphs will look, or all headings etc. And you can even define more possible looks for any element.

What is cool about this is if you decide to change some color on your site, or anything in site look, you can just edit it in this one file, and your entire site will change in a snap.

Edited by Cool&Awesome because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.