[Tutorial]The Ultimate HTML Guide, Including a Large Section on CSS

HTML or Hyper Text Markup Language is a markup language used for describing web documents or web sites as we normally call them. In order to write HTML all you need is something to type in that can save documents as HTML files. I myself use Notepad++, I will include a link for it at the end of the tutorial. Other than that you can use any web browser, all of todays web browsers are capable of displaying HTML. HTML uses things called <tags>, all except a few have an <opening tag> and </closing tag>. Also HTML5 is not case sensetive, but for the purpose of this tutorial we will be doing all lowercase, that is because some previous versions are case sensitive and need to be that way. So without further ado let's begin.

the funoomania 2018 [Tutorial]The Ultimate HTML Guide, Including a Large Section on CSS

Introduction
- Introduction
- Contents

Basics
- Layout
- Head
- Doctype

The Body
- Body
- Headings
- Elements
- Paragraphs
- Attributes

More in Depth
- Images
- Links
- Quotations
- Forms

More in Depth (Cont.)
- Lists
- Tables
- Javascript

Advanced
- Iframes
- Symbols & Charset
- Metadata

Intro to CSS
- Styles
- Blocks
- Classes
- Colors

Tags

Closing
- Conclusion
- Special Thanks
- Continue Reading

So the first thing you need to know is how the flow of your HTML document should look, it cannot just be jumbled together. The three main tags to use here are <head>, <body>, and <footer>. While they do not need to be in order it is best to keep them that way to make the document easier to read and edit. For this part we will only breifly cover what each of these may contain.

The <head> tag will typically contain basic information about the file you are working with, such as the title, metadata, and doctype. Each of these will be covered in a later section of the tutorial so we won't go over them to much here. In HTML5 the <head> tag can be omitted, but we will use it in this tutorial to make the pages easier to read.

The <body> tag contains the contents of the webpage, everything that the end user will see.

The <footer> tag usually contains copyright or contact information. It may also contain links to things such as site map or author information. It isn't necessary for a page to have a <footer>, but it can also ccontain multiple.

The basic page layout will look something like.

www the funomania [Tutorial]The Ultimate HTML Guide, Including a Large Section on CSS

[Tutorial]The Ultimate HTML Guide, Including a Large Section on CSS

The <head> is used to define information about the page you are visiting, and can contain the following tags.

<title> This defines the page title, it is mandatory in all HTML documents.
<style> This can be included in the head and will determine how elements in the page are rendered.
<base> The base tag will determine the base URL for the page you are visiting, example usage would be <base href="domain.com/">
<link> Link can be used to link the page to an external resource such as a stylesheet. Stylesheets are covered in a later section.
<meta> Is used to describe metadata about the page, we will have a section for it towards the end of this guide to show everything you can include.
<script > Script is used to determine client side javascript to be used by the page.
<noscript> This is used to display information when javascript is disabled.

All of these tags are going to be covered in more detail if you want to know more about them, this is just to show what can be included in the <head> tag.

An example <head> would look like.

The <!DOCTYPE> is not an HTML tag, it is a declaration to the browser about what HTML version you are using. Since we are using HTML5 there is only one doctype declaration. This must be the first line in the HTML document before anything else.

Code:

<!DOCTYPE html>

Other doctypes for different version of HTML are.

HTML 4.01 Strict

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The <body> tag defines the contents of the webpage and outlines what you will see when you visit that webpage. The <body> tag also supports the style attribute to display it with CSS

Example usage of the <body> tag

Code:

<!DOCTYPE html>

<html>

<head>

<title>My Title</title>

<style>

h1 {color:red;}

p {color:blue;}

</style>

</head>

This would give us a page that looks like

The <body> can contain almost any element in HTML some examples would be

<header>
<p>
<list>
<table>
<form>
<object>
<image>
<a href> (link)
and many others...

We will go over more elements in the tag section near the end of this guide.

Headings are defined with the <h1> through <h6> tags. Ranging from most important to least imortant. The text size of headings gets smaller as there importance decreases. The <heading> tags should only be used for the heading or title of a page, and not to make large text. Agood example use for headings would be to use <h1> for the title and <h2> for the description like so.

Code:

<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>My Title</h1>
<h2>My description</h2>
</body>
</html>

Here is what we get.

Anything after <h6> will be ignored by the browser since it is invalid HTML and will show up as a basic paragraph with no CSS instead.

The <p> is used to define a paragraph, that's it. You can use the style attribute in the tag to dusplay each individual paragraph with its own CSS, an example of a paragraph would be

Code:

<!DOCTYPE html>

<html>

<head>

<title>My Title</title>

<style>

h1 {color:red;}

p {color:blue;}

</style>

</head>

<body>

<h1>My Title</h1>

<h2>My description</h2>

<p style="color:green;text-align:right">This is a right green paragraph</p>

<p>This is a parapraph using the CSS defined in the head<p>

</body>

</html>

This would give us the following result.

For Line breaks you can either use the <p> tag for each paragraph or or use the line break. Normal returns in text will be ignored by the browser in HTML5 so having something like

Code:
<p>Line 1.
Line 2.
line 3.</p>
Would show up like
Code:
Line 1. Line 2. Line 3.

To get around this spacing delimna we can either use

Code:
<p>Line 1.</p>
<p>Line 2.</p>
<p>Line 3.</p>

Or

Code:

<p>Line 1.<br>Line 2.<br>Line 3.</p>

Which would show up as.

Elements are objects in HTML that have a closing tag, likewise there are also empty elements that can be closed in the opening tag. Some elements we have already covered, however we still have many more to go over, and I will try to cover as many of them as I can in this guide. Some elements we have already gone over are.

<html></html>
<head></head>
<body></body>
<title></title>
<header></header>
<p></p>

Empty elements are elements that require no closing tag, however they can also be closed in the opening tag for stricter validation, all of the empty tags are

<link>
<track>
<param>
<area>
<command>
<col>
<base>
<meta>
<hr>
<source>
<img>
<keygen>
<br>
<wbr>
<colgroup>
<input>

Empty elements can be closed in the opening tag like so <br />. This is not required but can be used for stricter document validation if you choose to do so.

Attributes are used to better define elements in HTML. An attribute is placed inside the tag like so

Code:

<body style="style_data">

Style is one of many attributes that you can use inside of a tag, I am going to list some more examples and provide an example usage for some of them.

style
Specifies inline CSS for each element
src
Specifies the URL for an image
alt
Text to display when an HTML element cannot be displayed
height
Determines the height of an element, such as an image
width
Determines the width of an element, such as an image
href
Specifies the URL for a link
disabled
Determines that an HTML input element should be disabled
title
Shows up as a text box when you hover over an element
id
Used to determine the ID of an element

An example usage for these would be

Code:
<p title="paragraph 1">Paragraph 1</p>
<img src="pic.png" style="height:60px;width:60px">
<a href="yourlink.com>your link</a>

Attributes should always be wrapped in double quotes to prevent any validation problems that may occur.

For this part of the tutorial we are going to be using the Lightbulb image being served on Hack Forums's located here. The <img> tag is another example of a empty element and contains only attrivutes. The attributes affect the way the image is diplayed, some attributes you can use with the image tag include
src
style
alt
usemap

The src attribute is used to grab the image that is to be displayed. The web browser assumes the image is in the same directory as the web document. If the image is not in the same directory you need to include the subdirectory to the image location. You can also use images from another website by using the full website URL as the src for the image. An example of displaying an image can use the following code

Code:
<p><img src="https://hackforums.net/uploads/ficons/ideas-suggestions.png"></p>

You can also add alt text to the image to dispaly when the image doesn't load, and even add a title to display when you hover over the image.

Code:
<p><img src="https://hackforums.net/uploads/ficons/ideas-suggestions.png" alt="Lightbulb" title="Lightbulb Hover"></p>

The style tag controls how the image is displayed with CSS, you can use the style attribute to resize the image and even control the positioning of the image. With the style you can determine the height and width of the image and make it float left or float right. Floating means the image will sit next to any text in the same paragraph.

Code:
<p><img src="https://hackforums.net/uploads/ficons/ideas-suggestions.png" alt="Lightbulb" title="Lightbulb Hover" style="float:left;width:40px;height:40px;"> The lightbulb will float to the left of this text.</p>
<p><img src="https://hackforums.net/uploads/ficons/ideas-suggestions.png" alt="Lightbulb" title="Lightbulb Hover" style="float:right;width:40px;height:40px;"> The lightbulb will float to the right of this text.</p>

So lets go ahead and put this all together and see how it looks.

Code:
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body>
<p style="text-align:left"><img src="https://hackforums.net/uploads/ficons/ideas-suggestions.png" alt="Lightbulb" title="Lightbulb Hover" style="float:left;width:40px;height:40px;"> The lightbulb will float to the left of this text.</p>
<p style="text-align:right"><img src="https://hackforums.net/uploads/ficons/ideas-suggestions.png" alt="Lightbulb" title="Lightbulb Hover" style="float:right;width:40px;height:40px;"> The lightbulb will float to the right of this text.</p>
</body>
</html>

This will give us something that looks like this.

Usemap is another attribute that is a little more complicated than anything we have covered already. usemap use an area map that we define and can be used to link a single image to multiple different links. Something MyBB should implement to make sales threads better >.>
First we need and image with a defined height and width in the style attribute, we will then divide the image into 4 squares using the image map. You can also use it to define circles, but since we have a small image we will stick to squares for now.
First lets blow the image up and make it big enough to chop.

Code:
<p><img src="https://hackforums.net/uploads/ficons/ideas-suggestions.png" alt="Lightbulb" usemap"#lightbulb" style="width:160px;height:160px;"></p>

For the map we are going to use rectanles, but before that we need to understand them. The top left corner of the image is going to be our starting point with the coordinates {0,0}. When we deviate the first number is our horizontal deviation from the starting point, the second number is our virtical deviation from the start point.

Code:
<area shape="rect" coords="{horizontal deviation},{virtical deviation},{horizontal deviation},{virtical deviation}" href="">

Circles are slighty different with a syntax of
Code:
<area shape="circle" coords="{horizontal deviation},{virtical deviation},{radius to draw}" href=""

Now that we understand the way these maps work, let's go ahead and make our own.

Code:
<map name="lightbulb">
<area href="https://hackforums.net/forumdisplay.php?fid=134" title="Suggestions" shape="rect" coords="0,0,80,80">
<area href="https://hackforums.net/forumdisplay.php?fid=162" title="HF News" shape="rect" coords="80,0,160,80">
<area href="https://hackforums.net/forumdisplay.php?fid=336" title="Wiki Talk" shape="rect" coords="0,80,80,160">
<area href="https://hackforums.net/forumdisplay.php?fid=140" title="Ub3r Support"shape="rect" coords="80,80,160,160">
</map>

Now that our map is defined we can go ahead and put the page together and try it out.

Code:
<!DOCTYPE html>
<html>
<head>
<title>My Map</title>
</head>
<body>
<map name="lightbulb">
<area href="https://hackforums.net/forumdisplay.php?fid=134" title="Suggestions" shape="rect" coords="0,0,80,80">
<area href="https://hackforums.net/forumdisplay.php?fid=162" title="HF News" shape="rect" coords="80,0,160,80">
<area href="https://hackforums.net/forumdisplay.php?fid=336" title="Wiki Talk" shape="rect" coords="0,80,80,160">
<area href="https://hackforums.net/forumdisplay.php?fid=140" title="Ub3r Support"shape="rect" coords="80,80,160,160">
</map>
<p><img src="https://hackforums.net/uploads/ficons/ideas-suggestions.png" alt="Lightbulb" usemap="#lightbulb" style="width:160px;height:160px;"></p>
</body>
</html>

As you can see when you hover over the four squares we cut it into the hover text will even show the title we have set to show you what each link points to. Images can also bused to link to a website without a map, this will use the entire image.

Code:
<a href="https://goo.gl/o3hXFi"><img src="https://goo.gl/o3hXFi" title="The FunoMania" alt="The FunoMania" style="width:160px;height:160px;"></a>

When we click on this image it will take us to Hack Fourms.

Links are a little more simple than the usemap we just went over. Links use a basic syntax of

Code:
<a href="link">Link text</a>

Links can also use an attribute called the target attribute to determine how the link will open. The different targets and there usage are
_blank
Opens the page in a new window or tab
_self
Opens the page in the same window, this is the default action when no target is chosen.
_parent
Opens the page in the parent window.
_top
Opens the page in the full window

A more in depth look at a link would be

Code:
<a href="https://hackforums.net" target="_blank" title="Hack Forums">Hack Forums</a>

This would give us a link that would open Hack Forum's in a new window, and if you hover over it will show "hack Forums: in a floating box. Links can also be used to point at certain objects in pages

Code:
<p id="paragraph">The link will link to here.</p>
<p><a href="#paragraph" title="Paragraph 1">Paragraph 1</a></p>

This also works for linking to elements on different webpages.

Code:
<a href="differentpage.html#paragraph">Link on another page.</a>

Make sure that the page you are linking to has the id on it, otherwise it will not point to anything.

Quotations are used in paragraphs to add quotation marks to the text. This is the best way to quote text.

Code:

<p>Omniscient once said <q>I don't see this as useful.</q></p>

For larger quotes you can use the <blockquote> tag. This will indent the quoted text and can also be used to cite the text.

Code:

<p>Paid sticky response</p>

<blockquote cite="https://hackforums.net/showthread.php?tid=5154867&pid=50042827#pid50042827">This is a paid sticky until March 10, 2016. HackForums does not endorse the product nor vouch for the seller. As always any deals on HF are at your own risk. </blockquote>

The citing will not show up on the page but will ve visible if you view the page source. Adding all of this into our HTML code would look like

Code:

<!DOCTYPE html>

<html>

<head>

<title>Quotes</title>

</head>

<body>

<p>Omniscient once said <q>I don't see this as useful.</q></p>

<p>Paid sticky response</p>

</body>

</html>

When ran it would give us

<input>

The first of these is <input>, this is required in all forms. The <input> element requires a type, a name, and a value. There are three inpit types, text, radio, and submit. An example usage for <input>

Code:

<input type="radio" name="radio1" value="radio1" checked>Radio 1

<input type="radio" name="radio2" value="radio2">Radio 2

The forms can be sectioned off using the <feildset> element. The <feildset> defines the full form which contains elements called <legend> to section off and name each part of the form. So lets get our full form together and try it out.

Code:

<!DOCTYPE html>

<html>

<head>

<title>Quotes</title>

</head>

<body>

<legend>Boxxes:</legend>

<legend>Radios:</legend>

<input type="radio" name="radio" value="radio1" checked>Radio 1<br>

<input type="radio" name="radio" value="radio2">Radio 2

</fieldset>

</form>

</body>

</html>

This would give a form that looks something like

I won't go over how the form handler will handle the form. It submits it to the server so thats better left to a PHP guide.

Forms are used to handle user input and communicate actions to the server to guide you to another page or suvmit information.

A simple form would look like

Code:

<form>

form elements

</form>

Inside the <form> we have Form Elements

HTML has 2 different types of lists which also contain their own subtypes. I somehow feel it fitting to make a list of them.

Unordered

list-style-type:disc

This will mark each item with a bullet, this is also the default style

list-style-type:circle

this will mark each item with a circle

list-style-type:square

This will mark each item with a square

list-style-type:none

This will leave an empty space before each item

Ordered

type="1"

This will number the list

type="A"

This will make the list alphabetized with uppercase letters

type="a"

This will make the list alphabetized with lowercase letters

type="I"

This will list the list with uppercase roman numerals

type="i"

This will list the list with lowercase roman numerals

Unordered list are done with the <ul> tag and odered lists are done with the <ol> tag. For both list types all list item are listed with the <li> tag. An example of both an unordered list and an orderlist are

Code:

</ul>

</ol>[code]

You can also make nested lists where a list is inside of another list.

[code]

<ul>

<li>Item 2

<ul>

<li>Subitem 1</li>

<li>Subitem 2</li>

</ul>

</li>

</ul>

With some CSS we can turn our virtical list into a horizontal list as well

Code:

<head>

<style>

ul#horizontal li {

display:inline;

}

</style>

</head>

<body>

</ul>

</body>

Now lets go ahead and put some togther to see what we can come up with, here is a code with all the lists we have gone over already.

Code:

<!DOCTYPE html>

<html>

<head>

<title>Lists</title>

<style>

ul#horizontal li {

display:inline;

}

</style>

</head>

<body>

<p>Nested List</p>

<ul>

<ul>

<li>Subitem 1</li>

<li>Subitem 2</li>

</ul>

</li>

</ul>

<p>Horizontal List</p>

</ul>

<p>Unordered List</p>

</ul>

<p>Ordered List</p>

</ol>

</body>

</html>

With this code we will get lists that look like this

Now we will add links the the list here and make a navigation bar for some section on Hack Forums. To add a link, just add the Link tag <a href="link">list item</a> around the list item you want to be linked.

Code:

<!DOCTYPE html>

<html>

<head>

<title>Navigation Lists</title>

<style>

ul#nav li {

display:inline;

}

</style>

</head>

<body>

<p>Vertical Nav</p>

<li><a href="https://hackforums.net/forumdisplay.php?fid=134">Suggestions and Ideas</a></li>

<li><a href="https://hackforums.net/forumdisplay.php?fid=140">Ub3r Support</a></li>

</ul>

<p>Horizontal Nav</p>

<li><a href="https://hackforums.net/forumdisplay.php?fid=134">Suggestions and Ideas</a></li>

<li><a href="https://hackforums.net/forumdisplay.php?fid=140">Ub3r Support</a></li>

</ul>

</body>

</html>

This will give us

Tables are defined using the <table> tag and the information contained inside is defined with the table row <tr> and table data <td>. The number of columns in the table is determined by the <tr> with the most <td> entries. You can also use the table heading <th> tag to define headings for each column in the table. Tables also use a lot of CSS to control the way they are displayed, we will cover some of that CSS in this section. Table cells can contain almost any element in HTML including images, links, text, and even other tables.

This is your standard plaintext table that looks... well... plain.

Code:

<table>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

To make the table look better we have to use CSS, and a lot of it. Tables can be very bulky cody wise for something relatively small. so now we will go over some CSS and different CSS element to give you your own unique table, you can edit the CSS to fit your like and even change the colors I use to whatever you want.

So first we need to give our table an ID so that we can use the CSS in the head to only affect this one table. We will go over IDs more in detail in the CSS section of this guide.

Code:

Now that we have our ID we add our CSS to the head of the document, but first let's learn about the CSS we will be using so that we understand what's going on in the next part of this section. The CSS we will go over are

border

This adds a border around an HTML element, the default border is 1px and solid black.

border-collapse

We will be putting borders around each cell and each table. When an inline element and a parent element both have borders this will collapse both borders into a single border.

color

This changes the color of inline elements such as text.

background-color

This changes the color of parent element we are working with.

padding

Padding is a margin that surrounds and element. In the table we will use a 5px padding around all of the text in each cell.

text-align

This will change the position of the text, left, center, or right.

Once we get the CSS into the head it will look something like this

Code:

<!DOCTYPE html>

<html>

<head>

<title>Table</title>

<style>

table {

width:100%;

}

table, th, td {

border: 2px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align:center

}

table#table tr:nth-child(even) {

background-color: blue;

color: white;

}

table#table tr:nth-child(odd) {

background-color: white;

}

table#table th {

background-color: green;

color: white;

}

</style>

</head>

<body>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

With the CSS this is what our table looks like now.

This will probably be the shortest section of this tutorial, since we are ony going to define what the <script > tag and the <noscript > do. This is mostly because using the tags without spaces triggers the Cloudflare firewall.

The <script > tag is used to embed javascript into the page, just place your javasript between the opening and closing tags and it will disply in your webpage.

The <noscript > tag is used to display information and perform action whenever you have javascript disabled. If javascript is disabled everything between these tags will be used instead of what would normally show up with it enabled. Likewise if it is enabled this tag will be ignored by the browser.

frames are used to dispaly a webpage within a webpage inside of a box. To display an iframe of Hack Forums we would use

{code]<iframe src="https://hackforums.net></iframe>

Code:

We can also use Iframes as targets for links. Remember the target="_blank" from the link section? Well here we are going to be using target="framename"

[code]<iframe src="https://hackforums.net" name="frame"></iframe>

<a href="https://hackforums.net/members.php" target="frame">Members</a>

If you click on the link it will open the members page inside of the iframe. Lets go ahead and get a broader emaple to show you

Code:

<!DOCTYPE html>

<html>

<head>

<title>Iframes</title>

<style>

ul#nav li {

display:inline;

}

</style>

</head>

<body>

<li><a href="https://hackforums.net/forumdisplay.php?fid=134" target="frame">Suggestions and Ideas</a></li>

<li><a href="https://hackforums.net/forumdisplay.php?fid=140" target="frame">Ub3r Support</a></li>

</ul>

</body>

</html>

This will provide us with a stylish iframe that looks like this

I will not go to in-depth with symbols due to the way the forum handles some of them, I will provide links for them at the end of this tutorial though. Here is a breif rundown of how they work.

Code:

<p>"symbol code"</p>

The browser will parse the symbol code and display the HTML eqivalent. Here are some symbol codes

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

Some Mathematical Symbols Supported by HTML
Char Number Entity Description
∀ ∀ ∀ FOR ALL
∂ ∂ ∂ PARTIAL DIFFERENTIAL
∃ ∃ ∃ THERE EXISTS
∅ ∅ ∅ EMPTY SETS
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
∉ ∉ ∉ NOT AN ELEMENT OF
∋ ∋ &ni; CONTAINS AS MEMBER
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
Some Greek Letters Supported by HTML
Char Number Entity Description
Α Α Α GREEK CAPITAL LETTER ALPHA
Β Β Β GREEK CAPITAL LETTER BETA
Γ Γ Γ GREEK CAPITAL LETTER GAMMA
Δ Δ Δ GREEK CAPITAL LETTER DELTA
Ε Ε Ε GREEK CAPITAL LETTER EPSILON
Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA
Some Other Entities Supported by HTML
Char Number Entity Description
© © © COPYRIGHT SIGN
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← ← LEFTWARDS ARROW
↑ ↑ ↑ UPWARDS ARROW
→ → → RIGHTWARDS ARROW
↓ ↓ ↓ DOWNWARDS ARROW
♠ ♠ &spades; BLACK SPADE SUIT
♣ ♣ &clubs; BLACK CLUB SUIT
♥ ♥ &hearts; BLACK HEART SUIT
♦ ♦ &diams; BLACK DIAMOND SUIT

Character sets, also known as a character encoding standard, are used to determine what character can be displayed in the HTML document and how the page will handle them. ASCII supported numbers (0-9), English letters (A-Z), and some special characters. ANSI (Windows-1252) was the original Windows character set. It supported 256 different character codes. ISO-8859-1 was the default character set for HTML 4. It also supported 256 different character codes. Because ANSI and ISO were limited, the default character encoding was changed to UTF-8 in HTML5. UTF-8 (Unicode) covers almost all of the characters and symbols in the world.

While the default for HTML5 is "UTF-8" older version of HTML also support it, the charset is defined in the <meta> element in the <head> of the document, and can be defined by using a line like

Code:

Metadata is information about the website that is always placed in the <head> tag of the document. Metadata can be used to define keywords for search engines, website descriptions, info about the page author, and the charset being used. Attributes for the <meta> tag are

charset

character_set

content

text

http-equiv

content-type

default-style

refresh

name

application-name

author

description

generator

keywords

Here is an example of metadata for a webpage

Code:

We have already gotten our feet wet with CSS, but now we are going to take a more in depth look at some of what makes websites look the way they do. Throughout this guide, almost every example I have given has had the style attribute in it somewhere. I saved this for the near the end since CSS is probably the hardest part about HTML and uses the style attribute fervently. The style attribute is used to give individual elements there own CSS, not all CSS properties and values may be used though.

When using the style attribute the code will look something like

Code:

<body style="background-color:blue;"

A style attribute must contain atleast one property:value; pair, but may also contain more than one.

Code:

Block elements are elements that serve as containers for other elements. The <div> element is a block level element. While <div> requires no attributes it often contains CSS instructions for the contents inside it.

Here is an example or how the <div> element works

Code:

<p>This is a sample within the div block</p>

</div>

That was just the basis of what CSS can do with <div> blocks. We will go more in depth with the CSS within the next few chapters, and hopefully you can make stunning webpages whenever we are done.

The class attribute is used to link CSS the elements based on the class name. Multiple elements in the page can call the same class for CSS styles, but for this guide we will use a different class for each element o that you can get a better understanding of them.

To use the class attribute we first have to define our class with CSS in the <head> of the document.

Code:

<head>

<style>

div.para1 {

background-color:red;

color:white;

margin:20px;

padding:20px;

}

</style>

</head>

We can then create an element that is going to use the CSS class.

Code:

<h2>Paragraph 1</h2>

<p>This paragraph is using the para1 CSS class that we defined in the header of the document.</p>

</div>

Seems simple enough, so lets go ahead and through a full document together and check it out.

Code:

<!DOCTYPE html>

<html>

<head>

<title>Classes</title>

<style>

div.para1 {

background-color:red;

color:white;

margin:20px;

padding:20px;

}

div.para2 {

background-color:white;

color:blue;

margin:20px;

padding:20px;

}

div.para3 {

background-color:blue;

color:white;

margin:20px;

padding:20px;

}

</style>

</head>

<body>

<h2>Paragraph 1</h2>

<p>This paragraph is using the para1 CSS class that we defined in the header of the document.</p>

</div>

<h2>Paragraph 2</h2>

<p>This paragraph is using the para1 CSS class that we defined in the header of the document.</p>

</div>

<h2>Paragraph 3</h2>

<p>This paragraph is using the para1 CSS class that we defined in the header of the document.</p>

</div>

</body>

</html>

When we open the page with the CSS classes we get something that looks like this

Colors in HTML can be determined by three different means, color name, rgb value, and hexidecimal. CSS supports 140 different color names, so most colors are already covered.

Here are all of the named colors and their respective hex value

Code:

AliceBlue #F0F8FF

AntiqueWhite #FAEBD7

Aqua #00FFFF

Aquamarine #7FFFD4

Azure #F0FFFF

Beige #F5F5DC

Bisque #FFE4C4

Black #000000

BlanchedAlmond #FFEBCD

Blue #0000FF

BlueViolet #8A2BE2

Brown #A52A2A

BurlyWood #DEB887

CadetBlue #5F9EA0

Chartreuse #7FFF00

Chocolate #D2691E

Coral #FF7F50

CornflowerBlue #6495ED

Cornsilk #FFF8DC

Crimson #DC143C

Cyan #00FFFF

DarkBlue #00008B

DarkCyan #008B8B

DarkGoldenRod #B8860B

DarkGray #A9A9A9

DarkGrey #A9A9A9

DarkGreen #006400

DarkKhaki #BDB76B

DarkMagenta #8B008B

DarkOliveGreen #556B2F

DarkOrange #FF8C00

DarkOrchid #9932CC

DarkRed #8B0000

DarkSalmon #E9967A

DarkSeaGreen #8FBC8F

DarkSlateBlue #483D8B

DarkSlateGray #2F4F4F

DarkSlateGrey #2F4F4F

DarkTurquoise #00CED1

DarkViolet #9400D3

DeepPink #FF1493

DeepSkyBlue #00BFFF

DimGray #696969

DimGrey #696969

DodgerBlue #1E90FF

FireBrick #B22222

FloralWhite #FFFAF0

ForestGreen #228B22

Fuchsia #FF00FF

Gainsboro #DCDCDC

GhostWhite #F8F8FF

Gold #FFD700

GoldenRod #DAA520

Gray #808080

Grey #808080

Green #008000

GreenYellow #ADFF2F

HoneyDew #F0FFF0

HotPink #FF69B4

IndianRed #CD5C5C

Indigo #4B0082

Ivory #FFFFF0

Khaki #F0E68C

Lavender #E6E6FA

LavenderBlush #FFF0F5

LawnGreen #7CFC00

LemonChiffon #FFFACD

LightBlue #ADD8E6

LightCoral #F08080

LightCyan #E0FFFF

LightGoldenRodYellow #FAFAD2

LightGray #D3D3D3

LightGrey #D3D3D3

LightGreen #90EE90

LightPink #FFB6C1

LightSalmon #FFA07A

LightSeaGreen #20B2AA

LightSkyBlue #87CEFA

LightSlateGray #778899

LightSlateGrey #778899

LightSteelBlue #B0C4DE

LightYellow #FFFFE0

Lime #00FF00

LimeGreen #32CD32

Linen #FAF0E6

Magenta #FF00FF

Maroon #800000

MediumAquaMarine #66CDAA

MediumBlue #0000CD

MediumOrchid #BA55D3

MediumPurple #9370DB

MediumSeaGreen #3CB371

MediumSlateBlue #7B68EE

MediumSpringGreen #00FA9A

MediumTurquoise #48D1CC

MediumVioletRed #C71585

MidnightBlue #191970

MintCream #F5FFFA

MistyRose #FFE4E1

Moccasin #FFE4B5

NavajoWhite #FFDEAD

Navy #000080

OldLace #FDF5E6

Olive #808000

OliveDrab #6B8E23

Orange #FFA500

OrangeRed #FF4500

Orchid #DA70D6

PaleGoldenRod #EEE8AA

PaleGreen #98FB98

PaleTurquoise #AFEEEE

PaleVioletRed #DB7093

PapayaWhip #FFEFD5

PeachPuff #FFDAB9

Peru #CD853F

Pink #FFC0CB

Plum #DDA0DD

PowderBlue #B0E0E6

Purple #800080

RebeccaPurple #663399

Red #FF0000

RosyBrown #BC8F8F

RoyalBlue #4169E1

SaddleBrown #8B4513

Salmon #FA8072

SandyBrown #F4A460

SeaGreen #2E8B57

SeaShell #FFF5EE

Sienna #A0522D

Silver #C0C0C0

SkyBlue #87CEEB

SlateBlue #6A5ACD

SlateGray #708090

SlateGrey #708090

Snow #FFFAFA

SpringGreen #00FF7F

SteelBlue #4682B4

Tan #D2B48C

Teal #008080

Thistle #D8BFD8

Tomato #FF6347

Turquoise #40E0D0

Violet #EE82EE

Wheat #F5DEB3

White #FFFFFF

WhiteSmoke #F5F5F5

Yellow #FFFF00

YellowGreen #9ACD32

Here is an example using a named color

Code:

Background is blue

</p>

Aside from named colors we also have the ability to determine colors using an rgb value. RGB values range from 0 to 255 for each primary color. To set colors using RGB

Code:

Background is blue

</p>

And last but not least we have hexidecimal colors that look something like #ffffff. Hexidecimal values are only 2 digits, the digits gro from 0 to 9 and then a to f so the full range is 0 to f or, 00 to ff. Hexidecimal colors work similiar to rgb colors, the colors each corespond to 2 digits in #RRGGBB. To use the hexidecimal color scheme we just need to use them hex inplace of the color name or rgb

Code:

Background is blue

</h2>

Now for the nitty gritty of what makes a webpage look the way it does. Almost all formatting and design in HTML is done with CSS, there are two main types of CSS. There is Inline CSS which has the CSS inside the element, usually in the form of the style attribute. We can also do internal CSS by using CSS in the <head> of the document or even external CSS by linking to a stylesheet not actually part of the document. We are going to cover all forms of CSS in this section and proper CSS usage along with some examples to help you better understand how to style with CSS. First we will go over the most common of the CSS properties and potential values for each property.

Here is a list of the CSS properties

color

Sets the color of text

opacity

Sets the opacity level for an element

background

A shorthand property for setting all the background properties in one declaration

background-attachment

Sets whether a background image is fixed or scrolls with the rest of the page

background-blend-mode

Specifies the blending mode of each background layer (color/image)

background-color

Specifies the background color of an element

background-image

Specifies one or more background images for an element

background-position

Specifies the position of a background image

background-repeat

Sets how a background image will be repeated

background-clip

Specifies the painting area of the background

background-origin

Specifies where the background image(s) is/are positioned

background-size

Specifies the size of the background image(s)

border

Sets all the border properties in one declaration

border-bottom

Sets all the bottom border properties in one declaration

border-color

Sets the color of the four borders

border-image

A shorthand property for setting all the border-image-* properties

display

Specifies how a certain HTML element should be displayed

float

Specifies whether or not a box should float

height

Sets the height of an element

left

Specifies the left position of a positioned element

margin

Sets all the margin properties in one declaration

padding

Sets all the padding properties in one declaration

visibility

Specifies whether or not an element is visible

width

Sets the width of an element

hanging-punctuation

Specifies whether a punctuation character may be placed outside the line box

hyphens

Sets how to split words to improve the layout of paragraphs

letter-spacing

Increases or decreases the space between characters in a text

line-break

Specifies how/if to break lines

line-height

Sets the line height

tab-size

Specifies the length of the tab-character

text-align

Specifies the horizontal alignment of text

text-align-last

Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"

text-indent

Specifies the indentation of the first line in a text-block

text-justify

Specifies the justification method used when text-align is "justify"

white-space

Specifies how white-space inside an element is handled

word-spacing

Increases or decreases the space between words in a text

word-wrap

Allows long, unbreakable words to be broken and wrap to the next line

text-decoration

Specifies the decoration added to text

text-decoration-color

Specifies the color of the text-decoration

text-decoration-line

Specifies the type of line in a text-decoration

text-decoration-style

Specifies the style of the line in a text decoration

text-shadow

Adds shadow to text

font

Sets all the font properties in one declaration

font-family

Specifies the font family for text

font-kerning

Controls the usage of the kerning information (how letters are spaced)

font-size

Specifies the font size of text

font-style

Specifies the font style for text

direction

Specifies the text direction/writing direction

text-orientation

Defines the orientation of the text in a line

border-collapse

Specifies whether or not table borders should be collapsed

border-spacing

Specifies the distance between the borders of adjacent cells

list-style

Sets all the properties for a list in one declaration

list-style-image

Specifies an image as the list-item marker

list-style-position

Specifies if the list-item markers should appear inside or outside the content flow

list-style-type

Specifies the type of list-item marker

ime-mode

Controls the state of the input method editor for text fields

nav-down

Specifies where to navigate when using the arrow-down navigation key

outline

Sets all the outline properties in one declaration

outline-color

Sets the color of an outline

outline-offset

Offsets an outline, and draws it beyond the border edge

outline-style

Sets the style of an outline

outline-width

Sets the width of an outlin

column-fill

Specifies how to fill columns

column-gap

Specifies the gap between the columns

column-rule

A shorthand property for setting all the column-rule-* properties

column-span

Specifies how many columns an element should span across

column-width

Specifies the width of the columns

columns

A shorthand property for setting column-width and column-count

Now that we have our CSS list to work with we can start styling our pages. First we are going to go ahead and cover some inline CSS, although it has been used throughout this guide I haven't really gone to far in depth about it. Inline CSS is CSS that is used inside each individual elemental, here are a few examples of inline CSS. Each of these examples will go over how the CSS is working with the elelment to style the page.

First we will start with the style attribute

Code:

This is an example if inline CSS, when using the style attribute to add CSS to an element remember to always wrap the property in double quotes. The CSS in the style attribute is set up in a way that it is {property}{colon}{value}{semicolon}. this may be repeated as many times as you'd like for each additional property. It is important to remember to always trail the last value with a semicolon otherwise it will mess up the page.

Now we will talk a little more about internal CSS. Internal CSS uses classes and IDs to pass CSS from the <style> element in the head to individual elements or groups of elements in the body of the document. A side note, <style> is both an element and an attribute, and while the style attribute is a global attribute it cannot be used in the <style> element. We are going to use the <style> element to create CSS in the head of the document and then afterword we are going to call this CSS from the body.

Code:

<style>

div.para {

background-color:red;

color:white;

margin:20px;

padding:20px;

}

p {

background-color:white;

colo:blue;

margin:20px;

padding:20px;

]

#para3 {

background-color:blue;

color:white;

margin:20px;

padding:20px;

}

</style>

This can be used to define styles for the entire document and most webpages uses severl ID's and classes in conjunction with one another to get the best looking results. for the previous style example we woould need elements within the boday that can handle these elements.

[code]<body>

<p>This is going to be displayed using the CSS style of the class <q>para</q> in the head of the document</p>

</div>

<p>This will be displayed using the paragraph style listed in our CSS. This is because it isn't in a div container or using any special ID.</p>

<p id="para3">This will be displayed using the CSS para3 in our head, this is because individual tags override any container CSS we have on the parent element.</p>

</div>

</body>

Now that we have establised a working understanding of how CSS works with IDs and classes we can put our page together and check out what we have done so far. I am going to provide a full webpage covering as many aspects from this tutorial as I can and use CSS to style it and make it look nice.

Code:

<!DOCTYPE html>

<html>

<head>

<style>

ul#nav li {

display:inline;

}

body {

background-image: url("https://hackforums.net/images/modern_pl/mosaic.png");

background-attachment: fixed;

background-repeat: repeat-xy;

color:white;

}

div.finish {

text-align:center;

width:70%;

}

#fin01 {

background-color:red;

color:white

border:1px solid black;

padding:5px;

}

#fin02 {

background-color:white;

color:blue;

border:1px solid black;

padding:5px;

}

#fin03 {

background-color:blue;

color:white

border:1px solid black;

padding:5px;

}

</style>

</head>

<body>

<li><a href="https://hackforums.net/forumdisplay.php?fid=134" target="frame">Suggestions and Ideas</a></li>

<li><a href="https://hackforums.net/forumdisplay.php?fid=140" target="frame">Ub3r Support</a></li>

</ul>

<legend>About You</legend>

<legend>Are you learning a lot from this turorial?</legend>

<input type="radio" name="radio" value="radio2">No

</fieldset>

</form></p>

<p id="fin01">After a long hard battle we are finally nearing the end, it has been a long journey with you.</p>

<p id="fin02">I have enjoyed writing this tutorial, even though it took a crazy long time to write I dont think it will take as long to read.</p>

<p id="fin03">This is the last project, the next section will just be a breif rundown of all the HTML tags, just to make sure we get them all.</p>

</div>

</body>

</html>

Given the elements I couldn't make it look very good, maybe you can do better? Let's see your work too. Now for external CSS, the one thing we have yet to cover. External CSS uses a stylesheet linked in the header, everything we just stuck in the <style> tag in the last example, is exactly how it will go in the stylesheet. Stylesheets can have any name, but must always have the .cc extension. If we want to link them to our webpage so we can use them on our document we would just need to link them in the header. The rest of the document stays the same, just easier to manage without the CSS in it.

Code:

And last but not least we finally get to the tags, I will have each tag listed in a code box and with it will be a usage example. I will try to cover as many as I can, but only as far as the character count will let me.

Code:

[b]<!--[/b]>

This is used for commenting in HTML, this will not show up in the browser display.

Code:

<!DOCTYPE>

This is for the DOCTYPE declaratioon, for HTML5 we just use <!DOCTYPE html>

Code:

<a>

This is used for links. <a href="link here">YOUR LINK</a>

Code:

<abbr>

This is used to abbreviate phrases and words.

Code:

You can use this when adding an address, and it will italicize the address.

Code:

<area>

The <area> tag is part of the image mapping tool in HTML

Code:

The article tag is used to disply independent, self-contained information.

Code:

<aside>

The <aside> tag defines some content aside from the content it is placed in.

Code:

<audio>

This is used to play audio through the browser.

Code:

<b>

<b> is used to make text bold

Code:

<base>

The <base> tag defines the base URL for the document and can shorten links being used for resources.

Code:

<bdi>

Bi-directional Isolate is used to keep text in formatting and to keep it from being messed up by the browser.

Code:

<bdo>

Bi-directional Overide forces the text to follow a specific format.

Code:

This is used for quoting large blocks of text.

Code:

<body>

This is the main content block element, what you see on a webpage is all contained in the <body> element.

Code:

<br>

This is used for a line break

Code:

This is used to create a button, you can use CSS to make the button look nicer.

Code:

The <canvas> tag is used to draw graphics, on the fly, via scripting

Code:

The <caption> tag defines a table caption and must be inserteed immediately after the <table> tag.

Code:

<cite>

<cite> is used to cite a source for information, these will not show up but can be read by viewing the page source.

Code:

<code>

Used to define computer code.

Code:

<col>

This is to determine columns in tables.

Code:

This is used to cover groups of columns in tables.

Code:

This is used to provide an autofill option on <input>

Code:

<dd>

This is used to describe a list item in descriptive lists.

Code:

<del>

The <del> tag defines text that has been deleted from a document

Code:

<dfn>

This is used as a defining term.

Code:

The <dialog> tag defines a dialog box or window.

Code:

<div>

This is a block level element that is used to contain several elements within one or multiple parts of the document.

Code:

<dl>

This is used to define a descriptive list.

Code:

<dt>

<dt> is used to define a term in a descriptive list.

Code:

<embed>

This is used to create a container for external content.

Code:

This is used to generate a named border around forms.

Code:

This will add a caption to a <figure> element

Code:

The <figure> tag adds self contained content to the webpage.

Code:

This will display information in the bottom of the page, often used for contact info and copyright info.

Code:

<form>

With this you can create a webform to send to a server

Code:

These are the headers, each getting progressively smaller.

Code:

<head>

This is the top of the document, the part usualy contains the <title> and <meta> tags.

Code:

<hr>

This will make a horizontal rule accross the webpage

Code:

<html>

This defines the document.

Code:

<i>

This will italicize text.

Code:

This allows you to display a webpage within a webpage in a neat box.

Code:

<img>

This is used to embed images into the webpage.

Code:

<input>

<input> is used in conjuction with forms to take user input.

Code:

<ins>

The <ins> tag defines a text that has been inserted into a document.

Code:

<kbd>

The <kbd> tag is a phrase tag. It defines keyboard input.

Code:

This defines a border within a fieldset in a form.

Code:

<li>

This is a list item, for either ordered or unordered lists.

Code:

<link>

This is used to link external resources to the document such as CSS stylesheets.

Code:

<map>

This is used for image mapping

Code:

<mark>

The <mark> tag highlights text.

Code:

<menu>

The <menu> tag defines a list for different objects.

Code:

A selection in a menu.

Code:

<meta>

The <meta> provides metadata about the document, this can only go in the <head> tag.

Code:

<nav>

Can be used to define a navigation menu.

Code:

When you have javascript disabled this tells the browser what to display

Code:

This defines an embedded object such as a video or image.

Code:

<ol>

Ordered list

Code:

This is used to group options in a dropdown list.

Code:

This defines an ption in a drop down list.

Code:

<p>

The defines a paragraph in the body.

Code:

The <progress> tag represents the progress of a task.

Code:

<q>

This is used for quoting text in stricter documents.

Code:

<samp>

This provides a sample of computer code.

Code:

This is used to run javascript in the webpage.

Code:

The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

Code:

This is used to create a dropdown list.

Code:

This is used to identify multple resources for media elements.

Code:

<span>

The <span> tag is used to group inline-elements in a document.

Code:

<style>

The <style> tag is used to define CSS for one or more elements.

Code:

<sub>

This provies subtext.

Code:

<sup>

This provides supertext.

Code:

<table>

This is used to create a table with multiple rows and columns.

Code:

<tbody>

This is used to group the body content of a table.

Code:

<td>

This is the tabledata tag that displays table data.

Code:

This will provide a text area for user inout.

Code:

<tfoot>

This is used to group the elements in the footer of the table.

Code:

<th>

This defines the table header for any column.

Code:

<thead>

<thead> is used to group the elements in the header of a table.

Code:

<title>

This defines the page title, alternatively when used as an attribute can provide a hover box with info about what you are viewing.

Code:

<tr>

This is used to define a row in a table.

Code:

<ul>

Unordered List.

Code:

<var>

This will define a variable.

In conclusion I hope you learned a lot from this, I spent a lot of time working on it and expect it to be put to good use.

I want to give a special thanks to a certain member for letting me use the Dawn Sub-Forum to post this, that user is Ninetails.

Also want to give thanks to Ariana for being a postholder while I was getting the thread ready to go.

I want to thank the developers of the website CoolText since that site is where I got the sectional banners for this guide.

Here are some links to further your study of HTML and refine your skills as a web developer.

W3C HTML guide

Shayhowe HTML and CSS guide

CSS Reference

W3C CSS guide

GTA - SA All [PC] Game Missions Save Files, [Bonus Cheats]

The Beginners Guide to Private Investigation

The Ultimate Social Media Image Size Guide for 2018 [Infographic]

[Tutorial]The Ultimate HTML Guide, Including a Large Section on CSS

Post a Comment

0 Comments

Statscount

Trending Posts

The Beginners Guide to Private Investigation