Skip to content

Creating a Header for Your Page (part 1)

August 31, 2013

CLICK HERE FOR PART 2

This simple header uses css and html. To position the form and Text, I have used a div tag instead of table tag. Below is the code in html file.

      • <!DOCTYPE html>   //this tag is unnecessary. only used in html 5
      • <html>
      • <head>
      • <title>Web Developing: Explore and Discover</title>
      • <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>  
      • <link href = “css/front_page.css” media = “all” rel = “stylesheet” type = “text/css” />
      • </head>
      • <body>
      • <div class =”wrap_div”>    //colored blue. see picture below
      • <div class =”left”>    //place where the text is place. the one on the left
      • <h1>Web Developing</h1>   // this is colored gray
      • </div>
      • <div class =”right” >   //this div is colored pink that envelopes the form
      • <form name =”form_login” action =”index.html” action =”post” > // this is colored green
      • <pre>Username: Password:</pre>  //this uses css to position and change font properties
      • <input type =”text” name =”username”> // positioned in css
      • <input type =”password” name =”password”>   // positioned in css
      • <input type=”submit” value=”Log in” name =”submit”>  //also re sized and re positioned by css
      • //end of the tags…
      • </form>
      • </div>
      • </div>
      • </body>
      • </html>

 

 

header

The Header will adjust appropriately when the window is changed using min-width attribute from css

The Header will adjust appropriately when the window is changed using min-width attribute from css

I used classes id  and styled the body pre tags and also styled the form the input inside the form. Below are the code of css:

  • BODY
  • {
  • margin: 0px;
  • padding: 0px;
  • }
  • PRE
  • {
  • font-family: Consolas;
  • font-size: 12.7pt;
  • padding: 0px 0px 3px;
  • margin: 0px;
  • }
  • DIV.wrap_div
  • {
  • background-color: #4B43E6;
  • display: block;
  • clear: both;
  • padding: 0px;
  • margin: 0px;
  • width: 100%;
  • height: 127px;
  • min-width: 800px;
  • }
  • DIV.left
  • {
  • float: left;
  • margin: 0px;
  • padding: 0px;
  • background-color: #EB9E54;
  • }
  • DIV.right
  • {
  • float: right;
  • margin: 0px;
  • padding: 0px;
  • background-color: #EB54B3;
  • }
  • DIV.left H1
  • {
  • padding: 43px 7px 28px;
  • width: 346px;
  • background-color: #BDBCD8;
  • text-align: center;
  • margin: 0px;
  • color: #6C5E5E;
  • font-size: 34.8pt;
  • }
  • FORM[name=form_login]
  • {
  • background-color: #4BCE69;
  • width: 342px;
  • padding: 0px;
  • margin: 23px 0px 0px;
  • /*[empty]font-family:;*/
  • }
  • INPUT[name=username]
  • {
  • padding: 0px;
  • margin: 0px 0px 25px;
  • }
  • INPUT[name=password]
  • {
  • padding: 0px;
  • margin: 0px 0px 25px 27px;
  • }
  • INPUT[name=submit]
  • {
  • padding: 0px;
  • margin: 0px;
  • width: 100%;
  • height: 37px;
  • }

DOWNLOAD THE ENTIRE CODES HERE

I use stylizer 5 to get an interactive and view real time changes in my css.

header-stylizer

Advertisements

From → CSS, HTML, Project 1: Site

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

TurtleAndRobot.com

Children's Book Reviews

Malav Shah

official Web Site

My Road to Programming

The journey of how I taught myself to program.

paritoshmishra

Look at what's brewing up guys! we all are work in progress. So don't meander, lets micromesh everything and have candid conversation about every problem related to C, C++ and JAVA. We can rejuvenate the crinkled faces.

ProgramThat;

A simple guide to programming...

ITechonology

Information Techonology

Rahul's Work

My Work Tips and Tutorial on Various Tech.

Turnip Farmers

Kingdom Scans

Gigaom

Technology news, trends and analysis covering mobile, big data, cloud, science, energy and media

The Neighborhood

society online's social conscious

HarsH ReaLiTy

A Good Blog is Hard to Find

VentureBeat

News About Tech, Money and Innovation

retireediary

The Diary of a Retiree

50 Year Project

My challenge to visit 192 countries, read 1,001 books, and watch the top 100 movies

[BTW] : Ben Trube, Writer

Writer, Programmer, Singer

My Arch Walkthrough

Arch linux made easy

Don Charisma

because anything is possible with Charisma

SutoCom Solutions

Success & Satisfaction with the Cloud

%d bloggers like this: