The Building Blocks Of A Web Page
The architecture and construction of a website and its pages are crucial concepts for anyone looking to put together a website. There are so many bits and pieces of information that need to come together to make it work, that it could drive anyone mad.
HTML comprises the guts and framework of a website, while CSS – or cascading style sheets – give a page its interior and exterior style. When thinking about a house, CSS would be the paint, siding, and color of furniture, while HTML would be the structure and content of the house.
This week I created an “About Me” webpage using HTML instead of a WYSIWYG – What You See Is What You Get – editor. Using a simple framework of HTML, I began to see how a page could be setup and how it could be modified to my liking.
The HTML editor I use is called Sublime Text. It is a free editor that allows me to change the color of the background and see the code in a line-by-line setting.
The beginning set of tags allowed me to change the language and in the <Head> of the page, I was able to give my page a title. The title typically shows up in a browser tab. I gave my site a title of “Greg Wehner Bio.”
Then I got down to the body, where I created a header using the <H1> tag, inserted an image, and added my content in the form of paragraphs by using the <p> tag.
When I looked at the HTML code and then pulled up the http://mywebspace.quinnipiac.edu/gwehner site, everything looked linear, meaning, the page went from top to bottom. More could be done.
Looking at pages in a book, sometimes a person will see an image with text wrapping around it.
The code already included an image tag – <img src=”headshot.jpg” alt=”Photo of me” width=”600” height=”450”> – that could be tweaked a little more to get the image to do what I wanted it to do.
I started by aligning the image to the left of the page using <align=”left”>, and when the next paragraph started, it showed at the top of the page next to the photo. The problem was there was not much space around the image and the text was right on top of it. Using a style code, I was able to add a 10px buffer on the right, bottom, and left of the image.
Here is what the final code looked like:
<img src=”headshot.jpg” alt=”Photo of me” width=”600″ height=”450″ align=”left” style=”margin: 0px 10px 10px 10px”>
You may notice there are five numbers next to the margin style at the end of the code. These are for Top, Right, Bottom, Left, like a compass going North, East, South, West.
I also created a page in my file structure called “style.css”, which allowed me to modify the background of the page, color of the header and size of the text.
Using FileZilla – an FTP client that allows developers to upload code directly to their site structure – I was able to make modifications in Sublime, save the changes, and then drag and drop them directly into the mywebspace site file tree.
Every time I did that, I refreshed the page in the browser and reviewed the changes. If needed, I went back and made tweaks to the code and repeated the process.
At the end of the day, I was able to create an “About Me” page and style the page to look how I want.