HTML - HYPER TEXT MARKUP LANGUAGE
Monday, 4 August 2014
Colors And Fonts In Html
Colours/Colors and Fonts
HTML Tutorial 3
Aims
To understand how HTML deals with font typefaces
To learn how to understand website colours and what not to do (REMOVE THIS: DO NOT USE WORDS)
To see how to add other simple formatting tags to your text
To learn to be careful on font selection
To change the background colour of your page and its limitations
The Basic Use of Fonts
If you create any document on a computer the text will be written in a font. No, this has nothing to do with baptising babies. Just accept that's the word we're going to use.
You may have heard this referred to as a 'type face'. Or you may be in another group who just work in a word processor and type away merrily in 'Times New Roman' or 'Arial' as standard and never think to change it. Whichever category of understanding you're in, the key word is FONT.
Depending on what the purpose of your page is will depend on your choice of font. This should be a careful choice to as to create the right impression. If you're making a fun page you may choose "Comic Sans MS", a formal page may simply be in "Arial" or "Arial Narrow" and if you want an air of sophistication you may use a more elaborate font.
Have a quick look in a word processor now at the fonts you have installed on your computer. Both OpenOffice and Microsoft Word let you see what the font looks like as you're having a look. Choose a font you like.
Now, open up your HTML document we have been working on. This is the simple way we define a font in HTML.
<font face="Tahoma" size="3" color="red">
This font should be in size 2 Tahoma font and coloured in red.
</font>
This font should be in size 2 Tahoma font and coloured in red
The use of HTML Attributes
These tags introduce you to a new concept - ATTRIBUTES. You will recognise the opening and closing FONT tags as being like the other opening and closing tags we have learned so far. However, inside the opening FONT tag, we now have attributes.
Attributes further define whatever is between the opening and closing tags. So in this case it means this: any text that comes before the closing FONT tag should be in Tahoma font, should be size 3, and should be coloured red. After the closing tag, the text will return to whatever the 'default' font is.
How HTML Understands Font Sizes
You're possibly wondering why the font size is set to "3" if you're used to creating documents with 10pt or 12pt text. And this is because HTML has a different way of measuring text size.
As a rough guage these are the font size equivalents:-
1 = 8pt
2 = 10pt
3 = 12pt
4 = 14pt
5 = 16pt
So don't set your font size to 12 else this will happen:
Nice small text?
How HTML Understands Colour
If you're British or have learned English from a UK source, for HTML you will need to learn to spell "colour" incorrectly! ALL references to colour in HTML, CSS, JavaScript and I would be willing to lay down a fiver that this applies in all programming contexts, you must spell it COLOR. If you don't, it will be ignored.
Secondly, using words to set colour is not ideal and does not really comply with coding standards. So now we introduce HEX CODES to you. This has nothing to do with Harry Potter curses but is short for HEXIDECIMAL.
Web-based colours are defined in terms of how much red, green and blue you want to make up your color. It is stated in terms of "#RRGGBB" - 2 numbers or letters for each of the colour components. You can use numbers 1-9 and letters a-f. If you use numbers nearer to zero then there will be less of that colour, and if you use letters nearer to "f" then there will be more of that colour.
Here are some basic colours for now - but you can play around with them as much as you like to make up the shades you want.
HEX CODE Example
#000000 Black
#ff0000 Red
#00ff00 Green
#0000ff Blue
#00ffff Light Blue
#ff00ff Violet
#ffff00 Yellow
#ffffff White
I'm not going spend hours creating a full charge because a) there are millions and b) other people have done a good job! For a basic set of hex codes head over to Web Monkey.
Applying this to Text
In the example above you saw color="red". All you have to do is replace the word "red" with a hex code. So let's use the hex code that corresponds to red - #ff0000;
<font face="Tahoma" size="3" color="#ff0000">
This font should be in size 2 Tahoma font and coloured in red.
</font>
This font should be in size 2 Tahoma font and coloured in red
So there you go - simple eh? Play around with different fonts, colours and sizes!
Adding Other Simple Formatting Things to Your Text
You might want to make font BOLD or ITALIC or UNDERLINED when writing text and this is really easy in HTML. You need to use opening and closing tags AROUND the text you want to change - here are the tags.
Bold: - <strong>bold text</strong>
Italic: - <em>italic text</em>
Underline: - <u>underlined text</u>
You must be careful when using tags that you enclose things properly. Here's an example of good HTML:
<font face="Verdana" size="3" color="#333399">
This is a good example - normal text then <strong>bold text</strong>
</font>
Notice how everything is between the font tags and the "strong" tags are properly codes. If you put the </font> tag in the wrong place then your text will come out all wrong. Here's a bad example:
<font face="Verdana" size="3" color="#333399">
This is a bad example - normal text </font> then <strong>bold text</strong>
This is bad example - normal text then bold text.
See, the font and colour change back because the closing tag was in the wrong place. So watch your opening and closing tags - if your page does not do what you're expecting, your tags may be wrong.
On this point make sure everything you are trying to display on your page is between the <body></body> tags.
A Warning on Your Font Choice
Adding fonts can be fun - you can download special ones and include them on your page, put it on the Internet and think that everything is fine.
However, just because you have "FancyHandwritingFont" on your computer doesn't mean everyone in the world does - the page will not look as great to everyone else. When you use a font that other people don't have, the page will load instead in the browser's default font - Times Roman, Arial or whatever the computer-owner has set it to.
When making a web page then you have two easy choices:-
Use standard (and potentially boring) fonts.
Use font groups (see below)
Using Font Groups
Don't rule out your favourite font completely! In the face attribute you are allowed to put in a variety of fonts, like this:-
<font face="FancyFont,Verdana,Tahoma,Arial" size="3">Some Text!</font>
When your page is loaded, the browser will look for the fonts from left to right, so put your favourite fonts first in the list and at the end put a standard font you will be happy with the page loading in.
So in this example, if "FancyFont" exists then that's what the page will display in. After that it looks for Verdana then Tahoma and then Arial.
The low-down? Specify multiple fonts to avoid disappointment! And you can always set up a link for people to download your favourite font so that your "best-look" page can be seen. Well, you will be able to once you've read the next tutorial! Just an idea.
Page Background Colour
Not everyone wants to have a boring white background, do they? Well we can easily add a background colour to the page!
This is achieved by putting an attribute in the BODY tag like this:-
<body bgcolor="#ccccff">
Simply put a hex code between the speech marks and away you go!
A few words of advice:-
Choose your colours carefully - garish colours will quickly make your visitors move on - don't give people headaches.
Make sure your font colours and your background colours compliment each other, again go easy on the eyes!
Browsers display colours slightly differently sometimes. This shouldn't be the case, but I have known differences that have made me take a different approach (see later tutorials) - so download a few of the main browsers (see below) and try your page in them to check that your page looks how you want it to.
Your First Page In HTML
Beginner HTML Tutorial - Your First Page
HTML Tutorial 2
Aims
To understand how your computer (and the Web) knows your file is a web page
To show the basic structure of a web page.
The special lines that show compliance with W3C standards.
To create your first page and show it displaying text in a web browser.
Getting Your Computer to Recognise Your File as a Web Page
If your are using the Internet, the program you are using knows that the page is for the Internet. However, on your computer are various different types of files: programs, word-processed documents, spreadsheets, pictures and a whole lot more.
Web pages have their own file types. Some examples are: HTML, PHP, SHTML, ASP, JSP. These types depend on how the page is written and what features the writer wants. If you look in your address bar in your web browser now, you will see that this page is PHP.
All the files on your computer have extensions, whether you can see that or not. The extension determines the identity of that file and what program tries to open it.
For example: Microsoft Word documents are .docx, Excel documents are .xlsx, programs are .exe (in Windows) or .app (in MacOS X).
The same applies to files for the Internet. So, for these tutorials, you must ensure that all your files that you play with are .html. Some code editors make this easy and provide the option for saving as a HTML page (TextEdit for Mac does).
However, if you are using an older version of Notepad for Windows, you will need to do the following:-
Open NotePad and then go to File -> Save As...
When you choose your filename, ensure that you put .html on the end, e.g. mypage.html
Click OK
The reason for this is that NotePad will automatically add the .txt exention which means "this file is just boring text" and your file needs to be one to open in an Internet browser!
Please Note: You will have to open your new HTML file from inside your editing program now because if you double-click it, it will open in your web browser.
Having saved a blank text document as a .html file, remember where you have saved it and let's move on!
The Basic Structure of a Web Page
As we saw on the first page, a HTML file (or web page) is coded using tags, which can define areas of a page or things on that page.
A Reminder about Tags
We will build up your understanding of tags gradually through these tutorials, but for now just remember that some tags come in pairs.
<this> is an opening tag of a pair.
</this> is a closing tag of a pair.
Got it? Then look below and see the basic layout of a web page.
<html>
<head>
</head>
<body>
</body>
</html>
What does that lot mean, then?
HTML Tag: the HTML tags go at the start and at the end of your document. This tells your browser that what falls between them should be defined as HTML. So, unless I say otherwise, don't put anything before <html or after </html>.
HEAD Tag: What comes between these tags is not intended to be displayed as part of your page. Between these tags we can tell the browser things about the page or do stuff in the background. It is a useful place for many things, and I will introduce one of them later on.
BODY Tag: Between these two tags is stuff you want to display on your page. All of it. So if you need to put more on your page, then create more space between these two tags. Simple as. You can also set a few basic settings for your page using the body tag, which we will come to later on also! One step at a time.
So there you have it! That is the structure to create a perfectly empty web page. We will add something to it in a sec!
Telling the Browser that you have Standards!
Now I will let you put something before your opening <html> tag. Didn't take me long did it? I also won't tell you to put anything else here at all!
To tell your browser, the browsers of people reading your page and W3C that your page will have standards, we need to add a special line in:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
All you need to know for now is that there are varying levels of "standards" from quite lenient to very strict. We will be going "Middle-ground" for now and using the "Transitional" standards.
The other thing to explain is that HTML itself is updated and changed over time so the "4.01" is the standards we are using. If it is deemed necessary, as the standards and capabilities of HTML change, these tutorials will also be updated.
So place that line above your <html> tag. Always have this line when you start any new HTML page. It will be very useful when we come to test our page with W3C.
Creating Your First Page
Let's put something in your head!
When you load a website in any browser, the page you loads has a title. You may not have known it, but look at the top of your window and you will see some text saying "Free HTML Tutorials". If you're using a tabbed browser some of that text may appear on your tabs too.
This is put there using the <title> </title> tags. You must use these - firstly because the standards say so, and secondly because it's partly how people will find your site when they search the web.
To make the most of this title tag, make sure that it describes what the page is about. Do not use the same title for all your pages, so check each one. So if your page was about the King Charles Spaniel and how to care for them, your title might simply be:-
<title>King Charles Spaniels - how to care for them</title>
What else goes in the head?
If you progress through all the tutorials here you will see that various things can go into the HEAD:-
Cascading Style Sheets (CSS) - defining the style of elements of your page.
JavaScript functions - to add inter-activity or to simplify your visitors' experience
External File Links - to be able load separate files into your document which eases editing across a whole website
But do not worry about this right now, I'm just painting a picture for you. Let's add something to your body!
Adding headers and text to your BODY
Your page content - whatever that is, goes between the two BODY tags. And now we can introduce you to header tags.
The TITLE tags, remember, do define the page title, but they do not display anything on your actual page. The simplest way of dividing up your page is by using relevant HEADER tags, which are in pairs like so:-
<h1>This is the largest Header</h1>
<h2>This is a second level Header</h2>
<h3>This is the largest Header</h3>
And so it continues on to h4, h5, h6. Why you would need that many, I'm not quite sure.
What HTML does for you here is that each header is a bit smaller than the previous one - without you having to set the font-size at all.
So let's use a h1 for now and see how we can add some text.
The easiest way to mark text into paragraphs is to use the <p></p> pair - see it's just a P for "paragraph". When you put some text between these HTML automatically adds some spacing before and after your paragraph.
If you look at the source code of this page (accessible through your 'View' menu), you will find a lot of these P tags. You don't have to use them, but they are very useful.
So here's a demo page:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>
Welcome to my first web page!
</p>
<p>
I will add more stuff when I know how - thanks for stopping by!
</p>
</body>
</html>
You should understand all of that now, right? If not, go back and review this tutorial again! Once you're happy, save the page above on your computer (make sure you save it as a webpage - HTML or HTM) then open the folder and load it into whatever program you use to browse the Internet!
Well Done!
INTRODUCTION OF HTML
Introduction to HTML
HTML Tutorial 1Introduction to HTML
HTML Tutorial 1
Welcome to these beginner HTML Tutorials! These lessons build on each other, but if you want to skip to a particular subject use the menu system above. But be aware that the tutorials assume you have learned everything from the previous lessons.
Aims
To understand what HTML is.
What W3C is and why standards are important
Get the (free) tools of the trade
Basic Concepts of HTML
What does HTML mean?
HTML stands for Hyper-text Mark-up Language:
Hyper-text: text fit for the Internet
Mark-up: it is not programming - it simply marks up (or labels) various parts of the document in different ways depending on how you want it to appear or behave.
Language: although it is not programming, it has its own way of 'speaking' so that it can be understood world-wide.
Basic HTML underpins how all web pages appear. There may be fancy programming, databases, forums and pictures, but those are made to appear by generating HTML.
So through these lessons you will be learning how to put together your own pages that you can put on the Internet.
HTML Works through <tags>
Web pages are coded using text-only format documents. This means all you need a simple text editor (such as Notepad in Windows or TextEdit in MacOS X) and you are good to start. NB: If you're using TextEdit make sure you set the file to Plain Text by going to the Format menu and selecting "Make Plain Text"
The web page itself and the elements inside that document are marked-up using tags. These are words and terms inside greater-than and less-than signs, like the code below.
<html>
</html>
The first tag is an 'opening tag' and the second is a 'closing tag', which is marked by the forward slash. In this example, it means that everything between the tags is marked as HTML and this will be important for you to remember as you learn more tags.
Some tags do not need closing tags, but we will learn these as we go along.
W3C Standards - are they important?
W3C is the "World Wide Web Consortium" and they set coding standards for websites. If you want to learn more about them visit their website.
Coding Standards are important. This is because people who use the Internet are from most countries of the world, using different computers and different software to view websites. Having standards gives a certain level of consistency in how pages are viewed regardless of browser or computer.
There are limitations to this and sometimes it is necessary to make changes to suit different browsers, but these tutorials teach standards-compliant HTML. We will see later on how we check if sites are standards compliant.
Get the Free Tools of the Trade
Doing simple, standard coding on new webpages does not require any money to be spent - so anyone can learn. Especially if they use free tutorials from a site like this one. So here's what you need.
Text Editor: As I said above you can use Notepad in Windows or TextEdit in MacOS X (ensure you go to Format -> Make Plain Text before you start). Alternatively, there are various free text editors that highlight your code for you, which can help. We recommend Komodo Edit (available for Windows and Mac) but try a few out and see what you're comfortable with.
Standards Compliant Browser: most web browsers (the programs you use to look at web pages are called 'browsers') are now compliant with coding standards. But these are three which are particularly good:
1. Mozilla Firefox - if you use this browser, our tip would be to download the 'Developer Toolbar' add-on, which helps to highlight problems and show when you are coding in a standards-compliant way.
2. Safari
3. Internet Explorer 8 - please ensure you have upgraded your installation of IE to version 8 using the automatic updates feature in Windows.
Subscribe to:
Posts (Atom)