Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Basics Mr. Fazzalari.

Similar presentations


Presentation on theme: "HTML Basics Mr. Fazzalari."— Presentation transcript:

1 HTML Basics Mr. Fazzalari

2 HTML Short for HyperText Markup Language, the language used to create documents on the World Wide Web. HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva.

3 HTML HTML is a collection of styles (indicated by markup tags) that define the various elements of a World Wide Web document. HTML document can be read and displayed by many different browsers running on different types of computers – platform independent!

4 HTML: What do you need? Editor (Notepad) Browser to view results
Place to put your web sit (store the files that contain the HTML code, images, music, etc.), preferably on the internet URL for your page (domain name, or folder within a domain)  if your page is on the Internet (Links to your page!)

5 HTML A Web page is best thought of as a set of visual elements (words, paragraphs, lists, tables, images, etc.) HTML defines the structure and layout of the elements on a Web page with a variety of tags. Each tag may have a set of attributes that modify the appearance or layout of the visual element contained by the tag.

6 HTML Tags Container Tags Empty Element Tags Comment Tag
<Begin formatting>some text</End formatting> For example: <B>some bold text</B> <H1>some heading </H1> Empty Element Tags For example <HR> <BR> Comment Tag <!-- Hi, I'm a comment. --> Use them document complicated layouts!

7 HTML Tags Web pages are defined using tags
Tags are used to define elements in an HTML document HTML tags are composed of a left angle bracket (<), a tag name, and a right angle bracket (>) Examples: <html>, <b>, <center>

8 HTML Tags…continued All tags that are opened, must be closed
Examples: <table>…</table> <html>…</html> <img … /> Some tags can be modified using attributes Example: <table width=“90%” border=“10”>

9 The Minimal HTML Document
<head> <title>Minimal HTML Document</title> </head> <body> </body> </html>

10 General form of an HTML document
Opening tag <html> <head> <title> Title of the document </title> </head> <body> Content of the page goes here </body> </html> Displayed on The title bar of A page!!! Head Section Title is not A heading!!! Body Section Corresponding Closing tag HEAD section has nothing to do with headings. (This is a very confusing point!)

11 What do all of those tags do?
<html> Tells the browser that this is an HTML document <head> Contains information about your page <title> Displayed in the upper left hand corner <body> Contains the content of your page

12 The Body: Defining Structure
Paragraph <p> … </p> Compresses all whitespace in between words into a single space Table <table> … </table> Can be used for layout or to display data Creates a table with rows and columns

13 The Body: Defining Structure
List <ul> … </ul> or <ol> … </ol> Unordered lists (like this one), ordered lists (numbered), definition lists Line break <br> Forces a carriage return (new line) Horizontal rule <hr>

14 The Body: Defining Text Format
Headings <hy>…</hy> (y = 1 to 6) Larger, bolder font at varying levels Emphasis <em>…</em> Displayed in italics for emphasis Code <code>…</code> Used to display computer code

15 The Body: Defining Text Format
Strong <strong>…</strong> Strong emphasis, displayed in bold Bold <b>…</b> Italic <i>…</i> Even more formats are available, plus you can create your own using CSS

16 Links and Images Linking to another document Images
<a href=“path_to_document”>title</a> Will create a link with default color formatting Relative versus absolute pathnames Images <img src=“path_to_image” alt=“info” /> Can define image height and/or width Placed in line with text

17 Miscellaneous Tags Alignment Background E-mail links
<div align=“center”> Background <body background=“file_name”> <body bgcolor=“color_code”> links <a href=“mailto: _address”></a>

18 More Info HTML guide in your text
Web terms: HTML intro and tutorials: Official HTML tags:


Download ppt "HTML Basics Mr. Fazzalari."

Similar presentations


Ads by Google