Revenge
Member
Hello everyone, I haven't formally introduced myself to the community so I will do it here. My real name is Cory and I am 19 years old. I have a passion for coding. I love learning to code and I love the product of my designs. I currently have no degree for coding and everything I have learned I taught myself. I'd advise you too aswell. (It will benefit you undoubtedly if you wished to pursue A career in this feild.) Anyways, enough about me let's continue on with my guide.
Note: It may have a little length to it but rest assured is you pay attention and read thoroughly you will be able to code your own website, theme, blog, etc.
Things to be covered in this tutorial:
HTML, CSS.
Lets get this started.
Lesson 1: Basic HTML Tags & Page set up.
The first thing we should learn when wanting to code is the basic structure of our HTML document. The following is the basic structure of a bare HTML document.
Now you may be wondering to yourself what each of these tags do. I will explain what each of these do in short.
<html></html>: These are the tags telling the webpage that the document is an HTML document. All other HTML tags should be displayed INSIDE on these 2 tags.
<title></title>: These tags are for the title of the page. The short text that shows up in the tab of your browser. Or up in the top left-hand corner of your browser.
<body></body>: These are the tags for the visual content of your webpage.
</head></head>: Title tags, stylesheet imports, etc go in between these tags.
Someother useful HTML tags for beginners:
Paragraph tag: <p></p>
Hyperlink HTML: <a href="#"></a>
Style Tags: <style></style>
You can read more about these at W3Schools
Note: If you are wondering why I did not include the <style> tags in the basic structure of A webpage it's because I personally feel it is bad practice since you would have to write the code over and over on diffrent webpages. We will learn how to easily do this without having to use the <style> tags later in our lesson.
Lesson 2: HTML Div's & external stylesheet CSS styling.
On to our next tutorial. We are going to enter this part of our lesson assuming you have check out W3Schools and have been exposed to more HTML tags. We are going to start off with our webpage with the following set up. We are also going to have 2 files to edit:
style.css
index.html
Index.html file code:
Now we are going to show you how to style that div.
Open up your style.css file and put in the following:
Most of the CSS code is self explanatory. The one thing I want to touch on here (because I had trouble with this.) is styling the div. To style the div we must do:
This means, the div you made on your html page's name must match the div in the css page. If it does not you have not matched the div's the right way.
If you want to get more advanced you could try styling the div with Css3 elements.
If anyone finds any mistakes please tell me so I can fix them.
Note: It may have a little length to it but rest assured is you pay attention and read thoroughly you will be able to code your own website, theme, blog, etc.
Things to be covered in this tutorial:
HTML, CSS.
Lets get this started.
Lesson 1: Basic HTML Tags & Page set up.
The first thing we should learn when wanting to code is the basic structure of our HTML document. The following is the basic structure of a bare HTML document.
Code:
<html>
<head>
</title></title>
</head>
<body>
</body>
</html><html></html>: These are the tags telling the webpage that the document is an HTML document. All other HTML tags should be displayed INSIDE on these 2 tags.
<title></title>: These tags are for the title of the page. The short text that shows up in the tab of your browser. Or up in the top left-hand corner of your browser.
<body></body>: These are the tags for the visual content of your webpage.
</head></head>: Title tags, stylesheet imports, etc go in between these tags.
Someother useful HTML tags for beginners:
Paragraph tag: <p></p>
Hyperlink HTML: <a href="#"></a>
Style Tags: <style></style>
You can read more about these at W3Schools
Note: If you are wondering why I did not include the <style> tags in the basic structure of A webpage it's because I personally feel it is bad practice since you would have to write the code over and over on diffrent webpages. We will learn how to easily do this without having to use the <style> tags later in our lesson.
Lesson 2: HTML Div's & external stylesheet CSS styling.
On to our next tutorial. We are going to enter this part of our lesson assuming you have check out W3Schools and have been exposed to more HTML tags. We are going to start off with our webpage with the following set up. We are also going to have 2 files to edit:
style.css
index.html
Index.html file code:
Code:
<html>
<head>
<title>Revenge's HTML Tutorial</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="example">
This is our <div> we will be styling.
</div>
</body>
</html>Open up your style.css file and put in the following:
Code:
body {
background-color: #333333;
color: #ffffff;
font-family:Arial;
}
#example {
margin: 0 auto auto auto;
padding: 5px;
background-color: black;
}
Code:
#divname {
}If you want to get more advanced you could try styling the div with Css3 elements.
If anyone finds any mistakes please tell me so I can fix them.