You are viewing our Forum Archives. To view or take place in current topics click here.
// HTML && CSS \\ BASICS
Posted:

// HTML && CSS \\ BASICSPosted:

Calvee
  • TTG Senior
Status: Offline
Joined: Jun 13, 201112Year Member
Posts: 1,360
Reputation Power: 57
Status: Offline
Joined: Jun 13, 201112Year Member
Posts: 1,360
Reputation Power: 57

So in this tutorial, I will be covering the basics of how to create a HTML Web-Page, and the "main".CSS file. After giving you the main codes/tags that are needed, I will give a short description of what they are used for whilst creating a HTML Web-Page.

For this Tutorial you will need:
- Notepad ( I recommend Notepad++)
- The ability to read.
- Some patience as it's fairly long tutorial.



Here's how to create the base of the Web-Page:

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Title Goes Here.</title>
   <link rel="stylesheet" href="main.css">
</head>





Now for the 'bulk' of the Web-Page; the main body:

<body>
   <div id="big_wrapper">
   <header id="top_header">
      <h1>Main Title Text.</h1>
   </header>
   
   <nav id="top_menu">
      <ul>
         <li>List Item 1.</li>
         <li>List Item 2.</li>
         <li>List Item 3.</li>
      </ul>
   </nav>
   
   <section id="main_section">
      <article>
         <header>
            <hgroup>
               <h1>Article Title.</h1>
               <h2>Sub-title.</h2>
            </hgroup>
         </header>
         <p>Main article text goes here.</p>
         <footer>
            <p> - Written by "name"</p>
         </footer>
      </article>
      
      
   
         
   </section>
   
   <aside>
      <h4>Sub-Title Goes here.</h4>
      Text goes here.
   </aside>
   
   <footer>
      Copyright Information Goes here!
   </footer>
   </div>
</body>
</html>


Now CSS time, go into a CLEAN Notepad, and after finishing, save it as "filename".css
This is to set everything within the <html></html> tags to default, it's not pointless:


*{
   margin: 0px;
   padding: 0px;
}



Now for the actual styling of the Web-Page:


}
header, section, footer, aside, nav, article, hgroup{
   display:block;
}
body{
   text-align:center;
   width:100%;
   display:webkit-box;
   -webkit-box-pack: center;
   
}
h1{
   font: bold 20px Century Gothic;
}
#top_menu li{
   display:inline-block;
   list-style:none;
   padding: 5px;
   font: bold 14px Century Gothic;
}



So here's what the tags mean/do that I have used in this Tutorial:

<!doctype html> - Defines the type of Document, in this case, it's HTML.
There is not end tag for this.

<html lang="en"> - Again, defines the Document type as HTML, and sets the language to English (As I'm English.) - The end tag for this is </html>

<head> - Defines information about the Document. - The end tag for this is </head>

<div id="big_wrapper"> - Defines a sepecific section in the Document, also the "id="big_wrapper" is used in the CSS styling sheet, so you can alter it easily. - The end tag for this is </div>

<header id="top_header"> - Specifies an introduction, or a group of navigation elements for a document again the "id=top_header" is used in the CSS styling sheet. - The end tag for this is </header>

<h1> - This is used as a heading, it can vary from h1 to h6, the difference is, the size of the text inside of the tags. - The end tag for this is </h1>

<nav id="top_menu"> - Defines navigation links, again the "id="top_menu" is used in the CSS styling sheet. - The end tag for this is </nav>

<ul> - This defines an unordered list. - The end tag for this is </ul>

<li> - Defines a list item. - The end tag for this is </li>

<section id="main_section"> - Defines a section in the Document, again the "id="main_section" is used in the CSS styling sheet. - The end tag for this is </section>

<article> - Defines an article. - The end tag for this is </article>

<hgroup> - Groups a set of <h1> to <h6> together, this must be used when there is two or more <h1> tags inside the <article> tags. - The end tag for this is </hgroup>

<p> - This creates a new Paragraph within the Document. - The end tag for this is </p>

<footer> - Defines a footer for the Document or for a section such as an <article>. - The end tag for this is </footer>

<aside> - Defines content aside from the page content. - The end tag for this is </aside>


Now for some basic knowledge/understanding of the codes used within the CSS styling sheet:

margin - Sets all the margin properties in one declaration.

border - Adds a border around the outside a specific region/section, in a colour of your choice.

background - Adds a background of a specific colour to a specific region/section.

padding - Sets all the padding properties in one declaration.

text-align - Aligns the text into the position set, for example:

#big_wrapper{
text-align:center; - Would align the text central to the Web-page.
text-align:left; - Would align the text to the left to the Web-page.
text-align:right; - Would align the text to the right of the Web-page.



font - Edits the font under a specific section, for example this will edit the font within the "top_menu"

#top_menu {
   display:inline-block;
   list-style:none;
   padding: 5px;
   font: bold 14px Century Gothic;
}




h"number" - Defines the specific Headings within the Document, and edits them all with the codes that follow it.

This enables everything to be seen within all types of Web-Browsers, such as Chrome, Firefox.
}
header, section, footer, aside, nav, article, hgroup{
   display:block;
}


#"id name from the HTML Document" - This edits everything within the <section id="name of the section">

When you are changing the size of the font, you use "px" which is short for pixels, the same principles apply as the rest of the CSS Styling-Sheet.

Also when you are creating a new object within the "main.CSS" file you must always follow the format as below (to get the space you hit "tab" once.)

Name of the aspect you want to edit.{
       text-align:center;
   
}




Please Note : If I have missed anything that you feel is important in this tutorial, then please feel free to post it below/PM it to me and I will add it into the Tutorial above.

Also if there is anything you are struggling with, then also feel free to post below/PM me and I will help you in anyway possible.

HTML Coding isn't as easy as everybody makes out, to master it, will take months, so if you're reading this, then be patient with it, keep at it and eventually YOU WILL improve.





Calvee.

The following 1 user thanked Calvee for this useful post:

-Lakai- (01-21-2012)
#2. Posted:
Z61
  • V5 Launch
Status: Offline
Joined: Apr 16, 201014Year Member
Posts: 4,309
Reputation Power: 179
Status: Offline
Joined: Apr 16, 201014Year Member
Posts: 4,309
Reputation Power: 179
This tutorial is much better than the last one .
#3. Posted:
Calvee
  • TTG Senior
Status: Offline
Joined: Jun 13, 201112Year Member
Posts: 1,360
Reputation Power: 57
Status: Offline
Joined: Jun 13, 201112Year Member
Posts: 1,360
Reputation Power: 57
Z61 wrote This tutorial is much better than the last one .

Yeh, I thought you might say that, haha.

I worked hard on this one!
#4. Posted:
-Lakai-
  • TTG Senior
Status: Offline
Joined: Jul 09, 201112Year Member
Posts: 1,184
Reputation Power: 56
Status: Offline
Joined: Jul 09, 201112Year Member
Posts: 1,184
Reputation Power: 56
good tutorial keep it up
#5. Posted:
Calvee
  • TTG Senior
Status: Offline
Joined: Jun 13, 201112Year Member
Posts: 1,360
Reputation Power: 57
Status: Offline
Joined: Jun 13, 201112Year Member
Posts: 1,360
Reputation Power: 57
-Lakai- wrote good tutorial keep it up


Thanks Lakai - Your Forums is coming a long nicely.
Calvee.
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.