Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

A Simple Journal Website using HTML with CSS: part 1

align

  • Please log in to reply
No replies to this topic

#1 ethikz

ethikz

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 105 posts

Posted 26 October 2010 - 03:51 PM

Ever thought about a journal you would like to have using HTML and CSS? Below I will show you how to do so using very simple code. In my web design class I had to design an journal based website using HTML and CSS techniques. The reason I decided to build this type of journal was because I wanted something simple and effective. I didn't need any type of plug-ins or rich features so instead of using Word Press I decided to write the code myself, plus it gives me more experience in writing code from scratch. The Simple Journal Website is just a website with documentation of dates and cities visited and different things done while traveling.

[COLOR="Blue"]<!--This is the type of document designation for W3C to check for coding errors-->[/COLOR]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

[COLOR="Blue"]<!--This is the head section which will contain any scripts that need to run and also any internal style sheets and also will contain the title of your web page-->[/COLOR]
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
    <title>My Trip Around the USA on a Segway</title> 

[COLOR="Blue"]<!--This is the code used to link an external style sheet which is defined by the link type-->[/COLOR]
<link type="text/css" rel="stylesheet" href="journal.css" /> 
  </head> 
  <body> 
 
[COLOR="Blue"]<!--This is where your content starts for the body of your web page, h1 is a header which is the biggest header type-->[/COLOR]
    <h1>Segway'n USA</h1>

[COLOR="Blue"]<!--This will start a new paragraph which wrap texts instead of using the line break code which isn't really ideal but can be used-->[/COLOR] 
    <p> 
      Documenting my trip around the US on my very own Segway! 
    </p> 
 
[COLOR="Blue"]<!--This is another header which is still big but smaller size than h1-->[/COLOR] 
    <h2>August 20, 2005</h2> 

[COLOR="Blue"]<!--The image tag is image source which defines where the display image is located, always include the alt tag in images or else it will not validate properly-->[/COLOR] 
    <p><img src="images/segway2.jpg" alt="Me any my Segway in New Mexico" /></p> 
    <p> 
      Well I made it 1200 miles already, and I passed 
      through some interesting places on the way:  
    </p> 
 
[COLOR="Blue"]<!--This is a code to give a summary about the table-->[/COLOR] 
    <table summary="This table holds data about the cities I visited on my travels.  I've included the date I was in each city, the temperature when I was there, and altitude and population of each city.  I've also included a rating of the diners where I had lunch, on a scale from 1 to 5."> 
    <caption>The cities I visited on my Segway'n USA travels</caption> 
        <tr> 
            <th>City</th> 
            <th>Date</th> 
            <th>Temperature</th> 
            <th>Altitude</th> 
            <th>Population</th> 
            <th>Diner Rating</th> 
        </tr> 
[COLOR="Blue"]<!--The class section you see attached to the td code is used for alignment purposes in reference to the table-->[/COLOR]
        <tr> 
            <td>Walla Walla, WA</td> 
            <td class="center">June 15th</td> 
            <td class="center">75</td> 
            <td class="right">1,204 ft</td> 
            <td class="right">29,686</td> 
            <td class="center">4/5</td> 
        </tr> 

[COLOR="Blue"]<!--Class cellcolor is used to identify the table will follow the formatting rules defined in the external style sheet designated by #cellcolor-->[/COLOR]
        <tr class="cellcolor"> 
            <td>Magic City, ID</td> 
            <td class="center">June 25th</td> 
            <td class="center">74</td> 
            <td class="right">5,312 ft</td> 
            <td class="right">50</td> 
            <td class="center">3/5</td> 
        </tr> 
        <tr> 
            <td>Bountiful, UT</td> 
            <td class="center">July 10th</td> 
            <td class="center">91</td> 
            <td class="right">4,226 ft</td> 
            <td class="right">41,173</td> 
            <td class="center">4/5</td> 
        </tr> 
        <tr class="cellcolor"> 
            <td>Last Chance, CO</td> 
            <td class="center">July 23rd</td> 
            <td class="center">102</td> 
            <td class="right">4,780 ft</td> 
            <td class="right">265</td> 
            <td class="center">3/5</td> 
        </tr> 
        <tr> 
            <td rowspan="2">Truth or Consequences, NM</td> 
            <td class="center">August 9th</td> 
            <td class="center">93</td> 
            <td rowspan="2" class="right">4,242 ft</td> 
            <td rowspan="2" class="right">7,289</td> 
            <td class="center">5/5</td> 
        </tr> 
        <tr> 
            <td class="center">August 27th</td> 
            <td class="center">98</td> 
            <td> 
                <table> 
                    <tr> 
                        <th>Tess</th> 
                        <td>5/5</td> 
                    </tr> 
                    <tr> 
                        <th>Tony</th> 
                        <td>4/5</td> 
                    </tr> 
                </table> 
            </td> 
        </tr> 
        <tr class="cellcolor"> 
            <td>Why, AZ</td> 
            <td class="center">August 18th</td> 
            <td class="center">104</td> 
            <td class="right">860 ft</td> 
            <td class="right">480</td> 
            <td class="center">3/5</td> 
        </tr> 
    </table> 
 
    <h2>July 14, 2005</h2> 
    <p> 
      I saw some Burma Shave style signs on the side of the 
      road today: 
    </p> 
    <blockquote> 
      <p> 
      Passing cars, <br /> 
      When you can't see, <br /> 
      May get you, <br /> 
      A glimpse, <br /> 
      Of eternity. <br /> 
      </p> 
    </blockquote> 
    <p> 
      I definitely won't be passing any cars. 
    </p> 
 
    <h2>June 2, 2005</h2> 
    <p><img src="images/segway1.jpg" alt="The first day of the trip" /></p> 
    <p> 
      My first day of the trip!  I can't believe I finally got 
      everything packed and ready to go.  Because I'm on a Segway, 
      I wasn't able to bring a whole lot with me: 
    </p> 

[COLOR="Blue"]<!--The below code is used to create an unordered list (which uses bullets instead of numbers)-->[/COLOR]
    <ul> 
      <li>cellphone</li>  
      <li>iPod</li> 
      <li>digital camera</li> 
      <li>and a protein bar</li> 
    </ul>

 
    <p> 
       Just the essentials.  As 
      Lao Tzu would have said, <q>A journey of a  
      thousand miles begins with one Segway.</q> 
    </p> 
  </body> 
</html>


If there are comments that you would like to see added please let me know or if there is anything that is unclear to you then please let me know and I will try to clear it up..the only thing you will not have in this code is the specific images, but you can include your own.


Attached images are what it looks like without the css

Part 2 - Stylesheet code

if you like this please +rep

Attached Thumbnails

  • My Trip Around th.png
  • My Trip Around th.png

Edited by ethikz, 26 October 2010 - 06:46 PM.

  • 1





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download