Scribd
Upload
9 views

html_notes

Uploaded by

uniquefiles10
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

html_notes

Uploaded by

uniquefiles10
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

2021

HTML 5
Documentation

Write by:-
Najuthiran
5/26/2021
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

...................

</body>
</html>

<tagname> Content goes here...</tagname>

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

<a href="https://www.w3schools.com">Visit W3Schools</a>

<img src="img_girl.jpg">

<img src="img_girl.jpg" width="500" height="600">

<img src="img_typo.jpg" alt="Girl with a jacket">

<p style="color:red;">This is a red paragraph.</p>


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

Page 2 of 13
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

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

<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>

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

<b>This text is bold</b>

<strong>This text is important!</strong>

<i>This text is italic</i>

<small>This is some smaller text.</small>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

 ins->Insert Tag

Page 3 of 13
<p>This <sup>superscripted</sup> text.</p>

<p>This is <sub>subscripted</sub> text.</p>

<p>Do not forget <mark>milk</mark> today</p>

<em>This text is emphasized</em>

<p><s>My car is blue.</s></p>

<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

<!-- Write your comments here -->

<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

 Inline Css
 External Css
 Internal Css

Page 4 of 13
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

<style>

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>

<!—------------Link------------------>

<p><a href="#C4">Jump to Chapter 4</a></p>


<p><a href="#C10">Jump to Chapter 10</a></p>

<!—------------Paragraph------------------>

<h2 id="C4">Chapter 4</h2>


<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>


<p>This chapter explains ba bla bla</p>

Page 5 of 13
<img src="pic_trulli.jpg" alt="Italian Trulli">

<style>
body {
background-image: url('img_girl.jpg');
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>

<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>

Ordered List

Unordered List

Description List

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
Page 6 of 13
</ul>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Ex"></iframe>


<iframe width="420" height="315"src="https://www.youtube.com/embed/tgbNymZ7vqY?
autoplay=1&mute=1">
</iframe>

<code>
x = 5;
y = 6;
z = x + y;
</code>

Page 7 of 13
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

<figure>

<img src="...." alt="..." style="width:100%">

<figcaption> Fig.1 – Trulli </figcaption>

</figure>

Page 8 of 13
Text:-
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

Radio Buttons:-
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
</form>

Checkbox:-
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
</form>

Submit button:-
<input type="submit" value="Submit">

Password:-
<form>
<input type="password" id="pwd" name="pwd">
</form>

Reset:-
<form>
<input type="password" id="pwd" name="pwd">
<input type="reset">
</form>

Page 9 of 13
 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">

Your browser does not support HTML video.

</video>

Page 10 of 13
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
special events.</p>
</details>

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>


<p>I have a date on <time datetime="2008-02-14 20:00">Valentines
day</time>.</p>

<p>This is some normal text.</p>


<p><small>This is some smaller text.</small></p>

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Page 11 of 13
<p>The <abbr title="World Health">WHO</abbr> was founded in 1948.</p>

<address>
Written by <a href="[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is
the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has
been the second most popular web browser since January, 2018.</p>
</article>

Page 12 of 13
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Page 13 of 13

You might also like