Introduction to HTML
What is a Web site? A collection of "pages" or files linked together and available on the World Wide Web
What do you need to create a Web site?1. Hardware
2. Software (any web-authoring software - Macromedia Dreamweaver, Adobe GoLive, Netscape Composer, etc)
3. Know-how (HTML)
Web site essentials
Computer Web Server
(FTP) connection
Stands for:HyperText Markup Language
Defined as:A simple programming language used for creating and controlling how Web pages appear
Invented by:Tim Berners-Lee around 1989-1990
Reviewed and improved by:World Wide Web Consortium (W3C) - www.w3.org/MarkUp/
What is HTML?
TAGS<element attribute value> Web page content </element>
Elements:Little labels that create the parts of a Web page: paragraph, table, fonts, images, etc
Attributes:Properties of the elements: alignment, width, height, style
Values:Properties of the attributes
An example:<table width=“800” align=“center”> Table content </table>
HTML Syntax
element attribute value attribute value
Type of document:<HTML> Your whole Web page goes here </HTML>
Head:<HEAD> Some Web page settings such as Title, Author, Page description </HEAD>
Body:<BODY> The entire visible content of your Web page </BODY>
Think of it like a person ->
A typical Web page
No Web page layout without a TABLE:<TABLE>
<TR><TD>This is row 1, column 1</TD><TD>This is row 2, column 2</TD></TR>
<TR><TD> This is row 2, column 1 </TD><TD> This is row 2, column 2 </TD></TR>
</TABLE>
Essential HTML elements - TABLE
R1C1 R1C2
R2C1 R2C2
Arrange text in PARAGRAPHS:
<P>
Use the <p> tags to start a paragraph. Don’t forget to close each paragraph with a </p>. Using this tag creates an empty one-line space between your paragraphs.<BR>When I don’t want a one-line space before my sentence, then I use the <BR> tag instead. This command makes my text to start on a new line, but without the spaces created by the paragraph tag.
</P>
Essential HTML elements –PARAGRAPHS & LINES
Go to another Web site:
<A HREF=“http://www.web-site-address.com”> The word or image you want people to click to go to this new location </A>
Go to another page in your site:
<A HREF=“name-of-your-file.htm”> The word or image you want people to click to go to this new page </A>
Send me an e-mail:
<A HREF=“mailto:[email protected]”> The word or image you want people to click to open up e-mail software </A>
Essential HTML elements – HYPERLINKS
Basic rules:
• HTML is abbreviated English: tags are logical and have meaning.
• A Web page is a combination of pieces (text, picture, multimedia) kept together by HTML tags.
• Keep the pieces small – large file size results in slow browsing.
• No capital letters, spaces or other special characters in your file names.
• Keep all files in the same folder!!!
Where to find HTML tags:• HTML Cheat sheet:
http://webmonkey.wired.com/webmonkey/reference/html_cheatsheet/index.html
In summary