Page 1 of 1

Basic HTML p1 Rate Topic: ****- 1 Votes

#1 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Posted 01 September 2010 - 05:41 AM

Basic HTML p1: Syntax

1 - Introduction

By now you've considered taking a dive into the world wide web and creating your own site,
whether as a hobbyist or a developer/designer hopeful. Either way this tutorial will teach
you the dead basics of the markup language known as HTML.

HTML is, first and foremost, not a programming language. HTML is an acronym for Hyper Text
Markup Language
, meaning it's a markup. Think of a markup as a structure system, organizing
elements into proper sections that make logical sense, and you have a base idea of HTML.

We start with tags. A tag has an opening and closing, inside these tags are elements and
various text that can be considered as contained.

The most basic tag we can start with is the <html> tag. Notice how each tag begins with a <
and ends with a >, denoting a tag, the text inside is what function the tag performs, as
well as its attributes, such as <html bgcolor="white">. In this case it encompases an HTML
document and sets the background color to white (We will discuss how to do this more
effectively in CSS in a later tutorial.) This is the start of all of your documents.

The closing tag is fairly simple as well, </html>. The difference is that the closing tag
contains a slash which signifies a closing to the browser. Some tags are self closing but
don't worry about that for now, we'll get into that a little later.

2 - Your first page

So now we know about the <html> tag, but that's just the beginning, there are multiple tags
meant to mark up your page and create structure. We'll start off with a bit of code:

<html>

<head>
	<title>Hello World!</title>
</head>

<body>
	<h1>My Title</h1>
	<p>My text. Welcome to the world of the
	web!</p>
</body>

</html>



Copy and save this in notepad, click save and change the "Save As Type" to all files and
name it "mypage.html". Go ahead and open it for reference.

No doubt you're scratching your head as to the function of these tags but I wager that you
know enough english to recognize some of the words in the tags. Well here we go, a step by
step as to every tag:

<html> - The start of every html document and also the close.
<head> - The header, not to be confused with a site header or banner area. This header
contains information that needs to be loaded at the second the site is visited such as
scripts and other such resources as well as a title.
<title> - The title is the text you see in the header of your browser window.
<body> - The body is where all your content belongs
<h1> - There are tags labeled h1 to h6, and they are known as the header tags. It will
display a larger font but is ONLY to be used as a header, not a method of bolding text, this
will be discussed later.
<p> - The paragraph tag. Just as in standard writhing for each new paragraph you write you
need a new tag to signify a line break.

If you haven't already, take a look at your page by clicking on it where you saved it.

3 - Linking

In the web you could easily put all your information on one page, but how effective would it
really be? Assuming by some miracle you get users to stay on your site for more than 2
seconds it wouldn't last much longer with a scroll bar to infinity. This is where linking
comes into play.

Links are made with the <a> tag with an attribute of href which points to the page you wish
to link to, such as this for google:

<a href="http://google.com">Google</a>


Href is set equal to the site you wish to link to, and the text between the <a> tags is the
text that appears as the hyperlink on your pages.

Be warned though you need to include http:// on any external page, some servers would assume
www.google.com points to a file on your server instead of addressing it as an actual page.


4 - Images

Text and links are great, but without images the web would be quite boring to say the least.
This is where we get to the <img> tag.

The <img> tag has an attribute of src which points to the file to display, such as this:

<img src="google.png" alt="google" height="50px" width="50px" />


Now there are some new attributes that you may not recognize, and surely you recognize the
odd ending of the tag instead of a closing tag. This is called a self closing tag, which is
denoted by a /> at the end of the tag. It wouldn't make much sense to have a start and a
stop of an image now would it?

Other attributes are:
alt - The alternate text to be displayed on mouseover or in case of the image not displaying
properly.
height/width - Literally the height/width of the image. I would strongly encourage you to
always add the actual height and width of images because if the image breaks the replacing
filler will take up the same amount of space which will prevent discrepancies in your
designs if an image fails to load. While you can specify dimmensions other than the actual
image size it is strongly discouraged because it takes the same time for the image to load
even if you downsize it, you're safer using photoshops save for web and downsizing through
there.

5 - Final notes

With this we close the first part of basic HTML, the second part should be out the day after
this is released and it will discus further how to structure your documents with the <div>,
<ul>, <ol>, and other such tags. Until next time!

Is This A Good Question/Topic? 0
  • +

Replies To: Basic HTML p1

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,140
  • Joined: 08-June 10

Posted 02 September 2010 - 03:08 PM

picky note:
<img src="google.png" alt="google" height="50px" width="50px" />

this is not valid HTML, this way of self-closing tags is only required for XML documents (like XHTML). its explicitly forbidden in HTML, but browsers ignore that fact (like many other mistakes).

the correct way in HTML is
<img src="google.png" alt="google" height="50px" width="50px">

Was This Post Helpful? 2
  • +
  • -

#3 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Posted 02 September 2010 - 05:39 PM

XHTML is considered to be the current standard and is an extension of html. Personally I prefer it greatly due to stricter rule sets making it harder to make mistakes in the first go-around of a design. Then again, either way a technicality.
Was This Post Helpful? 2
  • +
  • -

#4 zero_cool1  Icon User is offline

  • New D.I.C Head

Reputation: 8
  • View blog
  • Posts: 32
  • Joined: 25-January 10

Posted 02 September 2010 - 06:19 PM

View PostLemur, on 01 September 2010 - 04:41 AM, said:

5 - Final notes

With this we close the first part of basic HTML, the second part should be out the day after
this is released and it will discus further how to structure your documents with the <div>,
<ul>, <ol>, and other such tags. Until next time!


I'm waiting...
Was This Post Helpful? 0
  • +
  • -

#5 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Posted 02 September 2010 - 08:45 PM

macosxnerd found a few issues in it, he said he'd submit it early tomorrow.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3515
  • View blog
  • Posts: 10,140
  • Joined: 08-June 10

Posted 03 September 2010 - 01:02 AM

View PostLemur, on 03 September 2010 - 12:39 AM, said:

XHTML is considered to be the current standard and is an extension of html.

it is not an extension. XHTML is a reformulation of HTML in XML, which means, a different parser is used.

additionally, IE fails to recognise the XHTML MIME type and thus XHTML is almost always delivered as HTML, which makes XHTML pretty useless (one reason XHTML 2 was abandoned) except when you need your source parsable by an external XML parser.

This post has been edited by Dormilich: 03 September 2010 - 01:04 AM

Was This Post Helpful? 0
  • +
  • -

#7 biblakysads  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-May 11

Posted 16 September 2011 - 04:40 PM

I wrote a lot of BASIC programs back in the 70s and early 80s. I hadnt heard of Run BASIC until you mentioned it, so I took a look.

Syntactically, it looks like traditional BASIC, with just a few differences.

Conceptually, there are many additions to facilitate web communication. BASIC has just a handful of built-in functions, and Run BASIC has a lot more, including support for file IO, SQL, and XML, and a nifty way of generating graphics. All this stuff operates at a very high level, so you dont have to understand what youre doing very much.

If you already know BASIC and you want to build an app with a simple HTML interface, it looks like you could be up and running pretty quickly. I could be wrong, but it looks like it could be a pain to mix it with a long or sophisticated web page.
Was This Post Helpful? 0
  • +
  • -

#8 JacksonD  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 215
  • Joined: 18-October 11

Posted 24 October 2011 - 06:02 AM

If I had seen this when I was learning, I would have learnt quicker, I taught myself though.
Was This Post Helpful? 0
  • +
  • -

#9 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Posted 23 November 2011 - 08:35 PM

I would suggest reading a more current tutorial of mine on HTML on http://www.blog.baweaver.com

I've certainly improved from this point.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1