You are viewing our Forum Archives. To view or take place in current topics click here.
[HTML/CSS] Tutorial for beginners
Posted:
[HTML/CSS] Tutorial for beginnersPosted:
Status: Offline
Joined: Nov 16, 20149Year Member
Posts: 544
Reputation Power: 25
HTML
Hey everyone! Today I'll be teaching you HTML. I'm going to put some simple HTML coding as a start and will explain what everything means. I updated the tutorial with some advanced HTML. If you would like to learn some more HTML, I suggest you visit a website such as [ Register or Signin to view external links. ]
What is HTML?
Great question! HTML stands for HyperText Markup Language. People use HTML to create webpages. HTML is easy to learn and fun to use!
But, how does it work?
Now that you know what HTML is let's start with some simple coding.
Open a text editor (e.g. Notepad) and copy and paste the following code into a blank file.
<!DOCTYPE html>
<html>
<head>
<title>I'm learning HTML!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html> Now, save the file as "index.html", without the quotation marks. If you open the file using a web browser (e.g. Internet Explorer) you'll see a little message.
This is just a easy "Hello World" webpage. We'll get into all of the coding used to create this while progressing in this tutorial.
Let's begin! <!DOCTYPE html><html></html>
Now that you've seen HTML in action, let's start creating our own webpage.
We always start off with <!DOCTYPE html>. We do this to let the web browser know what kind of coding we're using. For our document it will be HTML.
Next, we open the the HTML coding by entering <html> on the second line. By doing so we tell the document that we're going to use HTML coding until we end the <html> by putting </html>.
Example:
<!DOCTYPE html>
<html>
*YOUR CONTENT*
</html> Note: You always have to start and end any tag! (e.g. <html>*YOUR CODE*</html>
The head <head></head>
Now that you know how to start and end your HTML document, let's get into the head for the webpage.
As you may remember, I used <head> </head> tags in my coding at the beginning of this tutorial. Let's start with those.
The <head> </head> tags are the "head" of the webpage. The <head> element is a container for meta data (data about data). Meta data typically define document title, styles, links, scripts, and other meta information.
Example:
<head>*YOUR CONTENT*</head> The title <title> </title>
The title is used for, well, the title Whatever you put in between those <title> </title> tags will show up as the title of your webpage. Look closely at the title of the index.html page we created in the beginning. Do you see the title of the webpage in your web browser?
Example:
<title>Hello World!</title> The body <body></body>
Here we are, at the body of the webpage. The <body></body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.. For example, you can put some text inside these tags and it will show up on your webpage.
Example:
<body>Here's some text!</body> Paragraphs <p></p>
The <p></p> tags are paragraph tags. These tags are handy because browsers automatically add some space (margin) before and after each <p></p> element. If you would like your webpage's text to look good, make sure to create some paragraphs.
Example:
<p>This is paragraph 1</p>
<p>This is paragraph 2</p> The final product
This is how a full webpage should look like:
<!DOCTYPE html>
<html>
<head>
<title>This is your HTML page</title>
</head>
<body>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
</body>
</html> More advanced HTML
Now that you know some of the basic HTML coding, we'll get into some more advanced coding.
Links <a> </a>
The <a> </a> tags are used to create hyperlinks. Hyperlinks bring you from one page to another.
The most important attribute of the <a> </a> element is the href attribute, which indicates the link's destination.
The most important attribute of the <a> </a> element is the href attribute, which indicates the link's destination.
Example:
<a href="http://yourwebsite.com">This is a link</a> Comments <!-- -->
Comments are most of the time used to let someone who is looking at your code know what a specific part of the code means, or you could use it to input some notes inside of your code.
Anything you put after <!-- in HTML will be a comment. You can close comments by entering -->
Example:
<!-- This is a comment --> Lists <ul> </ul> | <ol> </ol>
There are two types of lists in HTML. We have unordered lists <ul> </ul>, and we have ordered lists <ol> </ol>. Both of the lists use list items <li> </li>.
Example:
<ul>
<li>This is list item 1</li>
<li>This is list item 2</li>
</ul>
<ol>
<li>This is list item 1</li>
<li>This is list item 2</li>
</ol> Tables <table> </table>
An HTML table consists of the <table> </table> element and one or more <tr></tr>, <th></th>, and <td></td> elements.
The <tr></tr> tags stand for table rows, the <th></th> stands for the table header and the <td></td> stands for table cells.
Example:
<table> <!-- Open Table -->
<tr> <!-- Table Row -->
<th>Month</th> <!-- Table Header -->
<th>Savings</th>
</tr> <!-- Close Table Row -->
<tr>
<td>January</td> <!-- Table Cell -->
<td>$100</td>
</tr>
</table> <!-- Close Table --> H1 to H6 headings <h1></h1> - <h6></h6>
The <h1></h1> tags is the most important heading and the <h6><h6> is the least important heading.
Example:
<h1>This is text in heading 1</h1> <!-- This will be really big text-->
<h2>This is text in heading 2</h2>
<h3>This is text in heading 3</h3>
<h4>This is text in heading 4</h4>
<h5>This is text in heading 5</h5>
<h6>This is text in heading 6</h6> <!-- This will be really small text--> Images <img src="" />
Of course it's also possible to insert images into your webpage. We do this by using the <img src="" /> tag. Inside the "" we put the link to our image.
Example:
<img src="*link to your image*" /> <!-- This will show your image on your webpage. --> Div <div> </div>
The <div> </div> tags define a division in a HTML document. The <div> </div> tags are often used together with CSS coding to create a layout for the webpage.
Example index.html:
<div style="align: center">
<p>This is some centered text with the color red</p>
<p>This is some more centered text with the color red</p>
</div> Example index.css:
div {
color: red;
} CSS
Of course HTML wouldn't be complete without some nice layout to some things. CSS does this for you. Coding in CSS is not hard at all and just as easy as HTML! I'll be explaining CSS to you in this next part.
What is CSS?
CSS stands for Cascading Style Sheets. CSS let's you create external style sheets which will save a lot of work when creating web page layouts.
How does it work?
CSS is actually really easy to use. Let's look at a example of how it can be used.
Example index.html:
<body>
<p>This is some epic red text!</p>
</body> Example index.css:
p {
color: red;
} All the text inside the paragraph will now be red! It's as easy as that. The only problem with this is that all paragraphs will be red. What if we only want one paragraph to be red and another to be blue? How would we do that?
Selectors in CSS
We can select a specific part of the HTML code by using a selector. There are three types of selectors.
1. The element selector
2. The id selector
3. The class selector
1. The element selector
2. The id selector
3. The class selector
Let's start with the element selector:
The element selector is what I just showed you in the previous example. It selects all the elements in the HTML code. In my example we selected all the <p> elements.
The element selector is what I just showed you in the previous example. It selects all the elements in the HTML code. In my example we selected all the <p> elements.
The id selector:
You can add an id to a element. The id has to be unique. You could use the same id multiple times if you would like all the elements to be the same style. You can add an id to a element by adding id="your id" inside the element tag.
You can add an id to a element. The id has to be unique. You could use the same id multiple times if you would like all the elements to be the same style. You can add an id to a element by adding id="your id" inside the element tag.
Example index.html:
<body>
<p id="your_id">This text will be red!</p>
<p>This text will not be red!</p>
</body> Example index.css:
#your_id {
color: red;
} The class selector:
The class selector looks in your HTML code for a specific class. It almost works the same as the id selector. You can add a class to a element by adding class="your class name" inside the element tag.
The class selector looks in your HTML code for a specific class. It almost works the same as the id selector. You can add a class to a element by adding class="your class name" inside the element tag.
Example index.html:
<body>
<p class="your_class_name">This text will be green!</p>
<p>This text will not be green!</p>
</body> Example index.css:
.your_class_name {
color: green;
} Using CSS in your HTML document
Once you have your CSS document ready, all you have to do is import it in your HTML document. How do we do this you ask? Easy! Add the following line inside the <head></head> tags.
<link rel="stylesheet" type="text/css" href="yourstylesheetfile.css">
<link rel="stylesheet" type="text/css" href="yourstylesheetfile.css">
Example index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="yourstylesheetfile.css">
<title>This is my HTML document!</title>
</head>
</html> The END!
Well there you have it! If you have any further questions, please let me know by either posting on this thread or shooting me a PM!
Greets,
-Third-
-Third-
Last edited by -Third- ; edited 7 times in total
#2. Posted:
Status: Offline
Joined: Dec 30, 201310Year Member
Posts: 1,331
Reputation Power: 69
Very short but sweet tutorial on how to get into HTML
Very good tut man !
Peace
-0lly
Very good tut man !
Peace
-0lly
- 1useful
- 0not useful
#3. Posted:
Status: Offline
Joined: Nov 16, 20149Year Member
Posts: 544
Reputation Power: 25
y0Rzn wrote Nice short & simple tutorial how to simple code with HTML. You should update your topic and put XHTML because that's a little step to the HTML. Great work and keep your topic standards maintaining.
I might update it with XHTML later, but I didn't want to go into too much detail.
- 0useful
- 0not useful
#4. Posted:
Status: Offline
Joined: Nov 06, 20149Year Member
Posts: 34
Reputation Power: 1
Status: Offline
Joined: Nov 06, 20149Year Member
Posts: 34
Reputation Power: 1
Wow. This is a very good tutorial.
Not to long to make people get aggravated,and gives extreme detail!
Nice post!
Thanks for the contribution!
Not to long to make people get aggravated,and gives extreme detail!
Nice post!
Thanks for the contribution!
- 1useful
- 0not useful
#5. Posted:
Status: Offline
Joined: Nov 19, 201310Year Member
Posts: 705
Reputation Power: 29
Appreciate the tutorial man. It was very easy to understand and motivated me to start getting into coding, thank you
- Cheers, Glxy : )
- Cheers, Glxy : )
- 1useful
- 0not useful
#6. Posted:
Status: Offline
Joined: Jun 10, 201013Year Member
Posts: 435
Reputation Power: 17
Status: Offline
Joined: Jun 10, 201013Year Member
Posts: 435
Reputation Power: 17
Nice tutorial man! Noticed you didn't use;
<div class="nav"></div> or any "div" code in general
if you don't know what it does ;
Sorry if You had this already in as I just quickly read it. But if you don't have it you could add it to help people with Divs
<div class="nav"></div> or any "div" code in general
if you don't know what it does ;
div's are like highlighting a chunk of code which
then later can be styled in css for eg.
<div class="about">
<h2>About</h2>
<p>about about text blah blah blah.....</p>
</div>
then in your .css you can put
.about h2 {
color: #fff;
font-size: 24px;
font-weight: bold;
}
.about p {
color: #FF0000
font-size: 18px;
}
with this code Your chunk of code will be styled with colors h2 being black + Bold, then p being in red.
then later can be styled in css for eg.
<div class="about">
<h2>About</h2>
<p>about about text blah blah blah.....</p>
</div>
then in your .css you can put
.about h2 {
color: #fff;
font-size: 24px;
font-weight: bold;
}
.about p {
color: #FF0000
font-size: 18px;
}
with this code Your chunk of code will be styled with colors h2 being black + Bold, then p being in red.
Sorry if You had this already in as I just quickly read it. But if you don't have it you could add it to help people with Divs
- 1useful
- 0not useful
#7. Posted:
Status: Offline
Joined: Nov 16, 20149Year Member
Posts: 544
Reputation Power: 25
vJoeSwanson wrote Nice tutorial man! Noticed you didn't use;
<div class="nav"></div> or any "div" code in general
if you don't know what it does ;
div's are like highlighting a chunk of code which
then later can be styled in css for eg.
<div class="about">
<h2>About</h2>
<p>about about text blah blah blah.....</p>
</div>
then in your .css you can put
.about h2 {
color: #fff;
font-size: 24px;
font-weight: bold;
}
.about p {
color: #FF0000
font-size: 18px;
}
with this code Your chunk of code will be styled with colors h2 being black + Bold, then p being in red.
Sorry if You had this already in as I just quickly read it. But if you don't have it you could add it to help people with Divs
Updated, thanks for the heads up
- 0useful
- 0not useful
#8. Posted:
Status: Offline
Joined: Dec 24, 201310Year Member
Posts: 1,749
Reputation Power: 67
Awesome post dude! Will be stuck soon im sure!
- 1useful
- 0not useful
#9. Posted:
Status: Offline
Joined: Jun 06, 201310Year Member
Posts: 1,497
Reputation Power: 7028
Status: Offline
Joined: Jun 06, 201310Year Member
Posts: 1,497
Reputation Power: 7028
Damn looks like a lot of effort of went into this! really nice post i will be defiantly using this in the future
- 1useful
- 0not useful
#10. Posted:
Status: Offline
Joined: Feb 01, 201113Year Member
Posts: 153
Reputation Power: 5
Status: Offline
Joined: Feb 01, 201113Year Member
Posts: 153
Reputation Power: 5
Great post in general, full of vital information
Hope to see OP grow as time comes
Hope to see OP grow as time comes
- 1useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.