content
<dl
>
<dt
>First item</dt
>
<dd
>Second item</dd
>
<dt
>Third item</dt
>
<dd
>Fourth item</dd
>
<dl
>
The WHO was founded in 1948.
<!-- good -->
<link rel="stylesheet" href="styles.css">
<img src="../picture/imageMap.jpg" alt="imageMap" >
<!-- bad -->
<link rel = "stylesheet" href = "styles.css">
<img src = "../picture/imageMap.jpg" alt = "imageMap" >
This text will be written from right to left
This text will be written from right to leftHere are the block-level elements in HTML:
address
> <article
> <aside
>code
> <blockquote
> <dd
>div
> <dl
> <dt
>fieldset
> <figcaption
> <figure
>footer
> <form
> <h1
>
<h6
> <header
> <hr
>li
> <main
> <nav
>noscript
> <ol
> <p
>pre
> <section
> <table
>tfoot
> <ul
> <video
>RGB values, HEX values, HSL values, RGBA values, and HSLA values.
Same as color name "Tomato":
Same as color name "Tomato", but 50% transparent:
<code>
For Computer CodeThe HTML <code>
element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font. Notice that <code>
element does not preserve extra whitespace and line-breaks. To fix this, you can put the <code>
element inside a <pre>
element:
hello world
<!--For Computer Code-->
<code
>
<p
>
hello world
</p
>
</code
>
<!--use pre-->
<pre
>
<code
>
hello world
</code
>
</pre
>
<kbd>
For Keyboard InputThe HTML element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.
Save the document by pressing Ctrl + S
<!--For Keyboard Input-->
<p
>
Save the document by pressing
<kbd
>
Ctrl + S
</kbd
>
</p
>
<samp>
For Program OutputThe HTML <samp>
element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.
Hello World
<!--For Program Output-->
<p
>
<samp
>
Hello World
</samp
>
</p
>
<var>
For VariablesThe HTML <var>
element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.
x = 10;
<!--For Variables-->
<p
>
<var
> x </var
><code
>
= 10;
</code
>
</p
>
ASCII, ANSI, ISO-8859-1, UTF-8, Description
ASCII uses the values from 0 to 31 (and 127) for control characters. ASCII uses the values from 32 to 126 for letters, digits, and symbols. ASCII does not use the values from 128 to 255.
ANSI is identical to ASCII for the values from 0 to 127. ANSI has a proprietary set of characters for the values from 128 to 159. ANSI is identical to UTF-8 for the values from 160 to 255.
Number | ASCII | |
---|---|---|
33 | ! | ! |
34 | " | " |
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
Reserved characters in HTML must be replaced with character entities. Entity names are case sensitive.
Description | Entity Name | Entity Number | Output |
---|---|---|---|
les Then | < | < | < |
greater Then | > | > | > |
Non-breaking Space | | ||
ampersand | & | & | & |
double quotation | " | " | " |
single quotation (apostrophe) | ' | ' | ' |
cent | ¢ | ¢ | ¢ |
pound | £ | £ | £ |
yen | ¥ | ¥ | ¥ |
euro | € | € | € |
copyright | © | © | © |
registered trademark | ® | ® | ® |
LEFTWARDS ARROW | ← | ← | ← |
UPWARDS ARROW | ↑ | ↑ | ↑ |
RIGHTWARDS ARROW | → | → | → |
DOWNWARDS ARROW | ↓ | ↓ | ↓ |
BLACK SPADE SUIT | ♠ | ♠ | ♠ |
BLACK CLUB SUIT | ♣ | ♣ | ♣ |
BLACK HEART SUIT | ♥ | ♥ | ♥ |
BLACK DIAMOND SUIT | ♦ | ♦ | ♦ |
link | link |
A diacritical mark is a "glyph" added to a letter. Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.
Construct | Character | Output |
---|---|---|
à | a | à |
ć | c | ć |
n̂ | n | n̂ |
õ | o | õ |
Symbols that are not present on your keyboard can also be added by using entities.
Description | Entity Name | Entity Number | Output |
---|---|---|---|
FOR ALL | ∀ | ∀ | ∀ |
PARTIAL DIFFERENTIAL | ∂ | ∂ | ∂ |
THERE EXISTS | ∃ | ∃ | ∃ |
EMPTY SETS | ∅ | ∅ | ∅ |
NABLA | ∇ | ∇ | ∇ |
ELEMENT OF | ∈ | ∈ | ∈ |
NOT AN ELEMENT OF | ∉ | ∉ | ∉ |
CONTAINS AS MEMBER | ∋ | ∋ | ∋ |
N-ARY PRODUCT | ∏ | ∏ | ∏ |
N-ARY SUMMATION | ∑ | ∏ | ∑ |
Emojis are characters from the UTF-8 character set:
Emojis look like images, or icons, but they are not. They are letters (characters) from the UTF-8 (Unicode) character set.
If not specified, UTF-8 is the default character set in HTML.
Characters | UTF-8 Characters, ASCII | Output |
---|---|---|
A | A | A |
B | B | B |
C | C | C |
To let the browser understand that you are displaying a character, you must start the entity number with and end it with ; (semicolon). Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.
Characters | imoji |
---|---|
😀 | 😀 |
😍 | 😍 |
💗 | 💗 |
link | emojis |
font-suze | imoji |
---|---|
font-size: 40px; | 😍 |
font-size: 50px; | 😍 |
font-size: 60px; | 😍 |
The <figure>
tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption>
tag defines a caption for a <figure>
element. The <figcaption>
element can be placed as the first or as the last child of a <figure>
element.
<figure
>
<img src ="./picture/tobu mone rekho.jpg" alt ="tobu mone rekho" >
<figcaption
>
Fig.1 - Tobu mone rekho
</figcaption
>
</figure
>
SVG Graphics
SVG defines vector-based graphics in XML format.
SVG stands for Scalable Vector Graphics
A link does not have to be text. A link can be an image or any other HTML element!
There is no difference between the .htm and .html file extensions! Both will be treated as HTML by any web browser and web server.
The HTML <head>
element is a container for the following elements:
<title>, <style>, <meta>, <link>, <script>, and <base>
HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information.
The "title" element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The "title" element is required in HTML documents! The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
The "style" element is used to define style information for a single HTML page:
The "link" element defines the relationship between the current document and an external resource.
The "meta" element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings. The metadata will not be displayed on the page, but are used by browsers (how to display content or reload page), by search engines (keywords), and other web services.
Define the character set used:
<meta charset ="UTF-8" >
Define keywords for search engines:
<meta name ="keywords"content ="HTML, CSS, JavaScript" >
Define a description of your web page:
<meta name ="description"content ="Free Web tutorials" >
Define the author of a page:
<meta name ="author"content ="Md Ashik Mahmud" >
Refresh document every 30 seconds:
<meta http-equiv ="refresh"content ="30" >
Setting the viewport to make your website look good on all devices:
<meta name ="viewport"content ="width=device-width, initial-scale=1.0" >
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
<img src ="../picture/imageMap.jpg" alt ="imageMap" usemap ="#testmap"> <map name ="testmap"> <area shape ="rect" coords ="250, 264, 630, 607" href ="./laptop.html" alt ="laptop"> <area shape ="circle" coords ="740, 566, 38" href ="./mouse.html" alt ="mouse"> <area shape ="" coords ="" href ="" alt =""> </map>
Here are the inline elements in HTML:
An inline element does not start on a new line. An inline element only takes up as much width as necessary. An inline element cannot contain a block-level element!
<a
> <abbr
> <acronym
>
<b
> <bdo
> <big
>
<br
> <button
> <cite
>
<code
> <dfn
> <em
>
<i
> <img
> <input
>
<label
> <map
> <object
>
<output
> <q
> <samp
>
<script
> <select
> <small
>
<span
> <strong
> <sub
>
<sup
> <textarea
> <time
>
<tt
> <var
>
The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element \ with the same id in an HTML document. the id attribute must be unique within the HTML document. The id name is case sensitive! The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).
<script
>const
x = document.getElementById("lion"); // x = lion </script
>
<div
id ="lion"> lion </div
>
The HTML <iframe>
tag specifies an inline frame. An HTML iframe is used to display a web page within a web page.
<iframe
src ="url" title ="description" height ="200" width ="300"> </iframe
>
value,
I am a student.
You are a student.
<body>
<p id="my">
I am a student.</p>
<p id="you">
You are a student.</p>
<script>
document.getElementById("you").innerHTML = "You are a teacher";
</script>
</body>
HTML has several semantic elements that define the different parts of a web page:
- <header>
- -Defines a header for a document or a section
- <nav>
- Defines a set of navigation links
- <section>
- - Defines a section in a document
- <article>
- - Defines an independent, self-contained content
- <aside>
- - Defines content aside from the content (like a sidebar)
- <footer>
- - Defines a footer for a document or a section
- <details>
- - Defines additional details that the user can open and close on demand
- <summary>
- - Defines a heading for the element
An unordered HTML list:
An ordered HTML list:
Control List Counting
<ol start ="50"> <li>first<li> <li>second<li> </ol> <ol type ="I"start ="10"> <li>first<li> <li>second<li> </ol>
Nested HTML Lists
<ul> <li>Ashik<li> <li>hobby <ul> <li>watching movie<li> <li>Gaming<li> <ul> <li> </ul>
A list item (< li >) can contain a new list, and other HTML elements, like images and links, etc.
<dl> <dt>name<dt> <dd>- my name<dd> </dt>
Multimedia on the web is sound, music, videos, movies, and animations. The MP4, WebM, and Ogg formats are supported by HTML.
hello world.
A file path describes the location of a file in a web site's folder structure.
An absolute file path is the full URL to a file. such as: src="https://www.w3schools.com/images/picture.jpg"
A relative file path points to a file relative to the current page. such as: src="/images/picture.jpg"
Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes and viewports.
In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes.
/* Use a media query to add a break point at 800px: */
@media
screen
and
(max-width:
850
px
) {
.left, .main, .right
{
width:
100
%
;
/* The width is 100%, when the viewport is 800px or smaller */
}
}
All popular CSS Frameworks offer responsive design. W3.CSS, Bootstrap
Examples of non-semantic elements: <div>
and <span>
- Tells nothing about its content.
Examples of semantic elements: <form>
, <table>
, and <article>
- Clearly defines its content.
<article>
<aside>
<details>
<figcaption>
<figure>
<header>
<footer>
<main>
<mark>
<nav>
<section>
<summary>
<time>
<p
> paragraph </p
>
HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.
<img
href ="url" height ="200" width ="300">
<img
href ="url" alt ="image"
height ="200"
width ="300">
There is no difference between the .htm and .html file extensions! Both will be treated as HTML by any web browser and web server.
The
The "datalist" element specifies a list of pre-defined options for an "input" element. Users will see a drop-down list of the pre-defined options as they input data. The list attribute of the "input" element, must refer to the id attribute of the "datalist" element.
This is Bold text
This is Important text
This is Italic text
I Emphasized text that
Marked text
This is the Smaller text of the paragraph
Discount: Deleted text
Inserted text Under line
Subscript text TEXT Superscript text
Here is quote