BASIC HTML

BASIC HTML

Introduction to HTML • Introduction to HTML • Start, Programs, Accecories, Notepad. • <HTML></HTML>Each one of those is called a tag. There is a starting tag and a closing tag. • Tags as “talk” to the browser, or give it instructions.

Basic html • Every HTML document needs a pair of HEAD tags. • <HTML> <HEAD> </HEAD></HTML> • The only thing we have to concern ourselves with in the HEAD tags (for now) are the TITLE tags. • <HTML><HEAD><TITLE></TITLE></HEAD>

Basic html • And the bulk of the page is going to be within the BODY tags. • <HTML><HEAD><TITLE></TITLE></HEAD><BODY> </BODY></HTML> .

Basic html • <HTML> <HEAD><TITLE>My big ole bad page!</TITLE></HEAD><BODY>Hello Joe!</BODY></HTML> • Now save it, not as a text document, but as a html document. E Mugejjera

Basic html • <HTML>: tells the Web browser that this is the beginning of an HTML document • <HEAD>: tells that Web browser that this is the header for the page (you'll learn later what goes between "HEAD" tags) • <TITLE>: tells the Web browser that this is the title of the page • <BODY>: tells the Web browser that this is the beginning of the Web page content -- everything you want to say and see on your page will follow this tag. E Mugejjera

Saving • File then Save As. You will be presented with a dialog box. • Make a new folder Name it whatever you want. Then double click on it to open it up. • Where it says File name: type in "page1”.html Where it says Save as type: make sure it says All Files(*.*) • You should be able to double click on it now and see the results E Mugejjera

Basic html • Find the icon of the html file you just made and double click on it • Or In Internet Explorer, click on File/Open File In Browser and browse to the file • What you made is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components. • And, the document title is what appears at the very top of the browser window. E Mugejjera

Colours • To change background colors. • NB. Keep the other lines written • <BODY BGCOLOR="#CCFFCC"> My first web page </BODY> • If a background color is specified that is not one of the known colors, then Netscape will usually pick the closest of these colors to use. E Mugejjera

Colours • You can specify a background image instead. (Note, the image should be in the same folder as your HTML file. More on this below.) • <BODY BACKGROUND="swirlies.gif"> My first web page </BODY> • Right click on the image and choose Save Image As (or some variant thereof). • Browse to wherever your folder is then save. • Remember the file extension of the image E Mugejjera

Formatting tags • We can make things bold. • <BODY>Something really cool</BODY> • Cool • What we are telling the browser is: at the start making things bold, • and at the stop making things bold. E Mugejjera

Formatting tags • The same principle applies to italics... • <BODY>Something really cool</BODY> • really • ...and underlining. • <BODY>Something really cool</BODY> • Somethingreally cool .

Formatting tags • We can use tags in combination if we want to. • <BODY>Something really cool</BODY> • Somethingreally Cool • This is an example of nested tags. If you are going to use tag pairs, avoid confusing the browser, they should be nested, not overlapping • <THIS><THAT></THIS></THAT> Overlapping tags.... bad • <THIS><THAT></THAT></THIS> Nested tags.... good E Mugejjera

Font • can change the font size too • First add the tags... • <BODY>Something really cool</BODY>Then specify a SIZE attribute. • <BODY>Something really cool</BODY> • Something really cool E Mugejjera

Font • Try it out • Change the font sizes from 1 to 7 and observe the effect • NB. First, a <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it. • … • Second, , the default value is a value that the browser assumes if you have not told it otherwise. E Mugejjera

Font • A good example is the font size. The default font size is 3 (usually). If you say nothing it will be 3. • Every browser has a default font setting - font name, size and color. Unless you have messed with it the default is probably Times New Roman 12pt (which translates into 3 for our purposes) and it's black. • we can specify font names other than the defaults. Like ARIAL and COMIC SANS. E Mugejjera

Font • <BODY>Something really cool</BODY> • The font will only display if your viewer has that font installed on their computer. Otherwise, they will only see the default font • Arial and Comic Sans MS are pretty widely distributed with Windows. E Mugejjera

Font • Can specify more than one font. Just do one of these... Hidee Ho. • The browser looks for ARIAL. If it finds it, it uses it. If not, it goes on to HELVETICA. If it can't find that, it looks for LUCIDA SANS. And if it can't find that it uses the default font. • Go try out different fonts like Comic Sans MS,Courier NewTimes Rew Roman, Georgia ImpactTrebuchet, Verdana E Mugejjera

Font • Missing or misplacing quotation marks or a missing space or a missing greater than > sign can make our page screwed up . • Someday we will be separated from this kind of coding, but for now we just have to be careful. • Tags stand out more when using all caps. You could just as well use instead of . You can even use if that's what you want. E Mugejjera

Font • You can change the font color if you like. • <BODY>Something really cool</BODY> • Check what this color looks like • We can, of course use more than one ATTRIBUTE in a tag... • <BODY>Something really cool</BODY> E Mugejjera

Font • <BODY BGCOLOR="#FFFFFF"> Something really cool</BODY> • Cool will appear red etc… • Note: Multiple tags should be nested. • <TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3> E Mugejjera

Font • It doesn't matter which tag is first. It's not like if you want to make something red and bold you have to do one or the other first. You can do them in any order you want. Such as... • <TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2> • The fastest way to confuse the browser, not to mention yourself is to overlap the tags... • <TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2> E Mugejjera

Font • Another occasionally useful tag worth mentioning are section headings. They come in sizes 1-6. • <H1>Something really cool<H1> • <H2>Something really cool<H2> • <H3>Something really cool<H3> • <H4>Something really cool<H4> • <H5>Something really cool<H5> • <H6>Something really cool<H6> • NB H1 is bigger than H2, H2 greater than H3.. in that order. Try them out. E Mugejjera

Alignment • A useful heading attribute is ALIGN... fairly self-explanatory. • <H2 ALIGN="left">Something really cool<H2> • <H2 ALIGN="center">Something really cool<H2> • <H2 ALIGN="right">Something really cool<H2> • Something really cool • Something really cool • Something really cool E Mugejjera

Defaults • The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are... • Text is usually blackLinks are usually blueActive link is usually redVisited link is usually purple • You can change these if you NEED to. E Mugejjera

Defaults • You can change these defaults for the entire document in the <BODY> tag. • <BODY BGCOLOR="#00000" TEXT="#FFFF66" LINK="#00FF66" VLINK="#00BB33" ALINK="#00CCFF">Something really cool</BODY> E Mugejjera

Source code • You can view the HTML code of any page you happen to be viewing by choosing View/Document Source in your browser. • So, as you surf along and you run into a really neat page and you find yourself thinking "How'd they do that?", the answer is only a couple clicks away. • View its source! E Mugejjera

Basic formatting, line breaks, paragraph aligning Line breaks E Mugejjera

Line breaks • <BODY> We are web designers. Aren’t we? </BODY> Out put: We are web designers aren’t we? E Mugejjera

Line breaks • The browser doesn't recognize formatting. Unless you tell it otherwise, it just displays the characters in a steady stream. • If you want to start a new line you have to use a line break. E Mugejjera

Line breaks • <BODY> Hey! What's going on here?? </BODY> OUTPUT Hey What’sgoing on here?? E Mugejjera

Line breaks <BODY> Learning a language takes time Practice. </BODY> OUTPUT Learning a language takes timePractice E Mugejjera

Line breaks • basically says - start a new line. • Can use the tag to skip a line or even many lines if there is need. • E.g. E Mugejjera

Line breaks <BODY> Practice day and night </BODY> Practiceday andnight E Mugejjera

Paragraphs and Alignment • is the paragraph tag. Think of a paragraph as a block of text. <BODY>God is good </BODY> • By itself it doesn't do much. Although with most browsers, starting a new paragraph does have the effect of skipping a line. E Mugejjera

Paragraphs and Alignment • This tag is good for aligning stuff. <BODY> God is good. To every personTo you also! You may not know Indeed to all.</BODY> Try this out on your own. [Can center, left align, right align all page contents] E Mugejjera

Paragraphs and Alignment • Although we used a closing tag (), it is not entirely necessary. • Nearly all browsers will assume that when a new paragraph has begun, the old one must have ended. • Some stuff More stuff is the same as... • Some stuffMore stuff E Mugejjera

Special characters <BODY>God is good</BODY> [ Output: God is good ] • The browser won't recognize more than 1 space. • There is a nifty little code that means "space" to the browser -> • Try this instead... E Mugejjera

Special characters • The space code • <BODY>Something really cool</BODY> [Output: Something really cool] E Mugejjera

Special characters • There are quite a few of these special characters. Here are six more. • (Note- these should always be lower case) • non-breaking space, < < less-than symbol, > > greater-than symbol, & & ampersand " " quotation mark, soft hyphen E Mugejjera

Special characters • You don't need to use them all the time, just when typing the real character would confuse the browser. • How do you know when that is? No hard and fast 'rule'. • It will just come with a little practice. Try them out even if you make mistakes, don’t give up, don’t be afraid of trying something new. Mistakes are our friends but we should not make the same mistakes a number of times! E Mugejjera

Tag position • <BODY>Somethingreally cool like an icecube!</BODY>It does not matter on which line you put your tags, if they are proper, they will be interpreted wherever they are! • Somethingreallycoollikeanicecube E Mugejjera

Inserting images, relative paths E Mugejjera

Images • The image must already been saved before we can use it, preferably in the same folder as the HTML code. • Can specify image with the <IMG> (image) tag. • <BODY> <IMG></BODY> • We must also specify the source and the size. • <BODY><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 > </BODY> • You can use Microsoft Paint to get the exact size of the image. E Mugejjera

Images • The browser can figure out how big the image is all by itself. But we give the dimensions then because then, the browser can simply reserve a space for the image, then load the rest of page. • Once the entire page loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. • So, the browser functions much better with image dimensions. E Mugejjera

Images • <BODY> <IMG SRC="chef.gif" WIDTH=300 HEIGHT=101> </BODY> • We can however adjust the dimensions until the image appears the way we want it on the web page. • <BODY><IMG SRC="chef.gif" WIDTH=40 HEIGHT=200> </BODY> The same image has now been changed in size! E Mugejjera

Images • Well, look at this little red dot -> . • It's a 1x1 square. We can change its appearance greatly. <BODY><IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=1> <IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=2> <IMG SRC="red_dot.gif" WIDTH=500 HEIGHT=8> <IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200> </BODY>Try it out. E Mugejjera

Links, image links, email links E Mugejjera

Links • A URL is just an address. • <BODY>Go to <A HREF="http://www.yahoo.com/">Yahoo!</A></BODY> • Go to yahoo! • <BODY>Go to <A HREF="http://www.google.com/"> google</A></BODY> • Go to google E Mugejjera

Links • An email link works the same way. We just use an email address instead of a page address. • <BODY>Send me <A HREF="mailto:emma@yahoo.com">Mail!</A></BODY> • [ Output: Send me Mail ] E Mugejjera

BASIC HTML

BASIC HTML

Presentation Transcript

Basic HTML Workshop

The basic HTML

Basic HTML Workshop

Basic HTML

Basic HTML Tutorial

BASIC HTML CODING

Basic HTML

Basic HTML Workshop

Basic HTML

Basic HTML

Basic HTML

Basic HTML Workshop

Basic HTML

Basic HTML

BASIC HTML

Basic HTML Tags

HTML basic setup

15.2 More Basic HTML

Basic HTML

WWW and Basic Html

Basic tutorial html