[Guide] How to make a static webpage [Beginner]

Question

G&G Designing 1 Junior Poster in Training

13 Years Ago

Ok so I have decided to write a small tutorial to help the newbys out there! Here it goes!

WARNING! I AM NOT DONE! I will finish the rest tomorrow when i wake up.. its 4:03am....

Today we are going to be designing a blog...

Here is our blog image. http://img163.imageshack.us/img163/1642/41201772.png

Now lets get started on coding!

<html>
<head>
<!-- The header tag -->
</head>

The head tag is where you link your css style sheet, link your javascripts, and any other documents. You can even setup your websites title in here.

<html>
<head>
<title>Our First Site</title>
</head>

web-design

Edited 13 Years Ago by Ezzaral because: Removed unnecessary profanity. Please keep it clean and professional.

3 Contributors
8 Replies
161 Views
19 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Arkinder

floatingDivs 21 Junior Poster

13 Years Ago

No offense, but couldn't someone read all of what you've written on w3schools.com/html? Heck, it's all available on the first couple pages...

Also, Arkinder made a great point. You're teaching people to code, but you forgot the DOCTYPE?!?!

Lastly, stop cussing in your posts.

floatingDivs 21 Junior Poster

13 Years Ago

That's cool. It just seems weird that you skipped over discussing the Doctype.

As for getting off your back, I wasn't on it. You're the first person that's ever shown any hostility towards my posts, and I've been "rude" -- something I wasn't with my previous post -- to people on here.

Then again, after checking out your site (which is a template you downloaded from midphase.com), which led me to Twitter, which led me to your "donation" post, I can see why you're hasty. Your potential clients may read that you forgot to include a very important part of web coding and it doesn't look good, right?

Also, your "expertise" (as much as you can have as a 16-year old, I guess...) isn't really needed, as this "donation" (tutorial) you are providing is basically found on htmldog.com, Mozilla's HTML development site, and a host of others (including the aforementioned w3schools.com), but that's just me.

Now I'm on your back. ;)

Edited 13 Years Ago by floatingDivs because: n/a

Reply to this topic

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.

G&G Designing 1 Junior Poster in Training · Answer 1 · 2011-08-07T17:05:07+00:00

The

<title>

tag is used to display the title of your webpage at the top of your browser. Any content within the

<head>

tags of your html document will not render on the actual webpage.

Body Tags

<html>
<head>
<title>Our First Site</title>
</head>
<body>
</body>
</html>

Body tag's are where you place all the content that you want to show up on your webpage. Everything that you place within the tags will show up unless its a comment or another tag.

Div Tags

<html>
<head>
<title>Our First Site</title>
</head>
<body>
     <div>
     </div>

     <div id="div1">
     </div>
</body>
</html>

Div tags are used to make special sections. If you give them an id="" then you can style them. This includes changing the width and height, and even changing that background color/image.

Header Tags

<html>
<head>
<title>Our First Site</title>
</head>
<body>
     <div id="header">
          <h1>This is an h1 tag</h1>
          <h2>This is an h2 tag</h2>
          <h3>This is an h3 tag</h3>
          <h4>This is an h4 tag</h4>
     </div>

</body>
</html>

These are header tags. There are several different sizes ranging from h1->h6. H1 being the biggest and h6 being the smallest. Header tags all your to style your header text and are mostly used for title of content sections like a blog post title.

Thats it for today, I might do some more later, depends!

Arkinder 93 Posting Pro in Training · Answer 2 · 2011-08-07T19:40:42+00:00

Arkinder 93 Posting Pro in Training

13 Years Ago

Make sure that you include a doctype. Unless you are parsing XML data you should be using HTML 4.01 Strict.

Regards
Arkinder

G&G Designing commented: I would have added that when i start to actually code the webpage, im just telling people what the tags stand for and how to use them -1

Ezzaral commented: Seems like a good point to me. No reason this should have negative rep. +15

G&G Designing 1 Junior Poster in Training · Answer 3 · 2011-08-07T21:26:53+00:00

Ok so today we are going to be doing Paragraph tags, Comments, and Unordered/Ordered Lists

A Paragraph tag simply consists of

<p>The writing you want</p>

That is all I have to say about the Paragraph tag.

Comments are used to leave little reminders, setup a structure, and setup different css for doing other browser compatibility.

<!-- This is a comment! -->
<!--[if IE7]-->

Thats all there really is to say about the Comment tag

Un-ordered lists. Un-ordered lists are mostly used for menus at the top of your page. This is what it would look like.

<ul>
     <li>Menu item 1</li>
     <li>Menu item 2</li>
     <li>Menu item 3</li>
     <li>Menu item 4</li>
     <li>Menu item 5</li>
</ul

Then you would use CSS to style it into a good look navigation menu to get around your site.

G&G Designing 1 Junior Poster in Training · Answer 4 · 2011-08-07T23:52:56+00:00

No offense, but couldn't someone read all of what you've written on w3schools.com/html? Heck, it's all available on the first couple pages...
Also, Arkinder made a great point. You're teaching people to code, but you forgot the DOCTYPE?!?!
Lastly, stop cussing in your posts.

Im only explaining what each of the tags does and how to use it. I haven't started actually teaching them how to code...

So get off my back.. and let me finish..

G&G Designing 1 Junior Poster in Training · Answer 5 · 2011-08-08T02:12:34+00:00

What are you talking about? by donating i ment paying money to the site to go towards server costs. I am just adding this because many people have been asking for simple stuff. And I didn't setup our site. My designer did, and its only temporary as he is working on a new design. Then i will code it up. Also, you have no right to be on here criticizing me, You most likely haven't seen any of my work. I do have experience and I do know what I'm doing. I was doing this out of the kindness of my heart.. (that sounds super cheesy)

If you look, i have over 40 posts in under a day, and all of them are quality posts. I've helped a bunch of people and even if they were simple fixes, i still helped them.

Now please stop cluttering up this thread. Thanks

Arkinder 93 Posting Pro in Training · Answer 6 · 2011-08-08T03:39:08+00:00

Now lets get started on coding!

HTML is a markup language, not code. It's also important to mention that it is the structure of a web page, and CSS is the presentation - what styles the HTML. You also failed to mention what the html tag does, and the document extension - .html

The head tag is where you link your css style sheet, link your javascripts, and any other documents. You can even setup your websites title in here.

Or where you can write your CSS and JavaScript. And where you include meta data, favicons, conditional statements, etc.

The
<title>
tag is used to display the title of your webpage at the top of your browser. Any content within the
<head>
tags of your html document will not render on the actual webpage.

It would be a good idea to mention that the title must be within the head tags, and that most elements have beginning and ending tag.

Div tags are used to make special sections. If you give them an id="" then you can style them. This includes changing the width and height, and even changing that background color/image.

id (identifier/identity) is known as an attribute. They are like parameters for each tag. id 's are unique and allows us to make changes just to that element. The style attribute is used to add CSS to an element. This includes changing the width, height, background color, and much more. Using the style attribute for this is known as an inline style.

These are header tags. There are several different sizes ranging from h1->h6. H1 being the biggest and h6 being the smallest. Header tags all your to style your header text and are mostly used for title of content sections like a blog post title.

You previously stated that the head tag is a header, which is true. However, the hx tags are known as headings and are called this because that is exactly what they are used for.

A Paragraph tag simply consists of
<p>The writing you want</p>
That is all I have to say about the Paragraph tag.

The paragraph tag causes the element to be on its own line, and the following element to appear on the next line. Elements like this are known as block-level elements.

Comments are used to leave little reminders, setup a structure, and setup different css for doing other browser compatibility.

Thats all there really is to say about the Comment tag

It's good practice to leave comments explaining your markup. This makes it easier for you to come back later and make changes, or for someone else to.

This is misleading, and bad practice.

<!--[if IE 7]>
Stuff for Internet Explorer
<![endif]-->

This is a conditional comment and is only read by Internet Explorer. It is used as a list of special instructions to fix layout issues that only occur in the IE browser.

The 7 in, <!--[if IE 7]> is the version number. More than one conditional comment can be used - typically for each version of IE. However, you can also tell IE to use the conditional comment for browser versions that are greater than the number, or less than or equal to the number.

Greater than
<!--[if gt IE 7]>
Stuff for Internet Explorer
<![endif]-->

Less than or equal to
<!--[if lte IE 7]>
Stuff for Internet Explorer
<![endif]-->

Un-ordered lists. Un-ordered lists are mostly used for menus at the top of your page. This is what it would look like.
<ul>
     <li>Menu item 1</li>
     <li>Menu item 2</li>
     <li>Menu item 3</li>
     <li>Menu item 4</li>
     <li>Menu item 5</li>
</ul>
Then you would use CSS to style it into a good look navigation menu to get around your site.

Unordered lists are non-numbered lists.

Stuff
Stuff
Stuff
Stuff

CSS allows us to remove the dots on the left, which can also be other things, with the list-style-type property. This makes lists very convenient for creating navigation bars.

You're leaving out important information, as well as opportunities to introduce CSS concepts. You didn't include the basic layout for every document, including the set of instructions used by the browser for displaying HTML and CSS - the doctype. This is an incredibly important concept for beginners. If he or she is not in the habit of using it, and the correct one, then there is nothing but problems later on.

The thread itself is unorganized and too broken up. No one wants to read through 8 posts. Especially after you boasted that the layout is so simple. We read 30% slower on a computer, so you really should keep that in mind when writing tutorials. Also, the title of the thread is horribly misleading. I was expecting someone to show me how to make a static layout.

Also, you have no right to be on here criticizing me. You most likely haven't seen any of my work

He does, along with anyone else that regularly posts here. You're taking on the responsibility of educating others, and if you do a poor job we're the ones that have to clean up the mess. This tutorial is your work, and the most generous word I can use to describe it is sloppy.

If you look, i have over 40 posts in under a day, and all of them are quality posts.

Nope.

Now please stop cluttering up this thread.

I can assure you that I will be here to correct any inaccurate or wrong information. People are more than welcome to express his or her opinion here, and I'm simply stating facts.

Regards
Arkinder