Griffiths web design based in Royston, Hertfordshire, United Kingdom


HTML and CSS for beginners – Part one

Author:   Michael Griffiths

Date created:   24 November 2016

[postpic=part1head.jpg class=center-block title=Learn HTML and CSS from the beginning alt=Learn the basics of building for the web style=width:100%;height:auto;display:block;][/postpic] [r][b][url=]HTML and CSS part two >>[/url][/b][/r] [hdmd][colour=ForestGreen]A brief introduction[/colour][/hdmd] [l]In this day and age everyone knows what a website is. No matter who you are its more than likely you’ve seen a few of them in your time. But how are they made? I’ve posted several more advanced tutorials and guides in the past about web development but this is my first article that looks at the very beginnings of a web page. I wanted it to be thorough so as a result it has become rather long. With this fact in mind the article has been broken down into sections.[/l] [l][b][colour=BlueViolet]Part one [/colour][/b]will be about HTML. We will cover the history of HTML, the syntax and some examples. [b][colour=BlueViolet]Part two[/colour][/b] will be about the syntax of HTML [b][colour=BlueViolet]Part three[/colour][/b] will be about making the webpages aesthetically pleasing by utilising Cascading Style Sheets, or CSS as it is more commonly referred to. [b][colour=BlueViolet]Part four[/colour][/b] is about selectors in CSS. How to select elements to style them. [b][colour=BlueViolet]Part five[/colour][/b] is about the CSS box model and the margin, padding and border properties of CSS. [b][colour=BlueViolet]Part six[/colour][/b] is about using CSS to position elements. [b][colour=BlueViolet]Part seven[/colour][/b] is about using CSS to create layouts for web pages.[/l] [l]I plan to add to this guide in the future to further improve it and make it more comprehensive. If you have any suggestions I’d love to hear them, or if you would like to contribute in some way then please get in touch.[/l] [l]You can use the form on my website or you can email me directly: []Contact me via my website[/url] [][/url] [/l] [hdmd][colour=ForestGreen]Hypertext Mark-up Language – HTML[/colour][[/hdmd] [hdsm][colour=ForestGreen]A very brief history of HTML[/colour][/hdsm] [l]HTML is the language of the World Wide Web. Its purpose is to structure the data contained within a document in such a way that is human readable. Before we go into the specifics of HTML I would like to briefly discuss a little of its history with you.[/l] [l]HTML, and the web itself, is the brain child of [b]Sir Tim Berners-Lee[/b] at CERN. In [colour=DeepPink]1991[/colour] he wrote a document entitled ‘HTML Tags’. In this document he proposed 18 tags that would become the very early basis of HTML, which could be used to write documents suitable for the web. This set of tags were intended solely for text based mediums so no image tags were born yet. In [colour=DeepPink]1994[/colour] the image tag was introduced with HTML 2.0 (this was approved as a standard in [colour=DeepPink]1995[/colour]). How the images were displayed on the web page was still extremely limited and the only attribute available was an alt tag for those who preferred not to view images or used browsers (the majority) that didn’t support images. Next came a way to format tabulated data. The humble table was born. The table was introduced with HTML 3.0. [/l] [l][b]NOTE:[/b] HTML 3.0 was never adopted as a standard but was released under development for a short while. After a while developers started to realise that the table could be exploited as a tool to layout web pages. So with this trend web pages moved from having elements stacked like a list to being able to lay them out more like printed media. With HTML 3.2 it became possible to set fonts, colours, place backgrounds behind your text and many other elements of presentation. The Web Designer was born. No longer was the page content “THE” most important part of the page. Presentation was paramount. (HTML 3.2 was published on [colour=DeepPink]May 5, 1996[/colour] and became the recommended version [colour=DeepPink]Jan. 14, 1997[/colour]) In the early days of the web the browsers were text based. Then the browsers began to evolve. It started with browsers like Mosaic. Then along came Netscape and Microsoft in the browser market. This lead to proprietary tags created by the browser vendors to give the user a better browsing experience. Some of the proprietary tags were included in later releases of HTML. However the proprietary tags caused a great many issues with website developers. Many tags would display in wildly different ways in different browsers and the proprietary tags would only display in specific browsers. Those involved with setting web standards – [b]W3C[/b] – thought there had to be a better way. They wanted to return to the roots of the Internet and divorce all the presentation from content. [colour=DeepPink]Dec. 1996[/colour] saw the release of the CSS Level 1 Spec as the start of the process of separating display from content. Subsequent releases of version 4 browsers began incorporating CSS support. In [colour=DeepPink]December of 1997[/colour] HTML 4.0 was published as a [b]W3C recommendation[/b]. This is when the web as we know it today really started to evolve. This combined with CSS really made the web a better place. Between HTML4 and HTML5 there was an attempt to combine HTML with XML which resulted in XHTML. This standard tried to enforce much stricter rules on writing the mark-up. This presented issues though as developers would be forced into rewriting the web page as XHTML was not backwards compatible. Unhappy with the lack of focus on rich web applications in XHTML, [b]the Web Hypertext Application Technology (WHAT) Work Group[/b] forms in [colour=DeepPink]2004[/colour] with members of [b]Apple, Mozilla, and Opera [/b]and publishes the first [b]HTML5[/b] draft four years later. By[colour=DeepPink] 2009[/colour] the XHTML team had disbanded in favour of joining forces with HTML5. HTML5 is the current version of HTML (Hypertext mark-up language), which is used for the structuring and presenting content out there in the wilds of the internet. The HTML5 specification was released in [colour=DeepPink]October 2014[/colour] with the intention of improving the language by adding new elements to improve the semantics of the web, i.e. [code]
, [/code] Also the new specification allowed for the use of the ‘latest’ multimedia and graphical content by the introduction of the following tags [code], , [/code] Although browser support is somewhat inconsistent all the major browsers support HTML5, just not all in the same way and not every element. Thankfully the good folks at [url=][/url] have provided some excellent documentation on which browsers support which elements. I hope you found this to be interesting and informative. In the next part of this guide we will look at the syntax of HTML. [/l] [b][r][url=]HTML and CSS part two >>[/url][/r][/b]

About the author

My name is Michael Griffiths, I am a website designer and developer and the owner of Griffiths Web Design. I am based in Royston, Hertfordshire. Most of my work is local, Hertfordshire, Cambridgeshire, Bedfordshire, Essex etc. but that’s not to say I won’t work elsewhere. One of the wonders of modern technology is remote working. So no matter where the client is located it is always possible to connect.

I specialise in creating ASP.NET webforms applications using C#. I use Microsoft SQL Server for database development and on the front end I use Html, CSS and JavaScript. I am also proficient in the use of jQuery and several CSS frameworks.

One of my greatest passions in life is learning. Which is why I chose to pursue a career in web design and development, technology is in a state of constant and rapid evolution which means there is always something new to learn. I also enjoy writing, both fiction and non-fiction.


Please feel free to leave a comment below:

David williamson

Thanks for sharing. A nice little run through of the history of html. I can't wait for part 2!

Michael Griffiths

Thank you for your kind words David.😀

Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page