In this tutorial,we'll make a very very basic webpage and cover some basics along the way.
HTML(HyperText Markout Language) is a programming language used to make webpages.It's composed mainly of tags.Which are like this :
<tag></tag>The first one is the opening tag and the other one is a closing tag.There are some self-closing tags.But they're really rare.
"PRE-ORDER" BONUS
The last tag opened is the first one closed
Example :
<tag1><tag2>Code</tag2></tag>
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.
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>
Second Things Second
Now,we add the other tags which are :
<head></head> <body></body>and much more.
We'll add stuff to the webpage in the next step.
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> : LurkerSo,let's see then in action :
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 :
A bonus :wink:
Bolding and Italicazing Text
Yay a bonus ! It's really really easy.
Bolding :
<strong>BOLD</strong>Italic :
<em>Italic !</em>Side Note : No need for <p> tags !
ANOTHER PROTIP : To test your code,save your file as .html and open it.
That's all for this part.In the next part we'll learn how to stylize our text with HTML !
Happy Coding ! :thumbsup:
I'm a normal teenager.No,really.Okay...I'm an experienced Eventer for RMVXA.I'm a team member in several projects.After a loong disappearance from this site,I returned.Little more about me : I started with VX.While it angered me,I upgraded to VX Ace.After hearing what everybody's saying about XP's mapping,I quickly got it,and I don't regret it.I'm now an novice RGSS3 and Ruby scripter.I made several Ruby programs.I feel gifted at programming,like my brother.I wanted to turn to Spriting,but it seemed hard.Music Composing?,My piano broken at the wrong moment.So,Eventing and Coding is my RM-Skill.Okay that's enough...Still curious ? I guess not.
© 2006 - 2024 Game Development Unlimited.
Proudly in service for 17 years, 6 months, 2 weeks.
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