Jump to content


Check out our Community Blogs

ethikz

Member Since 30 Aug 2010
Offline Last Active Mar 12 2013 05:08 PM
-----

#578056 A Simple Journal Website using HTML with CSS: part 1

Posted by ethikz on 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

  • 1


#577418 Happy Birthday CodeCall!

Posted by ethikz on 20 October 2010 - 01:05 PM

Well I was looking for programming forums in Google and I think this was in the Top 5 so I clicked, I saw, I registered and here I am :)
  • 1


#576772 Can a programmer code a website from a customer's outline?

Posted by ethikz on 16 October 2010 - 12:17 PM

Well generally they can grab the basics. If you create mockups of the website for every page and through detailed writing what every page's content shall be that should speed it up.
  • -1


#576567 Complete Guide to Setup a Linux Server - Part 1

Posted by ethikz on 13 October 2010 - 01:44 PM

Part 1 : Pre-Installation

If you don't have Ubuntu Server then you should download it. I downloaded Ubuntu 10.10 64 bit. You need to know if your processor is 32 or 64 bit before decided which to download. To determine what kernel and CPU architecture in Linux, simply type the following code from the terminal:

For Kernel 32 or 64 type: (just copy and paste)
uname -a

My output: Linux ethikz-laptop 2.6.35-22-generic #34-Ubuntu SMP Sun Oct 10 09:26:05 UTC 2010 x86_64 GNU/Linux (states that I have a 64 bit Kernel). If you see i386-i686 then you need a 32 bit kernel.

For CPU 32 or 64 type: (just copy and paste)
grep flags /proc/cpuinfo

My output: flags : fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush dts acpi mmx fxsr sse sse2 ss ht tm pbe syscall nx lm constant_tsc arch_perfmon pebs bts rep_good aperfmperf pni dtes64 monitor ds_cpl est tm2 ssse3 cx16 xtpr pdcm sse4_1 xsave lahf_lm

flags : fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush dts acpi mmx fxsr sse sse2 ss ht tm pbe syscall nx lm constant_tsc arch_perfmon pebs bts rep_good aperfmperf pni dtes64 monitor ds_cpl est tm2 ssse3 cx16 xtpr pdcm sse4_1 xsave lahf_lm

LM - Long Mode = 64 bit
Protected Mode = 32 bit

Once all of the above is determined then you can proceed with setting up a Linux Server.

Note: The Server version will not install a Graphical User Interface

To install a GUI you can just run the following command from your terminal (after installation): (just copy and paste)
sudo aptitude install x-window-system-core gnome-core

To install a GUI login then you can install GDM as well.

Part 2 to follow shortly
  • 1


#576331 tutorial requests

Posted by ethikz on 11 October 2010 - 02:03 PM

just keep me posted on how it goes and if you have anymore questions feel free to ask me
  • 1


#576304 tutorial requests

Posted by ethikz on 11 October 2010 - 09:44 AM

The easiest thing to do is to draw a black circle using the marquee tool and holding down the shift button to have a symmetrical circle. after you have the size you want right click and stroke with 1px black...then you can go to layer--layer style--outer glow..then after that..create new layer and go to render--lens flare
  • -1


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