Posted January 16th, 2015 by Jason N
So I haven’t posted anything since last month – and by extension last year, as it is now 2015, which promises to be my final year of high school. VCE swimming pool analogies, I’m ready for you now.
I haven’t done a whole lot in in the holidays, which are quickly diminishing – no music things or tutorial installments as yet, but as I keep saying, I’ll get to that eventually… I think.
Oh, and just so you know, I managed to achieve Year 11 Dux for 2014, entitling me to a $50 reduction in my year 12 textbook costs – hooray for me. Hopefully I’ll be able to maintain my standards this year.
On another note, I’ve been doing a lot of programming lately, which has been consuming a lot of my time. I’ve been experimenting with Rust, which is a very interesting language indeed. I like it – I like it a lot. In fact, with all this programming, you’ll find most of my activity here on GitHub where I host most of my programming projects.
That’s all for now. More blogging to come at a later date.Comments: just one | Filed under: life, school, technology | Tagged: 2015, dux, github, holidays
Posted November 15th, 2014 by Jason N
So having completed Part 1, Part 2, Part 3 and Part 4 of this series of web development tutorials, we’re finally able to actually construct a webpage. Now I said that we’d look at CSS in this tutorial, and we will, but first off let’s build a basic webpage that we can use to experiment with later.Comments: none yet | Filed under: tutorials | Tagged: css, html, properties, selectors, values, web design, web development
Posted September 18th, 2014 by Jason N
So having completed both Part 1 and Part 2 as well as Part 3 of this series of web development tutorials, we can now move on to discuss even more HTML elements. In the next part of this series, we’ll look at CSS, and finally make our webpages pretty.
The ‘Image’ element <img> allows us to embed images into our webpage. The image source is specified in the same way a link ‘href’ is, but the ‘src’ attribute is used instead:
<img src="image.png" alt="Non visual browsers see this">
The ‘alt’ tag specifies what to show if the image fails to load or cannot be shown. Note that the <img> tag is a void tag, and does not need closing. The images must be in a format readable by the browser, for example PNG, GIF or JPG.
The ‘Video’ element <video> allows us to embed videos into our webpage. This element acts similarly to the ‘Image’ element, and also has a ‘src’ attribute:
Your browser does not support <video>.
The ‘alt’ text is simply contained within the element, and will display on browsers that don’t support the element. Embedded videos must encoded in a way that the browser can understand, for example H.264.Comments: none yet | Filed under: tutorials | Tagged: audio, elements, form, html, image, table, video
Posted September 16th, 2014 by Jason N
Text-level semantic elements allow us to describe the meaning of text content in our document. We can say that some particular words are more important than others, that a line break should go here, that this bit here is a quote, etc. We won’t be discussing all of the elements that can be used, but we’ll cover the most important.
The anchor element
The anchor element is represented by the ‘a’ tag, and is displayed as a hyperlink which can lead to other webpages – creating that web of links you’ve heard that’s world-wide. The anchor element has a ‘href’ attribute which indicates the webpage to link to. It’s used like this:
Comments: none yet | Filed under: tutorials | Tagged: elements, html, tags, web development
<a href="someotherpage.html">This link takes you to some other page</a>
Posted September 14th, 2014 by Jason N
So having completed Part 1 of this series of web development tutorials, we can now begin to get some actual coding done, remembering of course that since we’re just using HTML and not CSS, we won’t be able to create a particularly attractive webpage, but we’ll at least have a foundation upon which we can further our knowledge.
We’ll start by examining the most basic HTML document usable practically. It looks like this:
<p>This is a paragraph.</p>
Paste that into a file with the extension ‘.html’, and open it up in your favourite web browser – you can use a program like Notepad++ to do this (just switch the language to HTML). Note that when you do this, your browser is directly interpreting the file itself – there’s no request to a server or anything, so this is purely client-side.Comments: none yet | Filed under: tutorials | Tagged: attributes, elements, html, tags, web design, web development