HTML 102: Inline Call 2 CSS.

Beep squeak!

So to first recap on HTML 101, remember tabs and tags! Hopefully this will refresh your memory drive… I recognise that the last post did not recognise the tabs I keyed into it but now I have found a better way to communicate to Computer and hence communicate more splendidly with you all. Tabs are more important to your poor, unfocused human eyes on those frantically caffeine fuelled, noggin tearing expeditions, but should really be there nevertheless. (When I say tabs I mean the ‘tab’ key which causes indents. ‘Indents’ would probably be better to use but it doesn’t rhyme with ‘tags’ and I am a sucker for rhyme – and shameless reader pulling tactics.)

<DOCTYPE! html>
<html>
<head>
<title>...</title>
</head>
<body>
<h1>Describe What Is, Or Even What Is Not, To Follow.</h1>
<b>Something that emboldens your cyber persona.</b>
<p>Other details. (The 'otherness' acknowledged by the break from the information before.)</p>
</body>
</html>

Now that is out of the way, I’ll throw a few more ‘tabs your way’.

  • Website Link 
<a href="https://westermannah.wordpress.com"> Only place you will ever need 2B.</a>
  • Image 

Basically the image that appears is sourced (img src) from the internet (a right click, ‘copy image URL’ type job)

<img src="http://i579.photobucket.com/albums/ss236/ClintsBears/Chris%20Anderson%20NEW/_h0o8772-2072510.jpg"/>
  • Clickable Image to Link
<a href="URL">What the clicky bit will look like to viewer.</a>
<a href="https://westermannah.wordpress.com/">
<img src= "http://i579.photobucket.com/albums/ss236/ClintsBears/Chris%20Anderson%20NEW/_h0o8772-2072510.jpg"/>
</a>
  • Ordered lists (1,2,3…)
<ol>
<li>The brilliant first child</li>
<li>The mischievous middle monster</li>
<li>The last child: a bristled man, squirming around in the Pampers Omnipresent Oopsie, transfixed by the Care Bears mobile softly stroking the worrying wafts emanating from below.</li>
</ol>
  • Unordered Lists (bullet points…)
<ul>
<li>...</li>
<li>...</li>
</ul>
  • Listception
<ol>
<li>Some serious categorisation.
<ul>
<li>Far too organised.</li>
<li>Something rather unnatural about all this.</li>
<ul>
</li>
<li>etc. etc. you get the idea.</li>
</ol>

That’s enough of that. What about some Italian styling, from within the postmodern, post-war architecture that is HTML?? Yes you can insert some CSS styling right into the concrete steps of the ol’ <DOCTYPE! html> file.

Inline CSS

  • Notes to self. 

These can be dotted throughout the html document. To hide them from the reader, use the invisible ink of

<!-- comment -->
  • Font Size.

For this you need to use an attribute in the opening tag, like ‘href’ or ‘img src’, which tells Computer what is to lie within its outwardly defensive spikes >>>

<p style="font-size: 14px">Largish writing</p>
  • Font Colour 

HTML is written in American, so you have to discard lots of rubbish, like u’s and s’s for instance… 

 <h2 style="color: blue; font-size: 24px;">I'm Riding The Ocean Blue</h2>
  • Font Family
<li style="font-family: Verdana">This is pretty standard.</li>
  • Background Colour (it’s the War of Independence all over again)
<body style="background-color: white;">
<p style="background-color: black;">I spotted a zebra.</p>
</body>
  • Aligning the Text: Beginning, Middle or End?
<h2 style="text-align: center">Lackluster Figure Head.</h2>
<p style="text-align: right">Their subjects which could be left or right of the wing. It wouldn't make any difference.</p>
  • I Underline how I Boldly Italicise 
<p>I won't insult your <u>intelligence</u> with <b>too</b> lengthy an <i>explanation</i>.</p>

Anyway I’m going to plug myself into the bed socket now. Squeak beep.

Advertisements

One thought on “HTML 102: Inline Call 2 CSS.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: