Learning Web Design

Get Help, Tips & Tutorials on Using Your Computer.

Learning Web Design

Postby MaTT » Sun Mar 31, 2013 12:41 pm

Hello everyone,

Since I believe Web Design and Programming are my strongest areas in Computing, I thought I would start this topic to teach those of you who don't know about the process of designing, the basics of web design, and then move on to the more advanced stuff. We know the World Wide Web (WWW) is getting bigger and much more popular, yet a surprising amount of people are not considering to try to make a webpage themselves, mostly because they are scared of how difficult it might be or how difficult it will be to learn the code and everything. Truth is, the basics are all you need to get a webpage started, and the basics are easy. Here everything will be explained. I'll make a post every Saturday or Sunday and you can try and make your own webpages, maybe even post screenshots or links to them.

Since these skills can be very useful to you since computers are a very large and growing part of the world, I recommend to Subscribe to this topic to be notified of new posts.
You can see a list of the topics you have subscribed to if you click this link: ucp.php?i=main&mode=subscribed



Let's start with how a webpage works...
The Basics

The term "Language" in computing means code that is translated into "Machine Code" (Binary). When the code of the "Language" is run, it is first translated into "Machine Code" which is all the computer can understand, then it is "Executed" (Run) and whatever you have programmed using whatever "Language", it will run that.

So what is "Machine Code"?
Computers can only understand Binary. Digital electrical signals. Electricity can either be flowing through a wire, or not flowing through a wire. If electricity is flowing through a wire, it is "ON" which in Binary is "1". If electricity is NOT flowing through a wire, it is "OFF" which in Binary is "0".

Because a computer runs on electricity, it uses these electrical signals, carefully but quickly pulsing on and off to tell it what to do. This might seem hard to get your head around, and I wouldn't be surprised. The way computers work is not as simple as this, they have MANY more mechanics such a logic gates, serial buses, and the unimaginable speed of processes per second a processor can handle. A 2GHz processor, one you would normally find in a standard home computer, like yours now, can do 2,000,000,000 (2 Billion) processes per second!

So how does this connect with Web Design?
Web design uses programming languages which display the webpage. The only difference is that instead of executing the data, it is sent when it is requested by your computer.

Click this link: https://www.google.com/
When you clicked that link, this is what happened:
  1. Your computer sent a request out into the internet for the webpage in what is known as a "data packet".
  2. Each website runs on what is known as a "Web Server". The "data packet" travels across the internet towards the "Web Server" that hosts the website.
  3. Eventually the data packet gets to the web server and the request is processed.
  4. The packet is then loaded with the webpage requested and sent back from the web server, back across the internet, and back into your computer.
  5. The packet is then processed by your computer, and the webpage is extracted from the packet.
  6. You computer reads the webpage, and then finally shows it in your "Web Browser" (for example, Internet Explorer, Mozilla Firefox, Google Chrome)

All of this happens very quickly, and a huge amount of people are unaware of this and get annoyed when a webpage isn't loading fast enough. Sometimes "data packets" don't make it to the web server so your computer then sends another packet, in another attempt to get it to the web server. When a "data packet" doesn't make it to the web server, it is called "Packet Loss". This is why a webpage can sometimes take longer to load than others.

So how do I get started making a webpage?
Well first of all, you need to know that there are literally hundreds of programming languages out there, many of them have a specific purpose. Some languages are for programming computer programs such as Skype for example. Some are for Anti-Virus such as Norton. Some are for games such as Wolfenstein - Enemy Territory. Some are even for controlling military equipment, even the launching of nuclear missiles.

We aren't interested in any of these languages right now, what we are interested in is Web Development languages, here is a list of common languages and what they do for a webpage:
  • HTML (Hypertext Markup Language) - Handling the Content of a website.
  • CSS (Cascading Style Sheet) - Handling the Styling of a website.
  • Javascript/jQuery - Handling some functionality of a website (jQuery is just pre-written javascript)
  • PHP (Hypertext Pre Processor) - Handling the dynamics of a webpage.

The MOST BASIC language, and the language that is used on every single webpage ever made is HTML (Hypertext Markup Language). This language is pretty simple to learn, and we will be starting to learn this in the next post I make. Then we will really start to build our own webpages.
:D



Post List:
  1. The Basics
  2. Getting started with HTML
  3. Formatting text in HTML
  4. Some more important HTML stuff
  5. Beginning CSS
  6. More on CSS

With Regards,
MaTT
Image
Image Image Image Image Image Image
The Most Astounding Fact || Window on the Universe
Image
#ETernal Clan Founder - Contact me
Since 13/4/2011 (6 Years)
User avatar
MaTT
.
 
Posts: 3805
Joined: Fri Jun 17, 2011 12:07 pm
Location: England, East Sussex
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: Giulietta
Wolfenstein ET Name: #ET|TitaN*|
Steam Name: Mattipoika
Clan Wars: 0

Re: Learning Web Design

Postby W!ck3D » Sun Mar 31, 2013 2:50 pm

Good post mate :P HTML is an easy computer language to learn :P
Everybody can do it. Just PHP -.- that's something difficult.
Image
User avatar
W!ck3D
.
 
Posts: 1475
Joined: Wed Aug 03, 2011 10:37 am
Location: Belgium
Home-Game: Wolfenstein Enemy Territory
Wolfenstein ET Name: #ET|W!ck3D|GF
Steam Name: Wick3D65
Clan Wars: 0

Re: Learning Web Design

Postby MaTT » Sun Mar 31, 2013 3:05 pm

W!ck3D wrote:Good post mate :P HTML is an easy computer language to learn :P
Everybody can do it. Just PHP -.- that's something difficult.

Yeah, PHP is not an easy language to learn, but it does complicated stuff.
The trick is not to 'dive in at the deep end', but to work your way up from the most basic parts of a language, you also need to practise, otherwise you will have no hope of learning the language. I started learning PHP in my college side-lessons (not important lessons), I found it was hard to understand at first, but I thought it was much like a programming language I had been learning since September last year in my Computer Science lessons; Visual Basic. :P
Image
Image Image Image Image Image Image
The Most Astounding Fact || Window on the Universe
Image
#ETernal Clan Founder - Contact me
Since 13/4/2011 (6 Years)
User avatar
MaTT
.
 
Posts: 3805
Joined: Fri Jun 17, 2011 12:07 pm
Location: England, East Sussex
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: Giulietta
Wolfenstein ET Name: #ET|TitaN*|
Steam Name: Mattipoika
Clan Wars: 0

Re: Learning Web Design

Postby MaTT » Sun Apr 07, 2013 12:45 pm

Getting started with HTML

HTML, as you now know, stands for HyperText Markup Language. As with every language, there is different words, formats, and most of the time, if you put something like a semi-colon (";") in the wrong place, it can all go wrong. Luckily for you, there is no semi-colons in this programming language, in fact, HTML is the easiest language to learn.

So... Where do I start?
Well, you need somewhere to put the code.

  • Adobe Dreamweaver is an excellent program, but i'm sure you don't want to be spending €133.69 on a professional program when you are only starting out.
  • The standard Notepad program you can find with Windows in "Start -> All Programs -> Accessories" is completely free, and you don't need to download it. However if you put in loads of HTML code, it doesn't highlight specific parts, so you can get lost in all the code.
  • Notepad++ is an advanced version of Notepad, specifically for code. You can use it for HTML and it highlights certain parts which will help you. That fact that it's free is also great, I would recommend using this. When you open this, delete the text already in it and go to "Language -> H -> HTML", then you are ready to go!

So, what are the first parts of the language I need to learn?

Well, HTML is made up completely of different text known as "tags". These tags are all enclosed in less than and more than symbols ("<>"). All HTML tags are closed by typing the same tag in the "<>" symbols, but with a forward slash ("/").
I'm sure most of you know how to use the BBcodes on this forum, for example:
Code: Select all
[b][/b]
[quote][/quote]
[url][/url]


HTML is almost exactly like this; on this forum, there are 22 BBcodes (all shown in buttons at the top of the posting box. When you click one, it adds a BBcode to your post which changes the format of your post). In HTML, there are 118 different tags, but it's not important to learn all of them, only a few are essential, here they are.

Your web browser reads your HTML file, and executes every tag there is. First of all, you need to add some stuff:
Code: Select all
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>


<!DOCTYPE html> - This is the very beginning of every HTML document; the <!DOCTYPE> tag which tells the browser what version of HTML to use, it is not essential, but some browsers like Internet Explorer do not fully support the latest version of HTML which is HTML5, and so it won't run the tags so well. when you put <!DOCTYPE html>, you are using HTML5. Click here to learn more about the different <!DOCTYPE> tags you can have, it's not essential to know everything about it as most webpages nowadays use HTML5. This is the only tag in HTML that doesn't need to be closed with a "/".

<html></html> - This tag tells the browser that the file is written using HTML tags, you will need this. At the end of the file, you will add </html> to close the tag; everything inside the tag is written using HTML tags.

<head></head> - There are two parts to an HTML file, the "head" section (<head>), and the "body" section (<body>). In the head section, you put all the tags for Java and jQuery scripts (used in <script>), CSS styling (used in <style>), meta information (used in <meta>) and referencing other files (used in <link>), we will get onto all of that later though when you have a better understanding. You will add </head> BEFORE you put the <body> tag.

<body></body> - This is the second section of an HTML file. In the "body" section, you put all the rest of the text and tags that you want to show on the actual page. You will add </body> at the end of the file BEFORE </html>. Everything from now on must be put before </html> and nothing after it.



So, if you now save the file somewhere and call it "index.html" we now have the file ready to start using. I bet you're getting excited now.

Lets start by typing something in the <body> section. Maybe "Hello World", the first text everyone puts on their first program or webpage. We're not putting anything in the <head> section yet as we don't need to.

SHOW | Open this if you don't know what to do
So your HTML document should look like this:
Code: Select all
<!DOCTYPE html>
<html>
<head>

</head>
<body>
Hello World

</body>
</html>


Once you've done this, you can see what it will look like in your web browser. If you save the file and open it in a web browser such as Internet Explorer, Mozilla Firefox, Google Chrome, whatever you use, you will see "Hello World" show as black text on a white background, this is the standard style of a webpage, not exciting to look at, but you must be pleased you have taken your first simple steps into HTML.
:D :D

Next time we can start to look at how to add more to your file to add more to your webpage, maybe even start to look at CSS which is linked closely to HTML!
Image
Image Image Image Image Image Image
The Most Astounding Fact || Window on the Universe
Image
#ETernal Clan Founder - Contact me
Since 13/4/2011 (6 Years)
User avatar
MaTT
.
 
Posts: 3805
Joined: Fri Jun 17, 2011 12:07 pm
Location: England, East Sussex
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: Giulietta
Wolfenstein ET Name: #ET|TitaN*|
Steam Name: Mattipoika
Clan Wars: 0

Re: Learning Web Design

Postby Ziltoid » Sun Apr 07, 2013 1:43 pm

Wow, never knew it was so easy :O I'm really interested in learning more about HTML now xD Maybe some private lessons can be arranged, teacher? xD Looks very fun to do this :D

Btw, if you right click on the forum -> inspect element, is that the HTML code for this forum?
Image

~~GOD OF MASTURBATION~~

#MattEgeFennyWorstLT

I used to have nice signatures, then Photobucket went full retard.
User avatar
Ziltoid
.
 
Posts: 2976
Joined: Sat Oct 22, 2011 5:24 pm
Location: The Netherlands
Home-Game: Wolfenstein Enemy Territory
Wolfenstein ET Name: #ET|Ziltoid
Steam Name: SaltboxMetal
Clan Wars: 0

Re: Learning Web Design

Postby MaTT » Sun Apr 07, 2013 2:38 pm

The problem is, people don't realise that this is really easy to learn. Like I said, i'm going to make a post each weekend working into the more advanced features such as HTML <div> tags (<div> tags are almost essential for every webpage), HTML <meta> tags, using CSS in HTML and even utilising separate CSS files. After a long time, I can start to talk about PHP or Javascript (although I'm not so good at Javascript, it's not easy).

It is HTML. However, the forum is a lot more complicated utilising PHP to display HTML from many separate files. If you look at the main page of the forum, it will show as "http://www.etclan.net/index.php". As you can see it is reading from a .PHP file and not a .HTML file (but the PHP file is using many other separate HTML files). Since PHP cannot be displayed in a browser, it offers significant security and sometimes as PHP is used within HTML files, the "Inspect Element" or "View Source" features are not always accurate.
Image
Image Image Image Image Image Image
The Most Astounding Fact || Window on the Universe
Image
#ETernal Clan Founder - Contact me
Since 13/4/2011 (6 Years)
User avatar
MaTT
.
 
Posts: 3805
Joined: Fri Jun 17, 2011 12:07 pm
Location: England, East Sussex
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: Giulietta
Wolfenstein ET Name: #ET|TitaN*|
Steam Name: Mattipoika
Clan Wars: 0

Re: Learning Web Design

Postby Straw » Sun Apr 07, 2013 6:37 pm

Awesome :)

I might start learning it too then :)
User avatar
Straw
.
 
Posts: 8446
Joined: Fri Jun 17, 2011 2:35 pm
Location: France, Laval
Home-Game: Counter Strike - Global Offensive
Favourite Weapon: Spoon
Wolfenstein ET Name: #ET|Straw|
Steam Name: Mansikka
Clan Wars: 1

Re: Learning Web Design

Postby W!ck3D » Fri Apr 12, 2013 11:10 am

Easiest thing is that you download DreamWeaver :P It has plugins that you just click & it gives you for example a menubar.
So you can edit everything. Piece of cake with that program. :P
Image
User avatar
W!ck3D
.
 
Posts: 1475
Joined: Wed Aug 03, 2011 10:37 am
Location: Belgium
Home-Game: Wolfenstein Enemy Territory
Wolfenstein ET Name: #ET|W!ck3D|GF
Steam Name: Wick3D65
Clan Wars: 0

Re: Learning Web Design

Postby Ziltoid » Fri Apr 12, 2013 11:35 am

I already have pirated P: it, and it's a great program :D You can see right away what the codes you made do, and more importantly for me, if they work xD I could use some help though, I wanna learn more about html :P
Image

~~GOD OF MASTURBATION~~

#MattEgeFennyWorstLT

I used to have nice signatures, then Photobucket went full retard.
User avatar
Ziltoid
.
 
Posts: 2976
Joined: Sat Oct 22, 2011 5:24 pm
Location: The Netherlands
Home-Game: Wolfenstein Enemy Territory
Wolfenstein ET Name: #ET|Ziltoid
Steam Name: SaltboxMetal
Clan Wars: 0

Re: Learning Web Design

Postby W!ck3D » Fri Apr 12, 2013 8:25 pm

You can always ask me for things :)
Image
User avatar
W!ck3D
.
 
Posts: 1475
Joined: Wed Aug 03, 2011 10:37 am
Location: Belgium
Home-Game: Wolfenstein Enemy Territory
Wolfenstein ET Name: #ET|W!ck3D|GF
Steam Name: Wick3D65
Clan Wars: 0

Next

Return to Hardware/Software

  • Advertisement