What You'll Need...
For these tuts you'll need Dreamweaver,or if you're up to the challenge,use Notepad++,Sublime Text,or any other code editor.
SIDE NOTE : It's recommended that you have your code editor open and ready to use in these tutorials.So you can follow by coding.
The Coding Shall Begin !
Now ready your code editor and let's code !
First Things First
Now we add the core tags which are :
<!DOCTYPE html> and <html></html>
^ As you can see,I didn't add the </html> tag.Eventhough that's important.The answer is easy.I add it at the end of the file.
Second Things Second
Now,we add the other tags which are :
<head></head> <body></body>
and much more.
^ As you can see,the program is a wee bit more organized right now.
We'll add stuff to the webpage in the next step.
Adding Actual Stuff To The Webpage
Now,we'll add something to our webpage.
The Title
See those page titles on your browser ? Now we'll make our own !
It's really easy add the '<title></title>' inside the <head> tags !
PROTIP: Remember,the last tag opened,first one closed.
^ Title Added.Any questions ?
The Heading
Another core element in a webpage.When see a thread here in GDU,That giant text you see is the header.Let's make our own !
...But first,let's see the different types of headers
<h1> : Owner
<h2> : Admin
<h3> : Staff Member
<h3> : Global Moderator
<h4> : Moderator
<h5> : Member
<h6> : Lurker
So,let's see then in action :
^ Pretty self-explanatory
Now we make our own header ! Choose whatever one you fancy.
^ If you open your HTML file,you'll see that the <h1> header is there !
Adding Paragraphs
Like the easiest thing to do in HTML.Add text inside <p></p> tags.
EXAMPLE :
<p>Paragraph</p>
Try it ! It's super-easy !
Adding Images,Links & Linking Images
Now we move to the fianl part of out tutorial,images,links and linking images.
Adding Images
It's easy.Add an image like this :
<img src="imageurl">
^ "imageurl" is the url of an image.You get it by a left-click + Copy image url or you can also choose an image in your computer.Like this :
<img src="lolwutimage.gif">
Try it !
Adding Links
Everything in HTML is easy.You can add a link like this :
<a href="https://www.google.com">Visit Google</a>
^The text after the url serves as what will be the text linking example :
^This has pretty much everything we covered(headers,titles,links and images.)
5,396 Posts
3,746 Points
Nice job, I'm quite impressed with this.
I'm not too sure what your web dev experience, but I'd like to see this go from basics straight into a CSS framework, as practically all websites are now built with them (for example, GDU uses twitter bootstrap for everything except the games section dashboard, which uses UIKit).
If I were to write a series that's how I'd do it, to keep people interested because your target audience here is people without experience. If you go over some basics then jump into a CSS framework, you'll very quickly allow your readers to create an actual website, and their basic skills can build from using the framework, eg styling the default styles.
(as a side note, you need an introduction, do that k )
79 Posts
395 Points
Hey thanks.This tut took a lot of time to write.And yeah I'm planning the next one which will cover how to stylize text with HTML alone.Then in it's second section,the CSS basics.And the introduction..Sorry I'll add it