1 / 42

HTML

HTML. Hyper Text Markup Language. What is HTML . HTML stands for the H yper T ext M arkup L anguage. HTML is the major language of the Internet's World Wide Web. Web sites and web pages are written in HTML. What is HTML cont….

audra-hoffman
Download Presentation

HTML

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.

E N D

Presentation Transcript

  1. HTML Hyper Text Markup Language

  2. What is HTML • HTML stands for the Hyper Text Markup Language. • HTML is the major language of the Internet's World Wide Web. • Web sites and web pages are written in HTML.

  3. What is HTML cont… • With HTML and the world wide web, you have the ability to bring together text, pictures, sounds, and links... all in one place! • HTML files are plain text files, so they can be composed and edited on any type of computer... Windows, Mac, UNIX, whatever.

  4. HTML Code Intro. • HTML is composed of tags. • HTML tags are always enclosed in angle-brackets ( < > ) and are case-insensitive; that is, it doesn't matter whether you type them in upper or lower case. • Tags typically occur in begin-end pairs. These pairs are in the form • <tag> ... </tag>

  5. Terms • Content • The actual 'meat' of a document -- all of the words, images, and links which a user can read and interact with. We use this term to mean "whatever you put in the document." • Hyperlink • A link from one document to another, or to any resource, or within a document. The default is usually blue, underlined text for unviewed links. However, you may choose the colour for active, viewed and unviewed links.

  6. Terms cont… In-line • "in-line" refers to the placement of resources where they are placed one after the other directly into a document. URL • The Uniform Resource Locator is a "standard" way of expressing the location and data type of a resource. URLs in general take the form "protocol://address“ – the protocol maybe an HTTP, FTP or telnet site …and so on. The address is merely the server and pathname (if any) of a given resource or page.

  7. TAGS • HTML • The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends. The absolute most basic of all possible Web documents is: • <HTML> </HTML>

  8. TAGS Cont… • TITLE • This container is placed after the opening HTML tag. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar, and also appears in the history list.

  9. TAGS Cont… • BODY • BODY comes after the TITLE tag. Between the BODY tags, you find the content that is displayed in the browser window. All of the text, the graphics, and links, and so on -- these things occur between the BODY tags.

  10. HTML Strucuture <HTML> <TITLE>Document Title</TITLE> <BODY>Insert Text, Graphics and.. here </BODY> </HTML>

  11. HTML Structure Cont…

  12. TAG ATTRIBUTES • With HTML, the web developer has the ability to change the appearance and ‘look-and feel’ of certain tags. • For example, with the BODY tag, one may modify the background colour or place an image as the background. • The modification to these attributes are placed after the actual tag and within the brackets.

  13. BODY ATTRIBUTES • The attributes in the BODY tag allow you to control the overall appearance of the document by specifying a background color or background image (BGCOLOR, BACKGROUND), and the color of text, links, visited and activated links.

  14. TAG ATTRIBUTES CONT… • The structure of the attribute is as follows. <body bgcolor=“red”> Note: The attribute change is placed in quotes and an equal sign is placed between the attribute and the value to change

  15. TAG ATTRIBUTES CONT… • Example 1. To change the colour of the background <body bgcolor=“blue” link=“black” alink=“green” vlink=“red”> Note: You can change more than one attribute per tag.

  16. P Tag The <p> tag defines a paragraph Ex. <p align=“right">Insert Text</p> Align attribute specifies the alignment of the text within the paragraph.

  17. FONT Formatting • <b>TEXT</b> - Bolding • <i>TEXT</i> - Italics • <u> TEXT</u> - Underline • <font face=“arial” size=“6” color=”blue”>Hello World!</font>

  18. LINK COLOURS • Link Colour • <Body link=“blue”> • Active Link • <Body alink=“red”> • Visited Link • <Body vlink=“green”> • <Body link=“blue” alink=“red” vlink=“green”>

  19. ALIGNMENT OF TEXT and OBJECTS • To Centre <center><img src=“image.jpg”></center>

  20. INSERTING IMAGES • HTML and Webpages work with the following image types: • JPG • GIF • PNG • <img src=“image1.jpg”>

  21. INSERTING IMAGES • In HTML, images are defined with the <IMG> tag. To correctly insert an image we need to also specify the source. • The source can be a file specified on the same webserver and folder Ex: <img src=“filename.jpg”> • The source may also point to an URL that contains the specified address of the image Ex: http://www.site.com/images/dog01.jpg

  22. IMAGE ATTRIBUTES • ALT • The ALT attribute provides specific text to display when the image is not available. • It is also useful to visually impaired users who can not see the image but can obtain a verbal description of that image. Ex: <img src=“dog01.jpg" alt=“Black Dog">

  23. IMAGE ATTRIBUTES • WIDTH AND HEIGHT In HTML, we can adjust the absolute and relative size of an image. Absolute is provided in pixels while relative is provided in percentages.

  24. IMAGE ATTRIBUTES • WIDTH AND HEIGHT Ex 1. <img src=“dog01.jpg" width=“20” height=“30”> In this example the width is set to 20 pixels and the height 30 pixels. Ex 2. <img src=“dog01.jpg" width=“50%” height=“50%”> In this example, the width and height are both set to 50% of the original size of the image.

  25. ANCHOR TAG (LINKS) • Hyperlinks, are active text or images that when clicked on bring the web browser to a new page or item. • HTML uses the anchor <a> tag to create hyperlinks. • An anchor can point to any resource on the web; another webpage, an image, an URL or a sound or movie clip.

  26. ANCHOR TAG (LINKS) Ex 1: <a href=“page2.html”>Click Here!</a> In this example, when the user clicks on the words ‘Click Here’ the web browser will open a webpage called page2.html

  27. ANCHOR TAG (LINKS) Ex 2: <a href=“http://www.google.com”>Click to go!</a> In this example, when the user clicks on the words ‘Click to go!’ the web browser go to the site www.google.com

  28. ANCHOR TAG ATTRIBUTES • One popular attribute with the <a> tag is the target, which specifies where the link will open – a new or current browser window. Current window is the default Ex. <a href=“http://www.google.com” target=“_blank”>Click to go!</a> In the example above, the google website will be opened in a new window.

  29. ANCHOR TAG - Mailto Ex 3. <a href=“mailto:janedoe@hotmail.com”> Email Me</a> In this example, when the user clicks on the words Email Me the web browser will open the default email program with an email addressed to janedoe@hotmail.com

  30. LISTS • HTML can provide web developers with an ordered list (numbered) an unordered list (bulleted) or a definition list (tabbed and un-bulleted). • Lists are useful when arranging text so that it appears neat and clean. • Ordered List <ol> tag • Unordered List <ul> tag • Definition List <dl> tag

  31. ORDERED LISTS <ol> <li>Car</li> <li>Bus</li> </ol> The example above will appear: 1. Car 2. Bus

  32. UNORDERED LISTS <ul> <li>Sault Ste. Marie</li> <li>Sudbury</li> </ul> The example above will appear: • Sault Ste. Marie • Sudbury

  33. DEFINITION LIST <dl> <dt>Canada</dt> <dd>Ontario</dd> <dd>Quebec</dd> </dl> The example above will appear: Canada Ontario Quebec

  34. TABLE • Tables in HTML Code, can be as a traditional table to place text and graphics like a spreadsheet. • But the power of a table is to use it as a container to arrange all of your contents with one or several tables • The entire web page can be coded within one or several tables!

  35. TABLES CONT… • Tables use three basic tags, which all tables must have: • <TABLE> (Table Create) creates the table. • Most of the overall properties of the table are defined here, such as if it has borders and what is the table's background color. • <TR> (Table Row) defines each row within a table. • <TD> (Table Data) defines each cell within a row.

  36. TABLES CONT… (Ex 1.) <TABLE> <TR> <TD>Jane</TD> <TD>19</TD> </TR> <TR> <TD>John</TD> <TD>18</TD> </TR> <TR> <TD>Anne</TD> <TD>16</TD> </TR> <TR> <TD>Bob</TD> <TD>17</TD> </TR></TABLE>

  37. TABLES CONT… (Ex 1.) • This is what the example will look like!

  38. TABLES CONT… • CELLPADDING and CELLSPACING • By default, table cells tend to be squeezed close to each other. To give your table cells a little more breathing room, use CELLPADDING and CELLSPACING. • CELLSPACING controls the space between table cells. Although there is no official default, browsers usually use a default of 2.

  39. TABLE CONT… • COLSPAN and ROWSPAN • Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up.

  40. TABLES CONT… • To add headings, you add the <TH> tag, which stands for Table Heading. The code is: <TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2>Production</TH> </TR>

  41. TABLES CONT… • Example of Colspan <TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2>Production</TH> </TR> <TR> <TD>Ray</TD> <TD>1493</TD> </TR> <TR> <TD>Sal</TD> <TD>3829</TD> </TR> <TR> <TD>Mel</TD> <TD>0283</TD> </TR> <TR> <TH COLSPAN=2>Sales</TH> </TR> <TR> <TD>Hal</TD> <TD>4827</TD> </TR> <TR> <TD>Kel</TD> <TD>7246</TD> </TR> <TR> <TD>Dan</TD> <TD>5689</TD> </TR> </TABLE>

  42. WHERE TO FIND MORE TAGS http://www.w3schools.com/tags/

More Related