Griffiths web design based in Royston, Hertfordshire, United Kingdom

 

HTML and CSS

HTML and CSS for beginners – Part seven

[postpic=part7.jpg class=img-responsive center-block title=HTML and CSS for beginners part 7 alt=part 7 of HTML and CSS for beginners by Michael Griffiths of Griffiths Web Design style=][/postpic] [hdmd]Layouts in CSS[/hdmd] [l]For me one of the most important and useful aspects of CSS is its ability to create complex layouts that would otherwise not be possible. There was once a time when developers used HTML tables for layouts, but the less said about that dark time the better.[/l] [l]The best way to learn about layouts in CSS is to give it ago. At the same time we will be discussing positioning, media queries and several other aspects of CSS.[/l] [l]The layout we will create in this example will be responsive, which means this page will work nicely on an array of different screen sizes.[/l] [l]The layout will look like this on a large screen, such as a desktop computer or laptop.[/l] [postpic=layout.jpg class=img-responsive center-block title=A standard layout for a webpage alt=An extremely common layout, as seen on millions of websites. style=][/postpic] [l]As you can see from the image it is a fairly standard layout.[/l] [l]The header will contain the brand name / site name and it will also contain the navigation.[/l] [l]The main column is for your important content, the reason people will visit your site in the first place.[/l] [l]We also have a side column, this will contain the less important content which is not directly linked to the main content. For example it could house a secondary navigation or social media widgets.[/l] [l]Finally we have a footer. This will contain copy right information, contact details, links to site maps etc.[/l] [l]This layout is proven out in the wild of the internet. However when viewed on a smaller screen, like a mobile phone, there would be lots of side scrolling involved. Unfortunately, as human beings, we are quite a lazy bunch and only like to scroll in vertically.[/l] [l][b]Something to think about -[/b] I have seen some beautiful sites that have effectively used side scrolling to add to the experience of their site but those same sites had no vertical scrolling. The user had to scroll sideways to view the page. They also added some animations to the page that came alive as you scroll past them, which really enhanced the story telling. When you have the basics of css down to a tee then I would strongly suggest giving something like this a go, to push your craft to the next level.[/l] [l]Now back to our layout, as I said before we will be creating a responsive layout. So when viewed on a mobile the different sections of the page will rearrange themselves to fit nicely on a small screen. It will look like this:[/l] [postpic=layoutmobile.jpg class=img-responsive center-block title=Our layout on a mobile device alt=The layout of our webpage for smaller screens like mobiles and tablets. style=][/postpic] [l]As you can see from the very grey image the header and footer are still in the same place but this time the main column and side column are both the full width of the container, with the main column taking precedence over the side column at the top.[/l] [hdsm]The mark-up[/hdsm] [l]The first step to creating our layout is the mark up. We will create a div, with the id ‘wrapper’. This div will contain all of our elements that we will be adding, header, main column, side column and footer. In between the body tags of a HTML document add the following mark-up:[/l] [code]<div id="wrapper"> <header> </header> <section> </section> <main> </main> <footer> </footer> </div>[/code] [hdsm]Mobile first[/hdsm] [l]We will be designing our layout from small screens upwards, known as the mobile first approach. Many CSS frameworks take this approach, Bootstrap is a prime example of this (there will be more on bootstrap later on). To do this we need to use [b]media queries.[/b][/l] [hdsm]Media queries[/hdsm] [l]A media query is a way of telling the browser that if a certain condition is met then the browser should implement the styles listed within that media query.[/l] [l]Media queries consist of an [b]optional[/b] media type and according to the CSS3 specification can contain zero or more expressions which are expressed as media features. If the media type matches the device that the document is being displayed on and the expression equates to true then the styles listed within the media query will be applied. Within the media query the normal rules of cascade apply.[/l] [l][b]Note -[/b] when the browser downloads the css, it will download all of it. However it will only apply the style rules if the media query returns true.[/l] [l]The media queries we will be using will not contain a media type, instead they will only have an expression. A very simple but ultimately useful expression. We will be detecting the screen width and applying styles based on that detection. [/l] [l]So what are the sizes we are looking for? Well, unfortunately there is no right or wrong answer but the queries we will be using are fairly common ones. In fact the break points are the same as those used by the Bootstrap framework.[/l] [l][b]Note –[/b] Media queries won’t work in Internet Explorer 8. No problem if you do not plan to support older browsers but most of the time you will need to support them. To combat this there is a handy script around called ‘Respond.js’. This enables media queries in IE8. Remember the HTML5 shiv we added inside conditional comments? Well that’s where we need to declare this script because not all browsers will need it just that pesky IE. In the head section of your HTML document locate your conditional comments and add a reference to respond. You can either download the script or link to a ‘cdn’ (content delivery network). Personally I prefer linking to a ‘cdn’. The reason for this is because there is a strong possibility that the user already has it cached in their browser and therefore does not need to download it again. If you choose to download the file and include it in your project then every first time user of your site will have to download the file which will slow down page load times.[/l] [l]If you chose to link to a cdn then your conditional comments should look something like this:[/l] [code]<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->[/code] [l]Now we have enabled media queries in older versions of IE we can move onto the style sheet itself. First create an empty style sheet, a file with the extension ‘.css’. Call it whatever you like, I named mine ‘layout.css’. Then in the section of your HTML document add a link to the CSS file, like so:[/l] [code]<link type="text/css" rel="stylesheet" href="layout.css" />[/code] [l]This link to the style sheet assumes that it is in the same folder as the HTML document. If your style sheet was in a folder called ‘css’ then the url in the href attribute would be css/layout.css[/l] [l]We now have a CSS file linked to our HTML document so let’s add some media queries. Open up your css file and add the following code:[/l] [code]/* ****************************** ***styles for mobile and up*** ****************************** */ /* ************************ ***styles for tablet+*** ************************ */ @media (min-width: 768px) { } /* ************************************* ***styles for computer screens etc*** ************************************* */ @media (min-width: 992px) { } /* **************************** ***Styles for wide screen*** **************************** */ @media (min-width: 1200px) { }[/code] [l]As you can see there is no query for screens smaller than 768px wide. This was left out intentionally. The reason for this is that the mobile first approach we are taking. All of the small screen styles will be applied by default then if the screen size is bigger the appropriate queries will add to/ overwrite the styles declared outside of the media queries as necessary. [/l] [l]Now we have set up our media queries it’s time to write in some styles. Using the properties that we have discussed so far we can create a responsive layout for our webpage. Below you’ll see the complete CSS required to create our layout.[/l] [code]/* **************************** ***style sheet for layout*** **************************** */ /* ************ ***Resets*** ************ */ * { border: 0; padding: 0; margin: 0; } /* ****************************** ***styles for mobile and up*** ****************************** */ #wrapper { width: 100%; height: auto; overflow: hidden; overflow-y: scroll; position: relative; } header { width: 100%; height: 40px; padding: 15px; background: #000000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } main { width: 100%; padding: 5px; background: #ff0000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #sideCol { width: 100%; padding: 5px; background: blue; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer { clear: both; width: 100%; background: gray; height: 100px; } /* ************************ ***styles for tablet+*** ************************ */ @media (min-width: 768px ) { header { height: 70px; padding: 20px; } main { padding: 10px; width: 75%; margin: 0; float: left; } #sideCol { width: 25%; padding: 10px; margin: 0; float: left; } } /* ************************************* ***styles for computer screens etc*** ************************************* */ @media (min-width: 992px) { header { height: 70px; padding: 25px; } main { padding: 20px; } #sideCol { padding: 20px; } } /* **************************** ***Styles for wide screen*** **************************** */ @media (min-width: 1200px) { header { height: 100px; padding: 30px; } main { width: 70%; padding: 30px; } #sideCol { width: 30%; padding: 30px; } }[/code] [l]As you can see there is no great complexity to our code. There is one noteworthy bit of CSS that we have not covered yet, *. This symbol is known as a universal selector. We use this for our resets (Some of the browsers add margin, padding and borders by default to certain elements) because it will apply our reset to every element in the document. However please do not abuse the universal selector as it can impact on your page load time.[/l] [hdsm]A note on CSS resets[/hdsm] [l]The resets I used in this CSS document basic to say the least. I would not recommend using such a weak reset in your projects. I only used it in the example to hint at CSS resets. Instead I urge you view this post: [/l] [url=http://meyerweb.com/eric/tools/css/reset/]http://meyerweb.com/eric/tools/css/reset/[/url] [l]The "meyerweb reset" is a commonly used reset. Most people will more than likely just grab the code and chuck it in their project. I advise against this practice, and so do the authors of the code. Instead you should use it as a starting point and adjust the defaults to suit your project. I have myself used this code in projects, although I did as I just advised and modified it to suit my needs. So thank you Eric Meyer for your contribution to the world of technology.[/l] [l]That’s all for now. Thank you for reading. Any social shares would sure be appreciated! Also if you have any comments or questions then use the form below to submit them. If you would like to contribute to / improve on this guide then please head over to my contact page on my website and use the form to get in touch. I always welcome any input you may have.[/l]

HTML and CSS for beginners – Part six

[postpic=YellTunnelFin.jpg class=img-responsive center-block title=HTML and CSS for beginners - part 6, by Michael Griffiths of Griffiths Web Design alt=HTML and CSS for Beginners - Part Six, by Michael Griffiths of Griffiths Web Design style=][/postpic] [url=http://www.griffithswebdesign.com/blog/post/40][b][l]<< Go back to HTML and CSS for beginners part 5[/l][/b][/url] [l]Last time we talked about the CSS box model, padding, margin and borders. If you haven’t read that one yet then I would advise you to do so before continuing on with this guide. In this instalment of HTML and CSS for beginners we will be discussing the overflow property and positioning elements on the page. These are the last pieces of the puzzle needed to create layouts using CSS, which we will cover next time.[/l] [hdsm]The overflow property[/hdsm] [l]In CSS there is a property called overflow. This property addresses what to do with content that spills out of the confines of the element’s box. There are six values that you could assign to the overflow property.[/l] [unord] [item][l]visible – This is the default value. This will not clip the overflowing content, so the content will render outside the elements box.[/l][/item] [item][l]hidden – This will clip the content overflow of the element, the content that would be outside the elements box will be invisible.[/l][/item] [item][l]scroll – The content overflow is clipped but a scrollbar will be added to the element so the user can view the content in its entirety from within the confines of the elements box.[/l][/item] [item][l]auto – If the content is clipped then a scroll bar would be added to see the whole content of the element.[/l][/item] [item][l]initial – Sets the overflow property to its default value.[/l][/item] [item][l]inherit – The element will inherit the overflow property of its parent element.[/l][/item] [/unord] [l][b]Note –[/b] You can also use overflow-x and overflow-y to set different values for horizontal and vertical clipping of the overflowing content. overflow-x decides what to do with the content on the left and right edges if it overflows the element. Overflow-y decides what to do with overflowing content on the top and bottom edges.[/l] [hdsm]Positioning elements in CSS[/hdsm] [l]To position elements in CSS we use the position property. This property, position, can take one of four values.[/l] [l][b]Static –[/b] This is the default value for all elements. This will not put any special positioning on the element, the element will be positioned according the flow of the page.[/l] [l]So with that in mind the two style rules are the same.[/l] [code]div{ position:static; width:100px; } div{ width:100px; }[/code] [l]The top, bottom, left and right properties will have no effect on an element whose position is set to static.[/l] [l][b]Relative –[/b] This will position the element relative to its normal position.[/l] [l]When using relative positioning the top, bottom, left and right properties will adjust the position of the element relative to its normal position[/l] [code]div{ position:relative; left:20px; width:100px; }[/code] [l]This will position the div 20px away from the left margin of its normal position. A similar effect can sometimes be achieved using the margin property.[/l] [l][b]Fixed –[/b] This will position the element relative to the window. So if you scroll the page the element will still be in the same place on the screen.[/l] [code]div{ width:100%; height: 50px; position:fixed; bottom:0; }[/code] [l]This style rule will make the div be stuck to the bottom of the window, even if the user scrolls the div is still fixed to the bottom of the window.[/l] [l][b]Absolute –[/b] This will enable you to position the element at specific coordinates relative to its parent container. To use position absolute you need to have your element nested in an element that has its position set to relative, absolute or fixed. Elements that are absolutely positioned are taken out of the flow of the page and do not affect the positioning of elements around them.[/l] [code]div{ width:100px; height: 50px; position:absolute; top:0; left:0; }[/code] [l]This will position the div in the top left corner of its parent element (0 pixels from the top and 0 pixels from the left).[/l] [hdsm]CSS Floats[/hdsm] [l]What is float? Well float is a property in CSS that we use to position elements relative to the flow of the page.[/l] [l]Floats can be used to layout entire webpages or they can be utilised to layout smaller instances, for example the float property could be used to layout elements within element.[/l] [l]Float has four possible values[/l] [unord] [item][l]left – Places the element on the left and the elements then wrap around it.[/l][/item] [item][l]right – This will set the element to the right hand side and the other elements will flow around it.[/l][/item] [item][l]none – This will ensure that no floats are applied to the element.[/l][/item] [item][l]inherit – This will make the element inherit the float property from its parent element.[/l][/item] [/unord] [hdsm]Clearing the floats[/hdsm] [l]The float property has a sister, the clear property. The clear property is used to remove floats from an element.[/l] [l]There are several possible values for this property:[/l] [unord] [item][l]none - This is the default value of the clear property. This will allow floating elements on the right and left sides of the element.[/l][/item] [item][l]left - No floating element will be allowed to appear on the left of the element.[/l][/item] [item][l]right - No floating elements will be allowed on the right of the element.[/l][/item] [item][l]both - No floating elements will be allowed on either the left or right side of the element.[/l][/item] [item][l]initial - As with other properties that have this value this will set the value to the default.[/l][/item] [item][l]inherit – The element will inherit the clear property from its parent element.[/l][/item] [/unord] [l]Now we have covered some of the ways to position elements on a page I suggest you go and play around with it. A lot. Positioning elements sounds simple, and it is, but it can sometimes have unexpected results. [b]Practice! Practice! Practice![/b][/l] [l]I hope you found this article to be interesting, if so please share it around. In the next instalment of HTML and CSS for beginners we will be putting what we have learnt to good use by creating a layout.[/l] [url=http://www.griffithswebdesign.com/blog/post/40][b][l]<< Go back to HTML and CSS for beginners part 5[/l][/b][/url]

HTML and CSS for beginners – Part five

[postpic=part5.jpg class=img-responsive title=HTML and CSS for beginners - part five alt=HTML and CSS for beginners - part five style=][/postpic] [url=http://www.griffithswebdesign.com/blog/post/39][b][l]<< Back to HTML and CSS for beginners part 4[/l][/b][/url] [hdmd]The box model[/hdmd] [l]Every element in HTML is essentially a box. This box has a content area, padding between the content and the border, the border itself and the margin (this is a buffer between the element and everything around it.)[/l] [l]Below is an image which illustrates the box model in all its simplistic glory.[/l] [postpic=boxmodel.jpg class=img-responsive center-block title=The box model alt=This is the css box model. Get to know it and get to love it style=][/postpic] [l]When you set the height and width of an HTML element in css you are actually just setting the height and width of the content area. To get a measure of the true size of the element you will need to add on the padding, border and the margin. [/l] [l]For example if you had the following in your CSS:[/l] [code]div { width:200px; height:250px; padding:10px; border:solid #000000 5px; margin:15px; } [/code] [l]The width of the div would be: [/l] [l]200px (the width of the content area) + 20px (10px padding each side) + 10px (5px border on each side) + 30px (15px margin on either side) = 260px (total width of the element).[/l] [l]The height of the div would be:[/l] [l]250px (the height of the content area) + 20px (10px padding above and below the content area) + 10px (5px border on the top and bottom.) + 30px (15px margin on the top and bottom of the element) = 310px (total height of the element).[/l] [hdsm]Box sizing[/hdsm] [l]As discussed moments ago there is a little bit of mathematics required to work out the true height and width of an element. Because we are web developers we avoid such complexity at all costs. As a result there is a property called box-sizing.[/l] [l]The box sizing property is used to tell the browser if the height and width should contain the border box or just the content box. As we know the default is just the content box.[/l] [l][b]Box sizing can take one of four values:[/b][/l] [unord] [item][b]content-box -[/b] This is the default setting, which makes the height and width css properties include only the content area.[/item] [item][b]border-box -[/b] The height and width css properties will now include the padding and the border of the element but not the margin.[/item] [item][b]initial -[/b]This will set the box-sizing property to its default. (Not supported in IE)[/item] [item][b]inherit -[/b]The element will inherit the property from its parent element.[/item] [/unord] [hdsm]Margin[/hdsm] [l]HTML elements have a CSS property that goes by the name margin. You have seen this property used a few times in the examples. The margin acts as a buffer between the element it is assigned to and the elements that surround it.[/l] [l]There are four separate properties for margin, one for each side of an element.[/l] [unord] [item]margin-left[/item] [item]margin-right[/item] [item]margin-top[/item] [item]margin-bottom[/item] [/unord] [l]As you may have noticed I have not used those properties in the examples. I used a short hand version.[/l] [code]margin:10px;[/code] [l]This tells the browser that you want 10 pixels of margin on each side of the elements.[/l] [code]margin:10px 45px;[/code] [l]When you use this version of the margin short hand notation then you are telling the browser that you wish it to add ten pixels of margin on the top and the bottom of the element and forty-five pixels of margin on both the left and the right side of the element.[/l] [code]margin:10px 12px 45px;[/code] [l]This example is a little different, we have only supplied it with three values. When we do this what we are telling the browser is that we want ten pixels of margin at the top, forty-five pixels of margin at the bottom. The interesting part is the middle value. This middle value in this example represents two sides of the box, the right and left sides. So basically we are adding twelve pixels of margin on the right and the left side.[/l] [code]margin:10px 12px 15px 45px;[/code] [l]In this example we have assigned ten pixels of margin at the top, twelve pixels of margin on the right side of the element, fifteen pixels of margin at the bottom and forty-five pixels of margin on the left.[/l] [hdsm]Padding[/hdsm] [l]As we saw from the box model illustration all elements in HTML have an area of padding that lies between the content area and the border. The syntax for padding is very similar to the syntax for margin.[/l] [l]Just like the margin property, padding has four separate properties that represent each side of the element.[/l] [unord] [item]padding-left[/item] [item]padding-right[/item] [item]padding-top[/item] [item]padding-bottom[/item] [/unord] [l]As we saw from the margin short hand notation there are several ways to apply margin. The same holds true for padding also.[/l] [code]padding:10px;[/code] [l]When you set padding in this way we are telling the browser that we wish to have ten pixels of padding on each side of the element.[/l] [code]padding:10px 15px;[/code] [l]Using this we are telling the browser that we want ten pixels of padding on the top and the bottom of the element.[/l] [code]padding:10px 15px 17px;[/code] [l]This time around we are asking for ten pixels of padding at the top of the element, fifteen pixels of padding on both the left and the right sides and finally we request seventeen pixels of padding to the bottom of the element.[/l] [code]padding:10px 15px 17px 58px;[/code] [l]I’m sure you know the drill by now…ten pixels of padding on the top of the element, fifteen pixels of padding on the right of the element, seventeen pixels of padding on the bottom and fifty-eight pixels of padding on the left of the element.[/l] [l]As you can see padding and margin are conceptually similar. They add space to the element, the difference being the padding adds the space inside the element and margin adds space outside the element.[/l] [hdsm]Border[/hdsm] [l]Every element in HTML has a border. Just like the margin and padding there is an individual property for each side of the element.[/l] [unord] [item]border-left[/item] [item]border-right[/item] [item]border-top[/item] [item]border-bottom[/item] [/unord] [l]The border also has some other properties, which are[/l] [unord] [item]border-style[/item] [item]border-width[/item] [item]border-color[/item] [/unord] [l]The border style property takes the following values[/l] [unord] [item]dotted - a dotted line[/item] [item]dashed – a line of dashes[/item] [item]solid – a solid line[/item] [item]double – double border[/item] [item]groove – a 3d grooved border[/item] [item]ridge – a 3d ridged border[/item] [item]inset – a 3d inset border[/item] [item]outset – a 3d outset border[/item] [item]none – no border[/item] [item]hidden – a hidden border[/item] [/unord] [l]When we wish to set the properties of the border we need to specify which side of the element we are applying the border to and we need to specify which property we will be using. [/l] [l]To further illustrate the border properties let’s throw together a quick example. In this example we will be setting different values for each side of the element.[/l] [code]div { height:200px; width:200px; border-left-color: red; border-right-color: blue; border-bottom-color: yellow; border-top-color: green; border-left-style:solid; border-right-style:dashed; border-top-style:groove; border-bottom-style:inset; border-left-width:5px; border-right-width:15px; border-top-width:51px; border-bottom-width:23px; }[/code] [l]As you can see we have set the width, style and colour properties for each side of the element. We have also supplied a height and width, this is just so the borders can be seen properly (there is no content in the div so without these properties being set the div won’t display properly)[/l] [l]The output this code will produce will look like this (I know it’s horrible but it does allow us to use all the properties)[/l] [postpic=borders.jpg class=img-responsive center-block title=A border example alt=Examples of border properties. style=][/postpic] [l]As you can see the browser has done everything that we have asked of it, however we have had to resort to writing quite few lines of code to do so. As programmers we tend to be quite lazy and want everything done in the shortest and most concise way possible. Luckily for you, and me, the good folks that wrote the specs for CSS also do not want to write lines and lines of unnecessary code. So they came up with the border short hand property.[/l] [l]By using the short hand border property we can set the border width, border colour and the border style in one go. However we still need to select each side separately if we want to apply different values to each side.[/l] [l]To apply border properties to all sides of the element you will need to specify the border property then you need to feed it three values (in this order) border width, border style and border colour.[/l] [l]The following example will give the element a fifteen pixel solid blue border all the way round.[/l] [code]border:15px solid blue;[/code] [postpic=solidblue.jpg class=img-responsive center-block title=Solid blue border alt=A solid blue border style=][/postpic] [l]If you wanted apply different values to each side, like we did before we looked at the short hand notation, then you need to specify each side of the element. Like so:[/l] [code]div { height:200px; width:200px; border-left:5px solid red; border-right:15px dashed blue; border-bottom:25px inset yellow; border-top:51px groove green; }[/code] [l]This will give the same output as we saw when we discussed the separate properties of border.[/l] [postpic=borders.jpg class=img-responsive center-block title=The output from our border declarations. alt=An extremely ugly border but an effective demonstration. style=][/postpic] [l]This brings an end to this section of HTML and CSS for beginners – part five. In this section we discussed the box model, margin, padding and borders. Next time we will be discussing positioning elements with CSS.[/l] [url=http://www.griffithswebdesign.com/blog/post/39][b][l]<< Back to HTML and CSS for beginners part 4[/l][/b][/url]

HTML and CSS for beginners – Part four

[postpic=binary.jpg class=img-responsive title=HTML and CSS part 4 alt=A deaper look into CSS style=][/postpic] [url=http://www.griffithswebdesign.com/blog/post/38][b][l]<< Back to HTML and CSS for beginners part 3[/l][/b][/url] [url=http://www.griffithswebdesign.com/blog/post/40][b][r]Go to HTML and CSS for beginners part 5 >>[/r][/b][/url] [hdmd]Selectors in CSS[/hdmd] [l]When using inline styles the style declaration is only applied to that element, therefore selectors are not required. When using internal/external style sheets the browser doesn’t know which element to apply the styles to. To get around this we use selectors.[/l] [l]In css you can select elements by id, by class name, by tag name and more.[/l] [hdsm]Id[/hdsm] [l]In HTML id’s have to be unique, so that means if you had a set of paragraph tags with the id para1 then you cannot have any other elements in the document with the id para1.[/l] [code]<p id="para1">This paragraph has the id para1</p>[/code] [l]Id’s must contain at least one character and they must not contain any space characters.[/l] [l]To call an element by id in a style sheet you need to affix ‘#’ to the beginning of the id value.[/l] [code]<style type="text/css"> #para1 { background: #000000; color:#ffffff; } </style> [/code] [hdsm]Class[/hdsm] [l]Classes can be applied to more than one element at a time and each element can have more than one assigned class. Class names need to be separated by a space otherwise the browser will think it is one long class name as opposed to two or more separate classes.[/l] [l]When calling a class name in your style sheet you will need to affix a ‘.’ to the beginning of it.[/l] [code]<p class="para1">This paragraph has the class named para1</p> <p class="para1 para2">This paragraph also has the class named para1 as well as para2</p> <style type="text/css"> .para1 { background: #000000; color:#ffffff; } .para2 { color: :#ffd800; } </style> [/code] [hdsm]Element name[/hdsm] [l]Another way of adding style to elements is by using the tag name as the selector in your style sheet. If you used this method to apply styles to elements it will apply the style to every instance of the element in the document.[/l] [code]p { background: #000000; color:#ffffff; } [/code] [l]This example would give every paragraph element in the HTML document a black background and white text.[/l] [hdsm]Other ways of selecting elements[/hdsm] [l]Now I will show you other ways to select elements. Any of the previously mentioned selectors can be used in this method. I’ll show you some examples then after example I will explain what we are doing.[/l] [code]#eleId p { color:red; } [/code] [l]This will change the font colour to red for any p element that is a descendant (child, child of child, etc.) of an element with an id of ‘eleId’.[/l] [l]If we had[/l] [code]#eleId > p { color:red; }[/code] [l]Then we would be selecting any p element that is a child (direct descendant) of ‘eleId’ and changing the font colour to red.[/l] [code]p:first-child { color:red; }[/code] [l]This time we are selecting a p element that is the first child of its containing element.[/l] [code]p + div { color:red; }[/code] [l]This selector will select any div element that is the next sibling (the next child of the same parent) of a p element[/l] [hdsm]Grouping selectors[/hdsm] [l]In CSS it is possible to group selectors so that you can apply the same rule to several elements at once. The main reason to group your selectors (where possible and everything in moderation!) is to keep the code readable and maintainable by reducing repetition of code.[/l] [l]If, for example, you had in your CSS the following style rules[/l] [code]p { color:red; } h1{ color:red; } h3{ color:red; }[/code] [l]You could condense them down into one style rule by separating the selectors with a comma, like so[/l] [code]p, h1, h3 { color:red; }[/code] [l]Just remember when you make any changes to the style rule the changes will be applied to every element specified.[/l] [hdsm]Comments in CSS[/hdsm] [l]In CSS you have the ability to leave comments in your code, just like we did in HTML. The syntax of comments in CSS is slightly different to that of HTML, as you’ll see.[/l] [code]/* */ [/code] [l]Everything that is written between those tags will be ignored by the browser. Heavily commenting your code is an excellent habit to get into. Even those of us lucky to have an excellent memory will struggle to remember something from six months before.[/l] [l]Comments in CSS can span multiple lines.[/l] [hdsm]Vendor prefixes[/hdsm] [l]The browser vendors sometimes use something called a vendor prefix to add experimental, non-standard css properties. This enables us as developers to experiment with these new properties without our code being broken by changes in browser behaviour.[/l] [l]Browser prefixes are quite annoying, well I think so anyway, but as luck would have it as time goes on the need for them will diminish. For the time being, however, there are a few properties that were part of the CSS3 specification that need a little ironing out before standardisation occurs so we are stuck with the silly prefixes for now.[/l] [l]As you may be aware there are many browsers out there in the wilderness that we call the internet, so many in fact that covering every possible vendor prefix would most likely be impossible. Below is a list of the major browsers and their accompanying browser prefix.[/l] [unord] [item][l]Android (-webkit-)[/l][/item] [item][l]IOS (-webkit-)[/l][/item] [item][l]Chrome (-webkit-)[/l][/item] [item][l]Safari (-webkit-) [/l][/item] [item][l]Internet Explorer (-ms-)[/l][/item] [item][l]FireFox (-moz-) [/l][/item] [item][l]Opera (-o-) [/l][/item] [/unord] [l]When using a non-standard property we need to add the prefixed versions of the property first, in any order you like, then we add the standard property. For example the box sizing property, while supported in the current versions of the major browsers, does not work in older versions of Safari, Chrome and FireFox. To support those browsers we’d need to add the -webkit- prefix and the -moz- prefix. It would look something like this:[/l] [code]body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [/code] [l]Not sure whether you need vendor prefixes or not? Not to worry there is a site out there that is an invaluable resource to us as developers. The site, which is aptly named ‘can I use’, resides at the following web address:[/l] [url=http://caniuse.com/]http://caniuse.com/[/url] [l]You can use this site to search for a property and it will list the browser support for that property. I really do recommend utilising this site when developing your CSS, it could save you from more than a few struggles with browser compatibility.[/l] [l][b]Note –[/b] Something to remember is that some browsers use slightly different syntax for certain properties than others, so always remember to check. [/l] [l]That’s all for now but look out for the next instalment of HTML and CSS for beginners where we will continue our discussion on CSS, starting with the box model.[/l] [url=http://www.griffithswebdesign.com/blog/post/38][b][l]<< Back to HTML and CSS for beginners part 3[/l][/b][/url] [url=http://www.griffithswebdesign.com/blog/post/40][b][r]Go to HTML and CSS for beginners part 5 >>[/r][/b][/url]

HTML and CSS for beginners – Part three

[postpic=htmlcsspart3.jpg class=img-responsive center-block title=HTML and CSS for beginners part 3 alt=Part 3 of HTML and CSS for beginners style=][/postpic] [url=http://www.griffithswebdesign.com/blog/post/37][b][l]<< Back to HTML and CSS for beginners part 2[/l][/b][/url][url=http://www.griffithswebdesign.com/blog/post/39][b][r]Go to HTML and CSS for beginners part 4 >>[/r][/b][/url] [hdlg]Cascading Style Sheets - CSS[/hdlg] [l]Cascading Style Sheets, or ‘CSS’, was first developed in 1997 as a way for developers to define the look and feel of a HTML document and to separate the content from the design. This enables HTML to do the job it was intended to do without being bloated by extra attributes etc.[/l] [l]At first the browser support was limited to changing the colours of text and the page but over time the browsers started to adopt the CSS standard and the World Wide Web quickly grew into something that we all want to use. The popularity of CSS has been growing exponentially since its initial development. So much so that I doubt there is a page on the net that doesn’t use css. I can say that with a great deal of certainty because even if the developer did not write any CSS, the browser has default styles built into it for the HTML elements. Admittedly leaving the styles unchanged is an extreme rarity because who would want to visit such a drab and dreary site? Not me that’s for sure![/l] [l]As previously mentioned CSS can be used to define the look and feel of each HTML element but that’s not the whole story. Remember when I told you about how HTML tables were, one upon a time, heavily abused by developers to create complex layouts? Well that’s where the real magic of CSS exists. You can use it to create complex layouts. Also if you combine your CSS style declarations with some media queries then CSS allows you to create layouts that respond to screen size. You’ll never have to side-ways scroll unnecessarily again![/l] [hdmd]Inline Styles vs Internal Style Sheet vs External Style Sheet[/hdmd] [l][b]There are three different ways to add style to a HTML document.[/b][/l] [ord] [item][l]Inline styles[/l][/item] [item][l]Internal style sheet[/l][/item] [item][l]External style sheet[/l][/item] [/ord] [l]Inline styles have the highest priority. What this means is that styles declared inline can override those of an internal or external style sheet.[/l] [l][b]Note -[/b] While it is perfectly valid to use inline styles it will result in a hard to read HTML document. I personally nearly always use external style sheets. Part of the reason for the creation of CSS in the first place was to separate the content from the design. Adding inline styles goes against that ethos but there will be times where inline is the only way, just use them sparingly if you wish to be able to decipher your HTML document at a later date.[/l] [hdmd]Inline styles[/hdmd] [l]Now I want to show you a quick example of an inline style. In the example we will be styling a paragraph element. We will give the paragraph a black background, using the ‘background-color’ property and giving a value of ‘#000000’ (that’s the hex value of black but you could use the colour name or its rgb equivalent). We will also make the text white by the use of the property ‘color’, which will take a value of ‘#ffffff’ (#ffffff is the hex value for white).[/l] [l]Styles declared inline will override styles from internal/external style sheets.[/l] [l][b]Pre-example note –[/b] British developers beware HTML, like most programming languages, uses American-English. So watch out for the spelling of certain words. E.g. in Britain we would spell colour but in HTML it would be color.[/l] [code]<p style="background-color:#000000; color:#ffffff;">This paragraph will have a black background with white text.</p>[/code] [l]When viewed in the browser you should get an output like this:[/l] [postpic=inlinestyledemo.jpg class=img-responsive title=An example of inline styles alt=This is what the browser displays, as instructed by our css. style=][/postpic] [hdmd]Internal style sheets[/hdmd] [l]To create an internal style sheet you will need to add some tags to the head section of the HTML document. The tags look like this[/l] [code]<style type="text/css"></style>[/code] [l]As you can see I have also added an attribute labelled as type with a value of text/css. This attribute identifies the internet media type of the tag (The Internet Media Type used to be known, and is still referred to by many, as a MIME type) and the value indicates that the content of the style tags is CSS.[/l] [l]Once you have those tags in place you can go ahead and add some styles. So let’s say we have one h1 set of tags with the id ‘foo’ and two paragraphs. We will give one paragraph the class name ‘bar’.[/l] [l]In the CSS we will centre align the heading. We will also give all paragraph elements a grey background colour and black text. Finally we will give our paragraph, with the class name bar, white text.[/l] [l]In the body of a HTML document add your tags.[/l] [code]<h1 id="foo">This header has the id foo</h1> <p>This is a paragraph with no id or class. This is a paragraph with no id or class. This is a paragraph with no id or class. This is a paragraph with no id or class.</p> <p class="bar">This is also a paragraph but this one has a class called bar. This is also a paragraph but this one has a class called bar. </p>[/code] [l]Next, in between the head tags you need to add a set of style tags. Once you have done so go on and add your styles. When completed your style sheet should look like this[/l] [code]<style type="text/css"> #foo{ text-align: center; } p { background-color:#808080; color:#000000; } .bar{ color:#ffffff; } </style>[/code] [l]Below is what you can expect when you view the HTML document in the web browser.[/l] [postpic=cssoutput1.jpg class=img-responsive title=css output alt=our styles as rendered by the browser style=][/postpic] [hdmd]External style sheets[/hdmd] [l]Together we have looked at inline styles and internal style sheets. The final stop on this little ride is fast approaching: External style sheets.[/l] [l]So what is an external style sheet? Well I’m glad you asked. An external style sheet is pretty much the same as an internal one except the styles are kept in their very own file, a file that ends with ‘.css’[/l] [l]The syntax of an external style sheets is identical to that of an internal style sheet so there isn’t much to tell you really.[/l] [l]The example we will go through in this section will use the same HTML from the internal style sheet example. So open up that document in your text editor.[/l] [l]We also need another document, a CSS file. So in the folder in which your HTML file lives please create a .css file, name it whatever you like just so long as it ends with .css (in the example mine is called ‘external.css’)[/l] [l]If your chosen text editor doesn’t auto generate a blank CSS file then create a .txt file then rename it (including the .txt extension)[/l] [l]Our next step is to get the styles we created in the internal style sheet example into our new .css file. A simple copy and paste of everything that falls between the tags will suffice. (make sure you only copy the contents of the style tags and not the tags themselves, they can just be deleted.) When you have done this your .css file should look like this:[/l] [code]#foo{ text-align: center; } .bar{ color:#ffffff; } p { background-color:#808080; color:#000000; } [/code] [l]If you load your HTML page in the browser at this point the only styles that will be present will be the browser defaults. How drab![/l] [l]So how do we tell our HTML document that the styles we need are stored elsewhere? Well that’s the easy part. We need to add a link to our HTML document. This link will reside in between the head tags. The link tag will have three attributes [b]type[/b], [b]rel[/b] and [b]href[/b].[/l] [l]The [b]type[/b] attribute for this tag is the same as it was in the internal style sheet, the internet media type.[/l] [l]The [b]rel[/b] attribute defines the relationship that the linked resource has with the document. In this instance it is telling the browser that the linked resource is a style sheet.[/l] [l]The [b]href[/b] attribute specifies the location/URL of the linked resource.[/l] [l]Your link should look like this:[/l] [code]<link type="text/css" rel="stylesheet" href="external.css" />[/code] [l]Now reload your HTML document in the browser and you’ll see that the styles will be applied. The output will be the same as it was for the internal style sheet example.[/l] [l][b]A quick note on the cascading order[/b][/l] [l]The rules surrounding the cascading order of CSS is quite complex but I aim to give you a little insight to prevent some CSS nightmares that I myself have experienced.[/l] [l]CSS styles can be specified in several ways but in the end they will all cascade into one enormous style sheet. There will be, at times, conflict between the style sheets that influence how the styles are merged.[/l] [l]As we already know styles can be read from internal style sheets, external style sheets, inline styles and the boring old browser defaults.[/l] [l]Below is a list of these four ways to read styles in the default priority order, with one being the least important and four being the most important.[/l] [ord] [item][l]Browser default styles[/l][/item] [item][l]Styles from external style sheets[/l][/item] [item][l]Styles from internal style sheets[/l][/item] [item][l]Inline styles[/l][/item] [/ord] [l]It is also worth noting that, like most other forms of programming, the browser reads from the top down. So how does this affect our list of importance? Well what happens is that if the browser comes across two or more style rules that have the same ‘weight’ then the last rule on the list is applied last.[/l] [l]I am aware that this can be quite confusing so I would heartily suggest whipping up a HTML page and add various styles that will conflict and have a play around. For a much more in depth explanation of the cascade order please visit an amazing post I came across a little while back (although it was too late for me at the time, it’s still a handy reference that I like to keep around.)[/l] [url=http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css]http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css[/url] [url=http://www.griffithswebdesign.com/blog/post/37][b][l]<< Back to HTML and CSS for beginners part 2[/l][/b][/url] [url=http://www.griffithswebdesign.com/blog/post/39][b][r]Go to HTML and CSS for beginners part 4 >>[/r][/b][/url]

HTML and CSS for beginners – Part two

[postpic=part2head.png class=img-responsive title=HTML and CSS for beginners – Part two alt=HTML and CSS for beginners – Part two style=][/postpic] [b][url=http://www.griffithswebdesign.com/blog/post/35][l]<< Back to HTML and CSS for beginners part 1[/l][/url] [url=http://www.griffithswebdesign.com/blog/post/38][r]Go to HTML and CSS for beginners part 3 >>[/r][/url] [/b] [hdmd]The syntax of HTML[/hdmd] [l]Now we have discussed the background stuff lets quickly put together a blank template which could easily serve as the base for any HTML document. For the benefit of the example I have put in a few elements in the body for us to explore and discuss.[/l] [code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>This is the title element</title> <!--[if lt IE 9]> <script src=https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js></script> <![endif]--> </head> <body> <header> <div> <!-- This is a comment, it is ignored by the browser. --> <h1>This section <span>of the page</span> is the header element</h1> <img src="#" alt="This is the alternative text and will be read by screen readers and search engines" title="This is the image title and will be read by search engines and screen readers." height="100" width="100" /> </div> <nav> <ul> <li><a href="http://www.google.com" target="_blank">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav> </header> <main> <h2>This is the main content area</h2> <article> <h3>This is an article element</h3> <p>This article element is nested inside a main element.</p> </article> <section> <h2>This h2 element is inside a section element</h2> <p>The section element is used to define sections of a html document.</p> </section> <section> <h2>Some lists</h2> <ol> <li>Numbered item 1</li> <li>Numbered item 2</li> <li>Numbered item 3</li> </ol> <dl> <dt>This is the term</dt> <dd>This is the definition</dd> <dt>This is also a term to be defined</dt> <dd>This is the definition of the second term in the list.</dd> </dl> </section> <section> <table> <caption>This is a HTML table.</caption> <tr> <th>This is the first column heading</th> <th>This is the second column heading</th> </tr> <tr> <td>This is the data for the first column.</td> <td>This is data for the second column.</td> </tr> </table> </section> </main> <footer> <h2>This h2 element is inside a footer element.</h2> </footer> </body> </html> [/code] [l]As you can see there is nothing in this document that is all that complex or difficult to understand. However I will give a brief explanation of the elements.[/l] [hdsm]The Doctype[/hdsm] [code]<!DOCTYPE html>[/code] [l]This declaration is not actually an HTML tag. Instead it is an instruction to the web browser telling it which version of HTML the document is written in. In previous versions of HTML the doctype refers to a dtd. HTML 4 was based on SGML (Standard Generalized Markup Language). The dtd specifies the rules for the markup so your web browser (Internet Explorer, FireFox, Chrome, etc.) can render it properly. HTML5 is not based on SGML and as a result does not require a reference to a dtd.[/l] [hdsm]The html element[/hdsm] [code]<html lang="en">[/code] [l]This element, html, tells the browser that everything between the opening and closing tags is html.[/l] [l]This tag we have an attribute labelled as ‘lang’. This tells the browser what language the page is in. The ‘en’ part is known as a language code. In this particular example we have told our browser that it is in English. [/l] [l]As you may be aware there are variations of English that are country specific, for example in Britain we would call Trousers… ‘Trousers’. However in America they would call Trousers ‘Pants’. The same holds true in computing. Date formats are just one of the things that are location specific. To specify the country we could modify the tag so it looks like this: [/l] [code]<html lang="en-GB">[/code] [l]In this version of the tag we have our language code, followed by a dash which in turn is followed by ‘GB’. This extra part we have added on to our language code is called a Country code. In the above example we have specified our language as English and our country as Great Briton, this tells our browser (and search engines, screen readers etc.) that the page is written in British English.[/l] [hdsm]The head element and the elements it contains[/hdsm] [l]As you can see from the example there is an element called head.[/l] [code]<head> </head>[/code] [l]This element contains all the information that the browser needs but does not display any of this data on the page when rendered by the browser. [/l] [l]The first line after the opening head tag reads as follows:[/l] [code]<meta charset="utf-8" />[/code] [l]In this line of mark-up you're telling the browser what character set you're using, so it can better render the text on screen. [/l] [l]The "meta" element essentially just means "some information about this document" so you can set various properties to do with the document and its contents, but they're not directly a part of the document. These meta tags are information for the browser, for search engines, screen reader etc. As a result are not seen by the end user. [/l] [l]There are other possible meta tags that could be included but for the purposes of keeping this article at a manageable length I have chosen to omit them from the example. If you wish to know more about meta tags please visit the following link where the good folks at world wide web consortium (that’s W3C to the rest of us) have put together some information on meta tags. [/l] [url=http://www.w3schools.com/tags/tag_meta.asp ]http://www.w3schools.com/tags/tag_meta.asp [/url] [l]After this line we have a set of title tags.[/l] [code]<title>This is the title element</title>[/code] [l]These tags tell the browser what the page is called.[/l] [l]Now we have something a little different. Something called a HTML5 shiv.[/l] [code]<!--[if lt IE 9]> <script src=https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js></script> <![endif]--> [/code] [l]This is what’s known as a conditional comment. This checks to see if you’re using Internet Explorer below version 9, and if you are (by ‘you’ I mean the user) then it applies a special JavaScript file. This JavaScript file is a bit of a hack (I suppose the politically correct version is ‘work around’ not ‘hack’ but nonetheless it’s a hack). This hack means that internet explorer will allow styling of unknown elements. The reason we need this is because Internet Explorer, versions less than 9, do not support HTML5 elements and as a result does not allow styling of these elements. Other browsers (Firefox, Chrome, Internet Explorer 9+ etc.) will allow styling of unknown elements and generally have far superior support of HTML5.[/l] [l]This ‘shiv’ needs to be placed in the head element, after any style sheet declarations.[/l] [l]Eventually these conditional comments will be unnecessary as these stone aged browsers become extinct. But for now you’ll need it if you wish to support older versions of IE (Internet Explorer). For more information on the HTML5 shiv please visit [/l] [url=http://www.w3schools.com/html/html5_browsers.asp]http://www.w3schools.com/html/html5_browsers.asp[/url] [l]As you can see from the example the conditional comments are the last item in between the head tags.[/l] [hdsm]Comments[/hdsm] [code]<!-- This is a comment, it is ignored by the browser. -->[/code] [l]In HTML you can write comments in your HTML document that will be ignored by the browser. Comments are an excellent addition to any programming language/ mark-up because it allows you to leave yourself hints as to what you are doing. This really comes in handy when you are coming back to your work at a later date. [/l] [l]Comments in HTML can span multiple lines.[/l] [hdsm]The body[/hdsm] [code] <body></body>[/code] [l]The body tags contain everything that the user sees when they load the page in a browser and are essential.[/l] [l]Inside those body tags we have several HTML elements. I will give a brief explanation of each of those elements.[/l] [code]<header> </header>[/code] [l]These tags are intended to serve as a container for the introductory content and normally contains one or more headline text elements (such as h1, h2, h3, etc.), navigation links and possibly a logo/icon. [/l] [code]<nav> </nav>[/code] [l]This is where your navigation links should reside. However not all of your navigation links should be contained in the nav, only the main links.[/l] [code]<main> </main>[/code] [l]These tags specify the main section of the document. The content within these tags should be specific to that HTML document. As such should not contain information that is repeated across several different pages. For example a sites navigation should not be inside the main tags. [/l] [l][b]A further note about the main tags –[/b] There can be only one main element on the page and it cannot be nested in any of the following tags: header, footer, aside, article or nav.[/l] [code]<article></article>[/code] l]These tags are for independent content. What I mean by this is content that would still make sense without the rest of the page. For example on a blogging site the blog post itself may be contained within an article element.[/l] [code]<section></section>[/code] [l]These tags are used for sectioning a document. For example they could be used to denote chapters, headers, footers or for that matter any other section of the document. In an online blog you may have a section for the post, a section for the authors’ bio and a section for the comments.[/l] [code]<footer></footer>[/code] [l]These tags define the footer area of the page or section. The footer is supposed to hold information on its parent container. For example, Contact information, site map, copyright information, navigation links etc.[/l] [l]As you may have noticed I have left some elements out of this list but have no fear we will be discussing those in a moment. All the items in the list, from header all the way down to footer, are newly introduced elements in the HTML5 specification. They are all block elements and are intended to make to web more accessible, i.e. for screen readers etc. You have to remember that some users of the internet may be visually impaired. Using the correct tags means that screen readers will know what kind of information the container holds and will then be able to render them in the appropriate manner, otherwise the result is absolutely nonsensical and the user cannot effectively use your site.[/l] [l]The following list of HTML elements are from the HTML4 specification and are essential to any webpage or HTML document.[/l] [hdsm]Containing elements[/hdsm] [code]<div></div>[/code] [l]The humble div tag. The most used HTML element of all. It is a block level container, so essentially it is a box in which you put your content. By default the browser will implement a line break before the div, this behaviour can be changed via CSS.[/l] [code]<span></span>[/code] [l]The span tags are inline elements. They are similar in some ways to the div tags, in that they are designed to be containers. The biggest difference though is that they do not have an impact on the layout of a page. They are intended to add a ‘hook’ onto some text. You’ll see in the template that there is some text surrounded by a set of span tags. The text within the span tags can be manipulated with CSS or JavaScript independently from the rest of the text within its containing <h1> tags. The span tags alone will not change anything visually on the page unless, as just stated, you implement some CSS and/or JavaScript.[/l] [hdsm]Text elements[/hdsm] [code]<h1></h1>, <h2></h2>…<h6></h6>[/code] [l]These are the heading elements. They range from <h1>, the largest and most important header, to <h6>, the smallest and least important header. Typically you’ll find only one <h1> element on a page, which is usually found in the <header> containing element. The head text elements are all block level elements.[/l] [code]<p></p>[/code] [l]The paragraph tags, where would the web be without them? These are block level elements that are intended to contain text. Most browsers will add some margin and padding to these elements, this behaviour can be overridden by CSS and/or JavaScript.[/l] [hdsm]In HTML there are three kinds of list[/hdsm] [l][b]Unordered lists[/b] are bullet point lists. These lists are the most commonly used lists of the three. Most websites use unordered lists for navigation as well as for bulleted lists.[/l] [code]<ul></ul>[/code] [l]These are the containing tags for an unordered list. They can be styled and manipulated using CSS and/or JavaScript. The ul is a block level element.[/l] [code]<li></li>[/code] [l]These are the list item tags. These will contain the content of each individual item in the list and must be contained within an [b]ol[/b] or [b]ul[/b].[/l] [l][b]Ordered lists[/b] are numbered/alphabetised lists.[/l] [code]<ol></ol>[/code] [l]These are the containing tags for the ordered list. The [b]ol[/b] is a block level element.[/l] [code]<li></li>[/code] [l]These are the list item tags. These will contain the content of each individual item in the list and must be contained within an [b]ol[/b] or [b]ul[/b].[/l] [l][b]Description lists[/b] are a little different to the other two. These lists are like a dictionary, you have a word/term then you have the definition/description of that term.[/l] [code]<dl> </dl>[/code] [l]This is the containing element for the description list, and like the previous lists it is a block level element.[/l] [code]<dt></dt>[/code] [l]These are the tags which contain the term to be described.[/l] [code]<dd></dd>[/code] [l]This is where the term defined within the [b]dt[/b] tags is described.[/l] [hdsm]Tables[/hdsm] [l]HTML tables have gotten a bit of a bad reputation over the years. Once upon a time the web was a bleak place consisting of nothing more than drab and dreary layouts. Then along came tables and to get around the limitations of the web at the time developers started to abuse the humble table for things it was not designed for: Layouts. It was never the intention of the creators of the language for the table to be used in that way. They are after all meant to be used for tabulated data. While developers were able to create complex layouts using tables they were rigid and inflexible and to top it all search engines hate them. Fast forward a few years and we now have CSS which enables us to layout the page as it was intended and as a result the humble table can go back to what it was meant for: to display tabulated data.[/l] [l]There are a few elements involved in making a HTML table, which I will go through in turn.[/l] [code]<table></table>[/code] [l]This is the container for the table, the outside box if you like.[/l] [code]<caption></caption>[/code] [l]This defines the table caption. You may only have one per table and it must be placed immediately after the opening [b]table[/b] tag.[/l] [code]<tr></tr>[/code] [l]A set of these tags will add a new row to your table. These tags must be inside a <table> element.[/l] [code]<th></th>[/code] [l]These tags define the column header cells of the table and must be contained within a set of [b]tr[/b] tags.[/l] [code]<td></td>[/code] [l]These tags define the standard cells of the HTML table. <td> elements must be contained within a [b]tr[/b] element.[/l] [hdsm]Navigation[/hdsm] [l]To link to another page is very simple. To do so we need an anchor tag and a destination. In the following example I will use Google’s home page as the destination.[l] [code]<a href="http://www.google.com">Link 1</a>[/code] [l]The text between the opening and closing anchor tags is the text to be displayed by the webpage to the user. [/l] [l]If you wanted to link to another page but have it open in a new tab then you need to add a target attribute with a value of _blank to the anchor tag.[/l] [code]<a href="http://www.google.com" target="_blank">Link 1</a>[/code] [l]In this example we have added ’target=”_blank” ‘. This is all that is required in order to open the link in a new tab. No fancy JavaScript just good old HTML.[/l] [l]Another thing you’ll see quite often on the internet is linking to specific points within the document, more commonly referred to as bookmarks. So instead of going to another HTML document you are navigating to a position within the current document.[/l] [l]To do this we use the same syntax as before but this time the URL we feed it will instead be the id of an element within the page. [/l] [l]Let’s imagine we have a section with the id of ‘sectOne’. Like so[/l] [code]<section id="sectOne"></section>[/code] [l]Now we need to add an anchor tag, like this[/l] [code]<a href="#sectOne">This is a link.</a>[/code] [l]When you run the page in the browser and click the link you will be taken to the section that is specified (the one with the id ‘sectOne’). It is important to know that you must prefix the id with the # symbol.[/l] [hdsm]Images[/hdsm] [l]So far we have looked at varying different HTML elements, most of which have been text related. But there is more to the internet than just text. Everywhere you go you are bombarded with images. From logos, to banner adds, to backgrounds they are just about everywhere. You might think that there would be something special and complex required to display images in a webpage but I assure you there is not. All that is required is one self-closing html tag that needs a couple of attributes then you’re good to go.[/l] [hdsm]Image formats[/hdsm] [l]Before I show you the image tag I want to talk about three types of image file, JPEG, PNG, GIF. These are the most commonly used image formats on the web as they are the most widely supported by web browsers. Each of them has their advantages and disadvantages depending on the situation so it is important to know a little about each of them so you can make the best choice when choosing an image format.[/l] [hdsm]The JPEG (.jpg)[/hdsm] [l]Out of the three image formats the JPEG is the one I find myself using the most. The JPEG was originally created by ‘The Joint Photography Experts Group’. As you probably guessed by the name this format works well with what is described as ‘natural image types’. For the rest of us that means photography. The reason it works well for this type of imagery is because photography tends to have smooth variations of colour. This also means that the humble JPEG is well suited to images with gradients and varying tones and colours. A vital point to remember when dealing with JPEG’s is that they are, usually, a ‘lossy’ format. There are ‘lossless’ versions of the JPEG around but they are generally not widely supported and there are other image formats around far better suited to the task. So what does this ‘lossy compression’ thing mean? It is a form of encoding that look at the blocks that make up the image and determines the small variations in colour and then gets rid of some of those variations dependant on the level of compression chosen. The data that has been removed is gone forever. This helps to generate a smaller file but also lowers the quality of the image. If the compression is too high then the image can end up becoming pixelated. One final note about JPG’s to remember is that they [b]do not[/b] support transparency.[/l] [hdsm]The GIF (.gif)[/hdsm] [l]The Graphics Interchange Format, or ‘GIF’, was developed by Steve Wilhite at CompuServe in the late 80’s. This format uses the Lempel–Ziv–Welch (LZW) lossless data compression technique to enable a smaller file without loss of quality. The GIF allows up to 8 bits per pixel for each image and each image references its own palette of up to 256 colours. The GIF also supports transparency, in a GIF each pixel is either 100% transparent or 100% opaque. Another noteworthy point is that this format is a multi-image format which means it allows for animation. It does so frame by frame and allows for an individual palette of 256 colours per frame. Due to the limitations on colour imposed by this format it does not make it a good candidate for photography but it is well suited to line based images and logos with blocks of solid colour.[/l] [hdsm]The PNG (.png)[/hdsm] [l]The Portable Network Graphics, or ‘PNG’, was developed as an improvement on the GIF. The PNG uses a two stage lossless data compression. Pre-compression by use of a ‘prediction filter’ followed by DEFLATE lossless data compression. DEFLATE is the same compression algorithm that is used by ZIP files. I won’t go into any further details on this method of compression as it is quite complex and falls beyond the scope of this article. The PNG supports full colour non-palette based RGB and RGBA (Red, Green, Blue, Alpha) images. As well as this it also supports palette based images, with the palettes being either 32 Bit RGBA or 24 Bit RGB. The PNG also supports grey scale images as well, with the alpha channel and without. Unlike the GIF the PNG does not support animation. This is because it is a single image format, just like the JPEG. However the transparency capabilities far exceed that of the GIF. The use of Alpha Transparency in the PNG means that a pixel in a PNG image could be 50% transparent or 67% or whatever. This means that the PNG allows for far superior blending and generally much smoother graphics than the GIF could ever manage. One more note on PNG’s to remember is that in most cases the PNG file will be a better choice than the GIF. This is not always the case, there are exceptions to every rule. It’s down to you as the designer/developer to decide on a case by case basis which file format to use.[/l] [hdsm]Back to the image tag[/hdsm] [l]Now that we have discussed image formats we can now move onto the good part, actually getting the image to display on the webpage.[/l] [l]To load an image on the page HTML has provided a tag for this very purpose. [/l] [code]<img />[/code] [l]This is the tag without any of its attributes. Obviously if you put this in your HTML document at the moment it would do nothing. So how do we get from this lowly tag to having an image display on the page? Well first we need to add an attribute which is labelled as ‘src’ which tells the web browser where the image is located. So that could be a folder within the website directory or it could be external, as in from another site. So the modified tag should look like this.[/l] [code][/code] [l]You will need to replace the # with the path to the file. So if the image, called img.png, was saved in a folder, called images, in the root of the website directory then the path to the image would be images/img.png. If you try this now you’ll see the page display the image just fine. However there are a few more attributes that should be added to the image tag.[/l] [l][b]alt –[/b] This attribute specifies the alternative text displayed if the image does not load. It is also read by screen readers and search engines. For the purposes of accessibility and search engine optimisation you cannot afford to miss out this attribute. Make sure your alt text accurately describes the image and its purpose and you keep the text as unique as possible. No one likes a copycat, especially search engines. [b]title –[/b] This attribute is similar in concept to the alt attribute except this attribute displays even if the image has loaded, usually in the form of a tooltip. You may think that it is pointless to include both alt and title but for SEO and accessibility concerns it is best to include both. [b]height –[/b] This attribute takes a numerical value. This value represents the image height in pixels. So if you gave it a value of 150 then the image would be 150 pixels in height. This can be omitted and set in CSS instead, which is usually the route designers take as CSS allows for other units of measurement other than pixels. [b]width –[/b] This attribute, just like the height attribute, takes a numerical value which corresponds with the width of the image in pixels. Again this attribute can be left out and be set in CSS instead.[/l] [l]There are a few other attributes that could be set on image tags but these are the most commonly used attributes for the tag.[/l] [l]This is the end of our exploration of HTML for now. The elements we have discussed so far are among the most commonly used HTML tags but there are some tags that we have left out. For more information on HTML and its elements then please visit the W3C website at the following address:[/l] [url=http://www.w3schools.com/]http://www.w3schools.com/[/url] [l]Now that we have explored some HTML let’s see what our page looks like when viewed in a web browser.[/l] [postpic=unstyled.jpg class=img-responsive title=Html document as rendered by the browser alt=This is the html document that we have been discussing style=][/postpic] [l]The web browser reads your mark-up and displays it in the browser window. It’s not very pretty but it does have structure. However if you or I visited a webpage that looked like this then we would be leaving before we have read any of the information. As web designers we want people to take note, not take their leave.[/l] [l]In this section we learnt about HTML. I waffled endlessly about some of the most commonly used tags. So well done you made it this far and hopefully didn’t fall asleep.[/l] [l]In the next section we will be discussing how to turn our plain and boring HTML tags into something beautiful. We will do so by using CSS. If HTML is the foundations of your house then CSS is the decoration.[/l] [b][url=http://www.griffithswebdesign.com/blog/post/35][l]<< Back to HTML and CSS for beginners part 1[/l][/url] [url=http://www.griffithswebdesign.com/blog/post/38][r]Go to HTML and CSS for beginners part 3 >>[/r][/url] [/b]

HTML and CSS for beginners – Part one

[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=http://www.griffithswebdesign.com/blog/post/37]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: [url=www.griffithswebdesign.com/contact]Contact me via my website[/url] [url=mailto:michael@griffithswebdesign.com]michael@griffithswebdesign.com[/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=http://www.caniuse.com]caniuse.com[/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=http://www.griffithswebdesign.com/blog/post/37]HTML and CSS part two >>[/url][/r][/b]
Previous 1 Next 
 
Griffiths Web Design Logo by Michael Griffiths
Griffiths Web Design Logo by Michael Griffiths
Click to go to the top of the page