html5

HyperText Markup Language is short as HTML.

The <!DOCTYPE html> declaration defines this document to be HTML5
The element is the root element of an HTML page
The element contains meta information about the document
The element specifies a title for the document The <body> element contains the visible page content The <h1> element defines a large heading The element defines a paragraph <h2 id="HTML-Page-Structure"><a href="#HTML-Page-Structure" class="headerlink" title="HTML Page Structure"></a>HTML Page Structure</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 </pre></td><td class="code"><pre><!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> My first paragraph. </body> </html> </pre></td></tr></table></figure> Link: <figure class="highlight plain"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><a href="https://www.google.com">This is a link</a> </pre></td></tr></table></figure> Images: <figure class="highlight plain"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> </pre></td></tr></table></figure> Button: <figure class="highlight plain"><table><tr><td class="gutter"><pre>1 </pre></td><td class="code"><pre><button>Click me</button> </pre></td></tr></table></figure> List: <figure class="highlight plain"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </pre></td><td class="code"><pre><h2>An Unordered HTML List</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h2>An Ordered HTML List</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </pre></td></tr></table></figure> Heading: <h1> Most important heading, <h6> the least important heading.</h6></h1></h1></body>

Bigger Headings using CSS property:

1	<h1 style="font-size:60px;">Heading 1</h1>

Horizontal Rules:

defines a thematic break in a HTML page.

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

Element:
it is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.

Paragraphs

1 2	<p>This is a paragraph.</p> <p>This is another paragraph.</p>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains      a lot of spaces
in the source     code,
but the    browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

Line Breaks

1	<p>This is<br>a paragraph<br>with line breaks.</p>

 element is displayed in a fixed-width font.
1
2
3
4
5
6
7
8
9
<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

Styles

Setting the style using CSS.

1	<tagname style="property:value;">

1.Background Color

<body style="background-color:powderblue;">

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

</body>

2.Text Color

1 2	<h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>

3.Fonts

1 2	<h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>

4.Text Size

1 2	<h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p>

5.Text Alignment

1 2	<h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p>

Formatting elements

- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small text
- Deleted text
- Inserted text
_{- Subscript text
^{- Superscript text}}

1	<b>This text is bold</b>

1	<strong>This text is strong</strong>

Quotation and Citation Elements

Defines an abbreviation or acronym

Defines contact information for the author/owner of a document
Defines the text direction

Defines a section that is quoted from another source
Defines the title of a work
Defines a short inline quotation

Comment tags

1	<!-- Write your comments here -->

Color

Background color

1 2	<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>

Text color

1
2
3

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

3.Border color

1
2
3

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

4.Color values

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

RGB value format:
rgb(red, green, blue): range from 0 to 255
#rrggbb: Hexadecimal value: 00-ff(0-255)
hsl(hue, saturation, lightness):hsl(0, 100%, 50%)
rgba(red, green, blue, alpha):rgba(255, 99, 71, 0)
hsla(blue, saturation, lightness, alpha):hsla(9, 100%, 64%, 0.4)

Styling with CSS

CSS can be added in 3 ways:

inline CSS:
it is used to apply a unique style to a single HTML element.
1
<h1 style="color:blue;">This is a Blue Heading</h1>
internal CSS:
it is used to define a style for a single HTML page.
Internal CSS is defined in the section of an HTML page, within a