Web Designing Basics (HTML and CSS)

I am learning HTML and CSS and am soon going to get certified in it as well, and I thought that it would be a good idea to give out a tutorial on how to start designing your own website using HTML and a little bit of CSS...

HTML is an abbreviation for Hyper Text Markup Language.
CSS is an abbreviation for Cascading Style Sheets.

HTML is actually used to create the webpage and the content that it has, like the images and writing.
CSS is used to design the webpage and tell the writing and images to be in a certain place, like an image on the top of the page, another in the center etc...

"Anything on the internet can be modified, deleted or added just with the use of HTML and CSS! Even on instructables.com!"

The best thing is...

All you need is a computer!

So lets get started on our journey into web designing...

Step 1: What is a website made of?

If you are surfing the web and find any website interesting and cool, and want to find out what and how it was made, or to find out what HTML coding they used, then all you need to do is,

• Right click on any blank area on the webpage.

• Click view page source

• This will open up a new window or a tab according to your settings showing the HTML code that the website runs on.

NOTE : Some websites like instructables, google, youtube etc use a lot of Javascript in their coding, so don't get scared...after reading this instructable, you will be easily able to understand what HTML and CSS are and the fundamental tags.

Comments

[BillieBobbel]

Not meant to offend but maybe you could use a doctype?
Doctypes are a form of metatags that tell your browser which version HTML you wrote in your webpage. There are subtle differences for each version so it matters quite a lot which one you use.

You can find all the info on w3schools,
btw, you can also apply a HTML5 doctype to #1 of your html page to make the page HTML5 instead of 4.01

[vishalapr]

Yeah doctypes are quite useful and should be added, and yes W3Schools is an awesome website, I did learn a lot for that website.

[Nove-Noga]

Thanks a Bunch. I have started my own site www.Nove-Noga.com based on my study of w3schools available info. You managed to clearly present much of their content in a very clear, concise format. REALLY appreciated your discussion of IDs and CLASSes. Please forgive my site. I only started using the style sheet a couple of days ago.
Thanks, Nove-Noga

[vishalapr]

That's a nice website you have got there :)
Glad I was able to help,

[EsDorlion]

Thanks for the informations. If you have incerrect coding in a web site you cannot have a good position in search engines. Also SEO is very important for a website. i am also amking web sites Eskisehir web tasarim
Thanks

[vishalapr]

welcome.....I agree.....

[gomas211]

html 5?

[vishalapr]

You can use HTML code to make your comments on other instructables cooler, and more noticable, like

THIS FONT IS BIG AND IN RED COLOR

ABBR

[The_Warlock]

Cool. To the point.

[vishalapr]

Thx

[______]

I started learning HTML at 10, built my own functioning website at 11, now I am 13 and learning HTML5 as soon as you learn the basics this gets easier and easier. I also build and sell professional looking websites for my friends, and people in my area, I am friend with the chairman of my town and he let me remodel the website, my point is get good, get certified, get a name for yourself, then keep getting better. It's a good business.

[vishalapr]

Nice tactics :)

[Gonazar]

For the common entities they should each end with a semicolon so the less than sign should be &lt ; and greater than should be &gt ; (ignore the space)

[vishalapr]

Yeah, I am sorry, we have to mention semicolumn after each and every identity, Thx for pointing it out :)

[lookwhatjoeysmaking]

how old do you have to be to get certified. and does it coust anything?

[vishalapr]

The best way to get certified online, according to me isvia W3Schools.com, it costs 95 dollars and I am not sure of the age restrictions...I think it is 13+

But there are other websites out there which offer certification like logiczap.com etc for cheap...

[lookwhatjoeysmaking]

yaaa im 14.thank you for the reply.

[vishalapr]

How did you like the ible? When are you going to take the certification?

[Rank Penguin]

I have a suggestion, that I learned from one of the coders at Google from their tutorials. Things like and bold and other text formatting should not be done in HTML, rather in CSS. You want to set up the meaning of the words so you can use etc., but you should stylize the thickness and other style attributes with CSS. Just a suggestion, some people may like to do
with HTML, but I guess it's all up to personal preference.

[vishalapr]

I personally use p.bold class to style my bold fonts...but since that tag did already exist, I thought why nit give an option to the reader...so I included both :)

[varocketry]

V:

Why did the &ltpre&gt tag in STEP 6 not have a closing tag &lt/pre&gt ? Or, the shortcut &ltpre &nbsp/&gt ?

[vishalapr]

&ltpre&gt Preformatted text &lt/pre&gt

[vishalapr]

I am sorry :( I forgot the ending pre tag...it does work even without it, but it is recomended...Thx for pointing it out :) Using is useless because you are ending the pre tag in the starting of the pre tag, therefore, no content will be preformatted, so the tag does not exist its

This is preformatted text

I will be changing the pic soon, thx again!

[anoop vanguru]

I am a website designer for my part time job, and this instructable is perfect! I mean it explains all the basics and is just amazing! I wish it was there when I learnt HTML and CSS...Well done!!!

[vishalapr]

Really? I have a few questions on Javascript, do you know Javascript? If you do, then can I send you an email with the questions plz :)

[zagreeny]

Just had a look at it, I always thought that CSS and HTML is really hard and impossible to learn etc... but I just realized how easy it actually is!

Very well done on the ible! 5*****

[vishalapr]

Thx!