Feeds:
Posts
Comments

Posts Tagged ‘html’

Tidy Links

Sometimes, Gentle Reader, I think I may get just a tad over-obsessive about trivial annoyances.

How often have you grimaced, as I have, when someone's pasted a link into a blog-post or a comment, thus…

http…blah-blah-blah-blah/4bnkj/09/02/1955/knjknbjk%20/blah?list=blah-hL#Ah-BlahbjbvvbH

…where that "blah-blah" gobbledegook takes up two, three, or sometimes even four lines of text? Given my opening sentence, I'm assuming you've probably guessed that it bugs the hell out of me; with far more buggy-helly-ness than is probably normal or understandable. To be honest, on a bad day even a short link just pasted in instead of being enclosed in a nicely anchored link-tag can grate on my nerves somewhat, but even on my best days, those multi-claused monstrosities that take up several lines set my teeth on edge.

Well, I can't stop people posting the damn things, but following a minor bug with a redirect on pharyngula's log-in page a while back, I got to thinking about URLs and how I might be able to at least tidy the damn things up before they arrive on my own screen. (more…)

Read Full Post »

HTML & CSS Tables

Thinking it was about time I got on with the next instalment of my "How to build a website from scratch" series, I went and reread what I'd already done. I finished the last one, saying, "Next time, we'll be getting the header finished and sorting out the nav-bar, looking at a few ways to give a "button" effect to links; which will also introduce you to HTML lists, and possibly, in passing, to HTML tables."

Well, if you're at all familiar with my rather haphazard approach to life (predictability is nice in the science lab and transport-timetables, boring as all hell anywhere else), it might not surprise you to read that I'm kinda jumping ahead a bit, and going on to HTML tables and CSS table-like elements. Not that this post is part of that series, but the subject of table-like displays is going to appear in either the next post or the one after, so it will form a sort of adjunct to it. What brought this on was that I've run across two or three posts in the last couple of months, by people in the throes of the first joys of learning how to page-code, who'd independently discovered HTML tables as a way of displaying content (usually images) in a grid.

We should not do that. Ever.

In order to show you why you shouldn't do it, I'm going to, erm… do it, then tell you how you should do it. (My apologies to anyone reading this using a screen reader; I'm about to include several examples of non-tabular data in table format. Use this link if you'd like to skip that torment.)

So, okay here's a simple table containing six pictures with captions, in two rows of three: (more…)

Read Full Post »

On Posting Code

Since I've been doing a lot of coding-posts of late, I thought I'd take time out from the ongoing "How to build a website" thing, and do a short piece on how to display page-code; especially as regards doing so in a WordPress.com blog, since that poses a few extra difficulties over doing so on a self-hosted site, but also confers a large advantage.

First off, for much of what follows, you'll need to be editing the actual HTML of your post. To do this, instead of using the usual editor at https://wordpress.com/post, you'll need to go to the older version. To find that, go to the dashboard (click the little house-icon at the top right of your Stats page), and then PostsAdd New. When you get there, you'll see that there are two tabs; Visual and Text. You want the Text one.

And here's warning of an annoying quirk of WordPress. If you type an HTML entity into the text-editor—let's say, for instance, " so that a straight double-quote will appear in the final page, then switch to the Visual tab and back again, WordPress will have converted the thing into an actual straight double-quote. Which WordPress will then—bless its shrivelled, blackened heart—convert into a curly double-quote when it's displayed in the actual post. And we most certainly do not want to be including curly quotes in our code-examples. The upshot is that once you've begun editing the HTML, your best bet is to not ever click the Visual tab.

We'll start off with a short snippet we want to display in our post. How about, <span style="color:blue"> … </span>. Let's say, also, that we want it to be within a sentence, rather than display it as a separate paragraph. Just like I did, in fact. It's quite easy. Just replace the less-than signs with &lt; and the greater-thans with &gt;. Then replace the double-quotes with &quot;. Thus we end up with:

&lt;span style=&quot;color:blue&quot;&gt; &hellip; &lt;/span&gt;

… which will display in the page as:

<span style="color:blue"> … </span>. Job done.

And then there's URLs. If I put a URL in, WordPress automatically converts it into a link, like so:

https://theedixieflatline.wordpress.com

… but I may want to include a plain-text URL in a snippet of code, without it being converted. The easiest way I've found to do that is to replace the slashes with the HTML entity for a slash, like so:

http:&#47;&#47;theedixieflatline.wordpress.com

Which produces:

http://theedixieflatline.wordpress.com

(For readers who may have noticed that links on this blog are usually red; that's because I dislike the default green-with-dashed-underline effect, so I over-ride WP's stylesheet by putting my own style inline.)

But maybe we want to display larger blocks of code, including tab-spaces, which can't be shown in the usual fashion. (The browser, under most circumstances, converts tab-spaces to normal spaces.) The easiest way to do that in places other than WordPress is to use the HTML <pre> tag, thusly:

<p>Here's the CSS:</p>
<pre>
.blue {
	color:blue;
	}
</pre>
<p>And here's the HTML:</p>
<pre style="white-space:pre-wrap;">
	&lt;p&gt;The text &lt;span class=&quot;blue&quot;&gt;in this span&lt;/span&gt; will be coloured blue.&lt;/p&gt;
</pre>

Which produces:

Here's the CSS:

.blue {
	color:blue;
	}

And here's the HTML:

<p>The text <span class="blue">in this span</span> will be coloured blue.</p>

Note that because tab-spaces are reproduced by the browser when included in a pre element, you cannot tab-out your code as you normally would. There should be no tab-spaces in your code, between <pre> and </pre>, except those which you wish your readers to see.

But in WordPress, there's an even better option.

[code]
.blue {
	color:blue;
	}
<p>The text <span class="blue">in this span</span> will be coloured blue.</p>
[/code]

Produces:

.blue {
	color:blue;
	}
<p>The text <span class="blue">in this span</span> will be coloured blue.</p>

It's better for a couple of reasons. Firstly you get those numbered lines, which makes it easier to reference, and secondly, you don't have to replace characters with HTML entities. The tags are formed by actual greater- and less-than signs, the quotes by actual double-quotes, and so on, just as we would type them into an html document. But there's more.

For a quite impressive number of coding-languages, we can also have syntax highlighting, like so:

[code language="html"]
I'll insert some html here
[/code]

Which produces:

<div id="colours">
	<h2>Coloured Text</h2>
	<p>The text <span class="blue">in this span</span> will be coloured blue.</p>
	<p>The text <span class="green">in this span</span> will be coloured green.</p>
</div>

And we'd use [code language="css"] to show the appropriate CSS.

For more information on this technique, see this WordPress support page. I'll finish with just one more example: for really huge blocks of code, we can even do this:

[code language="css" collapse="true"]
lots {
	and lots
	}
of code {
	to be
	pasted here
	}
[/code]

Which—with "lots and lots of code" inserted—produces this:

body {
	background-image:url('../Pics/body-bg.png');
	background-repeat:repeat;
	background-attachment:fixed;
	background-color:black;
	}
a {
   outline:none;
	}
em {
	font-style:italic;
	font-weight:normal;
	}
strong {
	font-style:normal;
	font-weight:bold;
	}
em strong {
	font-style:italic;
	font-weight:bold;
	}
strong em {
	font-style:italic;
	font-weight:bold;
	}
#header-wrapper {
	width:980px;
	height:108px;
	margin:10px auto;
	background-color:rgba(255, 160, 17, 0.75);
	background-image:url('../Pics/header-bg.png');
	background-size:970px 106px;
	background-repeat:no-repeat;
	background-position:center;
	border-radius:20px;
	border:5px solid #dbc81e;
	}
#header {
	width:980px;
	height:108px;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	}
h1 {
	color:#b70000;
	text-shadow:
	-1px -1px 0 yellow,
	1px -1px 0 yellow,
	-1px 1px 0 yellow,
	1px 1px 0 yellow;
	font-size:2.9em;
	word-spacing:.7em;
	font-family:'Courier New', Courier, monospace;
	}
h1 .small {
	font-size:.7em;
	}
#nav-wrapper {
	margin:0 auto;
	width:950px;
	}
#nav {
	text-align:right;
	}
#nav-list {
	margin:0 10px;
	}
#nav-list li {
	display:inline;
	margin-left:3px;
	}
#nav-list li span {
	font-family:'Times New Roman', Times, Georgia, serif;
	font-size:12pt;
	color:#dbc81e;
	border-top:1px solid #a62a2a;
	border-right:2px solid #a62a2a;
	border-bottom:1px solid #a62a2a;
	border-left:2px solid #a62a2a;
	border-top-left-radius:10px 50%;
	border-top-right-radius:10px 50%;
	border-bottom-right-radius:10px 50%;
	border-bottom-left-radius:10px 50%;
	padding:3px 8px;
	background-color:rgb(107, 0, 0);
	}
#nav-list li span:hover {
	color:yellow;
	border-top:1px solid yellow;
	border-right:2px solid yellow;
	border-bottom:1px solid yellow;
	border-left:2px solid yellow;
	background-color:#a62a2a;
	}
#nav-list li.u-r-here span {
	color:white;
	border-top:1px solid #9e630b;
	border-right:2px solid #9e630b;
	border-bottom:1px solid #9e630b;
	border-left:2px solid #9e630b;
	background-color:rgb(107, 0, 0);
	}
#nav-list li.u-r-here span:hover {
	color:white;
	border-top:1px solid white;
	border-right:2px solid white;
	border-bottom:1px solid white;
	border-left:2px solid white;
	background-color:#d57f13;
	}
#nav-list a {
	text-decoration:none;
	}
#content {
	width:940px;
	min-height:700px;
	padding:0 20px;
	background-color:rgba(158, 99, 11, 0.95);
	border-radius:20px;
	border:5px solid #dbc81e;
	margin:10px auto;
	font-size:11pt;
	font-family:'baskervald', 'Book Antiqua', georgia, 'Palatino Linotype', Palatino, serif;
	color:white;
	}
h2 {
	font-size:1.4em;
	font-weight:normal;
	margin:1em auto .75em 1em;
	}
p, blockquote {
	line-height:1.5em;
	text-align:justify;
	}
p {
	max-width:600px;
	text-indent:1.5em;
	}
blockquote {
	background:-webkit-linear-gradient(left, rgba(255, 160, 17, 0.3), rgba(255, 160, 17, 0.01)); /* For Safari 5.1 to 6.0 */
	background:-o-linear-gradient(right, rgba(255, 160, 17, 0.3), rgba(255, 160, 17, 0.01)); /* For Opera 11.1 to 12.0 */
	background:-moz-linear-gradient(right, rgba(255, 160, 17, 0.3), rgba(255, 160, 17, 0.01)); /* For Firefox 3.6 to 15 */
	background:linear-gradient(to right, rgba(255, 160, 17, 0.3), rgba(255, 160, 17, 0)); /* Standard syntax */
	border-radius:5px;
	margin-bottom:23px;
	max-width:600px;
	padding:5px 5px 5px 10px;
	margin-left:4em;
	}
#content a, #footer a {
	color:#dbc81e;
	}
#content a:visited, #footer a:visited {
	color:black;
	}
#content a:hover, #footer a:hover {
	color:yellow;
	}
#content a:visited:hover, #footer a:visited:hover {
	color:#dbc81e;
	}
a img {
	border:none;
	}
	p em, blockquote em, #content li em, .signiature, .captioned em {
	font-size:110%
	}
.captioned, .uncaptioned {
	width:600px;
	text-align:center;
	font-size:.75em;
	margin-bottom:1.5em;
	}
.captioned img {
	margin-bottom:1em;
	}
img.para-width {
	width:600px;
	}
pre.coding {
	background:-webkit-linear-gradient(left, rgba(107, 0, 0, 1), rgba(183, 0, 0, 0)); /* For Safari 5.1 to 6.0 */
	background:-o-linear-gradient(right, rgba(107, 0, 0, 1), rgba(183, 0, 0, 0)); /* For Opera 11.1 to 12.0 */
	background:-moz-linear-gradient(right, rgba(107, 0, 0, 1), rgba(183, 0, 0, 0)); /* For Firefox 3.6 to 15 */
	background:linear-gradient(to right, rgba(107, 0, 0, 1), rgba(255, 160, 17, 0)); /* Standard syntax */
	line-height:1.5em;
	white-space:pre-wrap;
	border-radius:8px;
	min-width:600px;
	max-width:900px;
	font-size:.9em;
	font-family:'Courier New', Courier, monospace;
	padding:5px 5px 5px 10px;
	}
.spaces {
	visibility:hidden;
	display:none;
	}
.tabs {
	font-size:15%;
	}
code {
	background-color:rgba(107, 0, 0, .2);
	padding:0 3px;
	font-size:110%;
	font-family:'Courier New', Courier, monospace;
	}
span.footnote {
	border-bottom:1px dotted yellow;
	}
#content ol, #content ul {
	margin-left:2em;
	}
#content li {
	width:575px;
	margin-bottom:.4em;
	}
span.signiature {
	margin-left:25px;
	font-style:italic;
	}
#footer-wrapper {
	width:980px;
	background-color:rgba(158, 99, 11, 0.95);
	border-radius:20px;
	border:5px solid #dbc81e;
	margin:10px auto;
	}
#footer {
	width:980px;
	padding:5px 0;
	color:white;
	text-align:center;
	font-size:.9em;
	font-family:'Courier New', Courier, monospace;
	}

On which rather gargantuan note, Gentle Reader, I shall leave you, in hopes of this having been of use to someone, somewhere.
Daz


You may use these HTML tags in comments
<a href="" title=""></a> <abbr title=""></abbr>
<acronym title=""></acronym> <blockquote></blockquote> <del></del>* <strike></strike>† <em></em>* <i></i>† <strong></strong>* <b></b>†

* is generally preferred over †

Read Full Post »

So far, in this "How to build a web-site from scratch" series, (all of which, by the way, is cross-posted on the web-site we're building) we've created the basic structure of the site (although it may not seem like it, if you're new to this), we've created a bare-bones page, and added a background image to it. We've also, along the way, discussed CSS, and how it should be used to add style to the page, but not to add information. Now we're going to look a bit more deeply at the structure of a web-page. And we're going to be covering, or at least skimming, a fair number of ideas in this episode, so let's get on with it…

Structure is created by HTML, and takes the form of boxes. Plain, boring, rectangular boxes. Everything you see on a web-page is either a box or is in a box; or, more often, is in a box within a box. The first one, we've already looked at: the body. That one's a bit special, because—unlike nearly everything else in a page, it's expanded, even if there's nothing in it. It automatically fills the entire browser-window.

The next level down, nested inside the body, is known as a div. Short, I assume, for "division." At the level we're going to be working with today, divs define the main areas of the window: the header-area where the main title goes, the bar, or maybe a side-bar, where the navigation buttons live, the main-content area where the, erm… main content sits, and the footer where stuff like copyright notices, stat-counters and so on, go. They can also sit, nested, inside other divs, creating little "style-islands," with particular styles targeted only at content placed within them, or as visible boxes with particular border styles, backgrounds, and so forth. We'll be looking at at least one application of that later. (more…)

Read Full Post »

And so we come to the second of my "How to build a website from scratch" series of posts. Last time, we covered how to create the document—the "boring" bits—and the supporting folder-structure. And I'm going to start with an addendum to that…

When explaining how to create UTF-8 documents, I left Linux-users in the lurch, somewhat, saying that "I tried googling it, but ran into the good old geeky-jargon barrier." So thanks to Ubuntu-user Ron for this bit, and I'll quote him verbatim:

  1. Open a terminal (haha) and create a web directory in your "home" folder:
    • mkdir -p www/files/common/pics
    • mkdir -p www/files/common/styles/fonts
      (Note: the "-p" switch lets you create all subdirectories in one go)

  2. Create the files
    • touch www/index.html
    • touch www/files/common/styles/CommonStyle.css
    • touch www/files/common/styles/CommonStyleIE.css

  3. Open "index.html" with your favorite (insert flame war here) text editor to enter the HTML code.

Which—if you'll allow me a short digression—led to me looking for a way to create multiple directories (folders) and sub-directories in one go, in Windows. Turns out you can do it with a batch file, but you need to put in complete folder-paths, from C:\ onwards. Much easier, is this nice little portable freeware dingus, Text 2 Folders. Later, I might see if I can find a way to create multiple files in those directories. That'd be nice!

(Also, notice that Ron created a document with the .html extension, rather than the .htm that I use. Either is fine, and there's no practical difference between the two. I began my page-code-deciphering experience by trawling through the source-code produced by M/S Word's "Save as web-page" option (don't try it—it's awful), and my habit of using the shorter version comes from Word's use of that form.)

But back to the topic in hand… (more…)

Read Full Post »

Here's a thing I just found out. If you're working on an html document on your desktop, then Firefox, by default, won't accept the "../" instruction to go up a directory, when—and only when—dealing with embedded fonts. So this:

<link rel="stylesheet" type="text/css" href="../Common/Styles/Fonts/stylesheet.css">

… won't work, while this:

<link rel="stylesheet" type="text/css" href="Files/Common/Styles/Fonts/stylesheet.css">

… will.

It'll accept that first one gladly if the site's online, but doesn't want to know if it's stored locally.

Fortunately, the solution's easy.

Type about:config in the url bar, and click the "I'll be careful" button when it appears.

Type, or paste, security.fileuri.strict_origin_policy into the search bar.

After it's found that preference, double click it, so that the "Value" field changes to "false."

And that's it. You don't even need to restart the browser. What an odd behaviour though.
Daz


You may use these HTML tags in comments
<a href="" title=""></a> <abbr title=""></abbr>
<acronym title=""></acronym> <blockquote></blockquote> <del></del>* <strike></strike>† <em></em>* <i></i>† <strong></strong>* <b></b>†

* is generally preferred over †

Read Full Post »

Building A Website: Part One

Something I've noticed in my stats, having posted the odd article or two on basic html/css, is the number of searches which land people here, asking for really basic advice. How to apply a background image, what are the "proper" sizes for headings (any bleedin' size you like; so long as it's contained in heading-tags, and looks like a heading), even a few asking how to create the document in the first place. Some of them, judging by the phrasing, are getting a little desperate. Phrases like "for dummies" and "jargon-free" appear now and again. I sympathise.

One of the drawbacks of using the intertubes as a learning tool is having to sort out, without aid from a teacher, the dross from the good stuff, without even, to begin with, any knowledge of the correct terms to search for. Google for the solution to some problem or other to do with browser-incompatibility for instance, and you're more likely to find outdated solutions for similar problems affecting a now-outdated version of Internet Explorer (just for instance, but IE does throw up more than its fair share of those problems) back in 2007, than you are to find your needed solution.

And if you're a newbie, and don't even know the precise terms you should be looking for? You find yourself staring at an internet message board full of people talking about methods and terms—that you were thinking yourself clever for having worked out just the day before—being "deprecated" or just plain wrong, posting snippets of code that may or may not be good, but you wouldn't know how to apply them if they are, and, all-in-all, seemingly assuming a huge amount of basic knowledge on the part of their readers. Oh, and the ubiquitous car-park-attendant type, who always shows up to tell the originator of the thread that "This question was answered on this thread [insert plain-text url here] way back in 1996. Why the hell didn't you do a search before wasting our time?"

So, chatty preambles now done, this is the first of a series of posts on a theme of "How to build a web-site from scratch," in which I'll assume that the reader has absolutely no prior knowledge. It won't be a fancy web-site—no JavaScript, no fancy drop-down menus which need millimetre-perfect mouse-control to navigate, no pop-up widgets for canvassing readers' opinions or inviting them to join the site; it won't offer, come to that, a way to create a site which can be joined. Just two or three web-pages, interlinked to form the nucleus of an ordinary site. Partly because I happen to dislike (over-use of) all those widgety things, and partly because you need to learn to walk before you can run; and trying to learn to breakdance before you can even take three steps is, frankly, silly.

(more…)

Read Full Post »

Older Posts »