1 / 200


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.

Télécharger la présentation


An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript


  2. 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.

  3. 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>

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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

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

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

  13. Formatting tags • We can use tags in combination if we want to. • <BODY>Something really <I><B>cool</B></I></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

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

  15. 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. • <FONT SIZE=6> … • Second, , the default value is a value that the browser assumes if you have not told it otherwise. E Mugejjera

  16. 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

  17. Font • <BODY>Something really <FONT FACE="ARIAL">cool</FONT></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

  18. Font • Can specify more than one font. Just do one of these... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee Ho</FONT>. • 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

  19. 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 <font> instead of <FONT>. You can even use <fOnT> if that's what you want. E Mugejjera

  20. Font • You can change the font color if you like. • <BODY>Something really <FONT COLOR="#FF0000">cool</FONT></BODY> • Check what this color looks like • We can, of course use more than one ATTRIBUTE in a <FONT> tag... • <BODY>Something really <FONT COLOR="#FF0000" FACE="ARIAL"SIZE="7">cool</FONT></BODY> E Mugejjera

  21. Font • <BODY BGCOLOR="#FFFFFF"> Something really <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT></B></I></U></BODY> • Cool will appear red etc… • Note: Multiple tags should be nested. • <TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3> E Mugejjera

  22. 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

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

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

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

  30. 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

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

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

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

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

  35. Paragraphs and Alignment • <P> is the paragraph tag. Think of a paragraph as a block of text. <BODY><P>God is good</P> </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

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

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

  38. 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 -> &nbsp; • Try this instead... E Mugejjera

  39. Special characters • The space code &nbsp; • <BODY>Something&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;really&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cool</BODY> [Output: Something really cool] E Mugejjera

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

  41. 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

  42. Tag position • <BODY>Something<B>really<BR>cool<BR>like<BR>an<BR>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

  43. Inserting images, relative paths E Mugejjera

  44. 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

  45. 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

  46. 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

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

  48. Links, image links, email links E Mugejjera

  49. 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

  50. 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

More Related