HTML
HTML (Hypertext Markup Language) is not a programming language
it is a markup language used to tell your browser how to structure the web pages you visit
It can be as complicated or as simple as the web developer wishes it to be
HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of the content to make it appear or act a certain way
The enclosing tags can make a bit of content into a hyperlink to link to another page on the web, italicize words, and so on
Basic Html File
HTML elements
HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.
The main parts of our element are as follows:
1. The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
Elements can also have attributes that look like the following:
2. The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
3. The content: This is the content of the element, which in this case is just text.
4. The element: The opening tag, the closing tag, and the content together comprise the element.
Attributes
An attribute should always have the following:
1. A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
2. The attribute name, followed by an equals sign.
3. The attribute value, wrapped by opening and closing quotation marks.
Self-closing tag (tags without closing tag)
HTML5: the slash is optional. HTML4: the slash is technically invalid. However, it's accepted by W3C's HTML validator. XHTML: The slash is REQUIRED.
Block vs inline elements
Block elements:
p, h1, h2, h3, h4, h5, h6 ol, ul, pre, address, blockquote, dl, div, fieldset, form, hr, noscript, table
Inline elements:
b, big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var, a, bdo, br, img, map, object, q, script, span, sub, sup, button, input, label, select, textarea
HTML Language
Examplr:
Common use: en-US, ja, zh, zh-Hans, zh-Hant, ko
Special characters
| result | Entity name | Entity number |
|---|---|---|
| |   | |
| < | < | < |
| > | > | > |
| % | % | % |
| & | & | & |
| # | # | # |
| " | " | " |
| ' | ' | ' |
| © | © | © |
| ® | ® | ® |
HTML head
1. The head of an HTML document is the part that is not displayed in the web browser when the page is loaded.
2. It contains information such as the page <title>, CSS, javascripts, links to custom favicons, and other metadata (data about the HTML, such as the author, and important keywords that describe the document.)
3. Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites
<title> element
The <title> element is metadata that represents the title of the overall HTML page.
It will be shown as the tab name, it will also be the name if when you save the page into bookmark.
<link> element
Add custom icons
Add css
Add javascript
<meta> element
"Utf-8" is a universal character set that includes pretty much any character from any human language, which means that your web page will be able to handle displaying any language
Specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines
Open Graph Data in <meta>
Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites.
Twitter also has its own similar proprietary metadata, which has a similar effect when the site's URL is displayed on twitter.com.
HTML body
Heading
Pharagraph
a
Table
| Product | Qty. | Price |
|---|---|---|
| Ice crease | 1 | 13.00 |
| Rice Noodle | 2 | 20.10 |
| Tenders | 5 | 6.45 |
| Total: | 0.00 | |
| 148.55 | ||
Form
Example:
drop-down list:selected and size
multiple selection (ctrl or cmd)
fieldset and legend