HTML Introduction
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</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
HTML Documents = Web Pages
- HTML documents describe web pages
- HTML documents contain HTML tags and plain text
- HTML documents are also called web pages
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
- The DOCTYPE declaration defines the document type (HTML 5)
- 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 - Getting Started
What You Need
You don't need any tools to learn HTML- You don't need an HTML editor
- You don't need a web server
- You don't need a web site
HTML Elements
HTML documents are defined by HTML elements.
HTML Elements
An HTML element is everything from the start tag to the end tag:|
Start
tag *
|
Element content
|
End tag *
|
|
<p>
|
This is a paragraph
|
</p>
|
|
<a
href="default.htm">
|
This is a link
|
</a>
|
|
<br
/>
|
|
|
HTML Element Syntax
- An HTML element starts with a start tag / opening tag
- An HTML element ends with an end tag / closing tag
- The element content is everything between the start and the end tag
- Empty elements are
- Some HTML elements have empty content
- closed in the start tag
- Most HTML elements can have attributes
Nested HTML Elements
Most HTML elements can be nested (can contain other HTML elements).HTML documents consist of nested HTML elements.
HTML Document Example
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The example above contains 3 HTML elements.<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
HTML Example Explained
The <p> element:
<p>This is my first paragraph.</p>
The <p> element defines a paragraph in the HTML document.The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
<body>
<p>This is my first paragraph.</p>
</body>
The <body> element defines the body of the HTML document.<p>This is my first paragraph.</p>
</body>
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The <html> element defines the whole HTML document.<body>
<p>This is my first paragraph.</p>
</body>
</html>
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
Don't Forget the End Tag
Some HTML elements might display correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph
The example above works in most browsers, because the closing tag is
considered optional. <p>This is a paragraph
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .
Empty HTML Elements
HTML elements with no content are called empty elements.<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.
No comments:
Post a Comment