Download HTML Intro

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Cascading Style Sheets wikipedia , lookup

Transcript
HTML INTRO
Introduction to Programming
Books
World Wide Web
World Wide Web
World Wide Web
World Wide Web
HTML
•
What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
•
HTML Tags
HTML markup tags are usually called HTML tags
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 start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags
Structure
HTML Introduction
Character Encoding/Stylesheets/Javascript
HTML Attributes
Rules
Rules
New Elements
Browser Support
Internet Explorer
HTML Headings
Semantic Elements
Divisions
CSS
Article Tag
HTML Basic
• HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• HTML Links
<a href="http://www.w3schools.com">This is a link</a>
• HTML Images
<img src="w3schools.jpg"/>
HTML Basic
Prepare this page in Notepad, the picture will act as a link.
HTML Lines
• HTML Lines
The <hr /> tag creates a
horizontal line in an HTML
page.
<p>This is a
paragraph</p>
<hr />
<p>This is a
paragraph</p>
<hr />
<p>This is a
paragraph</p>
HTML Formatting
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
HTML Fonts (not supported)
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
HTML Styles
• Styling HTML with CSS
CSS was introduced together with HTML 4, to provide a better way
to style HTML elements.
CSS can be added to HTML in the following ways:
• in separate style sheet files (CSS files)
• in the style element in the HTML head section
• in the style attribute in single HTML elements
HTML Styles
• HTML Style Example - Background Color
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
HTML Styles
• HTML Style Example - Font, Color and Size
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A
paragraph.</p>
</body>
</html>
HTML Styles
• HTML Style Example - Text Alignment
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Box Model
Hyperlinks
Hyperlinks
HTML Lists
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML Lists
HTML Definition Lists
A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list)
and <dd> (describes the item in the list)
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Tables
HTML Tables
HTML Tables
HTML Tables
HTML Tables
 http://www.silentblade.com/SplitImage.zip
Tables
HTML INTRO
Introduction to Programming