Monthly Archives: September 2012

HTML is simple. So simple that at times that it’s a wonder that complex websites are built from HTML. Nonetheless if HTML had no depth it wouldn’t be as widely used. During the last few task I found plenty of tags and here I’ll be giving them a go myself- and this probably counts as just scratching the surface.

<br>: Inserts a line break.

<center>: centre-alignes text.

<b>: Makes text bold.

<font color=””>: Defines the font colour.

<u>: Underlines text. <i>: Makes text italic.

<font face=””>: Specifies the font style.

<table> : Inserts a table. <td>:

<input>: Used within a <form> element (which contains the url of where to send the information) to to allow user input information such as usernames.

<a> : Used to create links to webpages.

Other tags I’ve found in the previous task such as <meta>, <link>, <html> etc do not actually display on a webpage so I didn’t take screenshot of those. However this doesn’t they’re unimportant since what’s going on in the background in HTML is just as important as what people see.

HTML has evolved through out the years and thus many more advanced features have been tacked on to it by various people. While this is a good thing, considering that HTML can do more things then just basically define the content of the document, it has caused a lot of problems for web-designers. HTML tags can only be applied to a specify section, as websites need to look consistent you can imagine why it would be a headache for developers to type out <font colour> attributes for every heading in a multi-paged site. That’s when CSS comes in.

CSS is used to associate styles rules (or looks) to specific HTML elements. For example p{font-family: Arial} will make all the text in <p> (in other words paragraphs) have the Arial font. CSS rules are divided into to two sections: the selectors that indicates with HTML element the rule is applied to (‘p’ in this case is a selector) and the declarations which defines how the selector is styled (i.e. ‘font-face: Arial’). This obviously makes it much quicker for web-authors to style a particular element of the website whether it’s making all the headings red or indicating the font of every paragraph on the site. It can also be used to control the background colour and in CSS3, even the opacity of the backgrounds can be manipulated.

You can’t write a report about HTML without mentioning XHTML (released 2000) and HTML5 (work in progress). XHTML was created to make web authors follow more strict rules in order to build more compatible and effiencient websites. Rules include not using deprecated elements; closing tags must be used for every element and all attributes had to be in lower-cases. There were two versions of XHTML, the Strict XHTML (every rule must be follows) and Transitional XHTML (presentational elements like <center> could still be used). XHTML would be considered the ultimate version of HTML until HTML5 came along…

^XHTML had another strict rule that required elements to be well formed and placed.

HTML5 doesn’t require web developers to close all tags (they’re very bad about making their minds up about this) and adds new elements and attributes to HTML’s wide selection of tags. For instance you can now embed videos with the <video> and audio with <audio> tags whereas before you had to use Flash (which proved to be a compatibility nightmare). HTML5 is still in infancy but it’s already been utilised all over the web and predicted to replace the popular flash when it comes to adding multimedia to a website.

Javascript (not to be confused with is another essential web language for those who are serious about creating professional websites. Javascript is used to add interactivity to otherwise static webpages (the amount of interactivity you can add with HTML is limited); allow communication of data between browser and server; make things move on the website; reate forms (pop up windows that ask for your username, search boxes and the like). It is defined by the <script> tag in HTML. It is widely used to make dynamic websites that need constant update on information (i.e. Movie sites) or just highly interactive. Nearly all big sites utilise Javascript.

Tim Berners-Lee: A British computer scientist who is most known for inventing the world wide web. He is the director of the W3C and founder of the World Wide Web Foundation. Suffice to say Berner-Lee is the father of the web and hugely influential. Berners-Lee had a concept of a global system that would allow researchers all over the world share information while working at CERN in the 1980s. In 1989, Lee published his final concept titled ‘Information Management: A Proposal’ which detailed his idea for combining hypertext and the internet to build his revolutionary system: the World Wide Web. The first website was launched in 1991 (http://info.cern.ch); containing an explanation on the WWW and how to start a website. His vision to make the Web available to everyone in the world that W3C has successfully produced a standard set of protocols, used worldwide.

W3C: Founded by Tim Berners-Lee, W3C (World Wide Web Consortium) is an organisation that focuses on developing standards (HTML, CSS, SVG, WOFF etc) that allow developers to create interactive and web experiences. To achieve this the W3C employs over 300 staff, all on a mission- as stated on the W3C website– to ‘led the Web to its full potential’. It is also considered as an expansive and open forum for the community to have discussions relating to the Web. The W3C also pays much attention to education as they have a dedicated free website that teaches houses tutorials on web development (in fact it”s the largest web development site in the world). However some controversy surrounds W3C as they’ve been accused of being dominated by larger organisations and focusing on meeting their needs when creating standards. On the other hand W3C follows its own set of design principles and guidelines including making sure that everyone benefits from their work and making sure that everything is compatible on any device. In conclusion the organisation seeks to make the Web a place of trust, knowledge sharing and user participation. W3C standards are universal so everyone in the world can communicate with the same coding language.

Web authoring tools andsites: Adobe’s Dreamweaver is one of the most well know and versatile web design tools out there (meaning that there are many tutorials and extensions available). Panic Coda is another web development tool optimised for Mac OS X systems, it is praised for its clear and convenient interface- i.e tabbed interface. There’s also an extension named Diet Coda which allows users to edit websites on your Ipad. Whereas KompoZer is a free, open-source, community-based, web authoring tool. Text editors such as Notepad and TextEdit can be used to build basic websites as well but they do not have instant preview or other features compared to fully fledged web design tools. As learning the fundamentals of web coding is crucial to web design, tutorial sites such as previously mentioned W3school and Code Google are available for free.

.

Web Coding languages: Web coding is the building blocks of any website, there are a wide selection of web coding languages.

HTML (HyperText Markup Language)is made up of tags, text, comments etc contained in angled brackets (i.e. <b>) that usually come in pairs -opening and close tags. HTML’s functions are crucial to the look and interactive elements of a website: it’s used to embed images and object; change the appearance of text (<font color=”red”> is used to change font colour to red), organise the structure of writing (<h1>, <p> are used for headings and paragraph respectively) and much more. HTML is constantly under revision and one of the lastest one is HTML5.

XHTML (Extensible HyperText Markup Language) is, as the name suggests, an extension of HTML. In fact it’s almost identical to HTML 4.01. However there are some differences between the two such as the fact that XHTML is stricter (there must be a start tag to every end tag, while HTML doesn’t necessarily apply to this rule). XHTML was developed as a result of ‘bad’ HTML. Small devices such as mobiles and their browsers can not read or interpret ‘bad’ mark up language simply because they lack the power to do so. Therefore HTML was combined with XML (a markup language where the document must be well-formed and accurately) to produce XHTML. In layman’s terms, XHTML is HTML that undergone a XML make over (like teaching a impudent child manners).

HTML5 is the fifth revision of HTML. This revision seeks to make HTML compatible with the lastest multimedia whilst still maintaining eligibility for both human and computers. Many new features and tags were added, including <video>, <audio> and <canvas>. First to attention when Steve Jobs (Apple Inc) gave his opinions that HTML5 would replace Adobe Flash when it comes to implementing and consume media such as video.

CSS (Cascading Style Sheets) is used to style, look and format of documents written in markup language. HTML was never intended for design or formatting but rather it was just used for markup of content. Formatting tags (<font> etc) that were later added to HTML caused problems for developers since they had to add these tags to every page (proving to be both time consuming and expensive). So the W3C created CSS which allowed design and formatting to be separated in another file from the HTML document. CSS can be used as an external style sheet file (.ccs) or via an internal style sheet. You can even define your own CSS tags (id selector) with a ‘#’ before the name of your unique style which can be inserted in to a html document as tags.

PHP (PHP: Hypertext Preprocess) is a server-side scripting language (meaning that is executed on a server and then the results are sent back to you, the client). It is an open source software (and most importantly is free) that can be downloaded from php.net. More information about PHP is below.

JavaScript is considered as the scripting language of the Web. A haughty claim it may seem at first but the world’s most popular scripting language retains that title for a reason. Designed to add interactivity to HTML pages (using the <script> tag); enhance the interface of websites; manipulate CSS; reacting to events (such as what happens when the user clicks a button) etc. JavaScript’s syntax is simpler than other more complex programming languages such as C++ so it’s easier to learn and convenient for HTML editors (that aren’t necessarily programmers) that needs a programming tool.

XML (extensible markup language) is another markup language like HTML. However it’s designed for tranporting data not displaying data thus it shouldn’t be considered as a replacement. Web authors can define their own tags with XML as there is no set tags (unlike HTML), in fact there are several web languages created with XML: XHTML, SVG, SMILand MathML.

PHP FTP: PHP is used to produce dynamic web pages, creating forums, logins, picture galleries, surveys and even more tools (thus it is used to add more interactivity to websites). A PHP script starts with <?php and ends with ?>. Once someone visits a PHP website ,the PHP script is processed by your server, which then decides what is shown (i.e. images) and what is not shown (i.e. file operations) to the user. Before finally converting your PHP to HTML and sending the webpage back to the user’s browser. Due to PHP huge possibilities when it comes to online tools, PHP is widely used in websites (it’s installed in more than 20 million websites).

FTP (file transfer protocol) is, as its name suggests, used to transfer files over the internet using TCP/IP (a set of communication protocols) or from one computer to a another-usually a server. Its most common use is for downloading and uploadig files from and to severs. This is crucial for website creators because FTP is needed to upload websites created on the computer to the sever that will host the website. FTP can also update the files on a server.

HTML protocols: The list of HTML protocols are ever expanding and used for a variety of functions in web design. Tags are the key components of HTML and are used for a variety of tasks from making text red to creating paragraphs. <b> (make bold,<strong> is actually considered the better tag to use since it adds meaning), <font>, <p> (paragraph), <h1> to <h6> (defines heading), <img> (defines image), <!–> (defines a comment) are all HTML tags. All HTML tags should have both a start tag and end tag to ensure that there are no errors.

<meta> tags: Asides from the cool name <meta> tags are the hidden weapons of HTML (as well as being an anomaly since it’s a HTML protocol that has nothing to do with structuring or display). <meta> elements reside inside the header tag (<head>) and it isn’t visible to users. Instead <meta> elements are responsible for background tasks such as telling search engines about your web page, the creator of the said page and whether or not it’s set to expire. <meta> does not have any closing tags and relies on attributes to carry out the information. For example the name and content attributes can be used together to give a list of keywords users may search for on your page.

<meta> tags and SEO: Search engine optimization are ways that you can make sure your website appear higher in the search engine results. Naturally SEO is very important if you want your website to be visited and noticed. There are many ways of achieving this both off-page and on-page techniques are available. A on-page option is by using descriptions contained in <meta> tags, which can be used to provide a description of your web page. This will be used by search engines to figure out what your page is about, thus making it easier for people to search your site.