HTML Tutorial 1: Using gedit as a better tool, also outlines HTML.
Page 1 of 1 • Share
HTML Tutorial 1: Using gedit as a better tool, also outlines HTML.
by 7 Thu Dec 03, 2009 1:24 pm
I am terrible at tutorials. I also don't want to take screencaps like Espeon cuz too lazy. Furthermore, there are absolutely no members in this club at all. But I am the leader, so I'll try a tutorial.
An explanation of gedit will suffice for now. gedit is the official text editor of the GNOME desktop environment. Although the average programmer should learn how to use Notepad, gedit is far more suited for these tasks. gedit can be downloaded here. The download you choose depends on your OS. For Mac OS X users, download the dmg file; for Windows users, download the win32 binary. Linux users automatically have this installed.
After downloading, open up gedit. You will see a very basic program (and probably something like "this version is outdated"; ignore that message, it isn't). Unlike Notepad, gedit runs under tabs (cuz tabs are awsm), and can also be configured through plug-ins, which will be explained later. Save the opened gedit file as "index.html" without quotes by pressing "Save". Make sure to navigate to a folder other than the one preset by the function, like for instance the Desktop. This will tell the program what syntax highlighter to use.
To start, HTML stands for Hypertext Markup Language, and pretty much does what it says. HTML is the de facto standard for writing web pages, and is extremely useful in writing basic web pages. Which is what we'll be doing.
On the new gedit page called "index.htm", type in
Going in-depth with what the tags mean. The first tag is the DOCTYPE, which tells the browser what type of code would render this webpage correctly. It isn't very useful at this stage of the tutorial, but it will be.
The second tag is the html tag. It basically says where the HTML starts.
The third tag is the header tag. It's like a letter; the head is where some important information is stored. Ignore this specific tag for now.
The fourth tag designates the title. This tells the browser what to put up there in the window bar. The thingy...with the close button and the minimize and yeah.
Tags with a preceding slash close the original tag. So,
The body segment is where all of the visible information is stored. It's very important to understand that.
The p tag illustrates the paragraph and is very useful later.
Then more closing tags.
The output of the page would say Hello World! in the page...that's it. Just Hello World!. Very generic.
On the gedit page, notice the coloring of the tags. That's the main reason why gedit is better than Notepad; the coloring. It makes things so much simpler when writing large pages.
Some basic tags are, as listed:
-Variant
'Cause it ain't no good when there's nothing; ain't no good when you can't go wrong.
An explanation of gedit will suffice for now. gedit is the official text editor of the GNOME desktop environment. Although the average programmer should learn how to use Notepad, gedit is far more suited for these tasks. gedit can be downloaded here. The download you choose depends on your OS. For Mac OS X users, download the dmg file; for Windows users, download the win32 binary. Linux users automatically have this installed.
After downloading, open up gedit. You will see a very basic program (and probably something like "this version is outdated"; ignore that message, it isn't). Unlike Notepad, gedit runs under tabs (cuz tabs are awsm), and can also be configured through plug-ins, which will be explained later. Save the opened gedit file as "index.html" without quotes by pressing "Save". Make sure to navigate to a folder other than the one preset by the function, like for instance the Desktop. This will tell the program what syntax highlighter to use.
To start, HTML stands for Hypertext Markup Language, and pretty much does what it says. HTML is the de facto standard for writing web pages, and is extremely useful in writing basic web pages. Which is what we'll be doing.
On the new gedit page called "index.htm", type in
- Code:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Going in-depth with what the tags mean. The first tag is the DOCTYPE, which tells the browser what type of code would render this webpage correctly. It isn't very useful at this stage of the tutorial, but it will be.
The second tag is the html tag. It basically says where the HTML starts.
The third tag is the header tag. It's like a letter; the head is where some important information is stored. Ignore this specific tag for now.
The fourth tag designates the title. This tells the browser what to put up there in the window bar. The thingy...with the close button and the minimize and yeah.
Tags with a preceding slash close the original tag. So,
- Code:
<title>Untitled Document</title>
The body segment is where all of the visible information is stored. It's very important to understand that.
The p tag illustrates the paragraph and is very useful later.
Then more closing tags.
The output of the page would say Hello World! in the page...that's it. Just Hello World!. Very generic.
On the gedit page, notice the coloring of the tags. That's the main reason why gedit is better than Notepad; the coloring. It makes things so much simpler when writing large pages.
Some basic tags are, as listed:
- Code:
<p></p> The paragraph tag
<br /> Line-break tag
<a></a> Anchor tag
<img /> Image tag
<ul></ul> Unordered list tag
<ol></ol> Ordered list tag
<li></li> List element
-Variant
'Cause it ain't no good when there's nothing; ain't no good when you can't go wrong.
7- The Imaginative Warden
- Post Count : 2470
Age : 31
Shaycoins : 9426
Registration date : 2008-12-24 -
Similar topicsPage 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum