3: HTML blog's visual content with source code
1: Text sizes
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
2: Hyperlink with hower text and open in new tab or same
C++
3: New page hyperlink and open in same or new tab
HTML
4: Different text formating tags
This is normal text
Ittalics
Bold
Big
Small
This is Subscript text
This is Superscript text
inserted
deleted
mark
5: Unorderes list:
Things I like are:
- Macaroni
- Burgers
- Pizza
- Peperoni
- Cheese
- Fagita
- Crown
Pizzas types are:
6: Ordered list:
- With numbers:
- First
- Second
- Third
- Fourth
- With Uppercase Alphabet
- First
- Second
- Third
- Fourth
- With Lowercase Alphabet
- First
- Second
- Third
- Fourth
- With Uppercase Roman
- First
- Second
- Third
- Fourth
- With Lowercase Roman
- First
- Second
- Third
- Fourth
7: Discription list:
- HTML:
- This adds structure
- CSS:
- This adds design
- Javascript:
- This adds fucntionality
8: Basic Table:
9: Table with design:
- Align center, table outines black,
- row 1 grey center aligned and height 50
- row 2 lightgrey center aligned and height 50
- each element size 100
10: Inline CSS (color):
Sample text
Sample text
Sample text
Sample text
10: Span:
- Use mostly when adding css property to part of sentence
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
12: Div:
- Use mostly when adding css property to block level element ie multiple lines at same time
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Deleniti enim quidem omnis explicabo optio voluptate!
Soluta quas in atque accusantium nostrum, incidunt expedita
sunt fuga ratione, rerum, facere blanditiis velit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Deleniti enim quidem omnis explicabo optio voluptate!
Soluta quas in atque accusantium nostrum, incidunt expedita
sunt fuga ratione, rerum, facere blanditiis velit?
13: mtags:
- Used at top of html code
14: iframes:
- Used to embed other pages in your page
- Usually used to show ads
- Can also be used to embed a search engine
15: Simple Button:
16: Basic html form:
17: Add image to webpage:
- Add image
- adjust height
- add Hyperlink
- add hover text and open in new or same tab
- alternative text when image is loading
18: Add audio to webpage:
- Add audio (multiple format in case browser dont support one)
- add controls
- choose mute by default
- choose autoplay
- choose loop
- Show messege when unsupported by browser
19: Add video to webpage:
- Add video (multiple format in case browser dont support one)
- add controls
- choose mute by default
- choose autoplay
- choose loop
- add width of video window
- Show messege when unsupported by browser
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
</head>
<body>
<P>
<h1><ins><mark>1: Text sizes</mark></ins></h1>
</P>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<br>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>2: Hyperlink with hower text and open in new tab or same</mark></ins></h1>
</p>
<a href="https://htmlcssjswithdev.blogspot.com/2023/03/2-css.html" title="Goto C++ Blogs" target="_blank">
<h1>C++</h1>
</a>
<br>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>3: New page hyperlink and open in same or new tab</mark></ins></h1>
</p>
<a href="page_2.html" title="page 2" target="_blank">
<h1>HTML</h1>
</a>
<br>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>4: Different text formating tags</mark></ins></h1>
</p>
<ul>
<p>This is normal text</p>
<p><i>Ittalics</i></p>
<p><b>Bold</b></p>
<p><big>Big</big></p>
<p><small>Small</small></p>
<p>This is <sub>Subscript</sub> text</p>
<p>This is <sup>Superscript</sup> text</p>
<p><ins>inserted</ins></p>
<p><del>deleted</del></p>
<p><mark>mark</mark></p>
</ul>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>5: Unorderes list:</mark></ins></h1>
</p>
<p><b>
<h1><big><ins>Things I like are: </ins></big></h1>
</b></p>
<ul>
<li>Macaroni</li>
<li>Burgers</li>
<li>Pizza</li>
<ul>
<h3>Pizzas types are:</h3>
<li>Peperoni</li>
<li>Cheese</li>
<li>Fagita</li>
<li>Crown</li>
</ul>
</ul>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>6: Ordered list:</mark></ins></h1>
</p>
<ol>
<b>
<li>With numbers:</li>
</b>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ol>
<b>
<li>With Uppercase Alphabet</li>
</b>
<ol type="A">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<br>
</ol>
<b>
<li>With Lowercase Alphabet</li>
</b>
<ol type="a">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<br>
</ol>
<b>
<li>With Uppercase Roman</li>
</b>
<ol type="I">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<br>
</ol>
<b>
<li>With Lowercase Roman</li>
</b>
<ol type="i">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ol>
</ol>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>7: Discription list:</mark></ins></h1>
</p>
<dl>
<dt><b><big>HTML:</big></b></dt>
<dd>This adds structure</dd>
<dt><b><big>CSS:</big></b></dt>
<dd>This adds design</dd>
<dt><b><big>Javascript:</big></b></dt>
<dd>This adds fucntionality</dd>
</dl>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>8: Basic Table:</mark></ins></h1>
</p>
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td>Open</td>
<td>Closed</td>
<td>Open</td>
<td>Closed</td>
<td>Open</td>
<td>Closed</td>
<td>Open</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>9: Table with design:</mark></ins></h1>
<p>
<p><b>
<ul><big>
<li>Align center, table outines black,</li>
<li>row 1 grey center aligned and height 50</li>
<li>row 2 lightgrey center aligned and height 50</li>
<li>each element size 100</li>
</big></ul>
</b>
</p>
<table align="center" bgcolor="black">
<tr bgcolor="grey" align="center" height="50">
<th width="100">Monday</th>
<th width="100">Tuesday</th>
<th width="100">Wednesday</th>
<th width="100">Thursday</th>
<th width="100">Friday</th>
<th width="100">Saturday</th>
<th width="100">Sunday</th>
</tr>
<tr bgcolor="lightgrey" align="center" height="50">
<td width="100">Open</td>
<td width="100">Closed</td>
<td width="100">Open</td>
<td width="100">Closed</td>
<td width="100">Open</td>
<td width="100">Closed</td>
<td width="100">Open</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>10: Inline CSS (color):</mark></ins></h1>
</p>
<h1>
<p style="color: aqua;">Sample text</p>
<p style="color: rgb(20, 20, 252);">Sample text</p>
<p style="color: #09a5ed;">Sample text</p>
<p style="background-color: aquamarine;">Sample text</p>
</h1>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>10: Span:</mark></ins></h1>
</p>
<p><b>
<ul><big>
<li>Use mostly when adding css property to part of sentence</li>
</big>
</ul>
</b>
</p>
<p><b>
<h2>
<span style="color: blue;">Lorem ipsum dolor sit </span><span style="color: violet;">amet consectetur,
adipisicing elit.</span>
</h2>
</b>
</p>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>12: Div:</mark></ins></h1>
</p>
<p><b>
<ul><big>
<li>Use mostly when adding css property to block level element ie multiple lines at same time</li>
</big>
</ul>
</b>
</p>
<p><b>
<h2>
<div style="color: blue; background-color: rgb(83, 228, 143);">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Deleniti enim quidem omnis explicabo optio voluptate!</p>
<p>Soluta quas in atque accusantium nostrum, incidunt expedita</p>
<p>sunt fuga ratione, rerum, facere blanditiis velit?</p>
</div>
</h2>
</b>
</p>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>13: mtags:</mark></ins></h1>
</p>
<p><b>
<ul><big>
<li>Used at top of html code </li>
</big>
</ul>
</b>
</p>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>14: iframes:</mark></ins></h1>
</p>
<p><b>
<ul><big>
<li>Used to embed other pages in your page </li>
<li>Usually used to show ads </li>
<li>Can also be used to embed a search engine </li>
</big>
</ul>
</b>
</p>
<iframe width="800" height="500" src="https://www.bing.com/" frameborder="0"></iframe>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>15: Simple Button:</mark></ins></h1>
</p>
<a href="https://www.google.com/" title="Go o google" target="_blank">
<button style="background-color: aqua; border-radius: 7px;">Click me</button>
</a>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>16: Basic html form:</mark></ins></h1>
</p>
<form action="">
<h3>
<div>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" placeholder="First" required>
</div>
<br>
<div>
<label for="lname">Last name:</label>
<input type="text" name="lname" id="lname" placeholder="Last" required>
</div>
<br>
<div>
<label for="pass">Password:</label>
<input type="password" name="pass" id="pass" maxlength="12" required>
</div>
<br>
<div>
<label for="mail">Email:</label>
<input type="email" name="mail" id="mail" placeholder="name@gmail.com" required>
</div>
<br>
<div>
<label for="phone">Phone Number:</label>
<input type="tel" name="phone" id="phone" placeholder="03001234567" required>
</div>
<br>
<div>
<label for="bday">Date of Birth:</label>
<input type="date" name="bday" id="bday" required>
</div>
<br>
<div>
<label for="quan">Quantity:</label>
<input type="number" name="quan" id="quan" min="1" max="20" value="1" required>
</div>
<br>
<div>
<label for="title">Title:</label>
<label for="mr">Mr.</label>
<input type="radio" name="title" id="mr">
<label for="mrs">Mrs.</label>
<input type="radio" name="title" id="mrs">
<label for="r"> Not Specified</label>
<input type="radio" name="title" id="r">
</div>
<br>
<div>
<label for="pay">Payment Option:</label>
<select name="pay" id="pay">
<option value="mastercard">Mater Card</option>
<option value="visa">Visa</option>
<option value="jazzcash">Jazz Cash</option>
<option value="easypaisa">Easy Paisa</option>
<option value="COD">Cash on Delivery</option>
</select>
</div>
<br>
<div>
<label for="sub">Subscribe:</label>
<input type="checkbox" name="sub" id="sub">
</div>
<br>
<div>
<input type="reset">
</div>
<br>
<div>
<input type="submit">
</div>
</h3>
</form>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>17: Add image to webpage:</mark></ins></h1>
</p>
<p><b>
<ul><big>
<li>Add image</li>
<li>adjust height</li>
<li>add Hyperlink</li>
<li>add hover text and open in new or same tab</li>
<li>alternative text when image is loading</li>
</big></ul>
</b>
</p>
<a href="https://en.wikipedia.org/wiki/Scenery_(disambiguation)" title="more about scenery" target="_blank">
<img src="/sample image.jpg" alt="scenery" height="300">
</a>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>18: Add audio to webpage:</mark></ins></h1>
</p>
<p><b>
<ul><big>
<li>Add audio (multiple format in case browser dont support one)</li>
<li>add controls</li>
<li>choose mute by default</li>
<li>choose autoplay</li>
<li>choose loop</li>
<li>Show messege when unsupported by browser</li>
</big></ul>
</b>
</p>
<audio controls autoplay muted loop>
<source src="/sample audio.mp3">
<source src="/sample audio.waw">
This browser does not support HTML5 audio file
</audio>
<br>
<br>
<br>
<br>
<hr>
<p>
<h1><ins><mark>19: Add video to webpage:</mark></ins></h1>
</p>
<p><b>
<ul><big>
<li>Add video (multiple format in case browser dont support one)</li>
<li>add controls</li>
<li>choose mute by default</li>
<li>choose autoplay</li>
<li>choose loop</li>
<li>add width of video window</li>
<li>Show messege when unsupported by browser</li>
</big>
</ul>
</b>
</p>
<video controls autoplay muted loop width="500">
<source src="/sample video.mp4">
<source src="/sample video.mkv">
This browser does not support HTML5 audio
</video>
<br>
<br>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
Comments
Post a Comment