Web Design

--Success is the sum of small efforts, repeated day in and day out.--Robert Collier





An excellent starting point to learn the HTML and CSS is Trinket. From there, you can create your own web page and publish it. Images can be added to the project. Another excellent learning site is w3schools which goes through all elements of web design. Code studio has a whole web development course.

Useful Links:

  • Notepad++: a basic text editor, a step up from notepad, used to write HTML code
  • HTML: learning the code and formatting of HTML
  • Cascading Style Sheets(CSS): adding style to your page.
  • Interactive HTML Cheat Sheet
  • Web Development
  • Colors: HTML color codes

    • Some Rules of Web Design by Sharpened Products

    1. Simple is beautiful and well organized. Cramming too much into each page creates confusion.
    2. Make a good first impression: The overall look and feel of your site is the first thing your visitors will notice.
    3. Color selection can make or break a website. Choose a consistent palette of colors that don't clash and have a strong contrast between text and background.
    4. It is important that your website displays correctly on different screen sizes and devices. Using CSS media queries is a great way to implement responsive web design.
    5. Check your website regularly for typos, broken links, and images that do not load correctly.
    6. Write your code from scratch. If you use build your site from templates and pre-written scripts, you will be clueless when something goes wrong. If you code your own pages, you will have full control over how they look and act.

    Creating a Basic Web Page

    Element Code Result Try It
    Skeleton: the basic code needed to set up a webpage. It can be created as a text file and saved as .htm or .html <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    <h1>My First Page</h1>
    </body>
    </html> 
                
            
            
            Page Title
            
            
            
    This is a heading
    		Basic webpage Try It
    Content gets displayed in the body, using tags with p, br, h1-h10, can determine the size and placement of the text <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    </body>
    </html> 
                
            
            

            
    My First Heading
    
            
    My first paragraph.
    		Content Try It
    Color can be added to text and background by using CSS with brackets and RGB or hexadecimal values <!DOCTYPE html>
    <html>
    <body>

    <h4 style="background-color:#FF0000">
    Background-color set by using #FF0000
    </h4>

    <h4 style="background-color:#00FF00">
    Background-color set by using #00FF00
    </h4>

    <h4 style="background-color:#FFFF00">
    Background-color set by using #FFFF00
    </h4>

    <h4 style="background-color:#FF00FF">
    Background-color set by using #FF00FF
    </h4>

    <h4 style="background-color:#00FFFF">
    Background-color set by using #00FFFF
    </h4>

    </body>
    </html>
    		 
                
            
            

            
    
            Background-color set by using #FF0000
            
    

            
    
            Background-color set by using #00FF00
            
    

             
    
            Background-color set by using #FFFF00
            
    

            
    
            Background-color set by using #FF00FF
            
    

            
            Background-color set by using #00FFFF
    		Color Try It
    Images can be inserted, though controlling their placement requires tables or div's <!DOCTYPE html>
    <html>
    <body>

    <h2>Spectacular Mountain</h2>
    <img src="https://upload.wikimedia.org/wikipedia/.jpg" alt="Mountain View" style="width:304px;height:228px;">

    </body>
    </html> 
                
            
            
            
    Spectacular Mountain
    
            Mountain View
    		Images Try It
    Links are used to jump to other pages or parts of your site. They are coded with the <a> tag: <!DOCTYPE html>
    <html>
    <body>

    <p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>

    </body>
    </html> 
                    
                
                

                
    Visit our HTML tutorial
    		Links Try It
    Creating Rollover buttonw in CSS in HTML document head: should have style brackets .cssbutton
    {
    position: relative;
    font-family: Tahoma, Georgia, sans-serif, helvetica, arial;
    background: url(roll/over.jpg) no-repeat;
    white-space: nowrap;
    display: block;
    width: 100px;
    height: 28px;
    margin: 0 0 2px 0;
    padding: 0;
    }

    .cssbutton a
    {
    display: block;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    width: 100px;
    height: 28px;
    display: block;
    float: left;
    color: #ffffff;
    text-decoration: none;
    }

    .cssbutton img
    {
    width: 100px;
    height: 28px;
    border: 0
    }

    * html a:hover
    {
    visibility:visible
    }

    .cssbutton a:hover img
    {
    visibility:hidden
    }

    .cssbutton span
    {
    position: absolute;
    left: 5px;
    top: 5px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    }     		Place this where CSS menu will appear <div class="cssbutton">
    <a href="index.html"><img src="roll/down.jpg" alt="Home" /><span>Home</span></a>
    </div>
    <div class="cssbutton">
    <a href="menubar.html"><img src="roll/down.jpg" alt="Menu Bar" /><span>Menu Bar</span></a>
    </div>
    <div class="cssbutton">
    <a href="competition.html"><img src="roll/down.jpg" alt="Competition" /><span>Competition</span></a>
    </div>
    <div class="cssbutton">
    <a href="links.html"><img src="roll/down.jpg" alt="Links" /><span>Links</span></a>
    </div>     		Link to Freebits rollover code sample

    Text Editor web page: create your own

    Open Trinket HTML lesson page on your computer. Open a new file. Copy and paste, or, better yet, copy and type the code from the Skeleton code box of the table above. Save it.to your desktop as index.html. In Notepad++, hit Run, and launch in Chrome. Remember, the < and /> tags are needed on either side of your content, and the preferred format calls for indenting each subsequent element. You can add color and font styles, etc. in the head portion of the page, or link to a separate CSS file with the following code in the head of the page: <link rel="stylesheet" type="text/css" href="style.css"> . You can layout your webpage design on paper or use this online gridpaper

    Basic Webpage Design

    This segment of w3schools shows how to lay out a simple web page using divs: it is a single page with the style in the head of the page. This is a demo page created using this div style, which we will use to set up our web page. A bare layout of this page shows you how you can add elements in specific location, and the skeleton code gives you the code for the bare layout that you can copy and paste into a text editor.