You are viewing our Forum Archives. To view or take place in current topics click here.
[tutorial]Html/css tutorial thread
Posted:

[tutorial]Html/css tutorial threadPosted:

blueninjn
  • Junior Member
Status: Offline
Joined: Dec 28, 201310Year Member
Posts: 85
Reputation Power: 3
Status: Offline
Joined: Dec 28, 201310Year Member
Posts: 85
Reputation Power: 3
this will be my thread for simple html and css , this thread will lead you from a simple html layout to creating a simple design, or advanced depending on what time i have this thread will be updated daily


First simple and clean html layout


<!doctype html>
<html>
<head>
      <title>
      Home-Page
      </title>
</head>
<body>

</body>
</html>

Tag meanings
<!doctype html> this defines that the document type is html
<html> just starts the document and also tell the browser the codes in their , i would also like to point out the meaning of html is hyper text markup language
<head> this is the bit were all your script links of your website basically like the brain but will not show anything , except the next thing im about to explain
<title>this is going to be what the tab shows so for our webpage it would show Home-Page
<body>this is were you would list basic tags that would show on the page of your website , i will be taking you through these tags in a later tutorial

Note: anything with a / in the tag means that it ending that tag (you will need to end all tags )

Simple web elements and what they do


<!doctype html>
<html>
<head>
      <title>
      Home-Page
      </title>
</head>
<body>
     <p>Hello this is a paragraph</p>
     <h1>This is a large header and is the largest in the header tags</h1>
     <a href="http://www.google.com">This is a link </a>
</body>
</html>

<p> - this is a paragraph and can be used to enter paragraphs of text onto the screen this will be entered at the normal size of which can be edited via css.
<h1>- this is a header tag this will produce a large header(like in news papers) of which could be used in conjunction to the paragraph tag , the header tag can be used with different numbers after the h this goes up to h7
<a href=""> - this will link to a external or internal page , for instance link you to a about me page of your site , or it can be used to be linked to thetechgame this will also be in normal size




please let me know if you would like me to continue as it does take time and i would like to see whether i'm helping others or i'm just wasting their time


Last edited by blueninjn ; edited 1 time in total
#2. Posted:
iDesigner
  • Challenger
Status: Offline
Joined: Feb 25, 201410Year Member
Posts: 169
Reputation Power: 9
Status: Offline
Joined: Feb 25, 201410Year Member
Posts: 169
Reputation Power: 9
Don't really see how this is a tutorial :S It's more of a snippit with a tiny bit of explaining of HTML skeleton code.

But thanks for contributing.
#3. Posted:
blueninjn
  • Junior Member
Status: Offline
Joined: Dec 28, 201310Year Member
Posts: 85
Reputation Power: 3
Status: Offline
Joined: Dec 28, 201310Year Member
Posts: 85
Reputation Power: 3
iDesigner wrote Don't really see how this is a tutorial :S It's more of a snippit with a tiny bit of explaining of HTML skeleton code.

But thanks for contributing.

thanks you , i have now updated the thread and added a new tutorial/explanation to look at
#4. Posted:
Injuries
  • Rising Star
Status: Offline
Joined: Mar 07, 201212Year Member
Posts: 757
Reputation Power: 40
Status: Offline
Joined: Mar 07, 201212Year Member
Posts: 757
Reputation Power: 40
add a tutorial for a kinda professional looking navigational bar

just make the css part because css confuses me, heres the html part or the way i do it, so it will be easier on you (ony do the css par of the nav bar)

<nav> or you can use <div id=#cssmenu> or something like that

<nav>
  <ul><a href="filename.html">TabName</a></ul>
  <ul><a href="#">TabName</a></ul>
</nav>


also add this to your post("how to link a stylesheet")
<link rel="stylesheet" type="text/css" href="LinkToYourStylesheet.css">
#5. Posted:
blueninjn
  • Junior Member
Status: Offline
Joined: Dec 28, 201310Year Member
Posts: 85
Reputation Power: 3
Status: Offline
Joined: Dec 28, 201310Year Member
Posts: 85
Reputation Power: 3
DistanceMods wrote add a tutorial for a kinda professional looking navigational bar

just make the css part because css confuses me, heres the html part or the way i do it, so it will be easier on you (ony do the css par of the nav bar)

<nav> or you can use <div id=#cssmenu> or something like that

<nav>
  <ul><a href="filename.html">TabName</a></ul>
  <ul><a href="#">TabName</a></ul>
</nav>


also add this to your post("how to link a stylesheet")
<link rel="stylesheet" type="text/css" href="LinkToYourStylesheet.css">

Okay will do so you want to leatn how to make a navigation , jsut normal html or with html5 cause i can do both and will show how to link and will give oyu credit for the idea let me know asap because ill write it out after you reply
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.