Basic HTML Tutorial

BASIC HTML TUTORIAL

Amber Brady

HTML tags are keywords surrounded by angle brackets like <html>HTML tags normally come in pairs like <b> and </b>The first tag in a pair is the opening tag, the second tag is the closing tag

BASIC HTML + EXAMPLES

HTML headings are defined with the <h1> to <h6> tags. H1 being the largest, H6 smallest.HTML paragraphs are defined with the <p> tag.

<p>This is a paragraph.</p><p>This is another paragraph.</p>

HTML links are defined with the <a> tag.<a href="http://www.w3schools.com">This is a link</a>

HTML images are defined with the <img> tag.<img src=“image.jpg" width="104" height="142" />


A text with a span element that can be styled with CSS.

<p>My dog has <span class=“black">black</span> eyes.</p>

An unordered HTML list:<ul>

<li>Coffee</li> <li>Tea</li> <li>Milk</li>

</ul>



<html>

<body><h1>My Web Page</h1><p>My first paragraph.</p></body></html>

The text between <html> and </html> describes the web page

The text between <body> and </body> is the visible page content

The text between <h1> and </h1> is displayed as a heading

The text between <p> and </p> is displayed as a paragraph

Example Explanation

WEB PAGE SAMPLE

Web Graphic Formats

Three main types:- GIF- JPG - PNG

Web Graphic Formats GIF – Graphic Information Format

(Best for charts, graphics: ads, logos etc.) can contain up to 256 colors support transparency. If you don’t want a

background for your graphic or don’t want it in a box.

can be animated not good for photographs. Lose quality &

files won’t be compact

Web Graphic Formats JPG – Joint Photographic Experts Group

(Best for images w/ many colors. Scanned artwork or photos)

can contain up to 16 million colors you can set the compression for each

image to reduce the file size. The more compressed however the lower the quality.

not good for images w/ few colors, such as graphics or images w/ few colors. Will leave them looking blotchy.

Web Graphic Formats PNG - Progressive Network Graphics

(Newest web graphics format) Compact and versatile. Can combine

features of GIF & JPG. (have transparent backgrounds & contain millions of colors)

supported by all modern browsers. May not appear in older browsers.

QUESTION

JPG! What web graphic format

should this image be saved as?

Take a few minutes to fill in your answers.

Short Quiz

http://www.w3schools.comhttp://www.buildwebsite4u.com/building/web-graphics-formats.shtml

SOURCES

http://www.w3schools.com/

http://www.buildwebsite4u.com/building/web-graphics-formats.shtml

http://www.buildwebsite4u.com/building/web-graphics-formats.shtml

Basic HTML Tutorial

Documents

Transcript of Basic HTML Tutorial