HTML
This presentation is the property of its rightful owner.
Sponsored Links
1 / 42

HTML PowerPoint PPT Presentation


  • 110 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html

HTML

Hyper Text Markup Language


What is html

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.


What is html cont

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.


Html code intro

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>


Terms

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.


Terms cont

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.


Html

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>


Tags cont

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.


Tags cont1

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.


Html strucuture

HTML Strucuture

<HTML>

<TITLE>Document Title</TITLE>

<BODY>Insert Text, Graphics and.. here </BODY>

</HTML>


Html structure cont

HTML Structure Cont…


Tag attributes

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.


Body attributes

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.


Tag attributes cont

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


Tag attributes cont1

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.


P tag

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.


Font formatting

FONT Formatting

  • <b>TEXT</b> - Bolding

  • <i>TEXT</i> - Italics

  • <u> TEXT</u> - Underline

  • <font face=“arial” size=“6” color=”blue”>Hello World!</font>


Link colours

LINK COLOURS

  • Link Colour

    • <Body link=“blue”>

  • Active Link

    • <Body alink=“red”>

  • Visited Link

    • <Body vlink=“green”>

  • <Body link=“blue” alink=“red” vlink=“green”>


Alignment of text and objects

ALIGNMENT OF TEXT and OBJECTS

  • To Centre

    <center><img src=“image.jpg”></center>


Inserting images

INSERTING IMAGES

  • HTML and Webpages work with the following image types:

    • JPG

    • GIF

    • PNG

  • <img src=“image1.jpg”>


Inserting images1

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


Image attributes

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


Image attributes1

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.


Image attributes2

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.


Anchor tag links

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.


Anchor tag links1

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


Anchor tag links2

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


Anchor tag attributes

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.


Anchor tag mailto

ANCHOR TAG - Mailto

Ex 3.

<a href=“mailto:[email protected]>

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 [email protected]


Lists

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


Ordered lists

ORDERED LISTS

<ol>

<li>Car</li>

<li>Bus</li>

</ol>

The example above will appear:

1. Car

2. Bus


Unordered lists

UNORDERED LISTS

<ul>

<li>Sault Ste. Marie</li>

<li>Sudbury</li>

</ul>

The example above will appear:

  • Sault Ste. Marie

  • Sudbury


Definition list

DEFINITION LIST

<dl>

<dt>Canada</dt>

<dd>Ontario</dd>

<dd>Quebec</dd>

</dl>

The example above will appear:

Canada

Ontario

Quebec


Table

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!


Tables cont

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.


Tables cont ex 1

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>


Tables cont ex 11

TABLES CONT… (Ex 1.)

  • This is what the example will look like!


Tables cont1

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.


Table cont

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.


Tables cont2

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>


Tables cont3

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>


Where to find more tags

WHERE TO FIND MORE TAGS

http://www.w3schools.com/tags/


  • Login