Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML Intro
Document related concepts
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
