Posts Section

I’ve found two main ways to add a section on a web page to show shortened sections of posts. The first way is done just using html and css, and can take a little long. The second way is by using javascript to automatically load certain information from posts that are separate files. The javascript method is the more complicated of the two, so I will show that after the html/css method.

The layout for this section will be very similar to the list that I put in the sidebar on the right. The main difference is that instead of having each <li> element be a person, they will each be a post. For example:

<div id=”posts”>
<ul>
<li>
<h2 class=”gold-text”>Lorem Ipsum<h2>
<p class=”sub-logo”>October 28th, 2014</p>
<p>Lorem ipsum dolor sit amet, arcu in porttitor sit etiam nulla, euismod aliquam amet nisl, ligula tempor lobortis placerat condimentum. Montes a, mauris dolor, mauris morbi vestibulum facilisis turpis. Erat tincidunt ut ut tristique integer, velit dui luctus non, donec massa vestibulum justo nisl netus. Ullamcorper fringilla. Quis a, condimentum nibh non vitae, lorem fusce eius etiam, erat nunc tempor aliquam nec in, ac non eget fermentum morbi nostra. Turpis aenean vitae a eros volutpat. Sociis wisi tellus, ac magna fusce, aenean parturient qui vestibulum ut vitae nisl, semper leo faucibus odio lorem…</p>
</li>
</ul>
</div>

This would result in something like this:

You can use the same sort of css as with the list in the sidebar on the right and add more elements and get something like this:

But writing and changing all of that out would be very frustrating if you had to do it often. What if you could have all of that copying done with just one line of code though? Next week: javascript.

Main Content

To start off the content area I made a <div> with an id of “content-area” with two <div>’s inside of it, one with an id of “post-area” and the other “sidebar”. You can use whatever id you want, those are just what I used. Then, in my css file, I gave “content-area” some simple styling to set the heigh, width, margin: 0 auto, padding: 30px, and the background-color. Next I gave the two <div>’s inside “content-area” some simple styling, setting the total width of the two to no greater than the width of “content-area”, margin-top: 70px, and the area I want on the left the attribute float: left, and the are I want on the right the attribute float: right.

To start off I put a small list in the <div> on the right. For example, if  you had a company and wanted to list some of the higher ups (CEO, Chairman, President, etc.). My code for that was just an un-ordered list (<strong> is the same as using bold text):
<div id=”directors”>
<h2>Directors</h2>
<ul>
<li><strong>Design: </strong> John Smith</li>
<li><strong>Production: </strong> Ashley Johnson</li>
<li><strong>Communications: </strong> David Jones</li>
</ul>
</div>

Then I added some styling to each element so it looked nice. For the <ul> element I set the margin and padding to zero, and gave it a list-style of none, to get rid of any dots. Next I gave the <li> element styling of color (whatever color you want), line-height: 35px, border-bottom: 1px dotted color (whatever color you want), margin: 0px, and border-left: none. Lastly, a cool thing you can do with styling lists is change the styling of only the last item in a list. This is done by putting li:last-child as opposed to just li when specifying which element to style. In this case all I want to do is set it so border-bottom is none. Just a nice looking piece of styling.

At this point my page looks like this. (You can’t see the footer due to the image size, but it’s still there)

Next week I’ll finally actually get to adding a section for posts to that area.

Xampp and PHP

For this week I am actually going to take a quick break to go over switching to using a program called xampp and using PHP files instead of html.

In terms of what it allows you to do, xampp is pretty similar to using NetBeans for web programming. You can simulate hosting a website from your personal computer. One of the most notable differences is that you can use other file types, such as PHP, which stands for PHP: Hypertext Preprocessor (yes, part of the acronym is the acronym).

The main, and really only reason that I use php files is so that I can break up parts of multiple webpages that are the same into their own files and put a single line to include it whenever I need it, instead of having to copy all of that code each time.

For example, I can take all of the html code that it took to make my header, put it in a file in another folder, and replace its original spot with
<?php include ‘/includes/header.php’; ?>

This is a good tutorial for downloading and setting up xampp if you are using Windows. https://www.udemy.com/blog/xampp-tutorial/

The \xampp\htdocs\ folder location that it mentions is where you should put your current html and css files, after deleting whatever files are already in there. The html file that you want it to initially open to should be name index. That way when you type in localhost in your browser it will just go straight to your website.

To get started using php you’re going to need to open your index.html file in some code writing program, save it as a php type file in the same location (\xampp\htdocs\), and delete your index.html from that location. In my opinion, Notepad++ is the best program to use when editing php files, and webpage files in general. However, if you know of something else you would prefer using then feel free. After doing that you are ready to include php files to that one, or include it into other php files. No need to change any of the code within the file. Just know that any time you want to include files into another file, the destination file needs to be of type php in order to use that handy “include” function (<?php include ‘/includes/header.php’; ?>).

Finally, test it all out by taking some part of your code that is going to be repeated a number of times (I’d recommend something like a header or footer), creating a new php file with that code in it, and then putting the php include function with the directory location of that file (I recommend creating a folder in the htdocs directory to hold some group of files). If everything has been done correctly it should look just like the original home page that you had.

Footer

To start off making a footer I, to the surprise of no one, created a pair of <div> tags with an id of “footerwrap” to surround the whole area. Inside of that I created a pair of <footer> tags surrounding two more pairs of <div> tags, one with an id of “quickcontacts” and the class “float-left”, the other with an id of “links” and the class “float-right”, and both with the class “sub-logo”.

Inside of the “quickcontacts” <div> I put a few paragraphs with names and e-mails. Inside of the “links” <div> I put an un-ordered list with a few links to other websites. You could put whatever you want as small things inside of the footer, I am just using these two as examples of things that some sites use.

The styling for the footer was in many ways similar to that of the navigation bar. I set the height and width of “footerwrap” to 90px and 100% respectively, and gave it a background color. I then made the width of the <footer> tag area 900px and gave it margins of “0px auto” to keep it nice and centered.

Lastly I added some styling modifications to the list in the #links section:

#links ul{ list-style: none;}
#links li a{
text-decoration:none;
color: #fff;
}
#links li a:hover{ color: #efc100;}

Once this was all set in I had myself a simple footer:

 

Next time I’ll make it so I can put posts of some sort in the body of the page.