<h1 id='intro'>Introduction</h1>
h1
,<h1>
,</h1>
,Introduction
,<h1 id='intro'>Introduction</h1>
id
,intro
,&
, end with the semicolon ;
,>
(greater) – defined in
W3C Specification,>
or >
,<!--
a comment may not contain two dashes -->
,<!DOCTYPE HTML>
<HTML>
<head>
<TITLE>Page Title</TITLE>
</head>
<BODY ID=main>
<p>Hello World!
<UL>
<LI class=main><P>First!
<LI><P>second list item
</UL>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
</head>
<body id='main'>
<p>Hello World!</p>
<ul>
<li class='main'><p>First!</p></li>
<li><p>second list item</p></li>
</ul>
</body>
</html>
<img src='http://example.com'>
– valid,<img src='http://example.com' />
– also valid,<img src='http://example.com'></img>
– also valid but not recommended.<input type='text' required>
– valid True,<input type='text' required='required'>
– valid True,<input type='text' required='1'>
– invalid True,<input type='text' required='0'>
– completely wrong,<input type='text' required='false'>
– completely wrong,<input type='text'>
– valid False.head
element may contain:
title
– set page title (required),meta
– set page metadata, at least encoding:
<meta charset='utf-8' />
(almost required)style
– CSS styles in the page,link
– a definition of related files (external style, fonts, etc.),script
– a JavaScript code or a link to a JavaScript code.<?xml version="1.0"?>
,<element />
,<?xml version='1.0' encoding='utf-8' ?>
<menu-item>
<name last_modified='1.2.2007'>category1</name>
<caption>First category</caption>
<description />
<subitems>
<menu-item>
<name>category2</name>
<caption>First Sub-category</caption>
</menu-item>
<menu-item>
<name>category3</name>
<caption>Next Sub-category</caption>
</menu-item>
</subitems>
</menu-item>
<!DOCTYPE
that specifies the DTD.application/xhtml+xml
,<!DOCTYPE html>
article
, nav
, menu
, …).selector {property: value;}
body {color: black;}
h1 {color: white}
.table_list {width: 100%}
#input_name {width: 40px}
li, a
– for an element that is either <li>
or <a>
,li a
– for an element <a>
that is contained in <li>
,li>a
– for an element <a>
that is a direct child of <li>
,li.menu
– for an element <li>
that has the class menu
.li a:visited
– a visited link inside an li
,li.menu a#first:link
– a not visited link with id first
inside an li
with the class menu
.<link rel='stylesheet' href='style.css'>
<style type='text/css'>body {color: green;} … </style>
<body style='color: green'>…
<style type="text/css">
body {color: grey; background: #eeeeee;}
h3 {background: #cccccc; color: red;}
.blue {color: blue;}
#unique {color: white;}
h3.colored {color: magenta;}
.black {color: black}
</style>
<body>
<h3>first</h3>
<h3 class='blue'>second</h3>
<h3 id='unique'>third</h3>
<h3 class='colored'>fourth</h3>
<h3 class='colored blue'>fifth</h3>
<h3 class='blue black'>sixth</h3>
</body>
body
(in rare cases html
);inline
, block
(corresponding with HTML elements);black
, white
, … (over a hundred);color: rgb(255, 0, 0)
(decimal),color: #FF0000
(hexadecimal),color: #F00
(shorthand hexadecimal),color: rgba(255, 0, 0, 0.5)
(alpha channel);color: hsl(0, 100%, 50%)
,color: hsla(0, 100%, 50%, 0.5)
(alpha channel).<!DOCTYPE
?<title>
must not occur twice in a HTML document?