html In a nutshell
The <head> element contains meta information about the document
The <body> element contains the visible page content
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on
tags: <tagname>content goes here...</tagname>
html basic
Headings
e.g., <h1>
Paragraphs <p>
Links <a> <a href="https://www.w3schools.com">This is a link</a>
local links <a href="html_images.asp">HTML Images</a>
colors
By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
You can change the default colors, e.g.:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
target Attribute
Available values: _blank, _self, _parent, _top, framename - Opens the linked document in a named frame
images
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).
Create a Bookmark
1
2
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
Images <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
The style attributes are valid in HTML5 and suggested.
Floating
let the image float to the right or to the left of a text
maps
An image-map is an image with clickable areas.
Background image
1
2
3
<bodystyle="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>
picture element
Introduced since html5.
Always specify an element as the last child element of the element. The element is used by browsers that do not support the element, or if none of the tags matched.
Buttons <button>Click me</button>
Lists
HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items) <ul> <li>Coffee</li> </ul>
elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>Content goes here...</tagname>
<br> element
which indicates a line break.
Empty elements can be “closed” in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.
<hr> 水平分割线
a thematic break.
headings
Note: Use HTML headings for headings only. Don’t use headings to make text BIG or bold.
For Bigger Headings use: <h1 style="font-size:60px;">Heading 1</h1>
<head> Element
The HTML
element has nothing to do with HTML headings.
The element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed. The element is placed between the tag and the tag:
<pre>
The text inside a
element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. link
Formating element
1
2
3
4
5
6
7
8
9
10
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is “important”.
Quotations
<q> for short and <blockquote> for long Quotations
e.g., :
e.g., <!-- Do not display this at the moment <img border="0" src="pic_mountain.jpg" alt="Mountain"> -->
Attributes
Attributes usually come in name/value pairs like: name=“value”, blank is used to sperate attributes.
e.g., <a href="https://www.w3schools.com">This is a link</a> href is an attributes.
src
width & height
alt
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen readers. This way, someone “listening” to the webpage, e.g. a blind person, can “hear” the element.
style
color, font, size etc.
e.g., <p style="color:red">I am a paragraph</p>
lang <html lang="en-US"> is important for accessibility applications (screen readers) and search engines.
title
Here, a title attribute is added to the
element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph. HTML Attributes
name Attribute
Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all.
Action Attribute
The action attribute defines the action to be performed when the form is submitted.
Target Attribute
type value _self, _blank,
TIPS
.htm or .html has no difference.
HTML tags are not case sensitive
The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
Quote Attribute Values
W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML. single quotes can also be used.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
