The Ultimate HTML Guide, Including a Large Section on CSS

Ruggzee · Mar 28, 2022

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.

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
Intro to CSS
- Styles
- Blocks
- Classes
- Colors
CSS
Tags

Ruggzee · Mar 28, 2022

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.

HTML:

<!DOCTYPE html>
<html>
<head>
    <head contents>
</head>

<body>
    <body contents>
</body>

<footer>
    <footer contents>
</footer>
</html>

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.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Title</title>
    <style>
        h1 {color:red;}
        p {color:blue;}
    </style>
    <base href="domain.com/">
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
</html>

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.

HTML:

<!DOCTYPE html>

Other doctypes for different version of HTML are.
HTML 4.01 Strict

HTML:

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

HTML 4.01 Transitional

HTML:

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

HTML 4.01 Frameset

HTML:

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

XHTML 1.0 Strict

HTML:

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

XHTML 1.0 Transitional

HTML:

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

XHTML 1.0 Frameset

HTML:

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

XHTML 1.1

HTML:

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

Ruggzee · Mar 28, 2022

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

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Title</title>
    <style>
        h1 {color:red;}
        p {color:blue;}
    </style>
</head>
<body style="bgcolor:white;text-align:center">
    <h1>Body</h1>
    <p>This is the body</p>
</body>
</html>

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.

HTML:

<!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

HTML:

<!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

HTML:

<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

HTML:

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

Or

HTML:

<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

HTML:

<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

HTML:

<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.

Ruggzee · Mar 28, 2022

For this part of the tutorial we are going to be using the Lightbulb image being served on Symbianize'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

HTML:

<p><img src="https://www.symbianize.com/data/assets/logo/symbxflogo40.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.

HTML:

<p><img src="https://www.symbianize.com/data/assets/logo/symbxflogo40.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.

HTML:

<p><img src="https://www.symbianize.com/data/assets/logo/symbxflogo40.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://www.symbianize.com/data/assets/logo/symbxflogo40.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.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Title</title>
</head>
<body>
    <p style="text-align:left"><img src="https://www.symbianize.com/data/assets/logo/symbxflogo40.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://www.symbianize.com/data/assets/logo/symbxflogo40.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.

HTML:

<p><img src="https://www.symbianize.com/data/assets/logo/symbxflogo40.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.

HTML:

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

Circles are slighty different with a syntax of

HTML:

<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.

HTML:

<map name="lightbulb">
    <area href="https://www.symbianize.com/forums/users-feedback.74/" title="Users Feedback" shape="rect" coords="0,0,80,80">
    <area href="https://www.symbianize.com/forums/symbianize-bulletin.4/" title="Symbianize Bulleting" shape="rect" coords="80,0,160,80">
    <area href="https://www.symbianize.com/forums/contests-awards.15/" title="Contest & Awards" shape="rect" coords="0,80,80,160">
    <area href="https://www.symbianize.com/forums/general-chat.84/0" title="General Chat"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.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>
</head>
<body>
<map name="lightbulb">
    <area href="https://www.symbianize.com/forums/users-feedback.74/" title="Users Feedback" shape="rect" coords="0,0,80,80">
    <area href="https://www.symbianize.com/forums/symbianize-bulletin.4/" title="Symbianize Bulleting" shape="rect" coords="80,0,160,80">
    <area href="https://www.symbianize.com/forums/contests-awards.15/" title="Contest & Awards" shape="rect" coords="0,80,80,160">
    <area href="https://www.symbianize.com/forums/general-chat.84/0" title="General Chat"shape="rect" coords="80,80,160,160">
</map>
<p><img src="https://www.symbianize.com/data/assets/logo/symbxflogo40.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.

HTML:

<a href="https://www.symbianize.com/"><img src="https://www.symbianize.com/data/assets/logo/symbxflogo40.png" title="Lightbulb Title" alt="Lightbulb" style="width:160px;height:160px;"></a>

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

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

HTML:

<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

HTML:

<a href="https://www.symbianize.com/" target="_blank" title="Symbianize">Symbianize</a>

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

HTML:

<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.

HTML:

<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.

HTML:

<p>Ruggzee 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.

HTML:

<p>Paid sticky response</p>
<blockquote cite="https://www.symbianize.com/threads/the-ultimate-html-guide-including-a-large-section-on-css.665/">The Ultimate HTML Guide, Including a Large Section on CSS</blockquote>

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

HTML:

<!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>
<blockquote cite="https://www.symbianize.com/threads/the-ultimate-html-guide-including-a-large-section-on-css.665/">The Ultimate HTML Guide, Including a Large Section on CSS</blockquote>
</body>
</html>

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

HTML:

<form>
    form elements
</form>

Inside the <form> we have Form Elements

<input>
<fieldset>
<legend>

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>

HTML:

<input type="text" name="box1" value="Box 1">
<input type="text" name="box2" value="Box 2">
<input type="radio" name="radio1" value="radio1" checked>Radio 1
<input type="radio" name="radio2" value="radio2">Radio 2
<input type="submit" value="Submit">

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.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Quotes</title>
</head>
<body>
<form action="action">
<fieldset>
<legend>Boxxes:</legend>
<input type="text" name="box1" value="Box 1"><br>
<input type="text" name="box2" value="Box 2"><br>
<legend>Radios:</legend>
<input type="radio" name="radio" value="radio1" checked>Radio 1<br>
<input type="radio" name="radio" value="radio2">Radio 2
</fieldset>
<input type="submit" value="Submit">
</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.

Ruggzee · Mar 28, 2022

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

HTML:

<ul style="list-style-type:square">
<li>Item 1</li>
<li>Item 2</li>
</ul>

<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
</ol>[code]

You can also make nested lists where a list is inside of another list.
[code]<ul>
<li>Item 1/li>
<li>Item 2
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>

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

HTML:

<head>
<style>
ul#horizontal li {
    display:inline;
}
</style>
</head>
<body>
<ul id="horizontal">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</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.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
<style>
ul#horizontal li {
    display:inline;
}
</style>
</head>
<body>
<p>Nested List</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<p>Horizontal List</p>
<ul id="horizontal">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<p>Unordered List</p>
<ul style="list-style-type:square">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<p>Ordered List</p>
<ol type="i">
<li>Item 1</li>
<li>Item 2</li>
</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 Symbianize. To add a link, just add the Link tag <a href="link">list item</a> around the list item you want to be linked.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Navigation Lists</title>
<style>
ul#nav li {
display:inline;
}
</style>
</head>
<body>
<p>Vertical Nav</p>
<ul style="list-style-type:none">
<li><a href="https://www.symbianize.com/forums/users-feedback.74/">Users Feedback</a></li>
<li><a href="https://www.symbianize.com/forums/symbianize-bulletin.4/">Symbianize Bulleting</a></li>
<li><a href="https://www.symbianize.com/forums/general-chat.84/">General Chat</a></li>
</ul>
<p>Horizontal Nav</p>
<ul id="nav">
<li><a href="https://www.symbianize.com/forums/users-feedback.74/">Users Feedback</a></li>
<li><a href="https://www.symbianize.com/forums/symbianize-bulletin.4/">Symbianize Bulleting</a></li>
<li><a href="https://www.symbianize.com/forums/general-chat.84/">General Chat</a></li>
</ul>
</body>
</html>

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.

HTML:

<table>
<tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
</tr>
<tr>
    <td>row 1,1</td>
    <td>row 1,2</td>       
    <td>row 1,3</td>
</tr>
<tr>
    <td>row 2,1</td>
    <td>row 2,2</td>       
    <td>row 2,3</td>
</tr>
<tr>
    <td>row 3,1</td>
    <td>row 3,2</td>       
    <td>row 3,3</td>
</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.

HTML:

<table id="table">

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

HTML:

<!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>
<table id="table">
<tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
</tr>
<tr>
    <td>row 1,1</td>
    <td>row 1,2</td>       
    <td>row 1,3</td>
</tr>
<tr>
    <td>row 2,1</td>
    <td>row 2,2</td>       
    <td>row 2,3</td>
</tr>
<tr>
    <td>row 3,1</td>
    <td>row 3,2</td>       
    <td>row 3,3</td>
</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.

Ruggzee · Mar 28, 2022

Iframes are used to dispaly a webpage within a webpage inside of a box. To display an iframe of Symbianize we would use
{code]<iframe src="https://www.symbianize.com/></iframe>

HTML:

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://www.symbianize.com/" name="frame"></iframe>
<a href="https://www.symbianize.com/members/" 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

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Iframes</title>
<style>
ul#nav li {
display:inline;
}
</style>
</head>
<body>
<iframe src="https://www.symbianize.com/" name="frame" height="400" width="100%"></iframe>
<ul id="nav">
<li><a href="https://www.symbianize.com/forums/users-feedback.74/">Users Feedback</a></li>
<li><a href="https://www.symbianize.com/forums/symbianize-bulletin.4/">Symbianize Bulleting</a></li>
<li><a href="https://www.symbianize.com/forums/general-chat.84/">General Chat</a></li>
</ul>
</body>
</html>

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.

HTML:

<p>"symbol code"</p>

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

Code:

Some Mathematical Symbols Supported by HTML
Char Number Entity Description
∀ &#8704; &forall; FOR ALL
∂ &#8706; &part; PARTIAL DIFFERENTIAL
∃ &#8707; &exist; THERE EXISTS
∅ &#8709; &empty; EMPTY SETS
∇ &#8711; &nabla; NABLA
∈ &#8712; &isin; ELEMENT OF
∉ &#8713; &notin; NOT AN ELEMENT OF
∋ &#8715; &ni; CONTAINS AS MEMBER
∏ &#8719; &prod; N-ARY PRODUCT
∑ &#8721; &sum; N-ARY SUMMATION
 
Some Greek Letters Supported by HTML
Char Number Entity Description
Α &#913; &Alpha; GREEK CAPITAL LETTER ALPHA
Β &#914; &Beta; GREEK CAPITAL LETTER BETA
Γ &#915; &Gamma; GREEK CAPITAL LETTER GAMMA
Δ &#916; &Delta; GREEK CAPITAL LETTER DELTA
Ε &#917; &Epsilon; GREEK CAPITAL LETTER EPSILON
Ζ &#918; &Zeta; GREEK CAPITAL LETTER ZETA
 
Some Other Entities Supported by HTML
Char Number Entity Description
© &#169; &copy; COPYRIGHT SIGN
® &#174; &reg; REGISTERED SIGN
€ &#8364; &euro; EURO SIGN
™ &#8482; &trade; TRADEMARK
← &#8592; &larr; LEFTWARDS ARROW
↑ &#8593; &uarr; UPWARDS ARROW
→ &#8594; &rarr; RIGHTWARDS ARROW
↓ &#8595; &darr; DOWNWARDS ARROW
♠ &#9824; &spades; BLACK SPADE SUIT
♣ &#9827; &clubs; BLACK CLUB SUIT
♥ &#9829; &hearts; BLACK HEART SUIT
♦ &#9830; &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

HTML:

<meta charset="UTF-8">

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

HTML:

<meta charset="UTF-8">
<meta name="keywords" value="html,tutorial,guide,symbianize">
<meta name="author" value="Ruggzee">

Ruggzee · Mar 28, 2022

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

HTML:

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

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

HTML:

<body style="text-align:right;font-family:verdana;color:green;backgroud-color:lightgrey;">

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

HTML:

<div id="main" style="background-color:green; color:white; padding:5px;">
    <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.

HTML:

<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.

HTML:

<div class="para1">
<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.

HTML:

<!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>
<div class="para1">
    <h2>Paragraph 1</h2>
    <p>This paragraph is using the para1 CSS class that we defined in the header of the document.</p>
</div>
<div class="para2">
    <h2>Paragraph 2</h2>
    <p>This paragraph is using the para1 CSS class that we defined in the header of the document.</p>
</div>
<div class="para3">
    <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

HTML:

<p style="background-color:blue">
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

HTML:

<p style="background-color:rgb(0,0,255)">
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

HTML:

<h2 style="background-color:#0000ff">
Background is blue
</h2>

Ruggzee · Mar 28, 2022

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

HTML:

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

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.

HTML:

<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>
<div class="para">
    <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>
<div class="para">
    <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.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>What we have done so far</title>
<meta charset="UTF-8">
<meta name="keywords" value="html,tutorial,guide,symbianize">
<meta name="author" value="Ruggzee">
<style>
ul#nav li {
    display:inline;
}
body {
    background-image: url("https://www.symbianize.com/data/assets/logo/symbxflogo40.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>
<p><iframe src="https://www.symbianize.com/" name="frame" height="400" width="100%"></iframe></p>
<p><ul id="nav">
<li><a href="https://www.symbianize.com/forums/users-feedback.74/">Users Feedback</a></li>
<li><a href="https://www.symbianize.com/forums/symbianize-bulletin.4/">Symbianize Bulleting</a></li>
<li><a href="https://www.symbianize.com/forums/general-chat.84/">General Chat</a></li>
</ul>
<form action="action">
<fieldset>
<legend>About You</legend>
<input type="text" name="box1" value="Username"> <input type="text" name="box2" value="UID"><br>
<legend>Are you learning a lot from this turorial?</legend>
<input type="radio" name="radio" value="radio1" checked>Yes<br>
<input type="radio" name="radio" value="radio2">No
</fieldset>
</form></p>
<div class="finish">
    <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.

HTML:

<link rel="stylesheet" type="text/css" href="styles.css">

Ruggzee · Mar 28, 2022

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.

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

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

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

<abbr>
This is used to abbreviate phrases and words.

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

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

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

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

<audio>
This is used to play audio through the browser.

<b>
<b> is used to make text bold

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

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

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

<blockquote>
This is used for quoting large blocks of text.

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

<br>
This is used for a line break

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

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

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

<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>
Used to define computer code.

<col>
This is to determine columns in tables.

<colgroup>
This is used to cover groups of columns in tables.

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

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

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

<dfn>
This is used as a defining term.

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

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

<dl>
This is used to define a descriptive list.

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

<embed>
This is used to create a container for external content.

<fieldset>
This is used to generate a named border around forms.

<figcaption>
This will add a caption to a <figure> element

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

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

<form>
With this you can create a webform to send to a server

<h1> - <h6>
These are the headers, each getting progressively smaller.

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

<hr>
This will make a horizontal rule accross the webpage

<html>
This defines the document.

<i>
This will italicize text.

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

<img>
This is used to embed images into the webpage.

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

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

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

<legend>
This defines a border within a fieldset in a form.

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

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

<map>
This is used for image mapping

<mark>
The <mark> tag highlights text.

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

<menuitem>
A selection in a menu.

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

<nav>
Can be used to define a navigation menu.

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

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

<ol>
Ordered list

<optgroup>
This is used to group options in a dropdown list.

<option>
This defines an ption in a drop down list.

<p>
The defines a paragraph in the body.

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

<q>
This is used for quoting text in stricter documents.

<samp>
This provides a sample of computer code.

<script >
This is used to run javascript in the webpage.

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

<select>
This is used to create a dropdown list.

<source>
This is used to identify multple resources for media elements.

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

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

<sub>
This provies subtext.

<sup>
This provides supertext.

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

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

<td>
This is the tabledata tag that displays table data.

<textarea>
This will provide a text area for user inout.

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

<th>
This defines the table header for any column.

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

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

<tr>
This is used to define a row in a table.

<ul>
Unordered List.

<var>
This will define a variable.

Fr13nd5 · Apr 7, 2022

Thanks for the share TS pa bm na din

inno001 · Apr 13, 2022

Thanks for sharing po pa BM din

Markapii · Nov 1, 2022

Salamat TS! Baka may PDF type ka nito

hehe

AOV Rafuhii · Nov 1, 2022

Pa BM

The Ultimate HTML Guide, Including a Large Section on CSS

More options

Ruggzee

Amateur

Ruggzee

Amateur

Ruggzee

Amateur

Ruggzee

Amateur

Ruggzee

Amateur

Ruggzee

Amateur

Ruggzee

Amateur

Ruggzee

Amateur

Ruggzee

Amateur

Fr13nd5

The Patriot

inno001

Apprentice

Markapii

Amateur

AOV Rafuhii

Novice

Similar threads