We’re playing with HTML in The Internet Course this week as a part of looking at how the internet works. I like doing this because it gets our hands dirty with what goes on in the background. It also ties in to last weeks topic, the history of the internet, in that early web pages were largely coded this way. Nowadays many web pages are dynamically generated from backend databases through scripts, which is the way the Internet Timeline the class did last week works.
James, being totally on the ball, put together a page covering software that makes the web work. It’s nicely organized and consistent throughout. The way my browser displays it, the text runs right up to the edge of my monitor. As someone who used to work with typography, that bothers me. So I went and looked for a way to give it a margin. W3Schools is a great resource, but it wasn’t telling me exactly what I needed to know. I figured we would have to add <head></head> tags and put something between them. There’s also a <div> tag that could be used to define the column width, but I couldn’t get a left margin set. But the page from Stack Overflow gave me an idea. They used a tiny bit of CSS styling to give a margin to paragraph elements. What if instead of specifying the margin for p, we did it for body? So following the example they gave, I saved James’ page to my desktop, opened it in Notepad, and put this between the <html> and <body> tags:
<head>
<title>Software</title>
<style type="text/css">
body { margin-left:5em; margin-right:5em;}
</style>
</head>
Then I opened the document with Firefox and it had a good margin on both sides, like this:
That’s basically how I learned most of what I know about coding: copying and pasting bits from Q&As and tutorials and seeing what it does. Looking at source code helps too sometimes, although these days there’s usually a lot more than just HTML.
So, here is a question, what would this style look like if you added another element, say a style for image? Would you need to separate them with semicolons? Or is that what the curly brackets does? Would all the different styles you added there be used across the entire document?
Good question. I don’t actually know a lot about the syntax – I just copy what others do. By applying the styling to the body element, it covers the entire page, I think. I suppose you could add styling for images by adding a line of
img { parameters }
I’m not sure about the semicolons
Thanks for this! I’ll add it right now.