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.
HTML Documents = Web Pages
HTML documents describe web pages- HTML documents contain HTML tags and plain text.
- HTML documents are also called web pages.
- The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML
documents and display them as web pages. The browser does not display the HTML tags,but uses the tags to interpret the content of the page:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
• 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
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
Your Result:
This is heading 1
This is heading 2
This is heading 3
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Your Result:
This is a paragraph.
This is a paragraph.
This is a paragraph.
HTML Links
HTML links are defined with the <a> tag.<html>
<body>
<a href="http://www.w3schools.com">This is a link</a>
</body>
</html>
HTML Images
HTML images are defined with the <img> tag.<html>
<body>
<img src="w3schools.jpg" width="104" height="142" />
</body>
</html>
HTML Lines
The <hr /> tag creates a horizontal line in an HTML page.The hr element can be used to separate content:
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
</body>
</html>
Output:
The hr tag defines a horizontal rule:
This is a paragraph
HTML Line Breaks
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:Example:
<p>This is<br />a para<br />graph with line breaks</p>
HTML Elements
An HTML element is everything from the start tag to the end tag:
Element content
<p>
This is a paragraph
<a href="default.htm" > This is a link
<br />
Start tag *
End tag *
</p>
</a>
* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use
uppercase HTML tags.
HTML Text 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><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Your Result:
This text is bold
This text is strong
This text is big
This text is italic
This text is emphasized
This is computer output
This is subscript and superscript
HTML Fonts
<html><body>
<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>
<p>The font element is deprecated in HTML 4. Use CSS instead!</p>
</body>
</html>
Output:
This paragraph is in Arial, size 5, and in red text color.
This paragraph is in Verdana, size 3, and in blue text color.
The font element is deprecated in HTML 4. Use CSS instead!
HTML Styles – CSS
Styling HTML with CSSCSS 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 Cascading Style Sheet files (CSS files)
- in the <style> element in the HTML head section
- in the style attribute in single HTML elements
<body style="background-color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red;">
This text is in Verdana and red</p>
<p style="font-family:times;color:green;">
This text is in Times and green</p>
<p style="font-size:30px;">This text is 30 pixels high</p>
</body>
</html>
Output: /*all display content are in 1 box which is colourful*/
Look! Styles and colors
This text is in Verdana and red
This text is in Times and green
This text is 30 pixels high
good job :)
ReplyDelete