HTML Page Design

HTML Language

Page Design

With effective designs added to your page, you can make it visually appealing and easy to navigate.

Attributes

Attributes help to decorate your page by formatting your information in a specific way, like color or text alignment, most of the attributes can be applied to most of the tags we discussed. This will help to set specific requirements for your information. Use them to format your information when they don't need to be formatted in unison.



<div>

The <div> tag is very useful when formatting the page. By using it, you can break your page into smaller pieces, and format them individually. For example, you need the heading section to be formatted a specific way, you can use this tag to make the heading section a "block", and by using CSS, you can format it easily.

<!DOCTYPE html>
<html>
 <body>
  <p>A regular paragraph</p>
  <div>
   <p>A paragraph in a div without any formatting</p>
  </div>
 </body>
</html>

With divs, you can also break down your website to sections. For example, you can create a heading section, a navigation bar, main contents, and a footer:

<!DOCTYPE html>
<html>

  <!--
      ABACLES
      HTML Programming Tutorial
    -->
  <head>

    </style>

    <title>Abacles HTML Programming Tutorial</title>

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

  </head>

  <body>

    <div id="Container">

      <!-- Main Title -->

      <div id="Header">

	<a href="index.html"><img src="Abacles_Logo.png" length="225" height="132" alt="Abacles" /></a>
	<a href="index.html"><img src="Abacles.png" length="528" height="132" alt="ABACLES" /></a>

      </div>

      <!-- Navigation Menu -->
      <div id="Navigation Menu">

	<table class="menu">
	  
	  <tr>
	    <td><a class="navbutton" href="abacus.html">Abacus</a></td>
	    <td><a class="navbutton" href="tutorials.html">Tutorials</a></td>
	    <td><a class="navbutton" href="cpc.html">CPC</a></td>
	    <td><a class="navbutton" href="about.html">About</a></td>
	  </tr>
	  
	</table>

      </div>

      <!-- Main -->
      <div id="Main">
	
	<h1 align="center">HTML Programming Tutorial</h1>
	
	<!--Centered Image-->
	<div class="cimage">
	  <img src="HTML.png" width="450" height="425" alt="HTML" />
	</div>

	<hr />

	<!--Table of Contents-->
	<div id="Contents">
	  <h2>Table of Contents</h2>
	  <p>Here is a table of contents for our HTML Programming Tutorial:</p>
	  <table class="toc">
	    <tr>
	      <td><a class="button" href="html-intro.html">Introduction</a></td>
	      <td><a class="button" href="html-basics.html">Basics</a></td>
	      <td><a class="button" href="html-links.html">Links</a></td>
	    </tr>
	    <tr>
	      <td><a class="button" href="html-images.html">Images</a></td>
	      <td><a class="button" href="html-tables.html">Tables</a></td>
	      <td><a class="button" href="html-lists.html">Lists</a></td>
	    </tr>
	    <tr>
	      <td><a class="button" href="html-design.html">Design</a></td>
	      <td><a class="button" href="html-forms.html">Forms</a></td>
	      <td><a class="button" href="html-review.html">Review</a></td>
	    </tr>
	  </table>
	</div>

	<hr />

	<h2>HTML</h2>
	<p>HTML, Hyper Text Markup Language, is a programming language used to develop websites. 
In this tutorial, you will learn how to use HTML to create websites.</p>
	<hr />
	
	<h2>History of HTML</h2>
	<p>When Tim Berners-Lee invented the Web in 1989 in a European particle physics lab, CERN, 
and along with it, HTML as its publishing language. HTML later evolved into a complete system that made 
it extremely convenient for people to upload information to the Internet and communicate 
more efficiently.</p>
	<hr />

	<h2>Preparation: HTML Editor</h2>
	<p>Many of the things that you need to program with HTML are often already installed on your 
computer, such as a browser and editor. In Windows, you can simply use Notepad as the editor, just remember 
when you save a program, the Filename needs to be<br /> name.html<br /> For example:<br /> 
helloworld.html<br />In Ubuntu, you can use emacs, and the requirements for Filename is the same. 
To see your results and the webpage after you saved it as a .html file, simply open the file, 
by default it should be opened by a browser and the results should be displayed.</p>
	
      </div>
      
      <div id="Footer">
	<p>Abacles<br />2015</p>
      </div>

    </div>

  </body>

</html>



Internal and External CSS

CSS can help format your page by decorating it the way you want (as you saw in the above example). There are two ways to use CSS in your HTML program. One is internal, and one is external.

Internal CSS puts the CSS formatting in your HTML program. By now we are only using the body part of your HTML, now you can add a head part. Put the <head> tag (Opening and closing) before your body. Then to add your CSS, put the <style> tags, and inside them, you can write your CSS! Here is an example:

<!DOCTYPE html>
<html>
 <head>
  <style>
   body 
   {
      background-color:black;
   }
   p
   {
      font-family:arial;
      color:white;
   }
  </style>
 </head>
 <body>
  <p>Text</p>
 </body>
</html>
	  

This example will display the page with black background and "Text" with the font Arial in white. Internal CSS formatting is convenient when you have small amount of pages or each page requires individual formatting.

External CSS is a little different. You will need to save your CSS to a separate file. You will need to save the CSS as a .css file. Write your CSS as you would in the internal CSS example. Then, to put the CSS and apply it to the HTML program, instead of putting the actual CSS in the <style> tag, put <link rel="stylesheet" href="name_of_document.css" />. This will link your CSS to your HTML just the same as it would in the internal formatting. This is convenient when you have a lot of pages that you want to format the same way. You just need to link your CSS to every of your page.

external_css_formatting.css

body
{
   background-color:black;
}
p
{
   font-family:arial;
   color:white;
}

external_css.html

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="external_css_formatting.css" />
 </head>
 <body>
  <p>Text</p>
 </body>
</html>


class and id

By using the class attribute and the id attribute, you can easily format divs and other items in HTML. The class attribute, is used when you have a lot of the same item that you want to format the same way. For example, if you want to format the tables in you HTML in two ways, one with black background and one with white, you can just set up two classes of tables in your CSS:

table_bg_bw.css

table.black_background
{
   background:black;
   color:white; /*This is text color*/
}
table.white_background
{
   background:white;
   color:black;
}

class.html

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="table_bg_bw.css" />
 </head>
 <body>
  <table class="black_background">
   <tr>
    <th>Background</th>
    <th>Text</th>
   </tr>
   <tr>
    <td>Black</td>
    <td>White</td>
   </tr>
  </table>
    <table class="white_background">
   <tr>
    <th>Background</th>
    <th>Text</th>
   </tr>
   <tr>
    <td>White</td>
    <td>Black</td>
   </tr>
  </table>
 </body>
</html>

And when you are going to use the table, simply add the attribute: <table class="red_background"> The item that you apply the class on can be anything, including <div>

id is very similar to class. It is also an attribute that will help you to format something. For example, if you want the navigation column of a webpage (which, for example, is a div) to be colored red and limit the width of it, you can set its id to navigation_column, and create a section in your CSS to format this:

nav_col.css

div#container
{
   margin-left:150px;
   height:200px;
   float:center;
}
div#navigation_column
{
   background-color:red;
   color:white;
   width:15%;
   height:100%;
   float:left;
}
div#main
{
   height:100%;
   background-color:white;
   color:black;
}

id.html

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="nav_col.css" />
 </head>
 <body>
  <div id="navigation_column">
   <list style="list-style-type:none">
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
   </list>
  </div>
  <div>
   <h1>Main Content</h1>
   <p>Text text text</p>
  </div>
 </body>			
</html>

Note: the "div" in front of '#' is optional. This will format the <div>s with id="navigation_column"


Practice

Use <div> to create a navigation bar at the bottom.

Use <div> to create two sections side by side on the screen.

Use class or id to format a paragraph.


Tags

Tag Meaning
<div> Defines a division
<head> Defines the head of the HTML
<style> Used to apply CSS



<< Previous TOC Next >>