Edited on Dillinger
Study website: W3school
HTML basic knowledge
Contents
Definition
HTML means Hyper Text Markup Language HTML is not a programming language, instead, 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 commonly referred to as HTML tags.
- HTML tags are keywords surrounded by Angle brackets, such as < HTML >
- HTML tags usually come in pairs, such as and
- The first tag in the tag pair is the start tag, and the second tag is the end tag
- Start and end tags are also known as opening and closing tags
- HTML documents = web page
- HTML documents describe web pages
- HTML documents contain HTML tags and plain text
- HTML documents are also known as web pages
- HTML editor
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
- The role of a Web browser is to read HTML documents and display them as Web pages.Instead of displaying HTML tags, browsers use them to interpret the content of the page:
<!DOCTYPE HTML>
<html>
<body>
<h1>My first title</h1>
<p>My first paragraph</p>
</body>
</html>
HTML basics
- A few general attributes:
| Attributes | Value | Description |
|---|---|---|
| class | classname | Specifies the classname of the element |
| id | id | Specifies the unique id of the element |
| style | style definition | Specifies the inline style of an element |
| title | text | Additional information for specified elements (available in tooltips) |
- A few facts:
- value of attributes should be inside of the “ “, some special cases should be ‘ ‘ such as : name=’Bill “HelloWorld” Gates’
- All contiguous Spaces or blank lines are counted as only one space.
- empty element
- draw a horizontal line: ```html
- <hr /> - newline: ```html <br /> - comment:
<!-- This is a comment --> <!--[if IE 8]> .... some HTML here .... <![endif]--> - Put some attributes inside of style:
<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> <h1 style="text-align:center;font-family:arial;color:red;font-size:20px;">This is a heading</h1> </body> </html> - Suitable for display codes(which keeps the spaces and blank lines):
<code> <pre> def study(a): c = a + 1 return a </pre> </code>- results:
def study(a): c = a + 1 return a</code>
- results:
- Math equations:
<p>Einstein wrote:</p> <p><var>E = m c<sup>2</sup></var></p>